react-native-yoga-jsi 0.0.2

package/src/derived/styleHandler.ts

@@ -0,0 +1,433 @@
+import {
+  Align,
+  BoxSizing,
+  Direction,
+  Display,
+  Edge,
+  FlexDirection,
+  Gutter,
+  Justify,
+  Overflow,
+  PositionType,
+  Wrap,
+  type Node as YogaNode,
+} from '../coreTypes';
+
+export type AlignContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'stretch'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+export type AlignItems =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'stretch'
+  | 'baseline';
+
+export type JustifyContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+export type NodeStyle = {
+  alignContent?: AlignContent;
+  alignItems?: AlignItems;
+  alignSelf?: AlignItems;
+  aspectRatio?: number;
+  borderBottomWidth?: number;
+  borderEndWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderStartWidth?: number;
+  borderTopWidth?: number;
+  borderWidth?: number;
+  borderInlineWidth?: number;
+  borderBlockWidth?: number;
+  bottom?: number | `${number}%`;
+  boxSizing?: 'border-box' | 'content-box';
+  direction?: 'ltr' | 'rtl';
+  display?: 'none' | 'flex';
+  end?: number | `${number}%`;
+  flex?: number;
+  flexBasis?: number | 'auto' | `${number}%`;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  rowGap?: number;
+  gap?: number;
+  columnGap?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  height?: number | 'auto' | `${number}%`;
+  justifyContent?: JustifyContent;
+  left?: number | `${number}%`;
+  margin?: number | 'auto' | `${number}%`;
+  marginBottom?: number | 'auto' | `${number}%`;
+  marginEnd?: number | 'auto' | `${number}%`;
+  marginLeft?: number | 'auto' | `${number}%`;
+  marginRight?: number | 'auto' | `${number}%`;
+  marginStart?: number | 'auto' | `${number}%`;
+  marginTop?: number | 'auto' | `${number}%`;
+  marginInline?: number | 'auto' | `${number}%`;
+  marginBlock?: number | 'auto' | `${number}%`;
+  maxHeight?: number | `${number}%`;
+  maxWidth?: number | `${number}%`;
+  minHeight?: number | `${number}%`;
+  minWidth?: number | `${number}%`;
+  overflow?: 'visible' | 'hidden' | 'scroll';
+  padding?: number | `${number}%`;
+  paddingBottom?: number | `${number}%`;
+  paddingEnd?: number | `${number}%`;
+  paddingLeft?: number | `${number}%`;
+  paddingRight?: number | `${number}%`;
+  paddingStart?: number | `${number}%`;
+  paddingTop?: number | `${number}%`;
+  paddingInline?: number | `${number}%`;
+  paddingBlock?: number | `${number}%`;
+  position?: 'absolute' | 'relative' | 'static';
+  right?: number | `${number}%`;
+  start?: number | `${number}%`;
+  top?: number | `${number}%`;
+  insetInline?: number | `${number}%`;
+  insetBlock?: number | `${number}%`;
+  inset?: number | `${number}%`;
+  width?: number | 'auto' | `${number}%`;
+};
+
+export function applyStyle(node: YogaNode, style: NodeStyle = {}): void {
+  for (const key of Object.keys(style)) {
+    try {
+      switch (key) {
+        case 'alignContent':
+          node.setAlignContent(alignContent(style.alignContent));
+          break;
+        case 'alignItems':
+          node.setAlignItems(alignItems(style.alignItems));
+          break;
+        case 'alignSelf':
+          node.setAlignSelf(alignItems(style.alignSelf));
+          break;
+        case 'aspectRatio':
+          node.setAspectRatio(style.aspectRatio);
+          break;
+        case 'borderBottomWidth':
+          node.setBorder(Edge.Bottom, style.borderBottomWidth);
+          break;
+        case 'borderEndWidth':
+          node.setBorder(Edge.End, style.borderEndWidth);
+          break;
+        case 'borderLeftWidth':
+          node.setBorder(Edge.Left, style.borderLeftWidth);
+          break;
+        case 'borderRightWidth':
+          node.setBorder(Edge.Right, style.borderRightWidth);
+          break;
+        case 'borderStartWidth':
+          node.setBorder(Edge.Start, style.borderStartWidth);
+          break;
+        case 'borderTopWidth':
+          node.setBorder(Edge.Top, style.borderTopWidth);
+          break;
+        case 'borderWidth':
+          node.setBorder(Edge.All, style.borderWidth);
+          break;
+        case 'borderInlineWidth':
+          node.setBorder(Edge.Horizontal, style.borderInlineWidth);
+          break;
+        case 'borderBlockWidth':
+          node.setBorder(Edge.Vertical, style.borderBlockWidth);
+          break;
+        case 'bottom':
+          node.setPosition(Edge.Bottom, style.bottom);
+          break;
+        case 'boxSizing':
+          node.setBoxSizing(boxSizing(style.boxSizing));
+          break;
+        case 'direction':
+          node.setDirection(direction(style.direction));
+          break;
+        case 'display':
+          node.setDisplay(display(style.display));
+          break;
+        case 'end':
+          node.setPosition(Edge.End, style.end);
+          break;
+        case 'flex':
+          node.setFlex(style.flex);
+          break;
+        case 'flexBasis':
+          node.setFlexBasis(style.flexBasis);
+          break;
+        case 'flexDirection':
+          node.setFlexDirection(flexDirection(style.flexDirection));
+          break;
+        case 'rowGap':
+          node.setGap(Gutter.Row, style.rowGap);
+          break;
+        case 'gap':
+          node.setGap(Gutter.All, style.gap);
+          break;
+        case 'columnGap':
+          node.setGap(Gutter.Column, style.columnGap);
+          break;
+        case 'flexGrow':
+          node.setFlexGrow(style.flexGrow);
+          break;
+        case 'flexShrink':
+          node.setFlexShrink(style.flexShrink);
+          break;
+        case 'flexWrap':
+          node.setFlexWrap(flexWrap(style.flexWrap));
+          break;
+        case 'height':
+          node.setHeight(style.height);
+          break;
+        case 'justifyContent':
+          node.setJustifyContent(justifyContent(style.justifyContent));
+          break;
+        case 'left':
+          node.setPosition(Edge.Left, style.left);
+          break;
+        case 'margin':
+          node.setMargin(Edge.All, style.margin);
+          break;
+        case 'marginBottom':
+          node.setMargin(Edge.Bottom, style.marginBottom);
+          break;
+        case 'marginEnd':
+          node.setMargin(Edge.End, style.marginEnd);
+          break;
+        case 'marginLeft':
+          node.setMargin(Edge.Left, style.marginLeft);
+          break;
+        case 'marginRight':
+          node.setMargin(Edge.Right, style.marginRight);
+          break;
+        case 'marginStart':
+          node.setMargin(Edge.Start, style.marginStart);
+          break;
+        case 'marginTop':
+          node.setMargin(Edge.Top, style.marginTop);
+          break;
+        case 'marginInline':
+          node.setMargin(Edge.Horizontal, style.marginInline);
+          break;
+        case 'marginBlock':
+          node.setMargin(Edge.Vertical, style.marginBlock);
+          break;
+        case 'maxHeight':
+          node.setMaxHeight(style.maxHeight);
+          break;
+        case 'maxWidth':
+          node.setMaxWidth(style.maxWidth);
+          break;
+        case 'minHeight':
+          node.setMinHeight(style.minHeight);
+          break;
+        case 'minWidth':
+          node.setMinWidth(style.minWidth);
+          break;
+        case 'overflow':
+          node.setOverflow(overflow(style.overflow));
+          break;
+        case 'padding':
+          node.setPadding(Edge.All, style.padding);
+          break;
+        case 'paddingBottom':
+          node.setPadding(Edge.Bottom, style.paddingBottom);
+          break;
+        case 'paddingEnd':
+          node.setPadding(Edge.End, style.paddingEnd);
+          break;
+        case 'paddingLeft':
+          node.setPadding(Edge.Left, style.paddingLeft);
+          break;
+        case 'paddingRight':
+          node.setPadding(Edge.Right, style.paddingRight);
+          break;
+        case 'paddingStart':
+          node.setPadding(Edge.Start, style.paddingStart);
+          break;
+        case 'paddingTop':
+          node.setPadding(Edge.Top, style.paddingTop);
+          break;
+        case 'paddingInline':
+          node.setPadding(Edge.Horizontal, style.paddingInline);
+          break;
+        case 'paddingBlock':
+          node.setPadding(Edge.Vertical, style.paddingBlock);
+          break;
+        case 'position':
+          node.setPositionType(position(style.position));
+          break;
+        case 'right':
+          node.setPosition(Edge.Right, style.right);
+          break;
+        case 'start':
+          node.setPosition(Edge.Start, style.start);
+          break;
+        case 'top':
+          node.setPosition(Edge.Top, style.top);
+          break;
+        case 'insetInline':
+          node.setPosition(Edge.Horizontal, style.insetInline);
+          break;
+        case 'insetBlock':
+          node.setPosition(Edge.Vertical, style.insetBlock);
+          break;
+        case 'inset':
+          node.setPosition(Edge.All, style.inset);
+          break;
+        case 'width':
+          node.setWidth(style.width);
+          break;
+      }
+    } catch (e) {
+      // TODO: Handle this better
+      console.warn(`Failed to apply style "${key}" to node: ${e}`);
+    }
+  }
+}
+
+function alignContent(str?: AlignContent): Align {
+  switch (str) {
+    case 'flex-start':
+      return Align.FlexStart;
+    case 'flex-end':
+      return Align.FlexEnd;
+    case 'center':
+      return Align.Center;
+    case 'stretch':
+      return Align.Stretch;
+    case 'space-between':
+      return Align.SpaceBetween;
+    case 'space-around':
+      return Align.SpaceAround;
+    case 'space-evenly':
+      return Align.SpaceEvenly;
+  }
+  throw new Error(`"${str}" is not a valid value for alignContent`);
+}
+
+function alignItems(str?: AlignItems): Align {
+  switch (str) {
+    case 'flex-start':
+      return Align.FlexStart;
+    case 'flex-end':
+      return Align.FlexEnd;
+    case 'center':
+      return Align.Center;
+    case 'stretch':
+      return Align.Stretch;
+    case 'baseline':
+      return Align.Baseline;
+  }
+  throw new Error(`"${str}" is not a valid value for alignItems`);
+}
+
+function boxSizing(str?: 'border-box' | 'content-box'): BoxSizing {
+  switch (str) {
+    case 'border-box':
+      return BoxSizing.BorderBox;
+    case 'content-box':
+      return BoxSizing.ContentBox;
+  }
+  throw new Error(`"${str}" is not a valid value for boxSizing`);
+}
+
+function direction(str?: 'ltr' | 'rtl'): Direction {
+  switch (str) {
+    case 'ltr':
+      return Direction.LTR;
+    case 'rtl':
+      return Direction.RTL;
+  }
+  throw new Error(`"${str}" is not a valid value for direction`);
+}
+
+function display(str?: 'none' | 'flex'): Display {
+  switch (str) {
+    case 'none':
+      return Display.None;
+    case 'flex':
+      return Display.Flex;
+  }
+  throw new Error(`"${str}" is not a valid value for display`);
+}
+
+function flexDirection(
+  str?: 'row' | 'column' | 'row-reverse' | 'column-reverse',
+): FlexDirection {
+  switch (str) {
+    case 'row':
+      return FlexDirection.Row;
+    case 'column':
+      return FlexDirection.Column;
+    case 'row-reverse':
+      return FlexDirection.RowReverse;
+    case 'column-reverse':
+      return FlexDirection.ColumnReverse;
+  }
+  throw new Error(`"${str}" is not a valid value for flexDirection`);
+}
+
+function flexWrap(str?: 'wrap' | 'nowrap' | 'wrap-reverse'): Wrap {
+  switch (str) {
+    case 'wrap':
+      return Wrap.Wrap;
+    case 'nowrap':
+      return Wrap.NoWrap;
+    case 'wrap-reverse':
+      return Wrap.WrapReverse;
+  }
+  throw new Error(`"${str}" is not a valid value for flexWrap`);
+}
+
+function justifyContent(str?: JustifyContent): Justify {
+  switch (str) {
+    case 'flex-start':
+      return Justify.FlexStart;
+    case 'flex-end':
+      return Justify.FlexEnd;
+    case 'center':
+      return Justify.Center;
+    case 'space-between':
+      return Justify.SpaceBetween;
+    case 'space-around':
+      return Justify.SpaceAround;
+    case 'space-evenly':
+      return Justify.SpaceEvenly;
+  }
+  throw new Error(`"${str}" is not a valid value for justifyContent`);
+}
+
+function overflow(str?: 'visible' | 'hidden' | 'scroll'): Overflow {
+  switch (str) {
+    case 'visible':
+      return Overflow.Visible;
+    case 'hidden':
+      return Overflow.Hidden;
+    case 'scroll':
+      return Overflow.Scroll;
+  }
+  throw new Error(`"${str}" is not a valid value for overflow`);
+}
+
+function position(str?: 'absolute' | 'relative' | 'static'): PositionType {
+  switch (str) {
+    case 'absolute':
+      return PositionType.Absolute;
+    case 'relative':
+      return PositionType.Relative;
+    case 'static':
+      return PositionType.Static;
+  }
+  throw new Error(`"${str}" is not a valid value for position`);
+}

package/src/derived/useOnDepsChaneg.ts

@@ -0,0 +1,20 @@
+import { useMemo, useRef, type DependencyList } from 'react';
+
+// runs before useEffect & useLayoutEffect
+export function useOnDepsChange<T extends unknown[]>(
+  cb: ((...args: T) => void) | undefined,
+  deps: DependencyList,
+  ...args: T
+) {
+  const isOnMount = useRef(true);
+
+  useMemo(() => {
+    if (cb == undefined) return;
+
+    if (isOnMount.current) {
+      isOnMount.current = false;
+      return;
+    }
+    cb(...args);
+  }, deps);
+}

package/src/derived/useStyle.ts

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useRef, type DependencyList } from 'react';
+import { Direction, type Node } from '../coreTypes';
+import { generateStyledLayout, type NodeTree } from './utils';
+import { useOnDepsChange } from './useOnDepsChaneg';
+
+type GetNodeFn<T extends string> = (key: T) => Record<T, Node>[T];
+
+type Config<T extends string, U, V> = {
+  // size?: Size;
+  direction?: Direction;
+  onInit: (nodeKey: T, node: Node) => U;
+  onUpdate?: (nodeKey: T, node: Node, value: U) => void;
+  onUnmount?: (nodeKey: T, node: Node, value: U) => void;
+  onValueGet: (nodeKey: T, node: Node, value: U) => V;
+  onDepsChange?: (getNodeFn: GetNodeFn<T>) => void;
+};
+
+// type Size = {
+//   width: number;
+//   height: number;
+// };
+
+type RefRecord<T extends string, U> = Record<T, U>;
+
+export function useStyle<T extends string, U, V>(
+  layoutTree: NodeTree<T>,
+  config: Config<T, U, V>,
+  deps: DependencyList = [],
+) {
+  const initialValueStore = useRef<RefRecord<T, U>>({} as RefRecord<T, U>);
+
+  const [parsedLayout, getNodeStyle] = useMemo(() => {
+    const root = layoutTree.key;
+    const parsedLayout = generateStyledLayout(layoutTree);
+
+    const rootNode = parsedLayout.getNode(root);
+
+    rootNode.calculateLayout(undefined, undefined);
+    parsedLayout.forEach((node, key) => {
+      initialValueStore.current[key] = config.onInit(key, node);
+    });
+
+    if (config.onUpdate !== undefined) {
+      rootNode.setDirtiedFunc(() => {
+        rootNode.calculateLayout('auto', 'auto', config.direction);
+        parsedLayout.forEach((node, key) => {
+          config.onUpdate!(key, node, initialValueStore.current[key]);
+        });
+      });
+    }
+
+    const getNodeStyle = (key: T) => {
+      return config.onValueGet(
+        key,
+        parsedLayout.getNode(key),
+        initialValueStore.current[key],
+      );
+    };
+
+    return [parsedLayout, getNodeStyle] as const;
+  }, []);
+
+  const getNodeFn = (key: T) => parsedLayout.getNode(key);
+
+  useOnDepsChange(config.onDepsChange, deps, getNodeFn);
+
+  useEffect(() => {
+    return () => {
+      if (config.onUnmount !== undefined) {
+        parsedLayout.forEach((node, key) => {
+          config.onUnmount!(key, node, initialValueStore.current[key]);
+        });
+      }
+      parsedLayout.free();
+    };
+  }, []);
+
+  return [getNodeStyle, getNodeFn] as const;
+}

package/src/derived/utils.ts

@@ -0,0 +1,86 @@
+import type { Node } from '../coreTypes';
+import Yoga from '../index';
+import { applyStyle, type NodeStyle } from './styleHandler';
+
+export type NodeTree<T extends string> = {
+  key: T;
+  style?: NodeStyle;
+  children?: NodeTree<T>[];
+};
+
+export type NodeTreeKeys<T> = T extends NodeTree<infer K> ? K : never;
+
+export function createLayout<T extends string>(styles: NodeTree<T>) {
+  return styles;
+}
+
+class Layout<T extends string> {
+  layout: Record<T, Node>;
+  rootKey: T;
+
+  constructor(rootKey: T) {
+    const config = Yoga.Config.create();
+    config.setPointScaleFactor(0);
+    const root = Yoga.Node.create(config);
+    this.rootKey = rootKey;
+    this.layout = {
+      [rootKey]: root,
+    } as Record<T, Node>;
+  }
+
+  addNodeTo(parentKey: T, key: T, index: number) {
+    const parent = this.layout[parentKey];
+    const child = Yoga.Node.create();
+    parent.insertChild(child, index);
+    this.layout[key] = child;
+    return child;
+  }
+
+  getNode(key: T) {
+    return this.layout[key];
+  }
+
+  free() {
+    this.getNode(this.rootKey).freeRecursive();
+  }
+
+  forEach(cb: (node: Node, key: T) => void) {
+    for (const key in this.layout) {
+      cb(this.layout[key], key);
+    }
+  }
+}
+
+type TreeItem<T extends string> = NodeTree<T> | NodeTree<T>[];
+
+export function generateStyledLayout<T extends string>(layout: NodeTree<T>) {
+  const layoutTree = new Layout(layout.key);
+  console.log('applying to: ', layout.key);
+  applyStyle(layoutTree.layout[layout.key], layout.style);
+  (function _parse(
+    treeItem: TreeItem<T>,
+    index: number,
+    isArray: boolean,
+    parentKey: T | null,
+  ) {
+    if (isArray) {
+      (treeItem as NodeTree<T>[]).forEach((o, i) => {
+        _parse(o, i, false, parentKey);
+      });
+    } else {
+      treeItem = treeItem as NodeTree<T>;
+      if (parentKey !== null) {
+        const addedNode = layoutTree.addNodeTo(parentKey, treeItem.key, index);
+        console.log('applying to: ', treeItem.key);
+        applyStyle(addedNode, treeItem.style);
+      }
+      if (treeItem.children) {
+        _parse(treeItem.children, 0, true, treeItem.key);
+      }
+    }
+
+    return layoutTree;
+  })(layout, 0, false, null);
+
+  return layoutTree;
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+import { NativeModules } from 'react-native';
+import type { Yoga } from './coreTypes';
+// import * as derived from './derived';
+// import * as coreTypes from './coreTypes';
+
+(function () {
+  NativeModules.YogaJSI.install();
+})();
+
+//@ts-expect-error gotta fix it later
+const YogaModule: {
+  Yoga: Yoga;
+} = global;
+
+export default YogaModule.Yoga;
+export * from './derived';
+export * from './coreTypes';
+
+// module.exports = YogaModule.Yoga;
+// module.exports.default = YogaModule.Yoga;
+// module.exports.derived = derived;
+// module.exports.coreTypes = coreTypes;