create-vite-hyperapp 1.3.0 → 2.0.0

package/templates/js-html-ssr/src/app/main.js

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

package/templates/{template-ssr → js-html-ssr}/src/entry-client.js

@@ -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 })

package/templates/js-html-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/js-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/js-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/js-jsx-cli/jsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

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

@@ -1,5 +1,5 @@
 {
-  "name": "demo",
+  "name": "__PROJECTNAME__",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -12,7 +12,7 @@
     "hyperapp": "^2.0.22"
   },
   "devDependencies": {
-    "vite": "^4.5.14",
-    "vite-plugin-hyperapp": "^1.3.0"
+    "vite": "^8.3.4",
+    "vite-plugin-hyperapp": "^2.0.1"
   }
 }

package/templates/js-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/{template/src → js-jsx-cli/src/app}/main.jsx

@@ -1,6 +1,5 @@
 import "./style.css"
-import hyperappLogo from "./hyperapp.svg"
-import viteLogo from "/vite.svg"
+import Logos from "./logos"
 import Counter from "./counter"
 
 export const init = () => ({
@@ -12,17 +11,6 @@ const HandleClick = state => ({
   counter: state.counter + 1,
 })
 
-const Logos = () => (
-  <>
-    <a href="https://vitejs.dev">
-      <img src={viteLogo} class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://hyperapp.dev/">
-      <img src={hyperappLogo} class="logo vanilla" alt="Hyperapp logo" />
-    </a>
-  </>
-)
-
 export const view = state => (
   <main id="app">
     <h1>Vite + Hyperapp</h1>

package/templates/js-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/js-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/js-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/js-jsx-ssr/jsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "vite-plugin-hyperapp/jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

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

@@ -1,23 +1,23 @@
 {
-  "name": "demo",
+  "name": "__PROJECTNAME__",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node server",
+    "dev": "node server.js",
     "build:client": "vite build --outDir dist/client",
     "build:server": "vite build --outDir dist/server --ssr src/entry-server.js",
     "build": "npm run build:client && npm run build:server",
-    "preview": "NODE_ENV=production node server"
+    "preview": "NODE_ENV=production node server.js"
   },
   "devDependencies": {
-    "vite": "^4.5.14",
-    "vite-plugin-hyperapp": "^1.3.0"
+    "vite": "^8.3.4"
   },
   "dependencies": {
-    "hyperapp": "^2.0.22",
     "compression": "^1.7.4",
     "express": "^4.19.2",
-    "sirv": "^2.0.4"
+    "hyperapp": "^2.0.22",
+    "sirv": "^2.0.4",
+    "vite-plugin-hyperapp": "^2.0.1"
   }
 }

package/templates/{template-ts-ssr → js-jsx-ssr}/server.js

@@ -19,7 +19,6 @@ async function createServer() {
     vite = await createServer({
       server: { middlewareMode: true },
       appType: "custom",
-      base,
     })
     app.use(vite.middlewares)
   } else {
@@ -29,26 +28,29 @@ async function createServer() {
     app.use(base, sirv("./dist/client", { extensions: [] }))
   }
 
-  app.use("*", async (req, res) => {
-    const url = req.originalUrl.replace(base, "")
+  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.ts")).render
+        render = (await vite.ssrLoadModule("/src/entry-server.js")).render
       } else {
         template = await fs.readFile("./dist/client/index.html", "utf-8")
-        render = (await import("./dist/server/entry-server.js")).render
+        const serverEntry = "./dist/server/entry-server.js"
+        render = (await import(serverEntry)).render
       }
-      const html = template.replace(`<!--ssr-outlet-->`, await render())
+      const html = template.replace(`<!--ssr-outlet-->`, () => render())
       res.status(200).set({ "Content-Type": "text/html" }).end(html)
     } catch (e) {
-      vite?.ssrFixStacktrace(e)
-      console.log(e.stack)
-      res.status(500).end(e.stack)
+      if (e instanceof Error) vite?.ssrFixStacktrace(e)
+      console.error(e)
+      res.status(500).end()
     }
   })
 

package/templates/js-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/{template-ssr/src → js-jsx-ssr/src/app}/main.jsx

@@ -1,6 +1,5 @@
 import "./style.css"
-import hyperappLogo from "./hyperapp.svg"
-import viteLogo from "/vite.svg"
+import Logos from "./logos"
 import Counter from "./counter"
 
 export const init = () => ({
@@ -12,17 +11,6 @@ const HandleClick = state => ({
   counter: state.counter + 1,
 })
 
-const Logos = () => (
-  <>
-    <a href="https://vitejs.dev">
-      <img src={viteLogo} class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://hyperapp.dev/">
-      <img src={hyperappLogo} class="logo vanilla" alt="Hyperapp logo" />
-    </a>
-  </>
-)
-
 export const view = state => (
   <main id="app">
     <h1>Vite (SSR) + Hyperapp</h1>

package/templates/js-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/js-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/js-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/js-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>

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

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

package/templates/{template-ts → js-plain-cli}/package.json

@@ -1,19 +1,18 @@
 {
-  "name": "demo",
+  "name": "__PROJECTNAME__",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "hyperapp": "^2.0.22"
   },
   "devDependencies": {
-    "typescript": "^5.0.2",
-    "vite": "^4.5.14",
-    "vite-plugin-hyperapp": "^1.3.0"
+    "vite": "^8.3.4",
+    "vite-plugin-hyperapp": "^2.0.1"
   }
 }

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

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

package/templates/js-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/js-plain-cli/src/app/main.js

@@ -0,0 +1,25 @@
+import "./style.css"
+import { h, text } from "hyperapp"
+import Counter from "./counter"
+import Logos from "./logos"
+
+export const init = () => ({
+  counter: 0,
+})
+
+const HandleClick = state => ({
+  ...state,
+  counter: state.counter + 1,
+})
+
+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/js-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/js-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/js-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/js-plain-ssr/jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

package/templates/{template-ts-ssr → js-plain-ssr}/package.json

@@ -1,24 +1,23 @@
 {
-  "name": "demo",
+  "name": "__PROJECTNAME__",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node server",
+    "dev": "node server.js",
     "build:client": "vite build --outDir dist/client",
-    "build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
+    "build:server": "vite build --outDir dist/server --ssr src/entry-server.js",
     "build": "npm run build:client && npm run build:server",
-    "preview": "NODE_ENV=production node server"
+    "preview": "NODE_ENV=production node server.js"
   },
   "devDependencies": {
-    "typescript": "^5.0.2",
-    "vite": "^4.5.14",
-    "vite-plugin-hyperapp": "^1.3.0"
+    "vite": "^8.3.4"
   },
   "dependencies": {
-    "hyperapp": "^2.0.22",
     "compression": "^1.7.4",
     "express": "^4.19.2",
-    "sirv": "^2.0.4"
+    "hyperapp": "^2.0.22",
+    "sirv": "^2.0.4",
+    "vite-plugin-hyperapp": "^2.0.1"
   }
 }

package/templates/js-plain-ssr/server.js

@@ -0,0 +1,62 @@
+/*
+---------------------------------
+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()
+
+  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/js-plain-ssr/src/app/counter.js

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

package/templates/js-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/js-plain-ssr/src/app/main.js

@@ -0,0 +1,25 @@
+import "./style.css"
+import { h, text } from "hyperapp"
+import Counter from "./counter"
+import Logos from "./logos"
+
+export const init = () => ({
+  counter: 0,
+})
+
+const HandleClick = state => ({
+  ...state,
+  counter: state.counter + 1,
+})
+
+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"),
+    ),
+  ])