Refactor polyfills for React Native. Close evoluhq#652

Moved polyfills for AbortSignal methods, Set prototype methods, and Promise.withResolvers into a dedicated polyfills.ts file in the react-expo example. Updated documentation to reference the new polyfills, adjusted imports in layout, and removed redundant polyfill code from Task.ts and shared.ts. Added necessary dependencies to package.json and Babel plugin for explicit resource management.

Author: steida

apps/web/src/app/(docs)/docs/local-first/page.mdx

@@ -56,7 +56,9 @@ npm install @evolu/common @evolu/web
 <ConditionalPlatformAlert platform={["Expo", "React Native"]} type="info">
   Make sure to follow the [react-native-quick-crypto setup
   instructions](https://github.com/margelo/react-native-quick-crypto#installation)
-  for proper native dependency configuration.
+  for proper native dependency configuration. See the [react-expo
+  example](https://github.com/evoluhq/evolu/tree/main/examples/react-expo) for
+  required polyfills.
 </ConditionalPlatformAlert>
 
 ## Define schema

examples/react-expo/app/_layout.tsx

@@ -1,6 +1,8 @@
 import { install } from "react-native-quick-crypto";
+import { installPolyfills } from "../polyfills";
 
 install();
+installPolyfills();
 
 import { Stack } from "expo-router";
 

examples/react-expo/app/index.tsx

@@ -1,5 +1,4 @@
 import Alert from "@blazejkustra/react-native-alert";
-import type { Evolu as EvoluType } from "@evolu/common";
 import * as Evolu from "@evolu/common";
 import { createUseEvolu, EvoluProvider, useQuery } from "@evolu/react";
 import { EvoluIdenticon } from "@evolu/react-native";
@@ -42,7 +41,7 @@ const Schema = {
 export default function Index(): React.ReactNode {
   const [authResult, setAuthResult] = useState<Evolu.AuthResult | null>(null);
   const [ownerIds, setOwnerIds] = useState<Array<Evolu.AuthList> | null>(null);
-  const [evolu, setEvolu] = useState<EvoluType<typeof Schema> | null>(null);
+  const [evolu, setEvolu] = useState<Evolu.Evolu<typeof Schema> | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -59,7 +58,7 @@ export default function Index(): React.ReactNode {
         // }),
       });
 
-      setEvolu(evolu as EvoluType<typeof Schema>);
+      setEvolu(evolu as Evolu.Evolu<typeof Schema>);
       setOwnerIds(ownerIds);
       setAuthResult(authResult);
 
@@ -101,7 +100,7 @@ const EvoluDemo = ({
   ownerIds,
   authResult,
 }: {
-  evolu: EvoluType<typeof Schema>;
+  evolu: Evolu.Evolu<typeof Schema>;
   ownerIds: Array<Evolu.AuthList> | null;
   authResult: Evolu.AuthResult | null;
 }): React.ReactNode => {

examples/react-expo/babel.config.js

@@ -15,6 +15,8 @@ module.exports = function (api) {
       // For Kysely to work with Hermes
       "@babel/plugin-transform-dynamic-import",
       "@babel/plugin-transform-modules-commonjs",
+      // For ECMAScript 'using' statement support
+      "@babel/plugin-transform-explicit-resource-management",
     ],
   };
 };

examples/react-expo/package.json

@@ -23,6 +23,7 @@
     "@evolu/react-native": "latest",
     "@expo/metro-runtime": "^6.1.2",
     "@expo/vector-icons": "^15.0.2",
+    "abort-signal-polyfill": "^1.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "^54.0.10",
     "expo-constants": "^18.0.9",
@@ -34,13 +35,21 @@
     "expo-sqlite": "~16.0.8",
     "react": "19.1.0",
     "react-native": "^0.81.4",
-    "react-native-quick-crypto": "^0.7.17",
+    "react-native-quick-crypto": "^1.0.0",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-screens": "^4.15.3",
-    "react-native-svg": "^15.14.0"
+    "react-native-svg": "^15.14.0",
+    "set.prototype.difference": "^1.1.7",
+    "set.prototype.intersection": "^1.1.7",
+    "set.prototype.isdisjointfrom": "^1.1.5",
+    "set.prototype.issubsetof": "^1.1.4",
+    "set.prototype.issupersetof": "^1.1.3",
+    "set.prototype.symmetricdifference": "^1.1.3",
+    "set.prototype.union": "^1.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
+    "@babel/plugin-transform-explicit-resource-management": "^7.27.1",
     "@babel/plugin-transform-modules-commonjs": "^7.27.1",
     "@types/react": "~19.1.13",
     "typescript": "^5.9.2"

examples/react-expo/polyfills.ts

@@ -0,0 +1,40 @@
+import { installAbortSignalPolyfill } from "abort-signal-polyfill";
+// @ts-expect-error Shimming Set prototype methods
+import difference from "set.prototype.difference";
+// @ts-expect-error Shimming Set prototype methods
+import intersection from "set.prototype.intersection";
+// @ts-expect-error Shimming Set prototype methods
+import isDisjointFrom from "set.prototype.isdisjointfrom";
+// @ts-expect-error Shimming Set prototype methods
+import isSubsetOf from "set.prototype.issubsetof";
+// @ts-expect-error Shimming Set prototype methods
+import isSupersetOf from "set.prototype.issupersetof";
+// @ts-expect-error Shimming Set prototype methods
+import symmetricDifference from "set.prototype.symmetricdifference";
+// @ts-expect-error Shimming Set prototype methods
+import union from "set.prototype.union";
+
+export const installPolyfills = (): void => {
+  installAbortSignalPolyfill();
+
+  difference.shim();
+  intersection.shim();
+  isDisjointFrom.shim();
+  isSubsetOf.shim();
+  isSupersetOf.shim();
+  symmetricDifference.shim();
+  union.shim();
+
+  // @see https://github.com/facebook/hermes/pull/1452
+  if (typeof Promise.withResolvers === "undefined") {
+    // @ts-expect-error This is OK.
+    Promise.withResolvers = () => {
+      let resolve, reject;
+      const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+      });
+      return { promise, resolve, reject };
+    };
+  }
+};

packages/common/src/Task.ts

@@ -209,32 +209,6 @@ const isAbortError = (error: unknown): error is AbortError =>
   error !== null &&
   (error as { type?: unknown }).type === "AbortError";
 
-// For React Native
-if (typeof AbortSignal.any !== "function") {
-  AbortSignal.any = function (signals: Array<AbortSignal>): AbortSignal {
-    const controller = new AbortController();
-
-    const onAbort = (event: Event) => {
-      controller.abort((event.target as AbortSignal).reason);
-      cleanup();
-    };
-
-    const cleanup = () => {
-      for (const s of signals) s.removeEventListener("abort", onAbort);
-    };
-
-    for (const s of signals) {
-      if (s.aborted) {
-        controller.abort(s.reason);
-        return controller.signal;
-      }
-      s.addEventListener("abort", onAbort);
-    }
-
-    return controller.signal;
-  };
-}
-
 /**
  * Combines user signal from context with an internal signal.
  *
@@ -323,21 +297,6 @@ export const toTask = <T, E>(
     ]);
   }) as Task<T, E>;
 
-// For React Native
-if (typeof AbortSignal.timeout !== "function") {
-  AbortSignal.timeout = function (ms: number): AbortSignal {
-    const controller = new AbortController();
-    const id = setTimeout(() => {
-      controller.abort();
-    }, ms);
-    // clear timeout if aborted early
-    controller.signal.addEventListener("abort", () => {
-      clearTimeout(id);
-    });
-    return controller.signal;
-  };
-}
-
 /**
  * Creates a {@link Task} that waits for the specified duration.
  *

packages/react-native/src/shared.ts

@@ -15,23 +15,6 @@ import {
   ReloadAppDep,
 } from "@evolu/common/local-first";
 
-/**
- * Polyfills `Promise.withResolvers`.
- *
- * @see https://github.com/facebook/hermes/pull/1452
- */
-if (typeof Promise.withResolvers === "undefined") {
-  // @ts-expect-error This is OK.
-  Promise.withResolvers = function () {
-    let resolve, reject;
-    const promise = new Promise((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    return { promise, resolve, reject };
-  };
-}
-
 const console = createConsole();
 const randomBytes = createRandomBytes();
 const time = createTime();