@sprlab/wccompiler 0.8.8 → 0.9.0

package/integrations/vue.js

@@ -95,27 +95,76 @@ export function wccVuePlugin(options = {}) {
       // → <div slot="name">content</div>
       // This prevents Vue from intercepting the slot syntax and erroring.
       // The WCC component's runtime slot parser detects slot="name" on regular elements.
+      //
+      // IMPORTANT: Only transform templates inside custom elements (tags with hyphens).
+      // This ensures we don't interfere with Vue's own slot/template handling on native elements.
 
-      // Handle <template #name>...</template> (shorthand)
+      // Helper: transform scoped slot content — escape {{prop}} → {%prop%} for declared props only
+      function transformScopedContent(content, propsExpr) {
+        const props = propsExpr.split(',').map(p => p.trim()).filter(Boolean)
+        let transformed = content
+        for (const prop of props) {
+          // Replace {{propName}} and {{ propName }} with {%propName%} / {% propName %}
+          transformed = transformed.replace(
+            new RegExp('\\{\\{(\\s*)' + prop + '(\\s*)\\}\\}', 'g'),
+            (m, ws1, ws2) => `{%${ws1}${prop}${ws2}%}`
+          )
+        }
+        return { transformed, props }
+      }
+
+      // Handle scoped slots: <template #name="{ prop1, prop2 }">...</template>
+      // → <div slot="name" slot-props="prop1, prop2">content with {%prop%}</div>
+      // Only inside custom elements (tag names with hyphens)
+      prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /(<[\w]+-[\w-]*[^>]*>)([\s\S]*?)<template\s+#(\w+)="\{\s*([^}]*)\s*\}">([\s\S]*?)<\/template>/,
+          (match, openTag, before, slotName, propsExpr, content) => {
+            const { transformed, props } = transformScopedContent(content, propsExpr)
+            return `${openTag}${before}<div slot="${slotName}" slot-props="${props.join(', ')}">${transformed}</div>`
+          }
+        )
+      }
+
+      // Handle scoped slots: <template v-slot:name="{ prop1, prop2 }">...</template>
+      // → <div slot="name" slot-props="prop1, prop2">content with {%prop%}</div>
+      // Only inside custom elements (tag names with hyphens)
+      prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /(<[\w]+-[\w-]*[^>]*>)([\s\S]*?)<template\s+v-slot:(\w+)="\{\s*([^}]*)\s*\}">([\s\S]*?)<\/template>/,
+          (match, openTag, before, slotName, propsExpr, content) => {
+            const { transformed, props } = transformScopedContent(content, propsExpr)
+            return `${openTag}${before}<div slot="${slotName}" slot-props="${props.join(', ')}">${transformed}</div>`
+          }
+        )
+      }
+
+      // Handle non-scoped <template #name>...</template> (shorthand)
+      // Only inside custom elements (tag names with hyphens)
       prev = ''
       while (prev !== result) {
         prev = result
         result = result.replace(
-          /<template\s+#(\w+)>([\s\S]*?)<\/template>/,
-          (match, slotName, content) => {
-            return `<div slot="${slotName}">${content}</div>`
+          /(<[\w]+-[\w-]*[^>]*>)([\s\S]*?)<template\s+#(\w+)>([\s\S]*?)<\/template>/,
+          (match, openTag, before, slotName, content) => {
+            return `${openTag}${before}<div slot="${slotName}">${content}</div>`
           }
         )
       }
 
-      // Handle <template v-slot:name>...</template> (verbose)
+      // Handle non-scoped <template v-slot:name>...</template> (verbose)
+      // Only inside custom elements (tag names with hyphens)
       prev = ''
       while (prev !== result) {
         prev = result
         result = result.replace(
-          /<template\s+v-slot:(\w+)>([\s\S]*?)<\/template>/,
-          (match, slotName, content) => {
-            return `<div slot="${slotName}">${content}</div>`
+          /(<[\w]+-[\w-]*[^>]*>)([\s\S]*?)<template\s+v-slot:(\w+)>([\s\S]*?)<\/template>/,
+          (match, openTag, before, slotName, content) => {
+            return `${openTag}${before}<div slot="${slotName}">${content}</div>`
           }
         )
       }

package/lib/codegen.js

@@ -1042,9 +1042,23 @@ export function generateComponent(parseResult, options = {}) {
     lines.push("      } else if (child.nodeType === 1 && child.getAttribute('slot')) {");
     // NEW: regular element with slot="name" (cross-framework support)
     lines.push("        const slotName = child.getAttribute('slot');");
+    lines.push("        const propsExpr = child.getAttribute('slot-props') || '';");
     lines.push("        child.removeAttribute('slot');");
-    lines.push('        __slotMap[slotName] = { content: child.outerHTML, propsExpr: \'\' };');
-    lines.push("      } else if (child.nodeType === 1 || (child.nodeType === 3 && child.textContent.trim())) {");
+    lines.push("        child.removeAttribute('slot-props');");
+    lines.push("        __slotMap[slotName] = { content: propsExpr ? child.innerHTML : child.outerHTML, propsExpr };");
+    lines.push("      } else if (child.nodeType === 1) {");
+    // NEW: check for slot-template-<name> attributes (React/Angular string attribute pattern)
+    lines.push("        for (const attr of Array.from(child.attributes)) {");
+    lines.push("          if (attr.name.startsWith('slot-template-')) {");
+    lines.push("            const slotName = attr.name.slice('slot-template-'.length);");
+    lines.push("            if (!__slotMap[slotName]) {");
+    lines.push("              __slotMap[slotName] = { content: attr.value, propsExpr: '' };");
+    lines.push("            }");
+    lines.push("            child.removeAttribute(attr.name);");
+    lines.push("          }");
+    lines.push("        }");
+    lines.push("        __defaultSlotNodes.push(child);");
+    lines.push("      } else if (child.nodeType === 3 && child.textContent.trim()) {");
     lines.push('        __defaultSlotNodes.push(child);');
     lines.push('      }');
     lines.push('    }');
@@ -1153,6 +1167,66 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
+  // ── Deferred slot re-check (Angular compatibility) ──
+  // Angular connects custom elements to DOM BEFORE projecting children.
+  // If no slot content was found on first pass, schedule a microtask retry.
+  // After the first render, Angular projects children as siblings after the template root.
+  // The microtask skips the first child (our rendered template) and parses the rest.
+  if (slots.length > 0) {
+    lines.push('    if (Object.keys(__slotMap).length === 0 && __defaultSlotNodes.length === 0) {');
+    lines.push('      queueMicrotask(() => {');
+    lines.push('        const __sm = {};');
+    lines.push('        const __dn = [];');
+    // Skip the first element child (our rendered template root)
+    lines.push('        const __children = Array.from(this.childNodes).slice(1);');
+    lines.push('        for (const child of __children) {');
+    lines.push("          if (child.nodeName === 'TEMPLATE') {");
+    lines.push('            for (const attr of child.attributes) {');
+    lines.push("              if (attr.name.startsWith('#')) {");
+    lines.push("                __sm[attr.name.slice(1)] = { content: child.innerHTML, propsExpr: attr.value };");
+    lines.push('              }');
+    lines.push('            }');
+    lines.push("          } else if (child.nodeType === 1 && child.getAttribute('slot')) {");
+    lines.push("            const sn = child.getAttribute('slot');");
+    lines.push("            const pe = child.getAttribute('slot-props') || '';");
+    lines.push("            child.removeAttribute('slot');");
+    lines.push("            child.removeAttribute('slot-props');");
+    lines.push("            __sm[sn] = { content: pe ? child.innerHTML : child.outerHTML, propsExpr: pe };");
+    lines.push("            child.remove();");
+    lines.push("          } else if (child.nodeType === 1) {");
+    lines.push("            for (const attr of Array.from(child.attributes)) {");
+    lines.push("              if (attr.name.startsWith('slot-template-')) {");
+    lines.push("                const sn = attr.name.slice('slot-template-'.length);");
+    lines.push("                if (!__sm[sn]) { __sm[sn] = { content: attr.value, propsExpr: '' }; }");
+    lines.push("                child.removeAttribute(attr.name);");
+    lines.push("              }");
+    lines.push("            }");
+    lines.push("            __dn.push(child);");
+    lines.push("          } else if (child.nodeType === 3 && child.textContent.trim()) {");
+    lines.push("            __dn.push(child);");
+    lines.push('          }');
+    lines.push('        }');
+    // Re-inject slots if we found content this time
+    lines.push('        if (Object.keys(__sm).length > 0 || __dn.length > 0) {');
+    for (const s of slots) {
+      if (s.name && s.slotProps.length > 0) {
+        lines.push(`          if (__sm['${s.name}']) {`);
+        lines.push(`            this.__slotTpl_${s.name} = __sm['${s.name}'].content;`);
+        if (s.slotProps.length > 0 && s.slotProps[0].source) {
+          lines.push(`            this._${s.slotProps[0].source}.set(this._${s.slotProps[0].source}());`);
+        }
+        lines.push(`          }`);
+      } else if (s.name) {
+        lines.push(`          if (__sm['${s.name}']) { this.${s.varName}.innerHTML = __sm['${s.name}'].content; }`);
+      } else {
+        lines.push(`          if (__dn.length) { this.${s.varName}.textContent = ''; __dn.forEach(n => this.${s.varName}.appendChild(n.cloneNode(true))); }`);
+      }
+    }
+    lines.push('        }');
+    lines.push('      });');
+    lines.push('    }');
+  }
+
   // ── EFFECTS AND LISTENERS ──
   lines.push('    this.__ac = new AbortController();');
   lines.push('    this.__disposers = [];');
@@ -1203,7 +1277,7 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`        const __props = { ${propsObj} };`);
       lines.push(`        let __html = this.__slotTpl_${s.name};`);
       lines.push("        for (const [k, v] of Object.entries(__props)) {");
-      lines.push(`          __html = __html.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '(\\\\(\\\\))?\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
+      lines.push(`          __html = __html.replace(new RegExp('(?:\\\\{\\\\{|\\\\{%)\\\\s*' + k + '(\\\\(\\\\))?\\\\s*(?:\\\\}\\\\}|%\\\\})', 'g'), v ?? '');`);
       lines.push('        }');
       lines.push(`        this.${s.varName}.innerHTML = __html;`);
       lines.push('      });');
@@ -1556,6 +1630,7 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
+  // Close connectedCallback
   lines.push('  }');
   lines.push('');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.8.8",
+  "version": "0.9.0",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {