@webmate-studio/builder 0.2.25 → 0.2.27

package/build-service.js

@@ -8,6 +8,7 @@
 import http from 'http';
 import { generateComponentCSS } from './src/tailwind-generator.js';
 import { bundleIsland } from './src/bundler.js';
+import { cleanComponentHTML } from './src/html-cleaner.js';
 import { mkdtemp, writeFile, rm, mkdir } from 'fs/promises';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
@@ -101,9 +102,13 @@ function injectSvelteOptions(filename, content, componentMetadata) {
 	}
 
 	// Generate <svelte:options> block
-	// IMPORTANT: props must be inline (single line) for Svelte compiler to parse it
-	const propsJson = JSON.stringify(props); // No formatting - keep it inline
-	const svelteOptions = `<svelte:options customElement={{ tag: "${tagName}", shadow: "none", props: ${propsJson} }} />\n\n`;
+	// IMPORTANT: props must be a JavaScript object literal, not JSON string
+	// Convert to JS syntax: { title: { type: "Number" } } instead of {"title":{"type":"Number"}}
+	const propsEntries = Object.entries(props).map(([name, config]) => {
+		return `${name}: { type: "${config.type}" }`;
+	}).join(', ');
+	const propsLiteral = `{ ${propsEntries} }`;
+	const svelteOptions = `<svelte:options customElement={{ tag: "${tagName}", shadow: "none", props: ${propsLiteral} }} />\n\n`;
 
 	// Check if <svelte:options> already exists
 	if (content.includes('<svelte:options')) {
@@ -203,11 +208,19 @@ async function buildComponent(payload) {
 			}
 		}
 
+		// Transform HTML: Convert <IslandName /> to <island-name> Custom Elements
+		let transformedHtml = html;
+		if (html && islands.length > 0) {
+			const islandNames = islands.map(i => i.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, ''));
+			transformedHtml = cleanComponentHTML(html, islandNames);
+			console.log(`[Build Service] ✓ Transformed HTML: ${islandNames.length} island(s) → Custom Elements`);
+		}
+
 		// Generate CSS
 		let css = '';
-		if (html) {
+		if (transformedHtml) {
 			console.log('[Build Service] Generating CSS...');
-			const cssResult = await generateComponentCSS(html, {
+			const cssResult = await generateComponentCSS(transformedHtml, {
 				designTokens: null,
 				minify: true
 			});
@@ -219,6 +232,7 @@ async function buildComponent(payload) {
 			success: true,
 			bundledIslands,
 			css,
+			html: transformedHtml, // Return transformed HTML
 			stats: {
 				islands: bundledIslands.length,
 				totalSize: bundledIslands.reduce((sum, i) => sum + i.size, 0) + css.length

package/package.json

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