@webmate-studio/builder 0.2.20 → 0.2.21

package/package.json

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

package/src/html-cleaner.js

@@ -32,8 +32,11 @@ export function cleanComponentHTML(html, islands = []) {
 }
 
 /**
- * Transform PascalCase island elements to data-island attributes
- * Example: <SwiperTest title={title} /> → <div data-island="swipertest" data-island-props='{"title":"{title}"}'></div>
+ * Transform PascalCase island elements to Custom Elements (Web Components)
+ * Example: <SwiperTest title={title} /> → <swiper-test title="{title}"></swiper-test>
+ *
+ * Islands with <svelte:options customElement> self-register as Custom Elements,
+ * so we convert to kebab-case tags with inline props.
  *
  * @param {string} html - Original HTML
  * @param {Array<string>} availableIslands - List of available island names
@@ -48,8 +51,16 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 			return match; // Not an island, keep as-is
 		}
 
-		// Parse attributes to JSON props
-		const props = {};
+		// Convert island name to kebab-case for Custom Element tag
+		// SwiperTest → swiper-test
+		// MyAwesomeComponent → my-awesome-component
+		const kebabTag = tagName
+			.replace(/([A-Z])/g, '-$1')
+			.toLowerCase()
+			.replace(/^-/, '');
+
+		// Parse attributes and convert to HTML attributes
+		const attrs = [];
 
 		// Match prop={value} or prop="value" patterns
 		const attrPattern = /([a-z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
@@ -62,17 +73,15 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 
 			// If it was in curly braces, keep the braces for runtime evaluation
 			// Otherwise it's a literal string
-			props[propName] = attrMatch[2] ? `{${propValue}}` : propValue;
-		}
+			const value = attrMatch[2] ? `{${propValue}}` : propValue;
 
-		// Convert island name to lowercase for data-island attribute
-		const islandName = tagName.toLowerCase();
-
-		// Serialize props to JSON (escape quotes)
-		const propsJson = JSON.stringify(props).replace(/"/g, '&quot;');
+			// Add as HTML attribute
+			attrs.push(`${propName}="${value}"`);
+		}
 
-		// Generate data-island div
-		return `<div data-island="${islandName}" data-island-props="${propsJson}"></div>`;
+		// Generate Custom Element tag
+		const attrsString = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+		return `<${kebabTag}${attrsString}></${kebabTag}>`;
 	});
 }