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

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);
-    }
-  }
-}

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

@@ -1,98 +0,0 @@
-import { isStyleDescriptorArray } from "../../../utils";
-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/runtime/native/styles/functions/transform-functions.ts

@@ -1,84 +0,0 @@
-import { isStyleDescriptorArray } from "../../../utils";
-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;
-};