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

package/src/runtime/native/conditions/attributes.ts

@@ -1,52 +0,0 @@
-import type { AttributeQuery } from "../../../compiler";
-import type { Props } from "../../runtime.types";
-import type { RenderGuard } from "./guards";
-
-export function testAttributes(
-  queries: AttributeQuery[],
-  props: Props,
-  guards: RenderGuard[],
-) {
-  return queries.every((query) => testAttribute(query, props, guards));
-}
-
-function testAttribute(
-  [type, prop, operator, testValue]: AttributeQuery,
-  props: Props,
-  guards: RenderGuard[],
-) {
-  let value: unknown;
-
-  if (type === "a") {
-    value = props?.[prop];
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    value = props?.dataSet?.[prop];
-  }
-
-  guards.push([type, prop, value]);
-
-  if (!operator) {
-    return value !== undefined && value !== null && value !== false;
-  }
-
-  switch (operator) {
-    case "!":
-      return !value;
-    case "=":
-      return value == testValue;
-    case "~=":
-      return testValue && value?.toString().split(" ").includes(testValue);
-    case "|=":
-      return testValue && value?.toString().startsWith(testValue + "-");
-    case "^=":
-      return testValue && value?.toString().startsWith(testValue);
-    case "$=":
-      return testValue && value?.toString().endsWith(testValue);
-    case "*=":
-      return testValue && value?.toString().includes(testValue);
-    default:
-      operator satisfies never;
-      return false;
-  }
-}

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

@@ -1,162 +0,0 @@
-/* eslint-disable */
-import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
-
-import type {
-  ContainerQuery,
-  MediaCondition,
-  PseudoClassesQuery,
-  StyleDescriptor,
-} from "../../../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/runtime/native/conditions/index.ts

@@ -1,54 +0,0 @@
-import type { PseudoClassesQuery, StyleRule } from "../../../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/runtime/native/conditions/media-query.ts

@@ -1,98 +0,0 @@
-/* eslint-disable */
-import { I18nManager, PixelRatio, Platform } from "react-native";
-
-import type { MediaCondition } from "../../../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/runtime/native/react/rules.ts

@@ -1,336 +0,0 @@
-/* eslint-disable */
-import { StyleCollection } from "react-native-css/style-collection";
-
-import type { InlineVariable, StyleRule } from "../../../compiler";
-import { getDeepPath } from "../../utils";
-import { testRule } from "../conditions";
-import { DEFAULT_CONTAINER_NAME } from "../conditions/container-query";
-import type { RenderGuard } from "../conditions/guards";
-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);
-}