@quincarter/create-lit-app ⚡

Interactive CLI initializer to scaffold production-ready Lit Element applications with an App Shell architecture, Preact Signals, Lit Context, Lit Router, and UI component suites.

Quick Start

Run instantly with npx (no pre-installation required):

npx @quincarter/create-lit-app

Or pass a project name directly:

npx @quincarter/create-lit-app my-app

Starter Templates & Interactive TUI

When prompted, an interactive terminal user interface (TUI) lets you easily select options using Arrow Keys (or j/k), Spacebar to toggle checkboxes, and Enter to confirm.

You can choose from three starter presets:

1. Full App Shell Starter: header, navigation, router, contexts, signals Todo List, cards, charts, and MFE loader.
2. Blank App Shell Host: minimal Lit App host container with App Shell foundations.
3. Custom Selection: interactively toggle specific architectural features in a scrollable TUI checkbox list with automatic dependency checks (e.g. selecting Routing enforces Lit Context).

Single-select questions (Package Manager, Git Initialization, Install Dependencies) use interactive TUI radio options.

CLI Options & Flags

npx @quincarter/create-lit-app [options]

Options Overview

| Flag | Description | Default | | :--- | :--- | :--- | | --name=<name> | Project directory / package name | my-app-shell | | --template=<type> | Preset: full | blank | custom | full | | --pm=<yarn\|npm\|pnpm> | Package manager to use (yarn, npm, or pnpm) | yarn | | --router / --no-router | @lit-labs/router (auto-enables @lit/context) | true | | --context / --no-context | @lit/context dependency injection | true | | --signals / --no-signals | Preact Signals & IndexedDB store | true | | --todos / --no-todos | Signals Todo List component & view | true | | --cards / --no-cards | Generic Card component & view | true | | --charts / --no-charts | Chart.js wrapper component & view | true | | --header / --no-header | AppShellHeader navigation bar | true | | --theme-switcher / --no-theme-switcher | Dark/Light mode theme switcher toggle | true | | --mfe-loader / --no-mfe-loader | Micro-Frontend (MFE) loader utility | true | | --git / --no-git | Initialize Git repository | true | | --install / --no-install | Run package manager installation step | false | | -y, --yes | Run non-interactively with defaults | false | | -v, --version | Display version number | - | | -h, --help | Display CLI help menu | - |

Development & Modular Architecture

The generator CLI source is modularized under the cli/ directory:

• cli/00-header.sh: Shebang, metadata, ANSI colors, and logging utilities.
• cli/10-defaults.sh: Configuration variable defaults.
• cli/20-args.sh: CLI flag parsing and help documentation.
• cli/30-tui.sh: TUI raw mode helpers, radio menus, and scrollable checkbox list with dependency checks.
• cli/40-config-generators.sh: Scaffolding setup & core config file generators (package.json, tsconfig.json, vite.config.ts, etc.).
• cli/50-shared-generators.sh: Shared modules & context generators.
• cli/60-stores-generators.sh: Persistent signal stores & internal status view generators.
• cli/70-components-generators.sh: UI component generators (header, theme-switcher, card, chart-js, todos).
• cli/80-views-generators.sh: Views & ViewMixin generators.
• cli/90-app-shell-generator.sh: Root app-shell.ts Lit component generator.
• cli/99-post-install.sh: Post-generation setup steps.

To assemble and validate the combined create-app-shell.sh script after making changes in cli/:

npm run build

Publishing to NPM

To publish updates to npm under your scope:

npm run build
npm publish --access public

License

MIT © Quin Carter