@leonsilicon/react-native-wishlist 0.0.0

package/src/Colors.ts

@@ -0,0 +1,474 @@
+/* eslint-disable no-bitwise */
+
+import { Platform } from 'react-native';
+
+const IS_ANDROID = Platform.OS === 'android';
+
+interface ColorsUIModule {
+  colorProps: string[];
+  processColor(color: unknown): number | null | undefined;
+}
+
+function createColorsUIModule(): ColorsUIModule {
+  'worklet';
+
+  // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
+  const colorProps = [
+    'backgroundColor',
+    'borderBottomColor',
+    'borderColor',
+    'borderLeftColor',
+    'borderRightColor',
+    'borderTopColor',
+    'borderStartColor',
+    'borderEndColor',
+    'color',
+    'shadowColor',
+    'textDecorationColor',
+    'tintColor',
+    'textShadowColor',
+    'overlayColor',
+  ];
+
+  /**
+   * Copied from:
+   * https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/Colors.ts
+   * react-native/Libraries/StyleSheet/normalizeColor.js
+   * react-native/Libraries/StyleSheet/processColor.js
+   * https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts
+   */
+
+  const NUMBER = '[-+]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)';
+  const PERCENTAGE = NUMBER + '%';
+
+  function call(...args: unknown[]): string {
+    return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
+  }
+
+  const cachedMatchers: Matchers = {};
+  type Matchers = {
+    rgb?: RegExp;
+    rgba?: RegExp;
+    hsl?: RegExp;
+    hsla?: RegExp;
+    hex3?: RegExp;
+    hex4?: RegExp;
+    hex5?: RegExp;
+    hex6?: RegExp;
+    hex8?: RegExp;
+  };
+  function getMatchers(): Matchers {
+    if (cachedMatchers.rgb === undefined) {
+      cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
+      cachedMatchers.rgba = new RegExp(
+        'rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER),
+      );
+      cachedMatchers.hsl = new RegExp(
+        'hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE),
+      );
+      cachedMatchers.hsla = new RegExp(
+        'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER),
+      );
+      cachedMatchers.hex3 =
+        /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+      cachedMatchers.hex4 =
+        /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+      cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+      cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    }
+    return cachedMatchers;
+  }
+  // cachedMatchers is lazy loaded and it is frozen when worklet is being created,
+  // it is possible to call getMatchers() when the object is frozen, then cachedMatchers
+  // has no assigned regexes
+  getMatchers();
+
+  function hue2rgb(p: number, q: number, t: number): number {
+    if (t < 0) {
+      t += 1;
+    }
+    if (t > 1) {
+      t -= 1;
+    }
+    if (t < 1 / 6) {
+      return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+      return q;
+    }
+    if (t < 2 / 3) {
+      return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+  }
+
+  function hslToRgb(h: number, s: number, l: number): number {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const r = hue2rgb(p, q, h + 1 / 3);
+    const g = hue2rgb(p, q, h);
+    const b = hue2rgb(p, q, h - 1 / 3);
+
+    return (
+      (Math.round(r * 255) << 24) |
+      (Math.round(g * 255) << 16) |
+      (Math.round(b * 255) << 8)
+    );
+  }
+
+  function parse255(str: string): number {
+    const int = Number.parseInt(str, 10);
+    if (int < 0) {
+      return 0;
+    }
+    if (int > 255) {
+      return 255;
+    }
+    return int;
+  }
+
+  function parse360(str: string): number {
+    const int = Number.parseFloat(str);
+    return (((int % 360) + 360) % 360) / 360;
+  }
+
+  function parse1(str: string): number {
+    const num = Number.parseFloat(str);
+    if (num < 0) {
+      return 0;
+    }
+    if (num > 1) {
+      return 255;
+    }
+    return Math.round(num * 255);
+  }
+
+  function parsePercentage(str: string): number {
+    // parseFloat conveniently ignores the final %
+    const int = Number.parseFloat(str);
+    if (int < 0) {
+      return 0;
+    }
+    if (int > 100) {
+      return 1;
+    }
+    return int / 100;
+  }
+
+  const names: any = {
+    transparent: 0x00000000,
+
+    // http://www.w3.org/TR/css3-color/#svg-color
+    aliceblue: 0xf0f8ffff,
+    antiquewhite: 0xfaebd7ff,
+    aqua: 0x00ffffff,
+    aquamarine: 0x7fffd4ff,
+    azure: 0xf0ffffff,
+    beige: 0xf5f5dcff,
+    bisque: 0xffe4c4ff,
+    black: 0x000000ff,
+    blanchedalmond: 0xffebcdff,
+    blue: 0x0000ffff,
+    blueviolet: 0x8a2be2ff,
+    brown: 0xa52a2aff,
+    burlywood: 0xdeb887ff,
+    burntsienna: 0xea7e5dff,
+    cadetblue: 0x5f9ea0ff,
+    chartreuse: 0x7fff00ff,
+    chocolate: 0xd2691eff,
+    coral: 0xff7f50ff,
+    cornflowerblue: 0x6495edff,
+    cornsilk: 0xfff8dcff,
+    crimson: 0xdc143cff,
+    cyan: 0x00ffffff,
+    darkblue: 0x00008bff,
+    darkcyan: 0x008b8bff,
+    darkgoldenrod: 0xb8860bff,
+    darkgray: 0xa9a9a9ff,
+    darkgreen: 0x006400ff,
+    darkgrey: 0xa9a9a9ff,
+    darkkhaki: 0xbdb76bff,
+    darkmagenta: 0x8b008bff,
+    darkolivegreen: 0x556b2fff,
+    darkorange: 0xff8c00ff,
+    darkorchid: 0x9932ccff,
+    darkred: 0x8b0000ff,
+    darksalmon: 0xe9967aff,
+    darkseagreen: 0x8fbc8fff,
+    darkslateblue: 0x483d8bff,
+    darkslategray: 0x2f4f4fff,
+    darkslategrey: 0x2f4f4fff,
+    darkturquoise: 0x00ced1ff,
+    darkviolet: 0x9400d3ff,
+    deeppink: 0xff1493ff,
+    deepskyblue: 0x00bfffff,
+    dimgray: 0x696969ff,
+    dimgrey: 0x696969ff,
+    dodgerblue: 0x1e90ffff,
+    firebrick: 0xb22222ff,
+    floralwhite: 0xfffaf0ff,
+    forestgreen: 0x228b22ff,
+    fuchsia: 0xff00ffff,
+    gainsboro: 0xdcdcdcff,
+    ghostwhite: 0xf8f8ffff,
+    gold: 0xffd700ff,
+    goldenrod: 0xdaa520ff,
+    gray: 0x808080ff,
+    green: 0x008000ff,
+    greenyellow: 0xadff2fff,
+    grey: 0x808080ff,
+    honeydew: 0xf0fff0ff,
+    hotpink: 0xff69b4ff,
+    indianred: 0xcd5c5cff,
+    indigo: 0x4b0082ff,
+    ivory: 0xfffff0ff,
+    khaki: 0xf0e68cff,
+    lavender: 0xe6e6faff,
+    lavenderblush: 0xfff0f5ff,
+    lawngreen: 0x7cfc00ff,
+    lemonchiffon: 0xfffacdff,
+    lightblue: 0xadd8e6ff,
+    lightcoral: 0xf08080ff,
+    lightcyan: 0xe0ffffff,
+    lightgoldenrodyellow: 0xfafad2ff,
+    lightgray: 0xd3d3d3ff,
+    lightgreen: 0x90ee90ff,
+    lightgrey: 0xd3d3d3ff,
+    lightpink: 0xffb6c1ff,
+    lightsalmon: 0xffa07aff,
+    lightseagreen: 0x20b2aaff,
+    lightskyblue: 0x87cefaff,
+    lightslategray: 0x778899ff,
+    lightslategrey: 0x778899ff,
+    lightsteelblue: 0xb0c4deff,
+    lightyellow: 0xffffe0ff,
+    lime: 0x00ff00ff,
+    limegreen: 0x32cd32ff,
+    linen: 0xfaf0e6ff,
+    magenta: 0xff00ffff,
+    maroon: 0x800000ff,
+    mediumaquamarine: 0x66cdaaff,
+    mediumblue: 0x0000cdff,
+    mediumorchid: 0xba55d3ff,
+    mediumpurple: 0x9370dbff,
+    mediumseagreen: 0x3cb371ff,
+    mediumslateblue: 0x7b68eeff,
+    mediumspringgreen: 0x00fa9aff,
+    mediumturquoise: 0x48d1ccff,
+    mediumvioletred: 0xc71585ff,
+    midnightblue: 0x191970ff,
+    mintcream: 0xf5fffaff,
+    mistyrose: 0xffe4e1ff,
+    moccasin: 0xffe4b5ff,
+    navajowhite: 0xffdeadff,
+    navy: 0x000080ff,
+    oldlace: 0xfdf5e6ff,
+    olive: 0x808000ff,
+    olivedrab: 0x6b8e23ff,
+    orange: 0xffa500ff,
+    orangered: 0xff4500ff,
+    orchid: 0xda70d6ff,
+    palegoldenrod: 0xeee8aaff,
+    palegreen: 0x98fb98ff,
+    paleturquoise: 0xafeeeeff,
+    palevioletred: 0xdb7093ff,
+    papayawhip: 0xffefd5ff,
+    peachpuff: 0xffdab9ff,
+    peru: 0xcd853fff,
+    pink: 0xffc0cbff,
+    plum: 0xdda0ddff,
+    powderblue: 0xb0e0e6ff,
+    purple: 0x800080ff,
+    rebeccapurple: 0x663399ff,
+    red: 0xff0000ff,
+    rosybrown: 0xbc8f8fff,
+    royalblue: 0x4169e1ff,
+    saddlebrown: 0x8b4513ff,
+    salmon: 0xfa8072ff,
+    sandybrown: 0xf4a460ff,
+    seagreen: 0x2e8b57ff,
+    seashell: 0xfff5eeff,
+    sienna: 0xa0522dff,
+    silver: 0xc0c0c0ff,
+    skyblue: 0x87ceebff,
+    slateblue: 0x6a5acdff,
+    slategray: 0x708090ff,
+    slategrey: 0x708090ff,
+    snow: 0xfffafaff,
+    springgreen: 0x00ff7fff,
+    steelblue: 0x4682b4ff,
+    tan: 0xd2b48cff,
+    teal: 0x008080ff,
+    thistle: 0xd8bfd8ff,
+    tomato: 0xff6347ff,
+    turquoise: 0x40e0d0ff,
+    violet: 0xee82eeff,
+    wheat: 0xf5deb3ff,
+    white: 0xffffffff,
+    whitesmoke: 0xf5f5f5ff,
+    yellow: 0xffff00ff,
+    yellowgreen: 0x9acd32ff,
+  };
+
+  function normalizeColor(color: unknown): number | null {
+    if (typeof color === 'number') {
+      if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
+        return color;
+      }
+      return null;
+    }
+
+    if (typeof color !== 'string') {
+      return null;
+    }
+
+    const matchers = getMatchers();
+
+    let match: RegExpExecArray | null | undefined;
+
+    // Ordered based on occurrences on Facebook codebase
+    if ((match = matchers?.hex6?.exec(color))) {
+      return Number.parseInt(match[1] + 'ff', 16) >>> 0;
+    }
+
+    if (names[color] !== undefined) {
+      return names[color];
+    }
+
+    if ((match = matchers?.rgb?.exec(color))) {
+      return (
+        // b
+        ((parse255(match[1]) << 24) | // r
+          (parse255(match[2]) << 16) | // g
+          (parse255(match[3]) << 8) |
+          0x000000ff) >>> // a
+        0
+      );
+    }
+
+    if ((match = matchers?.rgba?.exec(color))) {
+      return (
+        // b
+        ((parse255(match[1]) << 24) | // r
+          (parse255(match[2]) << 16) | // g
+          (parse255(match[3]) << 8) |
+          parse1(match[4])) >>> // a
+        0
+      );
+    }
+
+    if ((match = matchers?.hex3?.exec(color))) {
+      return (
+        Number.parseInt(
+          match[1] +
+            match[1] + // r
+            match[2] +
+            match[2] + // g
+            match[3] +
+            match[3] + // b
+            'ff', // a
+          16,
+        ) >>> 0
+      );
+    }
+
+    // https://drafts.csswg.org/css-color-4/#hex-notation
+    if ((match = matchers?.hex8?.exec(color))) {
+      return Number.parseInt(match[1], 16) >>> 0;
+    }
+
+    if ((match = matchers?.hex4?.exec(color))) {
+      return (
+        Number.parseInt(
+          match[1] +
+            match[1] + // r
+            match[2] +
+            match[2] + // g
+            match[3] +
+            match[3] + // b
+            match[4] +
+            match[4], // a
+          16,
+        ) >>> 0
+      );
+    }
+
+    if ((match = matchers?.hsl?.exec(color))) {
+      return (
+        (hslToRgb(
+          parse360(match[1]), // h
+          parsePercentage(match[2]), // s
+          parsePercentage(match[3]), // l
+        ) |
+          0x000000ff) >>> // a
+        0
+      );
+    }
+
+    if ((match = matchers?.hsla?.exec(color))) {
+      return (
+        (hslToRgb(
+          parse360(match[1]), // h
+          parsePercentage(match[2]), // s
+          parsePercentage(match[3]), // l
+        ) |
+          parse1(match[4])) >>> // a
+        0
+      );
+    }
+
+    return null;
+  }
+
+  function processColorInitially(color: unknown): number | null | undefined {
+    if (color === null || color === undefined || typeof color === 'number') {
+      return color;
+    }
+
+    let normalizedColor = normalizeColor(color);
+
+    if (normalizedColor === null || normalizedColor === undefined) {
+      return undefined;
+    }
+
+    if (typeof normalizedColor !== 'number') {
+      return null;
+    }
+
+    normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
+    return normalizedColor;
+  }
+
+  function processColor(color: unknown): number | null | undefined {
+    let normalizedColor = processColorInitially(color);
+    if (normalizedColor === null || normalizedColor === undefined) {
+      return undefined;
+    }
+
+    if (typeof normalizedColor !== 'number') {
+      return null;
+    }
+
+    if (IS_ANDROID) {
+      // Android use 32 bit *signed* integer to represent the color
+      // We utilize the fact that bitwise operations in JS also operates on
+      // signed 32 bit integers, so that we can use those to convert from
+      // *unsigned* to *signed* 32bit int that way.
+      normalizedColor = normalizedColor | 0x0;
+    }
+
+    return normalizedColor;
+  }
+
+  return { processColor, colorProps };
+}
+
+export function getColorsUIModule(): ColorsUIModule {
+  'worklet';
+
+  if (!global.__wishlistColors) {
+    global.__wishlistColors = createColorsUIModule();
+  }
+
+  return global.__wishlistColors;
+}

package/src/ComponentPool.ts

@@ -0,0 +1,33 @@
+import { TemplateItem } from './TemplateItem';
+
+export type NodeType = 'View' | 'Text' | 'Paragraph' | 'RawText';
+
+export type NativeComponentPool = {
+  getComponent: (id: string) => TemplateItem | undefined;
+};
+
+export type ComponentPool = NativeComponentPool & {
+  createNode(type: NodeType): TemplateItem;
+};
+
+export function wrapComponentPool(pool: NativeComponentPool): ComponentPool {
+  'worklet';
+
+  return {
+    getComponent: pool.getComponent,
+    createNode(type) {
+      switch (type) {
+        case 'Paragraph':
+          return pool.getComponent('__paragraphComponent')!.Paragraph!;
+        case 'Text':
+          return pool.getComponent('__textComponent')!.Paragraph!.Text!;
+        case 'RawText':
+          return pool.getComponent('__paragraphComponent')!.Paragraph!.RawText!;
+        case 'View':
+          return pool.getComponent('__viewComponent')!;
+        default:
+          throw new Error(`Unknown node type ${type}`);
+      }
+    },
+  };
+}

package/src/Components/ForEach.tsx

@@ -0,0 +1,22 @@
+import { renderTemplate } from '../renderTemplate';
+import { createTemplateComponent } from '../createTemplateComponent';
+import { ForEachBase } from './ForEachBase';
+
+export const ForEach = createTemplateComponent(ForEachBase, {
+  addProps: (item, props, inflatorId, pool, rootValue) => {
+    'worklet';
+
+    const subItems: unknown[] = props.items;
+    const items = subItems.map((subItem) => {
+      return renderTemplate(
+        props.template,
+        subItem,
+        rootValue,
+        inflatorId,
+        pool,
+      );
+    });
+
+    item.setChildren(items);
+  },
+});

package/src/Components/ForEachBase.tsx

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+
+// This needs to be split to avoid circular dependency.
+
+export const ForEachBase = forwardRef<any, any>((props, ref) => {
+  return <View {...props} ref={ref} />;
+});

package/src/Components/IF.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+
+const IFTemplateComponent = createTemplateComponent(View, {
+  addProps: (item, props) => {
+    'worklet';
+
+    if (props.condition) {
+      item.addProps({ display: 'flex' });
+    } else {
+      item.addProps({ display: 'none' });
+    }
+  },
+});
+
+// TODO(terry): Fix IF props type
+export function IF(props: any) {
+  return <IFTemplateComponent {...props} />;
+}

package/src/Components/Pressable.tsx

@@ -0,0 +1,111 @@
+import React, { forwardRef } from 'react';
+import { NativeModules, View, ViewProps } from 'react-native';
+import { createTemplateComponent } from '../createTemplateComponent';
+import { useTemplateCallback } from '../EventHandler';
+import { getUIInflatorRegistry } from '../InflatorRepository';
+import { createRunInJsFn } from '../WishlistJsRuntime';
+
+// TODO(janic): Figure out why those cannot be imported directly from RNGH in the example app.
+const ActionType = {
+  REANIMATED_WORKLET: 1,
+  NATIVE_ANIMATED_EVENT: 2,
+  JS_FUNCTION_OLD_API: 3,
+  JS_FUNCTION_NEW_API: 4,
+  DIRECT_EVENT: 5,
+} as const;
+
+type ActionTypeT = (typeof ActionType)[keyof typeof ActionType];
+
+type RNGestureHandlerModuleProps = {
+  handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
+  handleClearJSResponder: () => void;
+  createGestureHandler: (
+    handlerName: string,
+    handlerTag: number,
+    config: Readonly<Record<string, unknown>>,
+  ) => void;
+  attachGestureHandler: (
+    handlerTag: number,
+    newView: number,
+    actionType: ActionTypeT,
+  ) => void;
+  updateGestureHandler: (
+    handlerTag: number,
+    newConfig: Readonly<Record<string, unknown>>,
+  ) => void;
+  dropGestureHandler: (handlerTag: number) => void;
+  install: () => void;
+  flushOperations: () => void;
+};
+
+let _handlerTag = 1000;
+
+export function getNextHandlerTag(): number {
+  return _handlerTag++;
+}
+
+const RNGestureHandlerModule: RNGestureHandlerModuleProps =
+  NativeModules.RNGestureHandlerModule;
+
+export const State = {
+  UNDETERMINED: 0,
+  FAILED: 1,
+  BEGAN: 2,
+  CANCELLED: 3,
+  ACTIVE: 4,
+  END: 5,
+} as const;
+
+type PressableProps = ViewProps & {
+  onPress?: ((item: any, rootItem: any) => void) | null;
+};
+
+const attachGestureHandler = createRunInJsFn((tag: number) => {
+  // TODO: Do we need to detach handlers?
+  const handlerTag = getNextHandlerTag();
+  RNGestureHandlerModule.createGestureHandler(
+    'TapGestureHandler',
+    handlerTag,
+    {},
+  );
+  RNGestureHandlerModule.attachGestureHandler(
+    handlerTag,
+    tag,
+    ActionType.DIRECT_EVENT,
+  );
+  RNGestureHandlerModule.flushOperations();
+});
+
+const PressableView = createTemplateComponent(View, {
+  addProps: (item, props) => {
+    'worklet';
+
+    const tag = item.getTag();
+    item.addProps(props);
+
+    getUIInflatorRegistry().addPushChildrenCallback(() => {
+      attachGestureHandler(tag);
+    });
+  },
+});
+
+export const Pressable = forwardRef<any, PressableProps>(
+  ({ onPress, ...others }, ref) => {
+    const onGestureEvent = useTemplateCallback((ev, item, rootItem) => {
+      'worklet';
+
+      if (ev.state === State.ACTIVE) {
+        onPress?.(item, rootItem);
+      }
+    }, 'onGestureHandlerStateChange');
+
+    return (
+      <PressableView
+        {...others}
+        // @ts-expect-error
+        onGestureEvent={onGestureEvent}
+        ref={ref}
+      />
+    );
+  },
+);