@inglorious/create-app 0.4.0 → 0.5.1

package/bin/index.js

@@ -90,11 +90,11 @@ async function main() {
             description: "JSX/TSX syntax (<div>...</div>)",
             value: "jsx",
           },
-          // {
-          //   title: "Vue",
-          //   description: "Vue SFC-style templates",
-          //   value: "vue",
-          // },
+          {
+            title: "Vue",
+            description: "Vue SFC-style templates",
+            value: "vue",
+          },
         ],
       },
       { onCancel },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "prettier": "^3.6.2",
-    "@inglorious/eslint-config": "1.1.1"
+    "@inglorious/eslint-config": "1.1.2"
   },
   "scripts": {
     "format": "prettier --write .",

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

@@ -6,9 +6,9 @@ export const message = {
   },
 
   render(entity, api) {
-    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
     return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
-      >Hello ${message}</span
+      >Hello ${who}</span
     >`
   },
 }

package/templates/js-jsx/src/message/message.jsx

@@ -4,11 +4,9 @@ export const message = {
   },
 
   render(entity, api) {
-    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
     return (
-      <span onClick={() => api.notify(`#${entity.id}:click`)}>
-        Hello {message}
-      </span>
+      <span onClick={() => api.notify(`#${entity.id}:click`)}>Hello {who}</span>
     )
   },
 }

package/templates/js-vue/.prettierrc.yml

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

package/templates/js-vue/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-vue/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-vue/eslint.config.js

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

package/templates/js-vue/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-vue/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-vue/package.json

@@ -0,0 +1,34 @@
+{
+  "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 .",
+    "lint": "eslint .",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@inglorious/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-vue": "workspace:*",
+    "eslint": "^9.39.1",
+    "prettier": "^3.6.2",
+    "rollup-plugin-minify-template-literals": "^1.1.7",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.0",
+    "vite": "^7.1.6",
+    "vite-plugin-image-optimizer": "^2.0.3"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/js-vue/public/style.css

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

package/templates/js-vue/src/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1><Message1 />, <Message2 />, <Message3 />!</h1>
+</template>

package/templates/js-vue/src/main.js

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

package/templates/js-vue/src/message/message.vue

@@ -0,0 +1,10 @@
+<template>
+  <span @click="click"
+    >Hello
+    {{ entity.isUpperCase ? entity.who.toUpperCase() : entity.who }}</span
+  >
+</template>
+
+<script>
+const click = (entity) => (entity.isUpperCase = !entity.isUpperCase)
+</script>

package/templates/js-vue/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-vue/src/store/index.js

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

package/templates/js-vue/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-vue/vite.config.js

@@ -0,0 +1,21 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { vue } from "@inglorious/vite-plugin-vue"
+import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
+import { defineConfig } from "vite"
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), vue()],
+
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+})

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

@@ -6,9 +6,9 @@ export const message = {
   },
 
   render(entity, api) {
-    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
     return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
-      >Hello ${message}</span
+      >Hello ${who}</span
     >`
   },
 }

package/templates/ts/index.html

@@ -10,6 +10,6 @@
 
   <body>
     <div id="root"></div>
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

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

@@ -8,9 +8,9 @@ export const message: MessageType = {
   },
 
   render(entity, api) {
-    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
     return html`<span @click=${() => api.notify(`#${entity.id}:click`)}
-      >Hello ${message}</span
+      >Hello ${who}</span
     >`
   },
 }

package/templates/ts-jsx/index.html

@@ -10,6 +10,6 @@
 
   <body>
     <div id="root"></div>
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

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

@@ -6,11 +6,9 @@ export const message: MessageType = {
   },
 
   render(entity, api) {
-    const message = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
     return (
-      <span onClick={() => api.notify(`#${entity.id}:click`)}>
-        Hello {message}
-      </span>
+      <span onClick={() => api.notify(`#${entity.id}:click`)}>Hello {who}</span>
     )
   },
 }

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

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

package/templates/ts-vue/.prettierrc.yml

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

package/templates/ts-vue/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-vue/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/ts-vue/eslint.config.ts

@@ -0,0 +1,18 @@
+import browserConfig from "@inglorious/eslint-config/browser"
+import typescriptConfig from "@inglorious/eslint-config/typescript"
+import { defineConfig } from "eslint/config"
+
+export default defineConfig([
+  ...browserConfig,
+  ...typescriptConfig,
+
+  {
+    files: ["**/*.ts", "**/*.vue"],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.app.json", "./tsconfig.node.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+])

package/templates/ts-vue/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-vue/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.ts"></script>
+  </body>
+</html>

package/templates/ts-vue/package.json

@@ -0,0 +1,36 @@
+{
+  "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 .",
+    "lint": "eslint .",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@inglorious/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-vue": "workspace:*",
+    "@types/node": "^25.0.9",
+    "eslint": "^9.39.1",
+    "prettier": "^3.6.2",
+    "rollup-plugin-minify-template-literals": "^1.1.7",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.6",
+    "vite-plugin-image-optimizer": "^2.0.3"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">= 22"
+  }
+}

package/templates/ts-vue/public/style.css

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

package/templates/ts-vue/src/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1><Message1 />, <Message2 />, <Message3 />!</h1>
+</template>

package/templates/ts-vue/src/main.ts

@@ -0,0 +1,7 @@
+import { mount } from "@inglorious/web"
+
+// @ts-expect-error - Handled by @inglorious/vite-plugin-vue
+import { app } from "./app.vue"
+import { store } from "./store"
+
+mount(store, (api) => app.render(null, api), document.getElementById("root"))

package/templates/ts-vue/src/message/message.vue

@@ -0,0 +1,10 @@
+<template>
+  <span @click="click"
+    >Hello
+    {{ entity.isUpperCase ? entity.who.toUpperCase() : entity.who }}</span
+  >
+</template>
+
+<script>
+const click = (entity) => (entity.isUpperCase = !entity.isUpperCase)
+</script>

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

@@ -0,0 +1,16 @@
+import type { 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-vue/src/store/index.ts

@@ -0,0 +1,13 @@
+import { createStore, type TypesConfig } from "@inglorious/web"
+
+import type { AppEntity, AppState } from "../../types"
+// @ts-expect-error - Handled by @inglorious/vite-plugin-vue
+import { message } from "../message/message.vue"
+import { entities } from "./entities"
+import { middlewares } from "./middlewares"
+
+export const store = createStore<AppEntity, AppState>({
+  types: { message } as unknown as TypesConfig<AppEntity>,
+  entities,
+  middlewares,
+})

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

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

package/templates/ts-vue/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}

package/templates/ts-vue/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/ts-vue/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts", "eslint.config.ts"]
+}

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

@@ -0,0 +1,27 @@
+import "./vite-end"
+
+import { Api, BaseEntity, EntitiesState, TemplateResult } from "@inglorious/web"
+
+// 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 MessageType {
+  click: (entity: MessageEntity) => void
+  render: (entity: MessageEntity, api: Api) => TemplateResult | null
+}

package/templates/ts-vue/types/vite-end.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,24 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { vue } from "@inglorious/vite-plugin-vue"
+import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
+import { defineConfig } from "vite"
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// https://vite.dev/config/
+export default defineConfig({
+  // @see https://github.com/vitejs/vite/issues/1973
+  define: { "process.env": {} },
+
+  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), vue()],
+
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+})