@codeandmoney/soelma 0.0.0-dev.0

package/src/dependencyRegistry.ts

@@ -0,0 +1,21 @@
+type UnSubscribeFn = () => void;
+type SubscribeFn = (handler: () => void) => UnSubscribeFn;
+
+interface Registry {
+  [dependencyName: string]: SubscribeFn;
+}
+
+const registry: Registry = {};
+
+export function addDependency(name: string, onChange: SubscribeFn): void {
+  if (!registry[name]) {
+    Object.defineProperty(registry, name, {
+      value: onChange,
+      writable: false,
+    });
+  }
+}
+
+export function getDependency(name: string): SubscribeFn | undefined {
+  return registry[name];
+}

package/src/dependencyUsage.ts

@@ -0,0 +1,31 @@
+interface UsingSpec {
+  [dependencyName: string]: boolean;
+}
+
+interface Ref {
+  current: UsingSpec;
+}
+
+const ref: Ref = { current: {} };
+
+export function resetUsing(): void {
+  ref.current = {};
+}
+
+export function getUsing(): UsingSpec {
+  return { ...ref.current };
+}
+
+export function onUse(name: string): void {
+  ref.current[name] = true;
+}
+
+interface Button {
+  variant: "primary" | "danger"
+  onAction: () => void
+}
+
+// onAction -> onClick
+// onAction -> onPress
+
+

package/src/dimensions/consts.ts

@@ -0,0 +1,2 @@
+export const WINDOW_DEPENDENCY_KEY = "Dimensions.window";
+export const SCREEN_DEPENDENCY_KEY = "Dimensions.screen";

package/src/dimensions/index.ts

@@ -0,0 +1,20 @@
+import "./init";
+
+import { Dimensions, ScaledSize } from "react-native";
+
+import { onUse } from "../dependencyUsage";
+import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "./consts";
+
+const get = (dim: "window" | "screen") => Dimensions.get(dim);
+
+export function getWindowDimensions(): ScaledSize {
+  onUse(WINDOW_DEPENDENCY_KEY);
+
+  return get("window");
+}
+
+export function getScreenDimensions(): ScaledSize {
+  onUse(SCREEN_DEPENDENCY_KEY);
+
+  return get("screen");
+}

package/src/dimensions/init.ts

@@ -0,0 +1,37 @@
+import { Dimensions, ScaledSize } from "react-native";
+
+import { createEventEmitter } from "../createEventEmitter";
+import { addDependency } from "../dependencyRegistry";
+import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
+
+const { get, addEventListener } = Dimensions;
+
+const state = { window: get("window"), screen: get("screen") };
+
+const windowEventEmitter = createEventEmitter(WINDOW_DEPENDENCY_KEY);
+const screenEventEmitter = createEventEmitter(SCREEN_DEPENDENCY_KEY);
+
+const isNotEqual = (a: ScaledSize, b: ScaledSize) =>
+  a.width !== b.width || a.height !== b.height;
+
+addDependency(WINDOW_DEPENDENCY_KEY, (handler: () => void) =>
+  windowEventEmitter.on(handler)
+);
+
+addDependency(SCREEN_DEPENDENCY_KEY, (handler: () => void) =>
+  screenEventEmitter.on(handler)
+);
+
+addEventListener("change", ({ window, screen }) => {
+  if (isNotEqual(screen, state.screen)) {
+    state.screen = screen;
+
+    screenEventEmitter.emit();
+  }
+
+  if (isNotEqual(window, state.window)) {
+    state.window = window;
+
+    windowEventEmitter.emit();
+  }
+});

package/src/dimensions/utils.ts

@@ -0,0 +1,11 @@
+import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
+
+export const optimizeDependencies = (
+  keys: Record<string, boolean>
+): Record<string, boolean> => {
+  if (keys[WINDOW_DEPENDENCY_KEY] && keys[SCREEN_DEPENDENCY_KEY]) {
+    delete keys[SCREEN_DEPENDENCY_KEY];
+  }
+
+  return keys;
+};

package/src/i18n.ts

@@ -0,0 +1,18 @@
+import { I18nManager } from "react-native";
+
+type LayoutDirectionType = "rtl" | "ltr";
+
+export function i18n<T>({
+  rtl,
+  ltr,
+}: { [direction in LayoutDirectionType]?: T }): T | undefined {
+  if (I18nManager.isRTL) {
+    return rtl;
+  }
+
+  return ltr;
+}
+
+export const rtl = <T>(styles: T): T | undefined => i18n<T>({ rtl: styles });
+
+export const ltr = <T>(styles: T): T | undefined => i18n<T>({ ltr: styles });

package/src/index.ts

@@ -0,0 +1,7 @@
+export { useTheme } from "./useTheme";
+export { withStyles } from "./withStyles";
+export { ThemeProvider, ThemeConsumer } from "./context";
+export { useColorTransition } from "./useColorTransition";
+export { makeUseStyles } from "./makeUseStyles";
+export type { DefaultTheme } from "./DefaultTheme";
+export type { InferInjectedStyledProps } from "./withStyles";

package/src/makeUseStyles/createUseStylesTheme.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../useTheme";
+import { resetUsing } from "../dependencyUsage";
+import { getDependenciesKeys, useForceUpdate, subscribe } from "./utils";
+
+export function createUseStylesTheme(getStyles) {
+  const scope = {
+    styles: new WeakMap(),
+    forceUpdate: [],
+    unsubscribe: () => {},
+  };
+
+  function onUpdate() {
+    // Clear all styles to recreate them after dependencies update
+    scope.styles = new WeakMap();
+    scope.forceUpdate.forEach((fn) => fn());
+  }
+
+  function initStyle(theme) {
+    scope.unsubscribe();
+    resetUsing();
+
+    const style = StyleSheet.create(getStyles(theme));
+    const keys = getDependenciesKeys();
+
+    scope.unsubscribe = subscribe(keys, onUpdate);
+
+    return style;
+  }
+
+  return function useStyles() {
+    const theme = useTheme();
+
+    useForceUpdate(scope);
+
+    if (!scope.styles.has(theme)) {
+      scope.styles.set(theme, initStyle(theme));
+    }
+
+    return scope.styles.get(theme);
+  };
+}

package/src/makeUseStyles/createUseStylesTheme.test.js

@@ -0,0 +1,137 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { createUseStylesTheme } from "./createUseStylesTheme";
+import { ThemeProvider } from "../context";
+import { createEventEmitter } from "../createEventEmitter";
+import { addDependency } from "../dependencyRegistry";
+import { onUse } from "../dependencyUsage";
+
+it("should create styles using a theme", () => {
+  const mockGetStyles = jest.fn(({ colors }) => ({
+    root: { color: colors.red },
+  }));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+  const { result } = renderHook(() => useStyles(), {
+    wrapper: ThemeProvider,
+    initialProps: { value: { colors: { red: "red" } } },
+  });
+
+  expect(result.current).toEqual({
+    root: { color: "red" },
+  });
+});
+
+it("should create styles once", () => {
+  const theme = { colors: { red: "red" } };
+  const mockGetStyles = jest.fn(({ colors }) => ({
+    root: { color: colors.red },
+  }));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+
+  renderHook(
+    () => {
+      useStyles();
+      useStyles();
+      useStyles();
+    },
+    {
+      wrapper: ThemeProvider,
+      initialProps: { value: theme },
+    }
+  );
+
+  expect(mockGetStyles).toHaveBeenCalledTimes(1);
+});
+
+it("should not update styles when component rerender", () => {
+  const theme = { colors: { red: "red" } };
+  const mockGetStyles = jest.fn(({ colors }) => ({
+    root: { color: colors.red },
+  }));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+  const { rerender } = renderHook(() => useStyles(), {
+    wrapper: ThemeProvider,
+    initialProps: { value: theme },
+  });
+
+  rerender({ value: theme, a: 1 });
+  rerender({ value: theme, a: 2 });
+  rerender({ value: theme, a: 3 });
+
+  expect(mockGetStyles).toHaveBeenCalledTimes(1);
+});
+
+it("should use memoized styles when component rerender", () => {
+  const theme = { colors: { red: "red" } };
+  const mockGetStyles = jest.fn(({ colors }) => ({
+    root: { color: colors.red },
+  }));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+  const { rerender, result } = renderHook(() => useStyles(), {
+    wrapper: ThemeProvider,
+    initialProps: { value: theme },
+  });
+
+  const initialStyles = result.current;
+
+  rerender({ value: theme, a: 1 });
+  rerender({ value: theme, a: 2 });
+  rerender({ value: theme, a: 3 });
+
+  const afterUpdateStyles = result.current;
+
+  expect(afterUpdateStyles).toBe(initialStyles);
+});
+
+it("should update styles when theme was changed", () => {
+  const initialTheme = { colors: { red: "red" } };
+  const newTheme = { colors: { red: "white" } };
+
+  const mockGetStyles = jest.fn(({ colors }) => ({
+    root: { color: colors.red },
+  }));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+  const { rerender } = renderHook(() => useStyles(), {
+    wrapper: ThemeProvider,
+    initialProps: { value: initialTheme },
+  });
+
+  act(() => {
+    rerender({ value: newTheme });
+  });
+
+  expect(mockGetStyles).toHaveBeenCalledTimes(2);
+});
+
+it("should update styles when dependency changed", () => {
+  const theme = { colors: { red: "red" } };
+  const TEST_DEPENDENCY_KEY = `test_${Math.random()}`;
+  const { on, emit } = createEventEmitter(TEST_DEPENDENCY_KEY);
+  const mockGetStyles = jest.fn(({ colors }) => {
+    // simulate using a dependency
+    onUse(TEST_DEPENDENCY_KEY);
+
+    return {
+      root: { color: colors.red },
+    };
+  });
+
+  addDependency(TEST_DEPENDENCY_KEY, (handler) => on(handler));
+
+  const useStyles = createUseStylesTheme(mockGetStyles);
+
+  renderHook(() => useStyles(), {
+    wrapper: ThemeProvider,
+    initialProps: { value: theme },
+  });
+
+  act(() => {
+    emit();
+  });
+
+  expect(mockGetStyles).toHaveBeenCalledTimes(2);
+});

package/src/makeUseStyles/createUseStylesWithoutTheme.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { resetUsing } from "../dependencyUsage";
+import { getDependenciesKeys, subscribe, useForceUpdate } from "./utils";
+
+export function createUseStylesWithoutTheme(getStyles) {
+  const scope = {
+    style: null,
+    forceUpdate: [],
+    unsubscribe: () => {},
+  };
+
+  function onUpdate() {
+    // Recreate style after dependencies update
+    initStyle();
+    scope.forceUpdate.forEach((fn) => fn());
+  }
+
+  function initStyle() {
+    scope.unsubscribe();
+    resetUsing();
+
+    scope.style = StyleSheet.create(getStyles());
+
+    const keys = getDependenciesKeys();
+
+    scope.unsubscribe = subscribe(keys, onUpdate);
+  }
+
+  initStyle();
+
+  function useStyles() {
+    useForceUpdate(scope);
+
+    return scope.style;
+  }
+
+  return useStyles;
+}

package/src/makeUseStyles/createUseStylesWithoutTheme.test.js

@@ -0,0 +1,63 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
+
+import { addDependency } from "../dependencyRegistry";
+import { onUse } from "../dependencyUsage";
+import { createEventEmitter } from "../createEventEmitter";
+
+const TEST_DEPENDENCY_KEY = `test_${Math.random()}`;
+
+const { on, emit } = createEventEmitter(TEST_DEPENDENCY_KEY);
+
+addDependency(TEST_DEPENDENCY_KEY, (handler) => on(handler));
+
+const useStyles = createUseStylesWithoutTheme(() => {
+  // simulate using a dependency
+  onUse(TEST_DEPENDENCY_KEY);
+
+  return {
+    root: { color: "red" },
+  };
+});
+
+it("should use the same styles object to reduce memory usage", () => {
+  const { result } = renderHook(() => ({
+    stl1: useStyles(),
+    stl2: useStyles(),
+  }));
+
+  expect(result.current.stl1).toBe(result.current.stl2);
+});
+
+it("should update styles when dependency changed", () => {
+  const { result } = renderHook(() => ({
+    stl1: useStyles(),
+    stl2: useStyles(),
+  }));
+
+  const initialResult = { ...result.current };
+
+  act(() => {
+    emit();
+  });
+
+  const updatedResult = { ...result.current };
+
+  expect(initialResult.stl1).not.toBe(updatedResult.stl1);
+  expect(initialResult.stl2).not.toBe(updatedResult.stl2);
+});
+
+it("should return the same style when component rerender", () => {
+  const mockUseStyles = jest.fn(useStyles);
+
+  const { result, rerender } = renderHook(() => mockUseStyles());
+
+  const initialResult = result.current;
+
+  rerender({});
+
+  const updatedResult = result.current;
+
+  expect(mockUseStyles).toHaveBeenCalledTimes(2);
+  expect(initialResult).toBe(updatedResult);
+});

package/src/makeUseStyles/index.d.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+import { DefaultTheme } from "../DefaultTheme";
+
+export function makeUseStyles<
+  Theme extends DefaultTheme,
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>
+>(getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>): () => T;

package/src/makeUseStyles/index.js

@@ -0,0 +1,12 @@
+import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
+import { createUseStylesTheme } from "./createUseStylesTheme";
+
+export function makeUseStyles(getStyles) {
+  const hasThemeDependency = getStyles.length === 1;
+
+  if (!hasThemeDependency) {
+    return createUseStylesWithoutTheme(getStyles);
+  }
+
+  return createUseStylesTheme(getStyles);
+}

package/src/makeUseStyles/index.test.js

@@ -0,0 +1,28 @@
+import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
+import { createUseStylesTheme } from "./createUseStylesTheme";
+import { makeUseStyles } from "./index";
+
+jest.mock("./createUseStylesWithoutTheme");
+jest.mock("./createUseStylesTheme");
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+it("should invoke 'createUseStylesWithoutTheme' when pass function without first argument", () => {
+  const withoutThemeDeps = () => ({});
+
+  makeUseStyles(withoutThemeDeps);
+
+  expect(createUseStylesWithoutTheme).toHaveBeenCalledTimes(1);
+  expect(createUseStylesTheme).toHaveBeenCalledTimes(0);
+});
+
+it("should invoke 'createUseStylesTheme' when pass function with first argument", () => {
+  const withThemeDeps = (theme) => ({});
+
+  makeUseStyles(withThemeDeps);
+
+  expect(createUseStylesWithoutTheme).toHaveBeenCalledTimes(0);
+  expect(createUseStylesTheme).toHaveBeenCalledTimes(1);
+});

package/src/makeUseStyles/test-type.js

@@ -0,0 +1,28 @@
+import { makeUseStyles } from "./index";
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      // @ts-expect-error: invalid color value
+      color: [],
+    },
+  }));
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}
+{
+  const useStyles = makeUseStyles((theme) => ({
+    root: {
+      color: theme.color.red,
+      // @ts-expect-error: 'blue' not exist in passed theme
+      borderColor: theme.color.blue,
+    },
+  }));
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}

package/src/makeUseStyles/utils.js

@@ -0,0 +1,67 @@
+import { optimizeDependencies } from "../dimensions/utils";
+import { getUsing } from "../dependencyUsage";
+import { getDependency } from "../dependencyRegistry";
+
+import { useEffect, useRef, useState } from "react";
+
+/* istanbul ignore next */
+const noop = () => {};
+
+export const useForceUpdate = (scope) => {
+  const unsubscribeRef = useRef(noop);
+  const setState = useState(false)[1];
+
+  if (unsubscribeRef.current === noop) {
+    const forceRerender = () => setState((flag) => !flag);
+
+    scope.forceUpdate = scope.forceUpdate.concat(forceRerender);
+
+    unsubscribeRef.current = () => {
+      scope.forceUpdate = scope.forceUpdate.filter(
+        (fn) => fn !== forceRerender
+      );
+    };
+  }
+
+  useEffect(
+    () => () => {
+      unsubscribeRef.current();
+      unsubscribeRef.current = noop;
+    },
+    []
+  );
+};
+
+export const getDependenciesKeys = () =>
+  Object.keys(optimizeDependencies(getUsing())).sort();
+
+export const subscribe = (dependenciesKeys, handler) => {
+  if (dependenciesKeys.length === 0) {
+    /* istanbul ignore next */
+    return () => {};
+  }
+
+  const unsubscribeFns = dependenciesKeys
+    .map(getDependency)
+    .filter(
+      /* istanbul ignore next */
+      process.env.NODE_ENV !== "production"
+        ? (onChange, index) => {
+            const dependencyName = dependenciesKeys[index];
+
+            if (!onChange) {
+              console.warn(
+                `[react-native-stylex] Could not find onChange handler for ${dependencyName}!`
+              );
+            }
+
+            return !!onChange;
+          }
+        : Boolean
+    )
+    .map((onChange) => onChange(handler));
+
+  return () => {
+    unsubscribeFns.forEach((unsubscribe) => unsubscribe());
+  };
+};

package/src/media-query/base.ts

@@ -0,0 +1,43 @@
+import { ScaledSize } from "react-native";
+
+import { getWindowDimensions } from "../dimensions";
+
+export const createDimensionQueryHelper = <Value>(
+  queryFunction: (options: { value: Value; dimensions: ScaledSize }) => boolean
+) => <T>(value: Value, styles: T): null | T => {
+  const isMatched = queryFunction({ value, dimensions: getWindowDimensions() });
+
+  if (isMatched) {
+    return styles;
+  }
+
+  return null;
+};
+
+export const maxHeight = createDimensionQueryHelper<number>(
+  ({ value, dimensions }) => value >= dimensions.height
+);
+
+export const maxWidth = createDimensionQueryHelper<number>(
+  ({ value, dimensions }) => value >= dimensions.width
+);
+
+export const minHeight = createDimensionQueryHelper<number>(
+  ({ value, dimensions }) => value <= dimensions.height
+);
+
+export const minWidth = createDimensionQueryHelper<number>(
+  ({ value, dimensions }) => value <= dimensions.width
+);
+
+export const minAspectRatio = createDimensionQueryHelper<number>(
+  ({ value, dimensions: { width, height } }) => value <= width / height
+);
+
+export const maxAspectRatio = createDimensionQueryHelper<number>(
+  ({ value, dimensions: { width, height } }) => value >= width / height
+);
+
+export const aspectRatio = createDimensionQueryHelper<number>(
+  ({ value, dimensions: { width, height } }) => value === width / height
+);