react-native-worklets 0.7.4 → 0.8.0-bundle-mode-preview-2

package/plugin/index.js

@@ -277,7 +277,7 @@ var require_types = __commonJS({
       return (0, types_12.isObjectExpression)(node);
     }
     exports2.workletClassFactorySuffix = "__classFactory";
-    exports2.generatedWorkletsDir = "__generatedWorklets";
+    exports2.generatedWorkletsDir = ".worklets";
   }
 });
 
@@ -411,10 +411,15 @@ var require_globals = __commonJS({
     exports2.initializeGlobals = initializeGlobals;
     exports2.addCustomGlobals = addCustomGlobals;
     var notCapturedIdentifiers = [
+      // Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
+      // Note that objects' properties don't need to be listed since we always only capture the whole object,
+      // e.g. `global.__ErrorUtils` or `Intl.DateTimeFormat`.
+      // Value properties
       "globalThis",
       "Infinity",
       "NaN",
       "undefined",
+      // Function properties
       "eval",
       "isFinite",
       "isNaN",
@@ -426,10 +431,12 @@ var require_globals = __commonJS({
       "encodeURIComponent",
       "escape",
       "unescape",
+      // Fundamental objects
       "Object",
       "Function",
       "Boolean",
       "Symbol",
+      // Error objects
       "Error",
       "AggregateError",
       "EvalError",
@@ -439,12 +446,15 @@ var require_globals = __commonJS({
       "TypeError",
       "URIError",
       "InternalError",
+      // Numbers and dates
       "Number",
       "BigInt",
       "Math",
       "Date",
+      // Text processing
       "String",
       "RegExp",
+      // Indexed collections
       "Array",
       "Int8Array",
       "Uint8Array",
@@ -457,17 +467,21 @@ var require_globals = __commonJS({
       "BigUint64Array",
       "Float32Array",
       "Float64Array",
+      // Keyed collections
       "Map",
       "Set",
       "WeakMap",
       "WeakSet",
+      // Structured data
       "ArrayBuffer",
       "SharedArrayBuffer",
       "DataView",
       "Atomics",
       "JSON",
+      // Managing memory
       "WeakRef",
       "FinalizationRegistry",
+      // Control abstraction objects
       "Iterator",
       "AsyncIterator",
       "Promise",
@@ -476,9 +490,12 @@ var require_globals = __commonJS({
       "Generator",
       "AsyncGenerator",
       "AsyncFunction",
+      // Reflection
       "Reflect",
       "Proxy",
+      // Internationalization
       "Intl",
+      // Other stuff
       "null",
       "this",
       "global",
@@ -488,7 +505,12 @@ var require_globals = __commonJS({
       "console",
       "performance",
       "arguments",
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
       "require",
+      "fetch",
+      "XMLHttpRequest",
+      "WebSocket",
+      // Run loop
       "queueMicrotask",
       "requestAnimationFrame",
       "cancelAnimationFrame",
@@ -498,7 +520,9 @@ var require_globals = __commonJS({
       "clearImmediate",
       "setInterval",
       "clearInterval",
+      // Hermes
       "HermesInternal",
+      // Worklets
       "_WORKLET"
     ];
     exports2.outsideBindingsToCaptureFromGlobalScope = /* @__PURE__ */ new Set([
@@ -511,8 +535,10 @@ var require_globals = __commonJS({
     function initializeState(state) {
       state.workletNumber = 1;
       state.classesToWorkletize = [];
-      initializeGlobals();
-      addCustomGlobals(state);
+      if (!state.opts.strictGlobal) {
+        initializeGlobals();
+        addCustomGlobals(state);
+      }
     }
     exports2.defaultGlobals = new Set(notCapturedIdentifiers.concat(notCapturedIdentifiers_DEPRECATED));
     function initializeGlobals() {
@@ -561,7 +587,7 @@ var require_closure = __commonJS({
             binding = idPath.scope.getBinding(name);
           }
           if (!binding) {
-            if (globals_12.globals.has(name)) {
+            if (state.opts.strictGlobal || globals_12.globals.has(name)) {
               return;
             }
             capturedNames.add(name);
@@ -614,11 +640,16 @@ var require_closure = __commonJS({
       return imported.path.parentPath.node.source.value.startsWith(".");
     }
     function isAllowedForRelativeImports(filename, workletizableModules) {
-      return !!filename && (filename.includes("react-native-worklets") || !!(workletizableModules === null || workletizableModules === void 0 ? void 0 : workletizableModules.some((module3) => filename.includes(module3))));
+      return !!filename && (alwaysAllowed.some((module3) => filename.includes(module3)) || !!(workletizableModules === null || workletizableModules === void 0 ? void 0 : workletizableModules.some((module3) => filename.includes(module3))));
     }
     function isWorkletizableModule(source, workletizableModules) {
-      return source.startsWith("react-native-worklets") || !!(workletizableModules === null || workletizableModules === void 0 ? void 0 : workletizableModules.some((module3) => source.startsWith(module3)));
+      return alwaysAllowed.some((module3) => source.startsWith(module3)) || !!(workletizableModules === null || workletizableModules === void 0 ? void 0 : workletizableModules.some((module3) => source.startsWith(module3)));
     }
+    var alwaysAllowed = [
+      "react-native-worklets",
+      "react-native/Libraries/Core/setUpXHR"
+      // for networking
+    ];
   }
 });
 
@@ -658,9 +689,6 @@ var require_generate = __commonJS({
         comments: false
       })) === null || _a === void 0 ? void 0 : _a.code;
       (0, assert_1.default)(transformedProg, "[Worklets] `transformedProg` is undefined.");
-      if (!(0, fs_1.existsSync)(filesDirPath)) {
-        (0, fs_1.mkdirSync)(filesDirPath, {});
-      }
       const dedicatedFilePath = (0, path_1.resolve)(filesDirPath, `${workletHash}.js`);
       (0, fs_1.writeFileSync)(dedicatedFilePath, transformedProg);
     }
@@ -979,6 +1007,7 @@ var require_workletFactory = __commonJS({
             (0, types_12.newExpression)((0, types_12.memberExpression)((0, types_12.identifier)("global"), (0, types_12.identifier)("Error")), []),
             (0, types_12.numericLiteral)(lineOffset),
             (0, types_12.numericLiteral)(-27)
+            // the placement of opening bracket after Exception in line that defined '_e' variable
           ]))
         ]));
         statements.push((0, types_12.expressionStatement)((0, types_12.assignmentExpression)("=", (0, types_12.memberExpression)((0, types_12.identifier)(reactName), (0, types_12.identifier)("__stackDetails"), false), (0, types_12.identifier)("_e"))));
@@ -1124,6 +1153,7 @@ var require_workletSubstitution = __commonJS({
     }
     function processWorklet(path, state) {
       path.traverse({
+        // @ts-expect-error TypeScript doesn't like this syntax here.
         [types_2.WorkletizableFunction](subPath, passedState) {
           processIfWithWorkletDirective(subPath, passedState);
         }
@@ -1180,7 +1210,14 @@ var require_objectWorklets = __commonJS({
           (0, workletSubstitution_12.processWorklet)(property, state);
         } else if (property.isObjectProperty()) {
           const value = property.get("value");
-          tryProcessingNode(value, state, true, false);
+          tryProcessingNode(
+            value,
+            state,
+            true,
+            // acceptWorkletizableFunction
+            false
+            // acceptObject
+          );
         } else {
           throw new Error(`[Reanimated] '${property.type}' as to-be workletized argument is not supported for object hooks.`);
         }
@@ -1213,10 +1250,12 @@ var require_autoworkletization = __commonJS({
       "useDerivedValue",
       "useAnimatedScrollHandler",
       "useAnimatedReaction",
+      // animations' callbacks
       "withTiming",
       "withSpring",
       "withDecay",
       "withRepeat",
+      // scheduling functions
       "runOnUI",
       "executeOnUIRuntimeSync",
       "scheduleOnUI",
@@ -1301,7 +1340,7 @@ var require_bundleMode = __commonJS({
       }
       const object = left.get("object");
       const property = left.get("property");
-      if (!object.isIdentifier() || object.node.name !== "globalThis" || !property.isIdentifier() || property.node.name !== "_WORKLETS_BUNDLE_MODE") {
+      if (!object.isIdentifier() || object.node.name !== "globalThis" || !property.isIdentifier() || property.node.name !== "_WORKLETS_BUNDLE_MODE_ENABLED") {
         return;
       }
       const right = expressionPath.get("right");
@@ -1474,7 +1513,15 @@ var require_class = __commonJS({
       stack.delete(current.name);
     }
     function isOutsideDependency(identifierPath, bindingIdentifiers, functionPath) {
-      return identifierPath.isReferencedIdentifier() && !(identifierPath.node.name in bindingIdentifiers) && !functionPath.scope.hasOwnBinding(identifierPath.node.name) && functionPath.scope.hasReference(identifierPath.node.name);
+      return (
+        // We don't care about identifiers that were just declared.
+        identifierPath.isReferencedIdentifier() && // We don't care about identifiers that are bound in the scope.
+        !(identifierPath.node.name in bindingIdentifiers) && // This I don't exactly understand, but the function identifier itself isn't in `bindingIdentifiers`,
+        // but it return true on `hasOwnBinding`.
+        !functionPath.scope.hasOwnBinding(identifierPath.node.name) && // `hasReference` returns true for global identifiers, like `Object`,
+        // we don't want to include those.
+        functionPath.scope.hasReference(identifierPath.node.name)
+      );
     }
     function isWorkletizableClass(classPath, state) {
       var _a;
@@ -1682,7 +1729,7 @@ var require_inlineStylesWarning = __commonJS({
     }
     function processPropertyValueForInlineStylesWarning(path) {
       if (path.isMemberExpression() && (0, types_12.isIdentifier)(path.node.property)) {
-        if (!path.node.computed && path.node.property.name === "value") {
+        if (path.node.property.name === "value") {
           path.replaceWith(generateInlineStylesWarning(path));
         }
       }

package/scripts/worklets_utils.rb

@@ -8,18 +8,18 @@ end
 
 def worklets_find_config()
   result = {
-    :bundle_mode => nil,
+    :bundle_mode_flag => nil,
+    :dynamic_frameworks_worklets_dir => nil,
+    :feature_flags_flag => nil,
+    :fetch_preview_flag => nil,
     :is_reanimated_example_app => nil,
     :is_tvos_target => nil,
     :react_native_version => nil,
     :react_native_minor_version => nil,
     :react_native_node_modules_dir => nil,
     :react_native_common_dir => nil,
-    :dynamic_frameworks_worklets_dir => nil,
   }
 
-  result[:bundle_mode] = ENV["WORKLETS_BUNDLE_MODE"] == "1"
-
   react_native_node_modules_dir = File.join(File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native/package.json')"`), '..')
   react_native_json = worklets_try_to_parse_react_native_package_json(react_native_node_modules_dir)
 
@@ -51,6 +51,11 @@ def worklets_find_config()
   react_native_worklets_dir_relative = Pathname.new(react_native_worklets_dir_absolute).relative_path_from(pods_root).to_s
   result[:dynamic_frameworks_worklets_dir] = react_native_worklets_dir_relative
 
+  feature_flags = worklets_get_static_feature_flags()
+  result[:feature_flags_flag] = worklets_get_static_feature_flags_flag(feature_flags)
+  result[:bundle_mode_flag] = worklets_get_flag_from_feature_flags(feature_flags, 'BUNDLE_MODE_ENABLED')
+  result[:fetch_preview_flag] = worklets_get_flag_from_feature_flags(feature_flags, 'FETCH_PREVIEW_ENABLED')
+  
   return result
 end
 
@@ -67,6 +72,14 @@ def worklets_assert_new_architecture_enabled(new_arch_enabled)
   end
 end
 
+def worklets_get_flag_from_feature_flags(feature_flags, flag_name)
+  if feature_flags[flag_name] == 'true'
+    return "-DWORKLETS_#{flag_name}"
+  else
+    return ''
+  end
+end
+
 def worklets_get_static_feature_flags()
   feature_flags = {}
 
@@ -89,6 +102,9 @@ def worklets_get_static_feature_flags()
       end
     end
   end
+  return feature_flags
+end
 
-  return feature_flags.map { |key, value| "[#{key}:#{value}]" }.join('')
+def worklets_get_static_feature_flags_flag(feature_flags)
+  return "-DWORKLETS_FEATURE_FLAGS=\"#{feature_flags.map { |key, value| "[#{key}:#{value}]" }.join('')}\""
 end

package/src/WorkletsModule/NativeWorklets.native.ts

@@ -26,6 +26,11 @@ class NativeWorklets implements IWorkletsModule {
       globalThis.__RUNTIME_KIND === RuntimeKind.ReactNative
     ) {
       WorkletsTurboModule?.installTurboModule();
+      if (__DEV__ && globalThis._WORKLETS_BUNDLE_MODE_ENABLED) {
+        console.log(
+          '[Worklets] Bundle mode initialization: Downloaded the bundle for Worklet Runtimes.'
+        );
+      }
     }
     if (global.__workletsModuleProxy === undefined) {
       throw new WorkletsError(
@@ -177,10 +182,8 @@ See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting
     return this.#workletsModuleProxy.scheduleOnUI(serializable);
   }
 
-  executeOnUIRuntimeSync<TValue, TReturn>(
-    serializable: SerializableRef<TValue>
-  ): TReturn {
-    return this.#workletsModuleProxy.executeOnUIRuntimeSync(serializable);
+  runOnUISync<TValue, TReturn>(worklet: SerializableRef<TValue>): TReturn {
+    return this.#workletsModuleProxy.runOnUISync(worklet);
   }
 
   createWorkletRuntime(
@@ -209,6 +212,13 @@ See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting
     );
   }
 
+  runOnRuntimeSync<TValue, TReturn>(
+    workletRuntime: WorkletRuntime,
+    worklet: SerializableRef<TValue>
+  ): TReturn {
+    return this.#workletsModuleProxy.runOnRuntimeSync(workletRuntime, worklet);
+  }
+
   createSynchronizable<TValue>(value: TValue): SynchronizableRef<TValue> {
     return this.#workletsModuleProxy.createSynchronizable(value);
   }

package/src/WorkletsModule/workletsModuleProxy.ts

@@ -83,9 +83,7 @@ export interface WorkletsModuleProxy {
 
   scheduleOnUI<TValue>(serializable: SerializableRef<TValue>): void;
 
-  executeOnUIRuntimeSync<TValue, TReturn>(
-    serializable: SerializableRef<TValue>
-  ): TReturn;
+  runOnUISync<TValue, TReturn>(serializable: SerializableRef<TValue>): TReturn;
 
   createWorkletRuntime(
     name: string,
@@ -100,6 +98,11 @@ export interface WorkletsModuleProxy {
     worklet: SerializableRef<TValue>
   ): void;
 
+  runOnRuntimeSync<TValue, TReturn>(
+    workletRuntime: WorkletRuntime,
+    worklet: SerializableRef<TValue>
+  ): TReturn;
+
   reportFatalErrorOnJS(
     message: string,
     stack: string,

package/src/bundleMode/metroOverrides.native.ts

@@ -0,0 +1,151 @@
+'use strict';
+
+import { WorkletsError } from '../debug/WorkletsError';
+import { isWorkletRuntime } from '../runtimeKind';
+
+/**
+ * Evaluating HMR updates on Worklet Runtimes leads to verbose warnings which
+ * don't affect runtime. This function silences those warnings by providing a
+ * dummy Refresh module to the global scope.
+ *
+ * Use only in dev builds.
+ */
+export function silenceHMRWarnings() {
+  assertWorkletRuntime('silenceHMRWarnings');
+
+  const Refresh = new Proxy(
+    {},
+    {
+      get() {
+        return () => {};
+      },
+    }
+  );
+
+  globalThis.__r.Refresh = Refresh;
+}
+
+/**
+ * Importing `react-native` on Worklet Runtimes will result in a crash due to
+ * the fact that React Native will try to set itself up as on the React Native
+ * runtime. To provide better developer experience we override the main React
+ * Native module with a proxy that puts an actionable warning.
+ *
+ * Note that this doesn't affect deep imports.
+ *
+ * Use only in dev builds.
+ */
+export function disallowRNImports() {
+  assertWorkletRuntime('disallowRNImports');
+
+  const modules = require.getModules();
+  const ReactNativeModuleId = require.resolveWeak('react-native');
+
+  const moduleFactory = makeModuleFactory((module) => {
+    module.exports = new Proxy(
+      {},
+      {
+        get: function get(_target, prop) {
+          globalThis.console.warn(
+            `You tried to import '${String(
+              prop
+            )}' from 'react-native' module on a Worklet Runtime. Using 'react-native' module on a Worklet Runtime is not allowed.`,
+            // eslint-disable-next-line reanimated/use-worklets-error
+            new Error().stack
+          );
+          return {
+            get() {
+              return undefined;
+            },
+          };
+        },
+      }
+    );
+  });
+
+  const mockModule = {
+    dependencyMap: [],
+    moduleFactory,
+    hasError: false,
+    importedAll: {},
+    importedDefault: {},
+    isInitialized: false,
+    publicModule: {
+      exports: {},
+    },
+  };
+
+  modules.set(ReactNativeModuleId, mockModule);
+}
+
+/**
+ * To use code from React Native that obtains TurboModules we need to mock the
+ * registry even if the TurboModules aren't actually used.
+ *
+ * This is needed for example for the XHR setup code that is imported from React
+ * Native.
+ */
+export function mockTurboModuleRegistry() {
+  const modules = require.getModules();
+
+  const TurboModuleRegistryId = require.resolveWeak(
+    'react-native/Libraries/TurboModule/TurboModuleRegistry'
+  );
+
+  const TurboModules = new Map<string, unknown>();
+
+  TurboModules.set('Networking', {});
+
+  globalThis.TurboModules = TurboModules;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const moduleFactory = makeModuleFactory((module: any) => {
+    function get(name: string) {
+      return globalThis.TurboModules.get(name);
+    }
+    function getEnforcing(name: string) {
+      return globalThis.TurboModules.get(name);
+    }
+    module.exports.get = get;
+    module.exports.getEnforcing = getEnforcing;
+  });
+
+  const metroModule = {
+    dependencyMap: [],
+    factory: moduleFactory,
+    hasError: false,
+    importedAll: {},
+    importedDefault: {},
+    isInitialized: false,
+    publicModule: {
+      exports: {},
+    },
+  };
+
+  modules.set(TurboModuleRegistryId, metroModule);
+}
+
+function assertWorkletRuntime(functionName: string) {
+  if (!isWorkletRuntime()) {
+    throw new WorkletsError(
+      `${functionName} can be used only on Worklet Runtimes.`
+    );
+  }
+}
+
+/** Module factory mimicking the one used by Metro bundler. */
+function makeModuleFactory(
+  moduleImpl: (moduleExports: Record<string, unknown>) => void
+) {
+  return function (
+    _global: unknown,
+    _require: unknown,
+    _importDefault: unknown,
+    _importAll: unknown,
+    module: Record<string, unknown>,
+    _exports: unknown,
+    _dependencyMap: unknown
+  ) {
+    moduleImpl(module);
+  };
+}

package/src/bundleMode/network.native.ts

@@ -0,0 +1,59 @@
+'use strict';
+
+import { WorkletsError } from '../debug/WorkletsError';
+
+/**
+ * Mocks necessary networking TurboModules on Worklet Runtimes to prevent
+ * crashes when code running on Worklet Runtimes tries to use networking APIs.
+ * The NetworkingModule itself is injected via C++.
+ */
+export function initializeNetworking() {
+  const TurboModules = globalThis.TurboModules;
+
+  TurboModules.set('FileReaderModule', makeMockTurboModule('FileReaderModule'));
+  TurboModules.set(
+    'PlatformConstants',
+    makeMockTurboModule('PlatformConstants')
+  );
+  TurboModules.set('WebSocketModule', makeMockTurboModule('WebSocketModule'));
+  TurboModules.set(
+    'BlobModule',
+    makeMockTurboModule('BlobModule', ['addNetworkingHandler'])
+  );
+
+  /**
+   * This require statement below is the key part of the implementation here. It
+   * pulls all the code that properly sets up XHR on a Runtime, using underlying
+   * C++ NetworkingModule. Thanks to that we can have the same JavaScript
+   * implementation for fetch on all runtimes in the app and we don't have to
+   * write the code ourselves.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  require('react-native/Libraries/Core/setUpXHR');
+}
+
+const noopMethods = ['getConstants'];
+
+function makeMockTurboModule(name: string, extraNoopMethods?: string[]) {
+  const proxy = new Proxy(
+    {},
+    {
+      get: function get(_target, prop) {
+        if (
+          [...noopMethods, ...(extraNoopMethods ?? [])].includes(prop as string)
+        ) {
+          return () => {
+            return () => {};
+          };
+        }
+        throw new WorkletsError(
+          `You tried to call method '${String(
+            prop
+          )}' from '${name}' TurboModule on a Worklet Runtime. Using '${name}' TurboModule on a Worklet Runtime is not allowed.`
+        );
+      },
+    }
+  );
+
+  return proxy;
+}

package/src/debug/jsVersion.ts

@@ -5,4 +5,4 @@
  * version used to build the native part of the library in runtime. Remember to
  * keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '0.7.4';
+export const jsVersion = '0.8.0-bundle-mode-preview-2';

package/src/featureFlags/staticFlags.json

@@ -1,4 +1,6 @@
 {
   "RUNTIME_TEST_FLAG": false,
+  "BUNDLE_MODE_ENABLED": false,
+  "FETCH_PREVIEW_ENABLED": false,
   "IOS_DYNAMIC_FRAMERATE_ENABLED": true
 }

package/src/featureFlags/types.ts

@@ -21,7 +21,9 @@ export type DynamicFlagName = keyof Omit<
  */
 export const DefaultStaticFeatureFlags = {
   RUNTIME_TEST_FLAG: false,
-  IOS_DYNAMIC_FRAMERATE_ENABLED: false,
+  BUNDLE_MODE_ENABLED: false,
+  FETCH_PREVIEW_ENABLED: false,
+  IOS_DYNAMIC_FRAMERATE_ENABLED: true,
 } as const satisfies typeof StaticFeatureFlagsJSON;
 
 export type StaticFeatureFlagsSchema = {

package/src/index.ts

@@ -3,6 +3,7 @@
 import { init } from './initializers/initializers';
 import { bundleModeInit } from './initializers/workletRuntimeEntry';
 
+// is-tree-shakable-suppress
 init();
 
 // @ts-expect-error We must trick the bundler to include
@@ -40,10 +41,18 @@ export type {
   Synchronizable,
   SynchronizableRef,
 } from './memory/types';
-export { getRuntimeKind, RuntimeKind } from './runtimeKind';
+export {
+  getRuntimeKind,
+  isRNRuntime,
+  isUIRuntime,
+  isWorkerRuntime,
+  isWorkletRuntime,
+  RuntimeKind,
+} from './runtimeKind';
 export {
   createWorkletRuntime,
   runOnRuntime,
+  runOnRuntimeSync,
   scheduleOnRuntime,
 } from './runtimes';
 export {