@webmate-studio/builder 0.2.76 → 0.2.77

package/build-service.js

@@ -168,6 +168,20 @@ async function buildComponent(payload) {
 			console.log(`[Build Service] Wrote ${assets.length} asset(s)`);
 		}
 
+		// Detect which islands are actually used in component.html (top-level islands)
+		// These become Custom Elements, others are just utilities/sub-components
+		const usedIslands = new Set();
+		if (html) {
+			// Find all custom elements in HTML (e.g. <MenuMobile />, <SearchModal />)
+			// Match: <ComponentName or <ComponentName> or <ComponentName/>
+			const componentTagRegex = /<([A-Z][a-zA-Z0-9]*)\s*\/?>/g;
+			let match;
+			while ((match = componentTagRegex.exec(html)) !== null) {
+				const componentName = match[1]; // e.g. "MenuMobile"
+				usedIslands.add(componentName);
+			}
+		}
+
 		// Build islands
 		const bundledIslands = [];
 		if (islands && islands.length > 0) {
@@ -189,12 +203,29 @@ async function buildComponent(payload) {
 				await writeFile(inputPath, content);
 			}
 
-			// SECOND: Bundle each island
+			// SECOND: Bundle only top-level islands (those used in component.html)
+			// Others are utilities/sub-components that get bundled via imports
 			for (const island of islands) {
+				// Extract component name from filename (e.g. "MenuMobile.svelte" → "MenuMobile")
+				const componentName = island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '');
+				const isTopLevel = usedIslands.has(componentName);
+
+				// Skip non-component files (e.g. .js utilities that aren't top-level islands)
+				if (!island.file.match(/\.(jsx?|tsx?|svelte|vue)$/)) {
+					console.log(`[Build Service] Skipping ${island.file} (utility file, not an island)`);
+					continue;
+				}
+
+				// Only bundle top-level islands (those referenced in HTML)
+				if (!isTopLevel) {
+					console.log(`[Build Service] Skipping ${island.file} (sub-component, will be bundled via import)`);
+					continue;
+				}
+
 				const inputPath = join(islandsDir, island.file);
 				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
 
-				console.log(`[Build Service] Bundling ${island.file}...`);
+				console.log(`[Build Service] Bundling ${island.file} (top-level island)...`);
 
 				// Bundle with esbuild (pass tmpDir for node_modules resolution)
 				const result = await bundleIsland(inputPath, outputPath, {
@@ -222,6 +253,10 @@ async function buildComponent(payload) {
 
 				console.log(`[Build Service] ✓ ${island.file} → ${outputFilename} (${(result.size / 1024).toFixed(2)}kb)`);
 			}
+
+			if (usedIslands.size > 0) {
+				console.log(`[Build Service] Detected ${usedIslands.size} top-level island(s): ${Array.from(usedIslands).join(', ')}`);
+			}
 		}
 
 		// Transform HTML: Convert <IslandName /> to <island-name> Custom Elements

package/package.json

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