react-native-css 3.0.0-preview.1 → 3.0.0-preview.3

package/src/native/react/useNativeCss.ts

@@ -0,0 +1,204 @@
+/* eslint-disable */
+import {
+  createElement,
+  Fragment,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentType,
+} from "react";
+import { Pressable, View } from "react-native";
+
+import { VariableContext } from "react-native-css/native-internal";
+
+import type { StyledConfiguration } from "../../runtime.types";
+import { testGuards, type RenderGuard } from "../conditions/guards";
+import {
+  cleanupEffect,
+  ContainerContext,
+  type ContainerContextValue,
+  type Effect,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
+import { animatedComponentFamily } from "../reanimated";
+import { getStyledProps, stylesFamily } from "../styles";
+import { updateRules } from "./rules";
+
+export type Config = {
+  source: string;
+  target: string[] | string | false;
+  nativeStyleMapping?: Record<string, string>;
+};
+
+export type ComponentState = {
+  /** The source/target for classNames */
+  configs: Config[];
+
+  /** Reactive tracking */
+  ruleEffect: Effect;
+  ruleEffectGetter: Getter;
+  styleEffect: Effect;
+
+  /** The components props */
+  currentProps?: Record<string, any> | undefined | null;
+
+  /** An observable of the normal/important props */
+  stylesObs?: ReturnType<typeof stylesFamily>;
+  guards?: RenderGuard[];
+
+  variables?: VariableContextValue;
+  containers?: ContainerContextValue;
+
+  inheritedVariables: VariableContextValue;
+  inheritedContainers: ContainerContextValue;
+
+  animated?: boolean;
+  pressable?: undefined | boolean;
+};
+
+/**
+ * useNativeCss is the native implementation of the useCssElement hook.
+ */
+export function useNativeCss(
+  type: ComponentType<any>,
+  originalProps: Record<string, any> | undefined | null,
+  configs: Config[] = [{ source: "className", target: "style" }],
+) {
+  const inheritedVariables = useContext(VariableContext);
+  const inheritedContainers = useContext(ContainerContext);
+
+  const [state, setState] = useState((): ComponentState => {
+    // Both effects share the same observers to improve memory usage
+    const observers = new Set<Effect>();
+
+    /**
+     * When fired, this effect will force the rules to be re-evaluated.
+     * This will cause a re-render if there are different rules
+     *
+     * Use this when a rule condition changes, e.g FastRefresh or media queries
+     */
+    const ruleEffect: Effect = {
+      observers,
+      run: () => setState((state) => updateRules(state)),
+    };
+
+    /**
+     * When fired, this effect will force a re-render of the component.
+     * This will cause a re-fetch of the styles.
+     *
+     * Use this when a value changes, e.g vm units or light / dark mode
+     */
+    const styleEffect: Effect = {
+      observers,
+      run: () => setState((state) => ({ ...state })),
+    };
+
+    return updateRules(
+      {
+        ruleEffect,
+        ruleEffectGetter: (observable) => observable.get(ruleEffect),
+        styleEffect,
+        configs,
+        inheritedContainers,
+        inheritedVariables,
+        pressable: type === View ? false : undefined,
+      },
+      originalProps,
+      inheritedVariables,
+      inheritedContainers,
+      false,
+      false,
+    );
+  });
+
+  // Both effects share the same observers, so we only need to cleanup one of them
+  useEffect(() => () => cleanupEffect(state.ruleEffect), [state.ruleEffect]);
+
+  // Check if our derived state has changed (e.g the className prop)
+  if (
+    testGuards(state, originalProps, inheritedVariables, inheritedContainers)
+  ) {
+    /**
+     * Get the new state
+     * Note, this might result in the same styles, but the guards will now be different
+     */
+    setState(
+      updateRules(
+        state,
+        originalProps,
+        inheritedVariables,
+        inheritedContainers,
+        true,
+      ),
+    );
+
+    // We can bail on rendering as the result of this render will be discarded
+    return createElement(Fragment);
+  }
+
+  let props = getStyledProps(state, originalProps);
+
+  if (type === View && props?.onPress) {
+    type = Pressable;
+  }
+
+  if (state.animated) {
+    type = animatedComponentFamily(type);
+  }
+
+  if (state.variables) {
+    props = {
+      value: state.variables,
+      children: createElement(type, props),
+    };
+    type = VariableContext.Provider;
+  }
+
+  if (state.containers) {
+    props = {
+      value: state.containers,
+      children: createElement(type, props),
+    };
+    type = ContainerContext.Provider;
+  }
+
+  return createElement(type, props);
+}
+
+/**
+ * Convert the styled() mapping to a config array
+ */
+export function mappingToConfig(mapping: StyledConfiguration<any>) {
+  return Object.entries(mapping).flatMap(([key, value]): Config => {
+    if (value === true) {
+      return { source: key, target: key };
+    } else if (value === false) {
+      return { source: key, target: false };
+    } else if (typeof value === "string") {
+      return { source: key, target: value.split(".") };
+    } else if (typeof value === "object") {
+      if (Array.isArray(value)) {
+        return { source: key, target: value };
+      }
+
+      if ("target" in value) {
+        if (value.target === false) {
+          return { source: key, target: false };
+        } else if (typeof value.target === "string") {
+          const target = value.target.split(".");
+
+          if (target.length === 1) {
+            return { source: key, target: target[0]! };
+          } else {
+            return { source: key, target };
+          }
+        } else if (Array.isArray(value.target)) {
+          return { source: key, target: value.target };
+        }
+      }
+    }
+
+    throw new Error(`styled(): Invalid mapping for ${key}: ${value}`);
+  });
+}

package/src/native/reactivity.ts

@@ -0,0 +1,248 @@
+/* eslint-disable */
+import { createContext } from "react";
+import {
+  Appearance,
+  Dimensions,
+  type ColorSchemeName,
+  type LayoutRectangle,
+} from "react-native";
+
+import type { StyleDescriptor } from "react-native-css/compiler";
+
+export type Effect = {
+  observers: Set<Effect>;
+  run(): void;
+};
+
+export type Observable<Value, Arg = Value> = {
+  observers: Set<Effect>;
+  get: (effect?: Effect) => Value;
+  set: (arg: Arg) => void;
+  run: () => void;
+};
+type Read<Value, Arg> = (get: Getter, arg?: Arg) => Value;
+export type Getter = <Value>(observable: Observable<Value, any>) => Value;
+
+export const observableBatch: {
+  current?: Set<Effect>;
+} = {};
+
+export function observable<Value, Arg = Value>(
+  init: Value | Read<Value, Arg>,
+  equality: (value1: Value, value2: Value) => boolean = Object.is,
+) {
+  let value: Value;
+  let isStatic = typeof init !== "function";
+  let didInit: boolean | undefined;
+  let lastArg: Arg | undefined;
+
+  if (typeof init !== "function") {
+    value = init;
+    didInit = true;
+  }
+
+  const observers = new Set<Effect>();
+  const effect: Effect = {
+    observers,
+    run: () => {
+      if (!isStatic) {
+        const nextValue = (init as Read<Value, Arg>)(getter, lastArg);
+        if (equality(value, nextValue)) {
+          return;
+        }
+        value = nextValue;
+      }
+
+      notify();
+    },
+  };
+
+  const getter: Getter = (observable) => observable.get(effect);
+
+  function get(effect?: Effect) {
+    if (effect) {
+      observers.add(effect);
+    }
+    if (!didInit) {
+      value = (init as Read<Value, Arg>)(getter, undefined);
+    }
+
+    return value;
+  }
+
+  function set(arg: Arg) {
+    if (isStatic) {
+      if (equality(value, arg as unknown as Value)) {
+        return;
+      }
+      value = arg as unknown as Value;
+    } else {
+      const nextValue = (init as Read<Value, Arg>)(getter, arg);
+
+      didInit = true;
+      lastArg = arg;
+
+      if (equality(value, nextValue)) {
+        return;
+      }
+      value = nextValue;
+    }
+
+    notify();
+
+    return obs;
+  }
+
+  function notify() {
+    Array.from(observers).forEach((observer) => {
+      if (observableBatch.current) {
+        observableBatch.current.add(observer);
+      } else {
+        observer.run();
+      }
+    });
+  }
+
+  const obs: Observable<Value, Arg> = {
+    observers,
+    get,
+    set,
+    run: effect.run,
+  };
+
+  return obs;
+}
+
+export function cleanupEffect(effect: Effect) {
+  if (!effect) return;
+  for (const dep of effect.observers) {
+    dep.observers.delete(effect);
+  }
+  effect.observers.clear();
+}
+
+/** Family Helpers ************************************************************/
+
+export function family<Key, Result = Key, Args extends any = void>(
+  fn: (key: Key, args: Args) => Result,
+) {
+  const map = new Map<Key, Result>();
+  return Object.assign(
+    (key: Key, args: Args) => {
+      let value = map.get(key);
+      if (!value) {
+        value = fn(key, args);
+        map.set(key, value);
+      }
+      return value;
+    },
+    {
+      delete(key: Key) {
+        return map.delete(key);
+      },
+      clear() {
+        return map.clear();
+      },
+    },
+  );
+}
+
+type WeakFamilyFn<Key, Args = undefined, Result = Key> = ((
+  key: Key,
+  args: Args,
+) => Result) & {
+  has(key: Key): boolean;
+};
+
+export function weakFamily<Key extends WeakKey, Result = Key>(
+  fn: (key: Key) => Result,
+): WeakFamilyFn<Key, void, Result>;
+export function weakFamily<Key extends WeakKey, Args = undefined, Result = Key>(
+  fn: (key: Key, args: Args) => Result,
+): WeakFamilyFn<Key, Args, Result>;
+export function weakFamily<Key extends WeakKey, Args = undefined, Result = Key>(
+  fn: (key: Key, args: Args) => Result,
+): WeakFamilyFn<Key, Args, Result> {
+  const map = new WeakMap<Key, Result>();
+  return Object.assign(
+    (key: Key, args: Args) => {
+      let value = map.get(key);
+      if (!value) {
+        value = fn(key, args);
+        map.set(key, value);
+      }
+      return value;
+    },
+    {
+      has: (key: Key) => map.has(key),
+    },
+  );
+}
+
+/********************************* Variables **********************************/
+
+export const VAR_SYMBOL = Symbol.for("react-native-css.var");
+export type VariableContextValue = Record<string, StyleDescriptor> & {
+  [VAR_SYMBOL]: true;
+};
+
+/** Pseudo Classes ************************************************************/
+
+export const hoverFamily = weakFamily(() => observable(false));
+export const activeFamily = weakFamily(() => observable<boolean>(false));
+export const focusFamily = weakFamily(() => observable<boolean>(false));
+
+/** Dimensions ****************************************************************/
+
+export const dimensions = observable(Dimensions.get("window"));
+export const vw = observable<number>(
+  (read, value) => value ?? read(dimensions)?.width,
+);
+export const vh = observable<number>(
+  (read, value) => value ?? read(dimensions)?.height,
+);
+
+Dimensions.addEventListener("change", ({ window }) => {
+  observableBatch.current = new Set();
+  vw.set(window.width);
+  vh.set(window.height);
+
+  for (const effect of observableBatch.current) {
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+});
+
+/** Color Scheme **************************************************************/
+
+export const colorScheme = observable<ColorSchemeName>(
+  Appearance.getColorScheme(),
+);
+Appearance.addChangeListener((event) => colorScheme.set(event.colorScheme));
+
+/** Containers ****************************************************************/
+
+export type ContainerContextValue = Record<string, WeakKey>;
+export const ContainerContext = createContext<ContainerContextValue>({});
+
+export const containerLayoutFamily = weakFamily(() => {
+  return observable<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+});
+
+export const containerWidthFamily = weakFamily((key) => {
+  return observable((read) => {
+    return read(containerLayoutFamily(key))?.width || 0;
+  });
+});
+
+export const containerHeightFamily = weakFamily((key) => {
+  return observable((read) => {
+    return read(containerLayoutFamily(key))?.width || 0;
+  });
+});

package/src/native/styles/calculate-props.ts

@@ -0,0 +1,217 @@
+/* eslint-disable */
+import type {
+  InlineVariable,
+  StyleDeclaration,
+  StyleRule,
+} from "react-native-css/compiler";
+import { Specificity as S } from "react-native-css/utilities";
+
+import type { RenderGuard } from "../conditions/guards";
+import { applyValue, getDeepPath } from "../objects";
+import {
+  VAR_SYMBOL,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
+import { transformKeys } from "./defaults";
+import { resolveValue } from "./resolve";
+
+export function calculateProps(
+  get: Getter,
+  rules: (StyleRule | InlineVariable | VariableContextValue)[],
+  guards: RenderGuard[] = [],
+  inheritedVariables: VariableContextValue = {
+    [VAR_SYMBOL]: true,
+  },
+  inlineVariables: InlineVariable = {
+    [VAR_SYMBOL]: "inline",
+  },
+) {
+  let normal: Record<string, any> | undefined;
+  let important: Record<string, any> | undefined;
+
+  const delayedStyles: (() => void)[] = [];
+  const transformStyles: (() => void)[] = [];
+
+  for (const rule of rules) {
+    if (VAR_SYMBOL in rule) {
+      if (typeof rule[VAR_SYMBOL] === "string") {
+        Object.assign(inlineVariables, rule);
+      } else {
+        Object.assign(inheritedVariables, rule);
+      }
+      continue;
+    }
+
+    if (rule.v) {
+      for (const variable of rule.v) {
+        inlineVariables[variable[0]] = variable[1];
+      }
+    }
+
+    if (rule.d) {
+      let topLevelTarget = rule.s?.[S.Important]
+        ? (important ??= {})
+        : (normal ??= {});
+      let target = topLevelTarget;
+
+      const ruleTarget = rule.target || "style";
+
+      if (typeof ruleTarget === "string") {
+        target = target[ruleTarget] ??= {};
+      } else if (ruleTarget) {
+        for (const path of ruleTarget) {
+          target = target[path] ??= {};
+        }
+      }
+
+      applyDeclarations(
+        get,
+        rule.d,
+        inlineVariables,
+        inheritedVariables,
+        delayedStyles,
+        transformStyles,
+        guards,
+        target,
+        topLevelTarget,
+      );
+    }
+  }
+
+  for (const delayedStyle of delayedStyles) {
+    delayedStyle();
+  }
+
+  for (const transformStyle of transformStyles) {
+    transformStyle();
+  }
+
+  return {
+    normal,
+    guards,
+    important,
+  };
+}
+
+export function applyDeclarations(
+  get: Getter,
+  declarations: StyleDeclaration[],
+  inlineVariables: InlineVariable,
+  inheritedVariables: VariableContextValue,
+  delayedStyles: (() => void)[] = [],
+  transformStyles: (() => void)[] = [],
+  guards: RenderGuard[] = [],
+  target: Record<string, any> = {},
+  topLevelTarget = target,
+) {
+  const originalTarget = target;
+
+  for (const declaration of declarations) {
+    target = originalTarget;
+
+    if (!Array.isArray(declaration)) {
+      // Static styles
+      Object.assign(target, declaration);
+    } else {
+      // Dynamic styles
+      let value: any = declaration[0];
+      let propPath = declaration[1];
+      let prop: string | number;
+
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = propPath;
+
+        if (!first) {
+          continue;
+        }
+
+        const final = rest.pop();
+
+        if (final) {
+          if (first !== "*") {
+            topLevelTarget[first] ??= {};
+            target = topLevelTarget[first];
+          }
+
+          let previousProp: string | number = first;
+          let previousTarget = topLevelTarget;
+
+          for (prop of rest) {
+            if (prop.startsWith("[") && prop.endsWith("]")) {
+              prop = Number(prop.slice(1, -1));
+
+              if (!Array.isArray(previousTarget[previousProp])) {
+                previousTarget[previousProp] = [];
+                target = previousTarget[previousProp];
+              }
+            }
+            previousTarget = target;
+            previousProp = prop;
+
+            target[prop] ??= {};
+            target = target[prop];
+          }
+
+          prop = final;
+        } else {
+          target = topLevelTarget;
+          prop = first;
+        }
+      } else {
+        prop = propPath;
+      }
+
+      const shouldDelay = declaration[2];
+
+      if (shouldDelay || transformKeys.has(prop)) {
+        /**
+         * We need to delay the resolution of this value until after all
+         * styles have been calculated. But another style might override
+         * this value. So we set a placeholder value and only override
+         * if the placeholder is preserved
+         *
+         * This also ensures the props exist, so setValue will properly
+         * mutate the props object and not create a new one
+         */
+        const originalValue = value;
+        // This needs to be a object with the [prop] so we can discover in transform arrays
+        value = { [prop]: true };
+
+        if (transformKeys.has(prop)) {
+          transformStyles.push(() => {
+            value = resolveValue(originalValue, get, {
+              inlineVariables,
+              inheritedVariables,
+              renderGuards: guards,
+              calculateProps,
+            });
+            applyValue(target, prop, value);
+          });
+        } else {
+          delayedStyles.push(() => {
+            if (getDeepPath(target, prop) === value) {
+              delete target[prop];
+              value = resolveValue(originalValue, get, {
+                inlineVariables,
+                inheritedVariables,
+                renderGuards: guards,
+                calculateProps,
+              });
+              applyValue(target, prop, value);
+            }
+          });
+        }
+      } else {
+        value = resolveValue(value, get, {
+          inlineVariables,
+          inheritedVariables,
+          renderGuards: guards,
+          calculateProps,
+        });
+      }
+
+      applyValue(target, prop, value);
+    }
+  }
+}