react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/src/native/conditions/index.ts

@@ -0,0 +1,55 @@
+import type { PseudoClassesQuery, StyleRule } from "react-native-css/compiler";
+
+import type { Props } from "../../runtime.types";
+import {
+  activeFamily,
+  focusFamily,
+  hoverFamily,
+  type ContainerContextValue,
+  type Getter,
+} from "../reactivity";
+import { testAttributes } from "./attributes";
+import { testContainerQueries } from "./container-query";
+import type { RenderGuard } from "./guards";
+import { testMediaQuery } from "./media-query";
+
+export function testRule(
+  rule: StyleRule,
+  get: Getter,
+  props: Props,
+  guards: RenderGuard[],
+  containerContext: ContainerContextValue,
+) {
+  if (rule.p && !pseudoClasses(rule.p, get)) {
+    return false;
+  }
+  if (rule.m && !testMediaQuery(rule.m, get)) {
+    return false;
+  }
+  if (rule.aq && !testAttributes(rule.aq, props, guards)) {
+    return false;
+  }
+  if (
+    rule.cq &&
+    !testContainerQueries(rule.cq, containerContext, guards, get)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
+  // IMPORTANT: active needs: to be first. Modifies a global value
+  // that we use to determine if the component should be a pressable
+  if (query.a && !get(activeFamily(get))) {
+    return false;
+  }
+  if (query.h && !get(hoverFamily(get))) {
+    return false;
+  }
+  if (query.f && !get(focusFamily(get))) {
+    return false;
+  }
+  return true;
+}

package/src/native/conditions/media-query.ts

@@ -0,0 +1,99 @@
+/* eslint-disable */
+import { I18nManager, PixelRatio, Platform } from "react-native";
+
+import type { MediaCondition } from "react-native-css/compiler";
+
+import { colorScheme, vh, vw, type Getter } from "../reactivity";
+
+export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
+  return mediaQueries.every((query) => test(query, get));
+}
+
+function test(mediaQuery: MediaCondition, get: Getter): Boolean {
+  switch (mediaQuery[0]) {
+    case "[]":
+    case "!!":
+      return false;
+    case "!":
+      return !test(mediaQuery[1], get);
+    case "&":
+      return mediaQuery[1].every((query) => {
+        return test(query, get);
+      });
+    case "|":
+      return mediaQuery[1].some((query) => {
+        return test(query, get);
+      });
+    case ">":
+    case ">=":
+    case "<":
+    case "<=":
+    case "=": {
+      return testComparison(mediaQuery, get);
+    }
+  }
+}
+
+function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
+  const value = mediaQuery[2];
+
+  switch (mediaQuery[1]) {
+    case "dir":
+      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
+    case "hover":
+      return true;
+    case "platform":
+      return value === "native" || value === Platform.OS;
+    case "prefers-color-scheme": {
+      return value === get(colorScheme);
+    }
+    case "display-mode":
+      return value === "native" || Platform.OS === value;
+    case "min-width":
+      return typeof value === "number" && get(vw) >= value;
+    case "max-width":
+      return typeof value === "number" && get(vw) <= value;
+    case "min-height":
+      return typeof value === "number" && get(vh) >= value;
+    case "max-height":
+      return typeof value === "number" && get(vh) <= value;
+    case "orientation":
+      return value === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
+  }
+
+  if (typeof value !== "number") {
+    return false;
+  }
+
+  let left: number | undefined;
+  const right = value;
+
+  switch (mediaQuery[1]) {
+    case "width":
+      left = get(vw);
+      break;
+    case "height":
+      left = get(vh);
+      break;
+    case "resolution":
+      left = PixelRatio.get();
+      break;
+    default:
+      return false;
+  }
+
+  switch (mediaQuery[0]) {
+    case "=":
+      return left === right;
+    case ">":
+      return left > right;
+    case ">=":
+      return left >= right;
+    case "<":
+      return left < right;
+    case "<=":
+      return left <= right;
+    default:
+      return false;
+  }
+}

package/src/native/index.ts

@@ -0,0 +1,3 @@
+export * from "./api";
+export type * from "../runtime.types";
+export * from "./react-native-css-metro-override";

package/src/native/react/rules.ts

@@ -0,0 +1,336 @@
+/* eslint-disable */
+import type { InlineVariable, StyleRule } from "react-native-css/compiler";
+import { StyleCollection } from "react-native-css/native-internal";
+
+import { testRule } from "../conditions";
+import { DEFAULT_CONTAINER_NAME } from "../conditions/container-query";
+import type { RenderGuard } from "../conditions/guards";
+import { getDeepPath } from "../objects";
+import {
+  activeFamily,
+  containerLayoutFamily,
+  focusFamily,
+  hoverFamily,
+  VAR_SYMBOL,
+  weakFamily,
+  type ContainerContextValue,
+  type VariableContextValue,
+} from "../reactivity";
+import { stylesFamily } from "../styles";
+import type { ComponentState, Config } from "./useNativeCss";
+
+export const INLINE_RULE_SYMBOL = Symbol("react-native-css.inlineRule");
+
+export function updateRules(
+  state: ComponentState,
+  // Either update the state with new props or use the current props
+  currentProps = state.currentProps,
+  inheritedVariables = state.inheritedVariables,
+  inheritedContainers = state.inheritedContainers,
+  forceUpdate = false,
+  isRerender = true,
+): ComponentState {
+  const guards: RenderGuard[] = [];
+  const rules = new Set<StyleRule | InlineVariable | VariableContextValue>();
+  if (forceUpdate) {
+    state = { ...state, guards, currentProps };
+  }
+
+  let usesVariables = false;
+
+  let variables: VariableContextValue | undefined;
+  let containers: ContainerContextValue | undefined;
+  const inlineVariables = new Set<InlineVariable>();
+
+  let animated = false;
+  let pressable = false;
+
+  for (const config of state.configs) {
+    const source = currentProps?.[config.source];
+    const shallowTarget = Array.isArray(config.target)
+      ? config.target[0]
+      : config.target;
+
+    guards.push(["a", config.source, source]);
+    if (shallowTarget) {
+      guards.push(["a", shallowTarget, currentProps?.[shallowTarget]]);
+    }
+
+    const styleRuleSet = [];
+
+    if (typeof source === "string") {
+      const classNames = source.split(/\s+/);
+      for (const className of classNames) {
+        styleRuleSet.push(
+          ...StyleCollection.styles(className).get(state.ruleEffect),
+        );
+      }
+    }
+
+    const target = getDeepPath(currentProps, config.target);
+    if (target) {
+      if (Array.isArray(target)) {
+        for (const item of target) {
+          // undefined or falsy is allowed in the style array
+          if (!item) {
+            continue;
+          }
+
+          if (VAR_SYMBOL in item) {
+            inlineVariables.add(item);
+          } else if (
+            INLINE_RULE_SYMBOL in item &&
+            typeof item[INLINE_RULE_SYMBOL] === "string"
+          ) {
+            pushInlineRule(state, item, styleRuleSet);
+          }
+        }
+      } else if (
+        config.target &&
+        typeof target === "object" &&
+        target &&
+        VAR_SYMBOL in target
+      ) {
+        inlineVariables.add(target);
+      } else if (
+        INLINE_RULE_SYMBOL in target &&
+        typeof target[INLINE_RULE_SYMBOL] === "string"
+      ) {
+        pushInlineRule(state, target, styleRuleSet);
+      }
+    }
+
+    for (let rule of styleRuleSet) {
+      usesVariables ||= Boolean(rule.dv);
+
+      // We do this even if the rule doesn't match so we can maintain a consistent render tree
+      // We we need to inject React context
+      if (rule.a) animated = true;
+
+      if (rule.v) {
+        variables ??= inheritedVariables;
+      }
+
+      if (rule.c) {
+        containers ??= inheritedContainers;
+        activeFamily(state.ruleEffectGetter);
+      }
+
+      if (
+        !testRule(
+          rule,
+          state.ruleEffectGetter,
+          currentProps,
+          guards,
+          inheritedContainers,
+        )
+      ) {
+        continue;
+      }
+
+      if (rule.v) {
+        if (variables === inheritedVariables) {
+          variables = { ...inheritedVariables };
+        }
+
+        for (const v of rule.v) {
+          variables![v[0]] = v[1];
+        }
+      }
+
+      if (rule.c) {
+        // We're going to set a value, so we need to create a new object
+        if (containers === inheritedContainers) {
+          containers = {
+            ...inheritedContainers,
+            // This container becomes the default container
+            [DEFAULT_CONTAINER_NAME]: state.ruleEffectGetter,
+          };
+        }
+
+        // This this component as the named container
+        for (const name of rule.c) {
+          containers![name] = state.ruleEffectGetter;
+        }
+
+        // Enable hover/active/focus/layout handlers
+        hoverFamily(state.ruleEffectGetter);
+        activeFamily(state.ruleEffectGetter);
+        focusFamily(state.ruleEffectGetter);
+        containerLayoutFamily(state.ruleEffectGetter);
+      }
+
+      if (rule.a) {
+        animated = true;
+      }
+
+      // Rules normally target style. If the target is not style, we need to create a new rule.
+      if (config.target !== "style") {
+        rule = getRuleVariation(rule)(config);
+      }
+
+      // Add the rule to the set and update the hash
+      rules.add(rule);
+    }
+
+    if (process.env.NODE_ENV !== "production") {
+      if (isRerender) {
+        const pressable = activeFamily.has(state.ruleEffectGetter);
+
+        if (Boolean(variables) !== Boolean(state.variables)) {
+          console.log(
+            `ReactNativeCss: className '${source}' added or removed a variable after the initial render. This causes the components state to be reset and all children be re-mounted. Use the className 'will-change-variable' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
+          );
+        } else if (Boolean(containers) !== Boolean(state.containers)) {
+          console.log(
+            `ReactNativeCss: className '${source}' added or removed a container after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-container' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
+          );
+        } else if (animated !== state.animated) {
+          console.log(
+            `ReactNativeCss: className '${source}' added or removed an animation after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-animation' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
+          );
+        } else if (pressable !== state.pressable) {
+          console.log(
+            `ReactNativeCss: className '${source}' added or removed a pressable state after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-pressable' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
+          );
+        }
+      }
+    }
+  }
+
+  pressable = activeFamily.has(state.ruleEffectGetter);
+
+  if (!rules.size && !state.stylesObs && !inlineVariables.size) {
+    return {
+      ...state,
+      currentProps,
+      guards,
+      animated,
+      pressable,
+      variables,
+      containers,
+    };
+  }
+
+  if (usesVariables || variables) {
+    rules.add(inheritedVariables);
+
+    if (inlineVariables.size) {
+      variables = Object.assign(
+        {},
+        variables,
+        inheritedVariables,
+        ...Array.from(inlineVariables),
+        { [VAR_SYMBOL]: true },
+      );
+    }
+
+    for (const variable of inlineVariables) {
+      rules.add(variable);
+    }
+  }
+
+  // Generate a StyleObservable for this unique set of rules / variables
+  const stylesObs = stylesFamily(generateStateHash(state, rules), rules);
+
+  // Get the guards without subscribing to the observable
+  // We will subscribe within the render using the StyleEffect
+  guards.push(...stylesObs.get().guards);
+
+  // If these are the same styles with no inline variables, we can skip the update
+  if (state.stylesObs === stylesObs && !inlineVariables.size) {
+    return state;
+  }
+
+  // Remove this component from the old observer
+  state.stylesObs?.cleanup(state.ruleEffect);
+
+  return {
+    ...state,
+    currentProps,
+    stylesObs,
+    variables,
+    containers,
+    guards,
+    animated,
+    pressable,
+  };
+}
+
+/**
+ * Create variations of a style rule based on the config.
+ * Cache for reference equality.
+ */
+const getRuleVariation = weakFamily((rule: StyleRule) => {
+  return weakFamily((config: Config): StyleRule => {
+    return { ...rule, target: config.target };
+  });
+});
+
+function pushInlineRule(
+  state: ComponentState,
+  item: any,
+  styleRuleSet: StyleRule[],
+) {
+  for (const className of item[INLINE_RULE_SYMBOL].split(/\s+/)) {
+    let inlineRuleSet = StyleCollection.styles(className).get(state.ruleEffect);
+
+    for (let rule of inlineRuleSet) {
+      styleRuleSet.push(rule);
+    }
+  }
+}
+
+/**
+ * Get a unique number for a weak key.
+ */
+let hashKeyCount = 0;
+const hashKeyFamily = weakFamily(() => hashKeyCount++);
+
+export function generateStateHash(
+  state: ComponentState,
+  iterableKeys?: Iterable<WeakKey>,
+  variables?: WeakKey,
+  inlineVars?: Set<WeakKey>,
+): string {
+  if (!iterableKeys) {
+    return "";
+  }
+
+  const keys = [state.configs, ...iterableKeys];
+
+  if (variables) {
+    keys.push(variables);
+  }
+
+  if (inlineVars) {
+    keys.push(...inlineVars);
+  }
+
+  return generateHash(keys);
+}
+
+/**
+ * Quickly generate a unique hash for a set of numbers.
+ * This is not a cryptographic hash, but it is fast and has a low chance of collision.
+ */
+const MOD = 9007199254740871; // Largest prime within safe integer range 2^53
+const PRIME = 31; // A smaller prime for mixing
+export function generateHash(keys: WeakKey[]): string {
+  let hash = 0;
+  let product = 1; // Used for mixing to enhance uniqueness
+
+  for (const key of keys) {
+    if (!key) continue; // Skip if key is undefined
+
+    const num = hashKeyFamily(key);
+    hash = (hash ^ num) % MOD; // XOR and modular arithmetic
+    product = (product * (num + PRIME)) % MOD; // Mix with multiplication
+  }
+
+  // Combine hash and product to form the final hash
+  hash = (hash + product) % MOD;
+
+  // Return the hash as a string
+  return hash.toString(36);
+}

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}`);
+  });
+}