react-native-css 0.0.0-nightly.03a4e35

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,4 @@
+export * from "./metro";
+
+export * from "./api";
+export type * from "../runtime.types";

package/src/native/metro.ts

@@ -0,0 +1,2 @@
+// This file will be overwritten by Metro
+export {};

package/src/native/objects.ts

@@ -0,0 +1,109 @@
+/* eslint-disable */
+import { ShortHandSymbol } from "../native/styles/constants";
+import { transformKeys } from "../native/styles/defaults";
+
+export function getDeepPath(source: any, paths: string | string[] | false) {
+  if (!source) {
+    return;
+  }
+
+  if (paths === false) {
+    return undefined;
+  }
+
+  if (Array.isArray(paths)) {
+    let target = source;
+
+    for (const path of paths) {
+      if (typeof target !== "object" || !target || !(path in target)) {
+        return undefined;
+      }
+
+      target = target[path];
+    }
+
+    return target;
+  } else if (transformKeys.has(paths)) {
+    return Array.isArray(source?.transform)
+      ? source.transform.find((t: any) => t[paths] !== undefined)
+      : source.transform;
+  } else {
+    return source?.[paths];
+  }
+}
+
+export function applyShorthand(value: any) {
+  if (value === undefined) {
+    return;
+  }
+
+  const target: Record<string, unknown> = { [ShortHandSymbol]: true };
+
+  const values = value as [unknown, string][];
+
+  for (const [value, prop] of values) {
+    target[prop] = value;
+  }
+
+  return target;
+}
+
+export function applyValue(
+  target: Record<string, any>,
+  prop: string,
+  value: any,
+) {
+  // This is confusing.
+  // An undefined value means "don't set anything" (something failed while parsing)
+  // While a null value means "remove this value", which in React Native means "set to undefined"
+  if (value === undefined) {
+    return;
+  } else if (value === null) {
+    value = undefined;
+  }
+
+  if (transformKeys.has(prop)) {
+    if (!Array.isArray(target.transform)) {
+      target.transform = [];
+    }
+
+    const transformArray: Record<string, unknown>[] = target.transform;
+
+    // Remove any existing values
+    target.transform = transformArray.filter((t) => !(prop in t));
+
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
+    } else {
+      target.transform.push(value);
+    }
+    return;
+  } else if (typeof value === "object" && value && ShortHandSymbol in value) {
+    delete value[ShortHandSymbol];
+    Object.assign(target, value);
+    return;
+  }
+
+  target[prop] = value;
+}
+
+export function setDeepPath(
+  target: Record<string, any>,
+  paths: string | string[] | readonly string[],
+  value: any,
+) {
+  if (typeof paths === "string") {
+    target[paths] = value;
+    return target;
+  }
+
+  for (let i = 0; i < paths.length - 1; i++) {
+    const path = paths[i]!;
+    target[path] ??= {};
+    target = target[path];
+  }
+
+  target[paths[paths.length - 1]!] = value;
+
+  return target;
+}

package/src/native/react/interaction.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+import type { LayoutChangeEvent } from "react-native";
+
+import {
+  activeFamily,
+  containerLayoutFamily,
+  focusFamily,
+  hoverFamily,
+  type Getter as WeakKey,
+} from "../reactivity";
+
+const mainCache = new WeakMap<
+  WeakKey,
+  WeakMap<Function, (event: any) => void>
+>();
+
+type Handler = (event: unknown) => void;
+
+export type InteractionType =
+  | "onLayout"
+  | "onHoverIn"
+  | "onHoverOut"
+  | "onPress"
+  | "onPressIn"
+  | "onPressOut"
+  | "onFocus"
+  | "onBlur";
+
+const defaultHandlers: Record<InteractionType, Handler> = {
+  onLayout: () => {},
+  onHoverIn: () => {},
+  onHoverOut: () => {},
+  onPress: () => {},
+  onPressIn: () => {},
+  onPressOut: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+};
+
+export function getInteractionHandler(
+  weakKey: WeakKey,
+  type: InteractionType,
+  handler = defaultHandlers[type],
+) {
+  let cache = mainCache.get(weakKey);
+  if (!cache) {
+    cache = new WeakMap();
+    mainCache.set(weakKey, cache);
+  }
+
+  let cached = cache.get(handler);
+  if (!cached) {
+    cached = (event: any) => {
+      if (handler) {
+        handler(event);
+      }
+
+      switch (type) {
+        case "onLayout":
+          containerLayoutFamily(weakKey).set(
+            (event as LayoutChangeEvent).nativeEvent.layout,
+          );
+          break;
+        case "onHoverIn":
+          hoverFamily(weakKey).set(true);
+          break;
+        case "onHoverOut":
+          hoverFamily(weakKey).set(false);
+          break;
+        case "onPress":
+          break;
+        case "onPressIn":
+          activeFamily(weakKey).set(true);
+          break;
+        case "onPressOut":
+          activeFamily(weakKey).set(false);
+          break;
+        case "onFocus":
+          focusFamily(weakKey).set(true);
+          break;
+        case "onBlur":
+          focusFamily(weakKey).set(false);
+          break;
+      }
+    };
+    cache.set(handler, cached);
+  }
+
+  return cached;
+}

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