react-native-css 0.0.0-nightly.008d479

package/src/native/react/useNativeCss.ts

@@ -0,0 +1,211 @@
+/* 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") {
+      const nativeStyleMapping = value.nativeStyleMapping as
+        | Record<string, string>
+        | undefined;
+
+      if (Array.isArray(value)) {
+        return { source: key, target: value, nativeStyleMapping };
+      }
+
+      if ("target" in value) {
+        if (value.target === false) {
+          return { source: key, target: false, nativeStyleMapping };
+        } else if (typeof value.target === "string") {
+          const target = value.target.split(".");
+
+          if (target.length === 1) {
+            return { source: key, target: target[0]!, nativeStyleMapping };
+          } else {
+            return { source: key, target, nativeStyleMapping };
+          }
+        } else if (Array.isArray(value.target)) {
+          return { source: key, target: value.target, nativeStyleMapping };
+        }
+      }
+    }
+
+    throw new Error(`styled(): Invalid mapping for ${key}: ${value}`);
+  });
+}

package/src/native/react/usePassthrough.ts

@@ -0,0 +1,51 @@
+/* eslint-disable */
+import { createElement, type ComponentType } from "react";
+
+import { INLINE_RULE_SYMBOL } from "./rules";
+import type { Config } from "./useNativeCss";
+
+const cache = new Map<string, Record<string, any>>();
+
+export function usePassthrough(
+  type: ComponentType<any>,
+  { ...props }: Record<string, any>,
+  configs: Config[],
+) {
+  for (const config of configs) {
+    let { source, target } = config;
+
+    const classNames = props[source];
+
+    let styles = cache.get(source);
+    if (styles === undefined) {
+      styles = { [INLINE_RULE_SYMBOL]: classNames };
+    }
+
+    delete props[source];
+
+    if (classNames === undefined || target === false) {
+      continue;
+    }
+
+    let targetProps = props;
+
+    if (Array.isArray(target)) {
+      for (let i = 0; i < target.length - 1; i++) {
+        const prop = target[i]!;
+        props[prop] ??= {};
+        targetProps = props[prop];
+      }
+      target = target[target.length - 1]!;
+    }
+
+    if (Array.isArray(targetProps[target])) {
+      targetProps[target] = [...targetProps[target], styles];
+    } else if (targetProps[target]) {
+      targetProps[target] = [targetProps[target], styles];
+    } else {
+      targetProps[target] = styles;
+    }
+  }
+
+  return createElement(type, props);
+}

package/src/native/react-native-css-metro-override.ts

@@ -0,0 +1,36 @@
+const canWarn = process.env.NODE_ENV !== "test";
+
+if (canWarn) {
+  throw new Error(`react-native-css has encountered a setup error. 
+
+┌───────┐
+│ Metro │ 
+└───────┘
+
+Either your metro.config.js is missing the 'withReactNativeCSS' wrapper OR
+the resolver.resolveRequest function of your config is being overridden, and not calling the parent resolver.
+
+When using 3rd party libraries, please use withReactNativeCSS as the innermost function when composing Metro configs.
+
+\`\`\`ts
+const config = getDefaultConfig(__dirname);
+module.exports = with3rdPartyPlugin(
+  withReactNativeCSS(config)
+)
+\`\`\`
+
+┌────────────┐
+│ NativeWind │ 
+└────────────┘
+
+If you are using NativeWind follow the Metro instructions above but use 'withNativeWind' instead of 'withReactNativeCSS'.
+
+┌────────────────┐
+│ Other bundlers │ 
+└────────────────┘
+
+If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
+`);
+}
+
+export {};

package/src/native/reactivity.ts

@@ -0,0 +1,248 @@
+/* eslint-disable */
+import { createContext } from "react";
+import {
+  Appearance,
+  Dimensions,
+  type ColorSchemeName,
+  type LayoutRectangle,
+} from "react-native";
+
+import type { StyleDescriptor } from "react-native-css/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.for("react-native-css.var");
+export type VariableContextValue = Record<string, StyleDescriptor> & {
+  [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/native/reanimated.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from "react";
+
+import { weakFamily } from "./reactivity";
+
+export const animatedComponentFamily = weakFamily(
+  (component: ComponentType) => {
+    if (
+      "displayName" in component &&
+      component.displayName?.startsWith("Animated.")
+    ) {
+      return component;
+    }
+
+    const createAnimatedComponent =
+      // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-member-access
+      require("react-native-reanimated").createAnimatedComponent as (
+        component: ComponentType,
+      ) => ComponentType;
+
+    return createAnimatedComponent(component);
+  },
+);