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

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/styles/calculate-props.ts

@@ -0,0 +1,217 @@
+/* eslint-disable */
+import type {
+  InlineVariable,
+  StyleDeclaration,
+  StyleRule,
+} from "react-native-css/compiler";
+import { Specificity as S } from "react-native-css/utilities";
+
+import type { RenderGuard } from "../conditions/guards";
+import { applyValue, getDeepPath } from "../objects";
+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,
+) {
+  const originalTarget = target;
+
+  for (const declaration of declarations) {
+    target = originalTarget;
+
+    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 | number;
+
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = propPath;
+
+        if (!first) {
+          continue;
+        }
+
+        const final = rest.pop();
+
+        if (final) {
+          if (first !== "*") {
+            topLevelTarget[first] ??= {};
+            target = topLevelTarget[first];
+          }
+
+          let previousProp: string | number = first;
+          let previousTarget = topLevelTarget;
+
+          for (prop of rest) {
+            if (prop.startsWith("[") && prop.endsWith("]")) {
+              prop = Number(prop.slice(1, -1));
+
+              if (!Array.isArray(previousTarget[previousProp])) {
+                previousTarget[previousProp] = [];
+                target = previousTarget[previousProp];
+              }
+            }
+            previousTarget = target;
+            previousProp = prop;
+
+            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);
+    }
+  }
+}

package/src/native/styles/functions/filters.ts

@@ -0,0 +1,99 @@
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "../shorthands/_handler";
+
+export const blur: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    blur: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const brightness: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    brightness: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const contrast: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    contrast: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const grayscale: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    grayscale: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const hueRotate: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    hueRotate: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const invert: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    invert: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const sepia: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    sepia: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const saturate: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    saturate: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+export const opacity: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  return {
+    hueRotate: (Array.isArray(args) ? args[0] : args) as unknown,
+  };
+};
+
+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 handler = shorthandHandler(
+  [
+    [offsetX, offsetY, blurRadius, color],
+    [color, offsetX, offsetY],
+    [color, offsetX, offsetY, blurRadius],
+    [offsetX, offsetY, color],
+    [offsetX, offsetY, blurRadius, color],
+  ],
+  [],
+  "object",
+);
+
+export const dropShadow: StyleFunctionResolver = (
+  resolveValue,
+  func,
+  get,
+  options,
+) => {
+  const args = resolveValue(func[2]);
+
+  return isStyleDescriptorArray(args)
+    ? {
+        dropShadow: handler(resolveValue, args, get, options),
+      }
+    : undefined;
+};

package/src/native/styles/functions/transform-functions.ts

@@ -0,0 +1,85 @@
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import type { StyleFunctionResolver } from "../resolve";
+
+export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return { scale: resolveValue(args) };
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+
+  if (isXValid && isYValid) {
+    return x === y ? { scale: x } : [{ scaleX: x }, { scaleY: y }];
+  } else if (isXValid) {
+    return { scaleX: x };
+  } else if (isYValid) {
+    return { scaleY: y };
+  }
+
+  return;
+};
+
+export const rotate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return { rotate: resolveValue(args) };
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+  const z = resolveValue(args[2]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+  const isZValid = typeof z === "string" || typeof z === "number";
+
+  if (isXValid && isYValid && isZValid) {
+    return [{ rotateX: x }, { rotateY: y }, { rotateZ: z }];
+  } else if (isXValid && isYValid) {
+    return [{ rotateX: x }, { rotateY: y }];
+  } else if (isXValid && isZValid) {
+    return [{ rotateX: x }, { rotateZ: z }];
+  } else if (isYValid && isZValid) {
+    return [{ rotateY: y }, { rotateZ: z }];
+  } else if (isXValid) {
+    return { rotateX: x };
+  } else if (isYValid) {
+    return { rotateY: y };
+  } else if (isZValid) {
+    return { rotateZ: z };
+  }
+
+  return;
+};
+
+export const translate: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const args = descriptor[2];
+
+  if (!isStyleDescriptorArray(args)) {
+    return;
+  }
+
+  const x = resolveValue(args[0]);
+  const y = resolveValue(args[1]);
+
+  const isXValid = typeof x === "string" || typeof x === "number";
+  const isYValid = typeof y === "string" || typeof y === "number";
+
+  if (isXValid && isYValid) {
+    return [{ translateX: x }, { translateY: y }];
+  } else if (isXValid) {
+    return { translateX: x };
+  } else if (isYValid) {
+    return { translateY: y };
+  }
+
+  return;
+};