@webmate-studio/builder 0.2.125 → 0.2.127

package/package.json

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

package/src/bundler.js

@@ -54,6 +54,7 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			target,
 			outfile: outputPath,
 			platform: 'browser',
+			...(format === 'iife' ? { globalName: '__IslandExport' } : {}),
 			charset: 'utf8', // Force UTF-8 output to prevent base64 corruption (esbuild bug #1501)
 			// Loaders for different file types
 			// NOTE: All image formats are handled by custom plugin above (image-base64-dataurl)
@@ -205,7 +206,7 @@ export async function bundleComponentIslands(componentDir, outputDir, options =
 
 	// Find all island files (JS, JSX, Svelte, Vue, etc.)
 	const files = await fs.readdir(islandsDir);
-	const islandFiles = files.filter((f) =>
+	const allIslandFiles = files.filter((f) =>
 		f.endsWith('.js') ||
 		f.endsWith('.jsx') ||
 		f.endsWith('.svelte') ||
@@ -214,6 +215,13 @@ export async function bundleComponentIslands(componentDir, outputDir, options =
 		f.endsWith('.tsx')
 	);
 
+	// Skip .svelte files that have a matching .js wrapper (the .js is the entry point)
+	const jsNames = new Set(allIslandFiles.filter(f => f.endsWith('.js')).map(f => f.replace(/\.js$/, '')));
+	const islandFiles = allIslandFiles.filter(f => {
+		if (f.endsWith('.svelte') && jsNames.has(f.replace(/\.svelte$/, ''))) return false;
+		return true;
+	});
+
 	if (islandFiles.length === 0) {
 		return { islands: [], success: true };
 	}

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;
 }
 
 /**