@inglorious/create-app 1.0.2 → 1.1.1

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,18 @@ pnpm install
 pnpm dev
 ```
 
+When mobile support is enabled, build and sync native projects with:
+
+```bash
+pnpm mobile:sync
+```
+
+For Android and iOS builds, install Android Studio with the Android SDK and a Java runtime compatible with Capacitor. Capacitor currently works reliably with JDK 21, so prefer JDK 21 over newer Java versions if you hit Java compatibility issues. Set `JAVA_HOME` to your JDK 21 install and `ANDROID_HOME` to your Android SDK path before running the native app. See the official Capacitor setup guides for platform-specific instructions:
+
+- Android: https://capacitorjs.com/docs/android
+- iOS: https://capacitorjs.com/docs/ios
+- Android Studio: https://developer.android.com/studio
+
 ## 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,297 @@ 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.ts`), // HACK: apparently only ts config works!
+    createCapacitorConfigSource(projectName, extension),
+  )
+
+  appendMobileSetupToReadme(targetDir)
+}
+
+function appendMobileSetupToReadme(targetDir) {
+  const readmePath = path.join(targetDir, "README.md")
+  if (!fs.existsSync(readmePath)) {
+    return
+  }
+
+  const readme = fs.readFileSync(readmePath, "utf-8")
+  if (readme.includes("## Mobile Setup")) {
+    return
+  }
+
+  const mobileReadme = `
+## Mobile Setup
+
+This project includes Capacitor for Android and iOS support.
+
+Please note that mobile development depends on external platform tooling that is not installed or managed by the CLI. If the app does not just work after scaffolding, it is usually because one or more native prerequisites are missing on the machine.
+
+### Android
+
+Before you run the native apps, make sure you have:
+
+- Android Studio installed with the Android SDK: https://developer.android.com/studio
+- A Java Development Kit compatible with Capacitor. Capacitor is currently known to work reliably with JDK 21, so prefer JDK 21 over newer versions if you run into Java compatibility errors.
+- The SDK path available via ANDROID_HOME (for example, on macOS this is often $HOME/Library/Android/sdk)
+
+On macOS, the following shell variables are commonly needed:
+
+\`\`\`bash
+export JAVA_HOME="/path/to/jdk-21"
+export ANDROID_HOME="$HOME/Library/Android/sdk"
+export PATH="$ANDROID_HOME/platform-tools:$PATH"
+\`\`\`
+
+### iOS
+
+For iOS you also need the Apple toolchain and device setup on a Mac:
+
+- Xcode from the App Store
+- iOS development tools and simulator components (this can be very large, often multiple GB)
+- A valid Apple Developer team / signing identity in Xcode
+- Device trust setup for your iPhone in Settings > General > VPN & Device Management
+
+The most common first-time setup commands are:
+
+\`\`\`bash
+sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
+sudo xcodebuild -license accept
+\`\`\`
+
+If you are using a physical device, you may also need to approve the developer certificate on the device and ensure the app is signed with a valid team.
+
+### Official resources
+
+- Android: https://capacitorjs.com/docs/android
+- iOS: https://capacitorjs.com/docs/ios
+- Android Studio: https://developer.android.com/studio
+- Xcode: https://developer.apple.com/xcode/
+
+Then sync and open the native project:
+
+\`\`\`bash
+pnpm mobile:sync
+pnpm mobile:android
+# or
+pnpm mobile:ios
+\`\`\`
+`
+
+  fs.writeFileSync(
+    readmePath,
+    `${readme.trimEnd()}${EOL}${EOL}${mobileReadme.trim()}${EOL}`,
+  )
+}
+
+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") { // HACK: apparently only ts config files work!
+  return `import type { CapacitorConfig } from "@capacitor/cli"
+
+const config: CapacitorConfig = {
+  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.1",
   "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/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/public/logo.png" />
     <link rel="stylesheet" href="/public/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>Inglorious App</title>
   </head>
 
@@ -24,7 +27,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/ssx-js/src/site.config.js

@@ -3,6 +3,7 @@ export default {
   title: "My SSX App",
   meta: {
     description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
   },
   // SSX includes image optimization by default
   vite: {

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

@@ -4,6 +4,7 @@ const siteConfig: SiteConfig = {
   title: "My SSX App",
   meta: {
     description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
   },
   // SSX includes image optimization by default
   vite: {

package/templates/ts/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

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 {