@inglorious/create-app 1.8.1 → 1.9.1

package/README.md

@@ -8,16 +8,9 @@ This package allows you to generate a new project from a set of pre-configured t
 
 ## Usage
 
-To create a new app, run one of the following commands in your terminal. You will be prompted to choose a project name and select a template.
+To create a new app, run this command in your terminal. You will be prompted to choose a project name and select a template.
 
 ```bash
-# with npm
-npm create @inglorious/app@latest
-
-# with yarn
-yarn create @inglorious/app
-
-# with pnpm
 pnpm create @inglorious/app
 ```
 
@@ -49,7 +42,7 @@ The app is generated in the syntax you chose: lit-html, JSX or Vue. Every questi
 | Select a rendering syntax   | `--syntax=lit-html\|jsx\|vue`                |
 
 ```bash
-npm create @inglorious/app@latest -- my-app --template=ts --syntax=jsx --ui --theme=material-3 --routing --transitions --icons=material --languages=en,it --no-mobile --no-analytics --no-push --no-pwa --skills
+pnpm create @inglorious/app my-app --template=ts --syntax=jsx --ui --theme=material-3 --routing --transitions --icons=material --languages=en,it --no-mobile --no-analytics --no-push --no-pwa --skills
 ```
 
 Analytics and push generate their setup steps into the new project's README, and a `.env.example`. Push also generates a Supabase migration, the `push-notify` edge function and a service worker: a push is sent by inserting a row in `notifications`. It needs a Firebase project, a Supabase project and a sign-in screen, since the permission prompt appears once someone is signed in with Supabase Auth.
@@ -102,6 +95,12 @@ For Android and iOS builds, install Android Studio with the Android SDK and a Ja
 - iOS: https://capacitorjs.com/docs/ios
 - Android Studio: https://developer.android.com/studio
 
+### Versions and releases
+
+Every Vite app is versioned with [Changesets](https://github.com/changesets/changesets): describe each change with `pnpm changeset`, and `pnpm release:version` raises the version in `package.json` and writes `CHANGELOG.md`. The app reads that version as `import.meta.env.VITE_APP_VERSION`.
+
+Mobile apps also get `pnpm mobile:release`, which copies the version into the iOS and Android projects, raises the build number they share (every store upload needs a new one), builds with the values in `.env` rather than `.env.local`, and syncs. The generated README describes the whole release, upload included.
+
 ## License
 
 **MIT License - Free and open source**

package/bin/index.js

@@ -22,6 +22,7 @@ import { addFirebaseSupport } from "./lib/firebase.js"
 import { addMobileSupport } from "./lib/mobile.js"
 import { addPwaSupport } from "./lib/pwa.js"
 import { askAppFeatures } from "./lib/questions.js"
+import { addReleaseSupport } from "./lib/release.js"
 import { installSkills, skillsCommand, skillsFor } from "./lib/skills.js"
 
 async function main() {
@@ -189,6 +190,8 @@ async function main() {
       })
     }
 
+    if (VITE_APP_TEMPLATES.has(baseTemplate)) addReleaseSupport(targetDir, pkg)
+
     if (features.pwa) {
       spinner.text = "Adding PWA support..."
       addPwaSupport(targetDir, pkg, projectName, { push: features.push })
@@ -196,7 +199,7 @@ async function main() {
 
     if (features.mobile) {
       spinner.text = "Adding Capacitor support..."
-      addMobileSupport(targetDir, pkg, projectName)
+      addMobileSupport(targetDir, pkg, projectName, templatesRoot)
     }
 
     if (features.analytics || features.push) {

package/bin/lib/constants.js

@@ -1,4 +1,5 @@
 export const CAPACITOR_VERSION = "^8.5.3"
+export const CHANGESETS_VERSION = "^3.0.3"
 export const CAPACITOR_FIREBASE_VERSION = "^8.5.2"
 export const FIREBASE_VERSION = "^12.19.0"
 export const SUPABASE_VERSION = "^2.118.0"

package/bin/lib/mobile.js

@@ -3,9 +3,9 @@ import { EOL } from "os"
 import path from "path"
 
 import { CAPACITOR_VERSION, TYPESCRIPT_VERSION } from "./constants.js"
-import { toJavaIdentifier } from "./file.js"
+import { copyDir, toJavaIdentifier } from "./file.js"
 
-export function addMobileSupport(targetDir, pkg, projectName) {
+export function addMobileSupport(targetDir, pkg, projectName, templatesRoot) {
   pkg.dependencies ??= {}
   pkg.devDependencies ??= {}
   pkg.scripts ??= {}
@@ -22,6 +22,13 @@ export function addMobileSupport(targetDir, pkg, projectName) {
   pkg.scripts["mobile:sync"] = "pnpm build && cap sync"
   pkg.scripts["mobile:ios"] = "pnpm build && cap run ios"
   pkg.scripts["mobile:android"] = "pnpm build && cap run android"
+  // Vite never overrides a variable already set, so .env beats .env.local.
+  pkg.scripts["build:release"] =
+    "node --env-file-if-exists=.env node_modules/vite/bin/vite.js build"
+  pkg.scripts["mobile:release"] =
+    "node scripts/native-version.mjs && pnpm build:release && cap sync"
+
+  copyDir(path.join(templatesRoot, "features/mobile"), targetDir)
 
   fs.writeFileSync(
     path.join(targetDir, "capacitor.config.ts"),
@@ -99,6 +106,14 @@ pnpm mobile:android
 # or
 pnpm mobile:ios
 \`\`\`
+
+### Releasing
+
+The version users see comes from \`package.json\`, the same on the web, Android and iOS. The build number is shared by both native apps and must go up with every store upload.
+
+1. Describe each change as you make it with \`pnpm changeset\`. When a release is due, \`pnpm release:version\` raises the version and writes \`CHANGELOG.md\`. Skip this to upload another build of the same version, for example to TestFlight.
+2. Run \`pnpm mobile:release\`. It copies the version into both native projects, raises the build number, builds with the production values in \`.env\` (ignoring \`.env.local\`), and syncs. Commit what it changed.
+3. Upload. In Xcode, use **Product → Archive**, then **Distribute App → Custom → App Store Connect → Upload**, and untick **Manage Version and Build Number** so the store gets the project's build number. In Android Studio, use **Build → Generate Signed App Bundle**.
 `
 
   fs.writeFileSync(

package/bin/lib/release.js

@@ -0,0 +1,48 @@
+import fs from "fs"
+import { EOL } from "os"
+import path from "path"
+
+import { CHANGESETS_VERSION, INDENTATION } from "./constants.js"
+
+const CHANGESET_CONFIG = {
+  $schema: "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  changelog: "@changesets/cli/changelog",
+  commit: false,
+  fixed: [],
+  linked: [],
+  access: "restricted",
+  baseBranch: "main",
+  updateInternalDependencies: "patch",
+  ignore: [],
+}
+
+const CHANGESET_README = `# Changesets
+
+Each file here describes a change for the next release. Add one with
+\`pnpm changeset\`; \`pnpm release:version\` turns them into a new version in
+\`package.json\` and an entry in \`CHANGELOG.md\`.
+`
+
+/**
+ * Versions the app with Changesets: \`package.json\` holds the version, which
+ * the Vite config hands to the app as \`import.meta.env.VITE_APP_VERSION\`.
+ *
+ * @param {string} targetDir
+ * @param {object} pkg - The package.json being built.
+ */
+export function addReleaseSupport(targetDir, pkg) {
+  pkg.devDependencies ??= {}
+  pkg.scripts ??= {}
+
+  pkg.devDependencies["@changesets/cli"] = CHANGESETS_VERSION
+  pkg.scripts.changeset = "changeset"
+  pkg.scripts["release:version"] = "changeset version"
+
+  const dir = path.join(targetDir, ".changeset")
+  fs.mkdirSync(dir, { recursive: true })
+  fs.writeFileSync(
+    path.join(dir, "config.json"),
+    JSON.stringify(CHANGESET_CONFIG, null, INDENTATION) + EOL,
+  )
+  fs.writeFileSync(path.join(dir, "README.md"), CHANGESET_README)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "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",

package/templates/features/mobile/scripts/native-version.mjs

@@ -0,0 +1,57 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs"
+import process from "node:process"
+
+const PLATFORMS = [
+  {
+    file: "ios/App/App.xcodeproj/project.pbxproj",
+    builds: (source) =>
+      [...source.matchAll(/CURRENT_PROJECT_VERSION = (\d+);/g)].map(
+        ([, build]) => build,
+      ),
+    update: (source, version, build) =>
+      source
+        .replaceAll(
+          /CURRENT_PROJECT_VERSION = \d+;/g,
+          `CURRENT_PROJECT_VERSION = ${build};`,
+        )
+        .replaceAll(
+          /MARKETING_VERSION = [^;]+;/g,
+          `MARKETING_VERSION = ${version};`,
+        ),
+  },
+  {
+    file: "android/app/build.gradle",
+    builds: (source) =>
+      [...source.matchAll(/versionCode (\d+)/g)].map(([, build]) => build),
+    update: (source, version, build) =>
+      source
+        .replace(/versionCode \d+/, `versionCode ${build}`)
+        .replace(/versionName "[^"]*"/, `versionName "${version}"`),
+  },
+]
+
+const NO_BUILD = 0
+const NEXT = 1
+
+const { name, version } = JSON.parse(readFileSync("package.json", "utf8"))
+
+// The App Store only takes up to three numbers, with no pre-release tag.
+if (!/^\d+\.\d+\.\d+$/.test(version)) {
+  throw new Error(`Version ${version} must be MAJOR.MINOR.PATCH for the stores`)
+}
+
+const platforms = PLATFORMS.filter(({ file }) => existsSync(file)).map(
+  (platform) => ({ ...platform, source: readFileSync(platform.file, "utf8") }),
+)
+if (!platforms.length) {
+  throw new Error("No native project found: run mobile:init:ios or :android")
+}
+
+const builds = platforms.flatMap(({ source, builds }) => builds(source))
+const build = Math.max(NO_BUILD, ...builds.map(Number)) + NEXT
+
+for (const { file, source, update } of platforms) {
+  writeFileSync(file, update(source, version, build))
+}
+
+process.stdout.write(`${name} ${version}, build ${build}\n`)

package/templates/js/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

package/templates/js/vite.config.js

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -8,8 +9,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
+  define: {
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
+
   plugins: [ViteImageOptimizer(), hmr()],
 
   build: {

package/templates/js-jsx/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

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

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -9,8 +10,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
+  define: {
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
+
   plugins: [ViteImageOptimizer(), jsx(), hmr()],
 
   build: {

package/templates/js-vue/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

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

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -9,8 +10,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
+  define: {
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
+
   plugins: [ViteImageOptimizer(), vue(), hmr()],
 
   build: {

package/templates/ssx-js/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ssx-js-jsx/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ssx-js-vue/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ssx-ts/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ssx-ts-jsx/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ssx-ts-vue/gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .DS_Store
+
+# Agent skills
+/.*/skills/

package/templates/ts/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

package/templates/ts/vite.config.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -8,9 +9,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
-  define: { "process.env": {} },
+  define: {
+    "process.env": {},
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
 
   plugins: [ViteImageOptimizer(), hmr()],
 

package/templates/ts-jsx/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

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

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -9,9 +10,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
-  define: { "process.env": {} },
+  define: {
+    "process.env": {},
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
 
   plugins: [ViteImageOptimizer(), jsx(), hmr()],
 

package/templates/ts-vue/gitignore

@@ -47,3 +47,6 @@ lerna-debug.log*
 *.sln
 *.sw?
 .qodo
+
+# Agent skills
+/.*/skills/

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

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -9,9 +10,15 @@ import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const { version } = JSON.parse(
+  readFileSync(path.resolve(__dirname, "package.json"), "utf8"),
+)
 
 export default defineConfig({
-  define: { "process.env": {} },
+  define: {
+    "process.env": {},
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
+  },
 
   plugins: [ViteImageOptimizer(), vue(), hmr()],