@quincarter/create-lit-app 1.1.7 → 1.3.0

package/bin/create-lit-app.js

@@ -9,9 +9,9 @@ const __dirname = dirname(__filename);
 const scriptPath = join(__dirname, "..", "create-app-shell.sh");
 
 const child = spawn("bash", [scriptPath, ...process.argv.slice(2)], {
-	stdio: "inherit",
+  stdio: "inherit",
 });
 
 child.on("exit", (code) => {
-	process.exit(code ?? 0);
+  process.exit(code ?? 0);
 });

package/bin/create-lit-app.ts

@@ -9,9 +9,9 @@ const __dirname = dirname(__filename);
 const scriptPath = join(__dirname, "..", "create-app-shell.sh");
 
 const child = spawn("bash", [scriptPath, ...process.argv.slice(2)], {
-	stdio: "inherit",
+  stdio: "inherit",
 });
 
 child.on("exit", (code) => {
-	process.exit(code ?? 0);
+  process.exit(code ?? 0);
 });

package/create-app-shell.sh

@@ -99,7 +99,7 @@ parse_args() {
       --no-install) RUN_INSTALL=false ;;
       -y|--yes) NON_INTERACTIVE=true ;;
       -v|--version)
-        echo "@quincarter/create-lit-app v1.0.12"
+        echo "@quincarter/create-lit-app v1.3.0"
         exit 0
         ;;
       --help|-h)
@@ -140,6 +140,7 @@ parse_args() {
         exit 0
         ;;
       -*)
+        log_warn "Unknown option ignored: $arg"
         ;;
       *)
         if [ -z "$APP_NAME" ]; then
@@ -506,6 +507,19 @@ if [ "$ENABLE_TODOS" = true ]; then
   ENABLE_SIGNALS=true
 fi
 
+# The MFE loader is handed to views through @lit/context, so the package and
+# the loader context are needed even when the Context feature itself is off.
+USE_LIT_CONTEXT=false
+if [ "$ENABLE_CONTEXT" = true ] || [ "$ENABLE_MFE_LOADER" = true ]; then
+  USE_LIT_CONTEXT=true
+fi
+
+# APP_NAME becomes both the directory and the npm package name
+if [[ ! "$APP_NAME" =~ ^[a-z0-9][a-z0-9._-]*$ ]]; then
+  log_error "Invalid app name '$APP_NAME' (use lowercase letters, digits, '.', '_' and '-')."
+  exit 1
+fi
+
 TARGET_DIR="$(pwd)/$APP_NAME"
 
 if [ -d "$TARGET_DIR" ]; then
@@ -528,7 +542,7 @@ if [ "$ENABLE_ROUTER" = true ]; then
     \"@lit-labs/router\": \"^0.1.4\",
     \"urlpattern-polyfill\": \"^10.1.0\""
 fi
-if [ "$ENABLE_CONTEXT" = true ]; then
+if [ "$USE_LIT_CONTEXT" = true ]; then
   DEPS="$DEPS,
     \"@lit/context\": \"^1.1.6\""
 fi
@@ -542,7 +556,7 @@ if [ "$ENABLE_CHARTS" = true ]; then
     \"chart.js\": \"^4.5.1\",
     \"chartjs-adapter-luxon\": \"^1.3.1\",
     \"luxon\": \"^3.7.2\",
-    \"@kurkle/color\": \"^0.4.0\""
+    \"@kurkle/color\": \"^0.6.4\""
 fi
 
 cat <<EOF > package.json
@@ -554,20 +568,25 @@ cat <<EOF > package.json
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
-    "preview": "yarn build && vite preview",
-    "test": "vitest run"
+    "preview": "tsc && vite build && vite preview",
+    "test": "vitest run",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix"
   },
   "dependencies": {
     $DEPS
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.10",
-    "@types/luxon": "^3.7.5",
+    "@types/luxon": "^3.7.6",
     "@types/mocha": "^10.0.10",
+    "oxfmt": "^0.72.0",
+    "oxlint": "^1.87.0",
     "typescript": "^7.0.2",
-    "vite": "^8.2.2",
-    "vite-plugin-pwa": "^1.3.0",
-    "vitest": "^4.1.11"
+    "vite": "^8.3.2",
+    "vite-plugin-pwa": "^2.0.0",
+    "vitest": "^5.0.3"
   }
 }
 EOF
@@ -575,7 +594,7 @@ EOF
 # ------------------------------------------------------------------------------
 # Generate Configuration Files
 # ------------------------------------------------------------------------------
-log_info "Generating configuration files (tsconfig.json, vite.config.ts, biome.json)..."
+log_info "Generating configuration files (tsconfig.json, vite.config.ts)..."
 
 cat <<'EOF' > tsconfig.json
 {
@@ -610,29 +629,6 @@ export default defineConfig({
 });
 EOF
 
-cat <<'EOF' > biome.json
-{
-  "$schema": "https://biomejs.dev/schemas/2.5.10/schema.json",
-  "assist": {
-    "actions": {
-      "source": {
-        "organizeImports": "on"
-      }
-    }
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "preset": "recommended"
-    }
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "tab"
-  }
-}
-EOF
-
 cat <<'EOF' > .gitignore
 node_modules
 dist
@@ -991,6 +987,8 @@ import { createContext } from "@lit/context";
 import type { NavItem } from "../interfaces/navigation.interface";
 export const NavigationContext = createContext<NavItem[]>("navContext");
 EOF
+fi
+if [ "$USE_LIT_CONTEXT" = true ]; then
 cat <<'EOF' > src/shared/contexts/mfe-loader.context.ts
 import { createContext } from "@lit/context";
 import type { MfeLoader } from "../utilities/mfe-loader.utility";
@@ -1264,7 +1262,11 @@ import { property } from "lit/decorators.js";
 import { withBase } from "../../shared/configuration/base-path";
 import type { NavItem } from "../../shared/interfaces/navigation.interface";
 import { AppShellHeaderStyles } from "./app-shell-header.styles";
-import "../theme-switcher/theme-switcher";
+EOF
+if [ "$ENABLE_THEME_SWITCHER" = true ]; then
+  echo 'import "../theme-switcher/theme-switcher";' >> src/components/header/AppShellHeader.ts
+fi
+cat <<'EOF' >> src/components/header/AppShellHeader.ts
 
 export class AppShellHeader extends LitElement {
 	@property({ attribute: "routes", type: Array })
@@ -1814,17 +1816,27 @@ export const AppShellStyles = css`
 `;
 EOF
 
+# @state is only used by the router/header nav list and the MFE loader
+DECORATORS="customElement, property"
+if [ "$ENABLE_ROUTER" = true ] || [ "$ENABLE_HEADER" = true ] || [ "$ENABLE_MFE_LOADER" = true ]; then
+  DECORATORS="$DECORATORS, state"
+fi
+
 IMPORTS="import { type HTMLTemplateResult, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { $DECORATORS } from 'lit/decorators.js';
 import { AppShellStyles } from './app-shell.styles';
 import type { NavItem } from './shared/interfaces/navigation.interface';
 import \"./shared/internal-views/404-not-found/page-not-found\";
 import \"./shared/internal-views/no-access/no-access\";
 import \"./shared/internal-views/under-construction/under-construction\";"
 
+if [ "$USE_LIT_CONTEXT" = true ]; then
+  IMPORTS="$IMPORTS
+import { provide } from '@lit/context';"
+fi
+
 if [ "$ENABLE_CONTEXT" = true ]; then
   IMPORTS="$IMPORTS
-import { provide } from '@lit/context';
 import { AccessesContext } from './shared/contexts/accesses.context';
 import { NavigationContext } from './shared/contexts/navigation.context';"
 fi
@@ -1885,10 +1897,16 @@ cat <<EOF >> src/app-shell.ts
 EOF
 fi
 
-if [ "$ENABLE_ROUTER" = true ]; then
+# The header binds to navRoutes, so it exists even without the router
+if [ "$ENABLE_ROUTER" = true ] || [ "$ENABLE_HEADER" = true ]; then
 cat <<EOF >> src/app-shell.ts
   @state()
   navRoutes: NavItem[] = [] as NavItem[];
+EOF
+fi
+
+if [ "$ENABLE_ROUTER" = true ]; then
+cat <<EOF >> src/app-shell.ts
 
   @state()
   notAllowedRouteList: NavItem[] = [];
@@ -1907,7 +1925,9 @@ fi
 
 if [ "$ENABLE_ROUTER" = true ]; then
 cat <<EOF >> src/app-shell.ts
-  private _router = new Router(this, []);
+  private _router = new Router(this, [], {
+    fallback: { render: () => html\`<page-not-found></page-not-found>\` },
+  });
 EOF
 fi
 
@@ -2001,8 +2021,12 @@ cat <<EOF >> src/app-shell.ts
 EOF
 
 if [ "$ENABLE_HEADER" = true ]; then
+HEADER_ATTRS=""
+if [ "$ENABLE_THEME_SWITCHER" = true ]; then
+  HEADER_ATTRS=" enable-theme-switcher"
+fi
 cat <<EOF >> src/app-shell.ts
-      <app-shell-header .routes="\${this.navRoutes}" enable-theme-switcher>
+      <app-shell-header .routes="\${this.navRoutes}"$HEADER_ATTRS>
         <main>
 EOF
 else
@@ -2190,7 +2214,7 @@ $(echo -e "$FEATURES")
 
 ### Prerequisites
 
-Node.js v18+ and \`$PACKAGE_MANAGER\`.
+Node.js 20.19+ (or 22.12+) and \`$PACKAGE_MANAGER\`.
 
 ### Installation
 
@@ -2236,7 +2260,8 @@ $TREE
 
 ## 🎨 Code Style & Tooling
 
-- **Linting & Formatting**: Biome (\`npx @biomejs/biome check .\`)
+- **Formatting**: oxfmt (\`$RUN_CMD fmt\` / \`$RUN_CMD fmt:check\`)
+- **Linting**: oxlint (\`$RUN_CMD lint\` / \`$RUN_CMD lint:fix\`)
 - **Type Checking**: TypeScript (\`npx tsc --noEmit\`)
 EOF
 
@@ -2251,9 +2276,16 @@ if [ "$INIT_GIT" = true ]; then
   log_success "Git repository initialized."
 fi
 
+# The templates are not written in oxfmt's style, so format once the
+# formatter is available to leave the new project passing `fmt:check`.
+install_deps() {
+  $PACKAGE_MANAGER install
+  $PACKAGE_MANAGER run fmt >/dev/null 2>&1 || log_warn "Could not format the project; run '$PACKAGE_MANAGER run fmt' manually."
+}
+
 if [ "$RUN_INSTALL" = true ]; then
   log_info "Installing dependencies with $PACKAGE_MANAGER..."
-  $PACKAGE_MANAGER install
+  install_deps
   log_success "Dependencies installed."
 fi
 
@@ -2270,7 +2302,7 @@ if [ "$NON_INTERACTIVE" = false ]; then
     cd "$TARGET_DIR" || exit 1
     if [ "$RUN_INSTALL" = false ]; then
       log_info "Installing dependencies first..."
-      $PACKAGE_MANAGER install
+      install_deps
     fi
     exec $PACKAGE_MANAGER start
   fi

package/man/create-lit-app.1

@@ -17,7 +17,7 @@ Set the project directory and package name (default: my-app-shell).
 Starter template preset: \fBfull\fR | \fBblank\fR | \fBcustom\fR (default: full).
 .TP
 .BR \-\-pm= \fIPM\fR
-Package manager to use: \fByarn\fR | \fBnpm\fR (default: yarn).
+Package manager to use: \fByarn\fR | \fBnpm\fR | \fBpnpm\fR (default: yarn).
 .TP
 .BR \-\-router ", " \-\-no-router
 Enable or disable @lit-labs/router (automatically enables @lit/context).

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@quincarter/create-lit-app",
-  "version": "1.1.7",
+  "version": "1.3.0",
   "description": "Interactive CLI initializer for Lit Element App Shell architecture",
-  "type": "module",
-  "bin": {
-    "create-lit-app": "./bin/create-lit-app.js",
-    "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"
+  "keywords": [
+    "app-shell",
+    "cli",
+    "create-lit-app",
+    "lit",
+    "lit-element",
+    "scaffold",
+    "signals",
+    "vite"
+  ],
+  "license": "MIT",
+  "author": "Quin Carter",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quincarter/app-shell-starter.git"
   },
   "man": "./man/create-lit-app.1",
-  "publishConfig": {
-    "access": "public"
+  "bin": {
+    "create-app-shell": "./bin/create-lit-app.js",
+    "create-lit-app": "./bin/create-lit-app.js"
   },
   "files": [
     "bin/",
@@ -25,26 +29,28 @@
     "man/",
     "README.md"
   ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsx scripts/build-cli.ts",
+    "fmt": "oxfmt scripts bin package.json tsconfig.json",
+    "fmt:check": "oxfmt --check scripts bin package.json tsconfig.json",
+    "lint": "oxlint scripts bin",
+    "lint:fix": "oxlint --fix scripts bin",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish && git push --tags && tsx scripts/sync-releases.ts"
+  },
   "devDependencies": {
-    "@changesets/cli": "^3.0.1",
-    "@types/node": "^26.2.0",
-    "tsx": "^4.23.12",
+    "@changesets/cli": "^3.0.3",
+    "@types/node": "^26.6.4",
+    "oxfmt": "^0.72.0",
+    "oxlint": "^1.87.0",
+    "tsx": "^4.23.15",
     "typescript": "^7.0.2"
-  },
-  "keywords": [
-    "create-lit-app",
-    "lit",
-    "lit-element",
-    "app-shell",
-    "signals",
-    "vite",
-    "scaffold",
-    "cli"
-  ],
-  "author": "Quin Carter",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/quincarter/app-shell-starter.git"
   }
 }