@webmate-studio/builder 0.2.127 → 0.2.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.127",
+  "version": "0.2.130",
   "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,