@inglorious/create-app 1.1.2 → 1.2.0

package/bin/lib/pwa.js

@@ -34,7 +34,7 @@ export function injectServiceWorkerRegistration(targetDir) {
   let main = fs.readFileSync(mainPath, "utf-8")
 
   if (!main.includes("./pwa")) {
-    main = injectAfterImport(main, "@inglorious/web", `import "./pwa"`)
+    main = injectSideEffectImport(main, `import "./pwa"`)
   }
 
   fs.writeFileSync(mainPath, main)
@@ -50,17 +50,28 @@ export function injectPwaPluginConfig(targetDir, projectName) {
   let viteConfig = fs.readFileSync(viteConfigPath, "utf-8")
 
   if (!viteConfig.includes("vite-plugin-pwa")) {
+    // Right after the image optimizer, where the imports' alphabetical order
+    // puts it.
     viteConfig = injectAfterImport(
       viteConfig,
-      "vite",
+      viteConfig.includes("vite-plugin-image-optimizer")
+        ? "vite-plugin-image-optimizer"
+        : "vite",
       `import { VitePWA } from "vite-plugin-pwa"`,
     )
   }
 
   if (!viteConfig.includes("VitePWA(")) {
+    // One plugin per line, as Prettier prints a list this long.
     viteConfig = viteConfig.replace(
-      /plugins: \[/,
-      `plugins: [${EOL}    ${createVitePwaConfig(projectName)},`,
+      /plugins: \[(.*)\],/,
+      (_, plugins) =>
+        `plugins: [${EOL}${[
+          createVitePwaConfig(projectName),
+          ...splitPlugins(plugins),
+        ]
+          .map((plugin) => `    ${plugin},`)
+          .join(EOL)}${EOL}  ],`,
     )
   }
 
@@ -120,3 +131,38 @@ export function createVitePwaConfig(projectName) {
       },
     })`
 }
+
+// The plugins of a one-line `plugins: [a(), b({ c: 1 })]`, split at the
+// top-level commas.
+function splitPlugins(source) {
+  const plugins = []
+  let depth = 0
+  let current = ""
+  for (const char of source) {
+    if ("([{".includes(char)) depth++
+    if (")]}".includes(char)) depth--
+    if (char === "," && !depth) {
+      plugins.push(current.trim())
+      current = ""
+    } else {
+      current += char
+    }
+  }
+  if (current.trim()) plugins.push(current.trim())
+  return plugins
+}
+
+// A side-effect import goes with the others at the top, in the order they
+// come, as eslint-plugin-simple-import-sort keeps them.
+function injectSideEffectImport(source, newImport) {
+  const lastSideEffect = source
+    .split(EOL)
+    .findLast((line) => /^import ["']/.test(line))
+  if (lastSideEffect) {
+    return source.replace(
+      `${lastSideEffect}${EOL}`,
+      `${lastSideEffect}${EOL}${newImport}${EOL}`,
+    )
+  }
+  return `${newImport}${EOL}${EOL}${source}`
+}

package/bin/lib/questions.js

@@ -0,0 +1,184 @@
+import prompts from "prompts"
+
+import { ICON_PACKS, LANGUAGES, THEMES } from "./features.js"
+
+/**
+ * Asks about the app's features, skipping any a command-line flag answered.
+ * Resolves to null when the user cancels.
+ *
+ * @param {ReturnType<import("./cli.js").parseCliOptions>} flags
+ */
+export async function askAppFeatures(flags) {
+  let canceled = false
+  const onCancel = () => {
+    canceled = true
+    return false
+  }
+  const ask = async (question) => {
+    const answers = await prompts({ ...question, name: "value" }, { onCancel })
+    return answers.value
+  }
+
+  const features = {
+    ui: false,
+    theme: "inglorious",
+    mobile: false,
+    routing: false,
+    transitions: false,
+    icons: [],
+    languages: [],
+    pwa: false,
+  }
+
+  features.ui =
+    flags.ui ??
+    (await ask({
+      type: "confirm",
+      message: "Use Inglorious UI?",
+      initial: true,
+    }))
+  if (canceled) return null
+
+  if (features.ui) {
+    features.theme =
+      flags.theme ??
+      (await ask({
+        type: "select",
+        message: "Which theme?",
+        choices: Object.entries(THEMES).map(([value, theme]) => ({
+          value,
+          ...theme,
+        })),
+      }))
+    if (canceled) return null
+  }
+
+  features.mobile =
+    flags.mobile ??
+    (await ask({
+      type: "confirm",
+      message: "Is it a mobile app? (adds Capacitor for Android and iOS)",
+      initial: false,
+    }))
+  if (canceled) return null
+
+  features.routing =
+    flags.routing ??
+    (await ask({
+      type: "confirm",
+      message: "Add routing?",
+      initial: true,
+    }))
+  if (canceled) return null
+
+  if (features.routing && features.ui) {
+    features.transitions =
+      flags.transitions ??
+      (await ask({
+        type: "confirm",
+        message: "Animate page transitions?",
+        initial: true,
+      }))
+    if (canceled) return null
+  }
+
+  if (features.ui) {
+    features.icons =
+      flags.icons ??
+      (await ask({
+        type: "multiselect",
+        message: "Which icon packs?",
+        hint: "Space to select, Enter to confirm. None is fine too.",
+        instructions: false,
+        choices: Object.entries(ICON_PACKS).map(([value, pack]) => ({
+          value,
+          title: pack.title,
+          selected: value === "material",
+        })),
+      }))
+    if (canceled) return null
+  }
+
+  const i18n =
+    flags.i18n ??
+    (flags.languages ? Boolean(flags.languages.length) : null) ??
+    (await ask({
+      type: "confirm",
+      message: "Translate the app into several languages?",
+      initial: false,
+    }))
+  if (canceled) return null
+
+  if (i18n) {
+    features.languages =
+      flags.languages ?? (await askLanguages(ask, () => canceled))
+    if (canceled || !features.languages) return null
+  }
+
+  features.pwa =
+    flags.pwa ??
+    (await ask({
+      type: "confirm",
+      message: "Enable PWA support?",
+      initial: false,
+    }))
+  if (canceled) return null
+
+  return validate(features)
+}
+
+// The languages, with the default first.
+async function askLanguages(ask, isCanceled) {
+  const languages = await ask({
+    type: "multiselect",
+    message: "Which languages?",
+    hint: "Space to select, Enter to confirm.",
+    instructions: false,
+    min: 1,
+    choices: Object.entries(LANGUAGES).map(([value, language]) => ({
+      value,
+      title: language.title,
+      selected: value === "en",
+    })),
+  })
+  if (isCanceled()) return null
+  const [, ...others] = languages
+  if (!others.length) return languages
+
+  const defaultLanguage = await ask({
+    type: "select",
+    message: "Which is the default language?",
+    choices: languages.map((value) => ({
+      value,
+      title: LANGUAGES[value].title,
+    })),
+  })
+  if (isCanceled()) return null
+  return [defaultLanguage, ...languages.filter((l) => l !== defaultLanguage)]
+}
+
+// Flags can name things that do not exist, or combine what cannot go together.
+function validate(features) {
+  if (!THEMES[features.theme]) {
+    throw new Error(
+      `Unknown theme "${features.theme}". Choose one of: ${Object.keys(THEMES).join(", ")}.`,
+    )
+  }
+  const unknownIcons = features.icons.filter((key) => !ICON_PACKS[key])
+  if (unknownIcons.length) {
+    throw new Error(
+      `Unknown icon packs: ${unknownIcons.join(", ")}. Choose from: ${Object.keys(ICON_PACKS).join(", ")}.`,
+    )
+  }
+  const unknownLanguages = features.languages.filter((key) => !LANGUAGES[key])
+  if (unknownLanguages.length) {
+    throw new Error(
+      `Unknown languages: ${unknownLanguages.join(", ")}. Choose from: ${Object.keys(LANGUAGES).join(", ")}.`,
+    )
+  }
+  // Transitions animate navigations, with Inglorious UI's stylesheet; icons
+  // are drawn by its Icon component.
+  if (!features.routing || !features.ui) features.transitions = false
+  if (!features.ui) features.icons = []
+  return features
+}

package/bin/lib/source.js

@@ -0,0 +1,58 @@
+// What the generated app's components share, whatever their syntax: the pages,
+// the icons they show, and helpers that print code the way Prettier would.
+
+import { ICON_PACKS } from "./features.js"
+
+// Prettier's line width, which generated files are written to fit.
+export const LINE_WIDTH = 80
+
+/**
+ * The parts of the app the components draw: the two pages, the icons on the
+ * tabs (from the first icon pack) and one icon from each pack for the home
+ * page.
+ */
+export function appModel(app) {
+  const [navPack] = app.icons
+  const navIcons = app.tabs && navPack ? ICON_PACKS[navPack].nav : null
+  return {
+    navIcons,
+    pages: [
+      { path: "/", key: "nav.home", text: "Home", icon: navIcons?.home },
+      {
+        path: "/about",
+        key: "nav.about",
+        text: "About",
+        icon: navIcons?.about,
+      },
+    ],
+    showcase: app.icons.map((key) => ICON_PACKS[key].showcase),
+  }
+}
+
+// `name(args)` on one line when it fits, one argument per line otherwise, as
+// Prettier prints a call.
+export function call(name, args, indent, trailing) {
+  const line = `${indent}${name}(${args.join(", ")})${trailing}`
+  if (line.length <= LINE_WIDTH) return line
+  return `${indent}${name}(
+${args.map((arg) => `${indent}  ${arg},`).join("\n")}
+${indent})${trailing}`
+}
+
+// `export type Name = A | B`, broken after the `=` when too long, as Prettier
+// prints it.
+export function union(name, members) {
+  const line = `export type ${name} = ${members.join(" | ")}`
+  if (line.length <= LINE_WIDTH) return line
+  return `export type ${name} =
+  ${members.join(" | ")}`
+}
+
+// Indents every non-empty line of a block.
+export function indent(block, spaces) {
+  const pad = " ".repeat(spaces)
+  return block
+    .split("\n")
+    .map((line) => (line ? pad + line : line))
+    .join("\n")
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.1.2",
+  "version": "1.2.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",
@@ -33,12 +33,12 @@
     "access": "public"
   },
   "dependencies": {
-    "ora": "^9.0.0",
+    "ora": "^9.4.1",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
     "@inglorious/eslint-config": "1.1.2",
-    "prettier": "^3.6.2"
+    "prettier": "^3.9.6"
   },
   "scripts": {
     "format": "prettier --write .",

package/templates/js/package.json

@@ -20,12 +20,12 @@
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "vite": "^8.2.2",
+    "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/js/vite.config.js

@@ -1,6 +1,7 @@
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
+import { hmr } from "@inglorious/vite-plugin-hmr"
 import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 import { defineConfig } from "vite"
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
@@ -10,7 +11,7 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [ViteImageOptimizer()],
+  plugins: [ViteImageOptimizer(), hmr()],
 
   build: {
     rollupOptions: {

package/templates/js-jsx/package.json

@@ -21,12 +21,12 @@
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-jsx": "workspace:*",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "vite": "^8.2.2",
+    "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/js-jsx/vite.config.js

@@ -1,6 +1,7 @@
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
+import { hmr } from "@inglorious/vite-plugin-hmr"
 import { jsx } from "@inglorious/vite-plugin-jsx"
 import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 import { defineConfig } from "vite"
@@ -11,7 +12,7 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [ViteImageOptimizer(), jsx()],
+  plugins: [ViteImageOptimizer(), jsx(), hmr()],
 
   build: {
     rollupOptions: {

package/templates/js-vue/package.json

@@ -21,12 +21,12 @@
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-vue": "workspace:*",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "vite": "^8.2.2",
+    "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/js-vue/vite.config.js

@@ -1,6 +1,7 @@
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
+import { hmr } from "@inglorious/vite-plugin-hmr"
 import { vue } from "@inglorious/vite-plugin-vue"
 import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 import { defineConfig } from "vite"
@@ -11,7 +12,7 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [ViteImageOptimizer(), vue()],
+  plugins: [ViteImageOptimizer(), vue(), hmr()],
 
   build: {
     rollupOptions: {

package/templates/ssx-js/package.json

@@ -15,19 +15,20 @@
   },
   "dependencies": {
     "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.27",
-    "markdown-it": "^14.1.0",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
     "markdown-it-texmath": "^1.0.0",
-    "mermaid": "^11.12.2"
+    "mermaid": "^12.2.0"
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
-    "serve": "^14.2.1"
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6"
   },
   "packageManager": "pnpm@10.15.0",
   "engines": {

package/templates/ssx-js/src/site.config.js

@@ -1,6 +1,7 @@
-/** @type {import('@inglorious/ssx/site.config').SiteConfig} */
+/** @type {import('@inglorious/ssx').SiteConfig} */
 export default {
   title: "My SSX App",
+  favicon: "/logo.png",
   meta: {
     description: "Built with @inglorious/ssx",
     viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",

package/templates/ssx-ts/package.json

@@ -15,19 +15,21 @@
   },
   "dependencies": {
     "@inglorious/ssx": "workspace:*",
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.27",
-    "markdown-it": "^14.1.0",
+    "highlight.js": "^11.12.0",
+    "katex": "^0.19.0",
+    "markdown-it": "^15.0.3",
     "markdown-it-texmath": "^1.0.0",
-    "mermaid": "^11.12.2"
+    "mermaid": "^12.2.0"
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
-    "serve": "^14.2.1"
+    "eslint": "^10.13.0",
+    "prettier": "^3.9.10",
+    "serve": "^14.2.6",
+    "typescript": "^7.0.2"
   },
   "packageManager": "pnpm@10.15.0",
   "engines": {

package/templates/ssx-ts/src/site.config.ts

@@ -2,6 +2,7 @@ import type { SiteConfig } from "@inglorious/ssx"
 
 const siteConfig: SiteConfig = {
   title: "My SSX App",
+  favicon: "/logo.png",
   meta: {
     description: "Built with @inglorious/ssx",
     viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",

package/templates/ts/package.json

@@ -20,14 +20,15 @@
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
-    "@types/node": "^25.0.9",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
+    "@types/node": "^22.20.5",
+    "eslint": "^10.13.0",
+    "jiti": "^2.7.0",
+    "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "typescript": "^5.9.2",
-    "vite": "^8.2.2",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/ts/src/app.ts

@@ -1,7 +1,9 @@
-import { type Api, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
+
+import type { AppApi } from "../types"
 
 export const App = {
-  render(props: Record<string, unknown> | null, api: Api) {
+  render(props: Record<string, unknown> | null, api: AppApi) {
     return html`<h1>
       ${api.render("message1")}, ${api.render("message2")},
       ${api.render("message3")}!

package/templates/ts/tsconfig.app.json

@@ -1,9 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "module": "ESNext",
     "moduleResolution": "bundler",
     "target": "ES2020",
+    "noEmit": true,
     "verbatimModuleSyntax": true
   },
   "include": ["src"]

package/templates/ts/tsconfig.node.json

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
     "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "noEmit": true,
     "types": ["node"],
     "skipLibCheck": true
   },

package/templates/ts/types/index.d.ts

@@ -1,6 +1,7 @@
 import "./vite-end"
 
 import { BaseEntity, EntitiesState } from "@inglorious/store"
+import { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
@@ -20,8 +21,10 @@ export interface AppState extends EntitiesState<AppEntity> {
   message3: MessageEntity
 }
 
+export type AppApi = Api<AppEntity, AppState>
+
 // Types configuration
 export interface MessageType {
   click: (entity: MessageEntity) => void
-  render: (entity: MessageEntity, api: Api) => TemplateResult | null
+  render: (entity: MessageEntity, api: AppApi) => TemplateResult | null
 }

package/templates/ts/vite.config.ts

@@ -1,6 +1,7 @@
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
+import { hmr } from "@inglorious/vite-plugin-hmr"
 import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 import { defineConfig } from "vite"
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
@@ -13,7 +14,7 @@ export default defineConfig({
   // @see https://github.com/vitejs/vite/issues/1973
   define: { "process.env": {} },
 
-  plugins: [ViteImageOptimizer()],
+  plugins: [ViteImageOptimizer(), hmr()],
 
   build: {
     rollupOptions: {

package/templates/ts-jsx/package.json

@@ -22,14 +22,15 @@
     "@inglorious/jsx": "workspace:*",
     "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-jsx": "workspace:*",
-    "@types/node": "^25.0.9",
-    "eslint": "^10.9.1",
-    "prettier": "^3.9.6",
+    "@types/node": "^22.20.5",
+    "eslint": "^10.13.0",
+    "jiti": "^2.7.0",
+    "prettier": "^3.9.10",
     "rollup-plugin-minify-template-literals": "^2.2.0",
-    "sharp": "^0.35.4",
+    "sharp": "^0.35.5",
     "svgo": "^4.1.0",
-    "typescript": "^5.9.2",
-    "vite": "^8.2.2",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

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

@@ -1,9 +1,9 @@
-import type { Api } from "@inglorious/web"
+import type { AppApi } from "../types"
 
 import { Message } from "./types/message"
 
 export const App = {
-  render(props: Record<string, unknown> | null, api: Api) {
+  render(props: Record<string, unknown> | null, api: AppApi) {
     return (
       <h1>
         {/* @ts-expect-error - JSX components are entity type names, not imports */}