feat(material): add material package #537
Conversation
WalkthroughThe recent updates introduce a comprehensive setup for TinyEngine's materials package, including new configuration schemas for various components, a build script for material assets, and updates to the package configuration. The changes enhance the framework's ability to validate, build, and serve component libraries, facilitating a more modular and customizable development experience. Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant Developer
participant CLI
participant BuildScript
participant Server
Developer->>CLI: Run build command
CLI->>BuildScript: Initialize build
BuildScript->>BuildScript: Validate components
BuildScript->>BuildScript: Generate component bundles
BuildScript->>BuildScript: Build components from JSON files
BuildScript->>Server: Serve material assets
Server->>Developer: Material assets ready
Poem
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- packages/materials/README.md (1 hunks)
- packages/materials/buildMaterials.mjs (1 hunks)
- packages/materials/package.json (1 hunks)
- packages/materials/src/ElementPlus/ElButton.json (1 hunks)
- packages/materials/src/ElementPlus/ElInput.json (1 hunks)
- packages/materials/src/TinyVue/TinyButton.json (1 hunks)
- packages/materials/src/TinyVue/TinyInput.json (1 hunks)
- packages/materials/src/html/Input.json (1 hunks)
Files skipped from review due to trivial changes (5)
- packages/materials/package.json
- packages/materials/src/ElementPlus/ElButton.json
- packages/materials/src/TinyVue/TinyButton.json
- packages/materials/src/TinyVue/TinyInput.json
- packages/materials/src/html/Input.json
Additional context used
Markdownlint
packages/materials/README.md
12-12: null (MD032, blanks-around-lists)
Lists should be surrounded by blank lines
33-33: null (MD034, no-bare-urls)
Bare URL used
Additional comments not posted (4)
packages/materials/buildMaterials.mjs (3)
24-42: Ensure all required fields are checked invalidateComponent.This function correctly checks for missing required fields and logs appropriate errors. Good use of array operations for validation.
118-154: Ensure error handling inbuildComponentsis robust.Good use of try-catch for error handling. Consider adding more specific error messages or handling different types of exceptions if applicable.
156-190: Review the implementation of theservefunction.The function sets up a watcher and a static server correctly. Good use of asynchronous programming and logging.
packages/materials/src/ElementPlus/ElInput.json (1)
1-292: Review the schema definition forElInput.The JSON schema is well-structured and includes comprehensive details about the component, its properties, events, and slots. Good use of nested structures and data types.
| ``` | ||
|
|
||
| 解释： | ||
| 1. 会持续监听 src 目录下文件变动，持续构建出来物料产物 |
There was a problem hiding this comment.
Add a blank line before the list for proper Markdown formatting.
+
解释：Committable suggestion was skipped due to low confidence.
Tools
Markdownlint
12-12: null (MD032, blanks-around-lists)
Lists should be surrounded by blank lines
|
|
||
| ## 添加自己的物料 | ||
|
|
||
| 请先大致了解 TinyEngine 物料协议：https://opentiny.design/tiny-engine#/protocol |
There was a problem hiding this comment.
Replace the bare URL with a Markdown link for better readability and to adhere to best practices.
- 请先大致了解 TinyEngine 物料协议：https://opentiny.design/tiny-engine#/protocol
+ 请先大致了解 TinyEngine 物料协议：[TinyEngine 物料协议](https://opentiny.design/tiny-engine#/protocol)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 请先大致了解 TinyEngine 物料协议：https://opentiny.design/tiny-engine#/protocol | |
| 请先大致了解 TinyEngine 物料协议：[TinyEngine 物料协议](https://opentiny.design/tiny-engine#/protocol) |
Tools
Markdownlint
33-33: null (MD034, no-bare-urls)
Bare URL used
| const generateComponents = async (entry) => { | ||
| const files = await fg('*.json', { cwd: entry }) | ||
| if (!files.length) { | ||
| // logger.warn('物料文件夹为空，请先执行`pnpm splitMaterials`命令拆分物料资产包') | ||
| return | ||
| } | ||
|
|
||
| const bundle = { | ||
| componentsMap: [], | ||
| components: [], | ||
| snippets: [] | ||
| } | ||
|
|
||
| files.forEach((file) => { | ||
| const material = fsExtra.readJsonSync(path.resolve(entry, file), { throws: false }) | ||
|
|
||
| if (!material) { | ||
| const fileFullPath = path.join(process.cwd(), file) | ||
|
|
||
| logger.error(`文件格式有误 (${fileFullPath})`) | ||
|
|
||
| return | ||
| } | ||
|
|
||
| const valid = validateComponent(file, material) | ||
|
|
||
| if (!valid) return | ||
|
|
||
| const { snippets: componentSnippets, category, ...componentInfo } = material | ||
|
|
||
| bundle.components.push(componentInfo) | ||
|
|
||
| const snippet = bundle.snippets.find((item) => item.group === category) | ||
|
|
||
| if (snippet) { | ||
| componentSnippets && snippet.children.push(componentSnippets[0]) | ||
| } else if (category && componentInfo) { | ||
| bundle.snippets.push({ | ||
| group: category, | ||
| children: componentSnippets || [] | ||
| }) | ||
| } | ||
|
|
||
| const npmInfo = componentInfo.npm | ||
| const { package: packageName = '', version = '', exportName = '' } = npmInfo | ||
|
|
||
| const mapItem = { | ||
| componentName: componentInfo.component, | ||
| package: packageName, | ||
| version, | ||
| exportName | ||
| } | ||
|
|
||
| if (typeof npmInfo.destructuring === 'boolean') { | ||
| mapItem.destructuring = componentInfo.npm.destructuring | ||
| } | ||
|
|
||
| if (npmInfo.package) { | ||
| bundle.componentsMap.push(mapItem) | ||
| } | ||
| }) | ||
|
|
||
| return bundle |
There was a problem hiding this comment.
Optimize the generateComponents function to handle empty directories more gracefully.
Consider logging a warning when the materials directory is empty, which could help in debugging.
- // logger.warn('物料文件夹为空，请先执行`pnpm splitMaterials`命令拆分物料资产包')
+ logger.warn('物料文件夹为空，请先执行`pnpm splitMaterials`命令拆分物料资产包')Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const generateComponents = async (entry) => { | |
| const files = await fg('*.json', { cwd: entry }) | |
| if (!files.length) { | |
| // logger.warn('物料文件夹为空，请先执行`pnpm splitMaterials`命令拆分物料资产包') | |
| return | |
| } | |
| const bundle = { | |
| componentsMap: [], | |
| components: [], | |
| snippets: [] | |
| } | |
| files.forEach((file) => { | |
| const material = fsExtra.readJsonSync(path.resolve(entry, file), { throws: false }) | |
| if (!material) { | |
| const fileFullPath = path.join(process.cwd(), file) | |
| logger.error(`文件格式有误 (${fileFullPath})`) | |
| return | |
| } | |
| const valid = validateComponent(file, material) | |
| if (!valid) return | |
| const { snippets: componentSnippets, category, ...componentInfo } = material | |
| bundle.components.push(componentInfo) | |
| const snippet = bundle.snippets.find((item) => item.group === category) | |
| if (snippet) { | |
| componentSnippets && snippet.children.push(componentSnippets[0]) | |
| } else if (category && componentInfo) { | |
| bundle.snippets.push({ | |
| group: category, | |
| children: componentSnippets || [] | |
| }) | |
| } | |
| const npmInfo = componentInfo.npm | |
| const { package: packageName = '', version = '', exportName = '' } = npmInfo | |
| const mapItem = { | |
| componentName: componentInfo.component, | |
| package: packageName, | |
| version, | |
| exportName | |
| } | |
| if (typeof npmInfo.destructuring === 'boolean') { | |
| mapItem.destructuring = componentInfo.npm.destructuring | |
| } | |
| if (npmInfo.package) { | |
| bundle.componentsMap.push(mapItem) | |
| } | |
| }) | |
| return bundle | |
| const generateComponents = async (entry) => { | |
| const files = await fg('*.json', { cwd: entry }) | |
| if (!files.length) { | |
| logger.warn('物料文件夹为空，请先执行`pnpm splitMaterials`命令拆分物料资产包') | |
| return | |
| } | |
| const bundle = { | |
| componentsMap: [], | |
| components: [], | |
| snippets: [] | |
| } | |
| files.forEach((file) => { | |
| const material = fsExtra.readJsonSync(path.resolve(entry, file), { throws: false }) | |
| if (!material) { | |
| const fileFullPath = path.join(process.cwd(), file) | |
| logger.error(`文件格式有误 (${fileFullPath})`) | |
| return | |
| } | |
| const valid = validateComponent(file, material) | |
| if (!valid) return | |
| const { snippets: componentSnippets, category, ...componentInfo } = material | |
| bundle.components.push(componentInfo) | |
| const snippet = bundle.snippets.find((item) => item.group === category) | |
| if (snippet) { | |
| componentSnippets && snippet.children.push(componentSnippets[0]) | |
| } else if (category && componentInfo) { | |
| bundle.snippets.push({ | |
| group: category, | |
| children: componentSnippets || [] | |
| }) | |
| } | |
| const npmInfo = componentInfo.npm | |
| const { package: packageName = '', version = '', exportName = '' } = npmInfo | |
| const mapItem = { | |
| componentName: componentInfo.component, | |
| package: packageName, | |
| version, | |
| exportName | |
| } | |
| if (typeof npmInfo.destructuring === 'boolean') { | |
| mapItem.destructuring = componentInfo.npm.destructuring | |
| } | |
| if (npmInfo.package) { | |
| bundle.componentsMap.push(mapItem) | |
| } | |
| }) | |
| return bundle |
|
|
||
| function start() { | ||
| const commandsMap = { | ||
| serve: serve, | ||
| build: build, | ||
| 'build:split': buildSplit | ||
| } | ||
|
|
||
| const command = process.argv.slice(2) | ||
|
|
||
| if (!commandsMap[command]) { | ||
| logger.error(`[@opentiny/tiny-engine-materials] 不支持${command}命令`) | ||
|
|
||
| return | ||
| } | ||
|
|
||
| commandsMap[command]() | ||
| } |
There was a problem hiding this comment.
Tip
Codebase Verification
The start function in packages/materials/buildMaterials.mjs does include a basic validation check to ensure the command is in the commandsMap. However, it only checks if the command exists in the map and does not handle other potential issues such as invalid command formats or additional arguments.
- Location in codebase:
packages/materials/buildMaterials.mjs(lines 202-219)
To improve the validation, consider adding more comprehensive checks, such as verifying the format of the command and handling unexpected additional arguments.
Analysis chain
Validate command input in start function.
Ensure that the command validation is comprehensive and covers all expected scenarios.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify command validation in the start function.
# Test: Search for command validation logic. Expect: Comprehensive validation logic.
rg --type javascript $'commandsMap[command]'
Length of output: 80
Script:
#!/bin/bash
# Description: Verify command validation in the start function.
# Test: Search for command validation logic. Expect: Comprehensive validation logic.
rg --type js $'commandsMap[command]'
Length of output: 37
Script:
#!/bin/bash
# Description: Locate the start function and review its implementation.
# Search for the start function definition in JavaScript files.
rg --type js 'function start'
Length of output: 31
Script:
#!/bin/bash
# Description: Locate the start function and review its implementation.
# Search for the start function definition in JavaScript and ES module files.
rg --type-add 'mjs:*.mjs' --type js --type mjs 'function start'
Length of output: 122
Script:
#!/bin/bash
# Description: Extract and display the start function implementation from buildMaterials.mjs.
# Extract the start function implementation.
rg --type-add 'mjs:*.mjs' --type mjs --context 10 'function start' packages/materials/buildMaterials.mjs
Length of output: 495
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
ElButton,ElInput,TinyButton,TinyInput,Input) detailing properties, events, and slots.Chores
package.jsonfor@opentiny/tiny-engine-materialswith new scripts and dependencies.