Feat add router onion skinning preview #1063
Conversation
WalkthroughThis pull request encompasses a comprehensive version update across multiple packages from version Changes
Sequence DiagramsequenceDiagram
participant User
participant DesignCanvas
participant RouterPreview
participant URLManager
User->>DesignCanvas: Trigger preview
DesignCanvas->>RouterPreview: Call updatePreviewId
RouterPreview->>URLManager: Modify URL parameters
URLManager-->>RouterPreview: Update complete
RouterPreview-->>DesignCanvas: Confirm update
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
packages/canvas/render/src/canvas-function/router-preview.ts (1)
53-67: Consider debouncing the history data change callback.Multiple rapid history changes could trigger unnecessary recalculations. Consider debouncing the callback to improve performance.
+import { useDebounceFn } from '@vueuse/core' export function useRouterPreview() { + const debouncedCalcNewPreviewFullPath = useDebounceFn(() => { + calcNewPreviewFullPath() + }, 100) const cancel = getController().addHistoryDataChangedCallback(() => { const newPageId = getController().getBaseInfo().pageId const newPreviewId = getController().getBaseInfo().previewId const pageIdChanged = newPageId !== pageId.value const previewIdChanged = newPreviewId !== previewId.value if (pageIdChanged) { pageId.value = newPageId } if (previewIdChanged) { previewId.value = newPreviewId } if (previewIdChanged || pageIdChanged) { - calcNewPreviewFullPath() + debouncedCalcNewPreviewFullPath() } })packages/canvas/render/src/render.ts (1)
215-216: Consider adding null checks for injected values.While the implementation correctly combines the page paths for preview functionality, it would be more robust to handle cases where the injected values might be undefined.
- const pagePreviewFromCurrentPageChild = (inject('page-preview') as Ref<any[]>).value - const fullPath = [...pagePathFromRoot, ...pagePreviewFromCurrentPageChild] + const pagePreviewFromCurrentPageChild = (inject('page-preview') as Ref<any[]>)?.value || [] + const fullPath = [...(pagePathFromRoot || []), ...pagePreviewFromCurrentPageChild]packages/canvas/DesignCanvas/src/DesignCanvas.vue (1)
250-266: Add input validation and error handling.While the URL management implementation is solid, consider adding input validation and error handling for robustness.
function updatePreviewId(previewId, replace = false) { + try { const url = new URL(window.location.href) if (previewId) { + if (typeof previewId !== 'string' && typeof previewId !== 'number') { + throw new Error('Invalid previewId type') + } if (previewId === url.searchParams.get('previewid')) { return } url.searchParams.set('previewid', previewId) } else { url.searchParams.delete('previewid') } if (replace) { window.history.replaceState({}, '', url) } else { window.history.pushState({}, '', url) } usePage().postLocationHistoryChanged({ previewId }) + } catch (error) { + console.error('Failed to update preview ID:', error) + useNotify({ + type: 'error', + title: 'Preview Update Failed', + message: 'Failed to update preview state' + }) + } }packages/blockToWebComponentTemplate/package.json (1)
Line range hint
33-39: Review dependency constraints for web components.The package has direct dependencies on Vue ecosystem packages with specific versions:
- @opentiny/vue: ~3.14.0
- @opentiny/vue-icon: ~3.14.0
- @opentiny/vue-theme: ~3.14.0
- vue: ^3.4.15
Using tilde (~) for some dependencies and caret (^) for others might lead to inconsistent updates.
Consider using consistent version constraints (either all tilde or all caret) for better dependency management:
- "@opentiny/vue": "~3.14.0", - "@opentiny/vue-icon": "~3.14.0", - "@opentiny/vue-theme": "~3.14.0", + "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", + "@opentiny/vue-theme": "^3.14.0",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (65)
.github/workflows/Release.yml(2 hunks)designer-demo/package.json(1 hunks)mockServer/package.json(1 hunks)packages/block-compiler/package.json(1 hunks)packages/blockToWebComponentTemplate/package.json(1 hunks)packages/build/vite-config/package.json(1 hunks)packages/build/vite-plugin-meta-comments/package.json(1 hunks)packages/builtinComponent/package.json(1 hunks)packages/canvas/DesignCanvas/src/DesignCanvas.vue(2 hunks)packages/canvas/package.json(1 hunks)packages/canvas/render/src/RenderMain.ts(2 hunks)packages/canvas/render/src/canvas-function/router-preview.ts(1 hunks)packages/canvas/render/src/render.ts(2 hunks)packages/canvas/route-bar/src/CanvasRouteBar.vue(1 hunks)packages/common/composable/defaultGlobalService.js(1 hunks)packages/common/package.json(1 hunks)packages/configurator/package.json(1 hunks)packages/design-core/package.json(2 hunks)packages/engine-cli/package.json(1 hunks)packages/engine-cli/template/designer/public/mock/bundle.json(33 hunks)packages/i18n/package.json(1 hunks)packages/layout/package.json(1 hunks)packages/plugins/block/package.json(1 hunks)packages/plugins/bridge/package.json(1 hunks)packages/plugins/datasource/package.json(1 hunks)packages/plugins/help/package.json(1 hunks)packages/plugins/i18n/package.json(1 hunks)packages/plugins/materials/package.json(1 hunks)packages/plugins/page/package.json(1 hunks)packages/plugins/robot/package.json(1 hunks)packages/plugins/schema/package.json(1 hunks)packages/plugins/script/package.json(1 hunks)packages/plugins/state/package.json(1 hunks)packages/plugins/tree/package.json(1 hunks)packages/plugins/tutorial/package.json(1 hunks)packages/register/package.json(1 hunks)packages/settings/design/package.json(1 hunks)packages/settings/events/package.json(1 hunks)packages/settings/panel/package.json(1 hunks)packages/settings/props/package.json(1 hunks)packages/settings/styles/package.json(1 hunks)packages/svgs/package.json(1 hunks)packages/theme/base/package.json(1 hunks)packages/theme/dark/package.json(1 hunks)packages/theme/light/package.json(1 hunks)packages/toolbars/breadcrumb/package.json(1 hunks)packages/toolbars/clean/package.json(1 hunks)packages/toolbars/collaboration/package.json(1 hunks)packages/toolbars/fullscreen/package.json(1 hunks)packages/toolbars/generate-code/package.json(1 hunks)packages/toolbars/lang/package.json(1 hunks)packages/toolbars/layout/package.json(1 hunks)packages/toolbars/lock/package.json(1 hunks)packages/toolbars/logo/package.json(1 hunks)packages/toolbars/logout/package.json(1 hunks)packages/toolbars/media/package.json(1 hunks)packages/toolbars/preview/package.json(1 hunks)packages/toolbars/redoundo/package.json(1 hunks)packages/toolbars/refresh/package.json(1 hunks)packages/toolbars/save/package.json(1 hunks)packages/toolbars/setting/package.json(1 hunks)packages/toolbars/view-setting/package.json(1 hunks)packages/utils/package.json(1 hunks)packages/vue-generator/package.json(2 hunks)packages/webcomponent/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (50)
- packages/configurator/package.json
- packages/toolbars/redoundo/package.json
- packages/toolbars/preview/package.json
- designer-demo/package.json
- packages/toolbars/lang/package.json
- packages/plugins/block/package.json
- packages/plugins/script/package.json
- packages/engine-cli/package.json
- packages/build/vite-plugin-meta-comments/package.json
- packages/toolbars/logout/package.json
- packages/webcomponent/package.json
- packages/settings/panel/package.json
- packages/layout/package.json
- packages/toolbars/logo/package.json
- packages/utils/package.json
- packages/plugins/i18n/package.json
- packages/svgs/package.json
- packages/register/package.json
- packages/theme/light/package.json
- packages/toolbars/setting/package.json
- packages/toolbars/layout/package.json
- packages/toolbars/save/package.json
- packages/toolbars/fullscreen/package.json
- packages/plugins/page/package.json
- packages/builtinComponent/package.json
- packages/plugins/schema/package.json
- packages/i18n/package.json
- packages/plugins/robot/package.json
- packages/canvas/package.json
- packages/toolbars/view-setting/package.json
- packages/plugins/tree/package.json
- packages/settings/props/package.json
- packages/toolbars/lock/package.json
- packages/toolbars/collaboration/package.json
- packages/toolbars/media/package.json
- packages/plugins/materials/package.json
- packages/toolbars/breadcrumb/package.json
- packages/theme/base/package.json
- mockServer/package.json
- packages/settings/design/package.json
- packages/common/package.json
- packages/plugins/bridge/package.json
- packages/build/vite-config/package.json
- packages/plugins/tutorial/package.json
- packages/theme/dark/package.json
- packages/block-compiler/package.json
- packages/toolbars/generate-code/package.json
- packages/settings/events/package.json
- packages/design-core/package.json
- packages/plugins/state/package.json
🔇 Additional comments (21)
packages/canvas/render/src/canvas-function/router-preview.ts (1)
5-10: LGTM! Clean state initialization using Vue's composition API.The reactive state is properly initialized using Vue's ref, and the controller's base info is accessed correctly.
packages/canvas/route-bar/src/CanvasRouteBar.vue (1)
68-81: LGTM! Improved route handling with proper filtering and formatting.The changes enhance robustness by:
- Filtering out undefined items
- Cleaning up route paths by removing duplicate slashes and trimming
packages/common/composable/defaultGlobalService.js (1)
9-9: LGTM! Clean addition of previewId to base info.The implementation follows the existing pattern of URL parameter extraction.
Also applies to: 17-17
packages/canvas/render/src/RenderMain.ts (1)
31-31: LGTM! Clean integration of router preview feature.The preview path is correctly provided to child components using Vue's provide/inject pattern.
Also applies to: 139-139
packages/canvas/render/src/render.ts (2)
219-221: LGTM! Clean and efficient implementation.The function correctly handles array bounds and index checking for finding the next child in the path.
261-267: LGTM! Well-structured conditional attributes.The implementation correctly applies design-time attributes while maintaining the component's functionality. The conditional logic ensures that these attributes are only added when necessary.
packages/canvas/DesignCanvas/src/DesignCanvas.vue (1)
285-285: LGTM! Clean controller integration.The updatePreviewId function is properly integrated into the controller object, maintaining consistency with other exported methods.
packages/plugins/help/package.json (2)
Line range hint
33-39: Verify peer dependencies compatibility with RC version.The peer dependencies specify fixed major versions:
- @opentiny/vue: ^3.14.0
- @opentiny/vue-icon: ^3.14.0
- vue: ^3.4.15
These versions should be compatible with the new 2.2.0-rc.0 release.
Let's check for any breaking changes in the dependencies:
✅ Verification successful
Peer dependencies are correctly specified and compatible with RC version
The specified peer dependencies use appropriate version ranges that are consistent with the rest of the codebase and allow for compatible updates. The caret ranges (^) ensure compatibility while allowing minor and patch updates.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any breaking changes in dependencies echo "Checking dependency compatibility..." gh api graphql -f query=' { repository(owner: "opentiny", name: "tiny-engine") { releases(first: 5, orderBy: {field: CREATED_AT, direction: DESC}) { nodes { name description isPrerelease } } } }' | jq -r '.data.repository.releases.nodes[] | select(.isPrerelease == true) | .description'Length of output: 4997
Script:
#!/bin/bash # Search for package.json files and their dependency declarations echo "Searching for dependency patterns in package.json files..." fd package.json --type f --exec rg -A 5 '"@opentiny/vue"|"@opentiny/vue-icon"|"vue":' # Look for recent dependency-related changes echo -e "\nChecking recent dependency changes..." git log --oneline -n 10 | grep -i "depend\|version\|upgrade"Length of output: 6954
3-3: Version update is part of a coordinated release.The version bump from 2.1.0 to 2.2.0-rc.0 is consistent with other packages in the monorepo. This indicates a coordinated pre-release of new features, including the onion skin preview functionality.
Let's verify version consistency across all packages:
✅ Verification successful
Version consistency verified across the monorepo
The version bump to 2.2.0-rc.0 is consistently applied across all main packages in the monorepo. The only exceptions are template files which correctly maintain their own versions as they are starter templates for new projects.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any inconsistent versions across package.json files echo "Checking package versions..." find . -name "package.json" -type f -exec grep -l "\"version\":" {} \; | while read -r file; do version=$(grep "\"version\":" "$file" | head -n1) if [[ ! $version =~ "2.2.0-rc.0" ]]; then echo "Inconsistent version found in: $file" echo "Version: $version" fi doneLength of output: 92686
Script:
#!/bin/bash # Check canvas package version specifically cat ./packages/canvas/package.json | grep '"version":'Length of output: 83
packages/toolbars/refresh/package.json (1)
3-3: Version update aligns with the monorepo release.The version bump to 2.2.0-rc.0 is consistent with other packages.
packages/toolbars/clean/package.json (1)
3-3: Version update aligns with the monorepo release.The version bump to 2.2.0-rc.0 is consistent with other packages.
packages/blockToWebComponentTemplate/package.json (1)
3-3: Version update aligns with the monorepo release.The version bump to 2.2.0-rc.0 is consistent with other packages.
packages/settings/styles/package.json (2)
3-3: Version update aligns with the monorepo release.The version bump to 2.2.0-rc.0 is consistent with other packages.
Line range hint
31-32: Review outdated dependency.The package depends on an older version of @vueuse/core:
"@vueuse/core": "^9.6.0"Let's check for the latest compatible version:
✅ Verification successful
Current version range is appropriate
The specified version
^9.6.0already includes the latest v9.x version (9.13.0) and will automatically use compatible updates. No changes needed.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check latest compatible version of @vueuse/core npm view @vueuse/core versions --json | jq -r '.[] | select(startswith("9."))' | sort -V | tail -n 1Length of output: 109
packages/plugins/datasource/package.json (2)
3-3: LGTM: Version bump to 2.2.0-rc.0Version update aligns with the broader transition to release candidate versions across the project.
Line range hint
32-32: Verify axios version security statusThe axios version ~0.28.0 is relatively new. Let's verify it's free from known vulnerabilities.
✅ Verification successful
✅ Axios version 0.28.0 is secure
The version ~0.28.0 is actually the exact version that patches the most recent vulnerability affecting the 0.x series (a moderate severity CSRF issue). It's also not affected by any other known security issues.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for security advisories for axios gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "axios") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 1437
packages/vue-generator/package.json (1)
3-3: LGTM: Version and dependency updates
- Version bump to 2.2.0-rc.0 aligns with the project-wide version update
- Re-addition of @babel/parser peer dependency maintains the same version constraint
Also applies to: 57-57
.github/workflows/Release.yml (2)
35-35: LGTM: Improved build log pathMoving the build log to
/tmpdirectory is more appropriate for temporary files.Also applies to: 41-41
76-76: LGTM: Improved token formattingThe spacing in
${{ secrets.NPM_TOKEN }}follows GitHub Actions best practices for environment variable formatting.packages/engine-cli/template/designer/public/mock/bundle.json (2)
2706-2706: Component export names are properly configured.The component configurations follow a consistent pattern with proper:
- Export names matching the component names
- Properties, events and slots definitions
- Schema structures
Also applies to: 2835-2835, 4505-4505, 4659-4659, 4912-4912, 5262-5262, 5390-5390, 5664-5664, 5999-5999, 6409-6409, 6642-6642, 7043-7043, 7238-7238, 7509-7509, 7764-7764, 7948-7948, 8153-8153, 8427-8427, 8704-8704, 8809-8809, 8944-8944, 9029-9029, 9152-9152, 9259-9259, 10169-10169, 10398-10398, 10757-10757, 11088-11088, 11291-11291, 11508-11508, 11999-11999, 12410-12410
14038-14054: Verify package versions and CDN URLs.The package configurations use unpkg CDN URLs with version ranges. While this works, it's recommended to:
- Pin exact versions instead of using ranges (~3.14) to ensure consistent builds
- Consider using a more reliable CDN or self-hosted assets for production
Run this script to check if the configured versions exist and are stable:
✅ Verification successful
All package versions and CDN URLs are valid and accessible
The verification confirms that both libraries' versions exist in the npm registry and all CDN URLs are accessible. While TinyVue uses a patch version range (~3.14), it correctly resolves to stable versions through unpkg.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the specified versions exist on npm echo "Checking TinyVue version..." curl -s https://registry.npmjs.org/@opentiny/vue | jq '.versions | has("3.14.0")' echo "Checking Element Plus version..." curl -s https://registry.npmjs.org/element-plus | jq '.versions | has("2.4.2")' # Verify the CDN URLs are accessible echo "Verifying CDN URLs..." curl -I https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs curl -I https://unpkg.com/@opentiny/vue-theme@~3.14/index.css curl -I https://unpkg.com/[email protected]/dist/index.full.mjs curl -I https://unpkg.com/[email protected]/dist/index.cssLength of output: 3984
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
为了方便在有子页面的预览的情况下编辑父页面，推出了路由“洋葱皮”预览功能
（“洋葱皮”的概念参考了2D动画编辑绘制的跨帧预览功能）
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
Release Notes v2.2.0-rc.0
Version Updates
2.2.0-rc.0, indicating a release candidate versionNew Features
updatePreviewIdin design canvasuseRouterPreviewcomposition functionComponent Library Updates
Workflow Improvements
Preview and Routing Enhancements