feat(hub-ui): add a dev-served playground with HMR - #225
Merged
Conversation
Mounts a bare, headless hub instance and hub-ui's own DockStandalone/ DockEmbedded straight from source, so the client Vue components hot-reload during development instead of requiring a build. Run with `pnpm --filter @devframes/hub-ui dev`.
Storybook's preview never imported '@unocss/reset/tailwind.css', the same reset scripts/build-css.ts prepends to the shipped shadow-root stylesheet - unlike real dock content, stories inherited raw browser defaults (e.g. a text-variant ActionButton rendering as a native gray button). Import it first, matching the production build's [reset, ...] order.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…yground Mounts two tiny static devframes (Alpha/Beta, devframes.ts) via initHub's devframes option, so the playground's dock bar has real mounted content to switch between rather than only client-only entries. Both collapse under a new "Playground Tools" group dock, alongside a "Ping" action dock whose client script runs on click - exercising the grouped-dock popover and the action-dock mechanism the playground didn't previously touch. Declares playground/client-scripts/*.ts as a knip entry - action dock scripts are loaded by their runtime URL string, not a static import.
Replaces the two hand-rolled static "Alpha"/"Beta" devframes with the real `@devframes/plugin-git` dashboard - the playground now shows this very checkout's actual commit history, branches, and status instead of placeholder pages. `@devframes/plugin-git` is the one built-in plugin that doesn't itself depend on `@devframes/vite` - every other plugin does, and mounting one of those here would reintroduce the cyclic workspace dependency `hub-plugin.ts` already avoids by hand-rolling its hub middleware, just one hop further out.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
packages/hub-ui/playground/— a dev-served playground for@devframes/hub-ui, mounting a bare, headless hub instance (RPC/WS/__connection.json, no UI slot) and hub-ui's ownDockStandalone/DockEmbeddedstraight from source, so every.vue/.tsfile undersrc/clienthot-reloads instantly instead of requiring a build. Run withpnpm --filter @devframes/hub-ui dev.hub-plugin.tshand-rolls the small middleware slice needed rather than reusing@devframes/vite/hub, since that package already carries an optional peer dependency on@devframes/hub-ui— pulling it in here would create a cyclic workspace dependency.main.tssupports both the full-page standalone viewer (default) and the floating embedded dock (?embedded) over sample host content.@devframes/plugin-gitdevframe — the dock bar shows this very checkout's actual commit history, branches, and status. It's the one built-in plugin that doesn't itself depend on@devframes/vite(every other plugin does), so it's the only one that doesn't reintroduce that same cyclic dependency one hop further out.seed.tsseeds sample commands, messages, a no-renderer dock entry, a "Playground Tools" group collapsing the Git dock, and a "Ping" action dock whose client script (client-scripts/ping-action.ts) runs on click — exercising the grouped-dock popover and the action-dock mechanism, alongside the fallback-view dock.@devframes/hub-ui's Storybook preview: it never imported@unocss/reset/tailwind.css, the Tailwind preflightscripts/build-css.tsprepends to the shipped shadow-root stylesheet. Without it, stories inherited raw browser defaults instead of the reset real dock content ships with — visibly, a text-variantActionButton(e.g.Confirm's "Cancel") rendered as a native gray button instead of plain text. Now imported first, matching the production build's[reset, ...]order.This PR was created with the help of an agent.