@webmate-studio/builder 0.2.30 → 0.2.32

package/build-service.js

@@ -73,11 +73,17 @@ function injectSvelteOptions(filename, content, componentMetadata) {
 	// SwiperTest.svelte → swiper-test
 	// MyAwesomeComponent.svelte → my-awesome-component
 	const componentName = filename.replace('.svelte', '');
-	const tagName = componentName
+	let tagName = componentName
 		.replace(/([A-Z])/g, '-$1')  // Insert hyphen before capital letters
 		.toLowerCase()
 		.replace(/^-/, '');  // Remove leading hyphen
 
+	// Svelte requires custom element names to be hyphenated
+	// If there's no hyphen, add a prefix to make it valid
+	if (!tagName.includes('-')) {
+		tagName = 'wm-' + tagName;  // e.g., "button" → "wm-button"
+	}
+
 	// Generate props definition from component.json
 	const props = {};
 	if (componentMetadata.props) {
@@ -168,9 +174,10 @@ async function buildComponent(payload) {
 			const islandsDir = join(tmpDir, 'islands');
 			await mkdir(islandsDir, { recursive: true });
 
+			// FIRST: Write ALL island files to disk (for cross-imports)
+			// Some islands may import other files from the islands/ directory
 			for (const island of islands) {
 				const inputPath = join(islandsDir, island.file);
-				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
 
 				// Auto-inject <svelte:options> for Svelte islands
 				let content = island.content;
@@ -180,6 +187,12 @@ async function buildComponent(payload) {
 
 				// Write source file
 				await writeFile(inputPath, content);
+			}
+
+			// SECOND: Bundle each island
+			for (const island of islands) {
+				const inputPath = join(islandsDir, island.file);
+				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
 
 				console.log(`[Build Service] Bundling ${island.file}...`);
 

package/package.json

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

package/src/bundler.js

@@ -202,9 +202,16 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 		return { islands: [], success: true };
 	}
 
-	// Find all .js files in islands directory
+	// Find all island files (JS, JSX, Svelte, Vue, etc.)
 	const files = await fs.readdir(islandsDir);
-	const islandFiles = files.filter((f) => f.endsWith('.js'));
+	const islandFiles = files.filter((f) =>
+		f.endsWith('.js') ||
+		f.endsWith('.jsx') ||
+		f.endsWith('.svelte') ||
+		f.endsWith('.vue') ||
+		f.endsWith('.ts') ||
+		f.endsWith('.tsx')
+	);
 
 	if (islandFiles.length === 0) {
 		return { islands: [], success: true };
@@ -217,7 +224,9 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 	for (const islandFile of islandFiles) {
 		const inputPath = path.join(islandsDir, islandFile);
-		const outputPath = path.join(outputDir, islandFile);
+		// Output file is always .js regardless of input extension (.svelte, .jsx, etc.)
+		const outputFile = islandFile.replace(/\.(svelte|jsx|vue|tsx?)$/, '.js');
+		const outputPath = path.join(outputDir, outputFile);
 
 		console.log(pc.dim(`  Bundling ${islandFile}...`));
 
@@ -233,7 +242,7 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 		}
 
 		results.push({
-			file: islandFile,
+			file: outputFile, // Use output filename (.js) instead of input filename
 			...result
 		});
 	}