embedded-react 0.3.0 → 0.4.0

package/qjsc-wasm.mjs

@@ -19,10 +19,10 @@
 // bytecode container with NO native toolchain. The module is built with `-sENVIRONMENT=web,node`, so the
 // same artifact that powers `dev` loads under Node here.
 
-import { createRequire } from 'node:module';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { existsSync } from 'node:fs';
+import {createRequire} from 'node:module';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {existsSync} from 'node:fs';
 
 const HERE = dirname(fileURLToPath(import.meta.url));
 
@@ -33,12 +33,17 @@ const HERE = dirname(fileURLToPath(import.meta.url));
  * @param {string} [simDir]  Dir holding embedded-react.{js,wasm} (defaults to the package's sim/).
  * @returns {Promise<Buffer>} The bytecode bytes.
  */
-export async function compileToBytecode(jsSource, simDir = resolve(HERE, 'sim')) {
+export async function compileToBytecode(
+  jsSource,
+  simDir = resolve(HERE, 'sim'),
+) {
   // The .cjs (not .js): this package is "type": "module", so Node would load the emscripten .js as ESM and
   // its CommonJS factory export would never run. The .cjs is the same module forced to CommonJS for Node.
   const loader = resolve(simDir, 'embedded-react.cjs');
   if (!existsSync(loader)) {
-    throw new Error(`prebuilt simulator module not found at ${loader} (a published package ships it; from source run tools/web-sim/build.mjs)`);
+    throw new Error(
+      `prebuilt simulator module not found at ${loader} (a published package ships it; from source run tools/web-sim/build.mjs)`,
+    );
   }
   const require = createRequire(import.meta.url);
   const factory = require(loader); // forced CommonJS → MODULARIZE factory
@@ -53,7 +58,11 @@ export async function compileToBytecode(jsSource, simDir = resolve(HERE, 'sim'))
   Module.HEAPU8[srcPtr + bytes.length] = 0;
   const outLenPtr = Module._malloc(4);
 
-  const compile = Module.cwrap('er_web_compile_bytecode', 'number', ['number', 'number', 'number']);
+  const compile = Module.cwrap('er_web_compile_bytecode', 'number', [
+    'number',
+    'number',
+    'number',
+  ]);
   const bcPtr = compile(srcPtr, bytes.length, outLenPtr);
 
   // ALLOW_MEMORY_GROWTH=1 can detach views across the malloc/compile calls — read through a FRESH buffer.
@@ -64,7 +73,9 @@ export async function compileToBytecode(jsSource, simDir = resolve(HERE, 'sim'))
   Module._free(outLenPtr);
   if (!bcPtr || !bcLen) {
     if (bcPtr) Module._free(bcPtr);
-    throw new Error('bytecode compile failed — check the bundle for a syntax error (see stderr above)');
+    throw new Error(
+      'bytecode compile failed — check the bundle for a syntax error (see stderr above)',
+    );
   }
   const out = Buffer.from(heap().subarray(bcPtr, bcPtr + bcLen)); // copy out before freeing
   Module._free(bcPtr);

package/sim-server.mjs

@@ -23,18 +23,27 @@
 // Used by the consumer CLI (cli.mjs → `npx embedded-react dev` / `export`) and the repo dev loop
 // (tools/web-sim/dev.mjs). The only differences are paths, passed in here.
 
-import { createServer } from 'node:http';
-import { readFile } from 'node:fs/promises';
-import { existsSync, readFileSync, statSync } from 'node:fs';
-import { createRequire } from 'node:module';
-import { pathToFileURL } from 'node:url';
-import { basename, dirname, extname, relative, resolve } from 'node:path';
-
-const HERE = dirname(new URL(import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, '$1'));
+import {createServer} from 'node:http';
+import {readFile} from 'node:fs/promises';
+import {existsSync, readFileSync, statSync} from 'node:fs';
+import {createRequire} from 'node:module';
+import {pathToFileURL} from 'node:url';
+import {basename, dirname, extname, relative, resolve} from 'node:path';
+
+const HERE = dirname(
+  new URL(import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, '$1'),
+);
 const require = createRequire(import.meta.url);
 const esbuild = require('esbuild');
-const { bakeAssetPack } = await import(pathToFileURL(resolve(HERE, 'assets/index.mjs')).href);
-const { transformPersist, shouldPersist } = await import(pathToFileURL(resolve(HERE, 'persist-transform.mjs')).href);
+const {bakeAssetPack} = await import(
+  pathToFileURL(resolve(HERE, 'assets/index.mjs')).href
+);
+const {registerSvgVectorLoader} = await import(
+  pathToFileURL(resolve(HERE, 'assets/svg-loader.mjs')).href
+);
+const {transformPersist, shouldPersist} = await import(
+  pathToFileURL(resolve(HERE, 'persist-transform.mjs')).href
+);
 
 const MIME = {
   '.html': 'text/html; charset=utf-8',
@@ -42,8 +51,8 @@ const MIME = {
   '.wasm': 'application/wasm',
   '.pack': 'application/octet-stream',
 };
-const assetName = (p) => basename(p).replace(/\.[^.]+$/, '');
-const mtime = (p) => {
+const assetName = p => basename(p).replace(/\.[^.]+$/, '');
+const mtime = p => {
   try {
     return statSync(p).mtimeMs;
   } catch {
@@ -62,7 +71,15 @@ const mtime = (p) => {
  * @param {() => void}    [o.onRebuilt]  Called after each successful build + asset bake (e.g. broadcast reload).
  * @returns {{ options: object, bundlePath: string, packPath: string }}
  */
-function createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist = true, onRebuilt }) {
+function createBundle({
+  entry,
+  projectRoot,
+  libSrc,
+  nodePaths,
+  outDir,
+  persist = true,
+  onRebuilt,
+}) {
   const bundlePath = resolve(outDir, 'app.js');
   const packPath = resolve(outDir, 'assets.pack');
   const projNorm = projectRoot.replace(/\\/g, '/');
@@ -73,33 +90,62 @@ function createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist =
   async function bakePack() {
     const discoveredSizes = [
       ...new Set(
-        [...readFileSync(bundlePath, 'utf8').matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map((m) => Math.round(Number(m[1]))),
+        [
+          ...readFileSync(bundlePath, 'utf8').matchAll(
+            /\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g,
+          ),
+        ].map(m => Math.round(Number(m[1]))),
       ),
     ].sort((a, b) => a - b);
 
     let cfg = {};
     const cp = resolve(projectRoot, 'assets.config.js');
-    if (existsSync(cp)) cfg = (await import(`${pathToFileURL(cp).href}?t=${mtime(cp)}`)).default || {};
+    if (existsSync(cp))
+      cfg =
+        (await import(`${pathToFileURL(cp).href}?t=${mtime(cp)}`)).default ||
+        {};
     const fontConfig = cfg.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 sig = JSON.stringify({
-      i: imageJobs.map((j) => [j.name, j.path, mtime(j.path)]).sort(),
-      f: fontJobs.map((j) => [j.family, j.path, mtime(j.path), j.sizes, j.bpp, j.glyphs]).sort(),
+      i: imageJobs.map(j => [j.name, j.path, mtime(j.path)]).sort(),
+      f: fontJobs
+        .map(j => [j.family, j.path, mtime(j.path), j.sizes, j.bpp, j.glyphs])
+        .sort(),
     });
     if (sig === lastAssetSig) return;
     lastAssetSig = sig;
     if (!imageJobs.length && !fontJobs.length) return; // built-in font only → no pack
 
     try {
-      const s = bakeAssetPack({ images: imageJobs, fonts: fontJobs, outPath: packPath });
-      console.log(`  assets → ${s.images} image(s), ${s.fonts} font size(s), ${s.bytes} B`);
+      const s = bakeAssetPack({
+        images: imageJobs,
+        fonts: fontJobs,
+        outPath: packPath,
+      });
+      console.log(
+        `  assets → ${s.images} image(s), ${s.fonts} font size(s), ${s.bytes} B`,
+      );
     } catch (e) {
       console.error(`  asset bake failed: ${e.message}`);
     }
@@ -113,9 +159,9 @@ function createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist =
     platform: 'neutral',
     target: 'es2020',
     jsx: 'automatic',
-    alias: { 'embedded-react': libSrc },
+    alias: {'embedded-react': libSrc},
     nodePaths,
-    define: { 'process.env.NODE_ENV': '"production"' },
+    define: {'process.env.NODE_ENV': '"production"'},
     legalComments: 'none',
     logLevel: 'silent',
     plugins: [
@@ -126,25 +172,38 @@ function createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist =
             images.clear();
             fonts.clear();
           });
-          b.onLoad({ filter: /\.(jsx?|tsx?)$/ }, (a) => {
+          b.onLoad({filter: /\.(jsx?|tsx?)$/}, a => {
             // Transform ONLY the app's own source — never dependencies (see shouldPersist: excluding
             // node_modules is what stops the library's usePersistentState being rewritten to call itself).
             if (!persist || !shouldPersist(a.path, projNorm)) return undefined;
             try {
-              return { contents: transformPersist(readFileSync(a.path, 'utf8'), relative(projectRoot, a.path).replace(/\\/g, '/')), loader: 'jsx' };
+              return {
+                contents: transformPersist(
+                  readFileSync(a.path, 'utf8'),
+                  relative(projectRoot, a.path).replace(/\\/g, '/'),
+                ),
+                loader: 'jsx',
+              };
             } catch (e) {
-              return { errors: [{ text: `persist transform: ${e.message}` }] };
+              return {errors: [{text: `persist transform: ${e.message}`}]};
             }
           });
-          b.onLoad({ filter: /\.(png|jpe?g|webp|gif|bmp)$/i }, (a) => {
+          b.onLoad({filter: /\.(png|jpe?g|webp|gif|bmp)$/i}, a => {
             images.set(assetName(a.path), a.path);
-            return { contents: `module.exports = ${JSON.stringify(assetName(a.path))};`, loader: 'js' };
+            return {
+              contents: `module.exports = ${JSON.stringify(assetName(a.path))};`,
+              loader: 'js',
+            };
           });
-          b.onLoad({ filter: /\.(ttf|otf)$/i }, (a) => {
+          b.onLoad({filter: /\.(ttf|otf)$/i}, a => {
             fonts.set(assetName(a.path), a.path);
-            return { contents: `module.exports = ${JSON.stringify(assetName(a.path))};`, loader: 'js' };
+            return {
+              contents: `module.exports = ${JSON.stringify(assetName(a.path))};`,
+              loader: 'js',
+            };
           });
-          b.onEnd(async (r) => {
+          registerSvgVectorLoader(b, (name, p) => images.set(name, p)); // raster-fallback SVGs join the image pack
+          b.onEnd(async r => {
             if (r.errors.length) {
               console.error(`✗ build failed (${r.errors.length} error(s))`);
               return;
@@ -157,15 +216,28 @@ function createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist =
     ],
   };
 
-  return { options, bundlePath, packPath };
+  return {options, bundlePath, packPath};
 }
 
 /**
  * One-shot bundle + asset bake into outDir (app.js [+ assets.pack]). For the static export.
  * Persist transform is off (a static page has no hot reload to preserve state across).
  */
-export async function buildApp({ entry, projectRoot, libSrc, nodePaths, outDir }) {
-  const { options } = createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist: false });
+export async function buildApp({
+  entry,
+  projectRoot,
+  libSrc,
+  nodePaths,
+  outDir,
+}) {
+  const {options} = createBundle({
+    entry,
+    projectRoot,
+    libSrc,
+    nodePaths,
+    outDir,
+    persist: false,
+  });
   await esbuild.build(options);
 }
 
@@ -177,16 +249,34 @@ export async function buildApp({ entry, projectRoot, libSrc, nodePaths, outDir }
  * @param {string[]} o.nodePaths
  * @param {number}   o.port
  */
-export async function runDevServer({ entry, projectRoot, libSrc, nodePaths, indexHtml, simDir, outDir, port, label }) {
+export async function runDevServer({
+  entry,
+  projectRoot,
+  libSrc,
+  nodePaths,
+  indexHtml,
+  simDir,
+  outDir,
+  port,
+  label,
+}) {
   const clients = new Set();
   const broadcastReload = () => {
     for (const res of clients) res.write('data: reload\n\n');
   };
 
-  const { options } = createBundle({ entry, projectRoot, libSrc, nodePaths, outDir, persist: true, onRebuilt: () => {
-    console.log('↻ rebuilt → reloading');
-    broadcastReload();
-  } });
+  const {options} = createBundle({
+    entry,
+    projectRoot,
+    libSrc,
+    nodePaths,
+    outDir,
+    persist: true,
+    onRebuilt: () => {
+      console.log('↻ rebuilt → reloading');
+      broadcastReload();
+    },
+  });
 
   const ctx = await esbuild.context(options);
   await ctx.rebuild();
@@ -196,15 +286,26 @@ export async function runDevServer({ entry, projectRoot, libSrc, nodePaths, inde
   // outDir. The page references ./public/<name>. window.__erHot is injected so the page connects to /reload.
   const send = async (res, file) => {
     try {
-      res.writeHead(200, { 'content-type': MIME[extname(file)] || 'application/octet-stream', 'cache-control': 'no-store' }).end(await readFile(file));
+      res
+        .writeHead(200, {
+          'content-type': MIME[extname(file)] || 'application/octet-stream',
+          'cache-control': 'no-store',
+        })
+        .end(await readFile(file));
     } catch {
       res.writeHead(404).end('not found');
     }
   };
   const server = createServer(async (req, res) => {
-    const path = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+    const path = decodeURIComponent(
+      new URL(req.url, 'http://localhost').pathname,
+    );
     if (path === '/reload') {
-      res.writeHead(200, { 'content-type': 'text/event-stream', 'cache-control': 'no-cache', connection: 'keep-alive' });
+      res.writeHead(200, {
+        'content-type': 'text/event-stream',
+        'cache-control': 'no-cache',
+        connection: 'keep-alive',
+      });
       res.write('retry: 1000\n\n');
       clients.add(res);
       req.on('close', () => clients.delete(res));
@@ -212,8 +313,16 @@ export async function runDevServer({ entry, projectRoot, libSrc, nodePaths, inde
     }
     if (path === '/' || path === '/index.html') {
       try {
-        const html = (await readFile(indexHtml, 'utf8')).replace('</head>', '<script>window.__erHot=true</script></head>');
-        res.writeHead(200, { 'content-type': MIME['.html'], 'cache-control': 'no-store' }).end(html);
+        const html = (await readFile(indexHtml, 'utf8')).replace(
+          '</head>',
+          '<script>window.__erHot=true</script></head>',
+        );
+        res
+          .writeHead(200, {
+            'content-type': MIME['.html'],
+            'cache-control': 'no-store',
+          })
+          .end(html);
       } catch {
         res.writeHead(404).end('not found');
       }
@@ -221,13 +330,16 @@ export async function runDevServer({ entry, projectRoot, libSrc, nodePaths, inde
     }
     if (path.startsWith('/public/')) {
       const name = basename(path); // flat filename only
-      const dir = name === 'embedded-react.js' || name === 'embedded-react.wasm' ? simDir : outDir;
+      const dir =
+        name === 'embedded-react.js' || name === 'embedded-react.wasm'
+          ? simDir
+          : outDir;
       return void send(res, resolve(dir, name));
     }
     res.writeHead(404).end('not found');
   });
 
-  await new Promise((r) => server.listen(port, r));
+  await new Promise(r => server.listen(port, r));
   console.log(`embedded-react WASM sim → http://localhost:${port}/`);
   console.log(`watching ${label} — edit & save to hot-reload. Ctrl-C to quit.`);
 
@@ -240,5 +352,5 @@ export async function runDevServer({ entry, projectRoot, libSrc, nodePaths, inde
   };
   process.on('SIGINT', shutdown);
   process.on('SIGTERM', shutdown);
-  return { ctx, server };
+  return {ctx, server};
 }

package/src/embedded-react/Animated.js

@@ -17,9 +17,9 @@
 // Animated — the React Native analog, backed by the engine's native-driver value system
 // (er_anim_value_*). An Animated.Value is a handle to an engine-side float; binding it to a node
 // prop (via Animated.View) lets the engine advance the animation each frame with NO per-frame JS.
-import { createElement, useRef, useEffect } from 'react';
-import { NativeUI } from '../native-ui.js';
-import { splitAnimatedStyle } from './split-style.js';
+import {createElement, useRef, useEffect} from 'react';
+import {NativeUI} from '../native-ui.js';
+import {splitAnimatedStyle} from './split-style.js';
 
 /** A standalone animatable value bound to an engine-side float. */
 export class AnimatedValue {
@@ -74,7 +74,12 @@ export class AnimatedInterpolation {
   }
 
   __bind(node, prop) {
-    NativeUI.animValueBindInterpolated(this._parent._handle, node, prop, this._config);
+    NativeUI.animValueBindInterpolated(
+      this._parent._handle,
+      node,
+      prop,
+      this._config,
+    );
   }
 
   interpolate(config) {
@@ -86,7 +91,7 @@ export class AnimatedInterpolation {
 /** Wraps fn so it runs at most once, regardless of how many times it is invoked. */
 function once(fn) {
   let called = false;
-  return (arg) => {
+  return arg => {
     if (called) return;
     called = true;
     if (fn) fn(arg);
@@ -107,9 +112,9 @@ function makeAnimation(value, toValue, config) {
     _value: value,
     start(onComplete) {
       // Always pass a wrapper so we can null out the (possibly recycled) handle on completion.
-      const cb = (finished) => {
+      const cb = finished => {
         handle = 0;
-        if (onComplete) onComplete({ finished: !!finished });
+        if (onComplete) onComplete({finished: !!finished});
       };
       handle = NativeUI.animValueAnimate(value._handle, toValue, config, cb);
     },
@@ -120,19 +125,19 @@ function makeAnimation(value, toValue, config) {
 }
 
 export function timing(value, config = {}) {
-  const { toValue = 0, useNativeDriver, ...rest } = config;
-  return makeAnimation(value, toValue, { type: 'timing', ...rest });
+  const {toValue = 0, useNativeDriver, ...rest} = config;
+  return makeAnimation(value, toValue, {type: 'timing', ...rest});
 }
 
 export function spring(value, config = {}) {
-  const { toValue = 0, useNativeDriver, ...rest } = config;
-  return makeAnimation(value, toValue, { type: 'spring', ...rest });
+  const {toValue = 0, useNativeDriver, ...rest} = config;
+  return makeAnimation(value, toValue, {type: 'spring', ...rest});
 }
 
 export function decay(value, config = {}) {
-  const { useNativeDriver, ...rest } = config;
+  const {useNativeDriver, ...rest} = config;
   // Decay coasts from its velocity; the engine ignores the target, so pass the current value.
-  return makeAnimation(value, value.__getValue(), { type: 'decay', ...rest });
+  return makeAnimation(value, value.__getValue(), {type: 'decay', ...rest});
 }
 
 // --- Composition -------------------------------------------------------------------------------
@@ -152,22 +157,23 @@ export function sequence(animations) {
       current = 0;
       stopped = false;
       const done = once(onComplete);
-      const next = (result) => {
+      const next = result => {
         if (stopped || !result || result.finished === false) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         if (current >= animations.length) {
-          done({ finished: true });
+          done({finished: true});
           return;
         }
         animations[current++].start(next);
       };
-      next({ finished: true }); // kick off the first entry
+      next({finished: true}); // kick off the first entry
     },
     stop() {
       stopped = true;
-      if (current > 0 && current <= animations.length) animations[current - 1].stop();
+      if (current > 0 && current <= animations.length)
+        animations[current - 1].stop();
     },
   };
 }
@@ -181,12 +187,12 @@ export function parallel(animations, config) {
       const done = once(onComplete);
       const total = animations.length;
       if (total === 0) {
-        done({ finished: true });
+        done({finished: true});
         return;
       }
       let doneCount = 0;
       let anyUnfinished = false;
-      const onChild = (result) => {
+      const onChild = result => {
         doneCount++;
         if (!result || result.finished === false) {
           anyUnfinished = true;
@@ -195,7 +201,7 @@ export function parallel(animations, config) {
             for (const a of animations) a.stop();
           }
         }
-        if (doneCount >= total) done({ finished: !anyUnfinished });
+        if (doneCount >= total) done({finished: !anyUnfinished});
       };
       for (const a of animations) a.start(onChild);
     },
@@ -215,15 +221,15 @@ export function stagger(delay, animations) {
       const done = once(onComplete);
       const total = animations.length;
       if (total === 0) {
-        done({ finished: true });
+        done({finished: true});
         return;
       }
       let doneCount = 0;
       let anyUnfinished = false;
-      const onChild = (result) => {
+      const onChild = result => {
         doneCount++;
         if (!result || result.finished === false) anyUnfinished = true;
-        if (doneCount >= total) done({ finished: !anyUnfinished });
+        if (doneCount >= total) done({finished: !anyUnfinished});
       };
       animations.forEach((a, i) => {
         if (i === 0) {
@@ -253,7 +259,7 @@ export function delay(time) {
       const done = once(onComplete);
       timer = setTimeout(() => {
         timer = 0;
-        done({ finished: true });
+        done({finished: true});
       }, time);
     },
     stop() {
@@ -271,33 +277,42 @@ export function delay(time) {
  * (resetBeforeIteration), matching RN — so a timing 0→1 repeats 0→1 rather than ping-ponging.
  */
 export function loop(animation, config) {
-  const iterations = config && Number.isInteger(config.iterations) ? config.iterations : -1;
+  const iterations =
+    config && Number.isInteger(config.iterations) ? config.iterations : -1;
   const resetBeforeIteration = !config || config.resetBeforeIteration !== false;
   let stopped = false;
   return {
     _value: animation._value,
     start(onComplete) {
       const done = once(onComplete);
-      const startValue = resetBeforeIteration && animation._value ? animation._value.__getValue() : null;
+      const startValue =
+        resetBeforeIteration && animation._value
+          ? animation._value.__getValue()
+          : null;
       let count = 0;
       const startIteration = () => {
         if (stopped) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         if (iterations >= 0 && count >= iterations) {
-          done({ finished: true });
+          done({finished: true});
           return;
         }
         count++;
-        if (resetBeforeIteration && animation._value && startValue != null && count > 1) {
+        if (
+          resetBeforeIteration &&
+          animation._value &&
+          startValue != null &&
+          count > 1
+        ) {
           animation._value.setValue(startValue);
         }
         animation.start(onIterationDone);
       };
-      const onIterationDone = (result) => {
+      const onIterationDone = result => {
         if (stopped || !result || result.finished === false) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         // Defer the next iteration to a fresh task instead of starting it inline. A child animation can
@@ -343,13 +358,13 @@ export function useAnimatedValue(initial = 0) {
  */
 export function createAnimatedComponent(Component) {
   return function AnimatedComponent(props) {
-    const { style, ...rest } = props;
-    const { staticStyle, bindings } = splitAnimatedStyle(style);
-    const ref = (node) => {
+    const {style, ...rest} = props;
+    const {staticStyle, bindings} = splitAnimatedStyle(style);
+    const ref = node => {
       if (node == null) return; // unmount
       for (const b of bindings) b.value.__bind(node, b.prop);
     };
-    return createElement(Component, { ...rest, style: staticStyle, ref });
+    return createElement(Component, {...rest, style: staticStyle, ref});
   };
 }
 

package/src/embedded-react/AppRegistry.js

@@ -21,8 +21,8 @@
 // "running the bundle IS starting the app", so registerComponent mounts immediately into a root
 // sized from the host-injected `screen` global. (A host-driven runApplication can be split out
 // later when the C host owns app lifecycle.)
-import { createElement } from 'react';
-import { createRoot } from '../renderer.js';
+import {createElement} from 'react';
+import {createRoot} from '../renderer.js';
 
 let registered = null;
 
@@ -32,7 +32,7 @@ export const AppRegistry = {
    * the component (RN signature), so the component module isn't evaluated until registration.
    */
   registerComponent(appKey, componentProvider) {
-    registered = { appKey, Component: componentProvider() };
+    registered = {appKey, Component: componentProvider()};
     AppRegistry.runApplication(appKey);
     return appKey;
   },
@@ -43,7 +43,7 @@ export const AppRegistry = {
   runApplication(appKey) {
     if (!registered) return;
     if (appKey && appKey !== registered.appKey) return;
-    const root = createRoot({ width: screen.width, height: screen.height });
+    const root = createRoot({width: screen.width, height: screen.height});
     root.render(createElement(registered.Component));
   },
 };

package/src/embedded-react/Easing.js

@@ -34,6 +34,6 @@ export const Easing = {
 
   /** Custom cubic-bezier curve via control points. */
   bezier(x1, y1, x2, y2) {
-    return { x1, y1, x2, y2 };
+    return {x1, y1, x2, y2};
   },
 };