CLI Overview

Die Webmate CLI (wm) ist dein Command-Line Tool für Component-Entwicklung.

Installation

npm install -g @webmate-studio/cli

# Oder lokal im Projekt:
npm install --save-dev @webmate-studio/cli

Alle Befehle

Befehl	Beschreibung
wm login	Mit CMS verbinden
wm logout	Vom CMS abmelden
wm init	Neues Component-Projekt initialisieren
wm generate	Neue Component erstellen (interaktiv)
wm dev	Dev-Server starten (Vite + Tailwind v4)
wm build	Components für Production bauen
wm push	Build + Upload zum CMS (mit Versionierung)
wm info	Projekt-Info & Login-Status
wm switch	Zwischen Projekten wechseln

Typischer Workflow

1. Projekt initialisieren

wm init my-components
cd my-components

2. Mit CMS verbinden

wm login

3. Component erstellen

wm generate
# oder kurz:
wm g

4. Entwickeln & Testen

wm dev

5. Zum CMS hochladen

wm push

Quick Reference

Authentication

wm login              # Mit CMS verbinden
wm logout             # Abmelden
wm switch             # Projekt wechseln
wm info               # Login-Status prüfen

Development

wm init               # Neues Projekt
wm generate           # Neue Component (alias: wm g)
wm dev                # Dev-Server (localhost:5173)

Production

wm build              # Components bauen
wm push               # Build + Upload + Versionierung
wm push --patch       # Bugfix (0.1.0 → 0.1.1)
wm push --minor       # Feature (0.1.5 → 0.2.0)
wm push --major       # Breaking (0.3.2 → 1.0.0)

Konfiguration

wm.config.js

Erstellt von wm init:

export default {
  components: {
    path: './components',
    styles: ['./tokens/tokens.css'],
    islands: {
      framework: 'lit'  // Default Framework
    }
  },

  preview: {
    port: 5173,
    theme: 'light',
    viewport: { width: 1440, height: 900 }
  },

  output: {
    dir: './dist',
    minify: false
  },

  version: '0.1.0'  // Aktuelle Version (automatisch aktualisiert)
};

Nächste Schritte

Getting Started:

• wm init - Projekt erstellen
• wm login - Mit CMS verbinden
• wm generate - Erste Component

Development:

• wm dev - Dev-Server & Preview
• wm build - Production Build

Deployment:

• wm push - Upload & Versionierung

Component Guides:

• Component Basics - Struktur verstehen
• Props - Dynamische Daten
• Conditionals - Bedingte Anzeige
• Loops - Listen rendern
• Islands - Interaktivität