@leonsilicon/react-native-wishlist 0.0.0

package/src/Components/Switch.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+import type { TemplateValue } from '../TemplateValue';
+
+const SwitchTemplateComponent = createTemplateComponent(View);
+
+type SwitchProps = {
+  value: TemplateValue<unknown>;
+  children: React.ReactElement<typeof Case>[];
+  style?: ViewStyle;
+};
+
+export function Switch(props: SwitchProps) {
+  const children = React.Children.map(props.children, (item) =>
+    React.cloneElement(item, {
+      ...item.props,
+      // @ts-expect-error this is hidden property
+      switchValue: props.value,
+    }),
+  );
+
+  return <SwitchTemplateComponent {...props} children={children} />;
+}
+
+export const CaseBase = forwardRef<any, any>((props, ref) => {
+  return <View {...props} ref={ref} />;
+});
+
+const CaseTemplateComponent = createTemplateComponent(CaseBase, {
+  addProps: (item, props) => {
+    'worklet';
+
+    if (props.switchValue === props.value) {
+      item.addProps({ display: 'flex' });
+    } else {
+      item.addProps({ display: 'none' });
+    }
+  },
+});
+
+type CaseProps = React.PropsWithChildren<{
+  value: TemplateValue<unknown> | string | boolean | number;
+  style?: ViewStyle;
+}>;
+
+export function Case(props: CaseProps) {
+  return <CaseTemplateComponent {...props} />;
+}

package/src/Components/WishlistImage.tsx

@@ -0,0 +1,25 @@
+import { Image, Platform } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+
+export const WishlistImage = createTemplateComponent(Image, {
+  addProps: (item, props) => {
+    'worklet';
+    if (Platform.OS === 'android') {
+      const { source, ...rest } = props;
+      const src = source != null && !Array.isArray(source) ? [source] : source;
+      item.addProps({
+        src,
+        ...rest,
+      });
+    } else {
+      item.addProps(props);
+    }
+  },
+  additionalTemplateProps: [
+    'style.borderRadius',
+    'style.borderTopLeftRadius',
+    'style.borderTopRightRadius',
+    'style.borderBottomLeftRadius',
+    'style.borderBottomRightRadius',
+  ],
+});

package/src/Components/WishlistText.tsx

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+
+export const WishlistText = createTemplateComponent(Text, {
+  addProps: (item, props) => {
+    'worklet';
+
+    const { children, ...other } = props;
+    const value =
+      typeof children === 'string' ? children : children?.toString();
+    item.RawText?.addProps({ text: value });
+    item.addProps(other);
+  },
+});

package/src/Components/WishlistView.tsx

@@ -0,0 +1,4 @@
+import { View } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+
+export const WishlistView = createTemplateComponent(View);

package/src/EventHandler.ts

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import { createRunInWishlistFn } from './WishlistJsRuntime';
+
+// Older React Native versions exposed `global.global`. Newer versions only
+// set `global.window` and `global.self`, so the wishlist native code, which
+// reads `global.global.handlers` / `global.global.handleEvent`, needs the
+// alias re-established before any events fire. This must run at module load
+// because the native event observer is registered as soon as the TurboModule
+// loads — before any Wishlist component renders.
+const setupRuntimeGlobals = () => {
+  if (global.global === undefined) {
+    global.global = global;
+  }
+  global.handlers = global.handlers ?? {};
+  global.handleEvent = (type: string, tag: number, event: any) => {
+    const key = tag.toString() + type.replace(/^topOn/, 'on');
+    const callback = global.handlers[key];
+    if (callback) {
+      callback(event);
+    }
+  };
+};
+
+setupRuntimeGlobals();
+
+let done = false;
+const maybeInit = () => {
+  if (!done) {
+    done = true;
+    // Mirror the same setup on the worklets UI runtime — that's where
+    // `WishlistJsRuntime` lives natively, so its `handleEvent` lookup happens
+    // there.
+    createRunInWishlistFn(() => {
+      'worklet';
+      if (global.global === undefined) {
+        global.global = global;
+      }
+      global.handlers = global.handlers ?? {};
+      global.handleEvent = (type: string, tag: number, event: any) => {
+        'worklet';
+        const key = tag.toString() + type.replace(/^topOn/, 'on');
+        const callback = global.handlers[key];
+        if (callback) {
+          callback(event);
+        }
+      };
+    })();
+  }
+};
+
+export type TemplateCallbackWorklet = (
+  nativeEvent: any,
+  value: any,
+  rootValue: any,
+) => unknown;
+
+export class TemplateCallback {
+  worklet: TemplateCallbackWorklet;
+  eventName: string | undefined;
+
+  constructor(worklet: TemplateCallbackWorklet, eventName?: string) {
+    this.worklet = worklet;
+    this.eventName = eventName;
+  }
+}
+
+export function useTemplateCallback(
+  worklet: (nativeEvent: any, value: any, rootValue: any) => unknown,
+  eventName?: string,
+) {
+  return useMemo(() => {
+    return new TemplateCallback(worklet, eventName);
+  }, [worklet, eventName]);
+}
+
+export function initEventHandler() {
+  maybeInit();
+}

package/src/InflatorRepository.ts

@@ -0,0 +1,231 @@
+import { getColorsUIModule } from './Colors';
+import {
+  ComponentPool,
+  NativeComponentPool,
+  wrapComponentPool,
+} from './ComponentPool';
+import { TemplateItem } from './TemplateItem';
+import type { TemplateValueUIState } from './TemplateValue';
+import { createRunInWishlistFn } from './WishlistJsRuntime';
+
+export type InflateMethod = (
+  index: number,
+  pool: ComponentPool,
+  previousItem: TemplateItem | null,
+) => [TemplateItem, any] | undefined;
+
+export type MappingInflateMethod = (
+  value: unknown,
+  templateItem: TemplateItem,
+  pool: ComponentPool,
+  rootValue: unknown,
+) => void;
+
+export type UIInflatorRegistry = {
+  inflateItem: (
+    id: string,
+    index: number,
+    pool: NativeComponentPool,
+    prevItem: TemplateItem | null,
+  ) => TemplateItem | undefined;
+  registerInflator: (id: string, inflateMethod: InflateMethod) => void;
+  unregisterInflator: (id: string) => void;
+  registerMapping: (
+    inflatorId: string,
+    nativeId: string,
+    templateType: string,
+    inflateMethod: MappingInflateMethod,
+  ) => void;
+  useMappings: (
+    item: TemplateItem,
+    value: unknown,
+    templateType: string,
+    id: string,
+    pool: ComponentPool,
+    rootValue: unknown,
+  ) => TemplateItem;
+  getTemplateValueState: (id: string) => TemplateValueUIState | undefined;
+  setTemplateValueState: (id: string, state: TemplateValueUIState) => void;
+  deleteTemplateValueState: (id: string) => void;
+  getCurrentValue: () => unknown;
+  getCurrentRootValue: () => unknown;
+  withCurrentValues: (
+    value: unknown,
+    rootValue: unknown,
+    callback: () => void,
+  ) => void;
+  didPushChildren: () => void;
+  addPushChildrenCallback: (callback: () => void) => void;
+  processProps: (props: any) => any;
+};
+
+let done = false;
+const maybeInit = () => {
+  if (!done) {
+    done = true;
+    createRunInWishlistFn(() => {
+      'worklet';
+
+      const registry = new Map<string, InflateMethod>();
+      const mappings = new Map<
+        string,
+        Map<string, Map<string, MappingInflateMethod>>
+      >();
+      const templateValueStates = new Map<string, TemplateValueUIState>();
+      let pushChildrenCallbacks: (() => void)[] = [];
+      let currentValue: unknown;
+      let currentRootValue: unknown;
+
+      const inflatorRegistry: UIInflatorRegistry = {
+        inflateItem: (id, index, nativePool, prevItem) => {
+          const pool = wrapComponentPool(nativePool);
+          const inflator = registry.get(id);
+          if (inflator) {
+            const result = inflator(index, pool, prevItem);
+            if (!result) {
+              return result;
+            }
+            const [item, value] = result;
+
+            return inflatorRegistry.useMappings(
+              item,
+              value,
+              value.type,
+              id,
+              pool,
+              value, // rootValue
+            );
+          } else {
+            console.log('Inflator not found for id: ' + id);
+            return undefined;
+          }
+        },
+        useMappings: (item, value, templateType, id, pool, rootValue) => {
+          // We need to save and restore current values to support things like ForEach
+          // where current value can change.
+          inflatorRegistry.withCurrentValues(value, rootValue, () => {
+            const mapping = mappings.get(id)?.get(templateType);
+            if (mapping) {
+              for (const [nativeId, inflate] of mapping.entries()) {
+                const templateItem = item.getByWishId(nativeId);
+                if (templateItem) {
+                  templateValueStates.clear();
+                  inflate(value, templateItem, pool, rootValue);
+                }
+              }
+            }
+          });
+          return item;
+        },
+        registerInflator: (id, inflateMethod) => {
+          registry.set(id, inflateMethod);
+        },
+        unregisterInflator: (id) => {
+          // TODO(Szymon) It should be done on UI Thread as it may be still in use
+          registry.delete(id);
+          mappings.delete(id);
+        },
+        registerMapping: (
+          inflatorId: string,
+          nativeId: string,
+          templateType: string,
+          inflateMethod: MappingInflateMethod,
+        ) => {
+          const mapping = mappings.get(inflatorId) ?? new Map();
+          const innerMapping = mapping.get(templateType) ?? new Map();
+          innerMapping.set(nativeId, inflateMethod);
+          mapping.set(templateType, innerMapping);
+          mappings.set(inflatorId, mapping);
+        },
+        getTemplateValueState: (id) => {
+          return templateValueStates.get(id);
+        },
+        setTemplateValueState: (id, state) => {
+          templateValueStates.set(id, state);
+        },
+        deleteTemplateValueState: (id) => {
+          templateValueStates.delete(id);
+        },
+        withCurrentValues: (value, rootValue, callback) => {
+          templateValueStates.clear();
+          const previousValue = currentValue;
+          const previousRootValue = currentRootValue;
+          currentValue = value;
+          currentRootValue = rootValue;
+          callback();
+          currentValue = previousValue;
+          currentRootValue = previousRootValue;
+        },
+        getCurrentValue: () => {
+          return currentValue;
+        },
+        getCurrentRootValue: () => {
+          return currentRootValue;
+        },
+        // TODO: Scope this by wishlist
+        didPushChildren: () => {
+          pushChildrenCallbacks.forEach((cb) => cb());
+          pushChildrenCallbacks = [];
+        },
+        addPushChildrenCallback: (callback) => {
+          pushChildrenCallbacks.push(callback);
+        },
+        processProps: (props) => {
+          const colors = getColorsUIModule();
+          const result: any = {};
+          for (const [key, value] of Object.entries(props)) {
+            if (colors.colorProps.includes(key)) {
+              result[key] = colors.processColor(value);
+            } else {
+              result[key] = value;
+            }
+          }
+          return result;
+        },
+      };
+      global.__wishlistInflatorRegistry = inflatorRegistry;
+    })();
+  }
+};
+
+export function getUIInflatorRegistry(): UIInflatorRegistry {
+  'worklet';
+
+  return global.__wishlistInflatorRegistry;
+}
+
+export default class InflatorRepository {
+  static register(id: string, inflateMethod: InflateMethod) {
+    maybeInit();
+    createRunInWishlistFn(() => {
+      'worklet';
+      getUIInflatorRegistry().registerInflator(id, inflateMethod);
+    })();
+  }
+
+  static unregister(id: string) {
+    maybeInit();
+    createRunInWishlistFn(() => {
+      'worklet';
+      getUIInflatorRegistry().unregisterInflator(id);
+    })();
+  }
+
+  static registerMapping(
+    inflatorId: string,
+    nativeId: string,
+    templateType: string,
+    inflateMethod: MappingInflateMethod,
+  ) {
+    maybeInit();
+    createRunInWishlistFn(() => {
+      'worklet';
+      getUIInflatorRegistry().registerMapping(
+        inflatorId,
+        nativeId,
+        templateType,
+        inflateMethod,
+      );
+    })();
+  }
+}

package/src/OrchestratorBinding.ts

@@ -0,0 +1,15 @@
+interface VisibleItem {
+  index: number;
+  key: string;
+}
+export interface ViewportObserver {
+  markItemsDirty: (indices: Array<number>) => void;
+  markAllItemsDirty: () => void;
+  getAllVisibleItems: () => Array<VisibleItem>;
+  updateIndices: (newIndex: number) => void;
+}
+
+export function scheduleSyncUp(wishlistId: string) {
+  'worklet';
+  global.wishlists[wishlistId].scheduleSyncUp();
+}

package/src/Specs/NativeContentContainer.ts

@@ -0,0 +1,9 @@
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeContentContainerProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeContentContainerProps>(
+  'MGContentContainer',
+  { interfaceOnly: true },
+);

package/src/Specs/NativeTemplateContainer.ts

@@ -0,0 +1,13 @@
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeTemplateContainerProps extends ViewProps {
+  inflatorId: string;
+  wishlistId: string;
+  names: string;
+}
+
+export default codegenNativeComponent<NativeTemplateContainerProps>(
+  'MGTemplateContainer',
+  { interfaceOnly: true },
+);

package/src/Specs/NativeTemplateInterceptor.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeTemplateInterceptorProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeTemplateInterceptorProps>(
+  'MGTemplateInterceptor',
+);

package/src/Specs/NativeWishlist.ts

@@ -0,0 +1,42 @@
+import type * as React from 'react';
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent, {
+  NativeComponentType,
+} from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export type EventInFile = Readonly<{
+  value: Double;
+}>;
+
+export interface WishlistProps extends ViewProps {
+  inflatorId: string;
+  initialIndex: Int32;
+  onStartReached?: DirectEventHandler<Readonly<{}>>;
+  onEndReached?: DirectEventHandler<Readonly<{}>>;
+}
+
+type NativeType = NativeComponentType<WishlistProps>;
+
+export type ScrollToItem = (
+  viewRef: React.ElementRef<NativeType>,
+  index: Int32,
+  animated: boolean,
+) => void;
+
+interface NativeCommands {
+  readonly scrollToItem: ScrollToItem;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['scrollToItem'],
+});
+
+export default codegenNativeComponent<WishlistProps>('MGWishlist', {
+  interfaceOnly: true,
+});

package/src/Specs/NativeWishlistManager.ts

@@ -0,0 +1,7 @@
+import { TurboModuleRegistry, TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  install(): boolean;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('WishlistManager');

package/src/TemplateContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+export const TemplateContext = createContext<{
+  templateType: string;
+  renderChildren?: boolean;
+} | null>(null);
+
+export function useTemplateContext() {
+  const context = useContext(TemplateContext);
+  if (!context) {
+    throw Error('Must be rendered inside a Template component.');
+  }
+  return context;
+}

package/src/TemplateItem.ts

@@ -0,0 +1,15 @@
+export type TemplateItem = {
+  [key: string]: TemplateItem | undefined;
+} & {
+  key: string;
+  type: string;
+  getByWishId: (id: string) => TemplateItem | undefined;
+  addProps: (props: any) => void;
+  setCallback: (
+    eventName: string,
+    callback: (nativeEvent: any) => void,
+  ) => void;
+  describe: () => string;
+  setChildren: (children: TemplateItem[]) => void;
+  getTag: () => number;
+};

package/src/TemplateValue.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useMemo } from 'react';
+import { getUIInflatorRegistry } from './InflatorRepository';
+import { generateId } from './Utils';
+import { createRunInWishlistFn } from './WishlistJsRuntime';
+
+export type TemplateValueMapper<ItemT, ValueT> = (
+  item: ItemT,
+  rootValue: any,
+) => ValueT;
+
+// Object cloned by reanimated are feezed so we store mutation state in a
+// side map.
+export type TemplateValueUIState = {
+  current: any;
+  dirty: boolean;
+};
+
+export type TemplateValue<ValueT> = {
+  value: () => ValueT;
+};
+
+export type TemplateValueInternal<ValueT> = TemplateValue<ValueT> & {
+  __isTemplateValue: boolean;
+  __remove: () => void;
+};
+
+export function createTemplateValue<ValueT>(
+  mapper: TemplateValueMapper<any, ValueT>,
+): TemplateValueInternal<ValueT> {
+  const id = generateId();
+
+  function getOrCreateUIState() {
+    'worklet';
+
+    const registry = getUIInflatorRegistry();
+    let state = registry.getTemplateValueState(id);
+    if (!state) {
+      state = {
+        dirty: true,
+        current: undefined,
+      };
+      registry.setTemplateValueState(id, state);
+    }
+
+    return state;
+  }
+
+  function value() {
+    'worklet';
+
+    const registry = getUIInflatorRegistry();
+    const state = getOrCreateUIState();
+    if (state.dirty) {
+      state.current = mapper(
+        registry.getCurrentValue(),
+        registry.getCurrentRootValue(),
+      );
+      state.dirty = false;
+    }
+
+    return state.current;
+  }
+
+  function remove() {
+    createRunInWishlistFn(() => {
+      'worklet';
+
+      getUIInflatorRegistry().deleteTemplateValueState(id);
+    });
+  }
+
+  return {
+    __isTemplateValue: true,
+    __remove: remove,
+    value,
+  };
+}
+
+export function isTemplateValue(
+  value: unknown,
+): value is TemplateValueInternal<any> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    (value as any).__isTemplateValue === true
+  );
+}
+
+export function useTemplateValue<ItemT, ValueT>(
+  mapper: TemplateValueMapper<ItemT, ValueT>,
+): TemplateValue<ValueT> {
+  const value = useMemo(() => {
+    return createTemplateValue(mapper);
+  }, [mapper]);
+
+  useEffect(() => {
+    return () => value.__remove();
+  }, [value]);
+
+  return value;
+}

package/src/Utils.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+
+let idGenerator = 0;
+
+export function generateId(): string {
+  return `id_${idGenerator++}`;
+}
+
+export function useGeneratedId(): string {
+  const ref = useRef<string | null>(null);
+  if (ref.current === null) {
+    ref.current = generateId();
+  }
+  return ref.current;
+}