@webmate-studio/builder 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -24,11 +24,21 @@
     "access": "public"
   },
   "dependencies": {
+    "@webmate-studio/core": "^0.1.0",
+    "@webmate-studio/parser": "^0.1.0",
+    "alpinejs": "^3.15.0",
     "dom-serializer": "^2.0.0",
     "esbuild": "^0.19.0",
+    "esbuild-svelte": "^0.9.3",
     "glob": "^10.3.0",
     "htmlparser2": "^9.0.0",
+    "lit": "^3.3.1",
+    "preact": "^10.27.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "svelte": "^5.41.2",
     "tailwindcss": "^4.1.0",
-    "@tailwindcss/cli": "^4.1.0"
+    "@tailwindcss/cli": "^4.1.0",
+    "vue": "^3.5.22"
   }
 }

package/src/build.js

@@ -1,12 +1,12 @@
 import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync, cpSync } from 'fs';
 import { join, dirname, relative, extname, basename } from 'path';
 import { glob } from 'glob';
-import { parseComponent } from '../../parser/src/index.js';
-import { loadConfig, logger } from '../../core/src/index.js';
+import { parseComponent } from '@webmate-studio/parser';
+import { loadConfig, logger } from '@webmate-studio/core';
 import { cleanComponentHTML, extractStyles } from './html-cleaner.js';
 import { generateManifest } from './manifest.js';
 import { generateComponentCSS } from './tailwind-generator-v4.js';
-import { bundleComponentIslands } from '../../cli/src/utils/bundler.js';
+import { bundleComponentIslands } from './bundler.js';
 import { parseDocument } from 'htmlparser2';
 import { DomUtils } from 'htmlparser2';
 import render from 'dom-serializer';

package/src/bundler.js

@@ -0,0 +1,163 @@
+import * as esbuild from 'esbuild';
+import esbuildSvelte from 'esbuild-svelte';
+import fs from 'fs/promises';
+import path from 'path';
+import pc from 'picocolors';
+
+/**
+ * Bundle island JavaScript files with esbuild
+ * Supports: Vanilla JS, React, Preact, Svelte, Alpine, Lit, Vue, Solid
+ */
+export async function bundleIsland(islandPath, outputPath, options = {}) {
+	const {
+		minify = true,
+		sourcemap = true,
+		target = 'es2020',
+		format = 'esm'
+	} = options;
+
+	try {
+		// Resolve paths for dependencies from builder package
+		const builderNodeModules = path.resolve(import.meta.dirname, '../node_modules');
+
+		// 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],
+			bundle: true,
+			minify,
+			sourcemap,
+			format,
+			target,
+			outfile: outputPath,
+			platform: 'browser',
+			// Only enable JSX for .jsx files (React/Preact)
+			loader: useJsxLoader ? {
+				'.jsx': 'jsx',
+				'.ts': 'tsx',
+				'.tsx': 'tsx'
+			} : {
+				'.ts': 'tsx',
+				'.tsx': 'tsx'
+			},
+			// Use automatic JSX runtime (React 17+) only for JSX files
+			jsx: useJsxLoader ? 'automatic' : undefined,
+			// JSX import source (Preact uses preact, React uses react)
+			jsxImportSource: useJsxLoader ? 'preact' : undefined,
+			// Alias vue to the full build (with template compiler)
+			alias: {
+				'vue': 'vue/dist/vue.esm-bundler.js'
+			},
+			// Define Vue feature flags
+			define: {
+				'__VUE_OPTIONS_API__': 'true',
+				'__VUE_PROD_DEVTOOLS__': 'false',
+				'__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false'
+			},
+			plugins: [
+				// Svelte support
+				esbuildSvelte({
+					compilerOptions: {
+						css: 'injected' // Inject CSS into JS
+					}
+				})
+			],
+			// Don't bundle browser globals
+			external: [],
+			// Add builder's node_modules to resolve path so framework runtimes can be found
+			nodePaths: [builderNodeModules],
+			// Log level
+			logLevel: 'warning'
+		});
+
+		return {
+			success: true,
+			outputPath,
+			size: (await fs.stat(outputPath)).size,
+			warnings: result.warnings
+		};
+	} catch (error) {
+		return {
+			success: false,
+			error: error.message,
+			errors: error.errors
+		};
+	}
+}
+
+/**
+ * Bundle all islands in a component directory
+ */
+export async function bundleComponentIslands(componentDir, outputDir) {
+	const islandsDir = path.join(componentDir, 'islands');
+
+	// Check if islands directory exists
+	try {
+		await fs.access(islandsDir);
+	} catch {
+		// No islands directory
+		return { islands: [], success: true };
+	}
+
+	// Find all .js files in islands directory
+	const files = await fs.readdir(islandsDir);
+	const islandFiles = files.filter((f) => f.endsWith('.js'));
+
+	if (islandFiles.length === 0) {
+		return { islands: [], success: true };
+	}
+
+	// Create output directory
+	await fs.mkdir(outputDir, { recursive: true });
+
+	const results = [];
+
+	for (const islandFile of islandFiles) {
+		const inputPath = path.join(islandsDir, islandFile);
+		const outputPath = path.join(outputDir, islandFile);
+
+		console.log(pc.dim(`  Bundling ${islandFile}...`));
+
+		const result = await bundleIsland(inputPath, outputPath);
+
+		if (result.success) {
+			const sizeKb = (result.size / 1024).toFixed(2);
+			console.log(pc.green(`  ✓ ${islandFile} → ${sizeKb}kb`));
+		} else {
+			console.log(pc.red(`  ✗ ${islandFile} failed:`));
+			console.log(pc.red(`    ${result.error}`));
+		}
+
+		results.push({
+			file: islandFile,
+			...result
+		});
+	}
+
+	const allSuccess = results.every((r) => r.success);
+
+	return {
+		islands: results,
+		success: allSuccess
+	};
+}
+
+/**
+ * Get total bundle size for all islands
+ */
+export function getTotalBundleSize(bundleResults) {
+	return bundleResults.islands.reduce((total, island) => {
+		return total + (island.size || 0);
+	}, 0);
+}
+
+/**
+ * Format bundle size in human-readable format
+ */
+export function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes}B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)}KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
+}