chore: Add additional metadata to reporting (#132)

Author: just-boris

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

@@ -18,6 +18,28 @@ test('should attach readonly metadata to the returned root DOM node', () => {
   expect(Object.isFrozen(rootNode[COMPONENT_METADATA_KEY])).toBe(true);
 });
 
+test('should attach package metadata to the DOM node', () => {
+  function TestComponent() {
+    const ref = useComponentMetadata('test-component', {
+      packageName: 'component-toolkit',
+      version: '1.0.0',
+      theme: 'default',
+    });
+    return <div ref={ref}>Test</div>;
+  }
+
+  const { container } = render(<TestComponent />);
+  const rootNode: any = container.firstChild;
+
+  expect(rootNode[COMPONENT_METADATA_KEY]).toEqual({
+    name: 'test-component',
+    packageName: 'component-toolkit',
+    version: '1.0.0',
+    theme: 'default',
+  });
+  expect(Object.isFrozen(rootNode[COMPONENT_METADATA_KEY])).toBe(true);
+});
+
 test('should include analytics property when provided', () => {
   function TestComponent() {
     const ref = useComponentMetadata('test-component', '3.0.0', { instanceId: '123' });

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

@@ -6,29 +6,36 @@ import { AnalyticsMetadata } from './metrics/interfaces';
 
 export const COMPONENT_METADATA_KEY = '__awsuiMetadata__';
 
-interface AwsUiMetadata {
-  name: string;
+interface PackageMetadata {
+  packageName?: string;
   version: string;
+  theme?: string;
+}
+
+interface ComponentMetadata extends PackageMetadata {
+  name: string;
   analytics?: AnalyticsMetadata;
 }
 
 interface HTMLMetadataElement extends HTMLElement {
-  [COMPONENT_METADATA_KEY]: AwsUiMetadata;
+  [COMPONENT_METADATA_KEY]: ComponentMetadata;
 }
 
 export function useComponentMetadata<T = any>(
   componentName: string,
-  packageVersion: string,
+  packageMetadata: PackageMetadata | string,
   analyticsMetadata?: AnalyticsMetadata
 ) {
   const elementRef = useRef<T>(null);
 
   useEffect(() => {
     if (elementRef.current) {
+      const pkgMetadata = typeof packageMetadata === 'string' ? { version: packageMetadata } : packageMetadata;
+
       const node = elementRef.current as unknown as HTMLMetadataElement;
-      const metadata: AwsUiMetadata = {
+      const metadata: ComponentMetadata = {
+        ...pkgMetadata,
         name: componentName,
-        version: packageVersion,
       };
 
       // Only add analytics property to metadata if analytics property is non-empty