feat: minimal vite-devtools-style hubs mounting every built-in plugin#46
Merged
Conversation
A mounted devframe's SPA loads in an iframe at its base and discovers the RPC endpoint by fetching a relative ./__connection.json. Hubs only served their own meta, so embedded SPAs could connect only by inheriting it from a same-origin parent window — failing for cross-origin or sandboxed iframes. mountDevframe now asks the host to serve that meta at each devframe's base through a new optional DevframeHost.mountConnectionMeta hook, so embedded SPAs discover the endpoint directly.
When mounted in a hub, the plugin managed its own sessions while the hub's terminals subsystem stayed empty. The manager now mirrors its live sessions into ctx.terminals when that context is present, so a hub UI lists them alongside other tools. Standalone runtimes have no such context and are unaffected.
A cold-start `code-server --version` can print i18n initialization output before the version line, which leaked into the reported version. Match the first semver-looking token instead of the leading whitespace token.
Mount @devframes/plugin-git, -terminals, and -code-server in both the Vite and Next minimal hub examples so they exercise real RPC, streaming, and child-process integrations end to end. Both hosts now serve per-devframe connection meta. The Next host loads the plugins through a bundler-ignored dynamic import and skips trailing-slash redirects so the published SPAs resolve their assets and connect. Adds a bundled-host recipe to the hub guide and the missing plugin-git source alias.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The minimal hub examples now import the built-in plugin packages, so their build must wait for those packages' dist. Add the plugin build tasks to each example's dependsOn — otherwise the example's config load races a plugin's dist rewrite and fails to resolve its entry.
Mount all five built-in plugins (git, terminals, code-server, inspect, a11y) in both the Vite and Next minimal hubs, and reshape their UI into a minimal vite-devtools-style icon dock: each tool shows its Phosphor icon (inlined offline), the selected one fills the stage, and the hub subsystems sit in a bottom drawer. Frames both examples as the smallest copyable vite-devtools — a reference for building a viewer on @devframes/hub. The a11y plugin loads from its TypeScript entry; inspect mounts like the other published plugins.
antfubot
changed the title
Replace the inline-SVG icon map with UnoCSS preset-icons (the vite-devtools approach): icons resolve to i-ph-* classes inlined offline from @iconify-json/ph. Restyle the shell with semantic light/dark shortcuts.
Replace the examples' hand-rolled UnoCSS with @internal/design's presetDevframe + theme.css — the same preset, token theme, df-* component vocabulary, and Phosphor preset-icons the built-in plugins use. The Vite hub loads it via unocss/vite; the Next hub via @unocss/postcss (mirroring the git plugin). Dock glyphs resolve to i-ph-* classes inlined offline, no SVG map.
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.
Turns both minimal hub examples into the smallest copyable vite-devtools-style hub: an icon dock of every built-in plugin, an iframe stage, and a drawer of hub subsystems, all skinned with the shared
@internal/designsystem. vite-devtools is the full Vite viewer built on@devframes/hub; these examples are the reference for building your own viewer on the same protocol. Dogfooding the plugins end to end surfaced a few gaps in devframe itself, fixed here.Examples
DevframeDefinitionregistered withmountDevframe. Verified in a browser: git shows live data, terminals runs an interactive PTY, code-server launches an authenticated editor, the inspector lists every plugin's RPC functions, and the a11y panel renders.@internal/design:presetDevframe()+theme.csscarry the token theme, thedf-*component vocabulary (df-navtab,df-panel,df-dot,df-btn), and Phosphorpreset-icons. Dock glyphs resolve toi-ph-*classes inlined offline — no icon-set bundle, no runtime network. The Vite hub loads UnoCSS viaunocss/vite; the Next hub via@unocss/postcss(mirroring the git plugin).import()and setsskipTrailingSlashRedirect, so their node-side code and relative SPA assets work under Turbopack.devframe / hub
mountDevframenow serves each mounted devframe's connection meta at its base via a new optionalDevframeHost.mountConnectionMetahook, so an embedded SPA discovers the RPC endpoint directly instead of relying on same-origin parent-window inheritance (which breaks for cross-origin / sandboxed iframes).Plugins
plugin-terminalsmirrors its sessions into the hub's terminals subsystem when hubbed, so a hub UI lists them; standalone runtimes are unaffected.plugin-code-serverreads the version from the first semver token, so cold-start i18n output no longer leaks into the launcher's version label.Build / docs
turbo.json: the example build tasks now depend on the plugin builds they import, so a freshturbo run buildcan't race a plugin's dist.Validated with
typecheck,lint, the full test suite (503 passing), andbuild.🤖 This PR was created with the help of an agent.