@uniflowed/react-native 0.0.0-alpha.40 → 0.0.0-alpha.42

package/metro-transformer.cjs

@@ -68,13 +68,14 @@ async function transform(args) {
       // remounts instead of preserving state.
       refresh: false,
       sourceMap: true,
+      nativeStyles: true,
     });
     if (out != null) {
       if (out.css != null && out.css !== "") {
         throw new Error(
           `@uniflowed/react-native/metro: ${filename} produced StyleX CSS, but the ` +
-            "native Metro contract cannot attach CSS to a React Native bundle yet. " +
-            "Use native style props or keep that StyleX module out of the native route.",
+            "native Metro contract cannot attach CSS to a React Native bundle. " +
+            "Use the supported native StyleX subset or native style props.",
         );
       }
       next = out.code;

package/metro.cjs

@@ -41,7 +41,7 @@ const metroResolverMainFields = Object.freeze(["react-native", "browser", "main"
 const metroTransformPipeline = Object.freeze([
   "flow",
   "react-compiler",
-  "stylex-css-refusal",
+  "stylex-native-objects",
   "metro-babel",
 ]);
 
@@ -64,6 +64,7 @@ const nativePackages = Object.freeze([
   "react-native",
   "relay",
   "state",
+  "stylex",
   "temporal",
   "validator",
 ]);
@@ -85,12 +86,15 @@ function nativeResolution(previous) {
       domPackages.has(name) ||
       (name === "router" &&
         moduleName !== "@uniflowed/router/native" &&
+        moduleName !== "@uniflowed/router/native-navigation" &&
+        moduleName !== "@uniflowed/router/http-client" &&
         moduleName !== "@uniflowed/router/routing")
     ) {
       throw new Error(
         `${moduleName} needs a browser DOM and cannot be bundled for ${platform}. ` +
           `Native packages: ${nativePackages.map((item) => `@uniflowed/${item}`).join(", ")}, ` +
-          "@uniflowed/router/native and @uniflowed/router/routing. Keep DOM components in $page.web.js.",
+          "@uniflowed/router/native, @uniflowed/router/native-navigation, " +
+          "@uniflowed/router/http-client and @uniflowed/router/routing. Keep DOM components in $page.web.js.",
       );
     }
     return (previous ?? context.resolveRequest)(context, moduleName, platform);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/react-native",
-  "version": "0.0.0-alpha.40",
+  "version": "0.0.0-alpha.42",
   "description": "React Native, re-exported for the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -13,16 +13,18 @@
   "exports": {
     ".": "./index.js",
     "./metro": "./metro.cjs",
-    "./metro-transformer.cjs": "./metro-transformer.cjs"
+    "./metro-transformer.cjs": "./metro-transformer.cjs",
+    "./test-transformer.cjs": "./test-transformer.cjs"
   },
   "files": [
     "index.js",
     "metro.cjs",
     "metro-transformer.cjs",
+    "test-transformer.cjs",
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/host": "0.0.0-alpha.40"
+    "@uniflowed/host": "0.0.0-alpha.42"
   },
   "peerDependencies": {
     "react": ">=19.2.3",

package/test-transformer.cjs

@@ -0,0 +1,41 @@
+// @noflow
+"use strict";
+// Reuse the app's RN Babel preset for upstream native modules and Jest mock
+// hoisting. App Flow syntax and StyleX use the same uf compiler as Metro.
+const { createRequire } = require("node:module");
+const path = require("node:path");
+const { isFlowModule, transformFlowSync } = require("@uniflowed/host/transform");
+module.exports = {
+  process(source, filename, options) {
+    const root = options.config.rootDir;
+    const load = createRequire(path.join(root, "package.json"));
+    const babel = load("babel-jest").createTransformer({
+      babelrc: false,
+      configFile: false,
+      presets: [load.resolve("@react-native/babel-preset")],
+      plugins: [load.resolve("@babel/plugin-transform-dynamic-import")],
+    });
+    const transformed = isFlowModule(filename)
+      ? transformFlowSync(source, filename, {
+          root,
+          development: true,
+          nativeStyles: true,
+          sourceMap: true,
+        })
+      : null;
+    return babel.process(transformed?.code ?? source, filename, options);
+  },
+  // Include the compiler version/mtime, just as Metro does, on rebuilt tools.
+  getCacheKey(source, filename, options) {
+    const crypto = require("node:crypto");
+    const { ufBinaryIdentity } = require("@uniflowed/host/transform");
+    return crypto
+      .createHash("sha256")
+      .update(source)
+      .update(filename)
+      .update(options.configString)
+      .update(String(ufBinaryIdentity(process.env.UF_BINARY || "uf")))
+      .update(require("node:fs").readFileSync(__filename))
+      .digest("hex");
+  },
+};