meno-core 1.0.25 → 1.0.26

package/lib/client/meno-filter/bindings.ts

@@ -118,6 +118,7 @@ export function bindFilterControls(instance: FilterInstance): void {
           filter.addFilter(field, value);
         }
       }
+
     };
 
     btn.addEventListener('click', handler);

package/lib/client/scripts/ScriptExecutor.ts

@@ -123,10 +123,11 @@ export class ScriptExecutor {
     const wrappedJS = `(function() {
       // Component: ${componentName} (defineVars)
       try {
-        var elements = document.querySelectorAll('[data-component="${componentName}"]');
+        var elements = document.querySelectorAll('[data-component~="${componentName}"]');
         elements.forEach(function(el) {
           var propsStr = el.getAttribute('data-props');
-          var props = propsStr ? JSON.parse(propsStr) : {};
+          var allProps = propsStr ? JSON.parse(propsStr) : {};
+          var props = allProps["${componentName}"] || {};
           (function(el, props) {
             ${destructure}
             ${js}
@@ -275,7 +276,7 @@ export class ScriptExecutor {
       const js = component.component.javascript;
       const destructure = generateDestructure(defineVars, component.component.interface);
 
-      // Update data-props attribute
+      // Update data-props attribute (keyed by component name)
       const varsToExpose = defineVars === true
         ? Object.keys(component.component.interface || {})
         : defineVars;
@@ -286,7 +287,15 @@ export class ScriptExecutor {
           propsForJS[varName] = newProps[varName];
         }
       }
-      element.setAttribute('data-props', JSON.stringify(propsForJS));
+
+      // Preserve existing keyed props from other components
+      let allProps: Record<string, unknown> = {};
+      const existingStr = element.getAttribute('data-props');
+      if (existingStr) {
+        try { allProps = JSON.parse(existingStr); } catch {}
+      }
+      allProps[componentName] = propsForJS;
+      element.setAttribute('data-props', JSON.stringify(allProps));
 
       // Execute JS for this element only
       const wrappedJS = `(function(el, props) {

package/lib/server/ssr/jsCollector.ts

@@ -57,10 +57,11 @@ async function validateJS(code: string): Promise<string | null> {
 const DEFINE_VARS_RUNTIME = `(function() {
   var __meno = window.__meno || (window.__meno = {});
   __meno.initComponent = function(name, fn) {
-    var elements = document.querySelectorAll('[data-component="' + name + '"]');
+    var elements = document.querySelectorAll('[data-component~="' + name + '"]');
     elements.forEach(function(el) {
       var propsStr = el.getAttribute('data-props');
-      var props = propsStr ? JSON.parse(propsStr) : {};
+      var allProps = propsStr ? JSON.parse(propsStr) : {};
+      var props = allProps[name] || {};
       fn(el, props);
     });
   };

package/lib/server/ssr/ssrRenderer.test.ts

@@ -1051,16 +1051,116 @@ describe('ssrRenderer', () => {
       const html = await render(node, { globalComponents: { VarsComp2: componentDef } });
       expect(html).toContain('data-component="VarsComp2"');
       expect(html).toContain('data-props=');
-      // The data-props should include label but not count
+      // The data-props should be keyed by component name, with label but not count
       const propsMatch = html.match(/data-props="([^"]*)"/);
       if (propsMatch) {
         const propsJson = propsMatch[1].replace(/"/g, '"');
-        const props = JSON.parse(propsJson);
-        expect(props.label).toBe('Hello');
-        expect(props.count).toBeUndefined();
+        const allProps = JSON.parse(propsJson);
+        expect(allProps.VarsComp2).toBeDefined();
+        expect(allProps.VarsComp2.label).toBe('Hello');
+        expect(allProps.VarsComp2.count).toBeUndefined();
       }
     });
 
+    test('component with defineVars wrapping another component emits data-component', async () => {
+      // InnerComp: simple HTML root, no defineVars
+      const innerDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'node',
+            tag: 'button',
+            children: '{{text}}',
+          },
+          interface: {
+            text: { type: 'string', default: 'Click' },
+          },
+        },
+      };
+
+      // OuterComp: root is a component instance (InnerComp), has defineVars
+      const outerDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'component',
+            component: 'InnerComp',
+            props: { text: '{{label}}' },
+          },
+          interface: {
+            label: { type: 'string', default: 'Default' },
+          },
+          defineVars: true,
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'OuterComp',
+        props: { label: 'Submit' },
+      };
+
+      const html = await render(node, {
+        globalComponents: { OuterComp: outerDef, InnerComp: innerDef },
+      });
+      expect(html).toContain('data-component="OuterComp"');
+      expect(html).toContain('Submit');
+    });
+
+    test('nested components both with defineVars produce space-separated data-component and keyed data-props', async () => {
+      // InnerComp: HTML root, has defineVars
+      const innerDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'node',
+            tag: 'span',
+            children: '{{value}}',
+          },
+          interface: {
+            value: { type: 'string', default: 'inner' },
+          },
+          defineVars: ['value'],
+        },
+      };
+
+      // OuterComp: root is InnerComp, has defineVars
+      const outerDef: ComponentDefinition = {
+        component: {
+          structure: {
+            type: 'component',
+            component: 'InnerComp',
+            props: { value: '{{title}}' },
+          },
+          interface: {
+            title: { type: 'string', default: 'outer' },
+          },
+          defineVars: ['title'],
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'OuterComp',
+        props: { title: 'Hello' },
+      };
+
+      const html = await render(node, {
+        globalComponents: { OuterComp: outerDef, InnerComp: innerDef },
+      });
+
+      // data-component should contain both names (space-separated)
+      const dcMatch = html.match(/data-component="([^"]*)"/);
+      expect(dcMatch).toBeTruthy();
+      const names = dcMatch![1].split(' ');
+      expect(names).toContain('OuterComp');
+      expect(names).toContain('InnerComp');
+
+      // data-props should be keyed by component name
+      const dpMatch = html.match(/data-props="([^"]*)"/);
+      expect(dpMatch).toBeTruthy();
+      const allProps = JSON.parse(dpMatch![1].replace(/"/g, '"'));
+      expect(allProps.OuterComp).toEqual({ title: 'Hello' });
+      expect(allProps.InnerComp).toEqual({ value: 'Hello' });
+    });
+
     test('component where processStructure returns a string renders it', async () => {
       const componentDef: ComponentDefinition = {
         component: {

package/lib/server/ssr/ssrRenderer.ts

@@ -522,13 +522,11 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   const renderedItems: string[] = [];
 
   for (let i = 0; i < items.length; i++) {
-    // Add computed _url field if schema is available
     const rawItem = items[i] as Record<string, unknown>;
     const item = schema
       ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig)
       : rawItem;
 
-    // Build template context with named variable (preserves parent context for nested lists)
     const templateContext = buildTemplateContext(
       variableName,
       item as CMSItem,
@@ -537,13 +535,11 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
       ctx.templateContext
     );
 
-    // Create item context with template context
     const itemCtx: SSRContext = {
       ...ctx,
       templateContext,
     };
 
-    // Render each child with item context
     const childrenHtml = await renderChildrenAsync(node.children || [], itemCtx);
     renderedItems.push(childrenHtml);
   }
@@ -554,14 +550,11 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   // This allows MenoFilter to dynamically render items from JSON data
   let templateHtml = '';
   if (sourceType === 'collection' && node.emitTemplate && node.children && node.children.length > 0) {
-    // Render children with templateMode to preserve {{item.field}} placeholders
-    // Keep templateContext for nested list resolution, set nestedCMSListMode
-    // so nested lists emit placeholders for client-side hydration
     const templateCtx: SSRContext = {
       ...ctx,
       templateMode: true,
-      templateContext: ctx.templateContext, // Keep parent context for nested list resolution
-      nestedCMSListMode: true, // Nested lists will emit placeholders for client hydration
+      templateContext: ctx.templateContext,
+      nestedCMSListMode: true,
     };
     const templateContent = await renderChildrenAsync(node.children, templateCtx);
     templateHtml = `<template data-meno-item>${templateContent}</template>`;
@@ -1210,6 +1203,19 @@ async function renderComponent(
       // Merge attributes into props
       Object.assign(rootNode.props, nodeAttributes);
 
+      // Forward nodeAttributes to rootNode.attributes for HTML root nodes
+      // so attributes from outer components (e.g. data-component) reach the final HTML element
+      if (isHtmlNode(rootNode) && Object.keys(nodeAttributes).length > 0) {
+        if (!rootNode.attributes) {
+          rootNode.attributes = {};
+        }
+        for (const [key, value] of Object.entries(nodeAttributes)) {
+          if (key !== 'class' && key !== 'className') {
+            rootNode.attributes[key] = value as string | number | boolean;
+          }
+        }
+      }
+
       // Add defineVars data attributes for JS prop injection
       const defineVars = structuredComponentDef.defineVars;
       if (defineVars && componentName) {
@@ -1224,14 +1230,26 @@ async function renderComponent(
           }
         }
 
-        // Add data-component and data-props to root element's attributes
-        // processedStructure is the processed component tree (HTML nodes)
+        // Accumulate data-component (space-separated) and data-props (keyed by name)
         const processedRoot = processedStructure as import('../../shared/types').HtmlNode;
         if (!processedRoot.attributes) {
           processedRoot.attributes = {};
         }
-        processedRoot.attributes['data-component'] = componentName;
-        processedRoot.attributes['data-props'] = JSON.stringify(propsForJS);
+        const existingComponent = (processedRoot.attributes?.['data-component'] as string)
+          || (processedRoot.props?.['data-component'] as string)
+          || '';
+        processedRoot.attributes['data-component'] = existingComponent
+          ? `${existingComponent} ${componentName}`
+          : componentName;
+
+        let existingPropsMap: Record<string, unknown> = {};
+        const existingPropsStr = (processedRoot.attributes?.['data-props'] as string)
+          || (processedRoot.props?.['data-props'] as string);
+        if (existingPropsStr) {
+          try { existingPropsMap = JSON.parse(existingPropsStr); } catch {}
+        }
+        existingPropsMap[componentName] = propsForJS;
+        processedRoot.attributes['data-props'] = JSON.stringify(existingPropsMap);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"