@webmate-studio/cli 0.1.0

package/src/commands/prop.js

@@ -0,0 +1,286 @@
+import fs from 'fs/promises';
+import { existsSync, readFileSync } from 'fs';
+import path from 'path';
+import { input, select, confirm } from '@inquirer/prompts';
+import pc from 'picocolors';
+import glob from 'glob';
+
+/**
+ * Add a property to a component
+ * wm prop [filename]
+ */
+export async function prop(filename) {
+	console.log(pc.cyan('\n📝 Add Property to Component\n'));
+
+	let targetFile;
+
+	// Case 1: Filename provided
+	if (filename) {
+		if (!existsSync(filename)) {
+			console.log(pc.red(`\n❌ File not found: ${filename}\n`));
+			return;
+		}
+		targetFile = filename;
+	} else {
+		// Case 2: No filename - auto-detect
+		targetFile = await detectComponentFile();
+		if (!targetFile) return;
+	}
+
+	console.log(pc.dim(`Target: ${targetFile}\n`));
+
+	// Read and parse component
+	const content = readFileSync(targetFile, 'utf-8');
+	const { metadata, props, propsScriptMatch } = parseComponent(content);
+
+	if (!propsScriptMatch) {
+		console.log(pc.yellow('⚠️  No <script wm:props> found in component.'));
+		const shouldCreate = await confirm({
+			message: 'Create wm:props section?',
+			default: true
+		});
+
+		if (!shouldCreate) {
+			console.log(pc.dim('\nAborted.\n'));
+			return;
+		}
+	}
+
+	// Show existing props
+	if (Object.keys(props).length > 0) {
+		console.log(pc.dim('Existing props:'));
+		Object.keys(props).forEach((key) => {
+			console.log(pc.dim(`  - ${key} (${props[key].type})`));
+		});
+		console.log();
+	}
+
+	// Wizard for new prop (reuse logic from generate.js)
+	const propName = await input({
+		message: 'Property name (camelCase):',
+		validate: (value) => {
+			if (!value) return 'Property name is required';
+			if (!/^[a-z][a-zA-Z0-9]*$/.test(value)) {
+				return 'Property name must be in camelCase (e.g., myProperty)';
+			}
+			if (props[value]) return 'Property already exists';
+			return true;
+		}
+	});
+
+	const propType = await select({
+		message: 'Property type:',
+		choices: [
+			{ name: 'String (text input)', value: 'string' },
+			{ name: 'Boolean (checkbox)', value: 'boolean' },
+			{ name: 'Number (number input)', value: 'number' },
+			{ name: 'Select (dropdown)', value: 'select' },
+			{ name: 'Color (color picker)', value: 'color' },
+			{ name: 'Image (image upload)', value: 'image' },
+			{ name: 'Rich Text (WYSIWYG editor)', value: 'richtext' }
+		]
+	});
+
+	const propLabel = await input({
+		message: 'Property label (display name):',
+		default: propName.charAt(0).toUpperCase() + propName.slice(1).replace(/([A-Z])/g, ' $1')
+	});
+
+	const propDescription = await input({
+		message: 'Property description (optional):',
+		default: ''
+	});
+
+	let propDefault = '';
+	let propOptions = null;
+	let propMin = null;
+	let propMax = null;
+
+	// Type-specific configuration
+	if (propType === 'string') {
+		propDefault = await input({
+			message: 'Default value:',
+			default: ''
+		});
+	} else if (propType === 'boolean') {
+		const defaultBool = await confirm({
+			message: 'Default value:',
+			default: false
+		});
+		propDefault = defaultBool;
+	} else if (propType === 'number') {
+		propDefault = await input({
+			message: 'Default value:',
+			default: '0',
+			validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+		});
+		propDefault = Number(propDefault);
+
+		const hasMin = await confirm({
+			message: 'Set minimum value?',
+			default: false
+		});
+
+		if (hasMin) {
+			propMin = await input({
+				message: 'Minimum value:',
+				validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+			});
+			propMin = Number(propMin);
+		}
+
+		const hasMax = await confirm({
+			message: 'Set maximum value?',
+			default: false
+		});
+
+		if (hasMax) {
+			propMax = await input({
+				message: 'Maximum value:',
+				validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+			});
+			propMax = Number(propMax);
+		}
+	} else if (propType === 'select') {
+		const optionsInput = await input({
+			message: 'Options (comma-separated):',
+			validate: (v) => (v ? true : 'At least one option required')
+		});
+		propOptions = optionsInput.split(',').map((o) => o.trim());
+		propDefault = propOptions[0];
+	} else if (propType === 'color') {
+		propDefault = await input({
+			message: 'Default color (hex):',
+			default: '#000000',
+			validate: (v) => (/^#[0-9A-Fa-f]{6}$/.test(v) ? true : 'Must be hex color (e.g., #ff0000)')
+		});
+	} else if (propType === 'richtext') {
+		propDefault = '<p></p>';
+	} else if (propType === 'image') {
+		propDefault = '';
+	}
+
+	// Build new prop
+	const newProp = {
+		type: propType,
+		label: propLabel,
+		default: propDefault
+	};
+
+	if (propDescription) newProp.description = propDescription;
+	if (propOptions) newProp.options = propOptions;
+	if (propMin !== null) newProp.min = propMin;
+	if (propMax !== null) newProp.max = propMax;
+
+	// Add to props object
+	props[propName] = newProp;
+
+	// Update file content
+	let newContent;
+	if (propsScriptMatch) {
+		// Replace existing wm:props script
+		const propsJson = JSON.stringify(props, null, 2);
+		const newPropsScript = `<script type="application/json" wm:props>\n${propsJson}\n</script>`;
+		newContent = content.replace(propsScriptMatch[0], newPropsScript);
+	} else {
+		// Insert new wm:props script after wm:description (if exists) or at beginning
+		const descMatch = content.match(
+			/<script[^>]*wm:description[^>]*>[\s\S]*?<\/script>/
+		);
+
+		const propsJson = JSON.stringify(props, null, 2);
+		const newPropsScript = `\n<!-- Component Props -->\n<script type="application/json" wm:props>\n${propsJson}\n</script>\n`;
+
+		if (descMatch) {
+			// Insert after description script
+			const insertPos = descMatch.index + descMatch[0].length;
+			newContent = content.slice(0, insertPos) + newPropsScript + content.slice(insertPos);
+		} else {
+			// Insert at beginning
+			newContent = newPropsScript + content;
+		}
+	}
+
+	// Write back
+	await fs.writeFile(targetFile, newContent, 'utf-8');
+
+	console.log(pc.green(`\n✓ Property "${propName}" added to ${targetFile}`));
+	console.log(pc.dim(`\nUse in template: {{${propName}}}\n`));
+}
+
+/**
+ * Auto-detect component file
+ */
+async function detectComponentFile() {
+	const htmlFiles = glob.sync('*.html');
+
+	if (htmlFiles.length === 0) {
+		// No files in current dir - check components/ dir
+		const componentFiles = glob.sync('components/**/*.html');
+
+		if (componentFiles.length === 0) {
+			console.log(pc.red('\n❌ No .html component files found\n'));
+			return null;
+		}
+
+		// Show selector for all components
+		const selected = await select({
+			message: 'Which component?',
+			choices: componentFiles.map((f) => ({
+				name: f,
+				value: f
+			}))
+		});
+
+		return selected;
+	}
+
+	if (htmlFiles.length === 1) {
+		// Exactly one file - use it
+		return htmlFiles[0];
+	}
+
+	// Multiple files - ask
+	const selected = await select({
+		message: 'Which component?',
+		choices: htmlFiles.map((f) => ({
+			name: f,
+			value: f
+		}))
+	});
+
+	return selected;
+}
+
+/**
+ * Parse component to extract existing props
+ */
+function parseComponent(content) {
+	// Extract wm:description
+	const descMatch = content.match(/<script[^>]*wm:description[^>]*>([\s\S]*?)<\/script>/);
+	let metadata = {};
+	if (descMatch) {
+		try {
+			metadata = JSON.parse(descMatch[1].trim());
+		} catch (e) {
+			// Ignore parse errors
+		}
+	}
+
+	// Extract wm:props
+	const propsMatch = content.match(/<script[^>]*wm:props[^>]*>([\s\S]*?)<\/script>/);
+	let props = {};
+	if (propsMatch) {
+		try {
+			props = JSON.parse(propsMatch[1].trim());
+		} catch (e) {
+			console.warn(pc.yellow('⚠️  Could not parse existing props (invalid JSON)'));
+		}
+	}
+
+	return {
+		metadata,
+		props,
+		propsScriptMatch: propsMatch
+	};
+}

package/src/commands/push.js

@@ -0,0 +1,275 @@
+import { uploadComponents, logger } from '../../../core/src/index.js';
+import { loadAuth, getTenantCmsUrl, getApiToken, isLoggedIn } from '../utils/auth.js';
+import { loadConfig, updateConfigVersion } from '../utils/config.js';
+import { incrementPatch, incrementMinor, incrementMajor } from '../utils/semver.js';
+import { build as buildComponents } from '../../../builder/src/index.js';
+import { existsSync, readFileSync, statSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { select } from '@inquirer/prompts';
+import ora from 'ora';
+import pc from 'picocolors';
+
+/**
+ * Load design tokens from CMS
+ */
+async function loadDesignTokens() {
+	try {
+		const auth = loadAuth();
+		if (!auth || !auth.apiToken) {
+			return null;
+		}
+
+		const cmsUrl = getTenantCmsUrl();
+		if (!cmsUrl) {
+			return null;
+		}
+
+		// Disable SSL verification for localhost
+		const isLocalhost = cmsUrl.includes('localhost') || cmsUrl.includes('127.0.0.1');
+		if (isLocalhost) {
+			process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+		}
+
+		const response = await fetch(`${cmsUrl}/api/design-tokens`, {
+			headers: {
+				'x-api-token': auth.apiToken
+			}
+		});
+
+		if (!response.ok) {
+			return null;
+		}
+
+		const data = await response.json();
+
+		// Restore SSL verification
+		if (isLocalhost) {
+			delete process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+		}
+
+		return data.tokens || null;
+	} catch (error) {
+		return null;
+	}
+}
+
+/**
+ * Check if build is stale (source files newer than build)
+ */
+function isBuildStale(config) {
+	const distDir = config.output.dir;
+	const componentsDir = config.components.path;
+
+	const manifestPath = join(distDir, 'manifest.json');
+	if (!existsSync(manifestPath)) {
+		return true; // No build exists
+	}
+
+	try {
+		const manifestStat = statSync(manifestPath);
+		const manifestTime = manifestStat.mtimeMs;
+
+		// Check if any component file is newer than manifest
+		const componentFiles = readdirSync(componentsDir, { recursive: true, withFileTypes: true });
+		for (const file of componentFiles) {
+			if (file.isFile() && (file.name.endsWith('.html') || file.name.endsWith('.js'))) {
+				const filePath = join(file.path, file.name);
+				const fileStat = statSync(filePath);
+				if (fileStat.mtimeMs > manifestTime) {
+					return true; // Source file is newer
+				}
+			}
+		}
+
+		return false; // Build is up to date
+	} catch (error) {
+		return true; // On error, assume stale
+	}
+}
+
+/**
+ * Push command - upload built components to CMS
+ * Auto-builds unless --no-build is specified
+ */
+export async function pushCommand(options) {
+	const config = await loadConfig();
+	const distDir = config.output.dir;
+	const manifestPath = join(distDir, 'manifest.json');
+
+	// Auto-build unless --no-build is specified
+	// Commander sets build: false when --no-build is used
+	if (options.build === false) {
+		// --no-build flag: Check if build exists
+		if (!existsSync(manifestPath)) {
+			logger.error('No build found and --no-build specified.');
+			logger.info('Run `wm build` first or remove --no-build flag.');
+			process.exit(1);
+		}
+		logger.info('Using existing build (--no-build).');
+	} else {
+		// Auto-build mode (default)
+		const buildExists = existsSync(manifestPath);
+		const buildStale = buildExists ? isBuildStale(config) : true;
+
+		if (!buildExists) {
+			logger.info('No build found. Building components...');
+		} else if (buildStale) {
+			logger.info('Source files changed. Rebuilding components...');
+		} else {
+			logger.info('Using existing build (up to date).');
+		}
+
+		if (!buildExists || buildStale) {
+			const buildSpinner = ora('Building components...').start();
+			try {
+				await buildComponents({
+					outputDir: config.output.dir,
+					minify: config.output.minify || false,
+					designTokens: await loadDesignTokens()
+				});
+				buildSpinner.succeed('Build complete!');
+			} catch (error) {
+				buildSpinner.fail('Build failed');
+				logger.error(error.message);
+				process.exit(1);
+			}
+		}
+	}
+
+	const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+
+	// Get target and token - prefer auth over config
+	let target;
+	let token;
+
+	// Use auth credentials if logged in (priority!)
+	if (isLoggedIn()) {
+		const auth = loadAuth();
+		target = options.target || getTenantCmsUrl();
+		token = options.token || getApiToken();
+
+		console.log('');
+		logger.info(`Using logged in project: ${pc.cyan(auth.tenant.name)}`);
+		logger.info(`Target: ${pc.cyan(target)}`);
+	} else {
+		// Not logged in - require explicit options
+		target = options.target;
+		token = options.token || process.env.CMS_TOKEN;
+
+		if (!target) {
+			logger.error('Not logged in and no target URL specified.');
+			logger.info('Either run `wm login` first or use --target option');
+			process.exit(1);
+		}
+
+		if (!token) {
+			logger.error('Not authenticated.');
+			logger.info('Run `wm login` first or set CMS_TOKEN env variable');
+			process.exit(1);
+		}
+	}
+
+	// Determine new version
+	const currentVersion = config.version || '0.1.0';
+	let newVersion;
+	let shouldUpdateConfig = false;
+
+	if (options.force) {
+		// Force mode: Keep current version, overwrite
+		newVersion = currentVersion;
+		logger.info(`Version: ${pc.cyan(currentVersion)} ${pc.dim('(force overwrite)')}`);
+	} else if (options.patch) {
+		// Explicit patch increment
+		newVersion = incrementPatch(currentVersion);
+		shouldUpdateConfig = true;
+		logger.info(`Version: ${pc.cyan(currentVersion)} → ${pc.cyan(newVersion)} ${pc.dim('(patch)')}`);
+	} else if (options.minor) {
+		// Explicit minor increment
+		newVersion = incrementMinor(currentVersion);
+		shouldUpdateConfig = true;
+		logger.info(`Version: ${pc.cyan(currentVersion)} → ${pc.cyan(newVersion)} ${pc.dim('(minor)')}`);
+	} else if (options.major) {
+		// Explicit major increment
+		newVersion = incrementMajor(currentVersion);
+		shouldUpdateConfig = true;
+		logger.info(`Version: ${pc.cyan(currentVersion)} → ${pc.cyan(newVersion)} ${pc.dim('(major)')}`);
+	} else {
+		// Interactive prompt
+		console.log('');
+		const choice = await select({
+			message: `Current version: ${pc.cyan(currentVersion)}. How do you want to publish?`,
+			choices: [
+				{
+					name: `Patch (${pc.cyan(incrementPatch(currentVersion))}) - Bug fixes, small changes`,
+					value: 'patch',
+					description: 'Backwards compatible bug fixes'
+				},
+				{
+					name: `Minor (${pc.cyan(incrementMinor(currentVersion))}) - New features, backwards compatible`,
+					value: 'minor',
+					description: 'New functionality, backwards compatible'
+				},
+				{
+					name: `Major (${pc.cyan(incrementMajor(currentVersion))}) - Breaking changes`,
+					value: 'major',
+					description: 'Breaking changes, incompatible with previous versions'
+				},
+				{
+					name: `Force (${pc.cyan(currentVersion)}) - Overwrite current version ${pc.dim('(development only)')}`,
+					value: 'force',
+					description: 'Overwrite existing version without incrementing'
+				}
+			]
+		});
+
+		if (choice === 'patch') {
+			newVersion = incrementPatch(currentVersion);
+			shouldUpdateConfig = true;
+		} else if (choice === 'minor') {
+			newVersion = incrementMinor(currentVersion);
+			shouldUpdateConfig = true;
+		} else if (choice === 'major') {
+			newVersion = incrementMajor(currentVersion);
+			shouldUpdateConfig = true;
+		} else if (choice === 'force') {
+			newVersion = currentVersion;
+			shouldUpdateConfig = false;
+			options.force = true; // Enable force mode
+		}
+
+		console.log('');
+		logger.info(`Publishing version: ${pc.cyan(newVersion)}`);
+	}
+
+	// Update manifest with new version
+	manifest.version = newVersion;
+
+	const spinner = ora(`Uploading to ${target}...`).start();
+
+	try {
+		await uploadComponents(distDir, target, token, {
+			force: options.force || false,
+			version: newVersion
+		});
+
+		spinner.succeed('Upload complete!');
+
+		// Update config file with new version (only if not force mode)
+		if (shouldUpdateConfig) {
+			try {
+				updateConfigVersion(newVersion);
+				logger.success(`Updated wm.config.js with version ${pc.cyan(newVersion)}`);
+			} catch (err) {
+				logger.warn(`Could not update config file: ${err.message}`);
+			}
+		}
+
+		logger.success(`\n✅ Uploaded ${manifest.components.length} components to ${target}`);
+		logger.info(`Version: ${pc.cyan(newVersion)}`);
+		logger.info('Components are now available in your CMS.');
+	} catch (error) {
+		spinner.fail('Upload failed');
+		logger.error(error.message);
+		process.exit(1);
+	}
+}

package/src/commands/switch.js

@@ -0,0 +1,131 @@
+import { loadAuth, saveAuth } from '../utils/auth.js';
+import { logger } from '../../../core/src/index.js';
+import pc from 'picocolors';
+import { select } from '@inquirer/prompts';
+
+/**
+ * Custom fetch wrapper that accepts self-signed certificates for localhost
+ */
+async function secureFetch(url, options = {}) {
+	const isLocalhost = url.includes('localhost') || url.includes('127.0.0.1');
+
+	if (isLocalhost) {
+		const originalValue = process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+		process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
+		try {
+			return await fetch(url, options);
+		} finally {
+			if (originalValue !== undefined) {
+				process.env.NODE_TLS_REJECT_UNAUTHORIZED = originalValue;
+			} else {
+				delete process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+			}
+		}
+	}
+
+	return fetch(url, options);
+}
+
+/**
+ * Switch command - Switch to a different tenant/project
+ */
+export async function switchCommand(options = {}) {
+	try {
+		const auth = loadAuth();
+
+		if (!auth) {
+			logger.error('Not logged in. Run ' + pc.cyan('wm login') + ' first');
+			process.exit(1);
+		}
+
+		console.log();
+		logger.info(pc.bold('Switch Project'));
+		console.log();
+
+		// Load available tenants for this user
+		logger.info('Loading available projects...');
+
+		const tenantsUrl = `${auth.baseUrl}/api/cli/tenants?userId=${auth.user.id}`;
+		const tenantsResponse = await secureFetch(tenantsUrl);
+
+		if (!tenantsResponse.ok) {
+			throw new Error('Failed to load projects from CMS');
+		}
+
+		const tenantsData = await tenantsResponse.json();
+
+		if (!tenantsData.tenants || tenantsData.tenants.length === 0) {
+			logger.error('No projects found');
+			process.exit(1);
+		}
+
+		// Show current project
+		const currentTenant = auth.tenant;
+		console.log();
+		console.log(pc.gray('  Current: ') + pc.cyan(`${currentTenant.name} (${currentTenant.subdomain})`));
+		console.log();
+
+		// Let user select a different tenant
+		const selectedTenantId = await select({
+			message: 'Switch to:',
+			choices: tenantsData.tenants.map(t => ({
+				name: `${t.name} (${t.subdomain})`,
+				value: t.id,
+				description: t.id === currentTenant.id ? 'Current project' : `Created ${new Date(t.createdAt).toLocaleDateString('de-DE')}`
+			}))
+		});
+
+		const selectedTenant = tenantsData.tenants.find(t => t.id === selectedTenantId);
+
+		// If same tenant, no need to switch
+		if (selectedTenant.id === currentTenant.id) {
+			console.log();
+			logger.info('Already using this project');
+			return;
+		}
+
+		// Generate new API token for selected tenant
+		console.log();
+		logger.info('Generating API token...');
+
+		const tokenUrl = `${auth.baseUrl}/api/cli/tenants`;
+		const tokenResponse = await secureFetch(tokenUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				userId: auth.user.id,
+				tenantId: selectedTenantId
+			})
+		});
+
+		if (!tokenResponse.ok) {
+			throw new Error('Failed to generate API token');
+		}
+
+		const tokenData = await tokenResponse.json();
+
+		// Update auth with new tenant and token
+		const newAuth = {
+			...auth,
+			tenant: selectedTenant,
+			apiToken: tokenData.apiToken
+		};
+
+		saveAuth(newAuth);
+
+		console.log();
+		logger.success(pc.green('✨ Switched to project: ') + pc.cyan(selectedTenant.name));
+		console.log();
+		console.log(`  ${pc.bold('Subdomain:')} ${pc.cyan(selectedTenant.subdomain)}`);
+		console.log(`  ${pc.bold('CMS URL:')} ${pc.cyan(`${new URL(auth.baseUrl).protocol}//${selectedTenant.subdomain}.cms.${new URL(auth.baseUrl).host}`)}`);
+		console.log();
+		console.log(pc.yellow('⚠  ') + pc.gray('If you have ') + pc.cyan('wm dev') + pc.gray(' running, please restart it to load the new project.'));
+		console.log();
+
+	} catch (error) {
+		console.log();
+		logger.error(`Switch failed: ${error.message}`);
+		process.exit(1);
+	}
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { buildCommand } from './commands/build.js';
+export { pushCommand } from './commands/push.js';
+export { devCommand } from './commands/dev.js';
+export { initCommand } from './commands/init.js';