@seed-design/lynx-react 0.6.2 → 0.6.3

package/lib/hooks/useIconColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAuBA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CA6BA"}

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -45,12 +45,17 @@ function useIconColor(deps, options) {
 	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
 	const theme = useGlobalProps()?.theme;
+	const hasMountedRef = useRef(false);
 	function syncOnUiAppear() {
 		"main thread";
 		if (!enabled) return;
-		syncTintColorOnce(ref, sourceRef);
+		scheduleTintColorSync(ref, sourceRef, frameRef);
 	}
 	useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			return;
+		}
 		if (!enabled) return;
 		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
 		return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/components/Icon/Icon.test.tsx

@@ -80,7 +80,7 @@ function installMainThreadStyleMocks(getComputedColor: () => string) {
 }
 
 describe("InternalIcon", () => {
-  it("reads the updated computed color in the next frame", async () => {
+  it("reads the updated computed color after dependency changes", async () => {
     let computedColor = "rgb(134, 139, 148)";
     const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
 
@@ -94,16 +94,14 @@ describe("InternalIcon", () => {
     await waitSchedule();
 
     const { image } = getSourceAndImage();
-    expect(frames.size).toBe(1);
-    runNextFrame();
-
-    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+    expect(frames.size).toBe(0);
+    expect(image.getAttribute("tint-color")).toBeNull();
 
     rerender(renderIcon("checked"));
     await waitSchedule();
 
     expect(frames.size).toBe(1);
-    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+    expect(image.getAttribute("tint-color")).toBeNull();
 
     computedColor = "rgb(255, 102, 0)";
     runNextFrame();

package/src/hooks/useIconColor.test.ts

@@ -15,7 +15,7 @@ vi.mock("@lynx-js/react", async (importOriginal) => {
   return {
     ...actual,
     runOnMainThread:
-      (_worklet: (...args: never[]) => unknown) =>
+      () =>
       (...args: unknown[]) => {
         testState.workletCalls.push(args.length);
       },
@@ -36,14 +36,14 @@ describe("useIconColor", () => {
     expect(result.current["main-thread:binduiappear"]).toBeDefined();
   });
 
-  it("schedules tint color synchronization when the system theme changes", () => {
+  it("avoids cross-thread calls on mount and resynchronizes after theme changes", () => {
     const { rerender } = renderHook(() => useIconColor([]));
 
-    expect(testState.workletCalls).toEqual([3]);
+    expect(testState.workletCalls).toEqual([]);
 
     testState.theme = "dark";
     rerender();
 
-    expect(testState.workletCalls).toEqual([3, 1, 3]);
+    expect(testState.workletCalls).toEqual([3]);
   });
 });

package/src/hooks/useIconColor.ts

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { DependencyList, RefObject } from "@lynx-js/react";
 
@@ -90,14 +90,20 @@ export function useIconColor(
   const enabled = options?.enabled ?? true;
   const frameRef = useMainThreadRef<number>(0);
   const theme = (useGlobalProps() as { theme?: unknown } | undefined)?.theme;
+  const hasMountedRef = useRef(false);
 
   function syncOnUiAppear() {
     "main thread";
     if (!enabled) return;
-    syncTintColorOnce(ref, sourceRef);
+    scheduleTintColorSync(ref, sourceRef, frameRef);
   }
 
   useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+
     if (!enabled) return;
 
     runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);