@inglorious/create-app 1.3.0 → 1.4.0

package/bin/lib/app-jsx.js

@@ -252,9 +252,7 @@ export function messageSource(app) {
   }
   if (app.i18n) imports.push('import { t } from "../i18n"')
   const greeting = app.i18n ? '{t("message.hello", { who })}' : "Hello {who}"
-  const declaration = app.isTypeScript
-    ? "export const Message: MessageType = {"
-    : "export const Message = {"
+  const annotation = app.isTypeScript ? ": MessageType" : ""
 
   const span = app.i18n
     ? `      <span onClick={() => api.notify(\`#\${entity.id}:click\`)}>
@@ -264,7 +262,7 @@ export function messageSource(app) {
 
   const head = imports.length ? `${importBlock(imports)}\n\n` : ""
 
-  return `${head}${declaration}
+  return `${head}export const Message${annotation} = {
   click(entity) {
     entity.isUpperCase = !entity.isUpperCase
   },

package/bin/lib/app-lit.js

@@ -187,7 +187,7 @@ export function homeSource(app, { showcase }) {
     imports.push('import { Icon } from "@inglorious/ui/icon"')
   }
   if (app.isTypeScript) {
-    imports.push('import type { AppApi, HomeEntity } from "../../types"')
+    imports.push('import type { HomeType } from "../../types"')
   }
   if (app.i18n) imports.push('import { t } from "../i18n"')
 
@@ -207,14 +207,12 @@ ${showcase
       </p>`
     : ""
 
-  const signature = app.isTypeScript
-    ? "render(entity: HomeEntity, api: AppApi)"
-    : "render(entity, api)"
+  const annotation = app.isTypeScript ? ": HomeType" : ""
 
   return `${importBlock(imports)}
 
-export const Home = {
-  ${signature} {
+export const Home${annotation} = {
+  render(entity, api) {
     return html\`
       <h1>${text("home.title", "Welcome")}</h1>
       <p>
@@ -253,13 +251,11 @@ export function messageSource(app) {
   }
   if (app.i18n) imports.push('import { t } from "../i18n"')
   const greeting = app.i18n ? '${t("message.hello", { who })}' : "Hello ${who}"
-  const declaration = app.isTypeScript
-    ? "export const Message: MessageType = {"
-    : "export const Message = {"
+  const annotation = app.isTypeScript ? ": MessageType" : ""
 
   return `${importBlock(imports)}
 
-${declaration}
+export const Message${annotation} = {
   click(entity) {
     entity.isUpperCase = !entity.isUpperCase
   },

package/bin/lib/app.js

@@ -227,9 +227,7 @@ main {
 
 function storeSource(app) {
   const imports = [
-    app.isTypeScript
-      ? 'import { createStore, type TypesConfig } from "@inglorious/store"'
-      : 'import { createStore } from "@inglorious/store"',
+    'import { createStore } from "@inglorious/store"',
     componentImport(app, "Home", "../pages/home"),
     componentImport(app, "Message", "../types/message"),
     'import { entities } from "./entities"',
@@ -250,14 +248,13 @@ function storeSource(app) {
   const types = ["Message", "Home"]
   if (app.routing) types.push("About", "Router")
   if (app.i18n) types.push("I18n")
-  const cast = app.isTypeScript ? " as unknown as TypesConfig<AppEntity>" : ""
-  const oneLine = `  types: { ${types.join(", ")} }${cast},`
+  const oneLine = `  types: { ${types.join(", ")} },`
   const typesValue =
     oneLine.length <= LINE_WIDTH
       ? oneLine
       : `  types: {
 ${types.map((type) => `    ${type},`).join("\n")}
-  }${cast},`
+  },`
   const generics = app.isTypeScript ? "<AppEntity, AppState>" : ""
 
   return `${importBlock(imports)}
@@ -333,14 +330,13 @@ export const { I18n, t, ready } = createI18n({
 function typesSource(app) {
   const imports = [
     'import "./vite-end"',
-    'import type { BaseEntity, EntitiesState } from "@inglorious/store"',
+    'import type {\n  BaseEntity,\n  EntitiesState,\n  EntityType,\n} from "@inglorious/store"',
     'import type { Api, TemplateResult } from "@inglorious/web"',
   ]
   const entities = ["MessageEntity", "HomeEntity"]
   const declarations = [
     `export interface MessageEntity extends BaseEntity {
   type: "Message"
-  id?: string
   who: string
   isUpperCase?: boolean
 }`,
@@ -362,7 +358,7 @@ function typesSource(app) {
       `export interface AboutEntity extends BaseEntity {
   type: "About"
 }`,
-      `export interface AppRouterEntity extends BaseEntity, Omit<RouterEntity, "id"> {
+      `export interface AppRouterEntity extends RouterEntity {
   type: "Router"
 }`,
     )
@@ -373,7 +369,7 @@ function typesSource(app) {
     imports.push('import type { I18nEntity } from "@inglorious/i18n"')
     entities.push("AppI18nEntity")
     declarations.push(
-      `export interface AppI18nEntity extends BaseEntity, Omit<I18nEntity, "id"> {
+      `export interface AppI18nEntity extends I18nEntity {
   type: "I18n"
 }`,
     )
@@ -394,9 +390,23 @@ ${state.join("\n")}
 
 export type AppApi = Api<AppEntity, AppState>
 
-export interface MessageType {
+// Each type's events and their payloads. Declare types with \`type\`, not
+// \`interface\`: an interface does not fit the store's \`types\`.
+export type MessageType = {
   click: (entity: MessageEntity) => void
-  render: (entity: MessageEntity, api: AppApi) => TemplateResult | null
+  render: (entity: MessageEntity, api: AppApi) => TemplateResult
+}
+${
+  app.renderer === "lit-html"
+    ? `
+export type HomeType = {
+  render: (entity: HomeEntity, api: AppApi) => TemplateResult
+}
+`
+    : ""
 }
+// A shorthand for a type: \`{ ... } satisfies AppType<MessageEntity>\` infers
+// its handlers' parameters, but neither lists its events nor types payloads.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>
 `
 }

package/bin/lib/pwa.js

@@ -93,7 +93,9 @@ export function writePwaRegistration(targetDir) {
 
 export function createPwaRegistrationSource(extension) {
   if (extension === ".ts") {
-    return `/// <reference types="vite-plugin-pwa/client" />
+    return `// Only the framework-free helpers: "client" also loads React's and Preact's
+// typings, whose global JSX would replace Inglorious's.
+/// <reference types="vite-plugin-pwa/vanillajs" />
 import { isNative } from "@inglorious/web/mobile"
 import { registerSW } from "virtual:pwa-register"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@inglorious/eslint-config": "1.1.3",
+    "@inglorious/eslint-config": "1.1.4",
     "prettier": "^3.9.6"
   },
   "scripts": {

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

@@ -1,13 +1,13 @@
-import { Api, html } from "@inglorious/web"
+import { html } from "@inglorious/web"
 
-import type { AboutEntity } from "../../types"
+import type { AboutType } from "../../types"
 
-export const About = {
-  click(entity: AboutEntity) {
+export const About: AboutType = {
+  click(entity) {
     entity.name += "!"
   },
 
-  render(entity: AboutEntity, api: Api) {
+  render(entity, api) {
     return html`
       <div>
         <h1>

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

@@ -1,9 +1,9 @@
-import { BaseEntity, EntitiesState } from "@inglorious/store"
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface AboutEntity extends BaseEntity {
   type: "About"
-  id?: string
   name: string
 }
 
@@ -15,9 +15,15 @@ export interface AppState extends EntitiesState<AppEntity> {
   about: AboutEntity
 }
 
-// Types configuration
-export interface AppTypes {
-  About: {
-    click: (entity: AboutEntity) => void
-  }
+export type AppApi = Api<AppEntity, AppState>
+
+// Each type's events and their payloads. Declare types with `type`, not
+// `interface`: an interface does not fit the store's `types`.
+export type AboutType = {
+  click: (entity: AboutEntity) => void
+  render: (entity: AboutEntity, api: AppApi) => TemplateResult
 }
+
+// A shorthand for a type: `{ ... } satisfies AppType<AboutEntity>` infers
+// its handlers' parameters, but neither lists its events nor types payloads.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>

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

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

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

@@ -1,12 +1,11 @@
 import "./vite-end"
 
-import { BaseEntity, EntitiesState } from "@inglorious/store"
-import { Api, TemplateResult } from "@inglorious/web"
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
   type: "Message"
-  id?: string
   who: string
   isUpperCase?: boolean
 }
@@ -23,8 +22,13 @@ export interface AppState extends EntitiesState<AppEntity> {
 
 export type AppApi = Api<AppEntity, AppState>
 
-// Types configuration
-export interface MessageType {
+// Each type's events and their payloads. Declare types with `type`, not
+// `interface`: an interface does not fit the store's `types`.
+export type MessageType = {
   click: (entity: MessageEntity) => void
-  render: (entity: MessageEntity, api: AppApi) => TemplateResult | null
+  render: (entity: MessageEntity, api: AppApi) => TemplateResult
 }
+
+// A shorthand for a type: `{ ... } satisfies AppType<MessageEntity>` infers
+// its handlers' parameters, but neither lists its events nor types payloads.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>

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

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

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

@@ -1,12 +1,11 @@
 import "./vite-end"
 
-import { BaseEntity, EntitiesState } from "@inglorious/store"
-import { Api, TemplateResult } from "@inglorious/web"
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api, TemplateResult } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
   type: "Message"
-  id?: string
   who: string
   isUpperCase?: boolean
 }
@@ -23,8 +22,13 @@ export interface AppState extends EntitiesState<AppEntity> {
 
 export type AppApi = Api<AppEntity, AppState>
 
-// Types configuration
-export interface MessageType {
+// Each type's events and their payloads. Declare types with `type`, not
+// `interface`: an interface does not fit the store's `types`.
+export type MessageType = {
   click: (entity: MessageEntity) => void
-  render: (entity: MessageEntity, api: AppApi) => TemplateResult | null
+  render: (entity: MessageEntity, api: AppApi) => TemplateResult
 }
+
+// A shorthand for a type: `{ ... } satisfies AppType<MessageEntity>` infers
+// its handlers' parameters, but neither lists its events nor types payloads.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>

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

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

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

@@ -1,12 +1,11 @@
 import "./vite-end"
 
-import { BaseEntity, EntitiesState } from "@inglorious/store"
-import { Api, TemplateResult } from "@inglorious/web"
+import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type { Api } from "@inglorious/web"
 
 // Define your entity types
 export interface MessageEntity extends BaseEntity {
   type: "Message"
-  id?: string
   who: string
   isUpperCase?: boolean
 }
@@ -23,8 +22,7 @@ export interface AppState extends EntitiesState<AppEntity> {
 
 export type AppApi = Api<AppEntity, AppState>
 
-// Types configuration
-export interface MessageType {
-  click: (entity: MessageEntity) => void
-  render: (entity: MessageEntity, api: AppApi) => TemplateResult | null
-}
+// A type for one of the app's entities. For rigour, declare a type alias
+// listing its events and payloads; this shorthand infers its handlers'
+// parameters with `{ ... } satisfies AppType<MessageEntity>`.
+export type AppType<TEntity extends AppEntity> = EntityType<TEntity, AppApi>