@inglorious/create-app 1.3.0 → 1.4.1

package/bin/lib/app-jsx.js

@@ -12,14 +12,6 @@ export const extension = (app) => (app.isTypeScript ? "tsx" : "jsx")
 const EXPECT_ERROR =
   "@ts-expect-error - Inglorious components are objects, not functions"
 
-// The comment line before a capitalized tag in .tsx: `{/* */}` among JSX
-// children, `//` inside code.
-function expectError(app, indent, isChild = true) {
-  if (!app.isTypeScript) return ""
-  const comment = isChild ? `{/* ${EXPECT_ERROR} */}` : `// ${EXPECT_ERROR}`
-  return `${indent}${comment}\n`
-}
-
 export function appSource(app, { pages, navIcons }) {
   const imports = []
   if (navIcons) {
@@ -69,6 +61,105 @@ ${shell}
 `
 }
 
+export function homeSource(app, { showcase }) {
+  const imports = ['import { Message } from "../types/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"')
+
+  const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
+  const icons = showcase.length
+    ? `
+        <p className="app-icons">
+${showcase
+  .map(
+    (icon) =>
+      `${expectError(app, "          ")}          <Icon icon={${icon.name}} size="lg" label="${icon.label}" />`,
+  )
+  .join("\n")}
+        </p>`
+    : ""
+
+  return `${importBlock(imports)}
+
+export const Home = {
+  render() {
+    return (
+      <>
+        <h1>${text("home.title", "Welcome")}</h1>
+        <p>
+${expectError(app, "          ")}          <Message entityId="message1" />, <Message entityId="message2" />,{" "}
+${expectError(app, "          ")}          <Message entityId="message3" />!
+        </p>
+        <p>${text("home.hint", "Click a greeting to shout it.")}</p>${icons}
+      </>
+    )
+  },
+}
+`
+}
+
+export function aboutSource(app) {
+  const head = app.i18n ? 'import { t } from "../i18n"\n\n' : ""
+  const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
+
+  return `${head}export const About = {
+  render() {
+    return (
+      <>
+        <h1>${text("about.title", "About")}</h1>
+        <p>${text("about.body", "A page of its own, at its own address.")}</p>
+      </>
+    )
+  },
+}
+`
+}
+
+export function messageSource(app) {
+  const imports = []
+  if (app.isTypeScript) {
+    imports.push('import type { MessageType } from "../../types"')
+  }
+  if (app.i18n) imports.push('import { t } from "../i18n"')
+  const greeting = app.i18n ? '{t("message.hello", { who })}' : "Hello {who}"
+  const annotation = app.isTypeScript ? ": MessageType" : ""
+
+  const span = app.i18n
+    ? `      <span onClick={() => api.notify(\`#\${entity.id}:click\`)}>
+        ${greeting}
+      </span>`
+    : `      <span onClick={() => api.notify(\`#\${entity.id}:click\`)}>${greeting}</span>`
+
+  const head = imports.length ? `${importBlock(imports)}\n\n` : ""
+
+  return `${head}export const Message${annotation} = {
+  click(entity) {
+    entity.isUpperCase = !entity.isUpperCase
+  },
+
+  render(entity, api) {
+    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
+    return (
+${span}
+    )
+  },
+}
+`
+}
+
+// The comment line before a capitalized tag in .tsx: `{/* */}` among JSX
+// children, `//` inside code.
+function expectError(app, indent, isChild = true) {
+  if (!app.isTypeScript) return ""
+  const comment = isChild ? `{/* ${EXPECT_ERROR} */}` : `// ${EXPECT_ERROR}`
+  return `${indent}${comment}\n`
+}
+
 // A callback's parameter. The components' props are not typed in .tsx, so
 // TypeScript cannot infer it.
 function typed(app, name, type) {
@@ -185,96 +276,3 @@ ${nav.join("\n")}
         </header>
         <main>{${content}}</main>`
 }
-
-export function homeSource(app, { showcase }) {
-  const imports = ['import { Message } from "../types/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"')
-
-  const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
-  const icons = showcase.length
-    ? `
-        <p className="app-icons">
-${showcase
-  .map(
-    (icon) =>
-      `${expectError(app, "          ")}          <Icon icon={${icon.name}} size="lg" label="${icon.label}" />`,
-  )
-  .join("\n")}
-        </p>`
-    : ""
-
-  return `${importBlock(imports)}
-
-export const Home = {
-  render() {
-    return (
-      <>
-        <h1>${text("home.title", "Welcome")}</h1>
-        <p>
-${expectError(app, "          ")}          <Message entityId="message1" />, <Message entityId="message2" />,{" "}
-${expectError(app, "          ")}          <Message entityId="message3" />!
-        </p>
-        <p>${text("home.hint", "Click a greeting to shout it.")}</p>${icons}
-      </>
-    )
-  },
-}
-`
-}
-
-export function aboutSource(app) {
-  const head = app.i18n ? 'import { t } from "../i18n"\n\n' : ""
-  const text = (key, fallback) => (app.i18n ? `{t("${key}")}` : fallback)
-
-  return `${head}export const About = {
-  render() {
-    return (
-      <>
-        <h1>${text("about.title", "About")}</h1>
-        <p>${text("about.body", "A page of its own, at its own address.")}</p>
-      </>
-    )
-  },
-}
-`
-}
-
-export function messageSource(app) {
-  const imports = []
-  if (app.isTypeScript) {
-    imports.push('import type { MessageType } from "../../types"')
-  }
-  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 span = app.i18n
-    ? `      <span onClick={() => api.notify(\`#\${entity.id}:click\`)}>
-        ${greeting}
-      </span>`
-    : `      <span onClick={() => api.notify(\`#\${entity.id}:click\`)}>${greeting}</span>`
-
-  const head = imports.length ? `${importBlock(imports)}\n\n` : ""
-
-  return `${head}${declaration}
-  click(entity) {
-    entity.isUpperCase = !entity.isUpperCase
-  },
-
-  render(entity, api) {
-    const who = entity.isUpperCase ? entity.who.toUpperCase() : entity.who
-    return (
-${span}
-    )
-  },
-}
-`
-}

package/bin/lib/app-lit.js

@@ -64,70 +64,6 @@ export function renderLocals(app) {
   return locals.length ? `${locals.join("\n")}\n\n` : ""
 }
 
-function uiShell(app, { label, pages, content }) {
-  const nav = []
-  if (app.links) {
-    nav.push(
-      ...pages.map(
-        (page) =>
-          `Link.render({ href: "${page.path}", children: ${label(page.key, page.text)} })`,
-      ),
-    )
-  }
-  if (app.i18n) {
-    nav.push(`Select.render({
-                value: i18n.locale,
-                options: i18n.languages,
-                size: "sm",
-                ariaLabel: t("language"),
-                onChange: (locale) => api.notify("#i18n:localeChange", locale),
-              })`)
-  }
-
-  const trailing = nav.length
-    ? `
-          trailing: html\`<nav class="app-nav">
-            \${[
-              ${nav.join(",\n              ")},
-            ]}
-          </nav>\`,`
-    : ""
-
-  const header = `      <header${app.mobile ? ' class="pt-safe"' : ""}>
-        \${AppBar.render({
-          title: "${app.projectName}",${trailing}
-        })}
-      </header>
-      <main>
-        \${Container.render({ maxWidth: "md", children: ${content} })}
-      </main>`
-
-  if (!app.tabs) return header
-
-  const actions = pages.map(
-    (page) => `            {
-              value: "${page.path}",
-              label: ${label(page.key, page.text)},${
-                page.icon
-                  ? `
-              icon: Icon.render({ icon: ${page.icon.name}, size: "lg" }),`
-                  : ""
-              }
-            },`,
-  )
-
-  return `${header}
-      <footer class="pb-safe">
-        \${BottomNavigation.render({
-          value: router.path,
-          actions: [
-${actions.join("\n")}
-          ],
-          onChange: (path) => api.notify("#router:navigate", path),
-        })}
-      </footer>`
-}
-
 // The native language picker's change handler, laid out as Prettier would at
 // `indent`. TypeScript has to be told what the event's target is.
 export function selectChange(app, indent) {
@@ -142,42 +78,6 @@ ${indent}    (event.target as HTMLSelectElement).value,
 ${indent}  )`
 }
 
-function plainShell(app, { label, pages, content }) {
-  const nav = app.routing
-    ? pages.map(
-        (page) =>
-          `          <a href="${page.path}">\${${label(page.key, page.text)}}</a>`,
-      )
-    : []
-  if (app.i18n) {
-    nav.push(`          <select
-            aria-label=\${t("language")}
-            @change=\${${selectChange(app, "            ")}}
-          >
-            \${i18n.languages${app.isTypeScript ? "?." : "."}map(
-              (language) =>
-                html\`<option
-                  value=\${language.value}
-                  ?selected=\${language.value === i18n.locale}
-                >
-                  \${language.label}
-                </option>\`,
-            )}
-          </select>`)
-  }
-  const navBlock = nav.length
-    ? `
-        <nav class="app-nav">
-${nav.join("\n")}
-        </nav>`
-    : ""
-
-  return `      <header>
-        <strong>${app.projectName}</strong>${navBlock}
-      </header>
-      <main>\${${content}}</main>`
-}
-
 export function homeSource(app, { showcase }) {
   const imports = ['import { html } from "@inglorious/web"']
   for (const icon of showcase) {
@@ -187,7 +87,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 +107,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 +151,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
   },
@@ -273,3 +169,103 @@ ${declaration}
 }
 `
 }
+
+function uiShell(app, { label, pages, content }) {
+  const nav = []
+  if (app.links) {
+    nav.push(
+      ...pages.map(
+        (page) =>
+          `Link.render({ href: "${page.path}", children: ${label(page.key, page.text)} })`,
+      ),
+    )
+  }
+  if (app.i18n) {
+    nav.push(`Select.render({
+                value: i18n.locale,
+                options: i18n.languages,
+                size: "sm",
+                ariaLabel: t("language"),
+                onChange: (locale) => api.notify("#i18n:localeChange", locale),
+              })`)
+  }
+
+  const trailing = nav.length
+    ? `
+          trailing: html\`<nav class="app-nav">
+            \${[
+              ${nav.join(",\n              ")},
+            ]}
+          </nav>\`,`
+    : ""
+
+  const header = `      <header${app.mobile ? ' class="pt-safe"' : ""}>
+        \${AppBar.render({
+          title: "${app.projectName}",${trailing}
+        })}
+      </header>
+      <main>
+        \${Container.render({ maxWidth: "md", children: ${content} })}
+      </main>`
+
+  if (!app.tabs) return header
+
+  const actions = pages.map(
+    (page) => `            {
+              value: "${page.path}",
+              label: ${label(page.key, page.text)},${
+                page.icon
+                  ? `
+              icon: Icon.render({ icon: ${page.icon.name}, size: "lg" }),`
+                  : ""
+              }
+            },`,
+  )
+
+  return `${header}
+      <footer class="pb-safe">
+        \${BottomNavigation.render({
+          value: router.path,
+          actions: [
+${actions.join("\n")}
+          ],
+          onChange: (path) => api.notify("#router:navigate", path),
+        })}
+      </footer>`
+}
+
+function plainShell(app, { label, pages, content }) {
+  const nav = app.routing
+    ? pages.map(
+        (page) =>
+          `          <a href="${page.path}">\${${label(page.key, page.text)}}</a>`,
+      )
+    : []
+  if (app.i18n) {
+    nav.push(`          <select
+            aria-label=\${t("language")}
+            @change=\${${selectChange(app, "            ")}}
+          >
+            \${i18n.languages${app.isTypeScript ? "?." : "."}map(
+              (language) =>
+                html\`<option
+                  value=\${language.value}
+                  ?selected=\${language.value === i18n.locale}
+                >
+                  \${language.label}
+                </option>\`,
+            )}
+          </select>`)
+  }
+  const navBlock = nav.length
+    ? `
+        <nav class="app-nav">
+${nav.join("\n")}
+        </nav>`
+    : ""
+
+  return `      <header>
+        <strong>${app.projectName}</strong>${navBlock}
+      </header>
+      <main>\${${content}}</main>`
+}

package/bin/lib/app-vue.js

@@ -51,6 +51,77 @@ ${template}
 `
 }
 
+export function homeSource(app, { showcase }) {
+  const imports = ['import { Message } from "../types/message.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"')
+
+  const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
+  const icons = showcase.length
+    ? `
+  <p class="app-icons">
+${showcase
+  .map(
+    (icon) =>
+      `    <Icon :icon="${icon.name}" size="lg" label="${icon.label}" />`,
+  )
+  .join("\n")}
+  </p>`
+    : ""
+
+  return `${script(imports, [])}<template>
+  <h1>${text("home.title", "Welcome")}</h1>
+  <p>
+    <Message v-bind="message1" />, <Message v-bind="message2" />,
+    <Message v-bind="message3" />!
+  </p>
+  <p>${text("home.hint", "Click a greeting to shout it.")}</p>${icons}
+</template>
+`
+}
+
+export function aboutSource(app) {
+  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
+  const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
+  return `${script(imports, [])}<template>
+  <h1>${text("about.title", "About")}</h1>
+  <p>${text("about.body", "A page of its own, at its own address.")}</p>
+</template>
+`
+}
+
+export function messageSource(app) {
+  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
+  const who = "entity.isUpperCase ? entity.who.toUpperCase() : entity.who"
+  const span = app.i18n
+    ? `  <span @click="click">{{
+    t("message.hello", {
+      who: ${who},
+    })
+  }}</span>`
+    : `  <span @click="click"
+    >Hello
+    {{ ${who} }}</span
+  >`
+  const scriptBody = [
+    ...(imports.length ? [importBlock(imports), ""] : []),
+    "const click = (entity) => (entity.isUpperCase = !entity.isUpperCase)",
+  ]
+  return `<script>
+${scriptBody.join("\n")}
+</script>
+
+<template>
+${span}
+</template>
+`
+}
+
 function script(imports, locals) {
   if (!imports.length && !locals.length) return ""
   const parts = []
@@ -166,74 +237,3 @@ ${nav.join("\n")}
   </header>
   <main>{{ ${content} }}</main>`
 }
-
-export function homeSource(app, { showcase }) {
-  const imports = ['import { Message } from "../types/message.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"')
-
-  const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
-  const icons = showcase.length
-    ? `
-  <p class="app-icons">
-${showcase
-  .map(
-    (icon) =>
-      `    <Icon :icon="${icon.name}" size="lg" label="${icon.label}" />`,
-  )
-  .join("\n")}
-  </p>`
-    : ""
-
-  return `${script(imports, [])}<template>
-  <h1>${text("home.title", "Welcome")}</h1>
-  <p>
-    <Message v-bind="message1" />, <Message v-bind="message2" />,
-    <Message v-bind="message3" />!
-  </p>
-  <p>${text("home.hint", "Click a greeting to shout it.")}</p>${icons}
-</template>
-`
-}
-
-export function aboutSource(app) {
-  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
-  const text = (key, fallback) => (app.i18n ? `{{ t("${key}") }}` : fallback)
-  return `${script(imports, [])}<template>
-  <h1>${text("about.title", "About")}</h1>
-  <p>${text("about.body", "A page of its own, at its own address.")}</p>
-</template>
-`
-}
-
-export function messageSource(app) {
-  const imports = app.i18n ? ['import { t } from "../i18n"'] : []
-  const who = "entity.isUpperCase ? entity.who.toUpperCase() : entity.who"
-  const span = app.i18n
-    ? `  <span @click="click">{{
-    t("message.hello", {
-      who: ${who},
-    })
-  }}</span>`
-    : `  <span @click="click"
-    >Hello
-    {{ ${who} }}</span
-  >`
-  const scriptBody = [
-    ...(imports.length ? [importBlock(imports), ""] : []),
-    "const click = (entity) => (entity.isUpperCase = !entity.isUpperCase)",
-  ]
-  return `<script>
-${scriptBody.join("\n")}
-</script>
-
-<template>
-${span}
-</template>
-`
-}

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/mobile.js

@@ -34,21 +34,6 @@ export function addMobileSupport(targetDir, pkg, projectName) {
   appendMobileSetupToReadme(targetDir)
 }
 
-// A TypeScript template type-checks and lints its config files through
-// tsconfig.node.json, so a new one has to be listed there. Edited as text, so
-// the `include` line keeps the one-line layout Prettier gives it.
-function includeInNodeProject(targetDir, file) {
-  const tsconfigPath = path.join(targetDir, "tsconfig.node.json")
-  if (!fs.existsSync(tsconfigPath)) return
-
-  const tsconfig = fs.readFileSync(tsconfigPath, "utf-8")
-  if (tsconfig.includes(`"${file}"`)) return
-  fs.writeFileSync(
-    tsconfigPath,
-    tsconfig.replace(/("include": \[[^\]]*)\]/, `$1, "${file}"]`),
-  )
-}
-
 export function appendMobileSetupToReadme(targetDir) {
   const readmePath = path.join(targetDir, "README.md")
   if (!fs.existsSync(readmePath)) {
@@ -138,3 +123,18 @@ const config: CapacitorConfig = {
 export default config
 `
 }
+
+// A TypeScript template type-checks and lints its config files through
+// tsconfig.node.json, so a new one has to be listed there. Edited as text, so
+// the `include` line keeps the one-line layout Prettier gives it.
+function includeInNodeProject(targetDir, file) {
+  const tsconfigPath = path.join(targetDir, "tsconfig.node.json")
+  if (!fs.existsSync(tsconfigPath)) return
+
+  const tsconfig = fs.readFileSync(tsconfigPath, "utf-8")
+  if (tsconfig.includes(`"${file}"`)) return
+  fs.writeFileSync(
+    tsconfigPath,
+    tsconfig.replace(/("include": \[[^\]]*)\]/, `$1, "${file}"]`),
+  )
+}

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.1",
   "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>