chore: Add additional metadata (#81)

Co-authored-by: Yueying Lu <[email protected]>

Author: YueyingLu

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

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { render } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+
+import { COMPONENT_METADATA_KEY } from "@cloudscape-design/component-toolkit/internal";
+
+import useBaseComponent, {
+  InternalBaseComponentProps,
+} from "../../../../lib/components/internal/base-component/use-base-component";
+import { PACKAGE_SOURCE, 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; packageName: string; theme: string };
+  }
+}
+
+function Demo() {
+  const baseComponentProps = useBaseComponent("DemoComponent");
+  return <InternalDemo {...baseComponentProps} />;
+}
+
+vi.mock("../../../../lib/components/internal/utils/get-visual-theme", async (importOriginal) => {
+  return { ...(await importOriginal()), getVisualTheme: vi.fn(() => "test theme") };
+});
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+test("should attach the metadata to the returned root DOM node", () => {
+  const { container } = render(<Demo />);
+  const rootNode = container.firstChild;
+  expect(rootNode![COMPONENT_METADATA_KEY]!.name).toBe("DemoComponent");
+  expect(rootNode![COMPONENT_METADATA_KEY]!.version).toBe(PACKAGE_VERSION);
+  expect(rootNode![COMPONENT_METADATA_KEY]!.theme).toBe("test theme");
+  expect(rootNode![COMPONENT_METADATA_KEY]!.packageName).toBe(PACKAGE_SOURCE);
+});

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

@@ -9,8 +9,10 @@ import {
   useComponentMetadata,
 } from "@cloudscape-design/component-toolkit/internal";
 
-import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
+import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from "../environment";
+import { getVisualTheme } from "../utils/get-visual-theme";
 import { useTelemetry } from "./use-telemetry";
+import { useVisualRefresh } from "./use-visual-refresh";
 
 initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
 
@@ -25,7 +27,13 @@ export interface InternalBaseComponentProps {
  */
 export default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {
   useTelemetry(componentName, config);
-  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);
+  const isVisualRefresh = useVisualRefresh();
+  const theme = getVisualTheme(THEME, isVisualRefresh);
+  const elementRef = useComponentMetadata<T>(componentName, {
+    packageName: PACKAGE_SOURCE,
+    version: PACKAGE_VERSION,
+    theme,
+  });
   return { __internalRootRef: elementRef };
 }