@webmate-studio/cli 0.1.0

package/src/utils/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 CLI package
+		const cliNodeModules = 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 CLI's node_modules to resolve path so Svelte runtime can be found
+			nodePaths: [cliNodeModules],
+			// 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`;
+}

package/src/utils/config.js

@@ -0,0 +1,103 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { pathToFileURL } from 'url';
+
+/**
+ * Load Webmate config from current project
+ */
+export async function loadConfig() {
+	const configPath = join(process.cwd(), 'wm.config.js');
+
+	// If no config file exists, return defaults
+	if (!existsSync(configPath)) {
+		return getDefaultConfig();
+	}
+
+	try {
+		// Dynamic import with file URL
+		const configUrl = pathToFileURL(configPath).href;
+		const module = await import(configUrl);
+		const config = module.default || module;
+
+		// Merge with defaults
+		return {
+			...getDefaultConfig(),
+			...config
+		};
+	} catch (error) {
+		console.warn(`Warning: Could not load config from ${configPath}`);
+		console.warn(error.message);
+		return getDefaultConfig();
+	}
+}
+
+/**
+ * Get default configuration
+ */
+function getDefaultConfig() {
+	return {
+		version: '0.1.0', // Default version if not specified
+		components: {
+			path: './components',
+			styles: [],
+			fonts: [],
+			islands: {
+				path: './islands',
+				framework: 'lit'
+			}
+		},
+		preview: {
+			port: 5173,
+			theme: 'light',
+			viewport: {
+				width: 1440,
+				height: 900
+			},
+			backgrounds: ['#ffffff', '#f5f5f5', '#000000']
+		},
+		output: {
+			dir: './dist',
+			format: 'esm',
+			minify: false
+		}
+	};
+}
+
+/**
+ * Get path to config file
+ * @returns {string} Path to wm.config.js
+ */
+export function getConfigPath() {
+	return join(process.cwd(), 'wm.config.js');
+}
+
+/**
+ * Update version in config file
+ * @param {string} newVersion - New version string
+ */
+export function updateConfigVersion(newVersion) {
+	const configPath = getConfigPath();
+
+	if (!existsSync(configPath)) {
+		throw new Error('No wm.config.js found in current directory.');
+	}
+
+	let content = readFileSync(configPath, 'utf8');
+
+	// Check if version field exists
+	if (content.includes('version:')) {
+		// Update existing version
+		content = content.replace(
+			/version:\s*['"][\d.]+['"]/,
+			`version: '${newVersion}'`
+		);
+	} else {
+		// Add version field after export default {
+		content = content.replace(
+			/export default \{/,
+			`export default {\n\t// Component version (semantic versioning)\n\tversion: '${newVersion}',\n`
+		);
+	}
+
+	writeFileSync(configPath, content, 'utf8');
+}

package/src/utils/semver.js

@@ -0,0 +1,76 @@
+/**
+ * Semantic Versioning Utilities
+ */
+
+/**
+ * Parse a semantic version string
+ * @param {string} version - Version string (e.g., "1.2.3")
+ * @returns {{major: number, minor: number, patch: number}}
+ */
+export function parseVersion(version) {
+	const match = version.match(/^(\d+)\.(\d+)\.(\d+)$/);
+
+	if (!match) {
+		throw new Error(`Invalid version format: ${version}. Expected format: x.y.z`);
+	}
+
+	return {
+		major: parseInt(match[1], 10),
+		minor: parseInt(match[2], 10),
+		patch: parseInt(match[3], 10)
+	};
+}
+
+/**
+ * Convert version object to string
+ * @param {{major: number, minor: number, patch: number}} version
+ * @returns {string}
+ */
+export function versionToString(version) {
+	return `${version.major}.${version.minor}.${version.patch}`;
+}
+
+/**
+ * Increment patch version (1.2.3 → 1.2.4)
+ * @param {string} version - Current version
+ * @returns {string} - New version
+ */
+export function incrementPatch(version) {
+	const parsed = parseVersion(version);
+	parsed.patch += 1;
+	return versionToString(parsed);
+}
+
+/**
+ * Increment minor version (1.2.3 → 1.3.0)
+ * @param {string} version - Current version
+ * @returns {string} - New version
+ */
+export function incrementMinor(version) {
+	const parsed = parseVersion(version);
+	parsed.minor += 1;
+	parsed.patch = 0;
+	return versionToString(parsed);
+}
+
+/**
+ * Increment major version (1.2.3 → 2.0.0)
+ * @param {string} version - Current version
+ * @returns {string} - New version
+ */
+export function incrementMajor(version) {
+	const parsed = parseVersion(version);
+	parsed.major += 1;
+	parsed.minor = 0;
+	parsed.patch = 0;
+	return versionToString(parsed);
+}
+
+/**
+ * Validate version format
+ * @param {string} version - Version to validate
+ * @returns {boolean}
+ */
+export function isValidVersion(version) {
+	return /^\d+\.\d+\.\d+$/.test(version);
+}