@trokky/studio 2.0.7 → 3.1.0

package/dist/index.html

@@ -45,7 +45,7 @@
     </style>
     
     <title>Trokky Studio</title>
-    <script type="module" crossorigin src="/assets/index-D0f8OCEI.js"></script>
+    <script type="module" crossorigin src="/assets/index-Da-xtsMB.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/express.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Studio as an Express router.
+ *
+ * Studio owns its own mounting. A site does:
+ *
+ *   import { studioRouter } from '@trokky/studio/express'
+ *   app.use('/studio', studioRouter({ apiPath: '/api' }))
+ *
+ * The router serves the built SPA (HTML, hashed assets, and the HTML again
+ * for every client-side route) and injects the small bootstrap config the
+ * SPA needs before it can talk to the API: where the API is, what path
+ * Studio is mounted on, and optional branding and i18n defaults for the
+ * login screen. Everything else (structure, schemas, media settings, the
+ * branding stored in settings) Studio fetches from the API once it runs.
+ *
+ * The mount path is read from `req.baseUrl` on every request, so the same
+ * router works wherever the site mounts it and behind any prefix a proxy
+ * adds. It is a plain middleware function underneath, so it mounts on
+ * Express 4 and Express 5 alike; no path-pattern syntax is used.
+ */
+import { Router } from 'express';
+export interface StudioRouterOptions {
+    /**
+     * Path the Trokky API is mounted on, as seen by the browser.
+     * Default: '/api'.
+     */
+    apiPath?: string;
+    /**
+     * Full origin + API path the browser should call, e.g.
+     * 'https://cms.example.com/api'. When omitted it is derived from the
+     * incoming request (protocol + Host header + apiPath), which is right for
+     * the usual same-origin deployment. Set it when the server sits behind a
+     * proxy that rewrites the Host header.
+     */
+    backendUrl?: string;
+    /** Branding shown before the API has answered (login screen title, theme). */
+    branding?: {
+        title?: string;
+        logo?: string;
+        theme?: 'light' | 'dark' | 'system';
+    };
+    /** Locale defaults for the UI. */
+    i18n?: {
+        defaultLocale?: string;
+        supportedLocales?: string[];
+        fallbackLocale?: string;
+        detectBrowserLanguage?: boolean;
+    };
+}
+/**
+ * Build an Express router that serves Trokky Studio.
+ */
+export declare function studioRouter(options?: StudioRouterOptions): Router;
+export { getStudioHTML, getStudioAsset } from './assets.js';

package/dist/server/express.js

@@ -0,0 +1,76 @@
+/**
+ * Studio as an Express router.
+ *
+ * Studio owns its own mounting. A site does:
+ *
+ *   import { studioRouter } from '@trokky/studio/express'
+ *   app.use('/studio', studioRouter({ apiPath: '/api' }))
+ *
+ * The router serves the built SPA (HTML, hashed assets, and the HTML again
+ * for every client-side route) and injects the small bootstrap config the
+ * SPA needs before it can talk to the API: where the API is, what path
+ * Studio is mounted on, and optional branding and i18n defaults for the
+ * login screen. Everything else (structure, schemas, media settings, the
+ * branding stored in settings) Studio fetches from the API once it runs.
+ *
+ * The mount path is read from `req.baseUrl` on every request, so the same
+ * router works wherever the site mounts it and behind any prefix a proxy
+ * adds. It is a plain middleware function underneath, so it mounts on
+ * Express 4 and Express 5 alike; no path-pattern syntax is used.
+ */
+import { Router } from 'express';
+import { getStudioHTML, getStudioAsset } from './assets.js';
+/** How long browsers may cache Studio's hashed assets. */
+const ASSET_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+function trimTrailingSlash(path) {
+    return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path;
+}
+/**
+ * Build an Express router that serves Trokky Studio.
+ */
+export function studioRouter(options = {}) {
+    const apiPath = trimTrailingSlash(options.apiPath ?? '/api');
+    const router = Router();
+    const sendHtml = (req, res) => {
+        // req.baseUrl is the path this router was mounted on, including any
+        // prefix an outer app.use() added. That is exactly what the SPA needs
+        // for its own routing and for asset URLs.
+        const basePath = trimTrailingSlash(req.baseUrl || '');
+        const backendUrl = options.backendUrl ?? `${req.protocol}://${req.get('host')}${apiPath}`;
+        const html = getStudioHTML({
+            mode: 'production',
+            apiBasePath: apiPath,
+            basePath,
+            backendUrl,
+            schemas: [],
+            branding: options.branding,
+            ...(options.i18n ? { i18n: options.i18n } : {}),
+        }, basePath);
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-store');
+        res.send(html);
+    };
+    router.use((req, res, next) => {
+        if (req.method !== 'GET' && req.method !== 'HEAD') {
+            next();
+            return;
+        }
+        // req.path is relative to the mount point.
+        if (req.path.startsWith('/assets/')) {
+            const asset = getStudioAsset(req.path.slice('/assets/'.length));
+            if (!asset) {
+                res.status(404).send('Not found');
+                return;
+            }
+            res.setHeader('Content-Type', asset.contentType);
+            // Vite emits content-hashed filenames, so they can be cached forever.
+            res.setHeader('Cache-Control', `public, max-age=${ASSET_MAX_AGE_SECONDS}, immutable`);
+            res.send(asset.content);
+            return;
+        }
+        // The root and every client-side route get the same document.
+        sendHtml(req, res);
+    });
+    return router;
+}
+export { getStudioHTML, getStudioAsset } from './assets.js';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trokky/studio",
-  "version": "2.0.7",
-  "description": "Trokky Studio v2 - Zero-config content management interface",
+  "version": "3.1.0",
+  "description": "Trokky Studio: the admin UI, mounted by the site as an Express router",
   "type": "module",
   "scripts": {
     "dev": "vite --port 5173",
-    "dev:server": "tsc src/index.ts src/server/assets.ts src/utils/logger.ts --outDir dist --module esnext --target es2020 --skipLibCheck --moduleResolution node --allowSyntheticDefaultImports --esModuleInterop --declaration --watch",
+    "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/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/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": "^2.0.7",
+    "@trokky/trokky": "^3.1.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.29.0",
     "express": "^4.18.0",
@@ -61,6 +61,7 @@
     "jsdom": "^29.0.1",
     "postcss": "^8.4.24",
     "rollup": "^4.63.1",
+    "supertest": "^7.2.2",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.0.0",
     "vite": "^8.2.2",
@@ -72,13 +73,13 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./express": {
+      "import": "./dist/server/express.js",
+      "types": "./dist/server/express.d.ts"
+    },
     "./standalone": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    },
-    "./dist/server/assets.js": {
-      "import": "./dist/server/assets.js",
-      "types": "./dist/server/assets.d.ts"
     }
   },
   "files": [