meno-core 1.0.19 → 1.0.21

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx tsc:*)"
+    ]
+  }
+}

package/lib/client/core/ComponentBuilder.test.ts

@@ -2,7 +2,7 @@ import { test, expect, describe, beforeEach, mock } from "bun:test";
 import { ComponentBuilder } from "./ComponentBuilder";
 import { ComponentRegistry } from "../componentRegistry";
 import { ElementRegistry } from "../elementRegistry";
-import type { ComponentNode, CMSListNode, CMSItem } from "../../shared/types";
+import type { ComponentNode, ListNode, CMSItem } from "../../shared/types";
 import { NODE_TYPE } from "../../shared/constants";
 import { createMockElementRegistry } from "../../test-utils/mocks";
 
@@ -677,7 +677,7 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("buildComponent - CMS List", () => {
+  describe("buildComponent - List (Collection Mode)", () => {
     // Helper to create mock CMS items
     const createMockCMSItems = (count: number): CMSItem[] => {
       return Array.from({ length: count }, (_, i) => ({
@@ -688,21 +688,22 @@ describe("ComponentBuilder", () => {
       }));
     };
 
-    // Helper to create a CMS List node
-    const createCMSListNode = (
-      collection: string,
+    // Helper to create a List node with sourceType: 'collection'
+    const createCollectionListNode = (
+      source: string,
       children: ComponentNode[],
       options: { limit?: number; offset?: number } = {}
-    ): CMSListNode => ({
-      type: NODE_TYPE.CMS_LIST,
-      collection,
+    ): ListNode => ({
+      type: NODE_TYPE.LIST,
+      sourceType: 'collection',
+      source,
       children,
       ...options,
     });
 
     test("should render children for each CMS item", () => {
       const items = createMockCMSItems(3);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item content"] },
       ]);
 
@@ -721,7 +722,7 @@ describe("ComponentBuilder", () => {
 
     test("should add data-cms-item-index attribute to each item wrapper", () => {
       const items = createMockCMSItems(3);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item content"] },
       ]);
 
@@ -749,7 +750,7 @@ describe("ComponentBuilder", () => {
       const items: CMSItem[] = [
         { _id: "1", _slug: "test", title: "Hello World" },
       ];
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "h1", children: ["{{item.title}}"] },
       ]);
 
@@ -765,7 +766,7 @@ describe("ComponentBuilder", () => {
 
     test("should interpolate {{itemIndex}}, {{itemFirst}}, {{itemLast}}", () => {
       const items = createMockCMSItems(3);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "span", children: ["Index: {{itemIndex}}, First: {{itemFirst}}, Last: {{itemLast}}"] },
       ]);
 
@@ -782,7 +783,7 @@ describe("ComponentBuilder", () => {
     });
 
     test("should show empty state when no items", () => {
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item"] },
       ]);
 
@@ -799,7 +800,7 @@ describe("ComponentBuilder", () => {
     });
 
     test("should show empty state when collection not in map", () => {
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item"] },
       ]);
 
@@ -814,7 +815,7 @@ describe("ComponentBuilder", () => {
 
     test("should apply limit to items", () => {
       const items = createMockCMSItems(5);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item"] },
       ], { limit: 2 });
 
@@ -831,7 +832,7 @@ describe("ComponentBuilder", () => {
 
     test("should apply offset to items", () => {
       const items = createMockCMSItems(5);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item"] },
       ], { offset: 2 });
 
@@ -848,7 +849,7 @@ describe("ComponentBuilder", () => {
 
     test("should apply both limit and offset", () => {
       const items = createMockCMSItems(5);
-      const node = createCMSListNode("posts", [
+      const node = createCollectionListNode("posts", [
         { type: "node", tag: "div", children: ["Item"] },
       ], { offset: 1, limit: 2 });
 
@@ -870,9 +871,10 @@ describe("ComponentBuilder", () => {
         { _id: "3", _slug: "post3", featured: true, title: "Another Featured" },
         { _id: "4", _slug: "post4", featured: false, title: "Regular Post 2" },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         filter: { featured: true },
         children: [{ type: "node", tag: "div", children: ["Item"] }],
       };
@@ -895,9 +897,10 @@ describe("ComponentBuilder", () => {
         { _id: "3", _slug: "post3", price: 200, title: "Expensive 2" },
         { _id: "4", _slug: "post4", price: 75, title: "Mid" },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         filter: { field: "price", operator: "gt", value: 100 },
         children: [{ type: "node", tag: "div", children: ["Item"] }],
       };
@@ -919,9 +922,10 @@ describe("ComponentBuilder", () => {
         { _id: "2", _slug: "post2", category: "news", title: "News Post" },
         { _id: "3", _slug: "post3", category: "tech", title: "Tech Post 2" },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         filter: { category: "{{cms.category}}" },
         children: [{ type: "node", tag: "div", children: ["Item"] }],
       };
@@ -944,9 +948,10 @@ describe("ComponentBuilder", () => {
         { _id: "2", _slug: "a", title: "A" },
         { _id: "3", _slug: "b", title: "B" },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         sort: { field: "title", order: "asc" },
         children: [{ type: "node", tag: "div", children: ["{{item.title}}"] }],
       };
@@ -969,9 +974,10 @@ describe("ComponentBuilder", () => {
         { _id: "2", _slug: "p2", date: 300 },
         { _id: "3", _slug: "p3", date: 200 },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         sort: { field: "date", order: "desc" },
         children: [{ type: "node", tag: "div", children: ["Item"] }],
       };
@@ -996,9 +1002,10 @@ describe("ComponentBuilder", () => {
         { _id: "4", _slug: "p4", featured: true, title: "Featured 2" },
         { _id: "5", _slug: "p5", featured: false, title: "Regular 3" },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         filter: { featured: true },
         limit: 3, // Without proper order, this would limit before filtering
         children: [{ type: "node", tag: "div", children: ["Item"] }],
@@ -1024,9 +1031,10 @@ describe("ComponentBuilder", () => {
         { _id: "4", _slug: "p4", date: 400 },
         { _id: "5", _slug: "p5", date: 50 },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         sort: { field: "date", order: "desc" },
         limit: 2, // Should get 2 most recent (highest date)
         children: [{ type: "node", tag: "div", children: ["Item"] }],
@@ -1050,9 +1058,10 @@ describe("ComponentBuilder", () => {
         { _id: "3", _slug: "p3", featured: true, price: 50 },
         { _id: "4", _slug: "p4", featured: true, price: 200 },
       ];
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         filter: [
           { field: "featured", value: true },
           { field: "price", operator: "gte", value: 100 }
@@ -1531,7 +1540,7 @@ describe("ComponentBuilder", () => {
     });
   });
 
-  describe("Edge Case 7: CMS List Paths Tracking", () => {
+  describe("Edge Case 7: List Paths Tracking (Collection Mode)", () => {
     const createMockCMSItems = (count: number): CMSItem[] => {
       return Array.from({ length: count }, (_, i) => ({
         _id: `item-${i}`,
@@ -1540,11 +1549,12 @@ describe("ComponentBuilder", () => {
       }));
     };
 
-    test("should pass cmsListPaths through buildChildren", () => {
-      // Create a simple CMS list with items
-      const node: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "posts",
+    test("should pass listPaths through buildChildren", () => {
+      // Create a simple list with items
+      const node: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "posts",
         children: [{ type: "node", tag: "div", children: ["Item"] }],
       };
 
@@ -1555,21 +1565,23 @@ describe("ComponentBuilder", () => {
         elementPath: [0],
       });
 
-      // If cmsListPaths tracking works, the result should render without errors
+      // If listPaths tracking works, the result should render without errors
       expect(result).not.toBeNull();
       const element = result as { props?: { children?: unknown[] } };
       expect(element?.props?.children?.length).toBe(2);
     });
 
-    test("should track cmsListPaths in nested CMS lists", () => {
-      // Outer CMS list with inner CMS list
-      const outerNode: CMSListNode = {
-        type: NODE_TYPE.CMS_LIST,
-        collection: "categories",
+    test("should track listPaths in nested lists", () => {
+      // Outer list with inner list
+      const outerNode: ListNode = {
+        type: NODE_TYPE.LIST,
+        sourceType: 'collection',
+        source: "categories",
         children: [
           {
-            type: NODE_TYPE.CMS_LIST,
-            collection: "posts",
+            type: NODE_TYPE.LIST,
+            sourceType: 'collection',
+            source: "posts",
             children: [{ type: "node", tag: "span", children: ["Post"] }],
           } as any,
         ],
@@ -1584,7 +1596,7 @@ describe("ComponentBuilder", () => {
         elementPath: [0],
       });
 
-      // Nested CMS lists should render correctly with path tracking
+      // Nested lists should render correctly with path tracking
       expect(result).not.toBeNull();
     });
   });

package/lib/client/core/ComponentBuilder.ts

@@ -13,7 +13,7 @@ import { processStructure } from "../templateEngine";
 import { NODE_TYPE } from "../../shared/constants";
 import { ErrorBoundary } from "../ErrorBoundary";
 import type { ComponentNode, StyleValue } from "../../shared/types";
-import { isComponentNode, extractNodeProperties, isSlotMarker, isEmbedNode, isLinkNode, isLocaleListNode, isCMSListNode, markAsSlotContent, evaluateNodeIf, isBooleanMapping } from "../../shared/nodeUtils";
+import { isComponentNode, extractNodeProperties, isSlotMarker, isEmbedNode, isLinkNode, isLocaleListNode, isListNode, markAsSlotContent, evaluateNodeIf, isBooleanMapping } from "../../shared/nodeUtils";
 import { mergeNodeStyles } from "../../shared/styleNodeUtils";
 import { extractAttributesFromNode } from "../../shared/attributeNodeUtils";
 import { resolvePropsFromDefinition } from "../../shared/propResolver";
@@ -41,7 +41,7 @@ import {
   buildEmbed,
   buildLinkNode,
   buildLocaleList,
-  buildCMSList,
+  buildList,
   buildLink,
 } from "./builders";
 
@@ -346,8 +346,10 @@ export class ComponentBuilder {
       return buildLocaleList(node, ctx, builderDeps);
     }
 
-    if (nodeType === NODE_TYPE.CMS_LIST && isCMSListNode(node)) {
-      return buildCMSList(node, children, ctx, builderDeps);
+    // Handle List nodes (unified - handles both prop and collection source types)
+    // isListNode() also matches legacy 'cms-list' type for migration
+    if (isListNode(node)) {
+      return buildList(node, children, ctx, builderDeps);
     }
 
     // Extract node properties

package/lib/client/core/builders/embedBuilder.ts

@@ -15,6 +15,7 @@ import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveEx
 import DOMPurify from "isomorphic-dompurify";
 import type { ElementRegistry } from "../../elementRegistry";
 import type { BuilderContext } from "./types";
+import { hasItemTemplates, processItemTemplate } from "../../../shared/itemTemplateUtils";
 
 export interface EmbedBuilderDeps {
   elementRegistry: ElementRegistry;
@@ -49,8 +50,16 @@ export function buildEmbed(
 ): ReactElement {
   const { key, elementPath, parentComponentName, componentContext, componentRootPath, cmsItemIndexPath } = ctx;
 
+  // Process templates in html property before sanitization (matching SSR behavior)
+  let htmlContent = node.html;
+
+  // Process item template strings (for List context) - e.g., {{item.icon}}, {{feature.title}}
+  if (ctx.templateContext && hasItemTemplates(htmlContent)) {
+    htmlContent = processItemTemplate(htmlContent, ctx.templateContext);
+  }
+
   // Sanitize HTML with allowlist
-  const sanitizedHtml = DOMPurify.sanitize(node.html, SANITIZE_CONFIG);
+  const sanitizedHtml = DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG);
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
 
   // Extract attributes from node

package/lib/client/core/builders/index.ts

@@ -5,7 +5,7 @@
  * - embedBuilder: Embed nodes (HTML content like SVGs)
  * - linkNodeBuilder: Link nodes (links as div in editor)
  * - localeListBuilder: Locale list nodes (language switchers)
- * - cmsListBuilder: CMS list nodes (collection item rendering)
+ * - listBuilder: Unified list nodes (prop and collection item rendering)
  * - linkBuilder: Link components with navigation/prefetch
  */
 
@@ -22,5 +22,9 @@ export type {
 export { buildEmbed, type EmbedBuilderDeps } from './embedBuilder';
 export { buildLinkNode, type LinkNodeBuilderDeps } from './linkNodeBuilder';
 export { buildLocaleList, type LocaleListBuilderDeps } from './localeListBuilder';
-export { buildCMSList, type CMSListBuilderDeps } from './cmsListBuilder';
+export { buildList, type ListBuilderDeps } from './listBuilder';
 export { buildLink, type LinkBuilderDeps } from './linkBuilder';
+
+// Legacy alias for backward compatibility during migration
+export { buildList as buildCMSList } from './listBuilder';
+export type { ListBuilderDeps as CMSListBuilderDeps } from './listBuilder';