@webmate-studio/builder 0.2.126 → 0.2.129

package/package.json

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

package/src/bundler.js

@@ -41,12 +41,65 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		// NEW: Component-specific node_modules (highest priority)
 		const componentNodeModules = componentDir ? path.join(componentDir, 'node_modules') : null;
 
+		// 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) {
+			const sourceCode = await fs.readFile(islandPath, 'utf-8');
+			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
+					.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+					.toLowerCase();
+
+				// Create temporary wrapper entry file
+				wrapperPath = islandPath.replace(/\.(js|jsx|ts|tsx|vue)$/, '.__wm-wrapper.js');
+				const wrapperCode = `
+import IslandClass from './${path.basename(islandPath)}';
+
+class WmIsland extends HTMLElement {
+	connectedCallback() {
+		let props = {};
+		const propsJson = this.getAttribute('data-island-props');
+		if (propsJson) {
+			try { props = JSON.parse(propsJson); } catch {}
+		} else {
+			for (const attr of this.attributes) {
+				if (attr.name === 'data-island-props') continue;
+				try { props[attr.name] = JSON.parse(attr.value); }
+				catch { props[attr.name] = attr.value; }
+			}
+		}
+		try {
+			this._instance = new IslandClass(this, props);
+		} catch (err) {
+			console.error('[Island] Failed to initialize <${tagName}>:', err);
+		}
+	}
+	disconnectedCallback() {
+		if (this._instance && typeof this._instance.destroy === 'function') {
+			this._instance.destroy();
+		}
+	}
+}
+customElements.define('${tagName}', WmIsland);
+`;
+				await fs.writeFile(wrapperPath, wrapperCode, 'utf-8');
+				entryPoint = wrapperPath;
+				console.log(pc.dim(`  ↳ Wrapping ${baseName} as Custom Element <${tagName}>`));
+			}
+		}
+
 		// Determine if this file should use JSX loader
 		// Only use JSX for .jsx files (React/Preact), not for .js files (Lit/Alpine/Vue/Vanilla)
 		const useJsxLoader = islandPath.endsWith('.jsx');
 
 		const result = await esbuild.build({
-			entryPoints: [islandPath],
+			entryPoints: [entryPoint],
 			bundle: true,
 			minify,
 			sourcemap,
@@ -175,6 +228,11 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			logLevel: 'warning'
 		});
 
+		// Clean up temporary wrapper file
+		if (wrapperPath) {
+			await fs.unlink(wrapperPath).catch(() => {});
+		}
+
 		return {
 			success: true,
 			outputPath,
@@ -182,6 +240,10 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			warnings: result.warnings
 		};
 	} catch (error) {
+		// Clean up temporary wrapper file on error
+		if (wrapperPath) {
+			await fs.unlink(wrapperPath).catch(() => {});
+		}
 		return {
 			success: false,
 			error: error.message,

package/src/html-cleaner.js

@@ -47,53 +47,53 @@ export function cleanComponentHTML(html, islands = []) {
  * @returns {string} HTML with transformed islands
  */
 function transformIslandsToDataAttributes(html, availableIslands = []) {
-	// Match self-closing PascalCase tags with attributes
-	// Pattern: <ComponentName attrs... />
-	return html.replace(/<([A-Z][a-zA-Z0-9]*)\s+([^>]*)\/>/g, (match, tagName, attrsString) => {
-		// Check if this is a registered island
-		if (!availableIslands.includes(tagName)) {
-			return match; // Not an island, keep as-is
-		}
-
-		// Convert island name to kebab-case for Custom Element tag
-		// SwiperTest → swiper-test
-		// MyAwesomeComponent → my-awesome-component
+	// Convert PascalCase island name to kebab-case Custom Element tag
+	function toKebabTag(tagName) {
 		let kebabTag = tagName
 			.replace(/([A-Z])/g, '-$1')
 			.toLowerCase()
 			.replace(/^-/, '');
-
-		// Svelte requires custom element names to be hyphenated
-		// If there's no hyphen, add a prefix to make it valid
-		// IMPORTANT: Must match the prefix logic in injectSvelteOptions()
+		// Custom elements must contain a hyphen
 		if (!kebabTag.includes('-')) {
-			kebabTag = 'wm-' + kebabTag;  // e.g., "sidebar" → "wm-sidebar"
+			kebabTag = 'wm-' + kebabTag;
 		}
+		return kebabTag;
+	}
 
-		// Parse attributes and convert to HTML attributes
+	// Parse attributes string into HTML attributes
+	function parseAttrs(attrsString) {
 		const attrs = [];
-
-		// Match prop={value} or prop="value" patterns
 		const attrPattern = /([a-z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
 		let attrMatch;
-
 		while ((attrMatch = attrPattern.exec(attrsString)) !== null) {
 			const propName = attrMatch[1];
-			// Get value from whichever group matched (curly braces, double quotes, or single quotes)
 			const propValue = attrMatch[2] || attrMatch[3] || attrMatch[4];
-
-			// If it was in curly braces, keep the braces for runtime evaluation
-			// Otherwise it's a literal string
 			const value = attrMatch[2] ? `{${propValue}}` : propValue;
-
-			// Add as HTML attribute
 			attrs.push(`${propName}="${value}"`);
 		}
+		return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+	}
 
-		// Generate Custom Element tag
-		const attrsHtml = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
-		return `<${kebabTag}${attrsHtml}></${kebabTag}>`;
+	// 1. Self-closing: <ComponentName attrs... />
+	html = html.replace(/<([A-Z][a-zA-Z0-9]*)\s+([^>]*)\/>/g, (match, tagName, attrsString) => {
+		if (!availableIslands.includes(tagName)) return match;
+		const kebabTag = toKebabTag(tagName);
+		return `<${kebabTag}${parseAttrs(attrsString)}></${kebabTag}>`;
 	});
+
+	// 2. Opening + closing with children: <ComponentName attrs>...children...</ComponentName>
+	for (const islandName of availableIslands) {
+		const openPattern = new RegExp(`<${islandName}(\\s[^>]*)?>`, 'g');
+		const closePattern = new RegExp(`</${islandName}>`, 'g');
+		const kebabTag = toKebabTag(islandName);
+
+		html = html.replace(openPattern, (match, attrsString) => {
+			return `<${kebabTag}${parseAttrs(attrsString || '')}>`;
+		});
+		html = html.replace(closePattern, `</${kebabTag}>`);
+	}
+
+	return html;
 }
 
 /**