@leonsilicon/react-native-wishlist 0.0.0

package/src/WishlistDataCopy.ts

@@ -0,0 +1,138 @@
+export type Item = {
+  key: string;
+};
+
+export type UpdateJob<T extends Item, ResT> = (datacopy: DataCopy<T>) => ResT;
+
+export interface DataCopy<T extends Item> {
+  getIndex: (key: string) => number | undefined;
+  at: (index: number) => T | undefined;
+  length: number;
+  setItem: (key: string, value: T) => void;
+  getItem: (key: string) => T | undefined;
+  removeItem: (key: string) => void;
+  setAt: (index: number, value: T) => void;
+  push: (value: T) => void;
+  unshift: (value: T) => void;
+  setItems: (items: Array<T>) => void;
+}
+
+export interface DataCopyInternal<T extends Item> extends DataCopy<T> {
+  __isTrackingChanges: boolean;
+  __dirtyIndexes: number[];
+  __deque: Array<T>;
+  __numberOfNegative: number;
+  __applyChanges: (pendingUpdates: Array<UpdateJob<T, any>>) => number[];
+}
+
+export function createItemsDataStructure<T extends Item>(
+  initialDeque: Array<T>,
+) {
+  'worklet';
+
+  // RN worklets objects / arrays are proxies need to be deep cloned to
+  // work properly in some cases. Ideally this would not be needed.
+  function deepClone<ObjT>(x: ObjT): ObjT {
+    if (typeof x === 'object' && x !== null) {
+      // rn-worklet arrays are proxy and Array.isArray doesn't work.
+      if (typeof (x as any).map === 'function') {
+        return (x as any).map((ele: unknown) => deepClone(ele));
+      } else {
+        const res: any = {};
+        for (let key of Object.keys(x as any)) {
+          res[key] = deepClone((x as any)[key]);
+        }
+        return res;
+      }
+    }
+    return x;
+  }
+
+  // classes doesn't work :(
+  // TODO it can be implemented so that all ops are O(log n)
+  const thiz: DataCopyInternal<T> = {
+    getIndex: function getIndex(key: string) {
+      // That's linear but can be log n (only for testing)
+      for (let i = 0; i < this.__deque.length; ++i) {
+        if (this.__deque[i].key === key) {
+          return i - this.__numberOfNegative;
+        }
+      }
+      return undefined;
+    },
+    at: function at(indexInput: number) {
+      const index = indexInput + this.__numberOfNegative;
+      if (index == null || index >= this.length || index < 0) {
+        return undefined;
+      }
+
+      return this.__deque[index];
+    },
+    get length() {
+      return this.__deque.length;
+    },
+    getItem: function get(key: string) {
+      const index = this.getIndex(key);
+      if (index == null) {
+        return undefined;
+      }
+      return this.at(index);
+    },
+    setItem: function setItem(key: string, value: T) {
+      const index = this.getIndex(key);
+      if (index == null) {
+        return;
+      }
+      this.setAt(index, value);
+    },
+    removeItem: function removeItem(key: string) {
+      const index = this.getIndex(key);
+      if (index == null) {
+        return;
+      }
+      this.__deque.splice(index + this.__numberOfNegative, 1);
+      if (index < 0) {
+        this.__numberOfNegative--;
+      }
+      if (this.__isTrackingChanges) {
+        this.__dirtyIndexes.push(index);
+      }
+    },
+    setAt: function setAt(index: number, value: T) {
+      this.__deque[index + this.__numberOfNegative] = deepClone(value);
+      if (this.__isTrackingChanges) {
+        this.__dirtyIndexes.push(index);
+      }
+    },
+    push: function push(value: T) {
+      this.__deque.push(deepClone(value));
+    },
+    unshift: function unshift(value: T) {
+      this.__deque.unshift(deepClone(value));
+      this.__numberOfNegative++;
+    },
+    setItems: function reset(items: Array<T>) {
+      if (this.__isTrackingChanges) {
+        this.__deque.forEach((_item, i) => this.__dirtyIndexes.push(i));
+      }
+      this.__deque = deepClone(items);
+      this.__numberOfNegative = 0;
+    },
+    __applyChanges: function __applyChanges(pendingUpdates) {
+      this.__isTrackingChanges = true;
+      for (let updateJob of pendingUpdates) {
+        updateJob(this);
+      }
+      this.__isTrackingChanges = false;
+      const res = this.__dirtyIndexes.map((i) => i);
+      this.__dirtyIndexes = [];
+      return res;
+    },
+    __deque: deepClone(initialDeque),
+    __numberOfNegative: 0, // allow negative indexes so that indices are constant
+    __dirtyIndexes: [],
+    __isTrackingChanges: false,
+  };
+
+  return thiz;
+}

package/src/WishlistJsRuntime.android.ts

@@ -0,0 +1,20 @@
+// Android currently uses the React Native runtime directly for Wishlist native
+// work. Keep this module free of `react-native-worklets-core`, whose Android
+// package is not registered by RN 0.83's bridgeless package delegate.
+export function bindNativeWishlistContext() {
+  // iOS binds a worklets-core context into native. Android initializes native
+  // with the RN runtime in `WishlistManagerModule.nativeInstall`.
+}
+
+export function createRunInWishlistFn<
+  T,
+  A extends unknown[] = [],
+>(fn: (...args: A) => T): (...args: A) => Promise<T> {
+  return (...args: A) => Promise.resolve().then(() => fn(...args));
+}
+
+export function createRunInJsFn<A extends unknown[], T>(
+  fn: (...args: A) => T,
+): (...args: A) => T {
+  return (...args: A) => fn(...args);
+}

package/src/WishlistJsRuntime.ts

@@ -0,0 +1,59 @@
+import { Platform } from 'react-native';
+import type {
+  IWorkletContext,
+  IWorkletNativeApi,
+} from 'react-native-worklets-core';
+
+declare const require: (
+  moduleName: 'react-native-worklets-core',
+) => { Worklets: IWorkletNativeApi };
+
+const Worklets =
+  Platform.OS === 'android'
+    ? undefined
+    : require('react-native-worklets-core').Worklets;
+
+const runOnCurrentRuntime = <T, A extends unknown[]>(
+  fn: (...args: A) => T,
+): ((...args: A) => Promise<T>) => {
+  return (...args: A) => Promise.resolve().then(() => fn(...args));
+};
+
+// Dedicated worklet runtime for wishlist. Native code (`WishlistJsRuntime`)
+// gets a pointer to this runtime via `__mgWishlistSetContext` (installed by
+// `MGWishlistManager.installWishlistRuntime`), so JS-side worklets and the
+// library's native side share state.
+export const wishlistContext: IWorkletContext | undefined =
+  Worklets?.createContext('wishlist');
+
+export function bindNativeWishlistContext() {
+  if (!wishlistContext) {
+    return;
+  }
+
+  const setNativeContext = (global as any).__mgWishlistSetContext;
+  if (typeof setNativeContext === 'function') {
+    setNativeContext(wishlistContext);
+  }
+}
+
+export function createRunInWishlistFn<
+  T,
+  A extends unknown[] = [],
+>(fn: (...args: A) => T): (...args: A) => Promise<T> {
+  if (!wishlistContext) {
+    return runOnCurrentRuntime(fn);
+  }
+
+  return wishlistContext.createRunAsync(fn) as (...args: A) => Promise<T>;
+}
+
+export function createRunInJsFn<A extends unknown[], T>(
+  fn: (...args: A) => T,
+): (...args: A) => Promise<T> {
+  if (!Worklets) {
+    return runOnCurrentRuntime(fn);
+  }
+
+  return Worklets.createRunOnJS(fn);
+}

package/src/createTemplateComponent.tsx

@@ -0,0 +1,263 @@
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { TemplateCallback, TemplateCallbackWorklet } from './EventHandler';
+import { ForEachBase } from './Components/ForEachBase';
+import InflatorRepository, {
+  getUIInflatorRegistry,
+} from './InflatorRepository';
+import { CaseBase } from './Components/Switch';
+import { useTemplateContext } from './TemplateContext';
+import {
+  createTemplateValue,
+  isTemplateValue,
+  TemplateValue,
+  TemplateValueInternal,
+} from './TemplateValue';
+import { generateId } from './Utils';
+import { useWishlistContext } from './WishlistContext';
+import { TemplateItem } from './TemplateItem';
+import { ComponentPool } from './ComponentPool';
+
+// This is based on types from @types/react-native createAnimatedComponent.
+
+type Nullable = undefined | null;
+type Primitive = string | number | boolean | symbol;
+type Builtin = Function | Date | Error | RegExp;
+
+interface WithTemplateArray<P> extends Array<WithTemplateValue<P>> {}
+type WithTemplateObject<T> = {
+  [K in keyof T]: WithTemplateValue<T[K]>;
+};
+
+type WithTemplateValue<T> = T extends Builtin | Nullable
+  ? T
+  : T extends Primitive
+  ? T | TemplateValue<T>
+  : T extends Array<infer P>
+  ? WithTemplateArray<P>
+  : T extends {}
+  ? WithTemplateObject<T>
+  : T;
+
+type NonTemplateProps = 'key' | 'ref';
+
+export type TemplateProps<T> = {
+  [key in keyof T]: key extends NonTemplateProps
+    ? T[key]
+    : WithTemplateValue<T[key]>;
+};
+
+export interface TemplateComponent<T extends React.ComponentType<any>>
+  extends React.FC<TemplateProps<React.ComponentPropsWithRef<T>>> {}
+
+function setInObject(obj: any, path: string[], value: any) {
+  'worklet';
+
+  let current = obj;
+  for (let i = 0; i < path.length - 1; i++) {
+    current[path[i]] = current[path[i]] ?? {};
+    current = current[path[i]];
+  }
+  current[path[path.length - 1]] = value;
+}
+
+function traverseObject(
+  obj: any,
+  callback: (path: string[], value: any) => void,
+) {
+  const stack: { path: string[]; value: any }[] = [{ path: [], value: obj }];
+  while (stack.length > 0) {
+    const { path, value } = stack.pop()!;
+
+    if (
+      value &&
+      typeof value === 'object' &&
+      !isTemplateValue(value) &&
+      !(value instanceof TemplateCallback) &&
+      (path.length === 0 || path[path.length - 1] !== 'children')
+    ) {
+      Object.keys(value).forEach((key) => {
+        stack.push({ path: [...path, key], value: value[key] });
+      });
+    } else {
+      callback(path, value);
+    }
+  }
+}
+
+function convertToTemplateValue(value: unknown, path: string[]) {
+  let curTemplateType = value;
+
+  return {
+    // TODO(janic): Need to call remove for template values created here.
+    templateValue: createTemplateValue(() => {
+      'worklet';
+      return curTemplateType;
+    }),
+    targetPath: path,
+  };
+}
+
+type CreateTemplateComponentOptions = {
+  /**
+   * Worklet that will be called when items are inflated.
+   * This can be used to map props differently than the
+   * default implementation.
+   */
+  addProps?: (
+    templateItem: TemplateItem,
+    props: any,
+    inflatorId: string,
+    pool: ComponentPool,
+    rootValue: any,
+  ) => void;
+  /**
+   * Additional non-template props that should be passed to
+   * the inflator. Can use dot syntax to access nested props.
+   */
+  additionalTemplateProps?: string[];
+};
+
+export function createTemplateComponent<T extends React.ComponentType<any>>(
+  Component: T,
+  { addProps, additionalTemplateProps }: CreateTemplateComponentOptions = {},
+): TemplateComponent<T> {
+  const parsedAdditionalTemplateProps =
+    additionalTemplateProps?.map((prop) => prop.split('.')) ?? [];
+
+  const WishListComponent = forwardRef<any, any>(({ style, ...props }, ref) => {
+    const { inflatorId } = useWishlistContext();
+    const { templateType } = useTemplateContext();
+
+    const nativeId = useMemo(generateId, []);
+
+    const otherPropsMemoized = useMemo(() => {
+      const resolvedStyle = StyleSheet.flatten(style);
+
+      const templateValues: {
+        templateValue: TemplateValueInternal<any>;
+        targetPath: string[];
+      }[] = [];
+
+      const templateCallbacks: {
+        worklet: TemplateCallbackWorklet;
+        eventName: string;
+      }[] = [];
+
+      const additionalProps: { targetPath: string[]; value: any }[] = [];
+
+      const otherProps = {};
+      traverseObject({ ...props, style: resolvedStyle }, (path, value) => {
+        const applyHacks = () => {
+          // Text component needs to receive a string child to work properly.
+          // @ts-expect-error TODO: fix this.
+          if (path[0] === 'children' && Component === Text) {
+            setInObject(otherProps, path, ' ');
+          }
+        };
+
+        if (isTemplateValue(value)) {
+          templateValues.push({ templateValue: value, targetPath: path });
+
+          applyHacks();
+        } else if (value instanceof TemplateCallback) {
+          templateCallbacks.push({
+            worklet: value.worklet,
+            // Callbacks should never be in objects.
+            eventName: value.eventName ?? path[0].replace(/^on/, 'top'),
+          });
+          // Events have a boolean prop associated to know whether the
+          // function is set or not, so we still want to pass the prop.
+          setInObject(otherProps, path, () => {});
+        } else {
+          // @ts-expect-error TODO: fix this.
+          if (Component === ForEachBase && path[0] === 'template') {
+            templateValues.push(convertToTemplateValue(value, path));
+          }
+
+          if (
+            // @ts-expect-error TODO: fix this.
+            Component === CaseBase &&
+            path[0] === 'value' &&
+            !isTemplateValue(value)
+          ) {
+            templateValues.push(convertToTemplateValue(value, path));
+          }
+
+          if (
+            // @ts-expect-error TODO: fix this.
+            Component === Text &&
+            path[0] === 'children' &&
+            !isTemplateValue(value)
+          ) {
+            templateValues.push(convertToTemplateValue(value, path));
+          }
+
+          parsedAdditionalTemplateProps.forEach((additionalPath) => {
+            if (
+              additionalPath.length === path.length &&
+              additionalPath.every((p, i) => p === path[i])
+            ) {
+              additionalProps.push({ targetPath: path, value });
+            }
+          });
+
+          setInObject(otherProps, path, value);
+        }
+      });
+      InflatorRepository.registerMapping(
+        inflatorId,
+        nativeId,
+        templateType,
+        (value, templateItem, pool, rootValue) => {
+          'worklet';
+
+          const propsToSet: any = {};
+          additionalProps.forEach(({ targetPath, value: v }) => {
+            setInObject(propsToSet, targetPath, v);
+          });
+          templateValues.forEach(({ templateValue, targetPath }) => {
+            setInObject(propsToSet, targetPath, templateValue.value());
+          });
+
+          templateCallbacks.forEach(({ eventName, worklet }) => {
+            templateItem.setCallback(eventName, (ev) => {
+              getUIInflatorRegistry().withCurrentValues(
+                value,
+                rootValue,
+                () => {
+                  worklet(ev, value, rootValue);
+                },
+              );
+            });
+          });
+
+          // Styles need to be passed as props.
+          const { style: styleForProps, ...otherPropsToSet } = propsToSet;
+          const finalPropsToSet = { ...otherPropsToSet, ...styleForProps };
+          if (addProps) {
+            addProps(
+              templateItem,
+              finalPropsToSet,
+              inflatorId,
+              pool,
+              rootValue,
+            );
+          } else {
+            templateItem.addProps(finalPropsToSet);
+          }
+        },
+      );
+      return otherProps;
+      // TODO: This will change on every render, if we want this memo to work properly we need
+      // to shallow compare the props object.
+    }, [inflatorId, nativeId, props, style, templateType]);
+
+    // @ts-expect-error: this is ok.
+    return <Component {...otherPropsMemoized} ref={ref} nativeID={nativeId} />;
+  }) as unknown as TemplateComponent<T>;
+
+  WishListComponent.displayName = `WishList(${Component.displayName})`;
+
+  return WishListComponent;
+}

package/src/global.d.ts

@@ -0,0 +1 @@
+declare var global: any;

package/src/index.ts

@@ -0,0 +1,17 @@
+import './EventHandler';
+import WishListManager from './Specs/NativeWishlistManager';
+import { bindNativeWishlistContext } from './WishlistJsRuntime';
+
+WishListManager.install();
+bindNativeWishlistContext();
+
+export { useTemplateValue, TemplateValue } from './TemplateValue';
+export { createTemplateComponent } from './createTemplateComponent';
+export { Wishlist, WishListInstance } from './Wishlist';
+export {
+  useWishlistData,
+  useWishlistContextData,
+  WishlistData,
+} from './WishlistData';
+export { createRunInJsFn, createRunInWishlistFn } from './WishlistJsRuntime';
+export { renderTemplate } from './renderTemplate';

package/src/renderTemplate.ts

@@ -0,0 +1,22 @@
+import { ComponentPool } from './ComponentPool';
+import { getUIInflatorRegistry } from './InflatorRepository';
+
+export function renderTemplate(
+  template: string,
+  value: any,
+  rootValue: any,
+  inflatorId: string,
+  pool: ComponentPool,
+) {
+  'worklet';
+
+  const item = pool.getComponent(template)!;
+  return getUIInflatorRegistry().useMappings(
+    item,
+    value,
+    template,
+    inflatorId,
+    pool,
+    rootValue,
+  );
+}