diff --git a/src/internal/base-component/__tests__/use-component-metadata.test.tsx b/src/internal/base-component/__tests__/use-component-metadata.test.tsx
index 1f0b057..36f1289 100644
--- a/src/internal/base-component/__tests__/use-component-metadata.test.tsx
+++ b/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
Test
;
+ }
+
+ const { container } = render();
+ 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' });
diff --git a/src/internal/base-component/component-metadata.ts b/src/internal/base-component/component-metadata.ts
index 70c69c6..70a83c8 100644
--- a/src/internal/base-component/component-metadata.ts
+++ b/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(
componentName: string,
- packageVersion: string,
+ packageMetadata: PackageMetadata | string,
analyticsMetadata?: AnalyticsMetadata
) {
const elementRef = useRef(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