react-native-css 2.1.2 → 3.0.0-nightly.4723140

package/src/runtime/native/reactivity.ts

@@ -0,0 +1,266 @@
+/* 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 = 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)) {
+        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(),
+);
+colorScheme.set(Appearance.getColorScheme());
+colorScheme.get({
+  observers: new Set(),
+  run: () => Appearance.setColorScheme(colorScheme.get()),
+});
+
+/** 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,142 @@
+/* eslint-disable */
+import type { ComponentType } from "react";
+
+import type { StyleDescriptor } from "../../../compiler";
+import { StyleCollection } from "../injection";
+import { observable, weakFamily, type Getter } from "../reactivity";
+import type { SimpleResolveValue, StyleFunctionResolver } from "./resolve";
+import { shorthandHandler } from "./shorthand";
+
+const name = ["n", "string", "none"] as const;
+const delay = ["de", "number", 0] as const;
+const duration = ["du", "number", 0] as const;
+const fill = ["f", ["none", "forwards", "backwards", "both"], "none"] as const;
+const iteration = ["i", "number", 1] as const;
+const playState = ["p", ["running", "paused"], "running"] as const;
+const direction = [
+  "di",
+  ["normal", "reverse", "alternate", "alternate-reverse"],
+  "normal",
+] as const;
+const easing = [
+  "e",
+  ["linear", "ease", "ease-in", "ease-out", "ease-in-out"],
+  "ease",
+] as const;
+
+export const animationShorthand = shorthandHandler(
+  [
+    [name],
+    [duration, name],
+    [name, duration],
+    [duration, delay, name],
+    [duration, delay, iteration, name],
+    [duration, delay, iteration, easing, name],
+    [name, duration, easing, delay, iteration, fill],
+  ],
+  [name, delay, direction, duration, fill, iteration, playState, easing],
+);
+
+export const animation: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  { inheritedVariables },
+) => {
+  const name = resolveValue(value[2]);
+
+  /**
+   * Get a stable reference to the StyleProp observer.
+   * We can use that as a WeakKey
+   */
+  return get(
+    animationFamily(get, {
+      name,
+      resolveValue,
+      inheritedVariables,
+    }),
+  );
+};
+
+type AnimationFamilyOptions = {
+  name: StyleDescriptor;
+  resolveValue: SimpleResolveValue;
+  inheritedVariables: any;
+};
+
+const animationFamily = weakFamily(
+  (_: Getter, options: AnimationFamilyOptions) => {
+    const { name: nameDescriptor, resolveValue } = options;
+
+    return observable((get) => {
+      const names = resolveValue(nameDescriptor);
+
+      if (!Array.isArray(names)) {
+        return;
+      }
+
+      return names.map((name: string) => {
+        const keyframes = get(StyleCollection.keyframes(name));
+
+        const animation: Record<string, any> = {};
+
+        for (const [progress, declarations] of keyframes) {
+          const result: Record<string, any> = {};
+
+          // This code needs to match calculateProps
+          // TODO: Refactor this to use the same code
+          for (const declaration of declarations) {
+            let target = result;
+
+            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 | undefined = "";
+
+              if (typeof propPath === "string") {
+                prop = propPath;
+              } else {
+                prop = propPath[0];
+
+                for (
+                  let i = 0;
+                  i < propPath.length - 2 && typeof prop === "string";
+                  i++
+                ) {
+                  target = target[prop] ??= {};
+                  prop = propPath[i + 1];
+                }
+              }
+
+              value = resolveValue(value);
+            }
+          }
+
+          animation[progress] = result;
+        }
+
+        return animation;
+      });
+    });
+  },
+);
+
+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);
+  },
+);

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

@@ -0,0 +1,120 @@
+/* eslint-disable */
+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 = func[2];
+  if (!args) return;
+
+  for (let token of args) {
+    switch (typeof token) {
+      case "undefined":
+        // Fail on an undefined value
+        return;
+      case "number":
+        if (!mode) mode = "number";
+        if (mode !== "number") return;
+        values.push(token);
+        continue;
+      case "object": {
+        // All values should resolve to a numerical value
+        const value = resolveValue(token);
+        switch (typeof value) {
+          case "number": {
+            if (!mode) mode = "number";
+            if (mode !== "number") return;
+            values.push(value);
+            continue;
+          }
+          case "string": {
+            if (!value.endsWith("%")) {
+              return;
+            }
+            if (!mode) mode = "percentage";
+            if (mode !== "percentage") return;
+            values.push(Number.parseFloat(value.slice(0, -1)));
+            continue;
+          }
+          default:
+            return;
+        }
+      }
+      case "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);
+        }
+      }
+    }
+  }
+
+  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: number, // These are reversed because we pop them off the stack
+  a: number,
+  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;
+}

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

@@ -0,0 +1 @@
+export const emVariableName = "__rn-css-em";

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

@@ -0,0 +1,78 @@
+/* eslint-disable */
+export const transformKeys = new Set([
+  "translateX",
+  "translateY",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skewX",
+  "skewY",
+  "perspective",
+  "matrix",
+  "transformOrigin",
+]);
+
+export const defaultValues: Record<string, any> = {
+  backgroundColor: "transparent",
+  borderBottomColor: "transparent",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderBottomWidth: 0,
+  borderColor: "transparent",
+  borderLeftColor: "transparent",
+  borderLeftWidth: 0,
+  borderRadius: 0,
+  borderRightColor: "transparent",
+  borderRightWidth: 0,
+  borderTopColor: "transparent",
+  borderTopWidth: 0,
+  borderWidth: 0,
+  bottom: 0,
+  color: "black",
+  flex: 1,
+  flexBasis: 1,
+  flexGrow: 1,
+  flexShrink: 0,
+  fontSize: 14,
+  fontWeight: "400",
+  gap: 0,
+  left: 0,
+  lineHeight: 14,
+  margin: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginTop: 0,
+  maxHeight: 99999,
+  maxWidth: 99999,
+  minHeight: 0,
+  minWidth: 0,
+  opacity: 1,
+  padding: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  perspective: 1,
+  right: 0,
+  rotate: "0deg",
+  rotateX: "0deg",
+  rotateY: "0deg",
+  rotateZ: "0deg",
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  skewX: "0deg",
+  skewY: "0deg",
+  textShadowRadius: 0,
+  top: 0,
+  transformOrigin: "50%",
+  translateX: 0,
+  translateY: 0,
+  width: 0,
+  zIndex: 0,
+};