@webmate-studio/builder 0.1.13 → 0.2.0

package/build-service.js

@@ -0,0 +1,230 @@
+#!/usr/bin/env node
+/**
+ * Component Build Micro-Service
+ * Runs a simple HTTP server that builds components (CSS + Islands)
+ * Extends the CSS service with full component building capabilities
+ */
+
+import http from 'http';
+import { generateComponentCSS } from './src/tailwind-generator.js';
+import { bundleIsland } from './src/bundler.js';
+import { mkdtemp, writeFile, rm, mkdir } from 'fs/promises';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { execSync } from 'child_process';
+import { createHash } from 'crypto';
+
+const PORT = 3031;
+
+/**
+ * Install npm dependencies for a component
+ * @param {string} componentDir - Component directory
+ * @param {Object} packageJson - package.json content
+ */
+async function installDependencies(componentDir, packageJson) {
+	if (!packageJson || !packageJson.dependencies || Object.keys(packageJson.dependencies).length === 0) {
+		return; // No dependencies
+	}
+
+	// Write package.json
+	const packageJsonPath = join(componentDir, 'package.json');
+	await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+	// Check cache
+	const cacheDir = join(componentDir, '.wm-cache');
+	const hashFile = join(cacheDir, 'deps.hash');
+	const nodeModulesExists = existsSync(join(componentDir, 'node_modules'));
+
+	const currentHash = createHash('sha256').update(JSON.stringify(packageJson)).digest('hex');
+	const cachedHash = existsSync(hashFile) ? readFileSync(hashFile, 'utf8').trim() : null;
+
+	if (currentHash === cachedHash && nodeModulesExists) {
+		console.log('[Build Service] Dependencies cached');
+		return;
+	}
+
+	// Install
+	console.log('[Build Service] Installing dependencies...');
+	try {
+		execSync('npm install --no-save --no-audit --no-fund', {
+			cwd: componentDir,
+			stdio: 'inherit'
+		});
+
+		// Save cache
+		await mkdir(cacheDir, { recursive: true });
+		await writeFile(hashFile, currentHash);
+
+		console.log('[Build Service] ✓ Dependencies installed');
+	} catch (error) {
+		throw new Error(`Failed to install dependencies: ${error.message}`);
+	}
+}
+
+/**
+ * Build a component (islands + CSS)
+ * @param {Object} payload - Build request payload
+ * @returns {Object} Build result
+ */
+async function buildComponent(payload) {
+	const { packageJson, islands, html, componentName = 'component' } = payload;
+
+	// Create temporary directory
+	const tmpDir = await mkdtemp(join(tmpdir(), 'wm-build-'));
+
+	try {
+		console.log(`[Build Service] Building ${componentName} in ${tmpDir}`);
+
+		// Install dependencies if needed
+		if (packageJson) {
+			await installDependencies(tmpDir, packageJson);
+		}
+
+		// Build islands
+		const bundledIslands = [];
+		if (islands && islands.length > 0) {
+			const islandsDir = join(tmpDir, 'islands');
+			await mkdir(islandsDir, { recursive: true });
+
+			for (const island of islands) {
+				const inputPath = join(islandsDir, island.file);
+				const outputPath = join(islandsDir, island.file.replace(/\.(jsx?|tsx?|svelte|vue)$/, '.js'));
+
+				// Write source file
+				await writeFile(inputPath, island.content);
+
+				console.log(`[Build Service] Bundling ${island.file}...`);
+
+				// Bundle with esbuild (pass tmpDir for node_modules resolution)
+				const result = await bundleIsland(inputPath, outputPath, {
+					componentDir: tmpDir,
+					minify: true,
+					sourcemap: false
+				});
+
+				if (!result.success) {
+					throw new Error(`Failed to bundle ${island.file}: ${result.error}`);
+				}
+
+				// Read bundled content
+				const bundledContent = readFileSync(outputPath, 'utf8');
+
+				bundledIslands.push({
+					file: island.file,
+					content: bundledContent,
+					size: result.size,
+					originalSize: island.content.length
+				});
+
+				console.log(`[Build Service] ✓ ${island.file} → ${(result.size / 1024).toFixed(2)}kb`);
+			}
+		}
+
+		// Generate CSS
+		let css = '';
+		if (html) {
+			console.log('[Build Service] Generating CSS...');
+			const cssResult = await generateComponentCSS(html, {
+				designTokens: null,
+				minify: true
+			});
+			css = cssResult.css;
+			console.log(`[Build Service] ✓ CSS → ${(css.length / 1024).toFixed(2)}kb`);
+		}
+
+		return {
+			success: true,
+			bundledIslands,
+			css,
+			stats: {
+				islands: bundledIslands.length,
+				totalSize: bundledIslands.reduce((sum, i) => sum + i.size, 0) + css.length
+			}
+		};
+	} finally {
+		// Cleanup temp directory
+		await rm(tmpDir, { recursive: true, force: true });
+	}
+}
+
+const server = http.createServer(async (req, res) => {
+	// CORS headers
+	res.setHeader('Access-Control-Allow-Origin', '*');
+	res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+	res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+	// Handle preflight
+	if (req.method === 'OPTIONS') {
+		res.writeHead(200);
+		res.end();
+		return;
+	}
+
+	// Only accept POST
+	if (req.method !== 'POST') {
+		res.writeHead(404, { 'Content-Type': 'application/json' });
+		res.end(JSON.stringify({ success: false, error: 'Not found' }));
+		return;
+	}
+
+	// Read body
+	let body = '';
+	req.on('data', chunk => {
+		body += chunk.toString();
+	});
+
+	req.on('end', async () => {
+		try {
+			const payload = JSON.parse(body);
+
+			// Route to appropriate handler
+			if (req.url === '/css/generate' || req.url === '/generate') {
+				// Legacy CSS generation endpoint
+				const { html } = payload;
+
+				if (!html) {
+					res.writeHead(400, { 'Content-Type': 'application/json' });
+					res.end(JSON.stringify({ success: false, error: 'Missing html parameter' }));
+					return;
+				}
+
+				const result = await generateComponentCSS(html, {
+					designTokens: null,
+					minify: true
+				});
+
+				res.writeHead(200, { 'Content-Type': 'application/json' });
+				res.end(JSON.stringify({
+					success: true,
+					css: result.css,
+					classes: result.classes
+				}));
+			} else if (req.url === '/build' || req.url === '/component/build') {
+				// NEW: Full component build (islands + CSS)
+				const result = await buildComponent(payload);
+
+				res.writeHead(200, { 'Content-Type': 'application/json' });
+				res.end(JSON.stringify(result));
+			} else {
+				res.writeHead(404, { 'Content-Type': 'application/json' });
+				res.end(JSON.stringify({ success: false, error: 'Not found' }));
+			}
+		} catch (error) {
+			console.error('[Build Service] Error:', error);
+			res.writeHead(500, { 'Content-Type': 'application/json' });
+			res.end(JSON.stringify({
+				success: false,
+				error: error.message,
+				stack: process.env.NODE_ENV === 'development' ? error.stack : undefined
+			}));
+		}
+	});
+});
+
+server.listen(PORT, () => {
+	console.log(`[Build Service] Running on http://localhost:${PORT}`);
+	console.log(`[Build Service] Endpoints:`);
+	console.log(`  POST /css/generate    - Generate Tailwind CSS`);
+	console.log(`  POST /build           - Build component (islands + CSS)`);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -15,11 +15,18 @@
     "url": "https://github.com/webmate-studio/builder.git"
   },
   "files": [
-    "src"
+    "src",
+    "build-service.js"
   ],
   "exports": {
     ".": "./src/index.js"
   },
+  "bin": {
+    "wm-build-service": "./build-service.js"
+  },
+  "scripts": {
+    "service": "node build-service.js"
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/build.js

@@ -1,8 +1,10 @@
 import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync, cpSync } from 'fs';
 import { join, dirname, relative, extname, basename } from 'path';
 import { glob } from 'glob';
+import { execSync } from 'child_process';
+import { createHash } from 'crypto';
 import { parseComponent } from '@webmate-studio/parser';
-import { loadConfig, logger } from '@webmate-studio/core';
+import { loadConfig, logger, validateComponents, ComponentValidationError } from '@webmate-studio/core';
 import { cleanComponentHTML, extractStyles } from './html-cleaner.js';
 import { generateManifest } from './manifest.js';
 import { generateComponentCSS } from './tailwind-generator.js';
@@ -11,6 +13,67 @@ import { parseDocument } from 'htmlparser2';
 import { DomUtils } from 'htmlparser2';
 import render from 'dom-serializer';
 
+/**
+ * Install component dependencies from package.json
+ * Uses caching to avoid unnecessary npm installs
+ * @param {string} componentDir - Component directory path
+ * @param {string} componentName - Component name for logging
+ */
+async function installComponentDependencies(componentDir, componentName) {
+	const packageJsonPath = join(componentDir, 'package.json');
+
+	// No package.json? Skip.
+	if (!existsSync(packageJsonPath)) {
+		return;
+	}
+
+	const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+
+	// No dependencies? Skip.
+	if (!packageJson.dependencies || Object.keys(packageJson.dependencies).length === 0) {
+		return;
+	}
+
+	// Check cache: Has package.json changed since last install?
+	const cacheDir = join(componentDir, '.wm-cache');
+	const hashFile = join(cacheDir, 'deps.hash');
+	const nodeModulesExists = existsSync(join(componentDir, 'node_modules'));
+
+	// Calculate hash of package.json content
+	const packageJsonContent = readFileSync(packageJsonPath, 'utf8');
+	const currentHash = createHash('sha256').update(packageJsonContent).digest('hex');
+
+	// Read cached hash
+	const cachedHash = existsSync(hashFile) ? readFileSync(hashFile, 'utf8').trim() : null;
+
+	// Skip install if:
+	// 1. Hash matches (package.json unchanged)
+	// 2. node_modules exists
+	if (currentHash === cachedHash && nodeModulesExists) {
+		logger.debug(`  ↳ Dependencies cached (${componentName})`);
+		return;
+	}
+
+	// Install dependencies
+	logger.info(`  ↳ Installing dependencies for ${componentName}...`);
+
+	try {
+		execSync('npm install --no-save --no-audit --no-fund', {
+			cwd: componentDir,
+			stdio: 'inherit'
+		});
+
+		// Save hash to cache
+		mkdirSync(cacheDir, { recursive: true });
+		writeFileSync(hashFile, currentHash, 'utf8');
+
+		logger.success(`  ↳ Dependencies installed (${componentName})`);
+	} catch (error) {
+		logger.error(`  ✗ Failed to install dependencies for ${componentName}: ${error.message}`);
+		throw error;
+	}
+}
+
 /**
  * Add scoping attribute to root element of component
  * @param {string} html - Component HTML
@@ -150,6 +213,44 @@ export async function build(options = {}) {
 
 	logger.info(`Found ${allComponents.length} components`);
 
+	// Validate all components BEFORE building
+	logger.info('Validating component.json files...');
+	try {
+		const componentsToValidate = allComponents
+			.filter(file => file.endsWith('component.html')) // Only directory-based components need component.json
+			.map(file => {
+				const componentDir = dirname(join(componentsDir, file));
+				const componentJsonPath = join(componentDir, 'component.json');
+				const folderName = basename(componentDir);
+
+				let componentJson = null;
+				if (existsSync(componentJsonPath)) {
+					try {
+						componentJson = JSON.parse(readFileSync(componentJsonPath, 'utf8'));
+					} catch (error) {
+						// Will be caught by validator
+					}
+				}
+
+				return {
+					name: folderName,
+					path: relative(componentsDir, componentDir),
+					json: componentJson
+				};
+			});
+
+		if (componentsToValidate.length > 0) {
+			validateComponents(componentsToValidate);
+			logger.success(`✓ All ${componentsToValidate.length} components have valid UUIDs`);
+		}
+	} catch (error) {
+		if (error instanceof ComponentValidationError) {
+			logger.error(error.message);
+			process.exit(1);
+		}
+		throw error;
+	}
+
 	const manifest = {
 		version: '1.0.0',
 		components: [],
@@ -165,6 +266,15 @@ export async function build(options = {}) {
 		const componentPath = join(componentsDir, file);
 		const html = readFileSync(componentPath, 'utf8');
 
+		// Determine if this is a directory-based component (before parsing)
+		const isDirectoryComponent = file.endsWith('component.html');
+		const componentDir = isDirectoryComponent ? dirname(join(componentsDir, file)) : null;
+
+		// Install component dependencies if package.json exists
+		if (componentDir) {
+			await installComponentDependencies(componentDir, basename(componentDir));
+		}
+
 		try {
 			// Parse component to extract schema
 			const component = parseComponent(html, file);
@@ -182,18 +292,29 @@ export async function build(options = {}) {
 			const isDirectoryComponent = file.endsWith('component.html');
 			const componentDir = isDirectoryComponent ? dirname(join(componentsDir, file)) : null;
 
-			// For directory-based components, load component.json to get the correct name
+			// For directory-based components, load component.json to get UUID, name, etc.
+			let componentUuid = null;
 			if (isDirectoryComponent && componentDir) {
 				const componentJsonPath = join(componentDir, 'component.json');
 				if (existsSync(componentJsonPath)) {
 					try {
 						const componentJson = JSON.parse(readFileSync(componentJsonPath, 'utf8'));
-						if (componentJson.name) {
+
+						// Extract UUID (required, validated earlier)
+						if (componentJson.id) {
+							componentUuid = componentJson.id.toLowerCase();
+						}
+
+						// Use displayName if available, otherwise name, otherwise fallback to parsed name
+						if (componentJson.displayName) {
+							component.name = componentJson.displayName;
+						} else if (componentJson.name) {
 							component.name = componentJson.name;
-							// Also merge props from component.json
-							if (componentJson.props) {
-								component.props = { ...component.props, ...componentJson.props };
-							}
+						}
+
+						// Also merge props from component.json
+						if (componentJson.props) {
+							component.props = { ...component.props, ...componentJson.props };
 						}
 					} catch (error) {
 						logger.warn(`Failed to parse component.json for ${file}: ${error.message}`);
@@ -272,6 +393,11 @@ export async function build(options = {}) {
 				source: file
 			};
 
+			// Add UUID for directory-based components (required for CMS sync)
+			if (componentUuid) {
+				manifestEntry.id = componentUuid;
+			}
+
 			// Handle directory-based components (islands + assets)
 			if (isDirectoryComponent && componentDir) {
 				const componentOutputDir = dirname(outputPath);

package/src/bundler.js

@@ -16,7 +16,8 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		minify = true,
 		sourcemap = true,
 		target = 'es2020',
-		format = 'esm'
+		format = 'esm',
+		componentDir = null  // NEW: Component directory for component-specific node_modules
 	} = options;
 
 	try {
@@ -28,6 +29,9 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 		const cwd = process.cwd();
 		const workspaceNodeModules = path.join(cwd, 'node_modules');
 
+		// NEW: Component-specific node_modules (highest priority)
+		const componentNodeModules = componentDir ? path.join(componentDir, 'node_modules') : null;
+
 		// 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');
@@ -88,8 +92,10 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			],
 			// Don't bundle browser globals
 			external: [],
-			// Add multiple resolution paths - try both builder's node_modules and workspace node_modules
-			nodePaths: [builderNodeModules, workspaceNodeModules],
+			// Add multiple resolution paths - Component node_modules has highest priority
+			nodePaths: componentNodeModules
+				? [componentNodeModules, builderNodeModules, workspaceNodeModules]
+				: [builderNodeModules, workspaceNodeModules],
 			// Enable package.json conditions for proper Svelte module resolution
 			conditions: ['svelte', 'browser', 'import'],
 			// Log level
@@ -144,7 +150,8 @@ export async function bundleComponentIslands(componentDir, outputDir) {
 
 		console.log(pc.dim(`  Bundling ${islandFile}...`));
 
-		const result = await bundleIsland(inputPath, outputPath);
+		// Pass componentDir to bundler for component-specific node_modules resolution
+		const result = await bundleIsland(inputPath, outputPath, { componentDir });
 
 		if (result.success) {
 			const sizeKb = (result.size / 1024).toFixed(2);

package/src/html-cleaner.js

@@ -27,16 +27,30 @@ export function cleanComponentHTML(html) {
 
 /**
  * Recursively remove metadata wm: attributes from DOM tree
- * KEEPS runtime attributes like wm:if, wm:for, wm:prop:*
+ * KEEPS runtime attributes: wm:if, wm:for, wm:island, wm:island-prop:*, wm:island-props, wm:class:*
+ * REMOVES metadata attributes: wm:component, wm:prop, wm:props, wm:schema, wm:description
+ *
+ * Note: Runtime attributes use Svelte-style syntax with curly braces:
+ * - wm:if={expression}
+ * - wm:for={item in items}
+ * - wm:class:active={isActive}
+ * - wm:island-prop:count={0}
+ *
  * @param {Object} node - DOM node
  */
 function removeWmAttributes(node) {
 	if (node.type === 'tag' && node.attribs) {
-		// Only remove metadata attributes, keep runtime directives!
-		const metadataAttributes = ['wm:component', 'wm:description', 'wm:props', 'wm:schema'];
+		// Metadata attributes to remove (no longer used - everything in component.json!)
+		const metadataAttributes = [
+			'wm:component',   // Removed: Use component.json instead
+			'wm:prop',        // Removed: Use component.json instead
+			'wm:props',       // Removed: Use component.json instead
+			'wm:schema',      // Legacy, removed
+			'wm:description'  // Metadata only
+		];
 
 		for (const attr in node.attribs) {
-			// Remove only metadata attributes, keep wm:if, wm:for, wm:prop:*, etc.
+			// Remove metadata attributes
 			if (metadataAttributes.includes(attr)) {
 				delete node.attribs[attr];
 			}

package/src/index.js

@@ -1,4 +1,5 @@
 import { build } from './build.js';
 import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } from './tailwind-generator.js';
+import { cleanComponentHTML } from './html-cleaner.js';
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML };