Skip to content

【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

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.

Sign up for GitHub

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

Closed
webzmj530 wants to merge 2 commits into from
Closed

【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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c93f21
fix: 拆包的时候一个组件在多个分组里面也k可以一个分组里面存在两个组件(componentName相同, snippetName不同)
Mar 7, 2025
c075643
delete Comment
Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 31 additions & 15 deletions scripts/splitMaterials.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,49 @@ const materialsDir = 'materials'
const bundle = fs.readJSONSync(bundlePath)
const { components, snippets, blocks } = bundle.data.materials

const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`
const toPascalCase = (str) => str.split('-').map(capitalize).join('')
const capitalize = (str) => str ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : ''
const toPascalCase = (str) => str ? str.split('-').map(capitalize).join('') : ''

/**
* 将物料资产包拆分为单个组件
*/
const splitMaterials = () => {
try {
components.forEach((comp) => {
snippets.some((child) => {
const snippet = child.children.find((item) => {
const matchedSnippets = [];
Copy link
Member

@chilingling chilingling Mar 10, 2025

Choose a reason for hiding this comment

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

项目的约定是不要分号，麻烦去除一下

let category = null;

snippets.forEach((child) => {
Copy link
Member

@chilingling chilingling Mar 10, 2025

Choose a reason for hiding this comment

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

这里的逻辑可以尝试一下是不是有优化空间（需验证）：

  1. 预处理 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 })
    })
})
  1. 在 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 的时间复杂度，提升性能。

// 修改这里：检查 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;
}
}
});
Comment on lines +26 to +51
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 7, 2025

Choose a reason for hiding this comment

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

🛠️ 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;


return false
})
if (matchedSnippets.length > 0) {
comp.snippets = matchedSnippets;
comp.category = category;
}

const fileName = Array.isArray(comp.component) ? comp.component[0] : comp.component
const componentPath = path.join(process.cwd(), materialsDir, 'components', `${toPascalCase(fileName)}.json`)
Expand Down