create-vite-hyperapp 1.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2024 Zacharias Enochsson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# create-vite-hyperapp

package/index.js

@@ -0,0 +1,154 @@
+#!/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/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "create-vite-hyperapp",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "\"Scaffold a project quickly with Hyperapp and Vite\"",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Zacharias Enochsson",
+  "license": "MIT",
+  "dependencies": {
+    "minimist": "^1.2.8",
+    "prompts": "^2.4.2"
+  },
+  "bin": {
+    "create-vite-hyperapp": "index.js"
+  }
+}

package/templates/template/_gitignore

@@ -0,0 +1,24 @@
+# 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/index.html

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

package/templates/template/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "hyperapp": "^2.0.22",
+    "vite": "^4.4.5",
+    "vite-plugin-hyperapp": "^1.0.3"
+  }
+}

package/templates/template/public/vite.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="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/counter.jsx

@@ -0,0 +1,7 @@
+const Counter = ({ clicks, onclick }) => (
+  <div class="card">
+    <button onclick={onclick}>Clicks: {clicks}</button>
+  </div>
+)
+
+export default Counter

package/templates/template/src/hyperapp.svg

@@ -0,0 +1,4 @@
+<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/main.jsx

@@ -0,0 +1,35 @@
+import "./style.css"
+import hyperappLogo from "./hyperapp.svg"
+import viteLogo from "/vite.svg"
+import Counter from "./counter"
+
+export const init = () => ({
+  counter: 0,
+})
+
+const HandleClick = state => ({
+  ...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>
+    <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/template/src/run.js

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

package/templates/template/src/style.css

@@ -0,0 +1,97 @@
+: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

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

package/templates/template-ssr/_gitignore

@@ -0,0 +1,24 @@
+# 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/index.html

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

package/templates/template-ssr/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node server",
+    "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"
+  },
+  "devDependencies": {
+    "hyperapp": "^2.0.22",
+    "vite": "^4.4.5",
+    "vite-plugin-hyperapp": "^1.0.3"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "express": "^4.19.2",
+    "sirv": "^2.0.4"
+  }
+}

package/templates/template-ssr/public/vite.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="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-ssr/server.js

@@ -0,0 +1,60 @@
+/*
+---------------------------------
+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",
+      base,
+    })
+    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) => {
+    const url = req.originalUrl.replace(base, "")
+    try {
+      let template
+      let render
+      if (!isProduction) {
+        // 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")
+        render = (await import("./dist/server/entry-server.js")).render
+      }
+      const html = template.replace(`<!--ssr-outlet-->`, await 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)
+    }
+  })
+
+  app.listen(port, () => {
+    console.log(`Server started at http://localhost:${port}`)
+  })
+}
+
+createServer()

package/templates/template-ssr/src/counter.jsx

@@ -0,0 +1,7 @@
+const Counter = ({ clicks, onclick }) => (
+  <div class="card">
+    <button onclick={onclick}>Clicks: {clicks}</button>
+  </div>
+)
+
+export default Counter

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

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

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

@@ -0,0 +1,5 @@
+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/hyperapp.svg

@@ -0,0 +1,4 @@
+<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-ssr/src/main.jsx

@@ -0,0 +1,35 @@
+import "./style.css"
+import hyperappLogo from "./hyperapp.svg"
+import viteLogo from "/vite.svg"
+import Counter from "./counter"
+
+export const init = () => ({
+  counter: 0,
+})
+
+const HandleClick = state => ({
+  ...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>
+    <Logos />
+    <Counter clicks={state.counter} onclick={HandleClick} />
+    <p class="read-the-docs">
+      Click on the Vite & Hyperapp logos to learn more
+    </p>
+  </main>
+)