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

package/src/runtime/native/conditions/index.ts

@@ -0,0 +1,106 @@
+/* eslint-disable */
+import type {
+  AttributeQuery,
+  PseudoClassesQuery,
+  StyleRule,
+} from "../../../compiler";
+import type { Props } from "../../runtime.types";
+import {
+  activeFamily,
+  focusFamily,
+  hoverFamily,
+  type ContainerContextValue,
+  type Effect,
+} from "../reactivity";
+import { testContainerQueries } from "./container-query";
+import type { RenderGuard } from "./guards";
+import { testMediaQuery } from "./media-query";
+
+export function testRule(
+  rule: StyleRule,
+  effect: Effect,
+  props: Props,
+  guards: RenderGuard[],
+  containerContext: ContainerContextValue,
+) {
+  if (rule.p && !pseudoClasses(rule.p, effect)) {
+    return false;
+  }
+  if (rule.m && !testMediaQuery(rule.m, effect)) {
+    return false;
+  }
+  if (rule.aq && !attributes(rule.aq, props, guards)) {
+    return false;
+  }
+  if (
+    rule.cq &&
+    !testContainerQueries(rule.cq, containerContext, guards, effect)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+function pseudoClasses(query: PseudoClassesQuery, effect: Effect) {
+  if (query.h && !hoverFamily(effect).get(effect)) {
+    return false;
+  }
+  if (query.a && !activeFamily(effect).get(effect)) {
+    return false;
+  }
+  if (query.f && !focusFamily(effect).get(effect)) {
+    return false;
+  }
+  return true;
+}
+
+function attributes(
+  queries: AttributeQuery[],
+  props: Props,
+  guards: RenderGuard[],
+) {
+  return queries.every((query) => testAttribute(query, props, guards));
+}
+
+function testAttribute(
+  query: AttributeQuery,
+  props: Props,
+  guards: RenderGuard[],
+) {
+  let value: any;
+
+  if (query[0] === "a") {
+    value = props?.[query[1]];
+  } else {
+    value = props?.dataSet?.[query[1]];
+  }
+
+  guards.push([query[0], query[1], value]);
+
+  const operator = query[2];
+
+  if (!operator) {
+    return value !== undefined && value !== null && value !== false;
+  }
+
+  switch (operator) {
+    case "!":
+      return !value;
+    case "=":
+      return value == query[3];
+    case "~=":
+      return value?.toString().split(" ").includes(query[3]);
+    case "|=":
+      return value?.toString().startsWith(query[3] + "-");
+    case "^=":
+      return value?.toString().startsWith(query[3]);
+    case "$=":
+      return value?.toString().endsWith(query[3]);
+    case "*=":
+      return value?.toString().includes(query[3]);
+    default:
+      operator satisfies never;
+      return false;
+  }
+}

package/src/runtime/native/conditions/media-query.ts

@@ -0,0 +1,92 @@
+/* eslint-disable */
+import { PixelRatio, Platform } from "react-native";
+
+import type { MediaCondition } from "../../../compiler";
+import { colorScheme, vh, vw, type Effect } from "../reactivity";
+
+export function testMediaQuery(mediaQueries: MediaCondition[], effect: Effect) {
+  return mediaQueries.every((query) => test(query, effect));
+}
+
+function test(mediaQuery: MediaCondition, effect: Effect): Boolean {
+  switch (mediaQuery[0]) {
+    case "[]":
+    case "!!":
+      return false;
+    case "!":
+      return !test(mediaQuery[1], effect);
+    case "&":
+      return mediaQuery[1].every((query) => {
+        return test(query, effect);
+      });
+    case "|":
+      return mediaQuery[1].some((query) => {
+        return test(query, effect);
+      });
+    case ">":
+    case ">=":
+    case "<":
+    case "<=":
+    case "=": {
+      return testComparison(mediaQuery, effect);
+    }
+  }
+}
+
+function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
+  let left: number | undefined;
+  const right = mediaQuery[2];
+
+  switch (mediaQuery[1]) {
+    case "prefers-color-scheme": {
+      return right === colorScheme.get(effect);
+    }
+    case "display-mode":
+      return right === "native" || Platform.OS === right;
+    case "min-width":
+      return typeof right === "number" && vw.get(effect) >= right;
+    case "max-width":
+      return typeof right === "number" && vw.get(effect) <= right;
+    case "min-height":
+      return typeof right === "number" && vh.get(effect) >= right;
+    case "max-height":
+      return typeof right === "number" && vh.get(effect) <= right;
+    case "orientation":
+      return right === "landscape"
+        ? vh.get(effect) < vw.get(effect)
+        : vh.get(effect) >= vw.get(effect);
+  }
+
+  if (typeof right !== "number") {
+    return false;
+  }
+
+  switch (mediaQuery[1]) {
+    case "width":
+      left = vw.get(effect);
+      break;
+    case "height":
+      left = vh.get(effect);
+      break;
+    case "resolution":
+      left = PixelRatio.get();
+      break;
+    default:
+      return false;
+  }
+
+  switch (mediaQuery[0]) {
+    case "=":
+      return left === right;
+    case ">":
+      return left > right;
+    case ">=":
+      return left >= right;
+    case "<":
+      return left < right;
+    case "<=":
+      return left <= right;
+    default:
+      return false;
+  }
+}

package/src/runtime/native/index.ts

@@ -0,0 +1,5 @@
+// Import this file for Metro to override
+import "./metro";
+
+export * from "./api";
+export type * from "../runtime.types";

package/src/runtime/native/injection.ts

@@ -0,0 +1,101 @@
+import type {
+  Animation_V2,
+  ReactNativeCssStyleSheet,
+  StyleRuleSet,
+} from "../../compiler";
+import {
+  family,
+  observable,
+  observableBatch,
+  rootVariables,
+  type Observable,
+} from "./reactivity";
+
+export function StyleCollection() {
+  return null;
+}
+
+export const inlineStylesMap = new WeakMap();
+
+StyleCollection.styles = family<string, Observable<StyleRuleSet>>(() => {
+  return observable([], isDeepEqual);
+});
+StyleCollection.keyframes = family<string, Observable<Animation_V2[1]>>(() => {
+  return observable([], isDeepEqual);
+});
+
+StyleCollection.inject = function (options: ReactNativeCssStyleSheet) {
+  observableBatch.current = new Set();
+
+  if (options.s) {
+    for (const style of options.s) {
+      StyleCollection.styles(style[0]).set(style[1]);
+    }
+  }
+
+  if (options.k) {
+    for (const keyframes of options.k) {
+      StyleCollection.keyframes(keyframes[0]).set(keyframes[1]);
+    }
+  }
+
+  if (options.vr) {
+    for (const entry of options.vr) {
+      rootVariables(entry[0]).set(entry[1]);
+    }
+  }
+
+  if (options.vu) {
+    for (const entry of options.vu) {
+      rootVariables(entry[0]).set(entry[1]);
+    }
+  }
+
+  for (const effect of observableBatch.current) {
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+};
+
+function isDeepEqual(a: unknown, b: unknown): boolean {
+  const aArray = Array.isArray(a);
+  const bArray = Array.isArray(b);
+  const requiresKeyComparison =
+    typeof a === "object" && typeof b === "object" && aArray === bArray;
+
+  // Only compare keys when both are an object or array
+  // This does not account for complex types like Date/Regex, because we don't use them
+  if (!requiresKeyComparison) return a === b;
+
+  // Make either are not null
+  if (!a || !b) {
+    return a === b;
+  }
+
+  // Shortcut for arrays
+  if (aArray && bArray && a.length !== b.length) {
+    return false;
+  }
+
+  // Compare a to b
+  for (const key in a) {
+    if (
+      !isDeepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  // Compare b to a
+  for (const key in b) {
+    if (!(key in a)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/runtime/native/metro.ts

@@ -0,0 +1,2 @@
+// This file will be overwritten by Metro
+export {};

package/src/runtime/native/react/interaction.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+import type { LayoutChangeEvent } from "react-native";
+
+import {
+  activeFamily,
+  containerLayoutFamily,
+  focusFamily,
+  hoverFamily,
+  type Effect,
+} from "../reactivity";
+
+const mainCache = new WeakMap<
+  Effect,
+  WeakMap<Function, (event: any) => void>
+>();
+
+type Handler = (event: unknown) => void;
+
+export type InteractionType =
+  | "onLayout"
+  | "onHoverIn"
+  | "onHoverOut"
+  | "onPress"
+  | "onPressIn"
+  | "onPressOut"
+  | "onFocus"
+  | "onBlur";
+
+const defaultHandlers: Record<InteractionType, Handler> = {
+  onLayout: () => {},
+  onHoverIn: () => {},
+  onHoverOut: () => {},
+  onPress: () => {},
+  onPressIn: () => {},
+  onPressOut: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+};
+
+export function getInteractionHandler(
+  effect: Effect,
+  type: InteractionType,
+  handler = defaultHandlers[type],
+) {
+  let cache = mainCache.get(effect);
+  if (!cache) {
+    cache = new WeakMap();
+    mainCache.set(effect, cache);
+  }
+
+  let cached = cache.get(handler);
+  if (!cached) {
+    cached = (event: any) => {
+      if (handler) {
+        handler(event);
+      }
+
+      switch (type) {
+        case "onLayout":
+          containerLayoutFamily(effect).set(
+            (event as LayoutChangeEvent).nativeEvent.layout,
+          );
+          break;
+        case "onHoverIn":
+          hoverFamily(effect).set(true);
+          break;
+        case "onHoverOut":
+          hoverFamily(effect).set(false);
+          break;
+        case "onPress":
+          break;
+        case "onPressIn":
+          activeFamily(effect).set(true);
+          break;
+        case "onPressOut":
+          activeFamily(effect).set(false);
+          break;
+        case "onFocus":
+          focusFamily(effect).set(true);
+          break;
+        case "onBlur":
+          focusFamily(effect).set(false);
+          break;
+      }
+    };
+    cache.set(handler, cached);
+  }
+
+  return cached;
+}