@trokky/studio 3.2.0 → 3.4.0

package/dist/index.html

@@ -45,7 +45,7 @@
     </style>
     
     <title>Trokky Studio</title>
-    <script type="module" crossorigin src="/assets/index-Da-xtsMB.js"></script>
+    <script type="module" crossorigin src="/assets/index-CMHu7Of4.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CbXtAM7H.js">
     <link rel="modulepreload" crossorigin href="/assets/router-Dpg4KYTB.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-igJJvL5X.js">

package/dist/server/document.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The Studio document, prepared for a mount point.
+ *
+ * Pure: takes the built `index.html` as a string and returns it with the bootstrap config
+ * injected and asset paths rewritten. Nothing here touches the filesystem, so it runs
+ * anywhere — the Workers handler feeds it HTML from the ASSETS binding.
+ */
+import type { StudioConfig } from './assets.js';
+export declare function transformStudioDocument(html: string, config: StudioConfig, basePath: string): string;

package/dist/server/document.js

@@ -0,0 +1,37 @@
+/**
+ * The Studio document, prepared for a mount point.
+ *
+ * Pure: takes the built `index.html` as a string and returns it with the bootstrap config
+ * injected and asset paths rewritten. Nothing here touches the filesystem, so it runs
+ * anywhere — the Workers handler feeds it HTML from the ASSETS binding.
+ */
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/** Serialize for a <script> body without letting `</script>` or friends break out. */
+function escapeJsonForScript(obj) {
+    return JSON.stringify(obj)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/'/g, '\\u0027');
+}
+export function transformStudioDocument(html, config, basePath) {
+    const prefix = basePath.replace(/\/+$/, '');
+    // The built document carries a development bootstrap; replace it wholesale.
+    html = html.replace(/window\.TROKKY_CONFIG\s*=\s*{[\s\S]*?};/, `window.TROKKY_CONFIG = ${escapeJsonForScript(config)};`);
+    // Vite emits absolute /assets/ URLs; Studio is rarely mounted at the origin root.
+    html = html.replace(/src="\/assets\//g, `src="${prefix}/assets/`);
+    html = html.replace(/href="\/assets\//g, `href="${prefix}/assets/`);
+    // The favicon path assumes the root too, and nothing serves it there.
+    html = html.replace(/<link rel="icon"[^>]*>/g, '');
+    if (config.branding?.title) {
+        html = html.replace(/<title>.*?<\/title>/, `<title>${escapeHtml(config.branding.title)}</title>`);
+    }
+    return html;
+}

package/dist/server/workers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Trokky Studio on a web-standard runtime (Cloudflare Workers, or anything with `fetch`).
+ *
+ * `studioRouter` is Express and reads the built files from disk. On Workers there is no disk:
+ * the built Studio is shipped as static assets and served through the ASSETS binding. So this
+ * handler does two things and nothing else — hands hashed assets to the binding with immutable
+ * caching, and serves the document for the root and every client-side route, with the bootstrap
+ * config injected for this mount point.
+ *
+ *   // wrangler.jsonc: "assets": { "directory": "./public" }, and @trokky/studio/dist copied
+ *   // into public/studio at build time.
+ *   const studio = createStudioFetchHandler({ basePath: '/studio', apiPath: '/api', assets: env.ASSETS })
+ *   if (url.pathname.startsWith('/studio')) return studio(request)
+ */
+import type { StudioConfig } from './assets.js';
+/** The shape of the ASSETS binding; declared structurally so this package needs no Workers types. */
+export interface AssetsFetcher {
+    fetch(request: Request): Promise<Response>;
+}
+export interface StudioFetchHandlerOptions {
+    /** Where the Studio is mounted, e.g. '/studio'. Also where its files live under the assets root. */
+    basePath: string;
+    /** Where the Trokky API is mounted. Default '/api'. */
+    apiPath?: string;
+    /** The Workers static assets binding (`env.ASSETS`). */
+    assets: AssetsFetcher;
+    /** An absolute API URL, for when the Studio is served from a different origin than the API. */
+    backendUrl?: string;
+    branding?: StudioConfig['branding'];
+    i18n?: Record<string, unknown>;
+}
+export declare function createStudioFetchHandler(options: StudioFetchHandlerOptions): (request: Request) => Promise<Response>;

package/dist/server/workers.js

@@ -0,0 +1,60 @@
+/**
+ * Trokky Studio on a web-standard runtime (Cloudflare Workers, or anything with `fetch`).
+ *
+ * `studioRouter` is Express and reads the built files from disk. On Workers there is no disk:
+ * the built Studio is shipped as static assets and served through the ASSETS binding. So this
+ * handler does two things and nothing else — hands hashed assets to the binding with immutable
+ * caching, and serves the document for the root and every client-side route, with the bootstrap
+ * config injected for this mount point.
+ *
+ *   // wrangler.jsonc: "assets": { "directory": "./public" }, and @trokky/studio/dist copied
+ *   // into public/studio at build time.
+ *   const studio = createStudioFetchHandler({ basePath: '/studio', apiPath: '/api', assets: env.ASSETS })
+ *   if (url.pathname.startsWith('/studio')) return studio(request)
+ */
+import { transformStudioDocument } from './document.js';
+const ASSET_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+const trimTrailingSlash = (value) => value.replace(/\/+$/, '');
+export function createStudioFetchHandler(options) {
+    const basePath = trimTrailingSlash(options.basePath);
+    const apiPath = trimTrailingSlash(options.apiPath ?? '/api');
+    return async function handleStudio(request) {
+        if (request.method !== 'GET' && request.method !== 'HEAD') {
+            return new Response('Method Not Allowed', { status: 405, headers: { allow: 'GET, HEAD' } });
+        }
+        const url = new URL(request.url);
+        if (url.pathname !== basePath && !url.pathname.startsWith(`${basePath}/`)) {
+            return new Response('Not Found', { status: 404 });
+        }
+        // Hashed assets: the binding serves them from `${basePath}/assets/…` as copied at build time.
+        if (url.pathname.startsWith(`${basePath}/assets/`)) {
+            const asset = await options.assets.fetch(new Request(url.toString(), { method: request.method }));
+            if (!asset.ok)
+                return new Response('Not Found', { status: 404 });
+            const headers = new Headers(asset.headers);
+            // Vite emits content-hashed filenames, so they can be cached forever.
+            headers.set('cache-control', `public, max-age=${ASSET_MAX_AGE_SECONDS}, immutable`);
+            return new Response(asset.body, { status: asset.status, headers });
+        }
+        // The root and every client-side route get the same document.
+        const documentUrl = new URL(`${basePath}/index.html`, url.origin);
+        const built = await options.assets.fetch(new Request(documentUrl.toString()));
+        if (!built.ok) {
+            return new Response(`Studio is not in the assets bundle at ${basePath}/index.html. Copy @trokky/studio/dist there at build time.`, { status: 500, headers: { 'content-type': 'text/plain; charset=utf-8' } });
+        }
+        const config = {
+            mode: 'production',
+            apiBasePath: apiPath,
+            basePath,
+            backendUrl: options.backendUrl ?? `${url.origin}${apiPath}`,
+            schemas: [],
+            branding: options.branding,
+            ...(options.i18n ? { i18n: options.i18n } : {}),
+        };
+        const html = transformStudioDocument(await built.text(), config, basePath);
+        return new Response(request.method === 'HEAD' ? null : html, {
+            status: 200,
+            headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' },
+        });
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trokky/studio",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Trokky Studio: the admin UI, mounted by the site as an Express router",
   "type": "module",
   "scripts": {
@@ -8,7 +8,7 @@
     "dev:server": "tsc src/index.ts src/server/assets.ts src/server/express.ts src/utils/logger.ts --outDir dist --module esnext --target es2020 --skipLibCheck --moduleResolution node --allowSyntheticDefaultImports --esModuleInterop --declaration --watch",
     "build": "vite build && npm run build:server",
     "build:single": "vite build --config vite.single.config.ts",
-    "build:server": "tsc src/index.ts src/server/assets.ts src/server/express.ts src/utils/logger.ts --outDir dist --module esnext --target es2020 --skipLibCheck --moduleResolution node --allowSyntheticDefaultImports --esModuleInterop --declaration",
+    "build:server": "tsc src/index.ts src/server/assets.ts src/server/express.ts src/server/document.ts src/server/workers.ts src/utils/logger.ts --outDir dist --module esnext --target es2020 --skipLibCheck --moduleResolution node --allowSyntheticDefaultImports --esModuleInterop --declaration",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext ts,tsx",
@@ -31,7 +31,7 @@
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
-    "@trokky/trokky": "^3.2.0",
+    "@trokky/trokky": "^3.4.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.29.0",
     "express": "^4.18.0",
@@ -80,6 +80,10 @@
     "./standalone": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./workers": {
+      "import": "./dist/server/workers.js",
+      "types": "./dist/server/workers.d.ts"
     }
   },
   "files": [