@effindomv2/create-fui-as-app 0.1.32 → 0.1.33

package/dist/src/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const FUI_AS_VERSION = "0.1.26";
+export declare const FUI_AS_VERSION = "0.1.27";
 export declare const RUNTIME_VERSION = "0.1.10";

package/dist/src/versions.js

@@ -1,2 +1,2 @@
-export const FUI_AS_VERSION = "0.1.26";
+export const FUI_AS_VERSION = "0.1.27";
 export const RUNTIME_VERSION = "0.1.10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/create-fui-as-app",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "private": false,
   "license": "MIT",
   "description": "Scaffold a minimal EffinDom v2 FUI-AS app",

package/templates/hello/README.md

@@ -8,6 +8,32 @@ This template is the smallest FUI-AS app shape:
 - `src/host/host-services.ts` and `src/host/host-events.ts` define app-owned JS bridge contracts.
 - `src/host/generated/*` is generated from those host definition files.
 
+## Staging project assets
+
+`stage-assets.json` is a convention-over-configuration manifest for copying project-owned files into `public/runtime/` during `npm run build:assets`. You should never need to edit `scripts/prepare-runtime.ts` — just drop files into your project and declare them here.
+
+```json
+{
+  "stage": {
+    "fonts/*.ttf": "fonts",
+    "images/**":   "images"
+  }
+}
+```
+
+- **Keys** are **glob patterns** relative to the project root. Supported patterns:
+  - `"*.ext"` — all files with a given extension in the project root.
+  - `"dir/*.ext"` — all files matching the extension inside `dir/` (non-recursive).
+  - `"dir/**"` — copy the entire `dir/` tree recursively.
+- **Values** are the **destination subdirectory** under `public/runtime/`. The value can be a nested path like `"fonts/custom"` and directories are created automatically.
+- The config is optional — if `stage-assets.json` is missing, the build script skips staging with no error.
+
+For example, to ship custom fonts alongside the bundled Noto set:
+
+1. Place your `.ttf` files in a `fonts/` directory at the project root.
+2. Add `"fonts/*.ttf": "fonts"` to `stage-assets.json`.
+3. Reference them in app code as `/runtime/fonts/YourFont.ttf`.
+
 ## Typical workflow
 
 1. Build UI from `src/App.ts` with controls/nodes from `./fui/Fui`.

package/templates/hello/scripts/prepare-runtime.ts

@@ -1,12 +1,79 @@
-import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { basename, join } from "node:path";
 
 const outputDir = "public";
 
+interface StageConfig {
+  stage: Record<string, string>;
+}
+
+function resolveGlob(pattern: string): string[] {
+  const slash = pattern.lastIndexOf("/");
+  if (slash === -1) {
+    const suffix = pattern.startsWith("*.") ? pattern.slice(1) : "";
+    if (suffix.length === 0) return [];
+    return readdirSync(".").filter((f) => f.endsWith(suffix));
+  }
+
+  const dir = pattern.slice(0, slash);
+  const filePart = pattern.slice(slash + 1);
+
+  if (filePart === "**") {
+    return [dir];
+  }
+
+  if (filePart.startsWith("*.")) {
+    const suffix = filePart.slice(1);
+    try {
+      return readdirSync(dir)
+        .filter((f) => f.endsWith(suffix))
+        .map((f) => join(dir, f));
+    } catch {
+      return [];
+    }
+  }
+
+  if (existsSync(pattern)) {
+    return [pattern];
+  }
+
+  return [];
+}
+
+function stageProjectAssets(outputDir: string): void {
+  const configPath = "stage-assets.json";
+  if (!existsSync(configPath)) {
+    return;
+  }
+
+  const raw = readFileSync(configPath, "utf8");
+  const config: StageConfig = JSON.parse(raw);
+
+  for (const [pattern, destDir] of Object.entries(config.stage)) {
+    const matches = resolveGlob(pattern);
+    if (matches.length === 0) {
+      continue;
+    }
+
+    const dest = join(outputDir, "runtime", destDir);
+    mkdirSync(dest, { recursive: true });
+
+    for (const match of matches) {
+      if (statSync(match).isDirectory()) {
+        cpSync(match, dest, { recursive: true });
+      } else {
+        copyFileSync(match, join(dest, basename(match)));
+      }
+    }
+  }
+}
+
 rmSync(outputDir, { recursive: true, force: true });
 mkdirSync(`${outputDir}/runtime`, { recursive: true });
 
 cpSync("node_modules/@effindomv2/runtime/dist", `${outputDir}/runtime/dist`, { recursive: true });
 cpSync("node_modules/@effindomv2/runtime/dist/fonts", `${outputDir}/runtime/fonts`, { recursive: true });
+stageProjectAssets(outputDir);
 copyFileSync("node_modules/@effindomv2/runtime/dist/bridge.js", `${outputDir}/bridge.js`);
 if (existsSync("node_modules/@effindomv2/runtime/dist/bridge.js.map")) {
   copyFileSync("node_modules/@effindomv2/runtime/dist/bridge.js.map", `${outputDir}/bridge.js.map`);

package/templates/hello/stage-assets.json

@@ -0,0 +1,3 @@
+{
+  "stage": {}
+}

package/templates/mvc/README.md

@@ -12,6 +12,32 @@ This template scaffolds a multi-route FUI-AS app with explicit page-level MVC.
 - `route-shell.html` is the per-route host shell copied for each route path.
 - `src/host/host-services.ts` and `src/host/host-events.ts` are app-owned bridge contracts; `src/host/generated/*` is generated output.
 
+## Staging project assets
+
+`stage-assets.json` is a convention-over-configuration manifest for copying project-owned files into `public/runtime/` during `npm run build:assets`. You should never need to edit `scripts/prepare-runtime.ts` — just drop files into your project and declare them here.
+
+```json
+{
+  "stage": {
+    "fonts/*.ttf": "fonts",
+    "images/**":   "images"
+  }
+}
+```
+
+- **Keys** are **glob patterns** relative to the project root. Supported patterns:
+  - `"*.ext"` — all files with a given extension in the project root.
+  - `"dir/*.ext"` — all files matching the extension inside `dir/` (non-recursive).
+  - `"dir/**"` — copy the entire `dir/` tree recursively.
+- **Values** are the **destination subdirectory** under `public/runtime/`. The value can be a nested path like `"fonts/custom"` and directories are created automatically.
+- The config is optional — if `stage-assets.json` is missing, the build script skips staging with no error.
+
+For example, to ship custom fonts alongside the bundled Noto set:
+
+1. Place your `.ttf` files in a `fonts/` directory at the project root.
+2. Add `"fonts/*.ttf": "fonts"` to `stage-assets.json`.
+3. Reference them in app code as `/runtime/fonts/YourFont.ttf`.
+
 ## Routing + deployment model
 
 Each route builds to its own wasm (`home.wasm`, `settings.wasm`) and is mounted by routed harness config. This is designed for true MFE slices: each route app can evolve and deploy independently while still sharing the same browser host/runtime contract.

package/templates/mvc/scripts/prepare-runtime.ts

@@ -1,4 +1,5 @@
-import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { basename, join } from "node:path";
 import { renderRoutedPageHead, resolveRouteManifest, routeHead } from "@effindomv2/fui-as/browser/routed-app-conventions";
 import { routeManifest } from "../src/route-config";
 
@@ -9,6 +10,71 @@ const routeShellTemplate = readFileSync("route-shell.html", "utf8");
 const loadingOverlayStyles = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-styles.html", "utf8");
 const loadingOverlayBody = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-body.html", "utf8");
 
+interface StageConfig {
+  stage: Record<string, string>;
+}
+
+function resolveGlob(pattern: string): string[] {
+  const slash = pattern.lastIndexOf("/");
+  if (slash === -1) {
+    const suffix = pattern.startsWith("*.") ? pattern.slice(1) : "";
+    if (suffix.length === 0) return [];
+    return readdirSync(".").filter((f) => f.endsWith(suffix));
+  }
+
+  const dir = pattern.slice(0, slash);
+  const filePart = pattern.slice(slash + 1);
+
+  if (filePart === "**") {
+    return [dir];
+  }
+
+  if (filePart.startsWith("*.")) {
+    const suffix = filePart.slice(1);
+    try {
+      return readdirSync(dir)
+        .filter((f) => f.endsWith(suffix))
+        .map((f) => join(dir, f));
+    } catch {
+      return [];
+    }
+  }
+
+  if (existsSync(pattern)) {
+    return [pattern];
+  }
+
+  return [];
+}
+
+function stageProjectAssets(outputDir: string): void {
+  const configPath = "stage-assets.json";
+  if (!existsSync(configPath)) {
+    return;
+  }
+
+  const raw = readFileSync(configPath, "utf8");
+  const config: StageConfig = JSON.parse(raw);
+
+  for (const [pattern, destDir] of Object.entries(config.stage)) {
+    const matches = resolveGlob(pattern);
+    if (matches.length === 0) {
+      continue;
+    }
+
+    const dest = join(outputDir, "runtime", destDir);
+    mkdirSync(dest, { recursive: true });
+
+    for (const match of matches) {
+      if (statSync(match).isDirectory()) {
+        cpSync(match, dest, { recursive: true });
+      } else {
+        copyFileSync(match, join(dest, basename(match)));
+      }
+    }
+  }
+}
+
 function renderLoadingOverlay(template: string): string {
   return template
     .replace("{{LOADING_OVERLAY_STYLES}}", loadingOverlayStyles)
@@ -23,6 +89,7 @@ for (const route of resolvedManifest.routes) {
 
 cpSync("node_modules/@effindomv2/runtime/dist", `${outputDir}/runtime/dist`, { recursive: true });
 cpSync("node_modules/@effindomv2/runtime/dist/fonts", `${outputDir}/runtime/fonts`, { recursive: true });
+stageProjectAssets(outputDir);
 copyFileSync("node_modules/@effindomv2/runtime/dist/bridge.js", `${outputDir}/bridge.js`);
 if (existsSync("node_modules/@effindomv2/runtime/dist/bridge.js.map")) {
   copyFileSync("node_modules/@effindomv2/runtime/dist/bridge.js.map", `${outputDir}/bridge.js.map`);

package/templates/mvc/stage-assets.json

@@ -0,0 +1,3 @@
+{
+  "stage": {}
+}