@inglorious/create-app 1.10.0 → 1.11.0

package/bin/lib/app.js

@@ -333,7 +333,9 @@ function storeSource(app) {
     )
   }
   if (app.isTypeScript) {
-    imports.push('import type { AppEntity, AppState } from "../../types"')
+    imports.push(
+      'import type { AppEntity, AppEvents, AppState } from "../../types"',
+    )
   }
   if (app.i18n) imports.push('import { I18n } from "../i18n"')
   if (app.analytics) {
@@ -359,7 +361,7 @@ function storeSource(app) {
       : `  types: {
 ${types.map((type) => `    ${type},`).join("\n")}
   },`
-  const generics = app.isTypeScript ? "<AppEntity, AppState>" : ""
+  const generics = app.isTypeScript ? "<AppEntity, AppState, AppEvents>" : ""
 
   return `${importBlock(imports)}
 ${app.routing ? "\nsetRoutes(routes)\n" : ""}
@@ -425,13 +427,35 @@ export const { I18n, t, ready } = createI18n({
 `
 }
 
+/**
+ * `export type AppEvents = EventsOf<...>`, wrapped as Prettier would: on one
+ * line if it fits, then with the types on a line of their own, then one per
+ * line.
+ */
+function eventsOf(types) {
+  const head = "export type AppEvents = EventsOf<"
+  const oneLine = `${head}${types.join(" | ")}>`
+  if (oneLine.length <= LINE_WIDTH) return oneLine
+  const inner = `  ${types.join(" | ")}`
+  if (inner.length <= LINE_WIDTH) return `${head}\n${inner}\n>`
+  return `${head}\n${types.map((type) => `  | ${type}`).join("\n")}\n>`
+}
+
 function typesSource(app) {
   const imports = [
     'import "./vite-env"',
-    'import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"',
+    `import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  EventsOf,
+} from "@inglorious/store"`,
     'import type { Api, TemplateResult } from "@inglorious/web"',
   ]
   const entities = ["MessageEntity", "HomeEntity"]
+  // The types whose events the app sends: its own, then the libraries'.
+  const eventTypes = ["MessageType"]
+  if (app.renderer === "lit-html") eventTypes.push("HomeType")
   const declarations = [
     `export interface MessageEntity extends BaseEntity {
   type: "Message"
@@ -450,7 +474,10 @@ function typesSource(app) {
   ]
 
   if (app.routing) {
-    imports.push('import type { RouterEntity } from "@inglorious/web/router"')
+    imports.push(
+      'import type { RouterEntity, RouterType } from "@inglorious/web/router"',
+    )
+    eventTypes.push("RouterType")
     entities.push("AboutEntity", "AppRouterEntity")
     declarations.push(
       `export interface AboutEntity extends BaseEntity {
@@ -464,7 +491,8 @@ function typesSource(app) {
     state.push("  about: AboutEntity")
   }
   if (app.i18n) {
-    imports.push('import type { I18nEntity } from "@inglorious/i18n"')
+    imports.push('import type { I18nEntity, I18nType } from "@inglorious/i18n"')
+    eventTypes.push("I18nType")
     entities.push("AppI18nEntity")
     declarations.push(
       `export interface AppI18nEntity extends I18nEntity {
@@ -475,8 +503,9 @@ function typesSource(app) {
   }
   if (app.analytics) {
     imports.push(
-      'import type { AnalyticsEntity } from "@inglorious/web/analytics"',
+      'import type { AnalyticsEntity, AnalyticsType } from "@inglorious/web/analytics"',
     )
+    eventTypes.push("AnalyticsType")
     entities.push("AppAnalyticsEntity")
     declarations.push(
       `export interface AppAnalyticsEntity extends AnalyticsEntity {
@@ -486,7 +515,10 @@ function typesSource(app) {
     state.push("  analytics: AppAnalyticsEntity")
   }
   if (app.push) {
-    imports.push('import type { PushPromptEntity } from "@inglorious/web/push"')
+    imports.push(
+      'import type { PushPromptEntity, PushPromptType } from "@inglorious/web/push"',
+    )
+    eventTypes.push("PushPromptType")
     entities.push("AppPushPromptEntity")
     declarations.push(
       `export interface AppPushPromptEntity extends PushPromptEntity {
@@ -508,7 +540,10 @@ export interface AppState extends EntitiesState<AppEntity> {
 ${state.join("\n")}
 }
 
-export type AppApi = Api<AppEntity, AppState>
+// The events the app's types answer, so that \`notify\` checks them.
+${eventsOf(eventTypes)}
+
+export type AppApi = Api<AppEntity, AppState, AppEvents>
 
 // Each type's events and their payloads. Declare types with \`type\`, not
 // \`interface\`: an interface does not fit the store's \`types\`.

package/package.json

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

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

@@ -1,4 +1,9 @@
-import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  EventsOf,
+} from "@inglorious/store"
 import type { Api, TemplateResult } from "@inglorious/web"
 
 export interface AboutEntity extends BaseEntity {
@@ -12,7 +17,10 @@ export interface AppState extends EntitiesState<AppEntity> {
   about: AboutEntity
 }
 
-export type AppApi = Api<AppEntity, AppState>
+// The events the types below answer, so that `notify` checks them.
+export type AppEvents = EventsOf<AboutType>
+
+export type AppApi = Api<AppEntity, AppState, AppEvents>
 
 export type AboutType = {
   click: (entity: AboutEntity) => void

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

@@ -1,6 +1,11 @@
 /// <reference types="@inglorious/jsx/jsx-runtime" />
 
-import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  EventsOf,
+} from "@inglorious/store"
 import type { Api, TemplateResult } from "@inglorious/web"
 
 export interface AboutEntity extends BaseEntity {
@@ -14,7 +19,10 @@ export interface AppState extends EntitiesState<AppEntity> {
   about: AboutEntity
 }
 
-export type AppApi = Api<AppEntity, AppState>
+// The events the types below answer, so that `notify` checks them.
+export type AppEvents = EventsOf<AboutType>
+
+export type AppApi = Api<AppEntity, AppState, AppEvents>
 
 export type AboutType = {
   click: (entity: AboutEntity) => void

package/templates/ts/src/app/index.ts

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

package/templates/ts/src/main.ts

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

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

@@ -1,11 +1,11 @@
 import { createStore } from "@inglorious/store"
 
-import type { AppEntity, AppState } from "../../types"
+import type { AppEntity, AppEvents, AppState } from "../../types"
 import { Message } from "../app/message"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 
-export const store = createStore<AppEntity, AppState>({
+export const store = createStore<AppEntity, AppState, AppEvents>({
   types: { Message },
   entities,
   middlewares,

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

@@ -1,6 +1,11 @@
 import "./vite-env"
 
-import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  EventsOf,
+} from "@inglorious/store"
 import type { Api, TemplateResult } from "@inglorious/web"
 
 export interface MessageEntity extends BaseEntity {
@@ -17,7 +22,10 @@ export interface AppState extends EntitiesState<AppEntity> {
   message3: MessageEntity
 }
 
-export type AppApi = Api<AppEntity, AppState>
+// The events the types below answer, so that `notify` checks them.
+export type AppEvents = EventsOf<MessageType>
+
+export type AppApi = Api<AppEntity, AppState, AppEvents>
 
 export type MessageType = {
   click: (entity: MessageEntity) => void

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

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

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

@@ -1,11 +1,11 @@
 import { createStore } from "@inglorious/store"
 
-import type { AppEntity, AppState } from "../../types"
+import type { AppEntity, AppEvents, AppState } from "../../types"
 import { Message } from "../app/message"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 
-export const store = createStore<AppEntity, AppState>({
+export const store = createStore<AppEntity, AppState, AppEvents>({
   types: { Message },
   entities,
   middlewares,

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

@@ -1,6 +1,11 @@
 import "./vite-env"
 
-import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
+import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  EventsOf,
+} from "@inglorious/store"
 import type { Api, TemplateResult } from "@inglorious/web"
 
 export interface MessageEntity extends BaseEntity {
@@ -17,7 +22,10 @@ export interface AppState extends EntitiesState<AppEntity> {
   message3: MessageEntity
 }
 
-export type AppApi = Api<AppEntity, AppState>
+// The events the types below answer, so that `notify` checks them.
+export type AppEvents = EventsOf<MessageType>
+
+export type AppApi = Api<AppEntity, AppState, AppEvents>
 
 export type MessageType = {
   click: (entity: MessageEntity) => void

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

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