feat: Add material upload script #1516
Conversation
WalkthroughA new material synchronization workflow was introduced, featuring a script to upload a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant uploadMaterials.mjs
participant BackendAPI
User->>uploadMaterials.mjs: Run "pnpm uploadMaterials"
uploadMaterials.mjs->>uploadMaterials.mjs: Load .env.local (get backend_url)
uploadMaterials.mjs->>uploadMaterials.mjs: Read bundle.json
uploadMaterials.mjs->>BackendAPI: POST /material-center/api/component/bundle/create (multipart/form-data with bundle.json)
BackendAPI-->>uploadMaterials.mjs: Respond with insertNum, updateNum
uploadMaterials.mjs->>User: Log success or error
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
documentation
![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
🧹 Nitpick comments (5)
.env.local (1)
7-7: Fix naming convention inconsistency.The new environment variable
backend_urluses lowercase naming while other variables in the file follow UPPERCASE_WITH_UNDERSCORES convention (SQL_HOST, SQL_PORT, etc.). This inconsistency could cause confusion.Apply this diff to maintain consistency:
-backend_url=http://localhost:9090/material-center/api/component/bundle/create +BACKEND_URL=http://localhost:9090/material-center/api/component/bundle/createDon't forget to update the reference in
scripts/uploadMaterials.mjsaccordingly.scripts/uploadMaterials.mjs (1)
14-14: Update environment variable reference for consistency.The environment variable reference should be updated to match the naming convention used in other parts of the codebase.
If you apply the naming convention fix in
.env.local, update this line accordingly:-const { backend_url } = process.env +const { BACKEND_URL } = process.envAnd update the fetch call on line 29 to use
BACKEND_URL.docs/solutions/material-sync-solution.md (3)
3-8: Clarify script entry & location
pnpm uploadMaterialsis introduced without showing where the npm-script is declared or which package.json owns it. Readers who are not in the repo root will be confused.Consider adding a short line such as “该命令位于根目录 package.json 的 scripts 字段” (or a relative path) to remove ambiguity.
21-32: Inconsistent heading depthUnder “方案二” the subsection levels were demoted from
###to####, but other second-level topics (e.g. “注意事项” under 方案一) keep####. This makes 方案二’s internal TOC look one level deeper than 方案一’s, although they describe parallel concepts.Either keep them at the same depth (
###) or demote all peer sections for consistency.
49-49: Manual DB operation is error-prone – provide toolingPoint 5 directs users to “手动在数据库表 … 添加关联关系数据”. Manual SQL in production docs is risky. Consider adding:
- a ready-to-run migration SQL snippet, or
- extend the existing scripts to auto-insert the relations.
Reducing manual steps prevents data drift and on-boarding errors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
docs/solutions/imgs/bundle_upload.pngis excluded by!**/*.pngdocs/solutions/imgs/component_create_code.pngis excluded by!**/*.png
📒 Files selected for processing (5)
.env.local(1 hunks)docs/api/backend-api/material-center.md(1 hunks)docs/solutions/material-sync-solution.md(3 hunks)package.json(1 hunks)scripts/uploadMaterials.mjs(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/RenderMain.ts:82-88
Timestamp: 2025-01-14T08:50:50.226Z
Learning: For PR #1011, the focus is on resolving conflicts and migrating code, with architectural improvements deferred for future PRs.
package.json (3)
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/plugins/materials/src/composable/useMaterial.js:0-0
Timestamp: 2025-01-13T07:49:12.136Z
Learning: In the materials system, componentsDepsMap.scripts in materialState is used as a data store for tracking component dependencies and doesn't require Vue reactivity as changes are handled explicitly through updateCanvasDeps().
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/canvas/DesignCanvas/src/importMap.js:51-51
Timestamp: 2025-01-13T03:46:13.817Z
Learning: The `getImportMapData` function in `packages/canvas/DesignCanvas/src/importMap.js` has default parameter handling that initializes `canvasDeps` with empty arrays for `scripts` and `styles`, making additional null checks unnecessary.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/material-function/support-collection.ts:3-15
Timestamp: 2025-01-14T06:59:02.999Z
Learning: The code in `packages/canvas/render/src/material-function/support-collection.ts` is migrated code that should not be modified at this time to maintain stability during the migration process.
docs/solutions/material-sync-solution.md (3)
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/material-function/support-collection.ts:3-15
Timestamp: 2025-01-14T06:59:02.999Z
Learning: The code in `packages/canvas/render/src/material-function/support-collection.ts` is migrated code that should not be modified at this time to maintain stability during the migration process.
Learnt from: gene9831
PR: opentiny/tiny-engine#1038
File: packages/plugins/block/index.js:24-24
Timestamp: 2025-01-14T08:42:18.574Z
Learning: In the tiny-engine project, breaking changes are documented in the changelog rather than in JSDoc comments or separate migration guides.
Learnt from: hexqi
PR: opentiny/tiny-engine#850
File: package.json:4-4
Timestamp: 2024-10-10T06:25:05.109Z
Learning: 当遇到与`canvas`包中`"type": "module"`相关的报错时，可以通过将`canvas`包中的`.eslintrc`文件改为`.cjs`后缀来解决，而无需在根目录的`package.json`中添加`"type": "module"`。
🪛 markdownlint-cli2 (0.17.2)
docs/api/backend-api/material-center.md
347-347: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
353-353: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
359-359: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
🔇 Additional comments (6)
package.json (1)
24-24: LGTM!The new npm script follows the existing naming conventions and is properly integrated into the scripts section.
docs/api/backend-api/material-center.md (4)
330-338: Use proper Markdown headings instead of bold text for consistency
PathandMethodare presented as bold paragraphs (**Path：**) rather than level-4 headings (####).
Elsewhere in the same document, section metadata is rendered with real headings, so this is inconsistent and triggers the MD036 linter error.-**Path：** /material-center/api/component/bundle/create +#### Path +/material-center/api/component/bundle/createApply the same change to Method.
[ suggest_optional_refactor ]
347-357: Mis-classified “file” – it is a form field, not a path parameter
fileis listed under “路径参数”, but the endpoint defined above (POST /component/bundle/create) contains no{file}placeholder.
The file is actually sent as the multipart/form-data part namedfile.-**路径参数** +**Form-Data 字段** -| 参数名称 | 示例 | 备注 | -| -------- | ---- | ------ | -| file | bundle.json | bundle.json文件 | +| 字段名 | 示例值 | 说明 | +| -------- | ---- | ---- | +| file | bundle.json | bundle.json 文件内容 |Moving it to the correct section avoids confusion for API consumers.
[ raise_critical_issue ]
359-368: Empty body table can be removedThe Body table is completely empty; leaving an empty HTML table hurts readability.
Either delete this block or add a line such as “无额外字段”.
[ suggest_nitpick ]
374-379: Consider documenting HTTP status codes and error schemaThe success payload is documented, but common error responses (e.g., 400 for invalid JSON, 500 for server error) are not.
Adding an errors subsection will make the API contract clearer.
[ suggest_optional_refactor ][ offer_architecture_advice ]docs/solutions/material-sync-solution.md (1)
14-14: Broken/missing image riskThe image path
./imgs/component_create_code.pngis relative to the docs file; verify that the file exists indocs/solutions/imgs/and is committed. Broken images silently degrade the doc.
| const bundlePath = path.join(process.cwd(), '/designer-demo/public/mock/bundle.json') | ||
| const bundle = fs.readJSONSync(bundlePath) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make the bundle path configurable and add validation.
The hardcoded path to bundle.json reduces flexibility and could break if the project structure changes. Additionally, there's no validation to ensure the file exists or is readable.
Apply this diff to make the path configurable and add validation:
-const bundlePath = path.join(process.cwd(), '/designer-demo/public/mock/bundle.json')
-const bundle = fs.readJSONSync(bundlePath)
+const bundlePath = process.env.BUNDLE_PATH || path.join(process.cwd(), 'designer-demo/public/mock/bundle.json')
+
+if (!fs.existsSync(bundlePath)) {
+ logger.error(`Bundle file not found at: ${bundlePath}`)
+ process.exit(1)
+}
+
+let bundle
+try {
+ bundle = fs.readJSONSync(bundlePath)
+} catch (error) {
+ logger.error(`Failed to read bundle file: ${error.message}`)
+ process.exit(1)
+}Also add BUNDLE_PATH to .env.local if you want to make it configurable.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In scripts/uploadMaterials.mjs around lines 16 to 17, the bundle.json path is
hardcoded, reducing flexibility and lacking validation. Modify the code to read
the bundle path from an environment variable (e.g., BUNDLE_PATH) with a fallback
default, then add checks to verify the file exists and is readable before
attempting to read it. This ensures configurability and prevents runtime errors
due to missing or inaccessible files.
| fetch(backend_url, { | ||
| method: 'POST', | ||
| headers: formHeaders, | ||
| body: body, | ||
| }) | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| logger.success('File uploaded successfully:', data) | ||
| }) | ||
| .catch(error => { | ||
| logger.error('Error uploading file:', error) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling and add input validation.
The current error handling is basic and doesn't provide proper exit codes for script automation. Additionally, there's no validation of the backend URL.
Apply this diff to improve error handling:
+// Validate backend URL
+if (!BACKEND_URL) {
+ logger.error('BACKEND_URL environment variable is not set')
+ process.exit(1)
+}
+
+try {
+ new URL(BACKEND_URL)
+} catch (error) {
+ logger.error(`Invalid backend URL: ${BACKEND_URL}`)
+ process.exit(1)
+}
+
-fetch(backend_url, {
+fetch(BACKEND_URL, {
method: 'POST',
body: formData,
})
- .then(response => response.json())
+ .then(async response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ return response.json()
+ })
.then(data => {
logger.success('File uploaded successfully:', data)
+ process.exit(0)
})
.catch(error => {
logger.error('Error uploading file:', error)
+ process.exit(1)
})Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In scripts/uploadMaterials.mjs around lines 29 to 40, improve error handling by
validating the backend_url before making the fetch call to ensure it is a valid
URL. Modify the catch block to log the error and exit the process with a
non-zero exit code to support script automation. This will make the script more
robust and provide clear failure signals.
| const jsonBuffer = Buffer.from(JSON.stringify(bundle)) | ||
| const boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW' | ||
| const formHeaders = { | ||
| 'Content-Type': `multipart/form-data; boundary=${boundary}`, | ||
| } | ||
|
|
||
| let body = `--${boundary}\r\n` | ||
| body += 'Content-Disposition: form-data; name="file"; filename="bundle.json"\r\n' | ||
| body += 'Content-Type: application/json\r\n\r\n' | ||
| body += jsonBuffer.toString() + `\r\n--${boundary}--` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use FormData API instead of manual multipart construction.
Manually constructing multipart/form-data is error-prone and hard to maintain. The current implementation uses a fixed boundary string which could potentially cause conflicts.
Apply this diff to use the built-in FormData API:
-const jsonBuffer = Buffer.from(JSON.stringify(bundle))
-const boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW'
-const formHeaders = {
- 'Content-Type': `multipart/form-data; boundary=${boundary}`,
-}
-
-let body = `--${boundary}\r\n`
-body += 'Content-Disposition: form-data; name="file"; filename="bundle.json"\r\n'
-body += 'Content-Type: application/json\r\n\r\n'
-body += jsonBuffer.toString() + `\r\n--${boundary}--`
+const formData = new FormData()
+const blob = new Blob([JSON.stringify(bundle)], { type: 'application/json' })
+formData.append('file', blob, 'bundle.json')And update the fetch call:
-fetch(backend_url, {
+fetch(BACKEND_URL, {
method: 'POST',
- headers: formHeaders,
- body: body,
+ body: formData,
})🤖 Prompt for AI Agents
In scripts/uploadMaterials.mjs around lines 18 to 27, the multipart/form-data
body is manually constructed with a fixed boundary string, which is error-prone
and hard to maintain. Replace this manual construction by using the built-in
FormData API to create the form data and append the JSON file. Then update the
fetch call to use formData as the body and set headers from
formData.getHeaders() or equivalent to ensure correct content-type with
boundary.
| #### 注意事项 | ||
| 1. bundle.json文件内组件版本version字段为必须字段，缺少的需要补充不然上传接口报错 | ||
| 2. bundle.json文件内组件版本version与数据库t_component内version不一致时为新增，一致为更新，也可根据自身需求更改相关代码逻辑 | ||
| 3. .env.local中配置访问后端接口的路径，默认java后端路径 | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Specify the exact env key & give an example
Bullet 3 just says “在 .env.local 中配置访问后端接口的路径” but never names the key. The accompanying code and backend doc call it backend_url, yet that string never appears here.
Add the key name and a minimal example to prevent misconfiguration:
-3. .env.local中配置访问后端接口的路径，默认java后端路径
+3. 在 `.env.local` 中配置后端接口地址，键名为 **BACKEND_URL**（若无则新增）。默认指向 Java 后端：
+
+```dotenv
+BACKEND_URL=https://your-backend.example.com
+```🤖 Prompt for AI Agents
In docs/solutions/material-sync-solution.md around lines 9 to 13, the third
bullet point mentions configuring the backend API path in .env.local but does
not specify the exact environment variable key. Update this bullet to explicitly
name the key as BACKEND_URL and provide a minimal example line like
BACKEND_URL=https://your-backend.example.com to clarify the configuration and
prevent misconfiguration.
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
bundle.jsonfile for material synchronization with the backend.uploadMaterials) to simplify the upload process.Documentation