@webmate-studio/builder 0.2.166 → 0.2.168

package/build-service.js

@@ -172,13 +172,31 @@ async function buildComponent(payload) {
 		// 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 data={...} />)
-			// Match: <ComponentName ...> or <ComponentName .../> (with or without attributes)
-			const componentTagRegex = /<([A-Z][a-zA-Z0-9]*)[^>]*?\/?>/g;
+			// Match PascalCase tags: <SliderMitText ...> or <SliderMitText .../>
+			const pascalCaseRegex = /<([A-Z][a-zA-Z0-9]*)[^>]*?\/?>/g;
 			let match;
-			while ((match = componentTagRegex.exec(html)) !== null) {
-				const componentName = match[1]; // e.g. "MenuMobile"
-				usedIslands.add(componentName);
+			while ((match = pascalCaseRegex.exec(html)) !== null) {
+				usedIslands.add(match[1]); // e.g. "SliderMitText"
+			}
+
+			// Also match kebab-case custom elements (HTML may already be transformed by Workbench)
+			// e.g. <slider-mit-text ...> or <wm-counter ...>
+			if (usedIslands.size === 0 && islands && islands.length > 0) {
+				const kebabRegex = /<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)[^>]*?\/?>/g;
+				const kebabTags = new Set();
+				while ((match = kebabRegex.exec(html)) !== null) {
+					kebabTags.add(match[1]); // e.g. "slider-mit-text"
+				}
+
+				// Map island filenames to their kebab-case equivalents and check
+				for (const island of islands) {
+					const name = island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '');
+					const kebab = name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+					const prefixed = 'wm-' + kebab;
+					if (kebabTags.has(kebab) || kebabTags.has(prefixed)) {
+						usedIslands.add(name); // Add PascalCase name for later matching
+					}
+				}
 			}
 		}
 

package/package.json

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

package/src/bundler.js

@@ -29,6 +29,9 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		svelteCustomElement = true  // Set false for mount()-based islands (preview mode)
 	} = options;
 
+	let entryPoint = islandPath;
+	let wrapperPath = null;
+
 	try {
 		// Resolve paths for dependencies from builder package
 		// In npx environment, we need to find where the actual dependencies are installed
@@ -43,8 +46,6 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 
 		// Check if island source already registers as Custom Element
 		// If not (plain class export), create a wrapper entry that auto-registers it
-		let entryPoint = islandPath;
-		let wrapperPath = null;
 
 		const isSvelte = islandPath.endsWith('.svelte');
 		if (!isSvelte) {