@webmate-studio/builder 0.2.126 → 0.2.127

package/package.json

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

package/src/html-cleaner.js

@@ -47,53 +47,53 @@ export function cleanComponentHTML(html, islands = []) {
  * @returns {string} HTML with transformed islands
  */
 function transformIslandsToDataAttributes(html, availableIslands = []) {
-	// Match self-closing PascalCase tags with attributes
-	// Pattern: <ComponentName attrs... />
-	return html.replace(/<([A-Z][a-zA-Z0-9]*)\s+([^>]*)\/>/g, (match, tagName, attrsString) => {
-		// Check if this is a registered island
-		if (!availableIslands.includes(tagName)) {
-			return match; // Not an island, keep as-is
-		}
-
-		// Convert island name to kebab-case for Custom Element tag
-		// SwiperTest → swiper-test
-		// MyAwesomeComponent → my-awesome-component
+	// Convert PascalCase island name to kebab-case Custom Element tag
+	function toKebabTag(tagName) {
 		let kebabTag = tagName
 			.replace(/([A-Z])/g, '-$1')
 			.toLowerCase()
 			.replace(/^-/, '');
-
-		// Svelte requires custom element names to be hyphenated
-		// If there's no hyphen, add a prefix to make it valid
-		// IMPORTANT: Must match the prefix logic in injectSvelteOptions()
+		// Custom elements must contain a hyphen
 		if (!kebabTag.includes('-')) {
-			kebabTag = 'wm-' + kebabTag;  // e.g., "sidebar" → "wm-sidebar"
+			kebabTag = 'wm-' + kebabTag;
 		}
+		return kebabTag;
+	}
 
-		// Parse attributes and convert to HTML attributes
+	// Parse attributes string into HTML attributes
+	function parseAttrs(attrsString) {
 		const attrs = [];
-
-		// Match prop={value} or prop="value" patterns
 		const attrPattern = /([a-z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
 		let attrMatch;
-
 		while ((attrMatch = attrPattern.exec(attrsString)) !== null) {
 			const propName = attrMatch[1];
-			// Get value from whichever group matched (curly braces, double quotes, or single quotes)
 			const propValue = attrMatch[2] || attrMatch[3] || attrMatch[4];
-
-			// If it was in curly braces, keep the braces for runtime evaluation
-			// Otherwise it's a literal string
 			const value = attrMatch[2] ? `{${propValue}}` : propValue;
-
-			// Add as HTML attribute
 			attrs.push(`${propName}="${value}"`);
 		}
+		return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+	}
 
-		// Generate Custom Element tag
-		const attrsHtml = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
-		return `<${kebabTag}${attrsHtml}></${kebabTag}>`;
+	// 1. Self-closing: <ComponentName attrs... />
+	html = html.replace(/<([A-Z][a-zA-Z0-9]*)\s+([^>]*)\/>/g, (match, tagName, attrsString) => {
+		if (!availableIslands.includes(tagName)) return match;
+		const kebabTag = toKebabTag(tagName);
+		return `<${kebabTag}${parseAttrs(attrsString)}></${kebabTag}>`;
 	});
+
+	// 2. Opening + closing with children: <ComponentName attrs>...children...</ComponentName>
+	for (const islandName of availableIslands) {
+		const openPattern = new RegExp(`<${islandName}(\\s[^>]*)?>`, 'g');
+		const closePattern = new RegExp(`</${islandName}>`, 'g');
+		const kebabTag = toKebabTag(islandName);
+
+		html = html.replace(openPattern, (match, attrsString) => {
+			return `<${kebabTag}${parseAttrs(attrsString || '')}>`;
+		});
+		html = html.replace(closePattern, `</${kebabTag}>`);
+	}
+
+	return html;
 }
 
 /**