@inglorious/create-app 1.4.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,94 +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 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}
-    )
-  },
-}
-`
-}

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) {
@@ -269,3 +169,103 @@ export const Message${annotation} = {
 }
 `
 }
+
+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/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/package.json

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