Skip to content

Commit fcbb286

Browse files
antfubotopencode
antfubot
and
opencode
committed
refactor(assets): rebuild the SPA in Vue on @antfu/design
Swap the Preact SPA for Vue 3 SFCs consuming @antfu/design's Vue components directly (ActionButton, ActionIconButton, DisplayBadge, FormTextInput, FormCheckbox, LayoutTabs, LayoutToolbar, OverlayModal), matching the inspect/og plugins. Deletes the hand-rolled Preact UI kit (components/ui/*) in favour of the shared components; hooks become Vue composables; utils and the framework-neutral node/RPC layer are unchanged, so the package's public API (and its snapshots) is untouched. - package.json: preact/@preact/preset-vite/@storybook/preact-vite → vue/@vitejs/plugin-vue/@storybook/vue3-vite, plus reka-ui, floating-vue, colorjs.io (peer deps of the @antfu/design components used). tsconfig drops the Preact JSX options; uno content globs add .vue. - Preserves every behaviour: resizable side panel, inline type-filter chips, direct file-dialog upload + whole-frame drag hint, live refresh, multi-select bulk delete, host-served previews. - cleanupUnusedCatalogs pruned the now-unused @storybook/preact-vite catalog entry. Co-authored-by: opencode <noreply@opencode.ai>
1 parent bd3bdb3 commit fcbb286

63 files changed

Lines changed: 1372 additions & 1644 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/plugins/assets.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ outline: deep
44

55
# Assets
66

7-
Browse, preview, upload, rename, and delete the files in a directory, built as a **Preact** SPA — a framework-neutral port of Nuxt DevTools' Assets tab.
7+
Browse, preview, upload, rename, and delete the files in a directory, built as a **Vue** SPA on `@antfu/design` — a framework-neutral port of Nuxt DevTools' Assets tab.
88

9-
Package: `@devframes/plugin-assets` · framework: **Preact**
9+
Package: `@devframes/plugin-assets` · framework: **Vue + @antfu/design**
1010

1111
## What it does
1212

‎docs/plugins/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ Each plugin is built with a **different UI framework**. That is deliberate: devf
1717
| [Git](./git) | React (Next.js) | A repository dashboard — status, a commit graph, branches, and diffs, with optional staging and committing. |
1818
| [Terminals](./terminals) | Svelte | Stream read-only command output and run fully interactive PTY shells in the browser. |
1919
| [Code Server](./code-server) | Vue | Launch VS Code in the browser (code-server, `code serve-web`, or a tunnel) on demand and embed it in an auto-authenticated iframe. |
20-
| [Assets](./assets) | Preact | Browse, preview, upload, rename, and delete the files in a managed directory. |
20+
| [Assets](./assets) | Vue | Browse, preview, upload, rename, and delete the files in a managed directory. |
2121

2222
## One client, any framework
2323

24-
The collection spans Vue, Solid, React, Svelte, and Preact, yet every plugin shares the same node-side surface: register RPC functions, publish shared state, and connect from the browser with `connectDevframe`. Whatever renders the UI, it talks to the backend through the same protocol — the framework-free Vite hub example drives it with a handful of DOM calls.
24+
The collection spans Vue, Solid, React, and Svelte, yet every plugin shares the same node-side surface: register RPC functions, publish shared state, and connect from the browser with `connectDevframe`. Whatever renders the UI, it talks to the backend through the same protocol — the framework-free Vite hub example drives it with a handful of DOM calls.
2525

2626
This is the framework-agnostic promise in practice. The browser bundle is the author's to choose; devframe handles the transport, the data model, the adapters, and the agent surface underneath.
2727

‎plugins/assets/.storybook/main.ts‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
import type { StorybookConfig } from '@storybook/preact-vite'
2-
import preact from '@preact/preset-vite'
1+
import type { StorybookConfig } from '@storybook/vue3-vite'
2+
import vue from '@vitejs/plugin-vue'
33
import UnoCSS from 'unocss/vite'
4+
import { mergeConfig } from 'vite'
5+
import { alias } from '../../../alias'
46

57
const config: StorybookConfig = {
68
stories: ['../src/spa/app/**/*.stories.@(ts|tsx)'],
79
addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
810
framework: {
9-
name: '@storybook/preact-vite',
11+
name: '@storybook/vue3-vite',
1012
options: {},
1113
},
12-
viteFinal(viteConfig) {
13-
viteConfig.plugins ??= []
14-
viteConfig.plugins.push(preact(), UnoCSS())
15-
// Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
16-
// e.g. when iframed by the storybook-hub example: accept any Host header.
17-
viteConfig.server = { ...viteConfig.server, allowedHosts: true }
18-
return viteConfig
14+
async viteFinal(viteConfig) {
15+
return mergeConfig(viteConfig, {
16+
resolve: { alias },
17+
plugins: [vue(), UnoCSS()],
18+
// Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
19+
// e.g. when iframed by the storybook-hub example: accept any Host header.
20+
server: { allowedHosts: true },
21+
})
1922
},
2023
}
2124

plugins/assets/.storybook/preview.tsx renamed to plugins/assets/.storybook/preview.ts

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import type { Decorator, Preview } from '@storybook/preact-vite'
2-
import { useEffect } from 'preact/hooks'
3-
import '@antfu/design/styles.css'
1+
import type { Decorator, Preview } from '@storybook/vue3-vite'
2+
import { h } from 'vue'
43
import 'virtual:uno.css'
4+
import 'floating-vue/dist/style.css'
5+
import '@antfu/design/styles.css'
56

6-
const withTheme: Decorator = (Story, context) => {
7+
const withTheme: Decorator = (story, context) => {
78
const theme = context.globals.theme ?? 'dark'
8-
useEffect(() => {
9-
document.documentElement.classList.toggle('dark', theme === 'dark')
10-
}, [theme])
11-
return (
12-
<div class="flex h-svh justify-center bg-base p-6 color-base font-sans">
13-
<div class="flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-base p-3">
14-
<Story />
15-
</div>
16-
</div>
9+
document.documentElement.classList.toggle('dark', theme !== 'light')
10+
return () => h(
11+
'div',
12+
{ class: 'flex h-svh justify-center bg-base p-6 color-base font-sans' },
13+
[h('div', { class: 'flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-base p-3' }, [h(story())])],
1714
)
1815
}
1916

‎plugins/assets/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `@devframes/plugin-assets`
22

3-
Browse, preview, upload, rename, and delete the files in a directory — a framework-neutral port of Nuxt DevTools' Assets tab, built as a **Preact** SPA.
3+
Browse, preview, upload, rename, and delete the files in a directory — a framework-neutral port of Nuxt DevTools' Assets tab, built as a **Vue** SPA on `@antfu/design`.
44

55
```sh
66
pnpx @devframes/plugin-assets

‎plugins/assets/package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"build": "tsdown && vite build --config src/spa/vite.config.ts",
4242
"dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
4343
"watch": "tsdown --watch",
44-
"storybook": "storybook dev -p 6013",
44+
"storybook": "storybook dev -p 6013 --host 0.0.0.0",
4545
"storybook:build": "storybook build",
4646
"prepack": "pnpm build",
4747
"test": "vitest run",
@@ -70,20 +70,23 @@
7070
"devDependencies": {
7171
"@antfu/design": "catalog:frontend",
7272
"@iconify-json/ph": "catalog:frontend",
73-
"@preact/preset-vite": "catalog:build",
7473
"@storybook/addon-a11y": "catalog:storybook",
7574
"@storybook/addon-docs": "catalog:storybook",
76-
"@storybook/preact-vite": "catalog:storybook",
75+
"@storybook/vue3-vite": "catalog:storybook",
7776
"@types/node": "catalog:types",
77+
"@vitejs/plugin-vue": "catalog:build",
78+
"colorjs.io": "catalog:frontend",
7879
"devframe": "workspace:*",
80+
"floating-vue": "catalog:frontend",
7981
"get-port-please": "catalog:deps",
8082
"h3": "catalog:deps",
81-
"preact": "catalog:frontend",
83+
"reka-ui": "catalog:frontend",
8284
"storybook": "catalog:storybook",
8385
"tsdown": "catalog:build",
8486
"unocss": "catalog:frontend",
8587
"vite": "catalog:build",
8688
"vitest": "catalog:testing",
89+
"vue": "catalog:frontend",
8790
"ws": "catalog:deps"
8891
}
8992
}

0 commit comments

Comments
 (0)