@webmate-studio/cli 0.1.0

package/bin/wm.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { buildCommand } from '../src/commands/build.js';
+import { pushCommand } from '../src/commands/push.js';
+import { devCommand } from '../src/commands/dev.js';
+import { initCommand } from '../src/commands/init.js';
+import { loginCommand } from '../src/commands/login.js';
+import { generate } from '../src/commands/generate.js';
+import { prop } from '../src/commands/prop.js';
+import { logout } from '../src/commands/logout.js';
+import { info } from '../src/commands/info.js';
+import { switchCommand } from '../src/commands/switch.js';
+
+const program = new Command();
+
+program
+	.name('wm')
+	.description('Webmate Component CLI - Build and manage HTML-first components')
+	.version('0.1.0');
+
+// wm login - Login to CMS
+program
+	.command('login')
+	.description('Login to Webmate CMS')
+	.option('-u, --url <url>', 'CMS base URL')
+	.action(loginCommand);
+
+// wm init - Create new component project
+program
+	.command('init')
+	.description('Initialize a new Webmate component project')
+	.argument('[directory]', 'Directory to initialize', '.')
+	.action(initCommand);
+
+// wm generate (g) - Generate new component or island
+program
+	.command('generate [type] [name]')
+	.alias('g')
+	.description('Generate a new component or island')
+	.option('--skip-wizard', 'Skip interactive wizard and create basic skeleton')
+	.option('--islands', 'Create component with islands support')
+	.option('--assets', 'Create component with assets directory')
+	.option('--template <framework>', 'Island framework template (vanilla|react|svelte|preact|alpine|lit)')
+	.option('--list-templates', 'List available island templates')
+	.action(generate);
+
+// wm prop - Add property to component
+program
+	.command('prop [filename]')
+	.description('Add a property to a component (interactive)')
+	.action(prop);
+
+// wm dev - Start development server
+program
+	.command('dev')
+	.description('Start development server with live preview')
+	.option('-p, --port <port>', 'Port to run on', '5173')
+	.option('-o, --open', 'Open browser automatically')
+	.action(devCommand);
+
+// wm build - Build components
+program
+	.command('build')
+	.description('Build components for production')
+	.option('-o, --output <dir>', 'Output directory', './dist')
+	.option('-m, --minify', 'Minify output')
+	.option('--watch', 'Watch for changes')
+	.action(buildCommand);
+
+// wm push - Upload to CMS
+program
+	.command('push')
+	.description('Upload components to CMS (auto-builds by default)')
+	.option('-t, --target <url>', 'CMS target URL')
+	.option('--token <token>', 'Authentication token')
+	.option('-f, --force', 'Overwrite existing version (development only)')
+	.option('--patch', 'Increment patch version (x.y.Z)')
+	.option('--minor', 'Increment minor version (x.Y.0)')
+	.option('--major', 'Increment major version (X.0.0)')
+	.option('--no-build', 'Skip auto-build, use existing dist/ (for CI/CD)')
+	.action(pushCommand);
+
+// wm logout - Logout from CMS
+program
+	.command('logout')
+	.description('Logout from Webmate CMS')
+	.action(logout);
+
+// wm info - Show current project information
+program
+	.command('info')
+	.description('Show current project information')
+	.action(info);
+
+// wm switch - Switch to a different project
+program
+	.command('switch')
+	.description('Switch to a different project')
+	.action(switchCommand);
+
+program.parse();

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@webmate-studio/cli",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Webmate Studio CLI - Build and manage your Webmate components",
+  "keywords": ["webmate", "cms", "cli", "web-components", "islands"],
+  "author": "Michael Wischang",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webmate-studio/cli.git"
+  },
+  "bin": {
+    "wm": "./bin/wm.js"
+  },
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^5.0.0",
+    "alpinejs": "^3.15.0",
+    "commander": "^11.0.0",
+    "esbuild": "^0.19.0",
+    "esbuild-svelte": "^0.9.3",
+    "lit": "^3.3.1",
+    "ora": "^8.0.0",
+    "picocolors": "^1.0.0",
+    "preact": "^10.27.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "svelte": "^5.41.2",
+    "vue": "^3.5.22"
+  }
+}

package/src/commands/build.js

@@ -0,0 +1,113 @@
+import { build as buildComponents } from '../../../builder/src/index.js';
+import { logger } from '../../../core/src/logger.js';
+import { isLoggedIn, loadAuth, getTenantCmsUrl } from '../utils/auth.js';
+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) {
+			logger.warn('Could not load design tokens from CMS');
+			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) {
+		logger.warn(`Error loading design tokens: ${error.message}`);
+		return null;
+	}
+}
+
+/**
+ * Build command - compile components to distribution
+ * Requires login for project context
+ */
+export async function buildCommand(options) {
+	// Check if logged in
+	if (!isLoggedIn()) {
+		console.log('');
+		logger.error('Nicht eingeloggt.');
+		logger.info(`Bitte zuerst einloggen: ${pc.cyan('wm login')}`);
+		console.log('');
+		process.exit(1);
+	}
+
+	const auth = loadAuth();
+	logger.info(`Projekt: ${pc.cyan(auth.tenant.name)}`);
+
+	// Load design tokens from CMS
+	const designTokens = await loadDesignTokens();
+	if (designTokens) {
+		logger.success('Loaded design tokens from CMS');
+	} else {
+		logger.info('Using default design tokens');
+	}
+
+	const spinner = ora('Building components...').start();
+
+	try {
+		const manifest = await buildComponents({
+			outputDir: options.output,
+			minify: options.minify || false,
+			designTokens: designTokens // Pass design tokens to builder
+		});
+
+		spinner.succeed('Build complete!');
+
+		logger.info(`\n📦 Built ${manifest.components.length} components`);
+		logger.info(`📁 Output: ${options.output}`);
+
+		if (manifest.styles.length > 0) {
+			logger.info(`🎨 Styles: ${manifest.styles.length} files`);
+		}
+
+		if (manifest.islands) {
+			logger.info(`🏝️  Islands: ${manifest.islands.files.length} files`);
+		}
+
+		// Show component list
+		console.log('\n📋 Components:');
+		for (const comp of manifest.components) {
+			const propsCount = comp.props ? Object.keys(comp.props).length : 0;
+			logger.info(`  • ${comp.name} (${propsCount} props)`);
+		}
+
+		return manifest;
+	} catch (error) {
+		spinner.fail('Build failed');
+		logger.error(error.message);
+		process.exit(1);
+	}
+}

package/src/commands/dev.js

@@ -0,0 +1,29 @@
+import { startPreviewServer } from '../../../preview/src/index.js';
+import { logger } from '../../../core/src/index.js';
+import { isLoggedIn, loadAuth } from '../utils/auth.js';
+import pc from 'picocolors';
+
+/**
+ * Dev command - start preview server
+ * Requires login to load design system CSS
+ */
+export async function devCommand(options) {
+	// Check if logged in
+	if (!isLoggedIn()) {
+		console.log('');
+		logger.error('Nicht eingeloggt.');
+		logger.info(`Bitte zuerst einloggen: ${pc.cyan('wm login')}`);
+		console.log('');
+		process.exit(1);
+	}
+
+	const auth = loadAuth();
+	logger.info(`Projekt: ${pc.cyan(auth.tenant.name)}`);
+
+	try {
+		await startPreviewServer(options);
+	} catch (error) {
+		logger.error('Failed to start preview server:', error.message);
+		process.exit(1);
+	}
+}