@inglorious/create-app 1.0.2 → 1.1.0

package/README.md

@@ -23,6 +23,17 @@ pnpm create @inglorious/app
 
 The CLI will guide you through the setup process, asking for a project name and which template you'd like to use.
 
+For JavaScript and TypeScript Vite app templates, the CLI can also add optional app targets:
+
+```bash
+npm create @inglorious/app@latest -- --pwa
+npm create @inglorious/app@latest -- --mobile
+npm create @inglorious/app@latest -- --pwa --mobile
+```
+
+- `--pwa` adds a web app manifest, service worker, and browser-only service worker registration.
+- `--mobile` adds Capacitor dependencies, config, and mobile scripts for iOS and Android.
+
 ## Templates
 
 The following templates are available to get you started:
@@ -50,6 +61,12 @@ pnpm install
 pnpm dev
 ```
 
+When mobile support is enabled, build and sync native projects with:
+
+```bash
+pnpm mobile:sync
+```
+
 ## License
 
 **MIT License - Free and open source**

package/bin/index.js

@@ -9,10 +9,19 @@ import prompts from "prompts"
 import { fileURLToPath } from "url"
 
 const INDENTATION = 2
+const CAPACITOR_VERSION = "^8.5.0"
+const AFTER_FIRST_CHARACTER_INDEX = 1
+const EMPTY_LENGTH = 0
+const FIRST_CHARACTER_INDEX = 0
+const FIRST_ITEM_INDEX = 0
+const NPM_VIEW_TIMEOUT_MS = 10_000
+const USER_ARG_START_INDEX = 2
+const VITE_APP_TEMPLATES = new Set(["js", "ts"])
 
 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))
 
   let canceled = false
 
@@ -71,6 +80,8 @@ async function main() {
   }
 
   let renderer = "lit-html"
+  let pwa = cliOptions.pwa === true
+  let mobile = cliOptions.mobile === true
 
   // Ask about renderer for non-minimal templates
   if (baseTemplate !== "minimal") {
@@ -108,6 +119,48 @@ async function main() {
     renderer = selectedRenderer
   }
 
+  const supportsAppFeatures = VITE_APP_TEMPLATES.has(baseTemplate)
+
+  if (supportsAppFeatures) {
+    const featureQuestions = []
+
+    if (cliOptions.pwa === null) {
+      featureQuestions.push({
+        type: "confirm",
+        name: "pwa",
+        message: "Enable PWA support?",
+        initial: false,
+      })
+    }
+
+    if (cliOptions.mobile === null) {
+      featureQuestions.push({
+        type: "confirm",
+        name: "mobile",
+        message: "Add hybrid mobile support with Capacitor?",
+        initial: false,
+      })
+    }
+
+    if (featureQuestions.length > EMPTY_LENGTH) {
+      const answers = await prompts(featureQuestions, { onCancel })
+
+      if (canceled) {
+        console.log("Operation canceled.")
+        return
+      }
+
+      pwa = cliOptions.pwa === true ? true : answers.pwa === true
+      mobile = cliOptions.mobile === true ? true : answers.mobile === true
+    }
+  } else if (pwa || mobile) {
+    console.warn(
+      "PWA and mobile options are only available for JavaScript and TypeScript Vite app templates.",
+    )
+    pwa = false
+    mobile = false
+  }
+
   const spinner = ora(`Creating project "${projectName}"...`).start()
 
   try {
@@ -143,6 +196,16 @@ async function main() {
       const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"))
       pkg.name = projectName
 
+      if (pwa) {
+        spinner.text = "Adding PWA support..."
+        addPwaSupport(targetDir, projectName)
+      }
+
+      if (mobile) {
+        spinner.text = "Adding Capacitor support..."
+        addMobileSupport(targetDir, pkg, projectName, templateName)
+      }
+
       for (const depType of ["dependencies", "devDependencies"]) {
         if (pkg[depType]) {
           for (const [name, version] of Object.entries(pkg[depType])) {
@@ -195,6 +258,7 @@ async function main() {
       const version = execSync(`npm view ${packageName} version`, {
         encoding: "utf-8",
         stdio: "pipe", // Prevent npm view output from cluttering the console
+        timeout: NPM_VIEW_TIMEOUT_MS,
       }).trim()
       return `^${version}`
     } catch {
@@ -203,6 +267,231 @@ async function main() {
   }
 }
 
+function parseCliOptions(args) {
+  return {
+    mobile: readBooleanFlag(args, "mobile"),
+    pwa: readBooleanFlag(args, "pwa"),
+  }
+}
+
+function readBooleanFlag(args, name) {
+  if (args.includes(`--${name}`)) {
+    return true
+  }
+
+  if (args.includes(`--no-${name}`)) {
+    return false
+  }
+
+  return null
+}
+
+function addPwaSupport(targetDir, projectName) {
+  const publicDir = path.join(targetDir, "public")
+  fs.mkdirSync(publicDir, { recursive: true })
+  fs.writeFileSync(path.join(publicDir, "sw.js"), createServiceWorkerSource())
+  fs.writeFileSync(
+    path.join(publicDir, "manifest.webmanifest"),
+    JSON.stringify(createWebManifest(projectName), null, INDENTATION) + EOL,
+  )
+
+  injectPwaHeadTags(path.join(targetDir, "index.html"))
+  injectServiceWorkerRegistration(targetDir)
+}
+
+function addMobileSupport(targetDir, pkg, projectName, templateName) {
+  pkg.dependencies ??= {}
+  pkg.devDependencies ??= {}
+  pkg.scripts ??= {}
+
+  pkg.dependencies["@capacitor/core"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/android"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/cli"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/ios"] = CAPACITOR_VERSION
+
+  pkg.scripts.cap = "cap"
+  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"
+
+  const extension = templateName.startsWith("ts") ? "ts" : "js"
+  fs.writeFileSync(
+    path.join(targetDir, `capacitor.config.${extension}`),
+    createCapacitorConfigSource(projectName, extension),
+  )
+}
+
+function createServiceWorkerSource() {
+  return `const CACHE_NAME = "inglorious-app-v1"
+const APP_SHELL = ["/", "/index.html", "/logo.png", "/style.css"]
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)),
+  )
+  self.skipWaiting()
+})
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(keys.map((key) => key === CACHE_NAME ? null : caches.delete(key))),
+      ),
+  )
+  self.clients.claim()
+})
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method !== "GET") {
+    return
+  }
+
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse
+      }
+
+      return fetch(event.request).catch(() => {
+        if (event.request.mode === "navigate") {
+          return caches.match("/index.html")
+        }
+
+        throw new Error("Network request failed")
+      })
+    }),
+  )
+})
+`
+}
+
+function createWebManifest(projectName) {
+  return {
+    name: projectName,
+    short_name: projectName,
+    description: "An Inglorious Web app.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#ffffff",
+    theme_color: "#111827",
+    icons: [
+      {
+        src: "/logo.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/logo.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  }
+}
+
+function injectPwaHeadTags(indexPath) {
+  let index = fs.readFileSync(indexPath, "utf-8")
+
+  if (!index.includes('rel="manifest"')) {
+    index = index.replace(
+      /^([ \t]*<link rel="icon"[^>]*>\r?\n)/m,
+      `$1    <link rel="manifest" href="/manifest.webmanifest" />${EOL}`,
+    )
+  }
+
+  if (!index.includes('name="theme-color"')) {
+    index = index.replace(
+      /^([ \t]*<meta name="viewport"[^>]*>\r?\n)/m,
+      `$1    <meta name="theme-color" content="#111827" />${EOL}`,
+    )
+  }
+
+  fs.writeFileSync(indexPath, index)
+}
+
+function injectServiceWorkerRegistration(targetDir) {
+  const mainPath = findMainPath(targetDir)
+
+  if (!mainPath) {
+    return
+  }
+
+  let main = fs.readFileSync(mainPath, "utf-8")
+
+  if (!main.includes("@inglorious/web/mobile")) {
+    main = main.replace(
+      /^([ \t]*import \{ mount \} from "@inglorious\/web"\r?\n)/m,
+      (match) =>
+        `${match}import { isNative } from "@inglorious/web/mobile"${EOL}`,
+    )
+  }
+
+  if (!main.includes('navigator.serviceWorker.register("/sw.js")')) {
+    main = `${main.trimEnd()}${EOL}${EOL}if (!isNative() && "serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/sw.js")
+}${EOL}`
+  }
+
+  fs.writeFileSync(mainPath, main)
+}
+
+function findMainPath(targetDir) {
+  const candidates = [
+    path.join(targetDir, "src/main.ts"),
+    path.join(targetDir, "src/main.js"),
+  ]
+
+  return candidates.find((candidate) => fs.existsSync(candidate)) ?? null
+}
+
+function createCapacitorConfigSource(projectName, extension) {
+  const appId = `com.inglorious.${toJavaIdentifier(projectName)}`
+
+  if (extension === "ts") {
+    return `import type { CapacitorConfig } from "@capacitor/cli"
+
+const config: CapacitorConfig = {
+  appId: "${appId}",
+  appName: "${projectName}",
+  webDir: "dist",
+}
+
+export default config
+`
+  }
+
+  return `/** @type {import("@capacitor/cli").CapacitorConfig} */
+const config = {
+  appId: "${appId}",
+  appName: "${projectName}",
+  webDir: "dist",
+}
+
+export default config
+`
+}
+
+function toJavaIdentifier(value) {
+  const identifier = value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, " ")
+    .trim()
+    .split(" ")
+    .filter(Boolean)
+    .map((part, index) =>
+      index === FIRST_ITEM_INDEX
+        ? part
+        : part.charAt(FIRST_CHARACTER_INDEX).toUpperCase() +
+          part.slice(AFTER_FIRST_CHARACTER_INDEX),
+    )
+    .join("")
+    .replace(/^[^a-z]+/, "")
+
+  return identifier || "app"
+}
+
 main().catch((e) => {
   console.error(e)
 })

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
-  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/js/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/js/src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from "@inglorious/web"
+import { createStore } from "@inglorious/store"
 
 import { Message } from "../types/message"
 import { entities } from "./entities"

package/templates/js/src/store/middlewares.js

@@ -1,4 +1,4 @@
-import { createDevtools } from "@inglorious/web"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 export const middlewares = []
 

package/templates/js-jsx/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/js-jsx/src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from "@inglorious/web"
+import { createStore } from "@inglorious/store"
 
 import { Message } from "../types/message"
 import { entities } from "./entities"

package/templates/js-jsx/src/store/middlewares.js

@@ -1,4 +1,4 @@
-import { createDevtools } from "@inglorious/web"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 export const middlewares = []
 

package/templates/js-vue/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/js-vue/src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from "@inglorious/web"
+import { createStore } from "@inglorious/store"
 
 import { Message } from "../types/message.vue"
 import { entities } from "./entities"

package/templates/js-vue/src/store/middlewares.js

@@ -1,4 +1,4 @@
-import { createDevtools } from "@inglorious/web"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 export const middlewares = []
 

package/templates/minimal/index.html

@@ -24,7 +24,8 @@
           "@inglorious/utils/": "https://unpkg.com/@inglorious%2Futils@latest/src/",
           "@inglorious/store": "https://unpkg.com/@inglorious%2Fstore@latest/src/store.js",
           "@inglorious/store/": "https://unpkg.com/@inglorious%2Fstore@latest/src/",
-          "@inglorious/web": "https://unpkg.com/@inglorious%2Fweb@latest/src/index.js"
+          "@inglorious/web": "https://unpkg.com/@inglorious%2Fweb@latest/src/index.js",
+          "@inglorious/web/": "https://unpkg.com/@inglorious%2Fweb@latest/src/"
         }
       }
     </script>

package/templates/minimal/src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from "@inglorious/web"
+import { createStore } from "@inglorious/store"
 
 import { Message } from "../types/message.js"
 import { entities } from "./entities.js"

package/templates/minimal/src/store/middlewares.js

@@ -1,4 +1,4 @@
-import { createDevtools } from "@inglorious/web"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 export const middlewares = []
 

package/templates/ts/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/ts/src/store/index.ts

@@ -1,4 +1,4 @@
-import { createStore, type TypesConfig } from "@inglorious/web"
+import { createStore, type TypesConfig } from "@inglorious/store"
 
 import type { AppEntity, AppState } from "../../types"
 import { Message } from "../types/message"

package/templates/ts/src/store/middlewares.ts

@@ -1,4 +1,5 @@
-import { createDevtools, type Middleware } from "@inglorious/web"
+import type { Middleware } from "@inglorious/store"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 import type { AppEntity, AppState } from "../../types"
 

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

@@ -1,6 +1,6 @@
 import "./vite-end"
 
-import { BaseEntity, EntitiesState } from "@inglorious/web"
+import { BaseEntity, EntitiesState } from "@inglorious/store"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {

package/templates/ts-jsx/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/ts-jsx/src/store/index.ts

@@ -1,4 +1,4 @@
-import { createStore, type TypesConfig } from "@inglorious/web"
+import { createStore, type TypesConfig } from "@inglorious/store"
 
 import type { AppEntity, AppState } from "../../types"
 import { Message } from "../types/message"

package/templates/ts-jsx/src/store/middlewares.ts

@@ -1,4 +1,5 @@
-import { createDevtools, type Middleware } from "@inglorious/web"
+import type { Middleware } from "@inglorious/store"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 import type { AppEntity, AppState } from "../../types"
 

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

@@ -1,6 +1,7 @@
 import "./vite-end"
 
-import { Api, BaseEntity, EntitiesState, TemplateResult } from "@inglorious/web"
+import { BaseEntity, EntitiesState } from "@inglorious/store"
+import { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {

package/templates/ts-vue/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@inglorious/store": "workspace:*",
     "@inglorious/web": "workspace:*"
   },
   "devDependencies": {

package/templates/ts-vue/src/store/index.ts

@@ -1,4 +1,4 @@
-import { createStore, type TypesConfig } from "@inglorious/web"
+import { createStore, type TypesConfig } from "@inglorious/store"
 
 import type { AppEntity, AppState } from "../../types"
 // @ts-expect-error - Handled by @inglorious/vite-plugin-vue

package/templates/ts-vue/src/store/middlewares.ts

@@ -1,4 +1,4 @@
-import { createDevtools } from "@inglorious/web"
+import { createDevtools } from "@inglorious/store/client/devtools"
 
 export const middlewares = []
 

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

@@ -1,6 +1,7 @@
 import "./vite-end"
 
-import { Api, BaseEntity, EntitiesState, TemplateResult } from "@inglorious/web"
+import { BaseEntity, EntitiesState } from "@inglorious/store"
+import { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {