@inglorious/create-app 0.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# @inglorious/create-app
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+The official scaffolding tool to quickly create a new web app with the [@inglorious/web](https://github.com/IngloriousCoderz/inglorious-engine) framework.
+
+This package allows you to generate a new project from a set of pre-configured templates, so you can start developing your web app right away.
+
+## 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.
+
+```bash
+# with npm
+npm create @inglorious/app@latest
+
+# with yarn
+yarn create @inglorious/app
+
+# with pnpm
+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.
+
+## Templates
+
+The following templates are available to get you started:
+
+- **minimal**: A minimal starter template that requires no bundling: just HTML, CSS, and JS.
+- **js**: A starter template for a plain JavaScript project, bundled with Vite.
+- **ts**: A starter template for a plain TypeScript project, bundled with Vite.
+
+## What it does
+
+The tool will create a new directory with your chosen project name and copy the template files into it. It will also automatically update the `package.json` with your project's name.
+
+After the project is created, you can navigate into the directory and install the dependencies.
+
+```bash
+# 1. Change into your new project directory
+cd my-awesome-app
+
+# 2. Install dependencies
+pnpm install
+
+# 3. Start the development server
+pnpm dev
+```
+
+## License
+
+**MIT License - Free and open source**
+
+Created by [Matteo Antony Mistretta](https://github.com/IngloriousCoderz)
+
+You're free to use, modify, and distribute this software. See [LICENSE](./LICENSE) for details.

package/bin/index.js

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process"
+import fs from "fs"
+import ora from "ora"
+import { EOL } from "os"
+import path from "path"
+import prompts from "prompts"
+import { fileURLToPath } from "url"
+
+const INDENTATION = 2
+
+async function main() {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url))
+  const templatesRoot = path.join(__dirname, "../templates")
+
+  let canceled = false
+
+  const onCancel = () => {
+    canceled = true
+    return false
+  }
+
+  const { projectName, template } = await prompts(
+    [
+      {
+        type: "text",
+        name: "projectName",
+        message: "What is your project named?",
+        initial: "my-app",
+      },
+      {
+        type: "select",
+        name: "template",
+        message: "Select a template",
+        choices: [
+          {
+            title: "JavaScript",
+            description: "A vanilla JavaScript setup with Vite",
+            value: "js",
+          },
+          {
+            title: "TypeScript",
+            description: "A TypeScript setup with Vite",
+            value: "ts",
+          },
+        ],
+      },
+    ],
+    { onCancel },
+  )
+
+  if (canceled) {
+    console.log("Operation canceled.")
+    return
+  }
+
+  const spinner = ora(`Creating project "${projectName}"...`).start()
+
+  try {
+    const targetDir = path.join(process.cwd(), projectName)
+    const templateDir = path.join(templatesRoot, template)
+
+    // Create project directory and copy template files
+    copyDir(templateDir, targetDir)
+
+    // Update README.md with project name
+    const readmePath = path.join(targetDir, "README.md")
+    if (fs.existsSync(readmePath)) {
+      let readme = fs.readFileSync(readmePath, "utf-8")
+      readme = readme.replace(/# my-app/, `# ${projectName}`)
+      fs.writeFileSync(readmePath, readme)
+    }
+
+    if (template === "minimal") {
+      spinner.succeed(`Created ${projectName} at ${targetDir}`)
+      console.log(`\nNext steps:`)
+      console.log(`  cd ${projectName}`)
+      console.log(`  Open index.html in your browser`)
+    } else {
+      // Update package.json with project name
+      const pkgPath = path.join(targetDir, "package.json")
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"))
+      pkg.name = projectName
+
+      for (const depType of ["dependencies", "devDependencies"]) {
+        if (pkg[depType]) {
+          for (const [name, version] of Object.entries(pkg[depType])) {
+            if (version.startsWith("workspace:")) {
+              spinner.text = `Fetching latest version of ${name}...`
+              pkg[depType][name] = getLatestVersion(name)
+            }
+          }
+        }
+      }
+
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, INDENTATION) + EOL)
+
+      spinner.succeed(`Created ${projectName} at ${targetDir}`)
+      console.log(`\nNext steps:`)
+      console.log(`  cd ${projectName}`)
+      console.log(`  pnpm install`)
+      console.log(`  pnpm dev`)
+    }
+  } catch (error) {
+    spinner.fail("Operation failed.")
+    console.error(error)
+  }
+
+  function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true })
+
+    const entries = fs.readdirSync(src, { withFileTypes: true })
+
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name)
+      const destPath = path.join(dest, entry.name)
+
+      // Rename gitignore to .gitignore
+      if (entry.name === "gitignore") {
+        fs.copyFileSync(srcPath, path.join(dest, ".gitignore"))
+        continue
+      }
+
+      if (entry.isDirectory()) {
+        copyDir(srcPath, destPath)
+      } else {
+        fs.copyFileSync(srcPath, destPath)
+      }
+    }
+  }
+
+  function getLatestVersion(packageName) {
+    try {
+      const version = execSync(`npm view ${packageName} version`, {
+        encoding: "utf-8",
+        stdio: "pipe", // Prevent npm view output from cluttering the console
+      }).trim()
+      return `^${version}`
+    } catch {
+      return "latest" // fallback
+    }
+  }
+}
+
+main().catch((e) => {
+  console.error(e)
+})

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@inglorious/create-app",
+  "version": "0.0.0",
+  "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
+  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IngloriousCoderz/inglorious-engine.git",
+    "directory": "packages/create-app"
+  },
+  "homepage": "https://inglorious-engine.vercel.app/",
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-engine/issues"
+  },
+  "keywords": [
+    "cli",
+    "create-app",
+    "functional-programming",
+    "spa",
+    "scaffolding"
+  ],
+  "type": "module",
+  "bin": {
+    "create-app": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "ora": "^9.0.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "@inglorious/eslint-config": "1.1.0"
+  },
+  "scripts": {
+    "format": "prettier --write '**/*.{js,ts}'",
+    "lint": "eslint . --ext js,ts --report-unused-disable-directives --max-warnings 0"
+  }
+}

package/templates/js/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/js/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/js/README.md

@@ -0,0 +1,29 @@
+# my-app
+
+This project is a minimal starter template for creating an app with the Inglorious Web framework using plain JavaScript and Vite.
+
+## Getting Started
+
+This project was scaffolded with `@inglorious/create-app`.
+
+To get started, follow these steps:
+
+1.  **Install dependencies**:
+    Navigate to your project directory and install the required packages.
+    ```sh
+    pnpm install
+    ```
+2.  **Start the development server**:
+    Run the following command to start the Vite development server.
+    ```sh
+    pnpm dev
+    ```
+
+This will start a Vite development server. Open your browser to the local URL provided to see it in action.
+
+## Project Setup
+
+- `index.html`: The main entry point for your app.
+- `src/`: Contains your app's JavaScript source code.
+- `vite.config.js`: Vite configuration file.
+- `package.json`: Project metadata and dependencies.

package/templates/js/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "@inglorious/eslint-config/browser"

package/templates/js/gitignore

@@ -0,0 +1,49 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+dist-ssr
+storybook-static
+vite.config.js.timestamp-*
+
+# Debug
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.qodo

package/templates/js/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Inglorious App</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>

package/templates/js/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "js-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write '**/*.js'",
+    "lint": "eslint . --ext js --report-unused-disable-directives --max-warnings 0",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@inglorious/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "prettier": "^3.6.2",
+    "vite": "^7.1.6"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/js/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/js/src/app.js

@@ -0,0 +1,10 @@
+import { html } from "@inglorious/web"
+
+export const app = {
+  render(api) {
+    return html`<h1>
+      ${api.render("message1")}, ${api.render("message2")},
+      ${api.render("message3")}!
+    </h1>`
+  },
+}

package/templates/js/src/main.js

@@ -0,0 +1,6 @@
+import { mount } from "@inglorious/web"
+
+import { app } from "./app"
+import { store } from "./store"
+
+mount(store, app.render, document.getElementById("root"))

package/templates/js/src/message/message.js

@@ -0,0 +1,14 @@
+import { html } from "@inglorious/web"
+
+export const message = {
+  click(entity) {
+    entity.isUpperCase = true
+  },
+
+  render(entity, api) {
+    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
+      >Hello ${message}</span
+    >`
+  },
+}

package/templates/js/src/store/entities.js

@@ -0,0 +1,14 @@
+export const entities = {
+  message1: {
+    type: "message",
+    who: "world",
+  },
+  message2: {
+    type: "message",
+    who: "wide",
+  },
+  message3: {
+    type: "message",
+    who: "web",
+  },
+}

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

@@ -0,0 +1,12 @@
+import { createStore } from "@inglorious/web"
+
+import { app } from "../app"
+import { message } from "../message/message"
+import { entities } from "./entities"
+import { middlewares } from "./middlewares"
+
+export const store = createStore({
+  types: { app, message },
+  entities,
+  middlewares,
+})

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

@@ -0,0 +1,7 @@
+import { createDevtools } from "@inglorious/web"
+
+export const middlewares = []
+
+if (import.meta.env.DEV) {
+  middlewares.push(createDevtools().middleware)
+}

package/templates/js/vite.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from "vite"
+
+export default defineConfig({})

package/templates/minimal/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/minimal/README.md

@@ -0,0 +1,10 @@
+# my-app
+
+A new app created with [@inglorious/create-app](https://github.com/Antony-Mistretta/inglorious-engine/tree/main/packages/create-app).
+
+This template is a minimal setup for running the Inglorious Web framework directly in the browser without any build step.
+
+## Getting Started
+
+1.  Open the `index.html` file in a modern web browser.
+2.  Edit the `app.js` file to start building your app!

package/templates/minimal/gitignore

@@ -0,0 +1,6 @@
+# Editor directories and files
+
+.idea
+.vscode
+_.suo
+_.ntvs\*

package/templates/minimal/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <title>Inglorious App</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+    <script type="text/javascript">
+      window.process = { env: "development" }
+    </script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "mutative": "https://unpkg.com/mutative@latest/dist/mutative.esm.mjs",
+          "lit-html": "https://unpkg.com/lit-html@latest/lit-html.js",
+          "lit-html/": "https://unpkg.com/lit-html@latest/",
+          "@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"
+        }
+      }
+    </script>
+
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>

package/templates/minimal/public/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/minimal/src/app.js

@@ -0,0 +1,10 @@
+import { html } from "@inglorious/web"
+
+export const app = {
+  render(api) {
+    return html`<h1>
+      ${api.render("message1")}, ${api.render("message2")},
+      ${api.render("message3")}!
+    </h1>`
+  },
+}

package/templates/minimal/src/main.js

@@ -0,0 +1,6 @@
+import { mount } from "@inglorious/web"
+
+import { app } from "./app.js"
+import { store } from "./store/index.js"
+
+mount(store, app.render, document.getElementById("root"))

package/templates/minimal/src/message/message.js

@@ -0,0 +1,14 @@
+import { html } from "@inglorious/web"
+
+export const message = {
+  click(entity) {
+    entity.isUpperCase = true
+  },
+
+  render(entity, api) {
+    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
+      >Hello ${message}</span
+    >`
+  },
+}

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

@@ -0,0 +1,14 @@
+export const entities = {
+  message1: {
+    type: "message",
+    who: "world",
+  },
+  message2: {
+    type: "message",
+    who: "wide",
+  },
+  message3: {
+    type: "message",
+    who: "web",
+  },
+}

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

@@ -0,0 +1,12 @@
+import { createStore } from "@inglorious/web"
+
+import { app } from "../app.js"
+import { message } from "../message/message.js"
+import { entities } from "./entities.js"
+import { middlewares } from "./middlewares.js"
+
+export const store = createStore({
+  types: { app, message },
+  entities,
+  middlewares,
+})

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

@@ -0,0 +1,7 @@
+import { createDevtools } from "@inglorious/web"
+
+export const middlewares = []
+
+if (window.process.env === "development") {
+  middlewares.push(createDevtools().middleware)
+}

package/templates/ts/.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

package/templates/ts/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/templates/ts/README.md

@@ -0,0 +1,30 @@
+# my-app
+
+This project is a minimal starter template for creating an app with the Inglorious Web framework using TypeScript and Vite.
+
+## Getting Started
+
+This project was scaffolded with `@inglorious/create-app`.
+
+To get started, follow these steps:
+
+1.  **Install dependencies**:
+    Navigate to your project directory and install the required packages.
+    ```sh
+    pnpm install
+    ```
+2.  **Start the development server**:
+    Run the following command to start the Vite development server.
+    ```sh
+    pnpm dev
+    ```
+
+This will start a Vite development server. Open your browser to the local URL provided to see it in action.
+
+## Project Setup
+
+- `index.html`: The main entry point for your app.
+- `src/`: Contains your app's TypeScript source code.
+- `vite.config.js`: Vite configuration file.
+- `tsconfig.json`: TypeScript configuration for the project.
+- `package.json`: Project metadata and dependencies.

package/templates/ts/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "@inglorious/eslint-config/browser"

package/templates/ts/gitignore

@@ -0,0 +1,49 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+dist-ssr
+storybook-static
+vite.config.js.timestamp-*
+
+# Debug
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.qodo

package/templates/ts/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Inglorious App</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>

package/templates/ts/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ts-template",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "description": "A new app created with @inglorious/create-app",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write '**/*.ts'",
+    "lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@inglorious/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.6"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ts/public/style.css

@@ -0,0 +1,35 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Press Start 2P", system-ui;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  color: #fff;
+}
+
+canvas {
+  max-width: 1280px;
+  max-height: 720px;
+  width: 100vw;
+  height: auto;
+  cursor: none;
+}
+
+@media (orientation: landscape) and (pointer: coarse) {
+  canvas {
+    width: auto;
+    height: 100vh;
+  }
+}
+
+img {
+  display: none;
+}

package/templates/ts/src/app.ts

@@ -0,0 +1,10 @@
+import { type Api,html } from "@inglorious/web"
+
+export const app = {
+  render(api: Api) {
+    return html`<h1>
+      ${api.render("message1")}, ${api.render("message2")},
+      ${api.render("message3")}!
+    </h1>`
+  },
+}

package/templates/ts/src/main.ts

@@ -0,0 +1,6 @@
+import { mount } from "@inglorious/web"
+
+import { app } from "./app"
+import { store } from "./store"
+
+mount(store, app.render, document.getElementById("root"))

package/templates/ts/src/message/message.ts

@@ -0,0 +1,16 @@
+import { type Api,html } from "@inglorious/web"
+
+import type { MessageEntity } from "../../types"
+
+export const message = {
+  click(entity: MessageEntity) {
+    entity.isUpperCase = true
+  },
+
+  render(entity: MessageEntity, api: Api) {
+    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
+      >Hello ${message}</span
+    >`
+  },
+}

package/templates/ts/src/store/entities.ts

@@ -0,0 +1,16 @@
+import { AppState } from "../../types"
+
+export const entities: AppState = {
+  message1: {
+    type: "message",
+    who: "world",
+  },
+  message2: {
+    type: "message",
+    who: "wide",
+  },
+  message3: {
+    type: "message",
+    who: "web",
+  },
+}

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

@@ -0,0 +1,14 @@
+import type { TypesConfig } from "@inglorious/store"
+import { createStore } from "@inglorious/web"
+
+import type { AppEntity, AppState } from "../../types"
+import { app } from "../app"
+import { message } from "../message/message"
+import { entities } from "./entities"
+import { middlewares } from "./middlewares"
+
+export const store = createStore<AppEntity, AppState>({
+  types: { app, message } as unknown as TypesConfig<AppEntity>,
+  entities,
+  middlewares,
+})

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

@@ -0,0 +1,10 @@
+import type { Middleware } from "@inglorious/store"
+import { createDevtools } from "@inglorious/web"
+
+import type { AppEntity, AppState } from "../../types"
+
+export const middlewares: Middleware<AppEntity, AppState>[] = []
+
+if (import.meta.env.DEV) {
+  middlewares.push(createDevtools<AppEntity, AppState>().middleware)
+}

package/templates/ts/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,26 @@
+import { BaseEntity, EntitiesState } from "@inglorious/store"
+
+// Define your entity types
+export interface MessageEntity extends BaseEntity {
+  type: "message"
+  id?: string
+  who: string
+  isUpperCase?: boolean
+}
+
+// Union type of all entities
+export type AppEntity = MessageEntity
+
+// State type with known entity IDs
+export interface AppState extends EntitiesState<AppEntity> {
+  message1: MessageEntity
+  message2: MessageEntity
+  message3: MessageEntity
+}
+
+// Types configuration
+export interface AppTypes {
+  message: {
+    click: (entity: MessageEntity) => void
+  }
+}

package/templates/ts/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  // @see https://github.com/vitejs/vite/issues/1973
+  define: { "process.env": {} },
+
+  plugins: [],
+})