create-vite-hyperapp 1.3.0 → 2.0.1

package/templates/tj-html-ssr/src/types/hyperapp-html.d.ts

@@ -0,0 +1,101 @@
+declare module "@hyperapp/html" {
+  export const a: HyperappHtmlTag
+  export const b: HyperappHtmlTag
+  export const i: HyperappHtmlTag
+  export const p: HyperappHtmlTag
+  export const q: HyperappHtmlTag
+  export const s: HyperappHtmlTag
+  export const br: HyperappHtmlTag
+  export const dd: HyperappHtmlTag
+  export const dl: HyperappHtmlTag
+  export const dt: HyperappHtmlTag
+  export const em: HyperappHtmlTag
+  export const h1: HyperappHtmlTag
+  export const h2: HyperappHtmlTag
+  export const h3: HyperappHtmlTag
+  export const h4: HyperappHtmlTag
+  export const h5: HyperappHtmlTag
+  export const h6: HyperappHtmlTag
+  export const hr: HyperappHtmlTag
+  export const li: HyperappHtmlTag
+  export const ol: HyperappHtmlTag
+  export const rp: HyperappHtmlTag
+  export const rt: HyperappHtmlTag
+  export const td: HyperappHtmlTag
+  export const th: HyperappHtmlTag
+  export const tr: HyperappHtmlTag
+  export const ul: HyperappHtmlTag
+  export const bdi: HyperappHtmlTag
+  export const bdo: HyperappHtmlTag
+  export const col: HyperappHtmlTag
+  export const del: HyperappHtmlTag
+  export const dfn: HyperappHtmlTag
+  export const div: HyperappHtmlTag
+  export const img: HyperappHtmlTag
+  export const ins: HyperappHtmlTag
+  export const kbd: HyperappHtmlTag
+  export const map: HyperappHtmlTag
+  export const nav: HyperappHtmlTag
+  export const pre: HyperappHtmlTag
+  export const rtc: HyperappHtmlTag
+  export const sub: HyperappHtmlTag
+  export const sup: HyperappHtmlTag
+  export const wbr: HyperappHtmlTag
+  export const abbr: HyperappHtmlTag
+  export const area: HyperappHtmlTag
+  export const cite: HyperappHtmlTag
+  export const code: HyperappHtmlTag
+  export const data: HyperappHtmlTag
+  export const form: HyperappHtmlTag
+  export const main: HyperappHtmlTag
+  export const mark: HyperappHtmlTag
+  export const ruby: HyperappHtmlTag
+  export const samp: HyperappHtmlTag
+  export const span: HyperappHtmlTag
+  export const time: HyperappHtmlTag
+  export const aside: HyperappHtmlTag
+  export const audio: HyperappHtmlTag
+  export const input: HyperappHtmlTag
+  export const label: HyperappHtmlTag
+  export const meter: HyperappHtmlTag
+  export const param: HyperappHtmlTag
+  export const small: HyperappHtmlTag
+  export const table: HyperappHtmlTag
+  export const tbody: HyperappHtmlTag
+  export const tfoot: HyperappHtmlTag
+  export const thead: HyperappHtmlTag
+  export const track: HyperappHtmlTag
+  export const video: HyperappHtmlTag
+  export const button: HyperappHtmlTag
+  export const canvas: HyperappHtmlTag
+  export const dialog: HyperappHtmlTag
+  export const figure: HyperappHtmlTag
+  export const footer: HyperappHtmlTag
+  export const header: HyperappHtmlTag
+  export const iframe: HyperappHtmlTag
+  export const legend: HyperappHtmlTag
+  export const object: HyperappHtmlTag
+  export const option: HyperappHtmlTag
+  export const output: HyperappHtmlTag
+  export const select: HyperappHtmlTag
+  export const source: HyperappHtmlTag
+  export const strong: HyperappHtmlTag
+  export const address: HyperappHtmlTag
+  export const article: HyperappHtmlTag
+  export const caption: HyperappHtmlTag
+  export const details: HyperappHtmlTag
+  export const section: HyperappHtmlTag
+  export const summary: HyperappHtmlTag
+  export const picture: HyperappHtmlTag
+  export const colgroup: HyperappHtmlTag
+  export const datalist: HyperappHtmlTag
+  export const fieldset: HyperappHtmlTag
+  export const menuitem: HyperappHtmlTag
+  export const optgroup: HyperappHtmlTag
+  export const progress: HyperappHtmlTag
+  export const textarea: HyperappHtmlTag
+  export const blockquote: HyperappHtmlTag
+  export const figcaption: HyperappHtmlTag
+
+  export { text } from "hyperapp"
+}

package/templates/tj-html-ssr/src/types/hyperapp-svg.d.ts

@@ -0,0 +1,73 @@
+declare module "@hyperapp/svg" {
+  export const a: HyperappTag
+  export const g: HyperappTag
+  export const svg: HyperappTag
+  export const use: HyperappTag
+  export const set: HyperappTag
+  export const line: HyperappTag
+  export const path: HyperappTag
+  export const rect: HyperappTag
+  export const desc: HyperappTag
+  export const defs: HyperappTag
+  export const mask: HyperappTag
+  export const tref: HyperappTag
+  export const font: HyperappTag
+  export const stop: HyperappTag
+  export const view: HyperappTag
+  export const text_: HyperappTag
+  export const image: HyperappTag
+  export const mpath: HyperappTag
+  export const title: HyperappTag
+  export const glyph: HyperappTag
+  export const tspan: HyperappTag
+  export const style: HyperappTag
+  export const circle: HyperappTag
+  export const marker: HyperappTag
+  export const symbol: HyperappTag
+  export const feTile: HyperappTag
+  export const cursor: HyperappTag
+  export const filter: HyperappTag
+  export const switch_: HyperappTag
+  export const ellipse: HyperappTag
+  export const polygon: HyperappTag
+  export const animate: HyperappTag
+  export const pattern: HyperappTag
+  export const feBlend: HyperappTag
+  export const feFlood: HyperappTag
+  export const feFuncA: HyperappTag
+  export const feFuncB: HyperappTag
+  export const feFuncG: HyperappTag
+  export const feFuncR: HyperappTag
+  export const feImage: HyperappTag
+  export const feMerge: HyperappTag
+  export const polyline: HyperappTag
+  export const metadata: HyperappTag
+  export const altGlyph: HyperappTag
+  export const glyphRef: HyperappTag
+  export const textPath: HyperappTag
+  export const feOffset: HyperappTag
+  export const clipPath: HyperappTag
+  export const altGlyphDef: HyperappTag
+  export const feComposite: HyperappTag
+  export const feMergeNode: HyperappTag
+  export const feSpotLight: HyperappTag
+  export const animateColor: HyperappTag
+  export const altGlyphItem: HyperappTag
+  export const feMorphology: HyperappTag
+  export const feTurbulence: HyperappTag
+  export const fePointLight: HyperappTag
+  export const colorProfile: HyperappTag
+  export const foreignObject: HyperappTag
+  export const animateMotion: HyperappTag
+  export const feColorMatrix: HyperappTag
+  export const linearGradient: HyperappTag
+  export const radialGradient: HyperappTag
+  export const feGaussianBlur: HyperappTag
+  export const feDistantLight: HyperappTag
+  export const animateTransform: HyperappTag
+  export const feConvolveMatrix: HyperappTag
+  export const feDiffuseLighting: HyperappTag
+  export const feDisplacementMap: HyperappTag
+  export const feSpecularLighting: HyperappTag
+  export const feComponentTransfer: HyperappTag
+}

package/templates/tj-html-ssr/src/types/hyperapp-tags.d.ts

@@ -0,0 +1,34 @@
+// An action-free tree can be embedded in 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)[]
+
+interface HyperappTag {
+  (props: PassiveProps, children?: PassiveChildren): PassiveVNode
+  (children: PassiveChildren): PassiveVNode
+  <S>(props: import("hyperapp").Props<S>, children?: HyperappChildren<S>): import("hyperapp").ElementVNode<S>
+  <S>(children: import("hyperapp").VNode<S> | readonly (import("hyperapp").MaybeVNode<S> | PassiveChild)[]): import("hyperapp").ElementVNode<S>
+}
+
+interface HyperappHtmlTag extends HyperappTag {
+  (): PassiveVNode
+}

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

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

@@ -0,0 +1,31 @@
+{
+  "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,
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

package/templates/tj-jsx-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.4"
+  }
+}

package/templates/tj-jsx-cli/src/app/counter.jsx

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

package/templates/tj-jsx-cli/src/app/logos.jsx

@@ -0,0 +1,15 @@
+import viteLogo from "@/assets/vite.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>
+  </>
+)
+
+export default Logos

package/templates/tj-jsx-cli/src/app/main.jsx

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

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

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

@@ -0,0 +1,33 @@
+{
+  "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,
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
+  },
+  "include": [
+    "src",
+    "server.js"
+  ]
+}

package/templates/tj-jsx-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.4"
+  }
+}

package/templates/tj-jsx-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-jsx-ssr/src/app/counter.jsx

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

package/templates/tj-jsx-ssr/src/app/logos.jsx

@@ -0,0 +1,15 @@
+import viteLogo from "@/assets/vite.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>
+  </>
+)
+
+export default Logos

package/templates/tj-jsx-ssr/src/app/main.jsx

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

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