@backtickjs/react-native-client 0.1.9 → 0.1.10

package/README.md

@@ -12,18 +12,21 @@ npm install @backtickjs/react-native-client
 
 ## Usage
 
-Give `evaluate` the module map: the modules a bundle may require, each loaded the first time one does. Then fetch a screen and draw it. Hold the request, a promise, in state in a component that doesn't suspend, so it outlives the render that waits for it, and draw it with React's `use` under `<Suspense>`:
+Give `evaluate` the module map: the modules a bundle may require, imported as the app starts. Then fetch a screen and draw it. Hold the request, a promise, in state in a component that doesn't suspend, so it outlives the render that waits for it, and draw it with React's `use` under `<Suspense>`:
 
 ```tsx
 import { evaluate } from "@backtickjs/react-native-client";
+import * as React from "react";
 import { Suspense, use, useState } from "react";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as ReactNative from "react-native";
 import { ActivityIndicator } from "react-native";
 
 // What a screen may require: the packages this app was built with.
 const moduleMap = {
-  react: () => require("react"),
-  "react/jsx-runtime": () => require("react/jsx-runtime"),
-  "react-native": () => require("react-native"),
+  react: React,
+  "react/jsx-runtime": JSXRuntime,
+  "react-native": ReactNative,
 };
 
 async function fetchScreen(url: string) {
@@ -35,9 +38,7 @@ async function fetchScreen(url: string) {
 }
 
 export default function App() {
-  const [screen] = useState(() =>
-    fetchScreen("https://api.example.com/screens/home"),
-  );
+  const [screen] = useState(() => fetchScreen("https://api.example.com/"));
   return (
     <Suspense fallback={<ActivityIndicator />}>
       <Screen screen={screen} />
@@ -58,7 +59,7 @@ The server bundles for the versions the app runs: it passes them to `bundler.bui
 
 ### `evaluate(code: string, moduleMap: ModuleMap): unknown`
 
-Runs `code` as a CommonJS module, with `require` answered from `moduleMap`, and returns what it exports: for a Backtick screen, the element to draw. Each module loads the first time a bundle requires it, once for every bundle run with the same map. A bundle that requires a specifier missing from `moduleMap` throws:
+Runs `code` as a CommonJS module, with `require` answered from `moduleMap`, and returns what it exports: for a Backtick screen, the element to draw. A bundle that requires a specifier missing from `moduleMap` throws:
 
 ```
 The bundle requires "expo-haptics", which this app doesn't provide.
@@ -69,10 +70,10 @@ Errors thrown while the bundle runs propagate to the caller.
 ### `ModuleMap`
 
 ```ts
-type ModuleMap = Readonly<Record<string, () => unknown>>;
+type ModuleMap = Readonly<Record<string, unknown>>;
 ```
 
-What a bundle may require, by specifier, each as a function that returns its module. It does for an app what a web page's import map does, with modules for values instead of URLs. At least `react`, `react/jsx-runtime` and `react-native`; add any other package the app chooses to offer its screens. Keep the functions' `require` calls inside them: Metro still bundles each one, and Node tools can then read the specifiers without loading React Native.
+What a bundle may require, by specifier, each as the module the app imported for it. It does for an app what a web page's import map does, with modules for values instead of URLs. At least `react`, `react/jsx-runtime` and `react-native`; add any other package the app chooses to offer its screens. Imported at the top of a file, the modules load as the app starts, so one that fails to load fails then, rather than on the first screen that needs it.
 
 ### `buildIdFrom(extra: unknown, platform: string): string`
 

package/dist/index.d.ts

@@ -1,20 +1,23 @@
 /**
- * What a bundle may import, by specifier, and how this app loads each: a
- * function returning the module, called the first time a bundle requires it.
- * At least React, React Native and React's JSX runtime:
+ * What a bundle may import, by specifier: each the module the app imported
+ * for it. What a web page's import map does, for an app, with modules for
+ * values instead of URLs. At least React, React Native and React's JSX
+ * runtime:
  *
- *     const moduleMap = {
- *       react: () => require("react"),
- *       "react/jsx-runtime": () => require("react/jsx-runtime"),
- *       "react-native": () => require("react-native"),
- *     };
+ *     import * as React from "react";
+ *     import * as JSXRuntime from "react/jsx-runtime";
+ *     import * as ReactNative from "react-native";
  *
- * What a web page's import map does, for an app: the values are modules,
- * not URLs.
- * Loaded lazily, so a module no screen uses never loads, and Node can read
- * the specifiers without loading React Native.
+ *     export const moduleMap = {
+ *       react: React,
+ *       "react/jsx-runtime": JSXRuntime,
+ *       "react-native": ReactNative,
+ *     } satisfies ModuleMap;
+ *
+ * Imported as the app starts, so a module that fails to load fails then, not
+ * on the first screen that needs it.
  */
-export type ModuleMap = Readonly<Record<string, () => unknown>>;
+export type ModuleMap = Readonly<Record<string, unknown>>;
 /**
  * A bundle's code, run as CommonJS with `require` answered from `moduleMap`:
  * what it exports, the screen to draw. What a web page's import map and

package/dist/index.js

@@ -1,5 +1,3 @@
-// Each map's modules, once loaded: one instance of each, as `require` gives.
-const loaded = new WeakMap();
 /**
  * A bundle's code, run as CommonJS with `require` answered from `moduleMap`:
  * what it exports, the screen to draw. What a web page's import map and
@@ -8,19 +6,11 @@ const loaded = new WeakMap();
  * throws.
  */
 export function evaluate(code, moduleMap) {
-    let modules = loaded.get(moduleMap);
-    if (modules === undefined) {
-        modules = new Map();
-        loaded.set(moduleMap, modules);
-    }
     const require = (specifier) => {
         if (!Object.hasOwn(moduleMap, specifier)) {
             throw new Error(`The bundle requires "${specifier}", which this app doesn't provide.`);
         }
-        if (!modules.has(specifier)) {
-            modules.set(specifier, moduleMap[specifier]());
-        }
-        return modules.get(specifier);
+        return moduleMap[specifier];
     };
     const module = { exports: {} };
     new Function("module", "exports", "require", code)(module, module.exports, require);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkBA,6EAA6E;AAC7E,MAAM,MAAM,GAAG,IAAI,OAAO,EAAmC,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,SAAoB;IACzD,IAAI,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACjC,CAAC;IACD,MAAM,OAAO,GAAG,CAAC,SAAiB,EAAW,EAAE;QAC7C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;YACzC,MAAM,IAAI,KAAK,CACb,wBAAwB,SAAS,oCAAoC,CACtE,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC5B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAE,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,OAAO,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,EAAa,EAAE,CAAC;IAC1C,IAAI,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAChD,MAAM,EACN,MAAM,CAAC,OAAO,EACd,OAAO,CACR,CAAC;IACF,OAAO,MAAM,CAAC,OAAO,CAAC;AACxB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,KAAc,EAAE,QAAgB;IAC1D,MAAM,GAAG,GAAI,KAA4D;QACvE,EAAE,QAAQ,CAAC;IACb,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC3B,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CACb,mBAAmB,QAAQ,+EAA+E,CAC3G,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,SAAoB;IACzD,MAAM,OAAO,GAAG,CAAC,SAAiB,EAAW,EAAE;QAC7C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;YACzC,MAAM,IAAI,KAAK,CACb,wBAAwB,SAAS,oCAAoC,CACtE,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,EAAa,EAAE,CAAC;IAC1C,IAAI,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAChD,MAAM,EACN,MAAM,CAAC,OAAO,EACd,OAAO,CACR,CAAC;IACF,OAAO,MAAM,CAAC,OAAO,CAAC;AACxB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,KAAc,EAAE,QAAgB;IAC1D,MAAM,GAAG,GAAI,KAA4D;QACvE,EAAE,QAAQ,CAAC;IACb,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC3B,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CACb,mBAAmB,QAAQ,+EAA+E,CAC3G,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backtickjs/react-native-client",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Runs a Backtick server's screens in a React Native app, with the app's own packages",
   "keywords": [
     "backtick",

package/src/index.ts

@@ -1,23 +1,23 @@
 /**
- * What a bundle may import, by specifier, and how this app loads each: a
- * function returning the module, called the first time a bundle requires it.
- * At least React, React Native and React's JSX runtime:
+ * What a bundle may import, by specifier: each the module the app imported
+ * for it. What a web page's import map does, for an app, with modules for
+ * values instead of URLs. At least React, React Native and React's JSX
+ * runtime:
  *
- *     const moduleMap = {
- *       react: () => require("react"),
- *       "react/jsx-runtime": () => require("react/jsx-runtime"),
- *       "react-native": () => require("react-native"),
- *     };
+ *     import * as React from "react";
+ *     import * as JSXRuntime from "react/jsx-runtime";
+ *     import * as ReactNative from "react-native";
  *
- * What a web page's import map does, for an app: the values are modules,
- * not URLs.
- * Loaded lazily, so a module no screen uses never loads, and Node can read
- * the specifiers without loading React Native.
+ *     export const moduleMap = {
+ *       react: React,
+ *       "react/jsx-runtime": JSXRuntime,
+ *       "react-native": ReactNative,
+ *     } satisfies ModuleMap;
+ *
+ * Imported as the app starts, so a module that fails to load fails then, not
+ * on the first screen that needs it.
  */
-export type ModuleMap = Readonly<Record<string, () => unknown>>;
-
-// Each map's modules, once loaded: one instance of each, as `require` gives.
-const loaded = new WeakMap<ModuleMap, Map<string, unknown>>();
+export type ModuleMap = Readonly<Record<string, unknown>>;
 
 /**
  * A bundle's code, run as CommonJS with `require` answered from `moduleMap`:
@@ -27,21 +27,13 @@ const loaded = new WeakMap<ModuleMap, Map<string, unknown>>();
  * throws.
  */
 export function evaluate(code: string, moduleMap: ModuleMap): unknown {
-  let modules = loaded.get(moduleMap);
-  if (modules === undefined) {
-    modules = new Map();
-    loaded.set(moduleMap, modules);
-  }
   const require = (specifier: string): unknown => {
     if (!Object.hasOwn(moduleMap, specifier)) {
       throw new Error(
         `The bundle requires "${specifier}", which this app doesn't provide.`,
       );
     }
-    if (!modules.has(specifier)) {
-      modules.set(specifier, moduleMap[specifier]!());
-    }
-    return modules.get(specifier);
+    return moduleMap[specifier];
   };
   const module = { exports: {} as unknown };
   new Function("module", "exports", "require", code)(