@webmate-studio/builder 0.2.26 → 0.2.28

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';
@@ -196,22 +197,33 @@ async function buildComponent(payload) {
 				// Read bundled content
 				const bundledContent = readFileSync(outputPath, 'utf8');
 
+				// Use output filename (.js) not input filename (.svelte)
+				const outputFilename = island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js');
+
 				bundledIslands.push({
-					file: island.file,
+					file: outputFilename,  // Use .js extension!
 					content: bundledContent,
 					size: result.size,
 					originalSize: island.content.length
 				});
 
-				console.log(`[Build Service] ✓ ${island.file} → ${(result.size / 1024).toFixed(2)}kb`);
+				console.log(`[Build Service] ✓ ${island.file} → ${outputFilename} (${(result.size / 1024).toFixed(2)}kb)`);
 			}
 		}
 
+		// 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
 			});
@@ -223,6 +235,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.26",
+  "version": "0.2.28",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [