Skip to content

feat: 增加组件库版本的自动更新&同步#1244

Closed
Ljhhhhhh wants to merge 1 commit intoopentiny:developfrom
Ljhhhhhh:feature-package-update
Closed

feat: 增加组件库版本的自动更新&同步#1244
Ljhhhhhh wants to merge 1 commit intoopentiny:developfrom
Ljhhhhhh:feature-package-update

Conversation

@Ljhhhhhh
Copy link
Copy Markdown
Contributor

@Ljhhhhhh Ljhhhhhh commented Mar 22, 2025

Conflicts:

designer-demo/public/mock/bundle.json resolved by [CherryPick] version

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?

materials/packages.json 下更新依赖信息后,可通过 buildMaterial 指令同步更新到数据库

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features
    • Enhanced material dependency management by automatically updating package details from configuration data.
    • Improved the update process by introducing robust checks that compare component data before applying changes.

# Conflicts:
#	designer-demo/public/mock/bundle.json   resolved by [CherryPick] version
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 22, 2025

Walkthrough

The changes update two scripts. In scripts/buildMaterials.mjs, a new constant loads material package data from a packages.json file, and the generateComponents function now merges additional package details into the material’s npm configuration when a package is specified. In scripts/connection.mjs, two new methods—normalizeJsonValue and isComponentDifferent—have been added to the MysqlConnection class to standardize JSON values and compare component data, respectively. The initDB method also utilizes the new comparison logic while error logging has been updated.

Changes

File(s) Change Summary
scripts/buildMaterials.mjs Added materialInfo to load package details from materials/packages.json; updated generateComponents to merge latest package properties (excluding name) if found.
scripts/connection.mjs Added normalizeJsonValue for JSON standardization and isComponentDifferent for comparing component data; updated initDB and error logging in isValid.

Sequence Diagram(s)

sequenceDiagram
    participant G as generateComponents
    participant M as materials/packages.json (materialInfo)
    participant N as material.npm Object

    G->>M: Load and parse packages.json
    G->>N: Check for package property
    alt Package exists
      G->>M: Retrieve matching package details
      G->>N: Merge latest package properties (exclude name)
    else
      G-->>N: Continue without merge
    end
Loading
sequenceDiagram
    participant DB as initDB
    participant MC as MysqlConnection

    DB->>MC: Call isComponentDifferent(newComponent, existingComponent)
    note right of MC: Normalize JSON values for comparison
    alt Components differ
      MC-->>DB: Return true (update required)
    else
      MC-->>DB: Return false (no update)
    end
Loading

Possibly related PRs

Suggested labels

ospp-2024, refactor-main

Suggested reviewers

  • rhlin
  • hexqi

Poem

I'm a rabbit who loves to code,
Hopping through changes on this road.
Merging packages like carrots so sweet,
With JSON and checks, the work is neat.
CodeRabbit cheers with a joyful beat!
🥕🐇

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ 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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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 using 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 generate docstrings to generate docstrings for this 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.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

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.

@github-actions github-actions Bot added the enhancement New feature or request label Mar 22, 2025
Copy link
Copy Markdown
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 comments (1)
scripts/connection.mjs (1)

451-470: ⚠️ Potential issue

Prevent SQL injection vulnerability

The SQL query is built by directly inserting the component name into the query string without sanitization, which could lead to SQL injection attacks.

- const selectSqlContent = `SELECT * FROM ${this.config.database}.${componentsTableName} WHERE name_en = '${component.component}'`
+ const selectSqlContent = `SELECT * FROM ${this.config.database}.${componentsTableName} WHERE name_en = ?`

- this.query(selectSqlContent)
+ this.query(selectSqlContent, [component.component])

This requires updating the query method to support parameterized queries:

query(sql, params = []) {
  return new Promise((resolve, reject) => {
    this.connection.query(sql, params, (error, result) => {
      if (error) {
        reject(error)
      } else {
        resolve(result)
      }
    })
  })
}
🧹 Nitpick comments (3)
scripts/buildMaterials.mjs (1)

120-129: Verify package data before merging

The code assumes materialInfo.packages is an array. It should verify this before using array methods to avoid potential runtime errors.

if (materialPackageInfo?.package) {
-  const latestPackageInfo = materialInfo.packages.find((item) => item.package === materialPackageInfo.package)
+  const packages = Array.isArray(materialInfo.packages) ? materialInfo.packages : [];
+  const latestPackageInfo = packages.find((item) => item.package === materialPackageInfo.package);

  if (latestPackageInfo) {
    const { name: _name, ...rest } = latestPackageInfo
    material.npm = Object.assign(material.npm, rest)
  }
}
scripts/connection.mjs (2)

97-133: Improve JSON normalization to handle arrays

The normalizeJsonValue method only checks for JSON objects (starting with '{' and ending with '}'). It should also handle JSON arrays.

// 如果解析结果仍然是字符串,且看起来像JSON,再次尝试解析
- if (typeof parsed === 'string' && parsed.startsWith('{') && parsed.endsWith('}')) {
+ if (typeof parsed === 'string' && 
+     ((parsed.startsWith('{') && parsed.endsWith('}')) || 
+      (parsed.startsWith('[') && parsed.endsWith(']')))) {
  try {
    return JSON.parse(parsed)
  } catch (e) {
    // 如果再次解析失败,返回第一次解析的结果
    return parsed
  }
}

458-465: Pass file path to updateComponent for better error reporting

When calling updateComponent after detecting differences, the file path should be passed to ensure proper error reporting.

if (needUpdate) {
-  this.updateComponent(component)
+  this.updateComponent(component, 'Database update')
}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cb59aa0 and 22aef37.

📒 Files selected for processing (2)
  • scripts/buildMaterials.mjs (2 hunks)
  • scripts/connection.mjs (3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: push-check

Comment on lines +20 to +21
// 从materials目录下的packages.json读取物料包配置
const materialInfo = fsExtra.readJSONSync(path.join(process.cwd(), materialsDir, 'packages.json'))
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add error handling for reading packages.json

The code reads the packages.json file synchronously without any error handling. If the file doesn't exist or contains invalid JSON, the script will crash.

- const materialInfo = fsExtra.readJSONSync(path.join(process.cwd(), materialsDir, 'packages.json'))
+ let materialInfo = { packages: [] };
+ try {
+   const packagePath = path.join(process.cwd(), materialsDir, 'packages.json');
+   if (fsExtra.existsSync(packagePath)) {
+     materialInfo = fsExtra.readJSONSync(packagePath);
+   } else {
+     logger.warn('packages.json not found in materials directory');
+   }
+ } catch (error) {
+   logger.error(`Failed to read packages.json: ${error}`);
+ }
📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 从materials目录下的packages.json读取物料包配置
const materialInfo = fsExtra.readJSONSync(path.join(process.cwd(), materialsDir, 'packages.json'))
// 从materials目录下的packages.json读取物料包配置
let materialInfo = { packages: [] };
try {
const packagePath = path.join(process.cwd(), materialsDir, 'packages.json');
if (fsExtra.existsSync(packagePath)) {
materialInfo = fsExtra.readJSONSync(packagePath);
} else {
logger.warn('packages.json not found in materials directory');
}
} catch (error) {
logger.error(`Failed to read packages.json: ${error}`);
}

Comment thread scripts/connection.mjs
Comment on lines +141 to +186
isComponentDifferent(newComponent, existingComponent) {
// 需要比较的字段列表
const fieldsToCompare = ['name', 'icon', 'npm', 'group', 'category', 'snippets', 'schema', 'configure']

// 检查每个字段是否有差异
for (const field of fieldsToCompare) {
if (!newComponent[field] && !existingComponent[this.fieldTransform(field)]) {
// 两者都为空或未定义,视为相同
continue
}

const dbField = this.fieldTransform(field)
const newValue = newComponent[field]
const dbValue = existingComponent[dbField]

// 对于对象类型的字段,需要标准化后比较
if (typeof newValue === 'object' && newValue !== null) {
// 标准化两个值,确保它们在相同的格式下进行比较
const normalizedNewValue = this.normalizeJsonValue(newValue)
const normalizedDbValue = this.normalizeJsonValue(dbValue)

// 将两个对象序列化为JSON字符串进行比较
const newValueStr = JSON.stringify(normalizedNewValue)
const dbValueStr = JSON.stringify(normalizedDbValue)

if (newValueStr !== dbValueStr) {
return true
}
} else {
// 对于基本类型,直接比较
const dbField = this.fieldTransform(field)
const newValue = String(newComponent[field])
const dbValue = String(existingComponent[dbField])

if (newValue !== dbValue) {
console.log(`${newComponent.component}字段 ${field} 需要更新:
新值: ${newValue}
旧值: ${dbValue}`)
return true
}
}
}

// 所有字段都相同,不需要更新
return false
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix code duplication and use logger instead of console.log

The method has a redundant redefinition of dbField in the else block. Also, it uses console.log which is inconsistent with the rest of the code that uses the logger object.

} else {
  // 对于基本类型,直接比较
- const dbField = this.fieldTransform(field)
  const newValue = String(newComponent[field])
  const dbValue = String(existingComponent[dbField])

  if (newValue !== dbValue) {
-   console.log(`${newComponent.component}字段 ${field} 需要更新: 
-     新值: ${newValue} 
-     旧值: ${dbValue}`)
+   logger.info(`${newComponent.component}字段 ${field} 需要更新: 新值: ${newValue} 旧值: ${dbValue}`)
    return true
  }
}
📝 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. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
isComponentDifferent(newComponent, existingComponent) {
// 需要比较的字段列表
const fieldsToCompare = ['name', 'icon', 'npm', 'group', 'category', 'snippets', 'schema', 'configure']
// 检查每个字段是否有差异
for (const field of fieldsToCompare) {
if (!newComponent[field] && !existingComponent[this.fieldTransform(field)]) {
// 两者都为空或未定义,视为相同
continue
}
const dbField = this.fieldTransform(field)
const newValue = newComponent[field]
const dbValue = existingComponent[dbField]
// 对于对象类型的字段,需要标准化后比较
if (typeof newValue === 'object' && newValue !== null) {
// 标准化两个值,确保它们在相同的格式下进行比较
const normalizedNewValue = this.normalizeJsonValue(newValue)
const normalizedDbValue = this.normalizeJsonValue(dbValue)
// 将两个对象序列化为JSON字符串进行比较
const newValueStr = JSON.stringify(normalizedNewValue)
const dbValueStr = JSON.stringify(normalizedDbValue)
if (newValueStr !== dbValueStr) {
return true
}
} else {
// 对于基本类型,直接比较
const dbField = this.fieldTransform(field)
const newValue = String(newComponent[field])
const dbValue = String(existingComponent[dbField])
if (newValue !== dbValue) {
console.log(`${newComponent.component}字段 ${field} 需要更新:
新值: ${newValue}
旧值: ${dbValue}`)
return true
}
}
}
// 所有字段都相同,不需要更新
return false
}
isComponentDifferent(newComponent, existingComponent) {
// 需要比较的字段列表
const fieldsToCompare = ['name', 'icon', 'npm', 'group', 'category', 'snippets', 'schema', 'configure']
// 检查每个字段是否有差异
for (const field of fieldsToCompare) {
if (!newComponent[field] && !existingComponent[this.fieldTransform(field)]) {
// 两者都为空或未定义,视为相同
continue
}
const dbField = this.fieldTransform(field)
const newValue = newComponent[field]
const dbValue = existingComponent[dbField]
// 对于对象类型的字段,需要标准化后比较
if (typeof newValue === 'object' && newValue !== null) {
// 标准化两个值,确保它们在相同的格式下进行比较
const normalizedNewValue = this.normalizeJsonValue(newValue)
const normalizedDbValue = this.normalizeJsonValue(dbValue)
// 将两个对象序列化为JSON字符串进行比较
const newValueStr = JSON.stringify(normalizedNewValue)
const dbValueStr = JSON.stringify(normalizedDbValue)
if (newValueStr !== dbValueStr) {
return true
}
} else {
// 对于基本类型,直接比较
const newValue = String(newComponent[field])
const dbValue = String(existingComponent[dbField])
if (newValue !== dbValue) {
logger.info(`${newComponent.component}字段 ${field} 需要更新: 新值: ${newValue} 旧值: ${dbValue}`)
return true
}
}
}
// 所有字段都相同,不需要更新
return false
}

Comment thread scripts/buildMaterials.mjs
Comment thread scripts/connection.mjs
@chilingling
Copy link
Copy Markdown
Member

截屏2025-03-25 23 08 40

bundle.json 中:

  1. npm 字段内只保留 packageexportNamedestructuring 三个字段
  2. packages 字段的默认 CDN,可以换成 https://registry.npmmirror.com (可以避免用户无法科学上网时的体验问题)

@Ljhhhhhh Ljhhhhhh closed this Apr 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants