@seed-design/lynx-react 0.6.0 → 0.6.1

package/lib/hooks/useIconColor.d.ts

@@ -6,8 +6,8 @@ export interface UseIconColorOptions {
 }
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
- * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+ * `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+ * patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -31,8 +31,8 @@ function cancelTintColorSync(frameRef) {
 }
 /**
 * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
-* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
-* 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+* `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+* patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
 *
 * ```tsx
 * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -44,6 +44,7 @@ function useIconColor(deps, options) {
 	const sourceRef = options?.sourceRef;
 	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
+	const theme = useGlobalProps()?.theme;
 	function syncOnUiAppear() {
 		"main thread";
 		if (!enabled) return;
@@ -55,7 +56,11 @@ function useIconColor(deps, options) {
 		return () => {
 			runOnMainThread(cancelTintColorSync)(frameRef);
 		};
-	}, [...deps, enabled]);
+	}, [
+		...deps,
+		enabled,
+		theme
+	]);
 	return {
 		ref,
 		"main-thread:binduiappear": syncOnUiAppear

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.10.0",
+    "@seed-design/lynx-css": "0.10.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/hooks/useIconColor.test.ts

@@ -1,13 +1,49 @@
+import type * as ReactLynx from "@lynx-js/react";
 import { renderHook } from "@lynx-js/react/testing-library";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { useIconColor } from "./useIconColor";
 
+const testState = vi.hoisted(() => ({
+  theme: "light",
+  workletCalls: [] as number[],
+}));
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof ReactLynx>();
+
+  return {
+    ...actual,
+    runOnMainThread:
+      (_worklet: (...args: never[]) => unknown) =>
+      (...args: unknown[]) => {
+        testState.workletCalls.push(args.length);
+      },
+    useGlobalProps: () => ({ theme: testState.theme }),
+  };
+});
+
 describe("useIconColor", () => {
+  beforeEach(() => {
+    testState.theme = "light";
+    testState.workletCalls.length = 0;
+  });
+
   it("returns icon tint sync props", () => {
     const { result } = renderHook(() => useIconColor([]));
 
     expect(result.current).toHaveProperty("ref");
     expect(result.current["main-thread:binduiappear"]).toBeDefined();
   });
+
+  it("schedules tint color synchronization when the system theme changes", () => {
+    const { rerender } = renderHook(() => useIconColor([]));
+
+    expect(testState.workletCalls).toEqual([3]);
+
+    testState.theme = "dark";
+    rerender();
+
+    expect(testState.workletCalls).toEqual([3, 1, 3]);
+  });
 });

package/src/hooks/useIconColor.ts

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { DependencyList, RefObject } from "@lynx-js/react";
 
@@ -70,8 +70,8 @@ function cancelTintColorSync(frameRef: RefObject<number>) {
 
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
- * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+ * `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+ * patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -89,6 +89,7 @@ export function useIconColor(
   const sourceRef = options?.sourceRef as RefObject<IconElement> | undefined;
   const enabled = options?.enabled ?? true;
   const frameRef = useMainThreadRef<number>(0);
+  const theme = (useGlobalProps() as { theme?: unknown } | undefined)?.theme;
 
   function syncOnUiAppear() {
     "main thread";
@@ -96,7 +97,6 @@ export function useIconColor(
     syncTintColorOnce(ref, sourceRef);
   }
 
-  // deps 는 caller 가 책임.
   useEffect(() => {
     if (!enabled) return;
 
@@ -104,7 +104,7 @@ export function useIconColor(
     return () => {
       runOnMainThread(cancelTintColorSync)(frameRef);
     };
-  }, [...deps, enabled]);
+  }, [...deps, enabled, theme]);
 
   return { ref, "main-thread:binduiappear": syncOnUiAppear };
 }