react-native-css 2.1.1 → 3.0.0-nightly.27bd5e2

package/src/runtime/native/reactivity.ts

@@ -0,0 +1,262 @@
+/* eslint-disable */
+import { createContext } from "react";
+import {
+  Appearance,
+  Dimensions,
+  type ColorSchemeName,
+  type LayoutRectangle,
+} from "react-native";
+
+import type { LightDarkVariable, 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,
+});
+
+const lightDarkFamily = () => {
+  return family<string, Observable<StyleDescriptor, LightDarkVariable>>(() => {
+    const obs = observable<StyleDescriptor, LightDarkVariable>(
+      (read, lightDark = [undefined, undefined]) => {
+        const colorSchemeName =
+          read(colorScheme) ?? Appearance.getColorScheme() ?? "light";
+
+        return colorSchemeName === "dark"
+          ? (lightDark[1] ?? lightDark[0])
+          : lightDark[0];
+      },
+    );
+
+    return obs;
+  });
+};
+export const rootVariables = lightDarkFamily();
+export const universalVariables = lightDarkFamily();
+
+/** Units *********************************************************************/
+
+export const rem = observable(14);
+
+/** 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,
+);
+
+/** Color Scheme **************************************************************/
+
+export const colorScheme = observable<ColorSchemeName>(
+  Appearance.getColorScheme(),
+);
+Appearance.addChangeListener((event) => colorScheme.set(event.colorScheme));
+
+/** Containers ****************************************************************/
+
+export type ContainerContextValue = Record<string, Effect>;
+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/animation.ts

@@ -0,0 +1,181 @@
+/* eslint-disable */
+import type { ComponentType } from "react";
+
+import { applyShorthand } from "../../utils";
+import { StyleCollection } from "../injection";
+import { weakFamily } from "../reactivity";
+import type { StyleFunctionResolver } from "./resolve";
+import { shorthandHandler } from "./shorthand";
+
+const name = ["animationName", "string", "none"] as const;
+const delay = ["animationDelay", "number", 0] as const;
+const duration = ["animationDuration", "number", 0] as const;
+const iteration = [
+  "animationIterationCount",
+  ["number", "infinite"],
+  1,
+] as const;
+const fill = [
+  "animationFillMode",
+  ["none", "forwards", "backwards", "both"],
+  "none",
+] as const;
+const playState = [
+  "animationPlayState",
+  ["running", "paused"],
+  "running",
+] as const;
+const direction = [
+  "animationDirection",
+  ["normal", "reverse", "alternate", "alternate-reverse"],
+  "normal",
+] as const;
+const timingFunction = [
+  "animationTimingFunction",
+  ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "object"],
+  "ease",
+] as const;
+
+export const animationShorthand = shorthandHandler(
+  [
+    [name],
+    [duration, name],
+    [name, duration],
+    [name, duration, iteration],
+    [name, duration, timingFunction, iteration],
+    [duration, delay, name],
+    [duration, delay, iteration, name],
+    [duration, delay, iteration, timingFunction, name],
+    [name, duration, timingFunction, delay, iteration, fill],
+  ],
+  [
+    name,
+    delay,
+    direction,
+    duration,
+    fill,
+    iteration,
+    playState,
+    timingFunction,
+  ],
+  "tuples",
+);
+
+export const animatedComponentFamily = weakFamily(
+  (component: ComponentType) => {
+    if (
+      "displayName" in component &&
+      component.displayName?.startsWith("Animated.")
+    ) {
+      return component;
+    }
+
+    const createAnimatedComponent =
+      require("react-native-reanimated").createAnimatedComponent;
+
+    return createAnimatedComponent(component);
+  },
+);
+
+export const animation: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const animationShortHandTuples = animationShorthand(
+    resolveValue,
+    value,
+    get,
+    options,
+  );
+
+  if (!Array.isArray(animationShortHandTuples)) {
+    return;
+  }
+
+  animationShortHandTuples.pop();
+
+  const nameTuple = animationShortHandTuples.find(
+    (tuple) => tuple[1] === "animationName",
+  );
+
+  const name = nameTuple?.[0];
+
+  if (!nameTuple || typeof name !== "string") {
+    return;
+  }
+
+  const keyframes = get(StyleCollection.keyframes(name));
+
+  const animation: Record<string, any> = {};
+  for (const [progress, declarations] of keyframes) {
+    animation[progress] ??= {};
+
+    const props = options.calculateProps?.(
+      get,
+      // Cast this into a StyleRule[]
+      [{ s: [0], d: declarations }],
+      options.renderGuards,
+      options.inheritedVariables,
+      options.inlineVariables,
+    );
+
+    if (!props) {
+      continue;
+    }
+
+    if (props.normal) {
+      Object.assign(animation[progress], props.normal);
+    }
+    if (props.important) {
+      Object.assign(animation[progress], props.important);
+    }
+
+    animation[progress] = animation[progress].style;
+  }
+
+  nameTuple[0] = animation;
+
+  return applyShorthand(animationShortHandTuples);
+};
+
+const advancedTimingFunctions: Record<
+  string,
+  () => (...args: any[]) => unknown
+> = {
+  "cubic-bezier": () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).cubicBezier;
+  },
+  "steps": () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).steps;
+  },
+};
+
+export const timingFunctionResolver: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const name = value[1];
+  const resolver = advancedTimingFunctions[name];
+
+  if (!resolver) {
+    return;
+  }
+
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args)) {
+    return;
+  }
+
+  const fn = resolver();
+
+  const result = fn(...args);
+
+  return result;
+};

package/src/runtime/native/styles/border.ts

@@ -0,0 +1,10 @@
+import { shorthandHandler } from "./shorthand";
+
+const width = ["borderWidth", "number"] as const;
+const style = ["borderStyle", "string"] as const;
+const color = ["borderColor", "color", "color"] as const;
+
+export const border = shorthandHandler(
+  [[width, style, color], [style, color], [width, style], [style]],
+  [],
+);

package/src/runtime/native/styles/box-shadow.ts

@@ -0,0 +1,54 @@
+import { isStyleDescriptorArray } from "../../utils";
+import type { StyleFunctionResolver } from "./resolve";
+import { shorthandHandler } from "./shorthand";
+
+const color = ["color", "string"] as const;
+const offsetX = ["offsetX", "number"] as const;
+const offsetY = ["offsetY", "number"] as const;
+const blurRadius = ["blurRadius", "number"] as const;
+const spreadDistance = ["spreadDistance", "number"] as const;
+// const inset = ["inset", "string"] as const;
+
+const handler = shorthandHandler(
+  [
+    [offsetX, offsetY, blurRadius, spreadDistance, color],
+    [color, offsetX, offsetY],
+    [color, offsetX, offsetY, blurRadius],
+    [color, offsetX, offsetY, blurRadius, spreadDistance],
+    [offsetX, offsetY, color],
+    [offsetX, offsetY, blurRadius, color],
+  ],
+  [],
+  "object",
+);
+
+export const boxShadow: StyleFunctionResolver = (
+  resolveValue,
+  func,
+  get,
+  options,
+) => {
+  const args = resolveValue(func[2]);
+
+  if (!isStyleDescriptorArray(args)) {
+    return args;
+  } else {
+    return args.flatMap((shadows) => {
+      if (shadows === undefined) {
+        return [];
+      } else if (isStyleDescriptorArray(shadows)) {
+        if (shadows.length === 0) {
+          return [];
+        } else if (Array.isArray(shadows[0])) {
+          return shadows
+            .map((shadow) => handler(resolveValue, shadow, get, options))
+            .filter((v) => v !== undefined);
+        } else {
+          return handler(resolveValue, shadows, get, options);
+        }
+      } else {
+        return handler(resolveValue, shadows, get, options);
+      }
+    });
+  }
+};

package/src/runtime/native/styles/calc.ts

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import { isStyleDescriptorArray } from "../../utils";
+import type { StyleFunctionResolver } from "./resolve";
+
+const calcPrecedence: Record<string, number> = {
+  "+": 1,
+  "-": 1,
+  "*": 2,
+  "/": 2,
+};
+
+export const calc: StyleFunctionResolver = (resolveValue, func) => {
+  let mode: "number" | "percentage" | undefined;
+  const values: number[] = [];
+  const ops: string[] = [];
+
+  const args = resolveValue(func[2]);
+
+  if (!isStyleDescriptorArray(args)) return;
+
+  for (let token of args) {
+    if (typeof token === "number") {
+      if (!mode) mode = "number";
+      if (mode !== "number") return;
+      values.push(token);
+      continue;
+    } else if (typeof token === "string") {
+      if (token === "(") {
+        ops.push(token);
+      } else if (token === ")") {
+        // Resolve all values within the brackets
+        while (ops.length && ops[ops.length - 1] !== "(") {
+          applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
+        }
+        ops.pop();
+      } else if (token.endsWith("%")) {
+        if (!mode) mode = "percentage";
+        if (mode !== "percentage") return;
+        values.push(Number.parseFloat(token.slice(0, -1)));
+      } else {
+        // This means we have an operator
+        while (
+          ops.length &&
+          ops[ops.length - 1] &&
+          // @ts-ignore
+          calcPrecedence[ops[ops.length - 1]] >= calcPrecedence[token]
+        ) {
+          applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
+        }
+        ops.push(token);
+      }
+    } else {
+      // We got something unexpected
+      return;
+    }
+  }
+
+  while (ops.length) {
+    applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
+  }
+
+  if (!mode) return;
+
+  const num = values[0];
+
+  if (typeof num !== "number") {
+    return;
+  }
+
+  const value = Math.round((num + Number.EPSILON) * 100) / 100;
+
+  if (mode === "percentage") {
+    return `${value}%`;
+  }
+
+  return value;
+};
+
+function applyCalcOperator(
+  operator: string,
+  b = 0, // These are reversed because we pop them off the stack
+  a = 0,
+  values: number[],
+) {
+  switch (operator) {
+    case "+":
+      return values.push(a + b);
+    case "-":
+      return values.push(a - b);
+    case "*":
+      return values.push(a * b);
+    case "/":
+      return values.push(a / b);
+  }
+
+  return;
+}