create-vite-hyperapp 1.3.0 → 2.0.0

package/templates/ts-html-ssr/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "server.ts"]
+}

package/templates/ts-html-ssr/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite"
+import hyperapp from "vite-plugin-hyperapp"
+import { fileURLToPath } from "node:url"
+
+export default defineConfig({
+  base: process.env.BASE || "/",
+  plugins: [hyperapp()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})

package/templates/ts-jsx-cli/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECTNAME__</title>
+  </head>
+  <body>
+    <main id="app"></main>
+    <script type="module" src="/src/run.ts"></script>
+  </body>
+</html>

package/templates/ts-jsx-cli/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "__PROJECTNAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vite-plugin-hyperapp": "^2.0.1"
+  },
+  "dependencies": {
+    "@hyperapp/html": "^2.0.0",
+    "@hyperapp/svg": "^2.0.0",
+    "hyperapp": "^2.0.22"
+  }
+}

package/templates/ts-jsx-cli/src/app/counter.tsx

@@ -0,0 +1,14 @@
+import type { Action } from "hyperapp"
+
+type CounterProps<S> = {
+  clicks: number
+  onclick: Action<S>
+}
+
+const Counter = <S,>({ clicks, onclick }: CounterProps<S>) => (
+  <div class="card">
+    <button onclick={onclick}>Clicks: {clicks}</button>
+  </div>
+)
+
+export default Counter

package/templates/ts-jsx-cli/src/app/logos.tsx

@@ -0,0 +1,19 @@
+import viteLogo from "@/assets/vite.svg"
+import typescriptLogo from "@/assets/typescript.svg"
+import hyperappLogo from "@/assets/hyperapp.svg"
+
+const Logos = () => (
+  <>
+    <a href="https://vitejs.dev">
+      <img src={viteLogo} class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://github.com/jorgebucaran/hyperapp">
+      <img src={hyperappLogo} class="logo" alt="Hyperapp logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/">
+      <img src={typescriptLogo} class="logo" alt="TypeScript logo" />
+    </a>
+  </>
+)
+
+export default Logos

package/templates/ts-jsx-cli/src/app/main.tsx

@@ -0,0 +1,26 @@
+import "./style.css"
+import type { Action } from "hyperapp"
+import Logos from "./logos"
+import Counter from "./counter"
+
+type State = { counter: number }
+
+export const init: Action<State> = () => ({
+  counter: 0,
+})
+
+const HandleClick: Action<State> = (state: State) => ({
+  ...state,
+  counter: state.counter + 1,
+})
+
+export const view = (state: State) => (
+  <main id="app">
+    <h1>Vite + Hyperapp + TypeScript</h1>
+    <Logos />
+    <Counter clicks={state.counter} onclick={HandleClick} />
+    <p class="read-the-docs">
+      Click on the Vite, Hyperapp & TypeScript logos to learn more
+    </p>
+  </main>
+)

package/templates/ts-jsx-cli/src/assets/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/templates/ts-jsx-cli/src/run.ts

@@ -0,0 +1,5 @@
+import { app } from "hyperapp"
+import { init, view } from "./app/main"
+const node = document.querySelector("#app")
+if (!node) throw new Error("mountpoint not found")
+app({ init, view, node })

package/templates/{template-ts → ts-jsx-cli}/tsconfig.json

@@ -4,10 +4,14 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -20,9 +24,8 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Necessary for tsx to work with vite-plugin-hyperapp*/
-    "jsx": "preserve",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "jsxFragment"
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
   },
   "include": ["src"]
 }

package/templates/ts-jsx-cli/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite"
+import hyperapp from "vite-plugin-hyperapp"
+import { fileURLToPath } from "node:url"
+
+export default defineConfig({
+  plugins: [hyperapp()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})

package/templates/ts-jsx-ssr/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECTNAME__</title>
+  </head>
+  <body>
+    <!--ssr-outlet-->
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>

package/templates/ts-jsx-ssr/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "__PROJECTNAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server.ts",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
+    "build": "tsc && npm run build:client && npm run build:server",
+    "preview": "NODE_ENV=production node server.ts"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.8.1",
+    "@types/express": "^4.17.25",
+    "@types/node": "^22.20.5",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "express": "^4.19.2",
+    "hyperapp": "^2.0.22",
+    "sirv": "^2.0.4",
+    "vite-plugin-hyperapp": "^2.0.1"
+  }
+}

package/templates/ts-jsx-ssr/server.ts

@@ -0,0 +1,63 @@
+/*
+---------------------------------
+Cribbed to large extent from template-ssr-solid/server.js 
+---------------------------------
+*/
+import fs from "node:fs/promises"
+import express from "express"
+import type { ViteDevServer } from "vite"
+
+const isProduction = process.env.NODE_ENV === "production"
+const port = process.env.PORT || 5173
+const base = process.env.BASE || "/"
+
+async function createServer() {
+  const app = express()
+
+  let vite: ViteDevServer | undefined
+  if (!isProduction) {
+    const { createServer } = await import("vite")
+    vite = await createServer({
+      server: { middlewareMode: true },
+      appType: "custom",
+    })
+    app.use(vite.middlewares)
+  } else {
+    const compression = (await import("compression")).default
+    const sirv = (await import("sirv")).default
+    app.use(compression())
+    app.use(base, sirv("./dist/client", { extensions: [] }))
+  }
+
+  app.use("*", async (req, res, next) => {
+    const url = req.originalUrl
+    if (!url.startsWith(base)) return next()
+    try {
+      let template
+      let render: () => string
+      if (!isProduction) {
+        if (!vite) throw new Error("Vite dev server is not initialized")
+        // Always read fresh template in development
+        template = await fs.readFile("./index.html", "utf-8")
+        template = await vite.transformIndexHtml(url, template)
+        render = (await vite.ssrLoadModule("/src/entry-server.ts")).render
+      } else {
+        template = await fs.readFile("./dist/client/index.html", "utf-8")
+        const serverEntry = "./dist/server/entry-server.js"
+        render = (await import(serverEntry)).render
+      }
+      const html = template.replace(`<!--ssr-outlet-->`, () => render())
+      res.status(200).set({ "Content-Type": "text/html" }).end(html)
+    } catch (e) {
+      if (e instanceof Error) vite?.ssrFixStacktrace(e)
+      console.error(e)
+      res.status(500).end()
+    }
+  })
+
+  app.listen(port, () => {
+    console.log(`Server started at http://localhost:${port}`)
+  })
+}
+
+createServer()

package/templates/ts-jsx-ssr/src/app/counter.tsx

@@ -0,0 +1,14 @@
+import type { Action } from "hyperapp"
+
+type CounterProps<S> = {
+  clicks: number
+  onclick: Action<S>
+}
+
+const Counter = <S,>({ clicks, onclick }: CounterProps<S>) => (
+  <div class="card">
+    <button onclick={onclick}>Clicks: {clicks}</button>
+  </div>
+)
+
+export default Counter

package/templates/ts-jsx-ssr/src/app/logos.tsx

@@ -0,0 +1,19 @@
+import viteLogo from "@/assets/vite.svg"
+import typescriptLogo from "@/assets/typescript.svg"
+import hyperappLogo from "@/assets/hyperapp.svg"
+
+const Logos = () => (
+  <>
+    <a href="https://vitejs.dev">
+      <img src={viteLogo} class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://github.com/jorgebucaran/hyperapp">
+      <img src={hyperappLogo} class="logo" alt="Hyperapp logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/">
+      <img src={typescriptLogo} class="logo" alt="TypeScript logo" />
+    </a>
+  </>
+)
+
+export default Logos

package/templates/ts-jsx-ssr/src/app/main.tsx

@@ -0,0 +1,26 @@
+import "./style.css"
+import type { Action } from "hyperapp"
+import Logos from "./logos"
+import Counter from "./counter"
+
+type State = { counter: number }
+
+export const init: Action<State> = () => ({
+  counter: 0,
+})
+
+const HandleClick: Action<State> = (state: State) => ({
+  ...state,
+  counter: state.counter + 1,
+})
+
+export const view = (state: State) => (
+  <main id="app">
+    <h1>Vite (SSR) + Hyperapp + TypeScript</h1>
+    <Logos />
+    <Counter clicks={state.counter} onclick={HandleClick} />
+    <p class="read-the-docs">
+      Click on the Vite, Hyperapp & TypeScript logos to learn more
+    </p>
+  </main>
+)

package/templates/ts-jsx-ssr/src/assets/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/templates/ts-jsx-ssr/src/entry-client.ts

@@ -0,0 +1,5 @@
+import { app } from "hyperapp"
+import { init, view } from "./app/main"
+const node = document.querySelector("#app")
+if (!node) throw new Error("mountpoint not found")
+app({ init, view, node })

package/templates/ts-jsx-ssr/src/entry-server.ts

@@ -0,0 +1,5 @@
+import { init, view } from "./app/main"
+import { renderToString } from "vite-plugin-hyperapp/ssr"
+export function render() {
+  return renderToString({ init, view })
+}

package/templates/{template-ts-ssr → ts-jsx-ssr}/tsconfig.json

@@ -4,10 +4,14 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -20,9 +24,8 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Necessary for tsx to work with vite-plugin-hyperapp*/
-    "jsx": "preserve",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "jsxFragment"
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
   },
-  "include": ["src"]
+  "include": ["src", "server.ts"]
 }

package/templates/ts-jsx-ssr/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite"
+import hyperapp from "vite-plugin-hyperapp"
+import { fileURLToPath } from "node:url"
+
+export default defineConfig({
+  base: process.env.BASE || "/",
+  plugins: [hyperapp()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})

package/templates/ts-plain-cli/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECTNAME__</title>
+  </head>
+  <body>
+    <main id="app"></main>
+    <script type="module" src="/src/run.ts"></script>
+  </body>
+</html>

package/templates/ts-plain-cli/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "__PROJECTNAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vite-plugin-hyperapp": "^2.0.1"
+  },
+  "dependencies": {
+    "@hyperapp/html": "^2.0.0",
+    "@hyperapp/svg": "^2.0.0",
+    "hyperapp": "^2.0.22"
+  }
+}

package/templates/ts-plain-cli/src/app/counter.ts

@@ -0,0 +1,13 @@
+import { h, text, type Action } from "hyperapp"
+
+type CounterProps<S> = {
+  clicks: number
+  onclick: Action<S>
+}
+
+const Counter = <S>({ clicks, onclick }: CounterProps<S>) =>
+  h("div", { class: "card" }, [
+    h("button", { onclick }, text("Clicks: " + clicks)),
+  ])
+
+export default Counter

package/templates/ts-plain-cli/src/app/logos.ts

@@ -0,0 +1,30 @@
+import { h } from "hyperapp"
+import viteLogo from "@/assets/vite.svg"
+import typescriptLogo from "@/assets/typescript.svg"
+import hyperappLogo from "@/assets/hyperapp.svg"
+
+const Logos = () => [
+  h("a", { href: "https://vitejs.dev" }, [
+    h("img", {
+      src: viteLogo,
+      class: "logo",
+      alt: "Vite logo",
+    }),
+  ]),
+  h("a", { href: "https://github.com/jorgebucaran/hyperapp" }, [
+    h("img", {
+      src: hyperappLogo,
+      class: "logo",
+      alt: "Hyperapp logo",
+    }),
+  ]),
+  h("a", { href: "https://www.typescriptlang.org/" }, [
+    h("img", {
+      src: typescriptLogo,
+      class: "logo",
+      alt: "TypeScript logo",
+    }),
+  ]),
+]
+
+export default Logos

package/templates/ts-plain-cli/src/app/main.ts

@@ -0,0 +1,27 @@
+import "./style.css"
+import { h, text, type Action } from "hyperapp"
+import Counter from "./counter"
+import Logos from "./logos"
+
+type State = { counter: number }
+
+export const init: Action<State> = () => ({
+  counter: 0,
+})
+
+const HandleClick: Action<State> = state => ({
+  ...state,
+  counter: state.counter + 1,
+})
+
+export const view = (state: State) =>
+  h("main", { id: "app" }, [
+    h("h1", {}, text("Vite + Hyperapp + TypeScript")),
+    ...Logos(),
+    Counter({ clicks: state.counter, onclick: HandleClick }),
+    h(
+      "p",
+      { class: "read-the-docs" },
+      text("Click on the Vite, Hyperapp & TypeScript logos to learn more"),
+    ),
+  ])

package/templates/ts-plain-cli/src/assets/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/templates/ts-plain-cli/src/run.ts

@@ -0,0 +1,5 @@
+import { app } from "hyperapp"
+import { init, view } from "./app/main"
+const node = document.querySelector("#app")
+if (!node) throw new Error("mountpoint not found")
+app({ init, view, node })

package/templates/ts-plain-cli/src/types/hyperapp-h.d.ts

@@ -0,0 +1,37 @@
+// Action-free nodes can be used by an app with any state type.
+type PassiveProps = import("hyperapp").Props<any> & {
+  [K in keyof import("hyperapp").EventActions<any>]?: never
+}
+
+type PassiveChild = boolean | null | undefined | import("hyperapp").TextVNode | PassiveVNode
+type PassiveChildren = PassiveChild | readonly PassiveChild[]
+
+type PassiveVNode = Omit<
+  import("hyperapp").ElementVNode<any>,
+  "props" | "children" | "events" | "tag" | "memo"
+> & {
+  readonly props: PassiveProps
+  readonly children: readonly PassiveChild[]
+  readonly tag: string
+  events?: never
+  memo?: never
+}
+
+type HyperappChildren<S> =
+  | import("hyperapp").MaybeVNode<S>
+  | PassiveChild
+  | readonly (import("hyperapp").MaybeVNode<S> | PassiveChild)[]
+
+declare module "hyperapp" {
+  function h<T extends string>(
+    tag: NonEmptyString<T>,
+    props: PassiveProps,
+    children?: PassiveChildren
+  ): PassiveVNode
+
+  function h<S, C = unknown, T extends string = string>(
+    tag: NonEmptyString<T>,
+    props: CustomPayloads<S, C> & Props<S>,
+    children?: HyperappChildren<S>
+  ): ElementVNode<S>
+}

package/templates/ts-plain-cli/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/templates/ts-plain-cli/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite"
+import hyperapp from "vite-plugin-hyperapp"
+import { fileURLToPath } from "node:url"
+
+export default defineConfig({
+  plugins: [hyperapp()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+})

package/templates/ts-plain-ssr/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECTNAME__</title>
+  </head>
+  <body>
+    <!--ssr-outlet-->
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>