@webmate-studio/builder 0.2.179 → 0.2.181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.179",
+  "version": "0.2.181",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/template-evaluator.js

@@ -40,6 +40,10 @@ class TemplateEvaluator {
 			case 'Fragment':
 				return this.evalFragment(node, ctx);
 			case 'Text':
+				// Strip closing tags of built-in micro-components (only if present)
+				if (node.value.includes('</wm-')) {
+					return node.value.replace(/<\/wm-button>/g, '');
+				}
 				return node.value;
 			case 'Expression':
 				return this.evalExpression(node, ctx);
@@ -194,6 +198,11 @@ class TemplateEvaluator {
 			return this.evalIslandTag(node, ctx);
 		}
 
+		// Built-in micro-components
+		if (node.tagName === 'wm-button') {
+			return this.evalWmButton(node, ctx);
+		}
+
 		let result = `<${node.tagName}`;
 
 		// Collect all class names (static + conditional)
@@ -305,6 +314,35 @@ class TemplateEvaluator {
 		return `<${kebabTag}${propsAttr}></${kebabTag}>`;
 	}
 
+	/**
+	 * Built-in micro-component: <wm-button settings={button}></wm-button>
+	 *
+	 * Outputs a <wm-button> Custom Element with serialized settings.
+	 * In Preview: Web Component (wm-button.js) renders it live.
+	 * In Build: html-static-builder resolves it to static <a> HTML.
+	 */
+	evalWmButton(node, ctx) {
+		// Resolve the settings prop
+		let settings = null;
+		for (const attr of node.attributes) {
+			if (attr.name === 'settings') {
+				if (attr.type === 'DynamicAttribute') {
+					settings = this.expr.evaluate(attr.expression, ctx);
+				} else if (attr.type === 'StaticAttribute') {
+					settings = attr.value;
+				}
+			}
+		}
+
+		if (!settings || typeof settings !== 'object') {
+			return '<!-- wm-button: no settings -->';
+		}
+
+		// Serialize settings as JSON attribute for the Web Component
+		const json = JSON.stringify(settings).replace(/'/g, '&apos;');
+		return `<wm-button settings='${json}'></wm-button>`;
+	}
+
 	// ========================================
 	// Value resolution helpers
 	// ========================================