chore: Remove empty children from components tree representation and … (#139)

Co-authored-by: Francesco Longo <[email protected]>

Author: fralongo

src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx

@@ -23,7 +23,7 @@ describe('getComponentsTree', () => {
       );
       const target = container.querySelector('#outer-target') as HTMLElement;
       expect(getComponentsTree(target)).toEqual([
-        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
       ]);
     });
     test('only includes components inside the specified element', () => {
@@ -38,10 +38,10 @@ describe('getComponentsTree', () => {
         </>
       );
       expect(getComponentsTree(container.querySelector('#outer-target-1') as HTMLElement)).toEqual([
-        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
       ]);
       expect(getComponentsTree(container.querySelector('#outer-target-2') as HTMLElement)).toEqual([
-        { name: 'ComponentTwo', label: 'sub label', children: [] },
+        { name: 'ComponentTwo', label: 'sub label' },
       ]);
     });
     test('can include multiple components', () => {
@@ -55,11 +55,11 @@ describe('getComponentsTree', () => {
         {
           name: 'ComponentThree',
           children: [
-            { name: 'ComponentTwo', label: 'sub label', children: [] },
-            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+            { name: 'ComponentTwo', label: 'sub label' },
+            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
           ],
         },
-        { name: 'ComponentTwo', label: 'sub label', children: [] },
+        { name: 'ComponentTwo', label: 'sub label' },
       ]);
     });
     test('can include multiple nested components', () => {
@@ -74,13 +74,13 @@ describe('getComponentsTree', () => {
         {
           name: 'ComponentThree',
           children: [
-            { name: 'ComponentTwo', label: 'sub label', children: [] },
-            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+            { name: 'ComponentTwo', label: 'sub label' },
+            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
             {
               name: 'ComponentThree',
               children: [
-                { name: 'ComponentTwo', label: 'sub label', children: [] },
-                { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+                { name: 'ComponentTwo', label: 'sub label' },
+                { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
               ],
             },
           ],
@@ -98,11 +98,11 @@ describe('getComponentsTree', () => {
         {
           name: 'ComponentThree',
           children: [
-            { name: 'ComponentTwo', label: 'sub label', children: [] },
-            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+            { name: 'ComponentTwo', label: 'sub label' },
+            { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
           ],
         },
-        { name: 'ComponentTwo', label: 'sub label', children: [] },
+        { name: 'ComponentTwo', label: 'sub label' },
       ]);
     });
     test('skips malformed metadata', () => {
@@ -113,7 +113,7 @@ describe('getComponentsTree', () => {
       );
       const target = container.querySelector('#outer-target') as HTMLElement;
       expect(getComponentsTree(target)).toEqual([
-        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] },
+        { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
       ]);
     });
   });

src/internal/analytics-metadata/interfaces.ts

@@ -12,7 +12,7 @@ export interface GeneratedAnalyticsMetadata {
   contexts: Array<GeneratedAnalyticsMetadataComponentContext>;
 }
 
-export interface GeneratedAnalyticsMetadataComponent {
+interface GeneratedAnalyticsMetadataComponent {
   // name of the component. For example: "awsui.RadioGroup". We prefix the actual name with awsui to account for future tagging of custom components
   name: string;
 

src/internal/analytics-metadata/page-scanner-utils.ts

@@ -3,10 +3,12 @@
 
 import { METADATA_ATTRIBUTE } from './attributes';
 import { isNodeComponent } from './dom-utils';
-import { GeneratedAnalyticsMetadataComponent } from './interfaces';
 import { getGeneratedAnalyticsMetadata } from './utils';
 
-interface GeneratedAnalyticsMetadataComponentTree extends GeneratedAnalyticsMetadataComponent {
+interface GeneratedAnalyticsMetadataComponentTree {
+  name: string;
+  label: string;
+  properties?: Record<string, string>;
   children?: Array<GeneratedAnalyticsMetadataComponentTree>;
 }
 
@@ -26,10 +28,14 @@ const getComponentsTreeRecursive = (
       return;
     }
     visited.add(componentNode);
-    tree.push({
+    const treeItem: GeneratedAnalyticsMetadataComponentTree = {
       ...getGeneratedAnalyticsMetadata(componentNode).contexts[0].detail,
-      children: getComponentsTreeRecursive(componentNode, visited),
-    });
+    };
+    const children = getComponentsTreeRecursive(componentNode, visited);
+    if (children.length > 0) {
+      treeItem.children = children;
+    }
+    tree.push(treeItem);
   });
   return tree;
 };