@webmate-studio/builder 0.2.124 → 0.2.126

package/package.json

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

package/src/bundler.js

@@ -25,7 +25,8 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		sourcemap = true,
 		target = 'es2020',
 		format = 'esm',
-		componentDir = null  // NEW: Component directory for component-specific node_modules
+		componentDir = null,  // Component directory for component-specific node_modules
+		svelteCustomElement = true  // Set false for mount()-based islands (preview mode)
 	} = options;
 
 	try {
@@ -53,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)
@@ -152,12 +154,12 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 						});
 					}
 				},
-				// Svelte support (Svelte 5 Web Components)
+				// Svelte support
 				esbuildSvelte({
 					compilerOptions: {
-						customElement: true, // Compile to Web Components
-						css: 'injected', // CSS always injected for custom elements
-						runes: true // Enable Svelte 5 runes ($props, $derived, $effect, etc.)
+						customElement: svelteCustomElement,
+						css: 'injected',
+						runes: true
 					}
 				})
 			],
@@ -191,7 +193,7 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 /**
  * Bundle all islands in a component directory
  */
-export async function bundleComponentIslands(componentDir, outputDir) {
+export async function bundleComponentIslands(componentDir, outputDir, options = {}) {
 	const islandsDir = path.join(componentDir, 'islands');
 
 	// Check if islands directory exists
@@ -204,7 +206,7 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 	// 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') ||
@@ -213,6 +215,13 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 		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 };
 	}
@@ -230,8 +239,8 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 		console.log(pc.dim(`  Bundling ${islandFile}...`));
 
-		// Pass componentDir to bundler for component-specific node_modules resolution
-		const result = await bundleIsland(inputPath, outputPath, { componentDir });
+		// Pass componentDir and any extra options to bundler
+		const result = await bundleIsland(inputPath, outputPath, { componentDir, ...options });
 
 		if (result.success) {
 			const sizeKb = (result.size / 1024).toFixed(2);