@quincarter/create-lit-app 1.1.1 → 1.1.3

package/README.md

@@ -62,11 +62,36 @@ npx @quincarter/create-lit-app [options]
 
 ---
 
+## 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/`:
+
+```bash
+npm run build
+```
+
+---
+
 ## Publishing to NPM
 
 To publish updates to npm under your scope:
 
 ```bash
+npm run build
 npm publish --access public
 ```
 

package/bin/create-lit-app.ts

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { spawn } from "node:child_process";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const scriptPath = join(__dirname, "..", "create-app-shell.sh");
+
+const child = spawn("bash", [scriptPath, ...process.argv.slice(2)], {
+	stdio: "inherit",
+});
+
+child.on("exit", (code) => {
+	process.exit(code ?? 0);
+});

package/create-app-shell.sh

@@ -1967,6 +1967,205 @@ declare global {
 }
 EOF
 
+# ------------------------------------------------------------------------------
+# Generate README.md
+# ------------------------------------------------------------------------------
+log_info "Generating customized README.md..."
+
+# Determine package manager command strings
+case "$PACKAGE_MANAGER" in
+  npm)
+    RUN_CMD="npm run"
+    START_CMD="npm start"
+    INSTALL_CMD="npm install"
+    TEST_CMD="npm test"
+    ;;
+  pnpm)
+    RUN_CMD="pnpm"
+    START_CMD="pnpm start"
+    INSTALL_CMD="pnpm install"
+    TEST_CMD="pnpm test"
+    ;;
+  *)
+    RUN_CMD="yarn"
+    START_CMD="yarn start"
+    INSTALL_CMD="yarn install"
+    TEST_CMD="yarn test"
+    ;;
+esac
+
+# Build Features List
+FEATURES=""
+
+if [ "$ENABLE_ROUTER" = true ]; then
+  FEATURES="$FEATURES\n- **Client-Side Routing**: Single page routing powered by \`@lit-labs/router\`"
+fi
+
+if [ "$ENABLE_CONTEXT" = true ]; then
+  FEATURES="$FEATURES\n- **Dependency Injection**: Decoupled state and provider patterns using \`@lit/context\`"
+fi
+
+if [ "$ENABLE_SIGNALS" = true ]; then
+  FEATURES="$FEATURES\n- **State Management & Storage**: Fine-grained reactive state with \`@lit-labs/preact-signals\` and persistent IndexedDB storage via \`idb\`"
+fi
+
+if [ "$ENABLE_HEADER" = true ]; then
+  FEATURES="$FEATURES\n- **App Shell Header**: Reusable \`<app-shell-header>\` navigation bar component"
+fi
+
+if [ "$ENABLE_THEME_SWITCHER" = true ]; then
+  FEATURES="$FEATURES\n- **Theme Switcher**: Dark and light mode toggle component (\`<theme-switcher>\`) with preference persistence"
+fi
+
+if [ "$ENABLE_MFE_LOADER" = true ]; then
+  FEATURES="$FEATURES\n- **Micro-Frontend Utility**: Dynamic script & link loader utility (\`MfeLoader\`) for micro-frontend integration"
+fi
+
+if [ "$ENABLE_TODOS" = true ]; then
+  FEATURES="$FEATURES\n- **Todo List Showcase**: Interactive todo list showcasing Preact Signals state management and IndexedDB persistence"
+fi
+
+if [ "$ENABLE_CARDS" = true ]; then
+  FEATURES="$FEATURES\n- **Card Components**: Reusable content cards (\`<generic-card>\`)"
+fi
+
+if [ "$ENABLE_CHARTS" = true ]; then
+  FEATURES="$FEATURES\n- **Charts Integration**: Responsive canvas charts powered by \`Chart.js\` with \`Luxon\` date handling"
+fi
+
+# Build Project Directory Structure
+TREE="src/
+├── app-shell.ts           # Root application shell component
+├── app-shell.styles.ts    # Root component styles
+├── index.css              # Global CSS styles & design tokens"
+
+if [ "$ENABLE_HEADER" = true ] || [ "$ENABLE_THEME_SWITCHER" = true ] || [ "$ENABLE_CARDS" = true ] || [ "$ENABLE_CHARTS" = true ] || [ "$ENABLE_TODOS" = true ]; then
+  TREE="$TREE
+├── components/            # Reusable UI web components"
+  if [ "$ENABLE_HEADER" = true ]; then
+    TREE="$TREE
+│   ├── header/            # App shell header component"
+  fi
+  if [ "$ENABLE_THEME_SWITCHER" = true ]; then
+    TREE="$TREE
+│   ├── theme-switcher/    # Dark/light mode theme switcher"
+  fi
+  if [ "$ENABLE_CARDS" = true ]; then
+    TREE="$TREE
+│   ├── card/              # Generic card component"
+  fi
+  if [ "$ENABLE_CHARTS" = true ]; then
+    TREE="$TREE
+│   ├── chart-js/          # Chart.js web component wrapper"
+  fi
+  if [ "$ENABLE_TODOS" = true ]; then
+    TREE="$TREE
+│   ├── todos/             # Todo item & list components"
+  fi
+fi
+
+TREE="$TREE
+├── shared/                # Shared utilities, contexts, and configurations
+│   ├── configuration/     # App navigation & route configurations
+│   ├── contexts/          # Context definitions (accesses, navigation)
+│   ├── interfaces/        # TypeScript interfaces & types"
+
+if [ "$ENABLE_SIGNALS" = true ]; then
+  TREE="$TREE
+│   ├── stores/            # Persistent signals & reactive stores"
+fi
+
+TREE="$TREE
+│   └── utilities/         # Helper functions & MFE loader"
+
+if [ "$ENABLE_ROUTER" = true ]; then
+  TREE="$TREE
+└── views/                 # Route page views
+    ├── home-page/         # Default landing page view"
+  if [ "$ENABLE_TODOS" = true ]; then
+    TREE="$TREE
+    ├── todos-page/        # Todo list page view"
+  fi
+  if [ "$ENABLE_CARDS" = true ]; then
+    TREE="$TREE
+    ├── card-examples/     # Card components showcase view"
+  fi
+  if [ "$ENABLE_CHARTS" = true ]; then
+    TREE="$TREE
+    ├── chart-examples/    # Chart.js showcase view"
+  fi
+  if [ "$ENABLE_MFE_LOADER" = true ]; then
+    TREE="$TREE
+    ├── vite-mfe/          # Micro-frontend integration view"
+  fi
+fi
+
+cat <<EOF > README.md
+# $APP_NAME
+
+Application shell built with Lit Element, scaffolded via \`@quincarter/create-lit-app\`.
+
+## 🚀 Features Enabled
+
+- **Core**: Lit Element, TypeScript, and Vite
+$(echo -e "$FEATURES")
+
+## 📦 Getting Started
+
+### Prerequisites
+
+Node.js v18+ and \`$PACKAGE_MANAGER\`.
+
+### Installation
+
+\`\`\`bash
+$INSTALL_CMD
+\`\`\`
+
+### Development
+
+Start the local development server:
+
+\`\`\`bash
+$START_CMD
+\`\`\`
+
+### Building for Production
+
+Compile TypeScript and build the static assets:
+
+\`\`\`bash
+$RUN_CMD build
+\`\`\`
+
+Preview the production build:
+
+\`\`\`bash
+$RUN_CMD preview
+\`\`\`
+
+### Testing
+
+Run unit tests:
+
+\`\`\`bash
+$TEST_CMD
+\`\`\`
+
+## 📁 Project Structure
+
+\`\`\`
+$TREE
+\`\`\`
+
+## 🎨 Code Style & Tooling
+
+- **Linting & Formatting**: Biome (\`npx @biomejs/biome check .\`)
+- **Type Checking**: TypeScript (\`npx tsc --noEmit\`)
+EOF
+
+log_success "Customized README.md generated successfully."
+
 # ------------------------------------------------------------------------------
 # Post-Generation Steps
 # ------------------------------------------------------------------------------
@@ -2007,3 +2206,4 @@ if [ "$RUN_INSTALL" = false ]; then
   echo -e "  ${BOLD}$PACKAGE_MANAGER install${RESET}"
 fi
 echo -e "  ${BOLD}$START_CMD${RESET}\n"
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quincarter/create-lit-app",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Interactive CLI initializer for Lit Element App Shell architecture",
   "type": "module",
   "bin": {
@@ -8,6 +8,9 @@
     "create-app-shell": "./bin/create-lit-app.js"
   },
   "scripts": {
+    "build": "tsx scripts/build-cli.ts",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish"
@@ -23,7 +26,10 @@
     "README.md"
   ],
   "devDependencies": {
-    "@changesets/cli": "^2.27.1"
+    "@changesets/cli": "^2.27.1",
+    "@types/node": "^26.1.2",
+    "tsx": "^4.23.1",
+    "typescript": "^7.0.2"
   },
   "keywords": [
     "create-lit-app",
@@ -41,4 +47,4 @@
     "type": "git",
     "url": "git+https://github.com/quincarter/app-shell-starter.git"
   }
-}
+}