@inglorious/create-app 0.5.0 → 1.0.0

package/package.json

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

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

package/templates/js/src/main.js

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

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

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

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

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

package/templates/js/src/{message → types}/message.js

@@ -1,14 +1,14 @@
 import { html } from "@inglorious/web"
 
-export const message = {
+export const Message = {
   click(entity) {
     entity.isUpperCase = !entity.isUpperCase
   },
 
   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/vite.config.js

@@ -10,7 +10,13 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer()],
+  plugins: [ViteImageOptimizer()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

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

@@ -1,8 +1,11 @@
-export const app = {
+import { Message } from "./types/message"
+
+export const App = {
   render() {
     return (
       <h1>
-        <Message1 />, <Message2 />, <Message3 />!
+        <Message entityId="message1" />, <Message entityId="message2" />,{" "}
+        <Message entityId="message3" />!
       </h1>
     )
   },

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+export const Message = {
+  click(entity) {
+    entity.isUpperCase = !entity.isUpperCase
+  },
+
+  render(entity, api) {
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return (
+      <span onClick={() => api.notify(`#${entity.id}:click`)}>Hello {who}</span>
+    )
+  },
+}

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

@@ -11,7 +11,13 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), jsx()],
+  plugins: [ViteImageOptimizer(), jsx()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

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

@@ -1,3 +1,10 @@
+<script setup>
+import { Message } from "./types/message.vue"
+</script>
+
 <template>
-  <h1><Message1 />, <Message2 />, <Message3 />!</h1>
+  <h1>
+    <Message v-bind="message1" />, <Message v-bind="message2" />,
+    <Message v-bind="message3" />!
+  </h1>
 </template>

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

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

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

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

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

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

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

@@ -11,7 +11,13 @@ const __dirname = path.dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), vue()],
+  plugins: [ViteImageOptimizer(), vue()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

package/templates/minimal/src/app.js

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

package/templates/minimal/src/main.js

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

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

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

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

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

package/templates/minimal/src/{message → types}/message.js

@@ -1,14 +1,14 @@
 import { html } from "@inglorious/web"
 
-export const message = {
+export const Message = {
   click(entity) {
     entity.isUpperCase = !entity.isUpperCase
   },
 
   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/ssx-js/src/pages/about.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-export const about = {
+export const About = {
   click(entity) {
     entity.name += "!"
   },

package/templates/ssx-js/src/pages/index.js

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-export const index = {
+export const Index = {
   render() {
     return html`
       <div>

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

@@ -1,6 +1,6 @@
 export const entities = {
   about: {
-    type: "about",
+    type: "About",
     name: "Us",
   },
 }

package/templates/ssx-ts/src/pages/about.ts

@@ -2,7 +2,7 @@ import { Api, html } from "@inglorious/web"
 
 import type { AboutEntity } from "../../types"
 
-export const about = {
+export const About = {
   click(entity: AboutEntity) {
     entity.name += "!"
   },

package/templates/ssx-ts/src/pages/index.ts

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-export const index = {
+export const Index = {
   render() {
     return html`
       <div>

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

@@ -2,7 +2,7 @@ import { AppState } from "../../types"
 
 export const entities: AppState = {
   about: {
-    type: "about",
+    type: "About",
     name: "Us",
   },
 }

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

@@ -2,7 +2,7 @@ import { BaseEntity, EntitiesState } from "@inglorious/store"
 
 // Define your entity types
 export interface AboutEntity extends BaseEntity {
-  type: "about"
+  type: "About"
   id?: string
   name: string
 }
@@ -17,7 +17,7 @@ export interface AppState extends EntitiesState<AppEntity> {
 
 // Types configuration
 export interface AppTypes {
-  about: {
+  About: {
     click: (entity: AboutEntity) => void
   }
 }

package/templates/ts/src/app.ts

@@ -1,7 +1,7 @@
 import { type Api, html } from "@inglorious/web"
 
-export const app = {
-  render(api: Api) {
+export const App = {
+  render(props: Record<string, unknown> | null, api: Api) {
     return html`<h1>
       ${api.render("message1")}, ${api.render("message2")},
       ${api.render("message3")}!

package/templates/ts/src/main.ts

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

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

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

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

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

package/templates/ts/src/{message → types}/message.ts

@@ -2,15 +2,15 @@ import { html } from "@inglorious/web"
 
 import type { MessageType } from "../../types"
 
-export const message: MessageType = {
+export const Message: MessageType = {
   click(entity) {
     entity.isUpperCase = !entity.isUpperCase
   },
 
   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/types/index.d.ts

@@ -4,7 +4,7 @@ import { BaseEntity, EntitiesState } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
-  type: "message"
+  type: "Message"
   id?: string
   who: string
   isUpperCase?: boolean

package/templates/ts/vite.config.ts

@@ -13,7 +13,13 @@ export default defineConfig({
   // @see https://github.com/vitejs/vite/issues/1973
   define: { "process.env": {} },
 
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer()],
+  plugins: [ViteImageOptimizer()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

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

@@ -1,9 +1,16 @@
-export const app = {
-  render() {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { Api } from "@inglorious/web"
+
+import { Message } from "./types/message"
+
+export const App = {
+  render(props: Record<string, unknown> | null, api: Api) {
     return (
       <h1>
         {/* @ts-expect-error - JSX components are entity type names, not imports */}
-        <Message1 />, <Message2 />, <Message3 />!
+        <Message entityId="message1" />, <Message entityId="message2" />,{" "}
+        {/* @ts-expect-error - JSX components are entity type names, not imports */}
+        <Message entityId="message3" />!
       </h1>
     )
   },

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { MessageType } from "../../types"
+
+export const Message: MessageType = {
+  click(entity) {
+    entity.isUpperCase = !entity.isUpperCase
+  },
+
+  render(entity, api) {
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return (
+      <span onClick={() => api.notify(`#${entity.id}:click`)}>Hello {who}</span>
+    )
+  },
+}

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

@@ -4,7 +4,7 @@ import { Api, BaseEntity, EntitiesState, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
-  type: "message"
+  type: "Message"
   id?: string
   who: string
   isUpperCase?: boolean

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

@@ -14,7 +14,13 @@ export default defineConfig({
   // @see https://github.com/vitejs/vite/issues/1973
   define: { "process.env": {} },
 
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), jsx()],
+  plugins: [ViteImageOptimizer(), jsx()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

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

@@ -1,3 +1,6 @@
 <template>
-  <h1><Message1 />, <Message2 />, <Message3 />!</h1>
+  <h1>
+    <Message v-bind="message1" />, <Message v-bind="message2" />,
+    <Message v-bind="message3" />!
+  </h1>
 </template>

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

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

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

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

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

@@ -2,12 +2,12 @@ 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 { 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>,
+  types: { Message } as unknown as TypesConfig<AppEntity>,
   entities,
   middlewares,
 })

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

@@ -4,7 +4,7 @@ import { Api, BaseEntity, EntitiesState, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
-  type: "message"
+  type: "Message"
   id?: string
   who: string
   isUpperCase?: boolean

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

@@ -14,7 +14,13 @@ export default defineConfig({
   // @see https://github.com/vitejs/vite/issues/1973
   define: { "process.env": {} },
 
-  plugins: [minifyTemplateLiterals(), ViteImageOptimizer(), vue()],
+  plugins: [ViteImageOptimizer(), vue()],
+
+  build: {
+    rollupOptions: {
+      plugins: [minifyTemplateLiterals()],
+    },
+  },
 
   resolve: {
     alias: {

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

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

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

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