@webmate-studio/cli 0.1.0

package/src/templates/islands/alpine.js

@@ -0,0 +1,44 @@
+/**
+ * {{NAME}} Island
+ * Alpine.js interactive component
+ */
+import Alpine from 'alpinejs';
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+
+		// Title aus props oder default
+		const title = props.title || '{{NAME}} Component';
+
+		// Create Alpine component HTML
+		const html = `
+			<div x-data="{ count: 0, doubled: 0 }" x-init="doubled = count * 2" class="p-6 bg-white rounded-lg border border-gray-200">
+				<h3 class="text-lg font-semibold mb-4">${title}</h3>
+				<p class="mb-2">Count: <span x-text="count"></span></p>
+				<p class="mb-4 text-gray-600">Doubled: <span x-text="doubled"></span></p>
+				<div class="flex gap-2">
+					<button @click="count--; doubled = count * 2" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">-</button>
+					<button @click="count++; doubled = count * 2" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">+</button>
+				</div>
+			</div>
+		`;
+
+		// Insert HTML into element
+		element.innerHTML = html;
+
+		// Initialize Alpine on this element if not already started
+		if (!window.Alpine) {
+			window.Alpine = Alpine;
+			Alpine.start();
+		} else {
+			// Initialize Alpine for this specific element
+			Alpine.initTree(element);
+		}
+	}
+
+	destroy() {
+		// Alpine cleanup happens automatically
+		this.element.innerHTML = '';
+	}
+}

package/src/templates/islands/lit.js

@@ -0,0 +1,90 @@
+/**
+ * {{NAME}} Island
+ * Lit Web Component (without Shadow DOM for Tailwind support)
+ */
+import { LitElement, html } from 'lit';
+
+class {{NAME}}Component extends LitElement {
+	static properties = {
+		title: { type: String },
+		count: { type: Number }
+	};
+
+	// Disable Shadow DOM to allow Tailwind classes to work
+	createRenderRoot() {
+		return this;
+	}
+
+	constructor() {
+		super();
+		this.title = '{{NAME}} Component';
+		this.count = 0;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div class="p-6 bg-white rounded-lg border border-gray-200">
+				<h3 class="text-lg font-semibold mb-4">${this.title}</h3>
+				<p class="mb-2">Count: ${this.count}</p>
+				<p class="mb-4 text-gray-600">Doubled: ${this.count * 2}</p>
+				<div class="flex gap-2">
+					<button @click=${() => this.count--} class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
+						-
+					</button>
+					<button @click=${this.increment} class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+						+
+					</button>
+				</div>
+			</div>
+		`;
+	}
+}
+
+// For HMR: Use timestamp-based name to allow re-registration
+const componentName = '{{KEBAB_NAME}}-component';
+const timestamp = Date.now();
+const uniqueComponentName = `${componentName}-${timestamp}`;
+
+// Register custom element with unique name for HMR
+if (!customElements.get(uniqueComponentName)) {
+	customElements.define(uniqueComponentName, {{NAME}}Component);
+}
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+
+		// Replace element content with Lit component (use unique name)
+		const component = document.createElement(uniqueComponentName);
+
+		// Transfer any data-attributes
+		for (const attr of element.attributes) {
+			if (attr.name.startsWith('data-')) {
+				component.setAttribute(attr.name, attr.value);
+			}
+		}
+
+		// Set initial props
+		Object.assign(component, props);
+
+		element.appendChild(component);
+		this.component = component;
+	}
+
+	destroy() {
+		// Remove component from DOM and clear element
+		if (this.component) {
+			if (this.component.parentNode) {
+				this.component.parentNode.removeChild(this.component);
+			}
+		}
+		// Clear element content for clean re-initialization
+		if (this.element) {
+			this.element.innerHTML = '';
+		}
+	}
+}

package/src/templates/islands/preact.jsx

@@ -0,0 +1,52 @@
+/**
+ * {{NAME}} Island
+ * Preact interactive component
+ */
+import { render } from 'preact';
+import { useState } from 'preact/hooks';
+
+function {{NAME}}Component({ title = '{{NAME}} Component' }) {
+	const [count, setCount] = useState(0);
+	const doubled = count * 2;
+
+	return (
+		<div className="p-6 bg-white rounded-lg border border-gray-200">
+			<h3 className="text-lg font-semibold mb-4">{title}</h3>
+			<p className="mb-2">Count: {count}</p>
+			<p className="mb-4 text-gray-600">Doubled: {doubled}</p>
+			<div className="flex gap-2">
+				<button
+					onClick={() => setCount(count - 1)}
+					className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+				>
+					-
+				</button>
+				<button
+					onClick={() => setCount(count + 1)}
+					className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+				>
+					+
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+
+		// Get initial data from data-attributes
+		const initialData = JSON.parse(element.dataset.initialData || '{}');
+
+		// Merge props
+		const allProps = { ...initialData, ...props };
+
+		render(<{{NAME}}Component {...allProps} />, element);
+	}
+
+	destroy() {
+		// Preact will cleanup automatically
+		render(null, this.element);
+	}
+}

package/src/templates/islands/react.jsx

@@ -0,0 +1,50 @@
+/**
+ * {{NAME}} Island
+ * React interactive component
+ */
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function {{NAME}}Component({ title = '{{NAME}} Component' }) {
+	const [count, setCount] = useState(0);
+	const doubled = count * 2;
+
+	return (
+		<div className="p-6 bg-white rounded-lg border border-gray-200">
+			<h3 className="text-lg font-semibold mb-4">{title}</h3>
+			<p className="mb-2">Count: {count}</p>
+			<p className="mb-4 text-gray-600">Doubled: {doubled}</p>
+			<div className="flex gap-2">
+				<button
+					onClick={() => setCount(count - 1)}
+					className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+				>
+					-
+				</button>
+				<button
+					onClick={() => setCount(count + 1)}
+					className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+				>
+					+
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+		this.root = createRoot(element);
+
+		// Get initial data from data-attributes
+		const initialData = JSON.parse(element.dataset.initialData || '{}');
+		const allProps = { ...initialData, ...props };
+
+		this.root.render(<{{NAME}}Component {...allProps} />);
+	}
+
+	destroy() {
+		this.root?.unmount();
+	}
+}

package/src/templates/islands/svelte-component.svelte

@@ -0,0 +1,36 @@
+<script>
+	// Props
+	let { title = '{{NAME}} Component' } = $props();
+
+	// Svelte 5 - Reactive state with $state() rune
+	let count = $state(0);
+
+	// Derived state with $derived() rune
+	let doubled = $derived(count * 2);
+
+	function increment() {
+		count += 1;
+	}
+
+	function decrement() {
+		count -= 1;
+	}
+</script>
+
+<div class="p-6 bg-white rounded-lg border border-gray-200">
+	<h3 class="text-lg font-semibold mb-4">{title}</h3>
+	<p class="mb-2">Count: {count}</p>
+	<p class="mb-4 text-gray-600">Doubled: {doubled}</p>
+	<div class="flex gap-2">
+		<button onclick={decrement} class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
+			-
+		</button>
+		<button onclick={increment} class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+			+
+		</button>
+	</div>
+</div>
+
+<style>
+	/* Custom CSS falls benötigt */
+</style>

package/src/templates/islands/svelte.js

@@ -0,0 +1,31 @@
+/**
+ * {{NAME}} Island
+ * Svelte 5 interactive component
+ */
+import Component from './{{NAME}}.svelte';
+import { mount, unmount } from 'svelte';
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+
+		// Get initial props from data-attributes
+		const initialData = JSON.parse(element.dataset.initialData || '{}');
+
+		// Merge props from constructor and data attributes
+		const allProps = { ...initialData, ...props };
+
+		// Svelte 5: Use mount() instead of new Component()
+		this.component = mount(Component, {
+			target: element,
+			props: allProps
+		});
+	}
+
+	destroy() {
+		// Svelte 5: Use unmount() instead of $destroy()
+		if (this.component) {
+			unmount(this.component);
+		}
+	}
+}

package/src/templates/islands/vanilla.js

@@ -0,0 +1,71 @@
+/**
+ * {{NAME}} Island
+ * Vanilla JavaScript interactive component
+ */
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+		this.props = props;
+		this.count = 0;
+		this.init();
+	}
+
+	init() {
+		// Title aus props oder default
+		const title = this.props.title || '{{NAME}} Component';
+
+		// Create HTML structure
+		this.element.innerHTML = `
+			<div class="p-6 bg-white rounded-lg border border-gray-200">
+				<h3 class="text-lg font-semibold mb-4">${title}</h3>
+				<p class="mb-2">Count: <span class="count-display">0</span></p>
+				<p class="mb-4 text-gray-600">Doubled: <span class="doubled-display">0</span></p>
+				<div class="flex gap-2">
+					<button class="decrement-btn px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
+						-
+					</button>
+					<button class="increment-btn px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+						+
+					</button>
+				</div>
+			</div>
+		`;
+
+		// Get references to DOM elements
+		this.countDisplay = this.element.querySelector('.count-display');
+		this.doubledDisplay = this.element.querySelector('.doubled-display');
+		this.incrementBtn = this.element.querySelector('.increment-btn');
+		this.decrementBtn = this.element.querySelector('.decrement-btn');
+
+		// Add event listeners
+		this.incrementBtn.addEventListener('click', () => this.increment());
+		this.decrementBtn.addEventListener('click', () => this.decrement());
+
+		console.log('{{NAME}} Island initialized');
+	}
+
+	increment() {
+		this.count++;
+		this.updateDisplay();
+	}
+
+	decrement() {
+		this.count--;
+		this.updateDisplay();
+	}
+
+	updateDisplay() {
+		this.countDisplay.textContent = this.count;
+		this.doubledDisplay.textContent = this.count * 2;
+	}
+
+	destroy() {
+		// Remove event listeners
+		if (this.incrementBtn) {
+			this.incrementBtn.removeEventListener('click', this.increment);
+		}
+		if (this.decrementBtn) {
+			this.decrementBtn.removeEventListener('click', this.decrement);
+		}
+	}
+}

package/src/templates/islands/vue.js

@@ -0,0 +1,65 @@
+/**
+ * {{NAME}} Island
+ * Vue interactive component
+ */
+import { createApp } from 'vue';
+
+const {{NAME}}Component = {
+	props: {
+		title: {
+			type: String,
+			default: '{{NAME}} Component'
+		}
+	},
+	data() {
+		return {
+			count: 0
+		};
+	},
+	computed: {
+		doubled() {
+			return this.count * 2;
+		}
+	},
+	methods: {
+		increment() {
+			this.count++;
+		},
+		decrement() {
+			this.count--;
+		}
+	},
+	template: `
+		<div class="p-6 bg-white rounded-lg border border-gray-200">
+			<h3 class="text-lg font-semibold mb-4">{{ title }}</h3>
+			<p class="mb-2">Count: {{ count }}</p>
+			<p class="mb-4 text-gray-600">Doubled: {{ doubled }}</p>
+			<div class="flex gap-2">
+				<button @click="decrement" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">-</button>
+				<button @click="increment" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">+</button>
+			</div>
+		</div>
+	`
+};
+
+export default class {{NAME}}Island {
+	constructor(element, props = {}) {
+		this.element = element;
+
+		// Get initial data from data-attributes
+		const initialData = JSON.parse(element.dataset.initialData || '{}');
+
+		// Merge props
+		const allProps = { ...initialData, ...props };
+
+		// Create Vue app
+		this.app = createApp({{NAME}}Component, allProps);
+		this.instance = this.app.mount(element);
+	}
+
+	destroy() {
+		if (this.app) {
+			this.app.unmount();
+		}
+	}
+}

package/src/utils/auth.js

@@ -0,0 +1,125 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync, unlinkSync } from 'fs';
+import { join, dirname } from 'path';
+import { homedir } from 'os';
+
+/**
+ * Auth Helper für CLI
+ * Speichert Login-Credentials in ~/.webmate/auth.json
+ */
+
+const AUTH_DIR = join(homedir(), '.webmate');
+const AUTH_FILE = join(AUTH_DIR, 'auth.json');
+
+/**
+ * Lädt gespeicherte Auth-Daten
+ */
+export function loadAuth() {
+	if (!existsSync(AUTH_FILE)) {
+		return null;
+	}
+
+	try {
+		const content = readFileSync(AUTH_FILE, 'utf8');
+		if (!content || content.trim() === '') {
+			// Empty file - remove it
+			try {
+				unlinkSync(AUTH_FILE);
+			} catch (e) {
+				// Ignore cleanup errors
+			}
+			return null;
+		}
+		return JSON.parse(content);
+	} catch (error) {
+		// Corrupted auth file - remove it
+		try {
+			unlinkSync(AUTH_FILE);
+		} catch (e) {
+			// Ignore cleanup errors
+		}
+		return null;
+	}
+}
+
+/**
+ * Speichert Auth-Daten
+ */
+export function saveAuth(authData) {
+	if (!existsSync(AUTH_DIR)) {
+		mkdirSync(AUTH_DIR, { recursive: true });
+	}
+
+	writeFileSync(AUTH_FILE, JSON.stringify(authData, null, 2), 'utf8');
+}
+
+/**
+ * Löscht gespeicherte Auth-Daten
+ */
+export function clearAuth() {
+	if (existsSync(AUTH_FILE)) {
+		writeFileSync(AUTH_FILE, '', 'utf8');
+	}
+}
+
+/**
+ * Prüft ob User eingeloggt ist
+ */
+export function isLoggedIn() {
+	const auth = loadAuth();
+	return auth && auth.user && auth.apiToken;
+}
+
+/**
+ * Gibt aktuellen User zurück
+ */
+export function getCurrentUser() {
+	const auth = loadAuth();
+	return auth?.user || null;
+}
+
+/**
+ * Gibt API Token zurück
+ */
+export function getApiToken() {
+	const auth = loadAuth();
+	return auth?.apiToken || null;
+}
+
+/**
+ * Gibt aktuellen Tenant zurück
+ */
+export function getCurrentTenant() {
+	const auth = loadAuth();
+	return auth?.tenant || null;
+}
+
+/**
+ * Gibt CMS Base URL zurück
+ */
+export function getCmsBaseUrl() {
+	const auth = loadAuth();
+	if (!auth?.baseUrl) {
+		return 'https://app.localhost:3029'; // Default für Development
+	}
+	return auth.baseUrl;
+}
+
+/**
+ * Gibt Tenant CMS URL zurück
+ */
+export function getTenantCmsUrl() {
+	const tenant = getCurrentTenant();
+	const baseUrl = getCmsBaseUrl();
+
+	if (!tenant) {
+		return null;
+	}
+
+	// Extrahiere Domain aus Base URL (z.B. "app.localhost:3029" → "localhost:3029")
+	const url = new URL(baseUrl);
+	const parts = url.host.split('.');
+	const domain = parts.slice(1).join('.'); // Entferne "app" Subdomain
+
+	// Baue Tenant CMS URL
+	return `${url.protocol}//${tenant.subdomain}.cms.${domain}`;
+}