chore: Sync base component hook with upstream (#67)

Author: just-boris

src/internal/base-component/__tests__/use-base-component.test.tsx

@@ -1,39 +1,53 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import { afterEach, expect, test, vi } from "vitest";
 
-import { COMPONENT_METADATA_KEY } from "@cloudscape-design/component-toolkit/internal";
+import { COMPONENT_METADATA_KEY, useComponentMetrics } from "@cloudscape-design/component-toolkit/internal";
 
 import useBaseComponent, {
   InternalBaseComponentProps,
 } from "../../../../lib/components/internal/base-component/use-base-component";
-import { useTelemetry } from "../../../../lib/components/internal/base-component/use-telemetry";
 import { PACKAGE_VERSION } from "../../../../lib/components/internal/environment";
 
 type InternalDemoProps = InternalBaseComponentProps;
 function InternalDemo({ __internalRootRef }: InternalDemoProps) {
   return <div ref={__internalRootRef}>Internal Demo Component</div>;
 }
 
+declare global {
+  interface Node {
+    [COMPONENT_METADATA_KEY]?: { name: string; version: string };
+  }
+}
+
 function Demo({ variant }: { variant: string }) {
   const baseComponentProps = useBaseComponent("DemoComponent", { props: { variant } });
   return <InternalDemo {...baseComponentProps} />;
 }
 
-vi.mock("../../../../lib/components/internal/base-component/use-telemetry", () => {
-  return { useTelemetry: vi.fn(() => null) };
+vi.mock("@cloudscape-design/component-toolkit/internal", async (importOriginal) => {
+  return { ...(await importOriginal()), useComponentMetrics: vi.fn(() => {}) };
+});
+
+afterEach(() => {
+  vi.resetAllMocks();
 });
 
 test("should attach the metadata to the returned root DOM node", () => {
   const { container } = render(<Demo variant="default" />);
-  const rootNode: any = container.firstChild;
-  expect(rootNode[COMPONENT_METADATA_KEY]?.name).toBe("DemoComponent");
-  expect(rootNode[COMPONENT_METADATA_KEY]?.version).toBe(PACKAGE_VERSION);
+  const rootNode = container.firstChild;
+  expect(rootNode![COMPONENT_METADATA_KEY]!.name).toBe("DemoComponent");
+  expect(rootNode![COMPONENT_METADATA_KEY]!.version).toBe(PACKAGE_VERSION);
 });
 
 test("should call the useTelemetry hook passing down the given component name and its props", () => {
-  vi.resetAllMocks();
   render(<Demo variant="default" />);
-  expect(useTelemetry).toHaveBeenCalledWith("DemoComponent", { props: { variant: "default" } });
+  expect(useComponentMetrics).toHaveBeenCalledWith(
+    "DemoComponent",
+    expect.objectContaining({ packageVersion: PACKAGE_VERSION }),
+    {
+      props: { variant: "default" },
+    },
+  );
 });

src/internal/base-component/use-base-component.ts

@@ -7,11 +7,13 @@ import {
   ComponentConfiguration,
   initAwsUiVersions,
   useComponentMetadata,
+  useComponentMetrics,
+  useFocusVisible,
 } from "@cloudscape-design/component-toolkit/internal";
 
-import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
-import useFocusVisible from "../utils/focus-visible";
-import { useTelemetry } from "./use-telemetry";
+import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from "../environment";
+import { getVisualTheme } from "../utils/get-visual-theme";
+import { useVisualRefresh } from "./use-visual-refresh";
 
 initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
 
@@ -25,8 +27,14 @@ export interface InternalBaseComponentProps {
  * root DOM node and emits the telemetry for this component.
  */
 export default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {
-  useTelemetry(componentName, config);
+  const isVisualRefresh = useVisualRefresh();
+  const theme = getVisualTheme(THEME, isVisualRefresh);
+  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config);
   useFocusVisible();
-  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);
+  const elementRef = useComponentMetadata<T>(componentName, {
+    packageName: PACKAGE_SOURCE,
+    version: PACKAGE_VERSION,
+    theme,
+  });
   return { __internalRootRef: elementRef };
 }