Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:elementplus 物料更新 #746

Open
wants to merge 11 commits into
base: ospp-2024/001-element-plus
Choose a base branch
from

Conversation

Dive12300
Copy link

@Dive12300 Dive12300 commented Aug 19, 2024

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Background and solution

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Introduced a comprehensive configuration for the Vue framework with centralized component definitions and usage examples.
    • Added a utility for generating structured JSON data from the Element Plus component library, streamlining access to component information.
    • Implemented a detailed configuration for the ElButton component, enhancing customization options for developers.
  • Chores

    • Added new dependencies to support HTTP requests and HTML parsing.
    • Improved packaging and schema management for better integration of UI components.
  • Documentation

    • Included example snippets for using new components within Vue templates.

Copy link
Contributor

coderabbitai bot commented Aug 19, 2024

Walkthrough

This update enhances the Vue framework integration by introducing a new bundle_new.json for the ElButton component configuration and a utility script to generate structured component data from the Element Plus documentation. The changes focus on improving component management and streamlining the development process.

Changes

File(s) Change Summary
bundle.json, packages/design-core/public/mock/bundle_new.json Introduced comprehensive configuration for Vue components using Element Plus, detailing UI components with attributes and providing usage snippets for ElButton.
packages/.../genMeterials.js New file automates JSON data generation from Element Plus documentation, utilizing axios and cheerio.
packages/vue-generator/.../package.json Downgraded vite-plugin-static-copy version, possibly for compatibility reasons.
packages/vue-generator/src/generator/vue/sfc/generateAttribute.js Updated string interpolation for Vue template compatibility in handleSlotBindAttrHook.
packages/vue-generator/src/plugins/genGlobalState.js Improved string value handling in genDependenciesPlugin, enhancing robustness.
packages/vue-generator/test/testcases/.../index.js Added export for testState to enhance state management.
packages/vue-generator/test/testcases/.../testState.js New Pinia store with state, getters, and actions for managing application data.
packages/vue-generator/test/testcases/.../mockData.js Expanded globalState structure for enhanced state management capabilities.
packages/vue-generator/test/testcases/sfc/case06/... Introduced multiple new test files and JSON mapping for the TinyTree component, validating component generation.
packages/vue-generator/vite.config.mjs Updated test configuration to exclude node_modules from testing.
scripts/buildMaterials.mjs Enhanced material management by integrating application schema data and component mappings.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant genMeterials.js
    participant ElementPlusAPI
    participant bundle_new.json

    Developer->>genMeterials.js: Initiate data generation
    genMeterials.js->>ElementPlusAPI: Fetch component data
    ElementPlusAPI-->>genMeterials.js: Return component details
    genMeterials.js->>bundle_new.json: Generate and save JSON structure
    Developer-->>bundle_new.json: Review component configuration
Loading

🐰 In the meadow where bunnies play,
New changes hop in, bright as day!
With buttons and snippets, oh what fun,
Vue's magic grows, we’re on the run!
State management's smart, our code is neat,
Let's build our dreams, with joy, not defeat! 🌼


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Outside diff range, codebase verification and nitpick comments (3)
scripts/buildMaterials.mjs (1)

Line range hint 102-174: Optimize component processing logic.

The current logic processes each file and updates the componentsMap and packagesMap. Consider optimizing the loop to reduce repeated operations or unnecessary checks.

files.forEach((file) => {
  const material = fsExtra.readJsonSync(file, { throws: false })

  if (!material) {
    logger.error(`文件格式有误 (${path.join(process.cwd(), file)})`)
    return
  }

  const isBlock = file.includes('/blocks/')
  const valid = isBlock ? validateBlock(file, material) : validateComponent(file, material)

  if (!valid) return

  if (isBlock) {
    blocks.push(material)
    if (!appInfoBlocksLabels.includes(material.label)) {
      appInfo.blockHistories.push(material)
    }
  } else {
    const { snippets: componentSnippets, category, ...componentInfo } = material
    components.push(componentInfo)

    const snippet = snippets.find((item) => item.group === category)
    if (snippet) {
      componentSnippets && snippet.children.push(componentSnippets[0])
    } else if (category && componentInfo) {
      snippets.push({ group: category, children: componentSnippets || [] })
    }

    const { component, npm = {} } = componentInfo
    componentsMap.push({ component, npm })

    if (connection.connected) {
      connection.initDB(material)
    }

    appInfo.materialHistory.components = componentsMap

    const { package: packageName = '', version = '', exportName = '' } = npm || {}
    const mapItem = { componentName: component, package: packageName, version, exportName }
    
    if (typeof npm.destructuring === 'boolean') {
      mapItem.destructuring = npm.destructuring
    }

    if (npm.package) {
      packagesMap.push(mapItem)
    }
  }
})
bundle1.json (2)

3-2010: Ensure Consistency Across Component Entries.

The component entries in the "components" section appear consistent in terms of structure and fields. However, ensure that all necessary fields are populated with meaningful data, especially icon, description, screenshot, tags, and keywords. These fields are currently empty for all components and could enhance the usability and documentation of each component.


2013-2706: Verify Snippet Accuracy and Completeness.

The snippets provide usage examples for various components. Ensure that each snippet accurately reflects the component's usage and that the description field clearly explains the purpose of the snippet. Additionally, consider adding more detailed examples or edge cases if applicable to enhance the snippet's educational value.

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a7ba103 and 71be733.

Files selected for processing (16)
  • bundle.json (1 hunks)
  • bundle1.json (1 hunks)
  • package.json (1 hunks)
  • packages/design-core/public/mock/genMeterials.js (1 hunks)
  • packages/vue-generator/package.json (1 hunks)
  • packages/vue-generator/src/generator/vue/sfc/generateAttribute.js (1 hunks)
  • packages/vue-generator/src/plugins/genGlobalState.js (2 hunks)
  • packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js (1 hunks)
  • packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js (1 hunks)
  • packages/vue-generator/test/testcases/generator/mockData.js (1 hunks)
  • packages/vue-generator/test/testcases/sfc/case06/case06.test.js (1 hunks)
  • packages/vue-generator/test/testcases/sfc/case06/components-map.json (1 hunks)
  • packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue (1 hunks)
  • packages/vue-generator/test/testcases/sfc/case06/page.schema.json (1 hunks)
  • packages/vue-generator/vite.config.mjs (1 hunks)
  • scripts/buildMaterials.mjs (4 hunks)
Files skipped from review due to trivial changes (1)
  • packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js
Additional context used
Biome
packages/vue-generator/src/generator/vue/sfc/generateAttribute.js

[error] 232-233: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

Additional comments not posted (17)
packages/vue-generator/test/testcases/sfc/case06/components-map.json (1)

1-8: JSON structure is correct.

The JSON object correctly maps the component with all necessary fields. Ensure that the version number ^3.10.0 aligns with the versions used in your project dependencies.

packages/vue-generator/test/testcases/sfc/case06/case06.test.js (1)

1-12: Test structure is correct.

The test case is well-structured and uses vitest effectively to verify the slot declaration generation. Ensure that the snapshot slotTest.vue is up-to-date with expected outputs.

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js (1)

4-9: Ensure consistency in array data types.

The food and desc.rest arrays contain mixed data types (strings and numbers). Consider ensuring consistency in data types to avoid potential issues in data handling.

packages/vue-generator/vite.config.mjs (1)

20-20: Configuration change is appropriate.

Excluding node_modules from tests is a standard practice to streamline the testing process and avoid issues with third-party libraries.

packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue (1)

1-53: Vue component structure is correct.

The component uses slots and data bindings effectively. Ensure that the injected dependencies are correctly configured in the application context.

packages/vue-generator/package.json (1)

50-50: Verify the reason for downgrading vite-plugin-static-copy.

The version of vite-plugin-static-copy has been downgraded from ^1.0.4 to ^0.16.0. Please ensure this change is intentional and verify that it does not introduce any regressions or missing features.

packages/vue-generator/src/plugins/genGlobalState.js (3)

47-48: Good improvement in string handling.

The change to encapsulate string values in single quotes enhances consistency and readability.


60-65: Improved robustness with array destructuring.

The use of array destructuring for filtering entries in getters and actions improves robustness by aligning with expected data structures.


72-72: Consistent use of single quotes for id.

The change to use single quotes for the id property in defineStore ensures consistency in string formatting.

package.json (1)

74-76: Verify the necessity of new dependencies.

The new dependencies axios and cheerio have been added. Please ensure they are necessary for the project's functionality and are used appropriately.

Verification successful

Verified Usage of New Dependencies

The dependencies axios and cheerio are actively used in the codebase for HTTP requests and HTML parsing, respectively. Their inclusion in the project is justified based on the current usage patterns.

  • axios is used in multiple files for handling HTTP requests.
  • cheerio is used for parsing HTML content.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of new dependencies `axios` and `cheerio`.

# Test: Search for usage of `axios` and `cheerio` in the codebase. Expect: Relevant code using these dependencies.
rg --type js 'axios|cheerio'

Length of output: 5302

packages/vue-generator/test/testcases/sfc/case06/page.schema.json (1)

1-143: Verify the schema structure and usage.

This new JSON file defines a schema for a page component. Please ensure it aligns with the expected format and usage within the project.

packages/design-core/public/mock/genMeterials.js (1)

1-157: Implementation aligns with new dependencies.

The new file effectively uses axios for HTTP requests and cheerio for HTML parsing. The implementation appears robust with appropriate error handling and logging. Consider adding unit tests for these functions to ensure reliability.

scripts/buildMaterials.mjs (2)

177-178: Ensure appSchema.data.componentsMap is correctly updated.

Verify that packagesMap is correctly assigned to appSchema.data.componentsMap and that this structure aligns with any expected schema.

Verification successful

Verification Successful: appSchema.data.componentsMap is correctly updated.

The structure of componentsMap is consistent and aligns with the expected schema. Each entry contains the necessary fields such as componentName, package, exportName, destructuring, and version. No issues were found with the assignment of packagesMap to appSchema.data.componentsMap.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the structure of `appSchema.data.componentsMap`.
# Test: Check if `componentsMap` in `appSchema` is correctly updated.
jq '.data.componentsMap' mockServer/src/mock/get/app-center/v1/apps/schema/918.json

Length of output: 7352


15-16: Ensure the JSON schema path is correct.

The appSchemaPath points to a specific JSON file. Verify that this path is correct and that the file exists in the expected location.

Verification successful

The JSON schema file exists at the specified path. The file mockServer/src/mock/get/app-center/v1/apps/schema/918.json is present, confirming the path is correct.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the existence of the JSON schema file at the specified path.
# Test: Check if the file exists.
file="mockServer/src/mock/get/app-center/v1/apps/schema/918.json"
if [[ -f "$file" ]]; then
  echo "File exists: $file"
else
  echo "File does not exist: $file"
fi

Length of output: 288

packages/vue-generator/test/testcases/generator/mockData.js (1)

679-714: Ensure globalState structure is correctly defined.

The globalState structure now includes state, getters, and actions. Verify that the functions are correctly defined and that the state management logic aligns with the intended use.

Verification successful

The globalState structure is correctly defined. The globalState includes the expected state, getters, and actions, with functions defined as JavaScript functions. The structure aligns with typical state management logic.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the structure of `globalState`.
# Test: Check if `globalState` includes correct state, getters, and actions.
jq '.globalState' packages/vue-generator/test/testcases/generator/mockData.js

Length of output: 134


Script:

#!/bin/bash
# Use ast-grep to find the `globalState` object and verify its structure.
ast-grep --lang javascript --pattern 'globalState: [
  {
    id: $_,
    state: $_,
    getters: $_,
    actions: $_
  }
]' packages/vue-generator/test/testcases/generator/mockData.js

Length of output: 185


Script:

#!/bin/bash
# Use rg to search for the `globalState` keyword and its surrounding context to understand its structure.
rg 'globalState' -A 10 packages/vue-generator/test/testcases/generator/mockData.js

Length of output: 332


Script:

#!/bin/bash
# Use rg to search for the `globalState` keyword and capture more lines to verify the complete structure.
rg 'globalState' -A 30 packages/vue-generator/test/testcases/generator/mockData.js

Length of output: 835

bundle.json (1)

1-2010: Review JSON structure for completeness and correctness.

Ensure that all components have necessary fields such as id, version, name, component, npm, etc. Verify that the JSON is correctly formatted and aligned with the expected schema.

Verification successful

JSON Structure Verified Successfully

The JSON structure in bundle.json is correctly formatted and contains all necessary fields such as id, version, name, component, and npm. No issues were found.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the JSON structure in `bundle.json`.
# Test: Check if the JSON is correctly formatted and contains all necessary fields.
jq '.' bundle.json

Length of output: 73889

bundle1.json (1)

1-2710: Overall JSON Structure is Well-Formed.

The JSON structure is well-formed and consistent. Ensure that this structure aligns with any existing schemas or expectations within your project to prevent integration issues.

@hexqi hexqi added the ospp-2024 ospp-2024 label Aug 20, 2024
@@ -0,0 +1,2710 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个文件和bundle.json是一样的吗,如果是多余的需要删掉

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

看起来这个问题并没有处理,为什么要点resolve呢?
如果需要解决,解决后再点resolve
如果不需要解决,请先在下面回复

@hexqi
Copy link
Collaborator

hexqi commented Aug 24, 2024

需要对所有commit添加签名,签名后commit后会有一个Verified的小绿标,如何对提交签名可以搜索下,这块教程很多
image

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


You need to add a signature to all commits. After signing, there will be a small green mark of Verified after the commit. You can search for how to sign the commit. There are many tutorials on this topic.
image

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 71be733 and 71ef42a.

Files selected for processing (2)
  • bundle.json (1 hunks)
  • packages/design-core/public/mock/genMeterials.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • packages/design-core/public/mock/genMeterials.js
Additional comments not posted (1)
bundle.json (1)

1-641: Ensure completeness and accuracy of metadata.

The JSON file is well-structured and includes comprehensive metadata for the ElButton component. However, ensure the following:

  1. Documentation URLs: The doc_url field is empty. Ensure to provide a valid URL for the component documentation.
  2. Screenshots: The screenshot field is empty. Ensure to provide a valid URL for the component screenshot.
  3. Tags and Keywords: The tags and keywords fields are empty. Ensure to provide relevant tags and keywords for better searchability.
  4. Widget Components: The widget components for properties like loading-icon, icon, and tag are set to "__ERROR__". Ensure to replace these placeholders with valid component names.
  5. Dependencies: The dependencies field is set to null. Ensure to provide any necessary dependencies for the component.

Verify the completeness and accuracy of the metadata fields mentioned above.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 71ef42a and 284d4d4.

Files selected for processing (1)
  • packages/design-core/public/mock/bundle_new.json (1 hunks)
Additional comments not posted (6)
packages/design-core/public/mock/bundle_new.json (6)

1-3: LGTM!

The general structure and metadata are correctly defined.

The code changes are approved.


5-29: LGTM!

The components section is well-defined and includes all necessary details about the ElButton component.

The code changes are approved.


30-56: LGTM!

The configure section is well-defined and includes all necessary configuration details for the ElButton component.

The code changes are approved.


57-569: LGTM!

The schema section is well-defined and includes all necessary schema details for the ElButton component.

The code changes are approved.


573-573: LGTM!

The blocks section is correctly defined as an empty array.

The code changes are approved.


574-589: LGTM!

The snippets section is well-defined and includes all necessary details about the ElButton snippet.

The code changes are approved.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 284d4d4 and c03697a.

Files selected for processing (1)
  • packages/design-core/public/mock/genMeterials.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • packages/design-core/public/mock/genMeterials.js

@@ -47,7 +47,7 @@
"fs-extra": "^10.0.1",
"prettier": "^2.6.1",
"vite": "^4.3.7",
"vite-plugin-static-copy": "^1.0.4",
"vite-plugin-static-copy": "^0.16.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vue-generatator这些代码的变更都是develop分支最新的代码,不需要同步过来,请移除下。
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ospp-2024 ospp-2024
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants