@inglorious/create-app 1.2.0 → 1.3.0

package/README.md

@@ -36,10 +36,16 @@ For the JavaScript and TypeScript Vite templates, the CLI then asks about the ap
 | Translate the app?        | `--i18n` / `--no-i18n`, `--languages=en,it`          | `@inglorious/i18n`, a catalogue per language and a language picker; the first language is the default |
 | Enable PWA support?       | `--pwa` / `--no-pwa`                                 | `vite-plugin-pwa`, a manifest, icons and service worker registration                                  |
 
-The app is generated in the syntax you chose: lit-html, JSX or Vue. Every question answered by a flag is skipped:
+The app is generated in the syntax you chose: lit-html, JSX or Vue. Every question answered on the command line is skipped, so a project can be created without any prompt:
+
+| Question                    | Argument or flag                             |
+| --------------------------- | -------------------------------------------- |
+| What is your project named? | The first argument, such as `my-app`         |
+| Select a template           | `--template=minimal\|js\|ts\|ssx-js\|ssx-ts` |
+| Select a rendering syntax   | `--syntax=lit-html\|jsx\|vue`                |
 
 ```bash
-npm create @inglorious/app@latest -- --ui --theme=material --routing --transitions --icons=material --languages=en,it --mobile
+npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material --routing --transitions --icons=material --languages=en,it --no-mobile --no-pwa
 ```
 
 ## Templates

package/bin/index.js

@@ -16,6 +16,7 @@ import {
   USER_ARG_START_INDEX,
   VITE_APP_TEMPLATES,
 } from "./lib/constants.js"
+import { SYNTAXES, TEMPLATES } from "./lib/features.js"
 import { copyDir } from "./lib/file.js"
 import { addMobileSupport } from "./lib/mobile.js"
 import { addPwaSupport } from "./lib/pwa.js"
@@ -25,6 +26,8 @@ async function main() {
   const __dirname = path.dirname(fileURLToPath(import.meta.url))
   const templatesRoot = path.join(__dirname, "../templates")
   const cliOptions = parseCliOptions(process.argv.slice(USER_ARG_START_INDEX))
+  validateChoice("template", cliOptions.template, TEMPLATES)
+  validateChoice("syntax", cliOptions.syntax, SYNTAXES)
 
   let canceled = false
 
@@ -33,45 +36,19 @@ async function main() {
     return false
   }
 
-  const { projectName, baseTemplate } = await prompts(
+  const answers = await prompts(
     [
       {
-        type: "text",
+        type: cliOptions.projectName ? null : "text",
         name: "projectName",
         message: "What is your project named?",
         initial: "my-app",
       },
       {
-        type: "select",
+        type: cliOptions.template ? null : "select",
         name: "baseTemplate",
         message: "Select a template",
-        choices: [
-          {
-            title: "Minimal",
-            description: "A single HTML file for a zero-build setup",
-            value: "minimal",
-          },
-          {
-            title: "JavaScript",
-            description: "A vanilla JavaScript setup with Vite",
-            value: "js",
-          },
-          {
-            title: "TypeScript",
-            description: "A TypeScript setup with Vite",
-            value: "ts",
-          },
-          {
-            title: "SSX (JavaScript)",
-            description: "Static Site Xecution with JavaScript",
-            value: "ssx-js",
-          },
-          {
-            title: "SSX (TypeScript)",
-            description: "Static Site Xecution with TypeScript",
-            value: "ssx-ts",
-          },
-        ],
+        choices: toChoices(TEMPLATES),
       },
     ],
     { onCancel },
@@ -82,31 +59,18 @@ async function main() {
     return
   }
 
+  const projectName = cliOptions.projectName ?? answers.projectName
+  const baseTemplate = cliOptions.template ?? answers.baseTemplate
+
   let renderer = "lit-html"
 
   if (baseTemplate !== "minimal") {
     const { selectedRenderer } = await prompts(
       {
-        type: "select",
+        type: cliOptions.syntax ? null : "select",
         name: "selectedRenderer",
         message: "Select a rendering syntax",
-        choices: [
-          {
-            title: "lit-html (default)",
-            description: "Tagged template literals (html`<div>...</div>`)",
-            value: "lit-html",
-          },
-          {
-            title: "JSX",
-            description: "JSX/TSX syntax (<div>...</div>)",
-            value: "jsx",
-          },
-          {
-            title: "Vue",
-            description: "Vue SFC-style templates",
-            value: "vue",
-          },
-        ],
+        choices: toChoices(SYNTAXES),
       },
       { onCancel },
     )
@@ -116,7 +80,9 @@ async function main() {
       return
     }
 
-    renderer = selectedRenderer
+    renderer = cliOptions.syntax ?? selectedRenderer
+  } else if (cliOptions.syntax && cliOptions.syntax !== "lit-html") {
+    console.warn("The minimal template is only available with lit-html.")
   }
 
   let features = {
@@ -223,6 +189,21 @@ async function main() {
   }
 }
 
+function toChoices(options) {
+  return Object.entries(options).map(([value, option]) => ({
+    value,
+    ...option,
+  }))
+}
+
+function validateChoice(flag, value, options) {
+  if (value !== null && !options[value]) {
+    throw new Error(
+      `Unknown ${flag} "${value}". Choose one of: ${Object.keys(options).join(", ")}.`,
+    )
+  }
+}
+
 function getLatestVersion(packageName) {
   try {
     const version = execSync(`npm view ${packageName} version`, {

package/bin/lib/cli.js

@@ -1,5 +1,8 @@
 export function parseCliOptions(args) {
   return {
+    projectName: args.find((arg) => !arg.startsWith("-")) ?? null,
+    template: readValueFlag(args, "template"),
+    syntax: readValueFlag(args, "syntax"),
     mobile: readBooleanFlag(args, "mobile"),
     pwa: readBooleanFlag(args, "pwa"),
     ui: readBooleanFlag(args, "ui"),

package/bin/lib/constants.js

@@ -1,7 +1,9 @@
 export const CAPACITOR_VERSION = "^8.5.3"
 export const VITE_PLUGIN_PWA_VERSION = "^2.0.0"
 export const VITE_PWA_ASSETS_GENERATOR_VERSION = "^2.0.0"
-export const TYPESCRIPT_VERSION = "^7.0.2"
+// TypeScript 7 has no JavaScript API, which typescript-eslint and the
+// Capacitor CLI import, so `typescript` stays on 6.
+export const TYPESCRIPT_VERSION = "npm:@typescript/typescript6@^6.0.2"
 export const WORKBOX_WINDOW_VERSION = "^7.4.1"
 
 export const INDENTATION = 2

package/bin/lib/features.js

@@ -1,5 +1,34 @@
 // The choices create-app offers for lit-html apps, and what each one brings.
 
+export const TEMPLATES = {
+  minimal: {
+    title: "Minimal",
+    description: "A single HTML file for a zero-build setup",
+  },
+  js: {
+    title: "JavaScript",
+    description: "A vanilla JavaScript setup with Vite",
+  },
+  ts: { title: "TypeScript", description: "A TypeScript setup with Vite" },
+  "ssx-js": {
+    title: "SSX (JavaScript)",
+    description: "Static Site Xecution with JavaScript",
+  },
+  "ssx-ts": {
+    title: "SSX (TypeScript)",
+    description: "Static Site Xecution with TypeScript",
+  },
+}
+
+export const SYNTAXES = {
+  "lit-html": {
+    title: "lit-html (default)",
+    description: "Tagged template literals (html`<div>...</div>`)",
+  },
+  jsx: { title: "JSX", description: "JSX/TSX syntax (<div>...</div>)" },
+  vue: { title: "Vue", description: "Vue SFC-style templates" },
+}
+
 export const THEMES = {
   inglorious: { title: "Inglorious", description: "Neon, videogame-inspired" },
   material: { title: "Material", description: "Material Design inspired" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/eslint-config": "1.1.3",
     "prettier": "^3.9.6"
   },
   "scripts": {

package/templates/ts/package.json

@@ -21,13 +21,14 @@
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@types/node": "^22.20.5",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "eslint": "^10.13.0",
     "jiti": "^2.7.0",
     "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
     "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "typescript": "^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },

package/templates/ts-jsx/package.json

@@ -23,13 +23,14 @@
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-jsx": "workspace:*",
     "@types/node": "^22.20.5",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "eslint": "^10.13.0",
     "jiti": "^2.7.0",
     "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
     "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "typescript": "^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },

package/templates/ts-jsx/src/app.tsx

@@ -1,5 +1,4 @@
 import type { AppApi } from "../types"
-
 import { Message } from "./types/message"
 
 export const App = {

package/templates/ts-vue/package.json

@@ -22,13 +22,14 @@
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-vue": "workspace:*",
     "@types/node": "^22.20.5",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "eslint": "^10.13.0",
     "jiti": "^2.7.0",
     "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
     "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "typescript": "^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },

package/templates/ts-vue/src/main.ts

@@ -4,4 +4,4 @@ import { mount } from "@inglorious/web"
 import { App } from "./app.vue"
 import { store } from "./store"
 
-mount(store, (api) => App.render(null, api), document.getElementById("root"))
+mount(store, (api) => App.render(null, api), document.getElementById("root")!)