@codeandmoney/soelma 0.0.0-dev.1 → 0.0.0-dev.10

package/jest.config.js

@@ -0,0 +1,19 @@
+const { resolve } = require("path");
+const { name: displayName } = require("./package");
+
+module.exports = {
+  displayName,
+  testEnvironment: "node",
+  preset: "react-native",
+  cacheDirectory: resolve(__dirname, "./node_modules/.jestcache"),
+  moduleFileExtensions: ["ts", "tsx", "js"],
+  testRegex: "\\.test\\.(js|ts)x?$",
+  coveragePathIgnorePatterns: ["init.ts"],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      statements: 100,
+    },
+  },
+};

package/package.json

@@ -3,13 +3,27 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.0-dev.1",
+  "version": "0.0.0-dev.10",
   "private": false,
   "main": "index.js",
   "types": "index.d.ts",
   "author": "David <4661784+retyui@users.noreply.github.com>",
   "description": "Fork of git@github.com:retyui/react-native-stylex.git",
   "license": "MIT",
+  "scripts": {
+    "prebuild": "rm -rf lib",
+    "build": "tsc -p ./tsconfig.build.json",
+    "postbuild": "mkdir -p lib/make-use-styles && cp src/make-use-styles/* lib/make-use-styles && rm -rf lib/**/*test.* && prettier --write lib/**/*.{js,ts}",
+    "clean-publish": "yarn test && yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib",
+    "pub": "yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib",
+    "publish-next": "yarn clean-publish && cd lib && npm publish --tag next",
+    "presize": "yarn build",
+    "postinstall": "rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs",
+    "lint": "eslint './src/*.{js,ts,tsx}' --quiet",
+    "test": "jest --coverage",
+    "size": "size-limit",
+    "ci": "yarn lint && yarn test && yarn size"
+  },
   "peerDependencies": {
     "react": ">=16.4.0",
     "react-native": ">=0.59.0"
@@ -22,7 +36,28 @@
       "optional": true
     }
   },
-  "scripts": {
-    "postinstall": "rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs"
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.83.0",
+    "@size-limit/preset-app": "^11.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "clean-publish": "^4.2.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "jest": "^29.7.0",
+    "prettier": "^3.1.1",
+    "react": "^19.2.3",
+    "react-native": "^0.83.0",
+    "react-native-dark-mode": "^0.2.2",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-test-app": "^5.0.5",
+    "react-test-renderer": "^19.2.3",
+    "size-limit": "^11.0.1",
+    "typescript": "^5.3.3"
   }
 }

package/src/appearance/index.ts

@@ -0,0 +1,30 @@
+import "./init";
+
+import { Appearance } from "react-native";
+
+import { onUse } from "../dependency-usage";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+
+export type ColorSchemeName = "light" | "dark" | "default";
+
+export function appearance<T>({ dark, light, default: defaultScheme }: { [mode in ColorSchemeName]?: T }): T | undefined {
+  onUse(UI_MODE_DEPENDENCY_KEY);
+
+  // Note: getColorScheme() will always return light when debugging with Chrome.
+  if (Appearance.getColorScheme() === "light") {
+    return light;
+  }
+
+  if (Appearance.getColorScheme() === "dark") {
+    return dark;
+  }
+
+  return defaultScheme;
+}
+
+export const darkAppearance = <T>(dark: T): T | undefined => appearance<T>({ dark });
+
+export const lightAppearance = <T>(light: T): T | undefined => appearance<T>({ light });
+
+export const noPreferenceAppearance = <T>(defaultScheme: T): T | undefined => appearance<T>({ default: defaultScheme });

package/src/appearance/init.ts

@@ -0,0 +1,12 @@
+import { Appearance } from "react-native";
+
+import { addDependency } from "../dependency-registry";
+import { createEventEmitter } from "../create-event-emitter";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+
+const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
+
+addDependency(UI_MODE_DEPENDENCY_KEY, (handler: () => void) => on(handler));
+
+Appearance.addChangeListener(emit);

package/{context.js → src/context.ts}

@@ -1,3 +1,6 @@
 import { createContext } from "react";
-export const themeContext = createContext(null);
+import { DefaultTheme } from "./default-theme";
+
+export const themeContext = createContext<DefaultTheme | null>(null);
+
 export const { Provider: ThemeProvider, Consumer: ThemeConsumer } = themeContext;

package/src/create-event-emitter.ts

@@ -0,0 +1,26 @@
+type Handler = () => void;
+type UnSubscribe = () => void;
+
+interface EventsRegistry {
+  [eventName: string]: Array<Handler>;
+}
+
+interface Result {
+  on: (callback: Handler) => UnSubscribe;
+  emit: () => void;
+}
+
+const events: EventsRegistry = {};
+
+export function createEventEmitter(event: string): Result {
+  const emit = (): void => (events[event] || []).forEach((fn) => fn());
+  const on = (cb: Handler): UnSubscribe => {
+    (events[event] = events[event] || []).push(cb);
+
+    return () => {
+      events[event] = events[event]!.filter((fn) => fn !== cb);
+    };
+  };
+
+  return { on, emit };
+}

package/src/dark-mode/index.ts

@@ -0,0 +1,26 @@
+import "./init";
+
+import { onUse } from "../dependency-usage";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+import { state } from "./state";
+
+export type UiType = "dark" | "light";
+
+export function uiMode<T>({ dark, light }: { [mode in UiType]?: T }): T | undefined {
+  onUse(UI_MODE_DEPENDENCY_KEY);
+
+  if (state.mode === "dark") {
+    return dark;
+  }
+
+  if (state.mode === "light") {
+    return light;
+  }
+
+  return undefined;
+}
+
+export const darkUiMode = <T>(dark: T): T | undefined => uiMode<T>({ dark });
+
+export const lightUiMode = <T>(light: T): T | undefined => uiMode<T>({ light });

package/src/dark-mode/init.ts

@@ -0,0 +1,19 @@
+import { eventEmitter, Mode } from "react-native-dark-mode";
+
+import { addDependency } from "../dependency-registry";
+import { createEventEmitter } from "../create-event-emitter";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+import { state } from "./state";
+
+const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
+
+addDependency(UI_MODE_DEPENDENCY_KEY, (handler: () => void) => on(handler));
+
+eventEmitter.on("currentModeChanged", (newMode: Mode) => {
+  if (state.mode !== newMode) {
+    state.mode = newMode;
+
+    emit();
+  }
+});

package/{dark-mode/state.js → src/dark-mode/state.ts}

@@ -1,4 +1,5 @@
 import { initialMode } from "react-native-dark-mode";
+
 export const state = {
-    mode: initialMode,
+  mode: initialMode,
 };

package/src/default-theme.ts

@@ -0,0 +1,4 @@
+// This interface can be augmented by users to add default types for the theme when using react-native-stylex.
+// Use module augmentation to append your own type definition in a your_custom_stylex_type.d.ts file.
+// https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+export interface DefaultTheme {}

package/src/dependency-registry.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/dependency-usage.ts

@@ -0,0 +1,21 @@
+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;
+}

package/src/dimensions/index.ts

@@ -0,0 +1,20 @@
+import "./init";
+
+import { Dimensions, ScaledSize } from "react-native";
+
+import { onUse } from "../dependency-usage";
+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,32 @@
+import { Dimensions, ScaledSize } from "react-native";
+
+import { createEventEmitter } from "../create-event-emitter";
+import { addDependency } from "../dependency-registry";
+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,9 @@
+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,15 @@
+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 "./use-theme";
+export { withStyles } from "./with-styles";
+export { ThemeProvider, ThemeConsumer } from "./context";
+export { useColorTransition } from "./use-color-transition";
+export { makeUseStyles } from "./make-use-styles";
+export type { DefaultTheme } from "./default-theme";
+export type { InferInjectedStyledProps } from "./with-styles";

package/{makeUseStyles/createUseStylesTheme.js → src/make-use-styles/create-use-styles-theme.js}

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
-import { useTheme } from "../useTheme";
-import { resetUsing } from "../dependencyUsage";
+import { useTheme } from "../use-theme";
+import { resetUsing } from "../dependency-usage";
 import { getDependenciesKeys, useForceUpdate, subscribe } from "./utils";
 
-export function createUseStylesTheme(getStyles) {
+export function createUseStylesTheme(getStyles, getVariants) {
   const scope = {
     styles: new WeakMap(),
     forceUpdate: [],
@@ -20,7 +20,7 @@ export function createUseStylesTheme(getStyles) {
     scope.unsubscribe();
     resetUsing();
 
-    const style = StyleSheet.create(getStyles(theme));
+    const style = StyleSheet.create(getStyles?.(theme) ?? {});
     const keys = getDependenciesKeys();
 
     scope.unsubscribe = subscribe(keys, onUpdate);
@@ -28,7 +28,7 @@ export function createUseStylesTheme(getStyles) {
     return style;
   }
 
-  return function useStyles() {
+  function useStyles(variants) {
     const theme = useTheme();
 
     useForceUpdate(scope);
@@ -37,6 +37,23 @@ export function createUseStylesTheme(getStyles) {
       scope.styles.set(theme, initStyle(theme));
     }
 
+    if (getVariants) {
+      const configVariants = getVariants(theme);
+      const requestedVarians = {};
+
+      for (const key in variants) {
+        const value = configVariants[key][variants[key]];
+        Object.assign(requestedVarians, value);
+      }
+
+      return {
+        ...scope.styles.get(theme),
+        ...StyleSheet.create({ variants: requestedVarians }),
+      };
+    }
+
     return scope.styles.get(theme);
-  };
+  }
+
+  return useStyles;
 }

package/src/make-use-styles/create-use-styles-theme.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/{makeUseStyles/createUseStylesWithoutTheme.js → src/make-use-styles/create-use-styles-without-theme.js}

@@ -1,10 +1,11 @@
 import { StyleSheet } from "react-native";
-import { resetUsing } from "../dependencyUsage";
+import { resetUsing } from "../dependency-usage";
 import { getDependenciesKeys, subscribe, useForceUpdate } from "./utils";
 
-export function createUseStylesWithoutTheme(getStyles) {
+export function createUseStylesWithoutTheme(getStyles, getVariants) {
   const scope = {
     style: null,
+    variants: null,
     forceUpdate: [],
     unsubscribe: () => {},
   };
@@ -19,7 +20,7 @@ export function createUseStylesWithoutTheme(getStyles) {
     scope.unsubscribe();
     resetUsing();
 
-    scope.style = StyleSheet.create(getStyles());
+    scope.style = StyleSheet.create(getStyles?.() ?? {});
 
     const keys = getDependenciesKeys();
 
@@ -28,9 +29,24 @@ export function createUseStylesWithoutTheme(getStyles) {
 
   initStyle();
 
-  function useStyles() {
+  function useStyles(variants) {
     useForceUpdate(scope);
 
+    if (getVariants) {
+      const configVariants = getVariants();
+      const requestedVarians = {};
+
+      for (const key in variants) {
+        const value = configVariants[key][variants[key]];
+        Object.assign(requestedVarians, value);
+      }
+
+      return {
+        ...scope.style,
+        ...StyleSheet.create({ variants: requestedVarians }),
+      };
+    }
+
     return scope.style;
   }
 

package/src/make-use-styles/create-use-styles-without-theme.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);
+});