Skip to content

assets.md

Latest commit

 

History

History
90 lines (64 loc) · 5.21 KB

assets.md

File metadata and controls

90 lines (64 loc) · 5.21 KB
Raw
outline deep

Assets

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.

Package: @devframes/plugin-assets · framework: Vue + @antfu/design

What it does

Search by name and filter by type from an inline chip row, switch between a thumbnail grid (grouped by folder) and a file tree, and open a resizable right-hand details panel with a live preview (image, video, audio, font, or text), file metadata, and ready-to-copy usage snippets (<img>, CSS background-image, @font-face, a download link). Upload files with the toolbar button (native file picker) or by dropping them anywhere on the frame, and select multiple assets to delete them together. A live file watcher keeps every connected client's listing in sync with changes made outside the UI.

The standalone server requires devframe's trust handshake by default because it can read, write, and delete real files. Uploads, renames, deletes, and folder creation are enabled by default — pass { write: false } (or --read-only on the standalone CLI) for a browse-only deployment.

Standalone

pnpx @devframes/plugin-assets             # manages <cwd>/public
pnpx @devframes/plugin-assets --read-only # disable upload / rename / delete / mkdir

Mount into a Vite host

// vite.config.ts
import { assetsVitePlugin } from '@devframes/plugin-assets/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    assetsVitePlugin(),
  ],
})

Programmatic

createAssetsDevframe(options) returns a definition you can deploy through any adapter:

import { createAssetsDevframe } from '@devframes/plugin-assets'

export default createAssetsDevframe({
  dir: 'static', // defaults to `<cwd>/public`
  baseURL: '/', // the URL the host serves `dir` at
  write: true,
  uploadExtensions: ['png', 'jpg', 'svg', 'webp'], // defaults to Nuxt DevTools' own allow-list, or '*' for any
})
Option Default Description
dir <cwd>/public Directory this devframe manages.
baseURL / URL base the host serves dir at — each asset's publicPath is baseURL + its path. Match a non-root deployment base (e.g. Nuxt's app.baseURL).
write true Enable upload, rename, delete, and folder creation from the UI.
uploadExtensions Nuxt DevTools' allow-list Extensions upload accepts, or '*' for any.
serveStatic false Serve the directory's bytes from this devframe itself. Left off when mounted into a host that already serves public/; the standalone CLI turns it on.
build false Register the build CLI subcommand. See why it's off by default below.

How previews are served

Asset previews (<img>, <video>, download links) load the files by their public URL, and the host the plugin is mounted into serves those files — Vite, Nuxt, and most frameworks already serve their public/ folder at /. The plugin never stands up its own byte-serving route; it just resolves each asset's publicPath as baseURL + the file's path. Point baseURL at wherever the host serves dir (the default / matches the usual public/ convention). The standalone CLI (pnpx @devframes/plugin-assets) is its own host, so it flips serveStatic on and serves the directory under a dedicated base.

RPC surface

All functions are namespaced devframes:plugin:assets:*:

Function Type Notes
list query, snapshot: true Every file under the managed directory, with type, size, and last-modified time.
capabilities query, snapshot: true Whether write actions are enabled, and the upload allow-list — lets the UI gate itself proactively.
read-image-meta query Width, height, and orientation for an image asset.
read-text query Truncated text content, for preview.
upload action Allocates a streaming upload slot; the client pipes the file's bytes over the paired channel.
rename action Renames an asset within its folder, preserving its extension.
delete action Deletes one or more assets in a single call.
mkdir action Creates a folder, including missing parents.
open-in-editor / reveal-in-folder action Launch the asset in your editor, or reveal its containing folder in the OS file manager. Always registered, regardless of write.

upload / rename / delete / mkdir are registered only when write is enabled.

Static export

Every devframe's build CLI subcommand is disabled here by default (capabilities: { build: false }). A static export has no live host serving the files, and every write action is inherently excluded from a static dump. Rather than ship a broken, preview-less, write-less shell of the tool, the build command is simply not registered. Pass { build: true } to createAssetsDevframe() (and { force: true } if calling createBuild() directly) if that degraded export is still useful to you — the file listing itself still bakes into the static RPC dump.

Source

plugins/assets