@inglorious/create-app 1.9.1 → 1.11.0

package/bin/lib/app-jsx.js

@@ -1,5 +1,6 @@
 import { renderLocals, selectChange } from "./app-lit.js"
 import { importBlock } from "./imports.js"
+import { relative } from "./source.js"
 
 export const extension = (app) => (app.isTypeScript ? "tsx" : "jsx")
 
@@ -27,8 +28,12 @@ export function appSource(app, { pages, navIcons }) {
     if (app.links) imports.push('import { Link } from "@inglorious/ui/link"')
     if (app.i18n) imports.push('import { Select } from "@inglorious/ui/select"')
   }
-  if (app.isTypeScript) imports.push('import type { AppApi } from "../types"')
-  if (app.i18n) imports.push('import { t } from "./i18n"')
+  if (app.isTypeScript)
+    imports.push(
+      `import type { AppApi } from "${relative(app.layout.app, "types")}"`,
+    )
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.app, "src/i18n")}"`)
 
   const signature = app.isTypeScript
     ? "render(props: Record<string, unknown> | null, api: AppApi)"
@@ -56,14 +61,17 @@ ${shell}
 }
 
 export function homeSource(app, { showcase }) {
-  const imports = ['import { Message } from "../types/message"']
+  const imports = [
+    `import { Message } from "${relative(app.layout.home, app.layout.message)}"`,
+  ]
   for (const icon of showcase) {
     imports.push(`import ${icon.name} from "${icon.from}"`)
   }
   if (showcase.length) {
     imports.push('import { Icon } from "@inglorious/ui/icon"')
   }
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.home, "src/i18n")}"`)
 
   const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
   const icons = showcase.length
@@ -98,7 +106,9 @@ ${expectError(app, "          ")}          <Message entityId="message3" />!
 }
 
 export function aboutSource(app) {
-  const head = app.i18n ? 'import { t } from "../i18n"\n\n' : ""
+  const head = app.i18n
+    ? `import { t } from "${relative(app.layout.about, "src/i18n")}"\n\n`
+    : ""
   const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
 
   return `${head}export const About = {
@@ -117,9 +127,14 @@ export function aboutSource(app) {
 export function messageSource(app) {
   const imports = []
   if (app.isTypeScript) {
-    imports.push('import type { MessageType } from "../../types"')
+    imports.push(
+      `import type { MessageType } from "${relative(app.layout.message, "types")}"`,
+    )
   }
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(
+      `import { t } from "${relative(app.layout.message, "src/i18n")}"`,
+    )
   const greeting = app.i18n ? '{t("message.hello", { who })}' : "Hello {who}"
   const annotation = app.isTypeScript ? ": MessageType" : ""
 

package/bin/lib/app-lit.js

@@ -1,4 +1,5 @@
 import { importBlock } from "./imports.js"
+import { relative } from "./source.js"
 
 export const extension = (app) => (app.isTypeScript ? "ts" : "js")
 
@@ -23,8 +24,12 @@ export function appSource(app, { pages, navIcons }) {
     if (app.links) imports.push('import { Link } from "@inglorious/ui/link"')
     if (app.i18n) imports.push('import { Select } from "@inglorious/ui/select"')
   }
-  if (app.isTypeScript) imports.push('import type { AppApi } from "../types"')
-  if (app.i18n) imports.push('import { t } from "./i18n"')
+  if (app.isTypeScript)
+    imports.push(
+      `import type { AppApi } from "${relative(app.layout.app, "types")}"`,
+    )
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.app, "src/i18n")}"`)
 
   const label = (key, text) => (app.i18n ? `t("${key}")` : `"${text}"`)
   const signature = app.isTypeScript
@@ -82,9 +87,12 @@ export function homeSource(app, { showcase }) {
     imports.push('import { Icon } from "@inglorious/ui/icon"')
   }
   if (app.isTypeScript) {
-    imports.push('import type { HomeType } from "../../types"')
+    imports.push(
+      `import type { HomeType } from "${relative(app.layout.home, "types")}"`,
+    )
   }
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.home, "src/i18n")}"`)
 
   const text = (key, fallback) => (app.i18n ? `\${t("${key}")}` : fallback)
   const icons = showcase.length
@@ -123,7 +131,10 @@ export const Home${annotation} = {
 
 export function aboutSource(app) {
   const imports = ['import { html } from "@inglorious/web"']
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(
+      `import { t } from "${relative(app.layout.about, "src/i18n")}"`,
+    )
   const text = (key, fallback) => (app.i18n ? `\${t("${key}")}` : fallback)
 
   return `${importBlock(imports)}
@@ -142,9 +153,14 @@ export const About = {
 export function messageSource(app) {
   const imports = ['import { html } from "@inglorious/web"']
   if (app.isTypeScript) {
-    imports.push('import type { MessageType } from "../../types"')
+    imports.push(
+      `import type { MessageType } from "${relative(app.layout.message, "types")}"`,
+    )
   }
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(
+      `import { t } from "${relative(app.layout.message, "src/i18n")}"`,
+    )
   const greeting = app.i18n ? '${t("message.hello", { who })}' : "Hello ${who}"
   const annotation = app.isTypeScript ? ": MessageType" : ""
 

package/bin/lib/app-vue.js

@@ -1,5 +1,5 @@
 import { importBlock } from "./imports.js"
-import { LINE_WIDTH } from "./source.js"
+import { LINE_WIDTH, relative } from "./source.js"
 
 export const extension = () => "vue"
 
@@ -24,7 +24,8 @@ export function appSource(app, { pages, navIcons }) {
     if (app.links) imports.push('import { Link } from "@inglorious/ui/link"')
     if (app.i18n) imports.push('import { Select } from "@inglorious/ui/select"')
   }
-  if (app.i18n) imports.push('import { t } from "./i18n"')
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.app, "src/i18n")}"`)
 
   const locals = []
   if (app.routing) locals.push('const router = api.getEntity("router")')
@@ -47,14 +48,17 @@ ${template}
 }
 
 export function homeSource(app, { showcase }) {
-  const imports = ['import { Message } from "../types/message.vue"']
+  const imports = [
+    `import { Message } from "${relative(app.layout.home, app.layout.message)}/index.vue"`,
+  ]
   for (const icon of showcase) {
     imports.push(`import ${icon.name} from "${icon.from}"`)
   }
   if (showcase.length) {
     imports.push('import { Icon } from "@inglorious/ui/icon"')
   }
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(`import { t } from "${relative(app.layout.home, "src/i18n")}"`)
 
   const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
   const icons = showcase.length
@@ -81,7 +85,9 @@ ${showcase
 }
 
 export function aboutSource(app) {
-  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
+  const imports = app.i18n
+    ? [`import { t } from "${relative(app.layout.about, "src/i18n")}"`]
+    : []
   const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
   return `${script(imports, [])}<template>
   <h1>${text("about.title", "About")}</h1>
@@ -91,7 +97,9 @@ export function aboutSource(app) {
 }
 
 export function messageSource(app) {
-  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
+  const imports = app.i18n
+    ? [`import { t } from "${relative(app.layout.message, "src/i18n")}"`]
+    : []
   const who = "entity.isUpperCase ? entity.who.toUpperCase() : entity.who"
   const span = app.i18n
     ? `  <span @click="click">{{

package/bin/lib/app.js

@@ -15,7 +15,14 @@ import {
 import { ICON_PACKS, LANGUAGES, PROMPT_TEXTS } from "./features.js"
 import { importBlock } from "./imports.js"
 import { envExample, promptFiles } from "./prompts.js"
-import { appModel, call, LINE_WIDTH, union } from "./source.js"
+import {
+  appModel,
+  call,
+  layout,
+  LINE_WIDTH,
+  relative,
+  union,
+} from "./source.js"
 
 const COMPONENTS = {
   "lit-html": litComponents,
@@ -53,6 +60,7 @@ export function addAppFeatures(targetDir, pkg, options) {
   app.links = app.routing && !app.tabs
   app.isVue = app.renderer === "vue"
   app.hasPrompts = app.analytics || app.push
+  app.layout = layout(app)
 
   const components = COMPONENTS[app.renderer]
   const componentExt = components.extension(app)
@@ -60,17 +68,18 @@ export function addAppFeatures(targetDir, pkg, options) {
 
   addDependencies(pkg, app)
 
+  const { layout: at } = app
   const files = {
     [`src/main.${app.ext}`]: mainSource(app),
-    [`src/app.${componentExt}`]: components.appSource(app, model),
-    "src/app.css": appStyles(app),
-    [`src/pages/home.${componentExt}`]: components.homeSource(app, model),
-    [`src/types/message.${componentExt}`]: components.messageSource(app),
+    [`${at.app}/index.${componentExt}`]: components.appSource(app, model),
+    [`${at.app}/style.css`]: appStyles(app),
+    [`${at.home}/index.${componentExt}`]: components.homeSource(app, model),
+    [`${at.message}/index.${componentExt}`]: components.messageSource(app),
     [`src/store/index.${app.ext}`]: storeSource(app),
     [`src/store/entities.${app.ext}`]: entitiesSource(app),
   }
   if (app.routing) {
-    files[`src/pages/about.${componentExt}`] = components.aboutSource(app)
+    files[`${at.about}/index.${componentExt}`] = components.aboutSource(app)
     files[`src/store/routes.${app.ext}`] = routesSource(app)
   }
   if (app.i18n) {
@@ -88,6 +97,10 @@ export function addAppFeatures(targetDir, pkg, options) {
     files["types/index.d.ts"] = typesSource(app)
   }
 
+  // The template's hello world keeps its messages in the shell; here they move
+  // to the home screen that renders them.
+  removeTemplateMessages(targetDir, app)
+
   for (const [file, source] of Object.entries(files)) {
     const filePath = path.join(targetDir, file)
     fs.mkdirSync(path.dirname(filePath), { recursive: true })
@@ -97,6 +110,15 @@ export function addAppFeatures(targetDir, pkg, options) {
   if (app.ui) applyTheme(targetDir, app)
 }
 
+function removeTemplateMessages(targetDir, app) {
+  const templateMessages = "src/app/message"
+  if (app.layout.message === templateMessages) return
+  fs.rmSync(path.join(targetDir, templateMessages), {
+    recursive: true,
+    force: true,
+  })
+}
+
 function addDependencies(pkg, app) {
   pkg.dependencies ??= {}
   if (app.ui) pkg.dependencies["@inglorious/ui"] = "workspace:*"
@@ -141,9 +163,10 @@ function applyTheme(targetDir, app) {
 
 // An import of one of the app's components: Vue's name their file, and
 // TypeScript cannot read .vue files, so it is told to expect that.
+/** Imports a component from its folder: its index, which a .vue file names. */
 function componentImport(app, names, from) {
   if (!app.isVue) return `import { ${names} } from "${from}"`
-  const line = `import { ${names} } from "${from}.vue"`
+  const line = `import { ${names} } from "${from}/index.vue"`
   return app.isTypeScript
     ? `// @ts-expect-error - Handled by @inglorious/vite-plugin-vue\n${line}`
     : line
@@ -161,10 +184,10 @@ function mainSource(app) {
       imports.push('import "@inglorious/ui/view-transitions.css"')
     }
   }
-  imports.push('import "./app.css"')
+  imports.push(`import "${relative("src", app.layout.app)}/style.css"`)
   imports.push(
     `import { ${app.hasPrompts ? "html, mount" : "mount"} } from "@inglorious/web"`,
-    componentImport(app, "App", "./app"),
+    componentImport(app, "App", relative("src", app.layout.app)),
     'import { store } from "./store"',
   )
   if (app.i18n) imports.push('import { ready } from "./i18n"')
@@ -292,8 +315,8 @@ main {
 function storeSource(app) {
   const imports = [
     'import { createStore } from "@inglorious/store"',
-    componentImport(app, "Home", "../pages/home"),
-    componentImport(app, "Message", "../types/message"),
+    componentImport(app, "Home", relative("src/store", app.layout.home)),
+    componentImport(app, "Message", relative("src/store", app.layout.message)),
     'import { entities } from "./entities"',
     'import { middlewares } from "./middlewares"',
   ]
@@ -305,19 +328,25 @@ function storeSource(app) {
   if (app.routing) {
     imports.push(
       'import { Router, setRoutes } from "@inglorious/web/router"',
-      componentImport(app, "About", "../pages/about"),
+      componentImport(app, "About", relative("src/store", app.layout.about)),
       'import { routes } from "./routes"',
     )
   }
   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) {
-    imports.push('import { Analytics } from "../types/analytics"')
+    imports.push(
+      `import { Analytics } from "${relative("src/store", app.layout.analytics)}"`,
+    )
   }
   if (app.push) {
-    imports.push('import { PushPrompt } from "../types/push-prompt"')
+    imports.push(
+      `import { PushPrompt } from "${relative("src/store", app.layout.pushPrompt)}"`,
+    )
   }
 
   const types = ["Message", "Home"]
@@ -332,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" : ""}
@@ -398,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-end"',
-    'import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"',
+    'import "./vite-env"',
+    `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"
@@ -423,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 {
@@ -437,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 {
@@ -448,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 {
@@ -459,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 {
@@ -481,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/bin/lib/prompts.js

@@ -1,5 +1,5 @@
 import { importBlock } from "./imports.js"
-import { LINE_WIDTH } from "./source.js"
+import { LINE_WIDTH, relative } from "./source.js"
 
 const FIREBASE_CONFIG_KEYS = {
   apiKey: "VITE_FIREBASE_API_KEY",
@@ -22,12 +22,12 @@ export function promptFiles(app) {
     [`src/common/prompt.${app.ext}`]: promptSource(app),
   }
   if (app.analytics) {
-    files[`src/types/analytics.${app.ext}`] = analyticsSource(app)
+    files[`${app.layout.analytics}/index.${app.ext}`] = analyticsSource(app)
   }
   if (app.push) {
     files[`src/api/supabase.${app.ext}`] = supabaseSource()
     files[`src/api/push.${app.ext}`] = pushSource(app)
-    files[`src/types/push-prompt.${app.ext}`] = pushPromptSource(app)
+    files[`${app.layout.pushPrompt}/index.${app.ext}`] = pushPromptSource(app)
   }
   return files
 }
@@ -172,13 +172,16 @@ function analyticsSource(app) {
     'import { firebaseAnalytics } from "@inglorious/firebase/analytics"',
     'import { createAnalytics } from "@inglorious/web/analytics"',
     'import { when } from "@inglorious/web/directives/when"',
-    'import { firebaseConfig } from "../api/firebase"',
-    'import { Prompt } from "../common/prompt"',
+    `import { firebaseConfig } from "${relative(app.layout.analytics, "src/api/firebase")}"`,
+    `import { Prompt } from "${relative(app.layout.analytics, "src/common/prompt")}"`,
   ]
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(
+      `import { t } from "${relative(app.layout.analytics, "src/i18n")}"`,
+    )
   if (app.isTypeScript) {
     imports.push(
-      'import type { AppAnalyticsEntity, AppApi } from "../../types"',
+      `import type { AppAnalyticsEntity, AppApi } from "${relative(app.layout.analytics, "types")}"`,
     )
   }
   const label = labelFor(app)
@@ -263,13 +266,16 @@ function pushPromptSource(app) {
   const imports = [
     'import { when } from "@inglorious/web/directives/when"',
     'import { createPushPrompt } from "@inglorious/web/push"',
-    'import { push } from "../api/push"',
-    'import { Prompt } from "../common/prompt"',
+    `import { push } from "${relative(app.layout.pushPrompt, "src/api/push")}"`,
+    `import { Prompt } from "${relative(app.layout.pushPrompt, "src/common/prompt")}"`,
   ]
-  if (app.i18n) imports.push('import { t } from "../i18n"')
+  if (app.i18n)
+    imports.push(
+      `import { t } from "${relative(app.layout.pushPrompt, "src/i18n")}"`,
+    )
   if (app.isTypeScript) {
     imports.push(
-      'import type { AppApi, AppPushPromptEntity } from "../../types"',
+      `import type { AppApi, AppPushPromptEntity } from "${relative(app.layout.pushPrompt, "types")}"`,
     )
   }
   const label = labelFor(app)

package/bin/lib/source.js

@@ -1,3 +1,5 @@
+import path from "path"
+
 import { ICON_PACKS } from "./features.js"
 
 export const LINE_WIDTH = 80
@@ -25,6 +27,30 @@ export function appModel(app) {
   }
 }
 
+/**
+ * Where each part of a generated app lives. The shell and its own pieces are
+ * in src/app; routed screens are in src/views, and without routing the one
+ * screen is a piece of the shell. A piece lives with what renders it, so the
+ * messages live in the home screen's folder.
+ */
+export function layout(app) {
+  const screens = app.routing ? "src/views" : "src/app"
+  return {
+    app: "src/app",
+    home: `${screens}/home`,
+    about: "src/views/about",
+    message: `${screens}/home/message`,
+    analytics: "src/app/analytics",
+    pushPrompt: "src/app/push-prompt",
+  }
+}
+
+/** The import specifier from a folder to a path, both relative to the project. */
+export function relative(fromDir, to) {
+  const specifier = path.posix.relative(fromDir, to)
+  return specifier.startsWith(".") ? specifier : `./${specifier}`
+}
+
 export function call(name, args, indent, trailing) {
   const line = `${indent}${name}(${args.join(", ")})${trailing}`
   if (line.length <= LINE_WIDTH) return line

package/package.json

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

@@ -1,6 +1,6 @@
 import { createStore } from "@inglorious/store"
 
-import { Message } from "../types/message"
+import { Message } from "../app/message"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 

package/templates/js-jsx/src/{app.jsx → app/index.jsx}

@@ -1,4 +1,4 @@
-import { Message } from "./types/message"
+import { Message } from "./message"
 
 export const App = {
   render() {

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

@@ -1,6 +1,6 @@
 import { createStore } from "@inglorious/store"
 
-import { Message } from "../types/message"
+import { Message } from "../app/message"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 

package/templates/{ts-vue/src/app.vue → js-vue/src/app/index.vue}

@@ -1,5 +1,5 @@
 <script>
-import { Message } from "./types/message.vue"
+import { Message } from "./message/index.vue"
 </script>
 
 <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/index.vue"
 import { store } from "./store"
 
 mount(store, (api) => App.render(null, api), document.getElementById("root"))

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

@@ -1,6 +1,6 @@
 import { createStore } from "@inglorious/store"
 
-import { Message } from "../types/message.vue"
+import { Message } from "../app/message/index.vue"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 

package/templates/minimal/src/main.js

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

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

@@ -1,6 +1,6 @@
 import { createStore } from "@inglorious/store"
 
-import { Message } from "../types/message.js"
+import { Message } from "../app/message/index.js"
 import { entities } from "./entities.js"
 import { middlewares } from "./middlewares.js"
 

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.ts → app/index.ts}

@@ -1,9 +1,9 @@
 import { html } from "@inglorious/web"
 
-import type { AppApi } from "../types"
+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/{types/message.ts → app/message/index.ts}

@@ -1,6 +1,6 @@
 import { html } from "@inglorious/web"
 
-import type { MessageType } from "../../types"
+import type { MessageType } from "../../../types"
 
 export const Message: MessageType = {
   click(entity) {

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 { Message } from "../types/message"
+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-end"
+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/{app.tsx → app/index.tsx}

@@ -1,8 +1,7 @@
-import type { AppApi } from "../types"
-import { Message } from "./types/message"
+import { Message } from "./message"
 
 export const App = {
-  render(props: Record<string, unknown> | null, api: AppApi) {
+  render() {
     return (
       <h1>
         {/* @ts-expect-error - JSX components are entity type names, not imports */}

package/templates/ts-jsx/src/{types/message.tsx → app/message/index.tsx}

@@ -1,4 +1,4 @@
-import type { MessageType } from "../../types"
+import type { MessageType } from "../../../types"
 
 export const Message: MessageType = {
   click(entity) {

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 { Message } from "../types/message"
+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-end"
+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/{js-vue/src/app.vue → ts-vue/src/app/index.vue}

@@ -1,5 +1,5 @@
 <script>
-import { Message } from "./types/message.vue"
+import { Message } from "./message/index.vue"
 </script>
 
 <template>

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.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")!,
+)

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

@@ -2,7 +2,7 @@ import { createStore } from "@inglorious/store"
 
 import type { AppEntity, AppState } from "../../types"
 // @ts-expect-error - Handled by @inglorious/vite-plugin-vue
-import { Message } from "../types/message.vue"
+import { Message } from "../app/message/index.vue"
 import { entities } from "./entities"
 import { middlewares } from "./middlewares"
 

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

@@ -1,4 +1,4 @@
-import "./vite-end"
+import "./vite-env"
 
 import type { BaseEntity, EntitiesState, EntityType } from "@inglorious/store"
 import type { Api } from "@inglorious/web"