create-vite-hyperapp 1.2.0 → 2.0.0

package/templates/tj-plain-cli/jsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "vite/client"
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "allowJs": true,
+    "checkJs": true,
+    "maxNodeModuleJsDepth": 0,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ]
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "__PROJECTNAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project jsconfig.json && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "hyperapp": "^2.0.22"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vite-plugin-hyperapp": "^2.0.1"
+  }
+}

package/templates/tj-plain-cli/src/app/counter.js

@@ -0,0 +1,19 @@
+import { h, text } from "hyperapp"
+
+/**
+ * @template S
+ * @typedef CounterProps
+ * @property {number} clicks
+ * @property {Action<S>} onclick
+ */
+
+/**
+ * @template S
+ * @param {CounterProps<S>} props
+ */
+const Counter = ({ clicks, onclick }) =>
+  h("div", { class: "card" }, [
+    h("button", { onclick }, text("Clicks: " + clicks)),
+  ])
+
+export default Counter

package/templates/tj-plain-cli/src/app/logos.js

@@ -0,0 +1,18 @@
+import { h } from "hyperapp"
+import hyperappLogo from "@/assets/hyperapp.svg"
+import viteLogo from "@/assets/vite.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",
+    }),
+  ]),
+]
+
+export default Logos

package/templates/tj-plain-cli/src/app/main.js

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

package/templates/tj-plain-cli/src/run.js

@@ -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/tj-plain-cli/src/types/global.d.ts

@@ -0,0 +1,13 @@
+import {Action as HAAction, Dispatch as HADispatch, Effect as HAEffect, Subscription as HASubscription} from 'hyperapp'
+declare global {
+  
+  // inject useful hyperapp types
+  type Action<S,P=any> = HAAction<S,P>
+  type Dispatch<S> = HADispatch<S>
+  type Effect<S,P=any> = HAEffect<S,P>
+  type Subscription<S, P=any> = HASubscription<S,P>
+  
+  // useful global types for this app
+  type State = {counter: number}
+  type AppAction<P=any> = Action<State, P>
+}

package/templates/tj-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/tj-plain-cli/vite.config.js

@@ -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/tj-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.js"></script>
+  </body>
+</html>

package/templates/tj-plain-ssr/jsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "allowJs": true,
+    "checkJs": true,
+    "maxNodeModuleJsDepth": 0,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src",
+    "server.js"
+  ]
+}

package/templates/tj-plain-ssr/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "__PROJECTNAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server.js",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --outDir dist/server --ssr src/entry-server.js",
+    "build": "tsc --project jsconfig.json && npm run build:client && npm run build:server",
+    "preview": "NODE_ENV=production node server.js"
+  },
+  "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/tj-plain-ssr/server.js

@@ -0,0 +1,63 @@
+/*
+---------------------------------
+Cribbed to large extent from template-ssr-solid/server.js 
+---------------------------------
+*/
+import fs from "node:fs/promises"
+import express from "express"
+
+const isProduction = process.env.NODE_ENV === "production"
+const port = process.env.PORT || 5173
+const base = process.env.BASE || "/"
+
+async function createServer() {
+  const app = express()
+
+  /** @type {import("vite").ViteDevServer | undefined} */
+  let vite
+  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
+      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.js")).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/tj-plain-ssr/src/app/counter.js

@@ -0,0 +1,19 @@
+import { h, text } from "hyperapp"
+
+/**
+ * @template S
+ * @typedef CounterProps
+ * @property {number} clicks
+ * @property {Action<S>} onclick
+ */
+
+/**
+ * @template S
+ * @param {CounterProps<S>} props
+ */
+const Counter = ({ clicks, onclick }) =>
+  h("div", { class: "card" }, [
+    h("button", { onclick }, text("Clicks: " + clicks)),
+  ])
+
+export default Counter

package/templates/tj-plain-ssr/src/app/logos.js

@@ -0,0 +1,18 @@
+import { h } from "hyperapp"
+import hyperappLogo from "@/assets/hyperapp.svg"
+import viteLogo from "@/assets/vite.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",
+    }),
+  ]),
+]
+
+export default Logos

package/templates/tj-plain-ssr/src/app/main.js

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

package/templates/tj-plain-ssr/src/entry-client.js

@@ -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/tj-plain-ssr/src/entry-server.js

@@ -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/tj-plain-ssr/src/types/global.d.ts

@@ -0,0 +1,13 @@
+import {Action as HAAction, Dispatch as HADispatch, Effect as HAEffect, Subscription as HASubscription} from 'hyperapp'
+declare global {
+  
+  // inject useful hyperapp types
+  type Action<S,P=any> = HAAction<S,P>
+  type Dispatch<S> = HADispatch<S>
+  type Effect<S,P=any> = HAEffect<S,P>
+  type Subscription<S, P=any> = HASubscription<S,P>
+  
+  // useful global types for this app
+  type State = {counter: number}
+  type AppAction<P=any> = Action<State, P>
+}

package/templates/tj-plain-ssr/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/tj-plain-ssr/vite.config.js

@@ -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/{template-ts → ts-html-cli}/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Hyperapp + TS</title>
+    <title>__PROJECTNAME__</title>
   </head>
   <body>
-    <div id="app"></div>
+    <main id="app"></main>
     <script type="module" src="/src/run.ts"></script>
   </body>
 </html>

package/templates/ts-html-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-html-cli/src/app/counter.ts

@@ -0,0 +1,12 @@
+import { div, button, text } from "@hyperapp/html"
+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 }, text("Clicks: " + clicks)))
+
+export default Counter

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

@@ -0,0 +1,33 @@
+import { a, img } from "@hyperapp/html"
+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(
+    { href: "https://github.com/jorgebucaran/hyperapp" },
+    img({
+      src: hyperappLogo,
+      class: "logo",
+      alt: "Hyperapp logo",
+    }),
+  ),
+  a(
+    { href: "https://www.typescriptlang.org/" },
+    img({
+      src: typescriptLogo,
+      class: "logo",
+      alt: "TypeScript logo",
+    }),
+  ),
+]
+
+export default Logos

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

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

package/templates/{template-ts → ts-html-cli}/src/run.ts

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