@backtickjs/expo 0.2.2 → 0.2.3

package/README.md

@@ -1,6 +1,6 @@
 # @backtickjs/expo
 
-[Backtick](https://backtickjs.com) for Expo apps: a config plugin that records the versions your app is built with, so it can tell your server which modules it carries, and a call that reloads the app when your server restarts in development.
+[Backtick](https://backtickjs.com) for Expo apps: a config plugin that records the versions your app is built with, so it can tell your server which modules it carries; a compile step that writes your scripts as Expo writes your app's own code; and a call that reloads the app when your server restarts in development.
 
 ## Install
 
@@ -42,10 +42,24 @@ serve({ fetch: app.fetch, port: 3000 }, () => reloadExpo());
 
 Without Expo running, as on a deployed server, it does nothing.
 
+**Your scripts are compiled as Expo compiles your app's own code**, by its Babel preset for Hermes, after your framework's compile step. Hermes V1 has bugs Expo works around in your app's code, as an async arrow with a default parameter losing its first `await`; your scripts get the same workarounds:
+
+```json
+// package.json
+{
+  "backtick": {
+    "plugins": ["@backtickjs/jsx-react/plugin", "@backtickjs/expo/plugin"]
+  }
+}
+```
+
+A script is compiled once for every client, so it isn't told which platform it's for: `process.env.EXPO_OS` is `null` in one. Use `Platform.OS`.
+
 ## API
 
 - `@backtickjs/expo` in `app.json`'s `plugins`: the config plugin, which sets `extra.backtick.installedPackages` to `installedPackages(projectRoot)` from `@backtickjs/core/node`.
 - `getBacktickExtra(expoConfig)`: what the plugin recorded, `{ installedPackages }`, from `Constants.expoConfig`. Throws as the app starts if the plugin isn't in `app.json`.
+- `@backtickjs/expo/plugin` in `package.json`'s `backtick.plugins`: the compile step, Expo's Babel preset for Hermes, from the app's own `expo`.
 - `reloadExpo(port?)`, from `@backtickjs/expo/server`: reloads the apps Expo serves, as pressing `r` in its terminal does. `port` is Expo's, 8081 or `RCT_METRO_PORT` by default.
 
 ## Related

package/dist/app.plugin.d.ts

@@ -0,0 +1,15 @@
+type ExpoConfig = {
+    extra?: Record<string, unknown>;
+    _internal?: {
+        projectRoot?: string;
+    };
+};
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra<Config extends ExpoConfig>(config: Config): Config & {
+    extra: Record<string, unknown>;
+};
+export {};

package/dist/app.plugin.js

@@ -0,0 +1,24 @@
+import { installedPackages } from "@backtickjs/core/node";
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra(config) {
+    const projectRoot = config._internal?.projectRoot;
+    if (projectRoot === undefined) {
+        throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
+    }
+    const backtick = config.extra?.backtick;
+    return {
+        ...config,
+        extra: {
+            ...config.extra,
+            backtick: {
+                ...backtick,
+                installedPackages: installedPackages(projectRoot),
+            },
+        },
+    };
+}
+//# sourceMappingURL=app.plugin.js.map

package/dist/app.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.plugin.js","sourceRoot":"","sources":["../src/app.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,MAAc;IAEd,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC;IAClD,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,QAElB,CAAC;IACd,OAAO;QACL,GAAG,MAAM;QACT,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,KAAK;YACf,QAAQ,EAAE;gBACR,GAAG,QAAQ;gBACX,iBAAiB,EAAE,iBAAiB,CAAC,WAAW,CAAC;aAClD;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/plugin.d.ts

@@ -1,15 +1,15 @@
-type ExpoConfig = {
-    extra?: Record<string, unknown>;
-    _internal?: {
-        projectRoot?: string;
-    };
-};
 /**
- * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
- * the installed version of each of the app's dependencies in the config,
- * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ * Expo's Babel preset as a build's compile step, after the framework's:
+ * each script as Metro compiles the app's own code for Hermes, so a script
+ * gets what Expo works around in Hermes V1, as an async arrow with a default
+ * parameter losing its first `await`. Babel and the preset are the ones the
+ * app's own `expo` brings. A script is compiled once for every client, so no
+ * platform is given: `process.env.EXPO_OS` is `null` in one, and
+ * `Platform.OS` says the platform.
+ *
+ * Listed in `package.json`: `"backtick": { "plugins": ["@backtickjs/jsx-react/plugin", "@backtickjs/expo/plugin"] }`.
  */
-export default function withBacktickExtra<Config extends ExpoConfig>(config: Config): Config & {
-    extra: Record<string, unknown>;
+export default function expo(): (code: string, id: string) => {
+    code: string;
+    map: string;
 };
-export {};

package/dist/plugin.js

@@ -1,24 +1,38 @@
-import { installedPackages } from "@backtickjs/core/node";
+import { createRequire } from "node:module";
 /**
- * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
- * the installed version of each of the app's dependencies in the config,
- * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ * Expo's Babel preset as a build's compile step, after the framework's:
+ * each script as Metro compiles the app's own code for Hermes, so a script
+ * gets what Expo works around in Hermes V1, as an async arrow with a default
+ * parameter losing its first `await`. Babel and the preset are the ones the
+ * app's own `expo` brings. A script is compiled once for every client, so no
+ * platform is given: `process.env.EXPO_OS` is `null` in one, and
+ * `Platform.OS` says the platform.
+ *
+ * Listed in `package.json`: `"backtick": { "plugins": ["@backtickjs/jsx-react/plugin", "@backtickjs/expo/plugin"] }`.
  */
-export default function withBacktickExtra(config) {
-    const projectRoot = config._internal?.projectRoot;
-    if (projectRoot === undefined) {
-        throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
-    }
-    const backtick = config.extra?.backtick;
-    return {
-        ...config,
-        extra: {
-            ...config.extra,
-            backtick: {
-                ...backtick,
-                installedPackages: installedPackages(projectRoot),
+export default function expo() {
+    const fromExpo = createRequire(createRequire(import.meta.url).resolve("expo/package.json"));
+    const preset = fromExpo.resolve("babel-preset-expo");
+    const babel = createRequire(preset)("@babel/core");
+    return (code, id) => {
+        const compiled = babel.transformSync(code, {
+            filename: id,
+            babelrc: false,
+            configFile: false,
+            // readable, as the framework's step left it
+            compact: false,
+            comments: true,
+            sourceMaps: true,
+            // the module's imports kept, for the compiler to find
+            presets: [[preset, { disableImportExportTransform: true }]],
+            caller: {
+                name: "metro",
+                bundler: "metro",
+                engine: "hermes",
+                supportsStaticESM: true,
             },
-        },
+        });
+        return { code: compiled.code, map: JSON.stringify(compiled.map) };
     };
 }
 //# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,MAAc;IAEd,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC;IAClD,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,QAElB,CAAC;IACd,OAAO;QACL,GAAG,MAAM;QACT,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,KAAK;YACf,QAAQ,EAAE;gBACR,GAAG,QAAQ;gBACX,iBAAiB,EAAE,iBAAiB,CAAC,WAAW,CAAC;aAClD;SACF;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAU5C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI;IAI1B,MAAM,QAAQ,GAAG,aAAa,CAC5B,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAC5D,CAAC;IACF,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,aAAa,CAAU,CAAC;IAC5D,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE;QAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;YACzC,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,KAAK;YACjB,4CAA4C;YAC5C,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;YAChB,sDAAsD;YACtD,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE,CAAC,CAAC;YAC3D,MAAM,EAAE;gBACN,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,OAAO;gBAChB,MAAM,EAAE,QAAQ;gBAChB,iBAAiB,EAAE,IAAI;aACxB;SACF,CAAC,CAAC;QACH,OAAO,EAAE,IAAI,EAAE,QAAS,CAAC,IAAK,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,QAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IACvE,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backtickjs/expo",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Backtick for Expo apps: the config plugin that records the app's installed packages, and reloading apps when the server restarts",
   "keywords": [
     "backtick",
@@ -29,10 +29,13 @@
       "types": "./dist/server.d.ts",
       "default": "./dist/server.js"
     },
-    "./app.plugin.js": "./app.plugin.js"
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "default": "./dist/plugin.js"
+    },
+    "./app.plugin": "./dist/app.plugin.js"
   },
   "files": [
-    "app.plugin.js",
     "dist",
     "!dist/._cache",
     "src"
@@ -41,11 +44,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@backtickjs/core": "^0.2.2"
+    "@backtickjs/core": "^0.2.3"
+  },
+  "peerDependencies": {
+    "expo": "*"
   },
   "devDependencies": {
     "@types/node": "^25.9.1",
     "@types/ws": "^8.18.2",
+    "expo": "~57.0.26",
     "prettier": "^3.6.2",
     "typescript": "^6.0.3",
     "ws": "^8.22.0"

package/src/app.plugin.ts

@@ -0,0 +1,35 @@
+import { installedPackages } from "@backtickjs/core/node";
+
+// The part of an Expo config this plugin reads and writes: `projectRoot` is
+// set by Expo as it reads the config.
+type ExpoConfig = {
+  extra?: Record<string, unknown>;
+  _internal?: { projectRoot?: string };
+};
+
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra<Config extends ExpoConfig>(
+  config: Config,
+): Config & { extra: Record<string, unknown> } {
+  const projectRoot = config._internal?.projectRoot;
+  if (projectRoot === undefined) {
+    throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
+  }
+  const backtick = config.extra?.backtick as
+    | Record<string, unknown>
+    | undefined;
+  return {
+    ...config,
+    extra: {
+      ...config.extra,
+      backtick: {
+        ...backtick,
+        installedPackages: installedPackages(projectRoot),
+      },
+    },
+  };
+}

package/src/plugin.ts

@@ -1,35 +1,51 @@
-import { installedPackages } from "@backtickjs/core/node";
+import { createRequire } from "node:module";
 
-// The part of an Expo config this plugin reads and writes: `projectRoot` is
-// set by Expo as it reads the config.
-type ExpoConfig = {
-  extra?: Record<string, unknown>;
-  _internal?: { projectRoot?: string };
-};
+// What this uses of Babel, which the app's `expo` brings with its preset.
+interface Babel {
+  transformSync(
+    code: string,
+    options: object,
+  ): { code?: string | null; map?: object | null } | null;
+}
 
 /**
- * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
- * the installed version of each of the app's dependencies in the config,
- * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ * Expo's Babel preset as a build's compile step, after the framework's:
+ * each script as Metro compiles the app's own code for Hermes, so a script
+ * gets what Expo works around in Hermes V1, as an async arrow with a default
+ * parameter losing its first `await`. Babel and the preset are the ones the
+ * app's own `expo` brings. A script is compiled once for every client, so no
+ * platform is given: `process.env.EXPO_OS` is `null` in one, and
+ * `Platform.OS` says the platform.
+ *
+ * Listed in `package.json`: `"backtick": { "plugins": ["@backtickjs/jsx-react/plugin", "@backtickjs/expo/plugin"] }`.
  */
-export default function withBacktickExtra<Config extends ExpoConfig>(
-  config: Config,
-): Config & { extra: Record<string, unknown> } {
-  const projectRoot = config._internal?.projectRoot;
-  if (projectRoot === undefined) {
-    throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
-  }
-  const backtick = config.extra?.backtick as
-    | Record<string, unknown>
-    | undefined;
-  return {
-    ...config,
-    extra: {
-      ...config.extra,
-      backtick: {
-        ...backtick,
-        installedPackages: installedPackages(projectRoot),
+export default function expo(): (
+  code: string,
+  id: string,
+) => { code: string; map: string } {
+  const fromExpo = createRequire(
+    createRequire(import.meta.url).resolve("expo/package.json"),
+  );
+  const preset = fromExpo.resolve("babel-preset-expo");
+  const babel = createRequire(preset)("@babel/core") as Babel;
+  return (code, id) => {
+    const compiled = babel.transformSync(code, {
+      filename: id,
+      babelrc: false,
+      configFile: false,
+      // readable, as the framework's step left it
+      compact: false,
+      comments: true,
+      sourceMaps: true,
+      // the module's imports kept, for the compiler to find
+      presets: [[preset, { disableImportExportTransform: true }]],
+      caller: {
+        name: "metro",
+        bundler: "metro",
+        engine: "hermes",
+        supportsStaticESM: true,
       },
-    },
+    });
+    return { code: compiled!.code!, map: JSON.stringify(compiled!.map) };
   };
 }

package/app.plugin.js

@@ -1,3 +0,0 @@
-// Where Expo looks for a package's config plugin, as
-// `"plugins": ["@backtickjs/expo"]` names it.
-export { default } from "./dist/plugin.js";