refactor(react, lit): tighten ChildList any/unknown types (#1510)

Author: andrewkolos

renderers/lit/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+- (v0_9) Tighten resolved child list types in the basic catalog layout components.
 - (v0_9) Narrow `A2uiChildRef` to the supported child reference shapes used by
   `renderNode`.
 

renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts

@@ -14,10 +14,19 @@
  * limitations under the License.
  */
 
-import {ComponentApi} from '@a2ui/web_core/v0_9';
+import {ComponentApi, type ComponentId} from '@a2ui/web_core/v0_9';
 import {A2uiLitElement} from '../../a2ui-lit-element.js';
 import {injectBasicCatalogStyles, computeColorVariant} from '@a2ui/web_core/v0_9/basic_catalog';
 
+export type ResolvedChildRef =
+  | ComponentId
+  | {
+      id: ComponentId;
+      basePath: string;
+    };
+
+export type ResolvedChildList = ResolvedChildRef[];
+
 /**
  * A base class for A2UI basic catalog components.
  *

renderers/lit/src/v0_9/catalogs/basic/components/Column.ts

@@ -18,7 +18,10 @@ import {html, nothing, css, PropertyValues} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
 import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {
+  BasicCatalogA2uiLitElement,
+  type ResolvedChildList,
+} from '../basic-catalog-a2ui-lit-element.js';
 import {A2uiController} from '@a2ui/lit/v0_9';
 
 const JUSTIFY_MAP: Record<string, string> = {
@@ -71,9 +74,9 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
     const props = this.controller.props;
     if (!props) return nothing;
 
-    const children = Array.isArray(props.children) ? props.children : [];
+    const children: ResolvedChildList = Array.isArray(props.children) ? props.children : [];
 
-    return html` ${map(children, (child: any) => html`${this.renderNode(child)}`)} `;
+    return html` ${map(children, child => html`${this.renderNode(child)}`)} `;
   }
 }
 

renderers/lit/src/v0_9/catalogs/basic/components/List.ts

@@ -18,7 +18,10 @@ import {html, nothing, css, PropertyValues} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
 import {ListApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {
+  BasicCatalogA2uiLitElement,
+  type ResolvedChildList,
+} from '../basic-catalog-a2ui-lit-element.js';
 import {A2uiController} from '@a2ui/lit/v0_9';
 
 @customElement('a2ui-list')
@@ -48,8 +51,8 @@ export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi>
     const props = this.controller.props;
     if (!props) return nothing;
 
-    const children = Array.isArray(props.children) ? props.children : [];
-    return html`${map(children, (child: any) => html`${this.renderNode(child)}`)}`;
+    const children: ResolvedChildList = Array.isArray(props.children) ? props.children : [];
+    return html`${map(children, child => html`${this.renderNode(child)}`)}`;
   }
 }
 

renderers/lit/src/v0_9/catalogs/basic/components/Row.ts

@@ -18,7 +18,10 @@ import {html, nothing, css, PropertyValues} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
 import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {
+  BasicCatalogA2uiLitElement,
+  type ResolvedChildList,
+} from '../basic-catalog-a2ui-lit-element.js';
 import {A2uiController} from '@a2ui/lit/v0_9';
 
 const JUSTIFY_MAP: Record<string, string> = {
@@ -71,9 +74,9 @@ export class A2uiBasicRowElement extends BasicCatalogA2uiLitElement<typeof RowAp
     const props = this.controller.props;
     if (!props) return nothing;
 
-    const children = Array.isArray(props.children) ? props.children : [];
+    const children: ResolvedChildList = Array.isArray(props.children) ? props.children : [];
 
-    return html` ${map(children, (child: any) => html`${this.renderNode(child)}`)} `;
+    return html` ${map(children, child => html`${this.renderNode(child)}`)} `;
   }
 }
 

renderers/react/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+- (v0_9) Tighten resolved child list types in the basic catalog layout components.
+
 ## 0.10.0
 
 - **BREAKING CHANGE**: (v0_9) Rename Icon `path` property to `svgPath` and update component to correctly render SVG elements.

renderers/react/src/v0_9/catalog/basic/components/ChildList.tsx

@@ -15,35 +15,39 @@
  */
 
 import React from 'react';
-import {type ComponentContext} from '@a2ui/web_core/v0_9';
+import {type ComponentContext, type ComponentId} from '@a2ui/web_core/v0_9';
+
+type ResolvedChildRef =
+  | ComponentId
+  | {
+      id: ComponentId;
+      basePath: string;
+    };
+
+type ResolvedChildList = ResolvedChildRef[];
 
 export const ChildList: React.FC<{
-  childList: unknown;
+  childList: ResolvedChildList;
   context: ComponentContext;
-  buildChild: (id: string, basePath?: string) => React.ReactNode;
+  buildChild: (id: ComponentId, basePath?: string) => React.ReactNode;
 }> = ({childList, buildChild}) => {
-  if (Array.isArray(childList)) {
-    return (
-      <>
-        {childList.map((item: unknown, i: number) => {
-          // The new binder outputs objects like { id: string, basePath: string } for arrays of structural nodes
-          if (item && typeof item === 'object' && 'id' in item) {
-            const node = item as {id: string; basePath?: string};
-            return (
-              <React.Fragment key={`${node.id}-${i}`}>
-                {buildChild(node.id, node.basePath)}
-              </React.Fragment>
-            );
-          }
-          // Fallback for static string lists
-          if (typeof item === 'string') {
-            return <React.Fragment key={`${item}-${i}`}>{buildChild(item)}</React.Fragment>;
-          }
-          return null;
-        })}
-      </>
-    );
-  }
+  if (!Array.isArray(childList)) return null;
+
+  return (
+    <>
+      {childList.map((childRef, index) => {
+        if (typeof childRef === 'string') {
+          return (
+            <React.Fragment key={`${childRef}-${index}`}>{buildChild(childRef)}</React.Fragment>
+          );
+        }
 
-  return null;
+        return (
+          <React.Fragment key={`${childRef.id}-${childRef.basePath}`}>
+            {buildChild(childRef.id, childRef.basePath)}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
 };