create-vite-hyperapp 1.3.0 → 2.0.1

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

package/templates/ts-plain-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-plain-ssr/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-ssr/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-ssr/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 (SSR) + 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-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-plain-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-plain-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/ts-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/ts-plain-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-plain-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/index.js

@@ -1,154 +0,0 @@
-#!/usr/bin/env node
-import minimist from "minimist"
-import prompts from "prompts"
-import fs from "node:fs"
-import path from "node:path"
-import { fileURLToPath } from "node:url"
-
-const args = minimist(process.argv.slice(2))
-
-if (args["h"] || args["help"]) {
-  process.stdout.write(`
-Usage: npm create vite-hyperapp -- [TARGET_DIR] [OPTIONS]
-
-Options:
-    -t, --typescript      Use typescript
-    -s, --ssr             Use server-side rendering
-    -n, --no-prompt       Just do it, no questions asked
-    -h, --help            Show this message 
-
-If no target dir is specified, the project name will be used.
-If --no-prompt option is used, project name will be target dir
-Default project-name/target-dir is 'hyperapp-project'
-    
-`)
-  process.exit(0)
-}
-
-async function collectOptions() {
-  const flaggedTypescript = !!(args["t"] || args["typescript"])
-  const flaggedSSR = !!(args["s"] || args["ssr"])
-  const givenTargetDir = args._[0]
-  const targetDirOrDefault = givenTargetDir || "hyperapp-project"
-  if (args["n"] || args["no-prompt"]) {
-    return {
-      targetDir: targetDirOrDefault,
-      projectName: targetDirOrDefault,
-      useTypescript: flaggedTypescript,
-      useSSR: flaggedSSR,
-    }
-  }
-  const promptResponse = await prompts([
-    {
-      type: "text",
-      name: "name",
-      initial: targetDirOrDefault,
-      message: "Name your project:",
-    },
-    !flaggedTypescript && {
-      type: "confirm",
-      name: "typescript",
-      message: "Use Typescript?",
-      initial: true,
-    },
-    !flaggedSSR && {
-      type: "confirm",
-      name: "ssr",
-      message: "Use server-side rendering?",
-      initial: false,
-    },
-  ])
-  return {
-    targetDir: givenTargetDir || promptResponse.name,
-    projectName: promptResponse.name,
-    useTypescript: promptResponse.typescript,
-    useSSR: promptResponse.ssr,
-  }
-}
-
-function copyDir(source, target) {
-  if (fs.existsSync(target)) {
-    process.stderr.write(`\n${target} already exists. Aborting!\n`)
-    process.exit(1)
-  }
-  fs.mkdirSync(target, { recursive: true })
-
-  const items = fs.readdirSync(source)
-  items.forEach(item => {
-    const sourceItem = path.join(source, item)
-    const targetItem = path.join(target, item)
-    const stats = fs.statSync(sourceItem)
-
-    if (stats.isDirectory()) {
-      copyDir(sourceItem, targetItem)
-    } else {
-      fs.copyFileSync(sourceItem, targetItem)
-    }
-  })
-}
-
-function isValidPackageName(projectName) {
-  return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(
-    projectName,
-  )
-}
-
-function setPackageName(projectDir, packageName) {
-  const packageJsonPath = path.join(projectDir, "package.json")
-  const info = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"))
-  info.name = packageName
-  fs.writeFileSync(packageJsonPath, JSON.stringify(info, null, 2))
-}
-
-function fixGitignoreFilename(projectDir) {
-  const currentName = path.join(projectDir, "_gitignore")
-  const renameTo = path.join(projectDir, ".gitignore")
-  fs.renameSync(currentName, renameTo)
-}
-
-async function main() {
-  const setup = await collectOptions()
-
-  if (!isValidPackageName(setup.projectName)) {
-    process.stderr.write(
-      `\n${setup.projectName} is not a valid package.json name\n`,
-    )
-    process.exit(1)
-  }
-
-  if (!isValidPackageName(setup.targetDir)) {
-    process.stderr.write(`\n${setup.targetDir} is not a valid folder name\n`)
-    process.exit(1)
-  }
-
-  const template = setup.useTypescript
-    ? setup.useSSR
-      ? "template-ts-ssr"
-      : "template-ts"
-    : setup.useSSR
-    ? "template-ssr"
-    : "template"
-
-  const sourceDir = path.resolve(
-    fileURLToPath(import.meta.url),
-    "../templates/",
-    template,
-  )
-  const targetDir = path.resolve(process.cwd(), "./" + setup.targetDir)
-
-  process.stdout.write("Scaffolding project ...")
-  copyDir(sourceDir, targetDir)
-  setPackageName(targetDir, setup.projectName)
-  fixGitignoreFilename(targetDir)
-  process.stdout.write(`
-...Done.
-
-To get started:
-
-> cd ${setup.targetDir}
-> npm install
-> npm run dev 
-`)
-}
-
-main()

package/templates/template/public/vite.svg

@@ -1 +0,0 @@
-<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/template/src/hyperapp.svg

@@ -1,4 +0,0 @@
-<svg viewBox="-20 -20 230 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
-    <rect x="-20" y="-20" width="100%" height="100%" fill="#0080FF" rx="15"/>
-   <path d="M69.3175129,49.6122454 L109.331858,49.6122454 L118.942605,69.3176912 L69.3175129,69.3176912 L69.3175129,118.931378 L49.6154815,118.931378 L49.6154815,69.3176912 L0,69.3176912 L0,49.6122454 L49.6154815,49.6122454 L49.6154815,0 L69.3175129,0 L69.3175129,49.6122454 Z M192.738726,118.931378 L169.523967,118.931378 L111.518303,0 L134.733062,0 L192.738726,118.931378 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
-</svg>

package/templates/template/src/style.css

@@ -1,97 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/templates/template/vite.config.js

@@ -1,6 +0,0 @@
-import { defineConfig } from "vite"
-import hyperapp from "vite-plugin-hyperapp"
-
-export default defineConfig({
-  plugins: [hyperapp()],
-})

package/templates/template-ssr/_gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/template-ssr/src/entry-server.js

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

package/templates/template-ssr/src/style.css

@@ -1,97 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/templates/template-ssr/vite.config.js

@@ -1,6 +0,0 @@
-import { defineConfig } from "vite"
-import hyperapp from "vite-plugin-hyperapp"
-
-export default defineConfig({
-  plugins: [hyperapp()],
-})