feat: enhance playground functionality and update dependencies #78
Conversation
- Added support for playground configuration in the vitepress-demo-plugin. - Updated the plugin version to 1.5.0 and included a patch for it. - Implemented a new event listener for code playground interactions in the theme. - Adjusted the markdown configuration to enable playground features.
WalkthroughThis pull request integrates a code playground feature into VitePress by extending the vitepress-demo-plugin with playground configuration, adding playground event handling in the theme layer, and introducing a dependency on Changes
Sequence DiagramsequenceDiagram
participant User
participant Plugin as vitepress-demo-plugin
participant Theme as Theme Layer
participant Store as Playground Store
participant Playground as External Playground
User->>Plugin: Views code example in docs
Plugin->>Plugin: Renders playground button (if show: true)
User->>Plugin: Clicks "Open in Playground"
Plugin->>Plugin: Applies codeTransformer to code
Plugin->>Plugin: Dispatches 'code-playground' custom event
Theme->>Theme: listenCodePlaygroundEvent listener receives event
Theme->>Store: Call generateStore with files & extraImports
Store-->>Theme: Returns serialized store data
Theme->>Playground: Opens new window with store.serialize() in URL
Playground->>Playground: Loads and renders code in playground
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @.vitepress/theme/index.ts:
- Around line 89-106: The code assumes activeFile exists in currentFiles when
pushing the main App file; to avoid a runtime TypeError, validate that
currentFiles hasOwnProperty(activeFile) (or use activeFile in currentFiles)
before accessing currentFiles[activeFile].code; if the key is missing, fall back
to props.vueCode or a safe default. Update the block where files is populated
(the currentFiles, activeFile, files logic) to check existence, use a safe
fallback for the filename/code, and ensure the subsequent Object.entries loop
still skips the activeFile correctly.
- Around line 115-125: Guard the JSON.parse/decodeURIComponent call and validate
package strings: wrap parsing of props.playground in a try/catch and default
extraPackages to [] on any error or if props.playground is falsy; in the map
callback for extraPackages (the function creating pkg and version using
lastIndexOf('@')), handle index === -1 by treating the whole string as pkg and
version as undefined or a default like "latest", and skip/ignore empty pkg names
to avoid producing { "": "..." } entries; ensure decodeURIComponent errors are
caught and that extraImports reduce logic remains safe when extraPackages is
empty.
In `@patches/vitepress-demo-plugin`@1.5.0.patch:
- Around line 115-125: The parsing of package strings using
pkgAndVersion.lastIndexOf('@') can return -1 and yield an empty pkg and
incorrect version; update the parsing logic where pkgAndVersion is split (the
block that assigns pkg and version) to guard against lastIndexOf returning -1:
if idx === -1 either skip the malformed entry (and log/warn) or treat the whole
string as pkg with an undefined/default version, ensuring you do not produce an
empty pkg; adjust any downstream creation of import map entries to skip or
handle entries with no version to avoid broken imports (refer to the variables
pkgAndVersion, pkg, version and the import-map creation code that consumes
them).
🧹 Nitpick comments (3)
patches/vitepress-demo-plugin@1.5.0.patch (1)
1-219: Patching compiled dist files is inherently fragile.This patch modifies the compiled output (
dist/index.js) ofvitepress-demo-plugin, which means it's tightly coupled to the exact build output of version 1.5.0. Any upstream release or rebuild could invalidate the patch. Consider contributing these changes upstream to the plugin to avoid long-term maintenance burden..vitepress/theme/index.ts (2)
108-108: Hardcoded'latest'version fortinyRobotVersion.Using
'latest'means playground behavior is not pinned and could break unexpectedly when a new version of@opentiny/tiny-robotis published. Consider reading the version from the workspace package metadata or a shared constant.
133-133: Hardcoded external playground URL.The URL
https://playground.opentiny.design/tiny-robot.htmlis baked into the source. Consider extracting it to a constant or making it configurable (e.g., via theme config or environment variable) so it can be overridden in staging/dev environments.
2 participants
关联pr opentiny/playground#23
Summary by CodeRabbit
New Features
Dependencies