feat: tinyvue grid slot generate code to template #756
Conversation
WalkthroughThis pull request introduces modifications to the Vue generator's component generation process, specifically enhancing the handling of TinyGrid components and their columns. Key changes include adjusting hooks for component generation, transforming slot and column handling with new functions, and updating component mappings to support a more flexible definition of grid columns. These alterations span multiple files, impacting both the generation logic and the associated test cases. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
chilingling
force-pushed
the
feat/tinyvueGridGenCode
branch
from
7ee5602 to
1ba0e01
Compare
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
packages/vue-generator/src/generator/vue/sfc/generateTemplate.js (4)
70-89: Robustness intransformSlotsfunctionThe
transformSlotsfunction effectively transforms slot configurations. However, consider adding a check to ensure thatvaluewithin the slots is defined to prevent potentialundefinedissues invalue?.paramsandvalue?.value.Apply this diff to include default values:
return { componentName: 'template', props: { slot: { name: key, - params: value?.params || '' + params: (value && value.params) || '' } }, - children: value?.value + children: (value && value.value) || '' }
91-93: Consistent return values intransformColumnToChildrenWhen
columnsis not an array, the function returnsundefined. For consistency and to avoid unexpected behavior in calling functions, consider returning an empty array instead.Apply this diff:
- if (!Array.isArray(columns)) { - return - } + if (!Array.isArray(columns)) { + return [] + }
96-110: Avoid mutation of input objectsIn
transformColumnToChildren, you are destructuringitemand modifyingrestItem. To prevent side effects, it's better to create a deep copy ofitembefore modification.Apply this diff to clone
item:const res = columns.map((item) => { + const clonedItem = { ...item } const { slots, ...restItem } = clonedItem let children = [] if (slots) { children = transformSlots(slots) } return { componentName: 'TinyGridColumn', props: restItem, children } })
116-123: OptimizecolumnHasSlotsfunctionThe
columnHasSlotsfunction can return early upon finding the first column with slots. It's already efficient, but you can use thesomemethod for cleaner code.Apply this diff:
-const columnHasSlots = (columns) => { - for (const columnItem of columns) { - if (columnItem.slots && typeof columnItem.slots === 'object' && Object.keys(columnItem.slots).length > 0) { - return true - } - } - return false -} +const columnHasSlots = (columns) => { + return columns.some( + (columnItem) => + columnItem.slots && + typeof columnItem.slots === 'object' && + Object.keys(columnItem.slots).length > 0 + ) +}packages/vue-generator/test/testcases/sfc/slotModelValue/page.schema.json (2)
15-48: Consider adding validation for numeric input.The employees field uses TinyNumeric but lacks input validation beyond the step constraint.
Consider adding min/max constraints and validation:
"componentName": "TinyNumeric", "props": { "allow-empty": true, "placeholder": "请输入", "controlsPosition": "right", "step": 1, + "min": 0, + "max": 999999, "modelValue": {
74-79: Implement proper change handlers.The onChange handlers only log to console without actual implementation.
Would you like me to help implement proper change handlers for both numeric and text inputs? This should include:
- Data validation
- State updates
- Error handling
Also applies to: 35-40
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js(1 hunks)packages/vue-generator/src/generator/vue/sfc/generateTemplate.js(3 hunks)packages/vue-generator/test/testcases/sfc/case01/componentsMap.json(1 hunks)packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue(2 hunks)packages/vue-generator/test/testcases/sfc/slotModelValue/expected/slotModelValueTest.vue(1 hunks)packages/vue-generator/test/testcases/sfc/slotModelValue/page.schema.json(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/vue-generator/test/testcases/sfc/slotModelValue/expected/slotModelValueTest.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (7)
packages/vue-generator/src/generator/vue/sfc/generateTemplate.js (2)
13-13: EnsuregetImportMapis properly utilizedYou have imported
getImportMapat line 13, but please verify that it's correctly utilized in the code to prevent any unused imports.
158-175: Validate deletion ofprops.columnsafter transformationAfter transforming
props.columnsto children components, you deleteprops.columns. Ensure thatprops.columnsis not used elsewhere in the codebase after this deletion to prevent unintended side effects.Run the following script to search for usages of
props.columnsafter this point:✅ Verification successful
props.columnsdeletion is properly implementedThe deletion of
props.columnsis safe as it occurs:
- After all its usages are complete
- Only when slots transformation is performed
- Within a properly scoped context
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if `props.columns` is used after deletion in `handleTinyGrid`. # Search for `props.columns` in files excluding `generateTemplate.js` rg "props\.columns" --glob '!generateTemplate.js'Length of output: 603
Script:
#!/bin/bash # Check usage of props.columns within generateTemplate.js rg "props\.columns" packages/vue-generator/src/generator/vue/sfc/generateTemplate.js -A 2 -B 2 # Check the function context where deletion occurs ast-grep --pattern 'function $FUNC($_) { $$$ delete props.columns $$$ }'Length of output: 714
packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js (1)
214-214: Confirm the placement ofhandleTinyGridindefaultComponentHooksMoving
handleTinyGridfromdefaultAttributeHooktodefaultComponentHookschanges when this hook is executed. Ensure this change aligns with the intended hook execution order and that it doesn't affect other component processing logic.packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue (1)
57-58: EnsureTinyIconDelis correctly definedVerify that
TinyIconDelis properly imported and initialized to avoid runtime errors when rendering the icon.packages/vue-generator/test/testcases/sfc/case01/componentsMap.json (1)
30-36: LGTM! Verify component version compatibility.The addition of TinyGridColumn component follows the established patterns and aligns with the grid slot generation feature.
Run this script to verify the version compatibility with other @opentiny/vue components:
✅ Verification successful
Version compatibility verified ✓
The TinyGridColumn component uses version ^3.10.0, which is consistent with all other @opentiny/vue components in the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check version compatibility across @opentiny/vue components # Expect: All components should use the same version rg -g '*.json' '"@opentiny/vue"' | grep '"version"' | sort | uniq -cLength of output: 70
Script:
#!/bin/bash # Find all componentsMap.json files and extract package + version info for @opentiny/vue fd componentsMap.json --exec sh -c 'echo "=== $1 ==="; jq -r ".[] | select(.package == \"@opentiny/vue\") | \"\(.componentName): \(.version)\"" {}' sh {}Length of output: 396
packages/vue-generator/test/testcases/sfc/slotModelValue/page.schema.json (2)
2-90: LGTM! Well-structured state management for grid columns.The move to state-based column management improves maintainability and reusability.
119-122: Implement error handling for undefined state.columns.The JSExpression accessing state.columns lacks error handling.
Consider adding a default empty array to prevent runtime errors:
"columns": { "type": "JSExpression", - "value": "state.columns" + "value": "state.columns || []" },
chilingling
force-pushed
the
feat/tinyvueGridGenCode
branch
from
8fe57a9 to
172f3fb
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
packages/engine-cli/template/designer/public/mock/bundle.json (2)
10181-10201: Missing component configuration properties.The component configuration is missing several important properties that would help define its behavior and integration capabilities.
Add the following configuration properties:
"configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "nestingRule": { "childWhitelist": "", - "parentWhitelist": "", + "parentWhitelist": ["TinyGrid"], "descendantBlacklist": "", "ancestorWhitelist": "" }, + "shortcuts": { + "properties": ["field", "title", "width"] + }, + "rootSelector": ".tiny-grid-column", "isNullNode": false, "isLayout": false }
10155-10159: Enhance component metadata.The component metadata could be improved with more descriptive information.
{ "icon": "grid", "name": { "zh_CN": "表格行" }, + "description": "TinyVue Grid的列组件，用于定义表格的列配置，支持自定义渲染、排序、过滤等功能", + "docUrl": "https://opentiny.design/tiny-vue/zh-CN/component/grid", + "screenshot": "", + "tags": "grid,table,column", + "keywords": "表格,列,grid column" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
designer-demo/public/mock/bundle.json(1 hunks)mockServer/src/assets/json/appinfo.json(1 hunks)mockServer/src/mock/get/app-center/v1/apps/schema/918.json(1 hunks)packages/engine-cli/template/designer/public/mock/bundle.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (6)
mockServer/src/assets/json/appinfo.json (1)
26959-27006: New Component Entry for TinyGridColumnThis new JSON block introduces the "TinyGridColumn" component into the application configuration. Please verify that:
- All required keys (icon, name, component, description, etc.) are consistent with similar component entries.
- The "schema" field’s "properties" is currently an empty array. Confirm that this type (array) is intended, as other components might use an object/dictionary here.
- The "docUrl", "tags", and "keywords" are empty. If documentation or additional metadata becomes available soon, consider updating these fields.
- The configuration flags (e.g., "loop", "condition", "styles", etc.) and the "nestingRule" structure are aligned with project standards for component definitions.
mockServer/src/mock/get/app-center/v1/apps/schema/918.json (1)
1907-1913: New TinyGridColumn Entry: Verify Consistency and Integration.
The new component mapping for "TinyGridColumn" is correctly structured—all required keys ("componentName", "package", "exportName", "destructuring", "version") are present and formatted consistently with the existing mappings in this file. Please confirm that version "0.1.16" is the intended release for this update and that downstream generators and templates properly reference this component.designer-demo/public/mock/bundle.json (3)
10155-10202: New TinyGridColumn component added with minimal configuration.A new component
TinyGridColumnhas been added to the bundle with empty schema properties and events. This aligns with the PR objective of introducing grid slot generation code to template.Key observations:
- The component is properly registered with the correct npm package info
- The schema is intentionally left empty, likely to be populated based on usage
- Basic configuration like loop, condition, styles etc. are set appropriately
10181-10201: Component configuration follows best practices.The component configuration follows the standard pattern used by other components in the bundle:
- Proper loop and condition flags
- Styles enabled
- Container flag set appropriately
- Modal flag disabled
- Nesting rules defined
- Root selector specified
- Context menu actions configured
10167-10170: Verify npm package configuration.The npm package configuration needs verification to ensure the correct package name and export name are used:
packages/engine-cli/template/designer/public/mock/bundle.json (1)
10155-10202: Verify component integration with TinyGrid.Need to verify that this new component properly integrates with the existing TinyGrid component.
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
【问题描述】
如 issue #754 所描述，当表格组件使用插槽并为插槽里面的组件添加样式时，页面预览以及下载代码后，为插槽里面的组件添加的样式无法生效。
【问题分析】
vue setup 中的 jsx，无法自动添加 scoped id，但是添加的样式却是默认是 scoped id 的。导致样式无法应用。
【解决方案】
tinyvue grid 组件有插槽时，不直接在 setup 组件中生成 jsx，而是将表格列配置作为 tiny-grid-column 生成到 template 中。
即从生成 jsx ：
改成生成代码为：
What is the current behavior?
Issue Number: #754
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Refactor