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

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

@@ -0,0 +1,162 @@
+/* eslint-disable */
+import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
+import type {
+  ContainerQuery,
+  MediaCondition,
+  PseudoClassesQuery,
+  StyleDescriptor,
+} from "react-native-css/compiler";
+
+import {
+  activeFamily,
+  containerHeightFamily,
+  containerWidthFamily,
+  focusFamily,
+  hoverFamily,
+  type ContainerContextValue,
+  type Getter,
+} from "../reactivity";
+// import { testAttributes } from "./attributes";
+import type { RenderGuard } from "./guards";
+
+export const DEFAULT_CONTAINER_NAME = "c:___default___";
+
+export function testContainerQueries(
+  queries: ContainerQuery[],
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  get: Getter,
+) {
+  return queries.every((query) => {
+    return testContainerQuery(query, inheritedContainers, guards, get);
+  });
+}
+
+export function testContainerQuery(
+  query: ContainerQuery,
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  get: Getter,
+): boolean {
+  const name = query.n ?? DEFAULT_CONTAINER_NAME;
+  const container = inheritedContainers[name]!;
+
+  guards.push(["c", name, container]);
+
+  if (!container) {
+    return false;
+  }
+
+  // if (query.a && !testAttributes(query.a, container.props, guards)) {
+  //   return false;
+  // }
+
+  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
+    return false;
+  }
+
+  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
+    return false;
+  }
+
+  return true;
+}
+
+function testContainerPseudoCondition(
+  query: PseudoClassesQuery,
+  containerKey: WeakKey,
+  get: Getter,
+): boolean {
+  if (query.h && !get(hoverFamily(containerKey))) {
+    return false;
+  }
+  if (query.a && !get(activeFamily(containerKey))) {
+    return false;
+  }
+  if (query.f && !get(focusFamily(containerKey))) {
+    return false;
+  }
+  return true;
+}
+
+function testContainerMediaCondition(
+  condition: MediaCondition,
+  containerKey: WeakKey,
+  get: Getter,
+): boolean {
+  switch (condition[0]) {
+    case "!":
+      return !testContainerMediaCondition(condition[1], containerKey, get);
+    case "&":
+      return condition[1].every((query) => {
+        return testContainerMediaCondition(query, containerKey, get);
+      });
+    case "|":
+      return condition[1].some((query) => {
+        return testContainerMediaCondition(query, containerKey, get);
+      });
+    case "!!":
+      return false;
+    case "[]":
+      return false;
+    case ">":
+    case ">=":
+    case "<":
+    case "<=":
+    case "=": {
+      const left = getContainerFeatureValue(condition[1], containerKey, get);
+      const right = condition[2];
+
+      if (condition[0] === "=") {
+        return left === right;
+      }
+
+      if (typeof left !== "number" || typeof right !== "number") {
+        return false;
+      }
+
+      switch (condition[0]) {
+        case ">":
+          return left > right;
+        case ">=":
+          return left > right;
+        case "<":
+          return left > right;
+        case "<=":
+          return left > right;
+        default:
+          condition[0] satisfies never;
+          return false;
+      }
+    }
+    default:
+      condition satisfies never;
+      return false;
+  }
+}
+
+function getContainerFeatureValue(
+  name: MediaFeatureNameFor_ContainerSizeFeatureId,
+  containerKey: WeakKey,
+  get: Getter,
+): StyleDescriptor {
+  switch (name) {
+    case "width":
+      return get(containerWidthFamily(containerKey));
+    case "height":
+      return get(containerHeightFamily(containerKey));
+    case "aspect-ratio": {
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
+      return width / height;
+    }
+    case "orientation":
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
+      return width > height ? "landscape" : "portrait";
+    case "inline-size":
+    case "block-size":
+    default:
+      return;
+  }
+}

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