optimize useWidgetId hook by utilizing latest and greatest createBindingAtom (#1067)

Author: anserwaseem

.changeset/gold-pans-fry.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-framework": patch
+---
+
+optimize useWidgetId hook by utilizing latest and greatest createBindingAtom

packages/framework/src/hooks/__tests__/useWidgetId.test.ts

@@ -1,14 +1,24 @@
 import { renderHook } from "@testing-library/react";
 import { useWidgetId } from "../useWidgetId";
 
-test("returns a uuid without dashes", () => {
+test("generates a valid ID when no ID is provided", () => {
   const { result } = renderHook(() => useWidgetId());
-  expect(result.current.resolvedWidgetId).toMatch(/^[a-zA-Z]*$/);
+  expect(result.current.resolvedWidgetId).toMatch(/^[a-zA-Z]+$/);
+  expect(result.current.resolvedTestId).toBeUndefined();
 });
 
-test("returns a passed in id", () => {
-  const { result } = renderHook(() => useWidgetId("test"));
-  expect(result.current.resolvedWidgetId).toMatch("test");
+test("uses the provided ID when valid", () => {
+  const { result } = renderHook(() => useWidgetId("validId"));
+  expect(result.current.resolvedWidgetId).toBe("validId");
 });
 
-test.todo("throws an error if the id is already in use");
+test("generates a random ID when provided ID is invalid", () => {
+  const { result } = renderHook(() => useWidgetId("123 invalid"));
+  expect(result.current.resolvedWidgetId).not.toBe("123 invalid");
+});
+
+test("preserves test ID when provided", () => {
+  const { result } = renderHook(() => useWidgetId("validId", "test-123"));
+  expect(result.current.resolvedWidgetId).toBe("validId");
+  expect(result.current.resolvedTestId).toBe("test-123");
+});

packages/framework/src/hooks/useWidgetId.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
+import { atom, useAtomValue } from "jotai";
 import type { Expression } from "../shared";
-import { error, isExpression } from "../shared";
-import { evaluate } from "../evaluate/evaluate";
-import { defaultScreenContext } from "../state";
+import { deepCloneAsJSON, error, isExpression } from "../shared";
+import { createBindingAtom } from "../evaluate";
 import { useCustomScope } from "./useCustomScope";
 
 export const useWidgetId = (
@@ -13,31 +13,46 @@ export const useWidgetId = (
   resolvedTestId: string | undefined;
 } => {
   const customScope = useCustomScope();
-  const resolvedWidgetId = useMemo<string>(() => {
-    let workingId = id;
-    if (isExpression(workingId)) {
-      workingId = String(
-        evaluate(defaultScreenContext, workingId, customScope),
+
+  const idBindingAtom = useMemo(() => {
+    if (isExpression(id)) {
+      return createBindingAtom(
+        id,
+        deepCloneAsJSON(customScope) || {},
+        "widgetId",
       );
     }
-    if (workingId && JS_ID_REGEX.test(workingId)) {
+    return atom<string | undefined>(id);
+  }, [customScope, id]);
+
+  const resolvedId = useAtomValue(idBindingAtom);
+
+  const resolvedWidgetId = useMemo<string>(() => {
+    const workingId = resolvedId;
+    if (typeof workingId === "string" && JS_ID_REGEX.test(workingId)) {
       return workingId;
     }
     if (workingId) {
       error(
-        `${workingId} is not a valid javascript identifier. generating a random one`,
+        `${String(workingId)} is not a valid javascript identifier. generating a random one`,
       );
     }
     return generateRandomString(6);
-  }, [customScope, id]);
+  }, [resolvedId]);
 
-  const resolvedTestId = useMemo(() => {
+  const testIdBindingAtom = useMemo(() => {
     if (isExpression(testId)) {
-      return String(evaluate(defaultScreenContext, testId, customScope));
+      return createBindingAtom(
+        testId,
+        deepCloneAsJSON(customScope) || {},
+        "widgetTestId",
+      );
     }
-    return testId;
+    return atom<string | undefined>(testId);
   }, [customScope, testId]);
 
+  const resolvedTestId = useAtomValue(testIdBindingAtom) as string | undefined;
+
   return { resolvedWidgetId, resolvedTestId };
 };