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

package/src/runtime/native/react/useNativeCss.ts

@@ -1,203 +0,0 @@
-/* eslint-disable */
-import {
-  createElement,
-  Fragment,
-  useContext,
-  useEffect,
-  useState,
-  type ComponentType,
-} from "react";
-import { Pressable, View } from "react-native";
-
-import type { StyledConfiguration } from "../../runtime.types";
-import { testGuards, type RenderGuard } from "../conditions/guards";
-import {
-  cleanupEffect,
-  ContainerContext,
-  VariableContext,
-  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/runtime/native/reactivity.ts

@@ -1,251 +0,0 @@
-/* eslint-disable */
-import { createContext } from "react";
-import {
-  Appearance,
-  Dimensions,
-  type ColorSchemeName,
-  type LayoutRectangle,
-} from "react-native";
-
-import type { StyleDescriptor } from "../../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("react-native-css.var");
-export type VariableContextValue = Record<string, StyleDescriptor> & {
-  [VAR_SYMBOL]: true;
-};
-export const VariableContext = createContext<VariableContextValue>({
-  [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/runtime/native/styles/calculate-props.ts

@@ -1,197 +0,0 @@
-/* eslint-disable */
-import type {
-  InlineVariable,
-  StyleDeclaration,
-  StyleRule,
-} from "../../../compiler";
-import { applyValue, getDeepPath, Specificity as S } from "../../utils";
-import type { RenderGuard } from "../conditions/guards";
-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,
-) {
-  for (const declaration of declarations) {
-    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;
-
-      if (Array.isArray(propPath)) {
-        const [first, ...rest] = propPath;
-
-        if (!first) {
-          continue;
-        }
-
-        const final = rest.pop();
-
-        if (final) {
-          if (first !== "*") {
-            topLevelTarget[first] ??= {};
-            target = topLevelTarget[first];
-          }
-
-          for (prop of rest) {
-            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);
-    }
-  }
-}