embedded-react 0.3.0 → 0.4.0

package/cli.mjs

@@ -23,12 +23,18 @@
 // embedded-react.wasm host page, and hot-reloads on save (useState preserved). No native toolchain — the
 // .wasm ships prebuilt in this package. See tools/web-sim/README.md.
 
-import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import { basename, dirname, relative, resolve } from 'node:path';
-import { tmpdir } from 'node:os';
-import { buildApp, runDevServer } from './sim-server.mjs';
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  writeFileSync,
+} from 'node:fs';
+import {createRequire} from 'node:module';
+import {fileURLToPath, pathToFileURL} from 'node:url';
+import {basename, dirname, relative, resolve} from 'node:path';
+import {tmpdir} from 'node:os';
+import {buildApp, runDevServer} from './sim-server.mjs';
 
 const PKG_ROOT = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
@@ -59,15 +65,22 @@ Usage:
 function simDirOrExit() {
   const simDir = resolve(PKG_ROOT, 'sim');
   if (!existsSync(resolve(simDir, 'embedded-react.wasm'))) {
-    console.error('The prebuilt simulator (sim/embedded-react.wasm) is missing from this install.');
-    console.error('A published embedded-react package ships it; building from source needs the Emscripten SDK.');
+    console.error(
+      'The prebuilt simulator (sim/embedded-react.wasm) is missing from this install.',
+    );
+    console.error(
+      'A published embedded-react package ships it; building from source needs the Emscripten SDK.',
+    );
     process.exit(1);
   }
   return simDir;
 }
 
 const libSrc = () => resolve(PKG_ROOT, 'src/embedded-react/index.js');
-const nodePaths = (cwd) => [resolve(PKG_ROOT, 'node_modules'), resolve(cwd, 'node_modules')];
+const nodePaths = cwd => [
+  resolve(PKG_ROOT, 'node_modules'),
+  resolve(cwd, 'node_modules'),
+];
 
 /** Resolve the app entry: an explicit arg, else common conventions, else package.json "main"/"source". */
 function resolveEntry(cwd, explicit) {
@@ -79,7 +92,14 @@ function resolveEntry(cwd, explicit) {
     }
     return p;
   }
-  for (const rel of ['index.jsx', 'src/index.jsx', 'index.tsx', 'src/index.tsx', 'App.jsx', 'src/App.jsx']) {
+  for (const rel of [
+    'index.jsx',
+    'src/index.jsx',
+    'index.tsx',
+    'src/index.tsx',
+    'App.jsx',
+    'src/App.jsx',
+  ]) {
     const p = resolve(cwd, rel);
     if (existsSync(p)) return p;
   }
@@ -97,8 +117,12 @@ function resolveEntry(cwd, explicit) {
       /* ignore */
     }
   }
-  console.error('No app entry found. Pass one explicitly:  embedded-react dev <entry.jsx>');
-  console.error('(looked for ./index.jsx, ./src/index.jsx, … and package.json "main")');
+  console.error(
+    'No app entry found. Pass one explicitly:  embedded-react dev <entry.jsx>',
+  );
+  console.error(
+    '(looked for ./index.jsx, ./src/index.jsx, … and package.json "main")',
+  );
   process.exit(1);
 }
 
@@ -106,12 +130,14 @@ async function dev(args) {
   const cwd = process.cwd();
   const portIdx = args.indexOf('--port');
   const port = portIdx >= 0 ? parseInt(args[portIdx + 1], 10) : 3333;
-  const explicit = args.find((a, i) => !a.startsWith('--') && (portIdx < 0 || i !== portIdx + 1));
+  const explicit = args.find(
+    (a, i) => !a.startsWith('--') && (portIdx < 0 || i !== portIdx + 1),
+  );
 
   const simDir = simDirOrExit();
   const entry = resolveEntry(cwd, explicit);
   const outDir = resolve(tmpdir(), 'embedded-react-sim');
-  mkdirSync(outDir, { recursive: true });
+  mkdirSync(outDir, {recursive: true});
 
   await runDevServer({
     entry,
@@ -130,20 +156,33 @@ async function exportApp(args) {
   const cwd = process.cwd();
   const outIdx = args.indexOf('--out');
   const outDir = resolve(cwd, outIdx >= 0 ? args[outIdx + 1] : 'sim-export');
-  const explicit = args.find((a, i) => !a.startsWith('--') && (outIdx < 0 || i !== outIdx + 1));
+  const explicit = args.find(
+    (a, i) => !a.startsWith('--') && (outIdx < 0 || i !== outIdx + 1),
+  );
 
   const simDir = simDirOrExit();
   const entry = resolveEntry(cwd, explicit);
   const pub = resolve(outDir, 'public');
-  mkdirSync(pub, { recursive: true });
+  mkdirSync(pub, {recursive: true});
 
   // Bundle the app + bake assets into public/, then drop the prebuilt module + host page alongside.
-  await buildApp({ entry, projectRoot: cwd, libSrc: libSrc(), nodePaths: nodePaths(cwd), outDir: pub });
-  for (const f of ['embedded-react.js', 'embedded-react.wasm']) copyFileSync(resolve(simDir, f), resolve(pub, f));
+  await buildApp({
+    entry,
+    projectRoot: cwd,
+    libSrc: libSrc(),
+    nodePaths: nodePaths(cwd),
+    outDir: pub,
+  });
+  for (const f of ['embedded-react.js', 'embedded-react.wasm'])
+    copyFileSync(resolve(simDir, f), resolve(pub, f));
   copyFileSync(resolve(simDir, 'index.html'), resolve(outDir, 'index.html'));
 
-  console.log(`✓ exported a static playground → ${relative(cwd, outDir) || '.'}/`);
-  console.log(`  serve it over http (e.g. \`npx serve ${relative(cwd, outDir) || '.'}\`) or deploy the folder to any static host.`);
+  console.log(
+    `✓ exported a static playground → ${relative(cwd, outDir) || '.'}/`,
+  );
+  console.log(
+    `  serve it over http (e.g. \`npx serve ${relative(cwd, outDir) || '.'}\`) or deploy the folder to any static host.`,
+  );
 }
 
 /** Resolve the root component file for the AOT compiler (App.jsx), distinct from the registry entry. */
@@ -160,18 +199,24 @@ function resolveAppComponent(cwd, explicit) {
     const p = resolve(cwd, rel);
     if (existsSync(p)) return p;
   }
-  console.error('No App component found. Pass one explicitly:  embedded-react build --aot <App.jsx>');
+  console.error(
+    'No App component found. Pass one explicitly:  embedded-react build --aot <App.jsx>',
+  );
   process.exit(1);
 }
 
 /** Flow B (--aot): compile the App component to C (app.gen.{c,h}) + bake assets, to compile into firmware. */
 async function buildAot(cwd, explicit, outDir) {
-  const { compileSource } = await import('./aot/compile.mjs');
-  const { bakeAssets } = await import('./assets/index.mjs');
+  const {compileSource, bakeSvgArtifacts} = await import('./aot/compile.mjs');
+  const {bakeAssets} = await import('./assets/index.mjs');
   const appPath = resolveAppComponent(cwd, explicit);
+  const appDir = dirname(appPath);
+  const src = readFileSync(appPath, 'utf8');
   let result;
   try {
-    result = compileSource(readFileSync(appPath, 'utf8'), 'app', { filename: appPath });
+    // Bake <Svg source> .svg imports → vector artifacts (incl. gradients), then compile with them in hand.
+    const svgArtifacts = await bakeSvgArtifacts(src, appDir);
+    result = compileSource(src, 'app', {filename: appPath, svgArtifacts});
   } catch (e) {
     console.error(e && e.aotLoc ? e.message : e?.message || String(e));
     process.exit(1);
@@ -179,27 +224,34 @@ async function buildAot(cwd, explicit, outDir) {
   writeFileSync(resolve(outDir, 'app.gen.c'), result.c);
   writeFileSync(resolve(outDir, 'app.gen.h'), result.h);
 
-  const appDir = dirname(appPath);
-  const imageJobs = result.images.map((im) => ({ name: im.name, path: resolve(appDir, im.importPath) }));
+  const imageJobs = result.images.map(im => ({
+    name: im.name,
+    path: resolve(appDir, im.importPath),
+  }));
   for (const j of imageJobs) {
     if (!existsSync(j.path)) {
       console.error(`<Image> asset "${j.name}" not found at ${j.path}`);
       process.exit(1);
     }
   }
-  const baked = bakeAssets({ images: imageJobs, fonts: [], outDir });
-  console.log(`✓ Flow B (AOT) → ${relative(cwd, outDir) || '.'}/app.gen.c (+ app.gen.h, assets.generated.c — ${baked.images} image(s))`);
-  console.log('  No QuickJS on the device: compile these into your firmware against the engine (er_scene.h).');
+  const baked = bakeAssets({images: imageJobs, fonts: [], outDir});
+  console.log(
+    `✓ Flow B (AOT) → ${relative(cwd, outDir) || '.'}/app.gen.c (+ app.gen.h, assets.generated.c — ${baked.images} image(s))`,
+  );
+  console.log(
+    '  No QuickJS on the device: compile these into your firmware against the engine (er_scene.h).',
+  );
 }
 
 /** Flow A (default): bundle → QuickJS bytecode (via the prebuilt wasm) + baked assets → app.erpkg. */
 async function buildContainer(cwd, explicit, outDir) {
   const esbuild = require('esbuild');
-  const { bakeImage } = await import('./assets/bake-image.mjs');
-  const { bakeFont } = await import('./assets/bake-font.mjs');
-  const { emitAssetPack } = await import('./assets/emit-pack.mjs');
-  const { emitContainer } = await import('./assets/emit-container.mjs');
-  const { compileToBytecode } = await import('./qjsc-wasm.mjs');
+  const {bakeImage} = await import('./assets/bake-image.mjs');
+  const {bakeFont} = await import('./assets/bake-font.mjs');
+  const {emitAssetPack} = await import('./assets/emit-pack.mjs');
+  const {emitContainer} = await import('./assets/emit-container.mjs');
+  const {registerSvgVectorLoader} = await import('./assets/svg-loader.mjs');
+  const {compileToBytecode} = await import('./qjsc-wasm.mjs');
 
   const simDir = simDirOrExit();
   const entry = resolveEntry(cwd, explicit);
@@ -210,22 +262,29 @@ async function buildContainer(cwd, explicit, outDir) {
   const assetPlugin = {
     name: 'embedded-react-assets',
     setup(b) {
-      b.onLoad({ filter: /\.(png|jpe?g|webp|gif|bmp)$/i }, (a) => {
+      b.onLoad({filter: /\.(png|jpe?g|webp|gif|bmp)$/i}, a => {
         const n = basename(a.path).replace(/\.[^.]+$/, '');
         images.set(n, a.path);
-        return { contents: `module.exports = ${JSON.stringify(n)};`, loader: 'js' };
+        return {
+          contents: `module.exports = ${JSON.stringify(n)};`,
+          loader: 'js',
+        };
       });
-      b.onLoad({ filter: /\.(ttf|otf)$/i }, (a) => {
+      b.onLoad({filter: /\.(ttf|otf)$/i}, a => {
         const f = basename(a.path).replace(/\.[^.]+$/, '');
         fonts.set(f, a.path);
-        return { contents: `module.exports = ${JSON.stringify(f)};`, loader: 'js' };
+        return {
+          contents: `module.exports = ${JSON.stringify(f)};`,
+          loader: 'js',
+        };
       });
+      registerSvgVectorLoader(b, (name, p) => images.set(name, p)); // raster-fallback SVGs join the image pack
     },
   };
   // The bundle is an intermediate (it becomes bytecode in the .erpkg) — keep it out of the user's outDir
   // so `dist/` ends up holding only app.erpkg.
   const tmp = resolve(tmpdir(), 'embedded-react-build');
-  mkdirSync(tmp, { recursive: true });
+  mkdirSync(tmp, {recursive: true});
   const bundlePath = resolve(tmp, 'app.bundle.js');
   await esbuild.build({
     entryPoints: [entry],
@@ -235,10 +294,10 @@ async function buildContainer(cwd, explicit, outDir) {
     platform: 'neutral',
     target: 'es2020',
     jsx: 'automatic',
-    alias: { 'embedded-react': libSrc() },
+    alias: {'embedded-react': libSrc()},
     nodePaths: nodePaths(cwd),
     plugins: [assetPlugin],
-    define: { 'process.env.NODE_ENV': '"production"' },
+    define: {'process.env.NODE_ENV': '"production"'},
     legalComments: 'none',
     logLevel: 'silent',
   });
@@ -249,30 +308,51 @@ async function buildContainer(cwd, explicit, outDir) {
 
   // Bake imported images/fonts into an ERPK pack (font sizes discovered from the bundle).
   const discoveredSizes = [
-    ...new Set([...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map((m) => Math.round(Number(m[1])))),
+    ...new Set(
+      [...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map(m =>
+        Math.round(Number(m[1])),
+      ),
+    ),
   ].sort((a, b) => a - b);
   let cfg = {};
   const cp = resolve(cwd, 'assets.config.js');
-  if (existsSync(cp)) cfg = (await import(pathToFileURL(cp).href)).default || {};
+  if (existsSync(cp))
+    cfg = (await import(pathToFileURL(cp).href)).default || {};
   const fontConfig = cfg.fonts || {};
   const fontJobs = [...fonts.entries()].map(([family, path]) => {
     const fc = fontConfig[family] || {};
-    return { path, family, sizes: fc.sizes?.length ? fc.sizes : discoveredSizes.length ? discoveredSizes : [16], bpp: fc.bpp ?? 4, glyphs: fc.glyphs ?? 'ascii' };
+    return {
+      path,
+      family,
+      sizes: fc.sizes?.length
+        ? fc.sizes
+        : discoveredSizes.length
+          ? discoveredSizes
+          : [16],
+      bpp: fc.bpp ?? 4,
+      glyphs: fc.glyphs ?? 'ascii',
+    };
   });
-  const imageJobs = [...images.entries()].map(([name, path]) => ({ path, name }));
+  const imageJobs = [...images.entries()].map(([name, path]) => ({path, name}));
   const bakedImages = imageJobs.map(bakeImage);
   const bakedFonts = fontJobs.map(bakeFont);
-  const assetPack = bakedImages.length || bakedFonts.length ? emitAssetPack({ images: bakedImages, fonts: bakedFonts }) : null;
+  const assetPack =
+    bakedImages.length || bakedFonts.length
+      ? emitAssetPack({images: bakedImages, fonts: bakedFonts})
+      : null;
 
-  const container = emitContainer({ bytecode, assetPack, qjsTag: QJS_TAG });
+  const container = emitContainer({bytecode, assetPack, qjsTag: QJS_TAG});
   const outPath = resolve(outDir, 'app.erpkg');
   writeFileSync(outPath, container);
-  const kb = (n) => `${(n / 1024).toFixed(1)} KB`;
+  const kb = n => `${(n / 1024).toFixed(1)} KB`;
   console.log(
     `✓ Flow A → ${relative(cwd, outPath) || 'app.erpkg'} (${kb(container.length)}; qjs ${QJS_TAG}, bytecode ${kb(bytecode.length)}` +
-      (assetPack ? `, assets ${kb(assetPack.length)}` : '') + ')',
+      (assetPack ? `, assets ${kb(assetPack.length)}` : '') +
+      ')',
+  );
+  console.log(
+    "  Upload app.erpkg to your device's config region (er_runtime_load_container), or run it on the desktop host.",
   );
-  console.log("  Upload app.erpkg to your device's config region (er_runtime_load_container), or run it on the desktop host.");
 }
 
 /** `embedded-react build [--aot] [entry] [--out dir]` — produce the device artifact. */
@@ -281,8 +361,10 @@ async function build(args) {
   const aot = args.includes('--aot');
   const outIdx = args.indexOf('--out');
   const outDir = resolve(cwd, outIdx >= 0 ? args[outIdx + 1] : 'dist');
-  const explicit = args.find((a, i) => !a.startsWith('--') && (outIdx < 0 || i !== outIdx + 1));
-  mkdirSync(outDir, { recursive: true });
+  const explicit = args.find(
+    (a, i) => !a.startsWith('--') && (outIdx < 0 || i !== outIdx + 1),
+  );
+  mkdirSync(outDir, {recursive: true});
   if (aot) await buildAot(cwd, explicit, outDir);
   else await buildContainer(cwd, explicit, outDir);
 }

package/pack-container.mjs

@@ -28,15 +28,22 @@
 //
 // Prereq: the bytecode precompiler (er-bridge-quickjs-compile) must be built. This script searches the
 // usual build dirs and tells you how to build it if it's missing (override with ER_COMPILE_BIN).
-import { build } from 'esbuild';
-import { spawnSync } from 'node:child_process';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import { dirname, resolve, basename } from 'node:path';
-import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs';
-import { bakeImage } from './assets/bake-image.mjs';
-import { bakeFont } from './assets/bake-font.mjs';
-import { emitAssetPack } from './assets/emit-pack.mjs';
-import { emitContainer } from './assets/emit-container.mjs';
+import {build} from 'esbuild';
+import {spawnSync} from 'node:child_process';
+import {fileURLToPath, pathToFileURL} from 'node:url';
+import {dirname, resolve, basename} from 'node:path';
+import {
+  existsSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+} from 'node:fs';
+import {bakeImage} from './assets/bake-image.mjs';
+import {bakeFont} from './assets/bake-font.mjs';
+import {emitAssetPack} from './assets/emit-pack.mjs';
+import {emitContainer} from './assets/emit-container.mjs';
+import {registerSvgVectorLoader} from './assets/svg-loader.mjs';
 
 // QuickJS release the bytecode targets — MUST match the FetchContent pin in
 // bridges/quickjs/CMakeLists.txt and ER_QUICKJS_TAG in er_runtime.c. The loader rejects a mismatch.
@@ -54,7 +61,9 @@ const demoDir = resolve(demosDir, demo);
 const entry = resolve(demoDir, 'index.jsx');
 if (!existsSync(entry)) {
   const available = existsSync(demosDir)
-    ? readdirSync(demosDir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name)
+    ? readdirSync(demosDir, {withFileTypes: true})
+        .filter(d => d.isDirectory())
+        .map(d => d.name)
     : [];
   console.error(`Demo "${demo}" not found (expected ${entry}).`);
   console.error(`Available demos: ${available.join(', ') || '(none)'}`);
@@ -66,14 +75,32 @@ const exe = process.platform === 'win32' ? '.exe' : '';
 const compileBin =
   process.env.ER_COMPILE_BIN ||
   [
-    resolve(repoRoot, 'bridges/quickjs/build', `er-bridge-quickjs-compile${exe}`),
-    resolve(repoRoot, 'examples/linux/build/bridges/quickjs', `er-bridge-quickjs-compile${exe}`),
-    resolve(repoRoot, 'tools/simulator/build/bridges/quickjs', `er-bridge-quickjs-compile${exe}`),
+    resolve(
+      repoRoot,
+      'bridges/quickjs/build',
+      `er-bridge-quickjs-compile${exe}`,
+    ),
+    resolve(
+      repoRoot,
+      'examples/linux/build/bridges/quickjs',
+      `er-bridge-quickjs-compile${exe}`,
+    ),
+    resolve(
+      repoRoot,
+      'tools/simulator/build/bridges/quickjs',
+      `er-bridge-quickjs-compile${exe}`,
+    ),
   ].find(existsSync);
 if (!compileBin) {
-  console.error('Bytecode precompiler (er-bridge-quickjs-compile) not found. Build it once:');
-  console.error('  cmake -S bridges/quickjs -B bridges/quickjs/build -G "MinGW Makefiles"');
-  console.error('  cmake --build bridges/quickjs/build --target er-bridge-quickjs-compile');
+  console.error(
+    'Bytecode precompiler (er-bridge-quickjs-compile) not found. Build it once:',
+  );
+  console.error(
+    '  cmake -S bridges/quickjs -B bridges/quickjs/build -G "MinGW Makefiles"',
+  );
+  console.error(
+    '  cmake --build bridges/quickjs/build --target er-bridge-quickjs-compile',
+  );
   console.error('(or set ER_COMPILE_BIN to the binary path)');
   process.exit(1);
 }
@@ -84,20 +111,27 @@ const fonts = new Map(); // family -> path
 const assetPlugin = {
   name: 'embedded-react-assets',
   setup(b) {
-    b.onLoad({ filter: /\.(png|jpe?g|webp|gif|bmp)$/i }, (args) => {
+    b.onLoad({filter: /\.(png|jpe?g|webp|gif|bmp)$/i}, args => {
       const name = basename(args.path).replace(/\.[^.]+$/, '');
       images.set(name, args.path);
-      return { contents: `module.exports = ${JSON.stringify(name)};`, loader: 'js' };
+      return {
+        contents: `module.exports = ${JSON.stringify(name)};`,
+        loader: 'js',
+      };
     });
-    b.onLoad({ filter: /\.(ttf|otf)$/i }, (args) => {
+    b.onLoad({filter: /\.(ttf|otf)$/i}, args => {
       const family = basename(args.path).replace(/\.[^.]+$/, '');
       fonts.set(family, args.path);
-      return { contents: `module.exports = ${JSON.stringify(family)};`, loader: 'js' };
+      return {
+        contents: `module.exports = ${JSON.stringify(family)};`,
+        loader: 'js',
+      };
     });
+    registerSvgVectorLoader(b, (name, p) => images.set(name, p)); // raster-fallback SVGs join the image pack
   },
 };
 
-mkdirSync(distDir, { recursive: true });
+mkdirSync(distDir, {recursive: true});
 const bundlePath = resolve(distDir, 'app.bundle.js');
 await build({
   entryPoints: [entry],
@@ -107,10 +141,10 @@ await build({
   platform: 'neutral',
   target: 'es2020',
   jsx: 'automatic',
-  alias: { 'embedded-react': libEntry },
+  alias: {'embedded-react': libEntry},
   nodePaths: [nodeModules],
   plugins: [assetPlugin],
-  define: { 'process.env.NODE_ENV': '"production"' },
+  define: {'process.env.NODE_ENV': '"production"'},
   legalComments: 'none',
   logLevel: 'info',
 });
@@ -118,7 +152,7 @@ console.log(`Bundled demo "${demo}" -> dist/app.bundle.js`);
 
 // --- Precompile to QuickJS bytecode -------------------------------------------------------------
 const qbcPath = resolve(distDir, 'app.bundle.qbc');
-const cc = spawnSync(compileBin, [bundlePath, qbcPath], { stdio: 'inherit' });
+const cc = spawnSync(compileBin, [bundlePath, qbcPath], {stdio: 'inherit'});
 if (cc.status !== 0) {
   console.error('Bytecode compile failed.');
   process.exit(1);
@@ -128,34 +162,49 @@ const bytecode = readFileSync(qbcPath);
 // --- Bake imported assets into an ERPK pack (same sizing rules as build.mjs / sim.mjs) ----------
 const bundleSrc = readFileSync(bundlePath, 'utf8');
 const discoveredSizes = [
-  ...new Set([...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map((m) => Math.round(Number(m[1])))),
+  ...new Set(
+    [...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map(m =>
+      Math.round(Number(m[1])),
+    ),
+  ),
 ].sort((a, b) => a - b);
 
 let config = {};
 const configPath = resolve(demoDir, 'assets.config.js');
-if (existsSync(configPath)) config = (await import(pathToFileURL(configPath).href)).default || {};
+if (existsSync(configPath))
+  config = (await import(pathToFileURL(configPath).href)).default || {};
 const fontConfig = config.fonts || {};
 
 const fontJobs = [...fonts.entries()].map(([family, path]) => {
   const fc = fontConfig[family] || {};
-  const sizes = fc.sizes && fc.sizes.length ? fc.sizes : discoveredSizes.length ? discoveredSizes : [16];
-  return { path, family, sizes, bpp: fc.bpp ?? 4, glyphs: fc.glyphs ?? 'ascii' };
+  const sizes =
+    fc.sizes && fc.sizes.length
+      ? fc.sizes
+      : discoveredSizes.length
+        ? discoveredSizes
+        : [16];
+  return {path, family, sizes, bpp: fc.bpp ?? 4, glyphs: fc.glyphs ?? 'ascii'};
 });
-const imageJobs = [...images.entries()].map(([name, path]) => ({ path, name }));
+const imageJobs = [...images.entries()].map(([name, path]) => ({path, name}));
 
-const bakedImages = imageJobs.map((i) => bakeImage(i));
-const bakedFonts = fontJobs.map((f) => bakeFont(f));
-const assetPack = bakedImages.length || bakedFonts.length ? emitAssetPack({ images: bakedImages, fonts: bakedFonts }) : null;
+const bakedImages = imageJobs.map(i => bakeImage(i));
+const bakedFonts = fontJobs.map(f => bakeFont(f));
+const assetPack =
+  bakedImages.length || bakedFonts.length
+    ? emitAssetPack({images: bakedImages, fonts: bakedFonts})
+    : null;
 const fontSizeCount = bakedFonts.reduce((n, f) => n + f.sizes.length, 0);
 
 // --- Wrap into the ERCF container ---------------------------------------------------------------
-const container = emitContainer({ bytecode, assetPack, qjsTag: QJS_TAG });
+const container = emitContainer({bytecode, assetPack, qjsTag: QJS_TAG});
 const outPath = resolve(distDir, 'app.erpkg');
 writeFileSync(outPath, container);
 
-const kb = (n) => `${(n / 1024).toFixed(1)} KB`;
+const kb = n => `${(n / 1024).toFixed(1)} KB`;
 console.log(
   `Packed config -> dist/app.erpkg (${kb(container.length)})\n` +
     `  qjs ${QJS_TAG} · bytecode ${kb(bytecode.length)}` +
-    (assetPack ? ` · assets ${kb(assetPack.length)} (${bakedImages.length} image(s), ${fontSizeCount} font size(s))` : ' · no assets'),
+    (assetPack
+      ? ` · assets ${kb(assetPack.length)} (${bakedImages.length} image(s), ${fontSizeCount} font size(s))`
+      : ' · no assets'),
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embedded-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "React Native-style component package + reconciler that drives the embedded-react C engine through the QuickJS NativeUI bridge (Flow A).",
   "license": "Apache-2.0",
@@ -70,18 +70,23 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:runtime": "node test/runtime/run.mjs",
-    "test:bytecode": "node test/runtime/run.mjs --bytecode"
+    "test:bytecode": "node test/runtime/run.mjs --bytecode",
+    "format": "cd ../../.. && prettier --write \"**/*.{js,jsx,mjs,cjs}\"",
+    "format:check": "cd ../../.. && prettier --check \"**/*.{js,jsx,mjs,cjs}\""
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
     "@babel/plugin-syntax-jsx": "^7.29.7",
+    "@resvg/resvg-js": "^2.6.2",
     "esbuild": "^0.28.1",
     "opentype.js": "^2.0.0",
     "pngjs": "^7.0.0",
     "react": "18.3.1",
-    "react-reconciler": "0.29.2"
+    "react-reconciler": "0.29.2",
+    "svgson": "^5.3.1"
   },
   "devDependencies": {
+    "prettier": "^3.4.2",
     "vitest": "^3.2.4"
   },
   "overrides": {

package/persist-transform.mjs

@@ -24,7 +24,7 @@
 // stable across the edits you make most often (JSX/logic). Adding/removing a useState in a component,
 // or renaming it, shifts that component's keys and resets its state — press R in the sim for a clean
 // reset any time.
-import { transformSync } from '@babel/core';
+import {transformSync} from '@babel/core';
 import syntaxJsx from '@babel/plugin-syntax-jsx';
 
 /** Best-effort name of the function/component enclosing a path (for a stable, readable key). */
@@ -34,15 +34,21 @@ function enclosingName(path) {
   if (fn.node.id && fn.node.id.name) return fn.node.id.name; // function Foo() {}
   const parent = fn.parentPath && fn.parentPath.node;
   if (parent) {
-    if (parent.type === 'VariableDeclarator' && parent.id && parent.id.name) return parent.id.name; // const Foo = () =>
+    if (parent.type === 'VariableDeclarator' && parent.id && parent.id.name)
+      return parent.id.name; // const Foo = () =>
     if (parent.key && parent.key.name) return parent.key.name; // method / property
-    if (parent.type === 'AssignmentExpression' && parent.left && parent.left.name) return parent.left.name;
+    if (
+      parent.type === 'AssignmentExpression' &&
+      parent.left &&
+      parent.left.name
+    )
+      return parent.left.name;
   }
   return '_';
 }
 
 /** Babel plugin: useState(init) → __erPersistState("key", init), importing the helper when used. */
-function persistPlugin({ types: t }) {
+function persistPlugin({types: t}) {
   return {
     name: 'er-persist-usestate',
     visitor: {
@@ -56,14 +62,19 @@ function persistPlugin({ types: t }) {
           path.unshiftContainer(
             'body',
             t.importDeclaration(
-              [t.importSpecifier(t.identifier('__erPersistState'), t.identifier('usePersistentState'))],
+              [
+                t.importSpecifier(
+                  t.identifier('__erPersistState'),
+                  t.identifier('usePersistentState'),
+                ),
+              ],
               t.stringLiteral('embedded-react'),
             ),
           );
         },
       },
       CallExpression(path, state) {
-        if (!t.isIdentifier(path.node.callee, { name: 'useState' })) return;
+        if (!t.isIdentifier(path.node.callee, {name: 'useState'})) return;
         // Only rewrite the real useState (an imported binding from react / embedded-react).
         const binding = path.scope.getBinding('useState');
         if (!binding || binding.kind !== 'module') return;
@@ -77,7 +88,10 @@ function persistPlugin({ types: t }) {
         const key = `${state.opts.moduleId}::${fnName}#${idx}`;
 
         path.replaceWith(
-          t.callExpression(t.identifier('__erPersistState'), [t.stringLiteral(key), ...path.node.arguments]),
+          t.callExpression(t.identifier('__erPersistState'), [
+            t.stringLiteral(key),
+            ...path.node.arguments,
+          ]),
         );
         state.erUsed = true;
         path.skip();
@@ -116,8 +130,8 @@ export function transformPersist(code, moduleId) {
     babelrc: false,
     configFile: false,
     sourceType: 'module',
-    parserOpts: { plugins: ['jsx'] },
-    plugins: [syntaxJsx, [persistPlugin, { moduleId }]],
+    parserOpts: {plugins: ['jsx']},
+    plugins: [syntaxJsx, [persistPlugin, {moduleId}]],
   });
   return out.code;
 }