create-vite-hyperapp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/LICENSE.md +7 -0
  2. package/README.md +1 -0
  3. package/index.js +154 -0
  4. package/package.json +19 -0
  5. package/templates/template/_gitignore +24 -0
  6. package/templates/template/index.html +13 -0
  7. package/templates/template/package.json +16 -0
  8. package/templates/template/public/vite.svg +1 -0
  9. package/templates/template/src/counter.jsx +7 -0
  10. package/templates/template/src/hyperapp.svg +4 -0
  11. package/templates/template/src/main.jsx +35 -0
  12. package/templates/template/src/run.js +5 -0
  13. package/templates/template/src/style.css +97 -0
  14. package/templates/template/vite.config.js +6 -0
  15. package/templates/template-ssr/_gitignore +24 -0
  16. package/templates/template-ssr/index.html +13 -0
  17. package/templates/template-ssr/package.json +23 -0
  18. package/templates/template-ssr/public/vite.svg +1 -0
  19. package/templates/template-ssr/server.js +60 -0
  20. package/templates/template-ssr/src/counter.jsx +7 -0
  21. package/templates/template-ssr/src/entry-client.js +5 -0
  22. package/templates/template-ssr/src/entry-server.js +5 -0
  23. package/templates/template-ssr/src/hyperapp.svg +4 -0
  24. package/templates/template-ssr/src/main.jsx +35 -0
  25. package/templates/template-ssr/src/style.css +97 -0
  26. package/templates/template-ssr/vite.config.js +6 -0
  27. package/templates/template-ts/_gitignore +24 -0
  28. package/templates/template-ts/index.html +13 -0
  29. package/templates/template-ts/package.json +17 -0
  30. package/templates/template-ts/public/vite.svg +1 -0
  31. package/templates/template-ts/src/counter.tsx +14 -0
  32. package/templates/template-ts/src/hyperapp.svg +4 -0
  33. package/templates/template-ts/src/main.tsx +42 -0
  34. package/templates/template-ts/src/run.ts +5 -0
  35. package/templates/template-ts/src/style.css +97 -0
  36. package/templates/template-ts/src/typescript.svg +1 -0
  37. package/templates/template-ts/src/vite-env.d.ts +1 -0
  38. package/templates/template-ts/tsconfig.json +27 -0
  39. package/templates/template-ts/vite.config.js +6 -0
  40. package/templates/template-ts-ssr/_gitignore +24 -0
  41. package/templates/template-ts-ssr/index.html +13 -0
  42. package/templates/template-ts-ssr/package.json +24 -0
  43. package/templates/template-ts-ssr/public/vite.svg +1 -0
  44. package/templates/template-ts-ssr/server.js +60 -0
  45. package/templates/template-ts-ssr/src/counter.tsx +14 -0
  46. package/templates/template-ts-ssr/src/entry-client.ts +5 -0
  47. package/templates/template-ts-ssr/src/entry-server.ts +5 -0
  48. package/templates/template-ts-ssr/src/hyperapp.svg +4 -0
  49. package/templates/template-ts-ssr/src/main.tsx +42 -0
  50. package/templates/template-ts-ssr/src/style.css +97 -0
  51. package/templates/template-ts-ssr/src/typescript.svg +1 -0
  52. package/templates/template-ts-ssr/src/vite-env.d.ts +1 -0
  53. package/templates/template-ts-ssr/tsconfig.json +27 -0
  54. package/templates/template-ts-ssr/vite.config.js +6 -0
package/templates/template-ssr/src/style.css ADDED
@@ -0,0 +1,97 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ -webkit-text-size-adjust: 100%;
15
+ }
16
+
17
+ a {
18
+ font-weight: 500;
19
+ color: #646cff;
20
+ text-decoration: inherit;
21
+ }
22
+ a:hover {
23
+ color: #535bf2;
24
+ }
25
+
26
+ body {
27
+ margin: 0;
28
+ display: flex;
29
+ place-items: center;
30
+ min-width: 320px;
31
+ min-height: 100vh;
32
+ }
33
+
34
+ h1 {
35
+ font-size: 3.2em;
36
+ line-height: 1.1;
37
+ }
38
+
39
+ #app {
40
+ max-width: 1280px;
41
+ margin: 0 auto;
42
+ padding: 2rem;
43
+ text-align: center;
44
+ }
45
+
46
+ .logo {
47
+ height: 6em;
48
+ padding: 1.5em;
49
+ will-change: filter;
50
+ transition: filter 300ms;
51
+ }
52
+ .logo:hover {
53
+ filter: drop-shadow(0 0 2em #646cffaa);
54
+ }
55
+ .logo.vanilla:hover {
56
+ filter: drop-shadow(0 0 2em #3178c6aa);
57
+ }
58
+
59
+ .card {
60
+ padding: 2em;
61
+ }
62
+
63
+ .read-the-docs {
64
+ color: #888;
65
+ }
66
+
67
+ button {
68
+ border-radius: 8px;
69
+ border: 1px solid transparent;
70
+ padding: 0.6em 1.2em;
71
+ font-size: 1em;
72
+ font-weight: 500;
73
+ font-family: inherit;
74
+ background-color: #1a1a1a;
75
+ cursor: pointer;
76
+ transition: border-color 0.25s;
77
+ }
78
+ button:hover {
79
+ border-color: #646cff;
80
+ }
81
+ button:focus,
82
+ button:focus-visible {
83
+ outline: 4px auto -webkit-focus-ring-color;
84
+ }
85
+
86
+ @media (prefers-color-scheme: light) {
87
+ :root {
88
+ color: #213547;
89
+ background-color: #ffffff;
90
+ }
91
+ a:hover {
92
+ color: #747bff;
93
+ }
94
+ button {
95
+ background-color: #f9f9f9;
96
+ }
97
+ }
package/templates/template-ssr/vite.config.js ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from "vite"
2
+ import hyperapp from "vite-plugin-hyperapp"
3
+
4
+ export default defineConfig({
5
+ plugins: [hyperapp()],
6
+ })
package/templates/template-ts/_gitignore ADDED
@@ -0,0 +1,24 @@
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
package/templates/template-ts/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + Hyperapp + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/run.ts"></script>
12
+ </body>
13
+ </html>
package/templates/template-ts/package.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "demo",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "devDependencies": {
12
+ "hyperapp": "^2.0.22",
13
+ "typescript": "^5.0.2",
14
+ "vite": "^4.4.5",
15
+ "vite-plugin-hyperapp": "^1.0.3"
16
+ }
17
+ }
package/templates/template-ts/public/vite.svg ADDED
@@ -0,0 +1 @@
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-ts/src/counter.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import type { Action } from "hyperapp"
2
+
3
+ type CounterProps = {
4
+ clicks: number
5
+ onclick: Action<any>
6
+ }
7
+
8
+ const Counter = ({ clicks, onclick }: CounterProps) => (
9
+ <div class="card">
10
+ <button onclick={onclick}>Clicks: {clicks}</button>
11
+ </div>
12
+ )
13
+
14
+ export default Counter
package/templates/template-ts/src/hyperapp.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg viewBox="-20 -20 230 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
2
+ <rect x="-20" y="-20" width="100%" height="100%" fill="#0080FF" rx="15"/>
3
+ <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>
4
+ </svg>
package/templates/template-ts/src/main.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import "./style.css"
2
+ import typescriptLogo from "./typescript.svg"
3
+ import hyperappLogo from "./hyperapp.svg"
4
+ import viteLogo from "/vite.svg"
5
+ import type { Action } from "hyperapp"
6
+ import Counter from "./counter"
7
+
8
+ type State = { counter: number }
9
+
10
+ export const init: Action<State> = () => ({
11
+ counter: 0,
12
+ })
13
+
14
+ const HandleClick: Action<State> = state => ({
15
+ ...state,
16
+ counter: state.counter + 1,
17
+ })
18
+
19
+ const Logos = () => (
20
+ <>
21
+ <a href="https://vitejs.dev">
22
+ <img src={viteLogo} class="logo" alt="Vite logo" />
23
+ </a>
24
+ <a href="https://hyperapp.dev/">
25
+ <img src={hyperappLogo} class="logo vanilla" alt="Hyperapp logo" />
26
+ </a>
27
+ <a href="https://www.typescriptlang.org/">
28
+ <img src={typescriptLogo} class="logo vanilla" alt="TypeScript logo" />
29
+ </a>
30
+ </>
31
+ )
32
+
33
+ export const view = (state: State) => (
34
+ <main id="app">
35
+ <h1>Vite + Hyperapp + TypeScript</h1>
36
+ <Logos />
37
+ <Counter clicks={state.counter} onclick={HandleClick} />
38
+ <p class="read-the-docs">
39
+ Click on the Vite, Hyperapp & TypeScript logos to learn more
40
+ </p>
41
+ </main>
42
+ )
package/templates/template-ts/src/run.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { app } from "hyperapp"
2
+ import { init, view } from "./main"
3
+ const node = document.querySelector("#app")
4
+ if (!node) throw new Error("mountpoint not found")
5
+ export const dispatch = app({ init, view, node })
package/templates/template-ts/src/style.css ADDED
@@ -0,0 +1,97 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ -webkit-text-size-adjust: 100%;
15
+ }
16
+
17
+ a {
18
+ font-weight: 500;
19
+ color: #646cff;
20
+ text-decoration: inherit;
21
+ }
22
+ a:hover {
23
+ color: #535bf2;
24
+ }
25
+
26
+ body {
27
+ margin: 0;
28
+ display: flex;
29
+ place-items: center;
30
+ min-width: 320px;
31
+ min-height: 100vh;
32
+ }
33
+
34
+ h1 {
35
+ font-size: 3.2em;
36
+ line-height: 1.1;
37
+ }
38
+
39
+ #app {
40
+ max-width: 1280px;
41
+ margin: 0 auto;
42
+ padding: 2rem;
43
+ text-align: center;
44
+ }
45
+
46
+ .logo {
47
+ height: 6em;
48
+ padding: 1.5em;
49
+ will-change: filter;
50
+ transition: filter 300ms;
51
+ }
52
+ .logo:hover {
53
+ filter: drop-shadow(0 0 2em #646cffaa);
54
+ }
55
+ .logo.vanilla:hover {
56
+ filter: drop-shadow(0 0 2em #3178c6aa);
57
+ }
58
+
59
+ .card {
60
+ padding: 2em;
61
+ }
62
+
63
+ .read-the-docs {
64
+ color: #888;
65
+ }
66
+
67
+ button {
68
+ border-radius: 8px;
69
+ border: 1px solid transparent;
70
+ padding: 0.6em 1.2em;
71
+ font-size: 1em;
72
+ font-weight: 500;
73
+ font-family: inherit;
74
+ background-color: #1a1a1a;
75
+ cursor: pointer;
76
+ transition: border-color 0.25s;
77
+ }
78
+ button:hover {
79
+ border-color: #646cff;
80
+ }
81
+ button:focus,
82
+ button:focus-visible {
83
+ outline: 4px auto -webkit-focus-ring-color;
84
+ }
85
+
86
+ @media (prefers-color-scheme: light) {
87
+ :root {
88
+ color: #213547;
89
+ background-color: #ffffff;
90
+ }
91
+ a:hover {
92
+ color: #747bff;
93
+ }
94
+ button {
95
+ background-color: #f9f9f9;
96
+ }
97
+ }
package/templates/template-ts/src/typescript.svg ADDED
@@ -0,0 +1 @@
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/template-ts/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/templates/template-ts/tsconfig.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": true,
5
+ "module": "ESNext",
6
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
7
+ "skipLibCheck": true,
8
+
9
+ /* Bundler mode */
10
+ "moduleResolution": "bundler",
11
+ "allowImportingTsExtensions": true,
12
+ "resolveJsonModule": true,
13
+ "isolatedModules": true,
14
+ "noEmit": true,
15
+
16
+ /* Linting */
17
+ "strict": true,
18
+ "noUnusedLocals": true,
19
+ "noUnusedParameters": true,
20
+ "noFallthroughCasesInSwitch": true,
21
+
22
+ /* Necessary for tsx to work with vite-plugin-hyperapp*/
23
+ "jsx": "preserve",
24
+ "jsxImportSource": "vite-plugin-hyperapp"
25
+ },
26
+ "include": ["src"]
27
+ }
package/templates/template-ts/vite.config.js ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from "vite"
2
+ import hyperapp from "vite-plugin-hyperapp"
3
+
4
+ export default defineConfig({
5
+ plugins: [hyperapp()],
6
+ })
package/templates/template-ts-ssr/_gitignore ADDED
@@ -0,0 +1,24 @@
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
package/templates/template-ts-ssr/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite (SSR) + Hyperapp + Typescript</title>
8
+ </head>
9
+ <body>
10
+ <!--ssr-outlet-->
11
+ <script type="module" src="/src/entry-client.ts"></script>
12
+ </body>
13
+ </html>
package/templates/template-ts-ssr/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "demo",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "node server",
8
+ "build:client": "vite build --outDir dist/client",
9
+ "build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
10
+ "build": "npm run build:client && npm run build:server",
11
+ "preview": "NODE_ENV=production node server"
12
+ },
13
+ "devDependencies": {
14
+ "hyperapp": "^2.0.22",
15
+ "typescript": "^5.0.2",
16
+ "vite": "^4.4.5",
17
+ "vite-plugin-hyperapp": "^1.0.3"
18
+ },
19
+ "dependencies": {
20
+ "compression": "^1.7.4",
21
+ "express": "^4.19.2",
22
+ "sirv": "^2.0.4"
23
+ }
24
+ }
package/templates/template-ts-ssr/public/vite.svg ADDED
@@ -0,0 +1 @@
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-ts-ssr/server.js ADDED
@@ -0,0 +1,60 @@
1
+ /*
2
+ ---------------------------------
3
+ Cribbed to large extent from template-ssr-solid/server.js
4
+ ---------------------------------
5
+ */
6
+ import fs from "node:fs/promises"
7
+ import express from "express"
8
+
9
+ const isProduction = process.env.NODE_ENV === "production"
10
+ const port = process.env.PORT || 5173
11
+ const base = process.env.BASE || "/"
12
+
13
+ async function createServer() {
14
+ const app = express()
15
+
16
+ let vite
17
+ if (!isProduction) {
18
+ const { createServer } = await import("vite")
19
+ vite = await createServer({
20
+ server: { middlewareMode: true },
21
+ appType: "custom",
22
+ base,
23
+ })
24
+ app.use(vite.middlewares)
25
+ } else {
26
+ const compression = (await import("compression")).default
27
+ const sirv = (await import("sirv")).default
28
+ app.use(compression())
29
+ app.use(base, sirv("./dist/client", { extensions: [] }))
30
+ }
31
+
32
+ app.use("*", async (req, res) => {
33
+ const url = req.originalUrl.replace(base, "")
34
+ try {
35
+ let template
36
+ let render
37
+ if (!isProduction) {
38
+ // Always read fresh template in development
39
+ template = await fs.readFile("./index.html", "utf-8")
40
+ template = await vite.transformIndexHtml(url, template)
41
+ render = (await vite.ssrLoadModule("/src/entry-server.ts")).render
42
+ } else {
43
+ template = await fs.readFile("./dist/client/index.html", "utf-8")
44
+ render = (await import("./dist/server/entry-server.js")).render
45
+ }
46
+ const html = template.replace(`<!--ssr-outlet-->`, await render())
47
+ res.status(200).set({ "Content-Type": "text/html" }).end(html)
48
+ } catch (e) {
49
+ vite?.ssrFixStacktrace(e)
50
+ console.log(e.stack)
51
+ res.status(500).end(e.stack)
52
+ }
53
+ })
54
+
55
+ app.listen(port, () => {
56
+ console.log(`Server started at http://localhost:${port}`)
57
+ })
58
+ }
59
+
60
+ createServer()
package/templates/template-ts-ssr/src/counter.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import type { Action } from "hyperapp"
2
+
3
+ type CounterProps = {
4
+ clicks: number
5
+ onclick: Action<any>
6
+ }
7
+
8
+ const Counter = ({ clicks, onclick }: CounterProps) => (
9
+ <div class="card">
10
+ <button onclick={onclick}>Clicks: {clicks}</button>
11
+ </div>
12
+ )
13
+
14
+ export default Counter
package/templates/template-ts-ssr/src/entry-client.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { app } from "hyperapp"
2
+ import { init, view } from "./main"
3
+ const node = document.querySelector("#app")
4
+ if (!node) throw new Error("mountpoint not found")
5
+ export const dispatch = app({ init, view, node })
package/templates/template-ts-ssr/src/entry-server.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { init, view } from "./main"
2
+ import renderApp from "vite-plugin-hyperapp/ssr"
3
+ export async function render() {
4
+ return await renderApp({ init, view })
5
+ }
package/templates/template-ts-ssr/src/hyperapp.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg viewBox="-20 -20 230 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
2
+ <rect x="-20" y="-20" width="100%" height="100%" fill="#0080FF" rx="15"/>
3
+ <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>
4
+ </svg>
package/templates/template-ts-ssr/src/main.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import "./style.css"
2
+ import typescriptLogo from "./typescript.svg"
3
+ import hyperappLogo from "./hyperapp.svg"
4
+ import viteLogo from "/vite.svg"
5
+ import type { Action } from "hyperapp"
6
+ import Counter from "./counter"
7
+
8
+ type State = { counter: number }
9
+
10
+ export const init: Action<State> = () => ({
11
+ counter: 0,
12
+ })
13
+
14
+ const HandleClick: Action<State> = (state: State) => ({
15
+ ...state,
16
+ counter: state.counter + 1,
17
+ })
18
+
19
+ const Logos = () => (
20
+ <>
21
+ <a href="https://vitejs.dev">
22
+ <img src={viteLogo} class="logo" alt="Vite logo" />
23
+ </a>
24
+ <a href="https://hyperapp.dev/">
25
+ <img src={hyperappLogo} class="logo vanilla" alt="Hyperapp logo" />
26
+ </a>
27
+ <a href="https://www.typescriptlang.org/">
28
+ <img src={typescriptLogo} class="logo vanilla" alt="TypeScript logo" />
29
+ </a>
30
+ </>
31
+ )
32
+
33
+ export const view = (state: State) => (
34
+ <main id="app">
35
+ <h1>Vite (SSR) + Hyperapp + TypeScript</h1>
36
+ <Logos />
37
+ <Counter clicks={state.counter} onclick={HandleClick} />
38
+ <p class="read-the-docs">
39
+ Click on the Vite, Hyperapp & TypeScript logos to learn more
40
+ </p>
41
+ </main>
42
+ )