@webmate-studio/builder 0.2.167 → 0.2.170

package/build-service.js

@@ -8,7 +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 { cleanComponentHTML, getComponentSuffix } from './src/html-cleaner.js';
 import { mkdtemp, writeFile, rm, mkdir } from 'fs/promises';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
@@ -68,7 +68,7 @@ async function installDependencies(componentDir, packageJson) {
  * Converts filename to kebab-case tag name (e.g., SwiperTest.svelte → swiper-test)
  * Generates props definition from component.json metadata
  */
-function injectSvelteOptions(filename, content, componentMetadata) {
+function injectSvelteOptions(filename, content, componentMetadata, componentId) {
 	// Convert filename to kebab-case tag name
 	// SwiperTest.svelte → swiper-test
 	// MyAwesomeComponent.svelte → my-awesome-component
@@ -84,6 +84,11 @@ function injectSvelteOptions(filename, content, componentMetadata) {
 		tagName = 'wm-' + tagName;  // e.g., "button" → "wm-button"
 	}
 
+	// Scope tag name with component suffix to avoid collisions
+	if (componentId) {
+		tagName = tagName + '-' + getComponentSuffix(componentId);
+	}
+
 	// Generate props definition from component.json
 	const props = {};
 	if (componentMetadata.props) {
@@ -172,13 +177,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
+					}
+				}
 			}
 		}
 
@@ -195,8 +218,9 @@ async function buildComponent(payload) {
 
 				// Auto-inject <svelte:options> for Svelte islands
 				let content = island.content;
+				const componentId = componentMetadata?.id;
 				if (island.file.endsWith('.svelte') && componentMetadata && componentMetadata.props) {
-					content = injectSvelteOptions(island.file, content, componentMetadata);
+					content = injectSvelteOptions(island.file, content, componentMetadata, componentId);
 				}
 
 				// Write source file
@@ -227,11 +251,22 @@ async function buildComponent(payload) {
 
 				console.log(`[Build Service] Bundling ${island.file} (top-level island)...`);
 
+				// Compute scoped tag name for non-Svelte islands
+				const cId = componentMetadata?.id;
+				let scopedTagName;
+				if (cId && !island.file.endsWith('.svelte')) {
+					const baseName = island.file.replace(/\.(jsx?|tsx?|vue)$/, '');
+					let tag = baseName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+					if (!tag.includes('-')) tag = 'wm-' + tag;
+					scopedTagName = tag + '-' + getComponentSuffix(cId);
+				}
+
 				// Bundle with esbuild (pass tmpDir for node_modules resolution)
 				const result = await bundleIsland(inputPath, outputPath, {
 					componentDir: tmpDir,
 					minify: true,
-					sourcemap: false
+					sourcemap: false,
+					scopedTagName
 				});
 
 				if (!result.success) {
@@ -263,8 +298,9 @@ async function buildComponent(payload) {
 		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`);
+			const componentId = componentMetadata?.id;
+			transformedHtml = cleanComponentHTML(html, islandNames, componentId);
+			console.log(`[Build Service] ✓ Transformed HTML: ${islandNames.length} island(s) → Custom Elements${componentId ? ` (scoped: -${getComponentSuffix(componentId)})` : ''}`);
 		}
 
 		// Generate CSS from HTML + Islands

package/package.json

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

package/src/bundler.js

@@ -26,7 +26,8 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		target = 'es2020',
 		format = 'esm',
 		componentDir = null,  // Component directory for component-specific node_modules
-		svelteCustomElement = true  // Set false for mount()-based islands (preview mode)
+		svelteCustomElement = true,  // Set false for mount()-based islands (preview mode)
+		scopedTagName = null  // Scoped custom element tag name (e.g. "wm-slide-550e")
 	} = options;
 
 	let entryPoint = islandPath;
@@ -53,9 +54,14 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			if (!sourceCode.includes('customElements.define')) {
 				// Derive tag name from filename: NewsSlider.js → news-slider
 				const baseName = path.basename(islandPath).replace(/\.(js|jsx|ts|tsx|vue)$/, '');
-				const tagName = baseName
+				let tagName = scopedTagName || baseName
 					.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
 					.toLowerCase();
+				// Note: scopedTagName already includes the hyphen requirement,
+				// so we only need the wm- prefix check for the fallback path
+				if (!scopedTagName && !tagName.includes('-')) {
+					tagName = 'wm-' + tagName;
+				}
 
 				// Create temporary wrapper entry file
 				wrapperPath = islandPath.replace(/\.(js|jsx|ts|tsx|vue)$/, '.__wm-wrapper.js');

package/src/html-cleaner.js

@@ -2,18 +2,32 @@ import { parseDocument } from 'htmlparser2';
 import { DomUtils } from 'htmlparser2';
 import render from 'dom-serializer';
 
+/**
+ * Get a 4-char hex suffix from a component ID (UUID/CUID).
+ * Uses the first 4 hex characters after removing hyphens.
+ * Example: "550e8400-e29b-41d4-a716-446655440000" → "550e"
+ *
+ * @param {string} componentId - UUID or CUID string
+ * @returns {string} 4-char hex suffix
+ */
+export function getComponentSuffix(componentId) {
+	const hex = componentId.replace(/-/g, '');
+	return hex.substring(0, 4).toLowerCase();
+}
+
 /**
  * Clean component HTML by removing all wm: attributes
  * Keeps the HTML structure intact, only removes markers
  *
  * @param {string} html - Original component HTML
  * @param {Array<string>} islands - List of available island names (optional)
+ * @param {string} [componentId] - Component UUID for scoped island tag names
  * @returns {string} Cleaned HTML without wm: attributes
  */
-export function cleanComponentHTML(html, islands = []) {
+export function cleanComponentHTML(html, islands = [], componentId) {
 	// Transform PascalCase island elements to data-island FIRST
 	if (islands && islands.length > 0) {
-		html = transformIslandsToDataAttributes(html, islands);
+		html = transformIslandsToDataAttributes(html, islands, componentId);
 	}
 
 	// Remove wm: attributes using regex (avoids htmlparser2 breaking class: directives)
@@ -46,7 +60,10 @@ export function cleanComponentHTML(html, islands = []) {
  * @param {Array<string>} availableIslands - List of available island names
  * @returns {string} HTML with transformed islands
  */
-function transformIslandsToDataAttributes(html, availableIslands = []) {
+function transformIslandsToDataAttributes(html, availableIslands = [], componentId) {
+	// Compute suffix once if componentId is provided
+	const suffix = componentId ? getComponentSuffix(componentId) : null;
+
 	// Convert PascalCase island name to kebab-case Custom Element tag
 	function toKebabTag(tagName) {
 		let kebabTag = tagName
@@ -57,6 +74,10 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 		if (!kebabTag.includes('-')) {
 			kebabTag = 'wm-' + kebabTag;
 		}
+		// Scope tag name with component suffix to avoid collisions
+		if (suffix) {
+			kebabTag = kebabTag + '-' + suffix;
+		}
 		return kebabTag;
 	}
 

package/src/index.js

@@ -1,6 +1,6 @@
 import { build } from './build.js';
 import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } from './tailwind-generator.js';
-import { cleanComponentHTML } from './html-cleaner.js';
+import { cleanComponentHTML, getComponentSuffix } from './html-cleaner.js';
 import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
@@ -26,7 +26,7 @@ function getMotionRuntime() {
 }
 
 // V1 exports (backward compatible)
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, getComponentSuffix, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
 
 // V2 exports
 export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, migrateResponsiveToFluid, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES };