【wip】feat: update vue repl for site #2730
Conversation
WalkthroughThis pull request focuses on updating dependencies and configuration files across multiple locations in the project. The primary changes involve upgrading Vue-related dependencies from version 3.4.x to 3.5.13, removing the Changes
Sequence DiagramsequenceDiagram
participant Dev as Developer
participant Pkg as package.json
participant Vite as vite.config.ts
participant App as App.vue
Dev->>Pkg: Update Vue dependencies
Dev->>Vite: Configure Vue aliases
Dev->>App: Refactor store management
Pkg-->>Dev: Dependency versions updated
Vite-->>Dev: Alias configurations set
App-->>Dev: Store and component updated
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 (
|
WalkthroughThis pull request updates the Vue REPL for the site by upgrading Vue dependencies and refactoring the REPL setup in the playground application. It introduces new features and configurations to enhance the REPL's functionality and compatibility with the latest Vue version. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| }, | ||
| template: { | ||
| compilerOptions: { | ||
| isCustomElement: (tag: string) => tag.startsWith('custom-') |
There was a problem hiding this comment.
Ensure that the custom element check function in compilerOptions is correctly handling all necessary custom elements. This function should be comprehensive to avoid rendering issues with custom components.
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
zzcr
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/sites/playground/App.vue (1)
118-134: Experimental features inSFCOptions.
Enabling inline templates, props destructuring, and custom element checks are valid but can introduce edge cases in older browsers or less common scenarios. Ensure you’ve tested thoroughly in your target environments.examples/sites/vite.config.ts (1)
141-142: Alias for Vue runtime build.
Mapping'vue'to'vue/dist/vue.runtime.esm-browser.js'is valid when you only need the runtime and rely on a separate'vue/compiler-sfc'alias. Ensure any plugins requiring the full build or compiler do not break.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/sites/package.json(1 hunks)examples/sites/playground/App.vue(6 hunks)examples/sites/vite.config.ts(1 hunks)package.json(4 hunks)
🔇 Additional comments (13)
examples/sites/playground/App.vue (7)
116-117: Good usage of destructuring fromuseVueImportMap.
No issues found with the approach. This keeps the code clean and consistent.
256-257: Synchronizing main file and active filename.
Assigning bothstore.mainFileandstore.activeFilenameto the same value is valid. Just confirm this is the intended behavior if there's no need to show different “main” vs. “active” states in the REPL.
266-275: Double-check usage ofdemoFile.filename.
Similarly, settingmainFileandactiveFilenameto the same reference is typically fine. If the design calls for separate concepts, verify that tying them together does not limit future workflows.
344-346: Preventing default save shortcuts.
Capturing@keydown.ctrl.s.preventand@keydown.meta.s.preventindicates an intentional override of save commands. Great for specialized in-browser editors. Ensure you have a clear UX fallback if needed.
350-354: Enhanced REPL options.
Providing compile output, auto-resizing the preview, and deciding not to clear the console fosters a more transparent debugging experience for users. This is a sound approach.
140-147: Potential vulnerability withlocation.hash.
Becausehashis user-controlled input, consider sanitizing it or validating its structure before passing it intouseStore. This helps prevent injection attacks or malformed states.
202-202: Validate the content ofimportMap.
Confirm thatimportMapis trustworthy if it comes from user input or a dynamic source. Serialized JSON can hide malicious scripts if not properly sanitized or validated.✅ Verification successful
Let me gather more information about how
importMapis created and used.
Let me check one more thing to understand how the import map is created and used.
Let me try one final search to find the implementation of
createImportMap.
The import map is safely constructed from trusted sources
After analyzing the code, I can confirm that the
importMapis safely constructed:
- The
createImportMapfunction builds a static mapping of package names to CDN URLs- All URLs are constructed using:
cdnHostfrom localStorage (a user setting)- Fixed version numbers (e.g., Vue 3.4.27, echarts 5.4.1)
- Predefined delimiters based on CDN type
- Known package paths and file names
The import map is not derived from user input or external dynamic sources. It's a controlled configuration that maps package imports to specific CDN URLs with fixed versions. The JSON stringification of this object is safe as it contains only static string values.
The original concern about potential malicious content can be dismissed as the import map is constructed programmatically with trusted values rather than accepting arbitrary user input.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash #!/bin/bash # Description: Search for all references to store.files['import-map.json'] to see how it is consumed. rg --context 5 "store\.files\['import-map\.json'\]"Length of output: 714
Script:
#!/bin/bash # Search for createImportMap function definition and usage ast-grep --pattern 'function createImportMap($_) { $$$ }' # Search for other references to importMap rg "importMap" -A 5 -B 5 # Search for File constructor usage to understand how these files are handled rg "new File\(" -A 5 -B 5Length of output: 7431
Script:
#!/bin/bash # Search for useVueImportMap implementation and usage ast-grep --pattern 'useVueImportMap($_) { $$$ }' rg "useVueImportMap" -A 10 -B 10 # Search for createImportMap implementation rg "function createImportMap" -A 10 -B 10Length of output: 2643
Script:
#!/bin/bash # Search for the definition of createImportMap with more context rg -g '*.{vue,js,ts}' -B 15 -A 15 "createImportMap\s*=|function\s+createImportMap|const\s+createImportMap" # Also check for any CDN or URL related constants that might be used rg -g '*.{vue,js,ts}' "cdnHost|baseUrl" -B 5 -A 5Length of output: 13881
examples/sites/package.json (1)
40-40: Upgraded dependencies for Vue REPL and Vue.
"@vue/repl": "^4.4.2"and"vue": "^3.5.13"seem compatible with one another, but confirm no downstream incompatibilities. Testing or a quick smoke check across components is advised.Also applies to: 48-48
✅ Verification successful
Let me analyze the search results. The codebase shows extensive use of Vue across test files and type definitions, but I need to check for actual usage of
@vue/replto verify compatibility. Let me search for that specifically.
Let me check the actual usage of @vue/repl in the playground app to understand how it's being used.
Based on the analysis of the code, I can now provide a final response about the Vue REPL compatibility:
@vue/repl and Vue version compatibility is verified
The codebase shows that @vue/repl v4.4.2 is being used correctly with Vue 3.4.27 in the playground environment. Specifically:
- The playground explicitly imports Vue 3.4.27 runtime from CDN
- The @vue/repl integration is properly configured with Vue 3's Composition API features
- The code uses proper SFC options and compiler features compatible with Vue 3
- No compatibility issues are apparent in the implementation
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Ensure new versions do not break existing code using @vue/repl or Vue. rg --context 5 '@vue/repl|from .vue'Length of output: 66675
Script:
#!/bin/bash # Search for @vue/repl usage in the codebase rg -l '@vue/repl'Length of output: 105
Script:
#!/bin/bash # Check how @vue/repl is used in the playground cat examples/sites/playground/App.vueLength of output: 12133
package.json (5)
200-200: Vue devDependency bumped to^3.5.13.
Updating Vue to the latest minor version is typically beneficial. Confirm that other modules reliant on older Vue APIs remain functional.
209-212: Overriding Vue-related packages to3.5.13.
Coordinating all Vue packages to a consistent version helps avoid mismatch errors. Great job keeping them in sync.
229-229:"vue@3": "3.5.13"override.
This ensures that npm aliases forvue@3remain pinned. Double-check that internal references across the monorepo do not inadvertently pull a different version.
232-232:"vue3": "npm:[email protected]"
Similarly, confirm no conflicting “vue2” or “vue2.7” references that could override resolution in certain corners of the codebase.
252-252: Updated peer dependency forvite-plugin-dts.
Specifying"vue": "^3.5.13"ensures the plugin has the correct environment. Validate that TypeScript definitions still build seamlessly on all OS targets.
PR
目前还没有对less进行处理
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
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
Dependencies
@opentiny/vue-repldependency@vue/replfrom version 2.5.5 to 4.4.2Configuration
Playground