wm generate

Neue Component mit interaktivem Wizard erstellen.

Verwendung

wm generate
# oder kurz:
wm g

Interaktiver Wizard

$ wm g

? Component name (PascalCase): Hero
? Description: Hero section with CTA
? Category: Marketing
? Icon (Iconify): mdi:home
? Add interactive island? Yes
? Island framework: Vanilla JS
? Add a property? Yes
  ? Property name: title
  ? Property type: String
  ? Label: Titel
  ? Default value: Willkommen
? Add a property? No

✓ Component created: components/Hero

Erstellt

components/Hero/
├── Props-Konfiguration
├── component.html
└── islands/          # Wenn Island gewählt
    └── hero.js

Prop-Typen

Typ	CMS-Input
string	Text
boolean	Checkbox
number	Number
select	Dropdown
color	Color Picker
image	Upload
richtext	WYSIWYG

Flags

# Ohne Wizard
wm g MyComponent --skip-wizard

# Mit Island
wm g MyComponent --islands --template vanilla

# Frameworks
--template vanilla|svelte|react|preact|vue|lit|alpine

Island-Frameworks

Framework	Runtime	Wann verwenden?
Vanilla	0kb	Einfache Interaktionen
Svelte	~2kb	Reaktive UI, klein
Preact	~4kb	React-like, klein
Lit	~8kb	Web Components
Alpine	~15kb	HTML-first
Vue	~35kb	Full-featured
React	~45kb	Complex UI, Ökosystem

Nächste Schritte

• Component Basics - Struktur verstehen
• Props - Props definieren
• wm dev - Testen