create-vite-extra 0.0.1

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 (177) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +79 -0
  3. package/index.js +384 -0
  4. package/package.json +34 -0
  5. package/template-library/_gitignore +24 -0
  6. package/template-library/index.d.ts +1 -0
  7. package/template-library/index.html +13 -0
  8. package/template-library/javascript.svg +1 -0
  9. package/template-library/lib/main.js +9 -0
  10. package/template-library/main.js +23 -0
  11. package/template-library/package.json +22 -0
  12. package/template-library/public/vite.svg +1 -0
  13. package/template-library/style.css +97 -0
  14. package/template-library/vite.config.js +11 -0
  15. package/template-library-ts/_gitignore +24 -0
  16. package/template-library-ts/index.d.ts +1 -0
  17. package/template-library-ts/index.html +13 -0
  18. package/template-library-ts/lib/main.ts +9 -0
  19. package/template-library-ts/package.json +23 -0
  20. package/template-library-ts/public/vite.svg +1 -0
  21. package/template-library-ts/src/main.ts +23 -0
  22. package/template-library-ts/src/style.css +97 -0
  23. package/template-library-ts/src/typescript.svg +1 -0
  24. package/template-library-ts/src/vite-env.d.ts +1 -0
  25. package/template-library-ts/tsconfig.json +20 -0
  26. package/template-library-ts/vite.config.ts +11 -0
  27. package/template-ssr-preact/_gitignore +24 -0
  28. package/template-ssr-preact/index.html +14 -0
  29. package/template-ssr-preact/package.json +25 -0
  30. package/template-ssr-preact/public/vite.svg +1 -0
  31. package/template-ssr-preact/server.js +71 -0
  32. package/template-ssr-preact/src/app.css +25 -0
  33. package/template-ssr-preact/src/app.jsx +32 -0
  34. package/template-ssr-preact/src/assets/preact.svg +1 -0
  35. package/template-ssr-preact/src/entry-client.jsx +5 -0
  36. package/template-ssr-preact/src/entry-server.jsx +7 -0
  37. package/template-ssr-preact/src/index.css +70 -0
  38. package/template-ssr-preact/vite.config.js +15 -0
  39. package/template-ssr-preact-ts/_gitignore +24 -0
  40. package/template-ssr-preact-ts/index.html +14 -0
  41. package/template-ssr-preact-ts/package.json +27 -0
  42. package/template-ssr-preact-ts/public/vite.svg +1 -0
  43. package/template-ssr-preact-ts/server.js +71 -0
  44. package/template-ssr-preact-ts/src/app.css +25 -0
  45. package/template-ssr-preact-ts/src/app.tsx +32 -0
  46. package/template-ssr-preact-ts/src/assets/preact.svg +1 -0
  47. package/template-ssr-preact-ts/src/entry-client.tsx +5 -0
  48. package/template-ssr-preact-ts/src/entry-server.tsx +7 -0
  49. package/template-ssr-preact-ts/src/index.css +70 -0
  50. package/template-ssr-preact-ts/src/preact.d.ts +1 -0
  51. package/template-ssr-preact-ts/src/vite-env.d.ts +1 -0
  52. package/template-ssr-preact-ts/tsconfig.json +23 -0
  53. package/template-ssr-preact-ts/tsconfig.node.json +16 -0
  54. package/template-ssr-preact-ts/vite.config.ts +15 -0
  55. package/template-ssr-react/_gitignore +24 -0
  56. package/template-ssr-react/index.html +14 -0
  57. package/template-ssr-react/package.json +27 -0
  58. package/template-ssr-react/public/vite.svg +1 -0
  59. package/template-ssr-react/server.js +71 -0
  60. package/template-ssr-react/src/App.css +41 -0
  61. package/template-ssr-react/src/App.jsx +34 -0
  62. package/template-ssr-react/src/assets/react.svg +1 -0
  63. package/template-ssr-react/src/entry-client.jsx +11 -0
  64. package/template-ssr-react/src/entry-server.jsx +12 -0
  65. package/template-ssr-react/src/index.css +70 -0
  66. package/template-ssr-react/vite.config.js +7 -0
  67. package/template-ssr-react-ts/_gitignore +24 -0
  68. package/template-ssr-react-ts/index.html +14 -0
  69. package/template-ssr-react-ts/package.json +28 -0
  70. package/template-ssr-react-ts/public/vite.svg +1 -0
  71. package/template-ssr-react-ts/server.js +71 -0
  72. package/template-ssr-react-ts/src/App.css +41 -0
  73. package/template-ssr-react-ts/src/App.tsx +34 -0
  74. package/template-ssr-react-ts/src/assets/react.svg +1 -0
  75. package/template-ssr-react-ts/src/entry-client.tsx +11 -0
  76. package/template-ssr-react-ts/src/entry-server.tsx +12 -0
  77. package/template-ssr-react-ts/src/index.css +70 -0
  78. package/template-ssr-react-ts/src/vite-env.d.ts +1 -0
  79. package/template-ssr-react-ts/tsconfig.json +21 -0
  80. package/template-ssr-react-ts/tsconfig.node.json +15 -0
  81. package/template-ssr-react-ts/vite.config.ts +7 -0
  82. package/template-ssr-svelte/.vscode/extensions.json +3 -0
  83. package/template-ssr-svelte/README.md +48 -0
  84. package/template-ssr-svelte/_gitignore +24 -0
  85. package/template-ssr-svelte/index.html +14 -0
  86. package/template-ssr-svelte/jsconfig.json +34 -0
  87. package/template-ssr-svelte/package.json +24 -0
  88. package/template-ssr-svelte/public/vite.svg +1 -0
  89. package/template-ssr-svelte/server.js +71 -0
  90. package/template-ssr-svelte/src/App.svelte +45 -0
  91. package/template-ssr-svelte/src/app.css +81 -0
  92. package/template-ssr-svelte/src/assets/svelte.svg +1 -0
  93. package/template-ssr-svelte/src/entry-client.js +7 -0
  94. package/template-ssr-svelte/src/entry-server.js +6 -0
  95. package/template-ssr-svelte/src/lib/Counter.svelte +10 -0
  96. package/template-ssr-svelte/src/vite-env.d.ts +2 -0
  97. package/template-ssr-svelte/vite.config.js +13 -0
  98. package/template-ssr-svelte-ts/.vscode/extensions.json +3 -0
  99. package/template-ssr-svelte-ts/README.md +48 -0
  100. package/template-ssr-svelte-ts/_gitignore +24 -0
  101. package/template-ssr-svelte-ts/index.html +14 -0
  102. package/template-ssr-svelte-ts/package.json +29 -0
  103. package/template-ssr-svelte-ts/public/vite.svg +1 -0
  104. package/template-ssr-svelte-ts/server.js +71 -0
  105. package/template-ssr-svelte-ts/src/App.svelte +45 -0
  106. package/template-ssr-svelte-ts/src/app.css +81 -0
  107. package/template-ssr-svelte-ts/src/assets/svelte.svg +1 -0
  108. package/template-ssr-svelte-ts/src/entry-client.ts +7 -0
  109. package/template-ssr-svelte-ts/src/entry-server.ts +6 -0
  110. package/template-ssr-svelte-ts/src/lib/Counter.svelte +10 -0
  111. package/template-ssr-svelte-ts/src/vite-env.d.ts +2 -0
  112. package/template-ssr-svelte-ts/svelte.config.js +7 -0
  113. package/template-ssr-svelte-ts/tsconfig.json +21 -0
  114. package/template-ssr-svelte-ts/tsconfig.node.json +8 -0
  115. package/template-ssr-svelte-ts/vite.config.ts +13 -0
  116. package/template-ssr-transform/README.md +3 -0
  117. package/template-ssr-transform/_gitignore +24 -0
  118. package/template-ssr-transform/package.json +12 -0
  119. package/template-ssr-transform/src/foo.js +3 -0
  120. package/template-ssr-transform/src/main.js +5 -0
  121. package/template-ssr-transform/test.js +13 -0
  122. package/template-ssr-vanilla/_gitignore +24 -0
  123. package/template-ssr-vanilla/index.html +14 -0
  124. package/template-ssr-vanilla/package.json +22 -0
  125. package/template-ssr-vanilla/public/vite.svg +1 -0
  126. package/template-ssr-vanilla/server.js +71 -0
  127. package/template-ssr-vanilla/src/counter.js +9 -0
  128. package/template-ssr-vanilla/src/entry-client.js +5 -0
  129. package/template-ssr-vanilla/src/entry-server.js +22 -0
  130. package/template-ssr-vanilla/src/javascript.svg +1 -0
  131. package/template-ssr-vanilla/src/style.css +97 -0
  132. package/template-ssr-vanilla-ts/_gitignore +24 -0
  133. package/template-ssr-vanilla-ts/index.html +14 -0
  134. package/template-ssr-vanilla-ts/package.json +25 -0
  135. package/template-ssr-vanilla-ts/public/vite.svg +1 -0
  136. package/template-ssr-vanilla-ts/server.js +71 -0
  137. package/template-ssr-vanilla-ts/src/counter.ts +9 -0
  138. package/template-ssr-vanilla-ts/src/entry-client.ts +5 -0
  139. package/template-ssr-vanilla-ts/src/entry-server.ts +22 -0
  140. package/template-ssr-vanilla-ts/src/style.css +97 -0
  141. package/template-ssr-vanilla-ts/src/typescript.svg +1 -0
  142. package/template-ssr-vanilla-ts/src/vite-env.d.ts +1 -0
  143. package/template-ssr-vanilla-ts/tsconfig.json +22 -0
  144. package/template-ssr-vanilla-ts/tsconfig.node.json +8 -0
  145. package/template-ssr-vue/.vscode/extensions.json +3 -0
  146. package/template-ssr-vue/README.md +7 -0
  147. package/template-ssr-vue/_gitignore +24 -0
  148. package/template-ssr-vue/index.html +14 -0
  149. package/template-ssr-vue/package.json +24 -0
  150. package/template-ssr-vue/public/vite.svg +1 -0
  151. package/template-ssr-vue/server.js +71 -0
  152. package/template-ssr-vue/src/App.vue +31 -0
  153. package/template-ssr-vue/src/assets/vue.svg +1 -0
  154. package/template-ssr-vue/src/components/HelloWorld.vue +40 -0
  155. package/template-ssr-vue/src/entry-client.js +6 -0
  156. package/template-ssr-vue/src/entry-server.js +15 -0
  157. package/template-ssr-vue/src/main.js +10 -0
  158. package/template-ssr-vue/src/style.css +90 -0
  159. package/template-ssr-vue/vite.config.js +7 -0
  160. package/template-ssr-vue-ts/.vscode/extensions.json +3 -0
  161. package/template-ssr-vue-ts/README.md +16 -0
  162. package/template-ssr-vue-ts/_gitignore +24 -0
  163. package/template-ssr-vue-ts/index.html +14 -0
  164. package/template-ssr-vue-ts/package.json +26 -0
  165. package/template-ssr-vue-ts/public/vite.svg +1 -0
  166. package/template-ssr-vue-ts/server.js +71 -0
  167. package/template-ssr-vue-ts/src/App.vue +31 -0
  168. package/template-ssr-vue-ts/src/assets/vue.svg +1 -0
  169. package/template-ssr-vue-ts/src/components/HelloWorld.vue +38 -0
  170. package/template-ssr-vue-ts/src/entry-client.ts +6 -0
  171. package/template-ssr-vue-ts/src/entry-server.ts +15 -0
  172. package/template-ssr-vue-ts/src/main.ts +10 -0
  173. package/template-ssr-vue-ts/src/style.css +81 -0
  174. package/template-ssr-vue-ts/src/vite-env.d.ts +7 -0
  175. package/template-ssr-vue-ts/tsconfig.json +18 -0
  176. package/template-ssr-vue-ts/tsconfig.node.json +9 -0
  177. package/template-ssr-vue-ts/vite.config.ts +7 -0
@@ -0,0 +1,97 @@
1
+ :root {
2
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3
+ font-size: 16px;
4
+ line-height: 24px;
5
+ font-weight: 400;
6
+
7
+ color-scheme: light dark;
8
+ color: rgba(255, 255, 255, 0.87);
9
+ background-color: #242424;
10
+
11
+ font-synthesis: none;
12
+ text-rendering: optimizeLegibility;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ -webkit-text-size-adjust: 100%;
16
+ }
17
+
18
+ a {
19
+ font-weight: 500;
20
+ color: #646cff;
21
+ text-decoration: inherit;
22
+ }
23
+ a:hover {
24
+ color: #535bf2;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ display: flex;
30
+ place-items: center;
31
+ min-width: 320px;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ h1 {
36
+ font-size: 3.2em;
37
+ line-height: 1.1;
38
+ }
39
+
40
+ #app {
41
+ max-width: 1280px;
42
+ margin: 0 auto;
43
+ padding: 2rem;
44
+ text-align: center;
45
+ }
46
+
47
+ .logo {
48
+ height: 6em;
49
+ padding: 1.5em;
50
+ will-change: filter;
51
+ }
52
+ .logo:hover {
53
+ filter: drop-shadow(0 0 2em #646cffaa);
54
+ }
55
+ .logo.vanilla:hover {
56
+ filter: drop-shadow(0 0 2em #f7df1eaa);
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
+ }
@@ -0,0 +1,11 @@
1
+ import { defineConfig } from "vite";
2
+
3
+ export default defineConfig({
4
+ build: {
5
+ lib: {
6
+ entry: './lib/main.js',
7
+ name: 'Counter',
8
+ fileName: 'counter'
9
+ }
10
+ }
11
+ })
@@ -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?
@@ -0,0 +1 @@
1
+ export function setupCounter(element: HTMLButtonElement): void
@@ -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 App</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
@@ -0,0 +1,9 @@
1
+ export function setupCounter(element: HTMLButtonElement) {
2
+ let counter = 0
3
+ const setCounter = (count: number) => {
4
+ counter = count
5
+ element.innerHTML = `count is ${counter}`
6
+ }
7
+ element.addEventListener('click', () => setCounter(++counter))
8
+ setCounter(0)
9
+ }
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "vite-starter",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "files": ["dist", "index.d.ts"],
7
+ "main": "./dist/counter.umd.cjs",
8
+ "module": "./dist/counter.js",
9
+ "types": "./index.d.ts",
10
+ "exports": {
11
+ "types": "./index.d.ts",
12
+ "import": "./dist/counter.js",
13
+ "require": "./dist/counter.umd.cjs"
14
+ },
15
+ "scripts": {
16
+ "dev": "vite",
17
+ "build": "tsc && vite build"
18
+ },
19
+ "devDependencies": {
20
+ "typescript": "^4.6.4",
21
+ "vite": "^3.0.1"
22
+ }
23
+ }
@@ -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>
@@ -0,0 +1,23 @@
1
+ import './style.css'
2
+ import typescriptLogo from './typescript.svg'
3
+ import { setupCounter } from '../lib/main'
4
+
5
+ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
6
+ <div>
7
+ <a href="https://vitejs.dev" target="_blank">
8
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
9
+ </a>
10
+ <a href="https://www.typescriptlang.org/" target="_blank">
11
+ <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
12
+ </a>
13
+ <h1>Vite + TypeScript</h1>
14
+ <div class="card">
15
+ <button id="counter" type="button"></button>
16
+ </div>
17
+ <p class="read-the-docs">
18
+ Click on the Vite and TypeScript logos to learn more
19
+ </p>
20
+ </div>
21
+ `
22
+
23
+ setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
@@ -0,0 +1,97 @@
1
+ :root {
2
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3
+ font-size: 16px;
4
+ line-height: 24px;
5
+ font-weight: 400;
6
+
7
+ color-scheme: light dark;
8
+ color: rgba(255, 255, 255, 0.87);
9
+ background-color: #242424;
10
+
11
+ font-synthesis: none;
12
+ text-rendering: optimizeLegibility;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ -webkit-text-size-adjust: 100%;
16
+ }
17
+
18
+ a {
19
+ font-weight: 500;
20
+ color: #646cff;
21
+ text-decoration: inherit;
22
+ }
23
+ a:hover {
24
+ color: #535bf2;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ display: flex;
30
+ place-items: center;
31
+ min-width: 320px;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ h1 {
36
+ font-size: 3.2em;
37
+ line-height: 1.1;
38
+ }
39
+
40
+ #app {
41
+ max-width: 1280px;
42
+ margin: 0 auto;
43
+ padding: 2rem;
44
+ text-align: center;
45
+ }
46
+
47
+ .logo {
48
+ height: 6em;
49
+ padding: 1.5em;
50
+ will-change: filter;
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
+ }
@@ -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>
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
@@ -0,0 +1,20 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ESNext",
4
+ "useDefineForClassFields": true,
5
+ "module": "ESNext",
6
+ "lib": ["ESNext", "DOM"],
7
+ "moduleResolution": "Node",
8
+ "strict": true,
9
+ "sourceMap": true,
10
+ "resolveJsonModule": true,
11
+ "isolatedModules": true,
12
+ "esModuleInterop": true,
13
+ "noEmit": true,
14
+ "noUnusedLocals": true,
15
+ "noUnusedParameters": true,
16
+ "noImplicitReturns": true,
17
+ "skipLibCheck": true
18
+ },
19
+ "include": ["src"]
20
+ }
@@ -0,0 +1,11 @@
1
+ import { defineConfig } from 'vite'
2
+
3
+ export default defineConfig({
4
+ build: {
5
+ lib: {
6
+ entry: './lib/main.ts',
7
+ name: 'Counter',
8
+ fileName: 'counter'
9
+ }
10
+ }
11
+ })
@@ -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?
@@ -0,0 +1,14 @@
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 + Preact</title>
8
+ <!--app-head-->
9
+ </head>
10
+ <body>
11
+ <div id="app"><!--app-html--></div>
12
+ <script type="module" src="/src/entry-client.jsx"></script>
13
+ </body>
14
+ </html>
@@ -0,0 +1,25 @@
1
+ {
2
+ "name": "vite-preact-starter",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "node server",
8
+ "build": "npm run build:client && npm run build:server",
9
+ "build:client": "vite build --ssrManifest --outDir dist/client",
10
+ "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
11
+ "preview": "cross-env NODE_ENV=production node server"
12
+ },
13
+ "dependencies": {
14
+ "compression": "^1.7.4",
15
+ "express": "^4.18.1",
16
+ "preact": "^10.10.0",
17
+ "preact-render-to-string": "^5.2.1",
18
+ "sirv": "^2.0.2"
19
+ },
20
+ "devDependencies": {
21
+ "@preact/preset-vite": "^2.3.0",
22
+ "cross-env": "^7.0.3",
23
+ "vite": "^3.0.1"
24
+ }
25
+ }
@@ -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>
@@ -0,0 +1,71 @@
1
+ import fs from 'node:fs/promises'
2
+ import express from 'express'
3
+
4
+ // Constants
5
+ const isProduction = process.env.NODE_ENV === 'production'
6
+ const port = process.env.PORT || 5173
7
+ const base = process.env.BASE || '/'
8
+
9
+ // Cached production assets
10
+ const templateHtml = isProduction
11
+ ? await fs.readFile('./dist/client/index.html', 'utf-8')
12
+ : ''
13
+ const ssrManifest = isProduction
14
+ ? await fs.readFile('./dist/client/ssr-manifest.json', 'utf-8')
15
+ : undefined
16
+
17
+ // Create http server
18
+ const app = express()
19
+
20
+ // Add Vite or respective production middlewares
21
+ let vite
22
+ if (!isProduction) {
23
+ const { createServer } = await import('vite')
24
+ vite = await createServer({
25
+ server: { middlewareMode: true },
26
+ appType: 'custom',
27
+ base
28
+ })
29
+ app.use(vite.middlewares)
30
+ } else {
31
+ const compression = (await import('compression')).default
32
+ const sirv = (await import('sirv')).default
33
+ app.use(compression())
34
+ app.use(base, sirv('./dist/client', { extensions: [] }))
35
+ }
36
+
37
+ // Serve HTML
38
+ app.use('*', async (req, res) => {
39
+ try {
40
+ const url = req.originalUrl.replace(base, '')
41
+
42
+ let template
43
+ let render
44
+ if (!isProduction) {
45
+ // Always read fresh template in development
46
+ template = await fs.readFile('./index.html', 'utf-8')
47
+ template = await vite.transformIndexHtml(url, template)
48
+ render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render
49
+ } else {
50
+ template = templateHtml
51
+ render = (await import('./dist/server/entry-server.js')).render
52
+ }
53
+
54
+ const rendered = await render(url, ssrManifest)
55
+
56
+ const html = template
57
+ .replace(`<!--app-head-->`, rendered.head ?? '')
58
+ .replace(`<!--app-html-->`, rendered.html ?? '')
59
+
60
+ res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
61
+ } catch (e) {
62
+ vite?.ssrFixStacktrace(e)
63
+ console.log(e.stack)
64
+ res.status(500).end(e.stack)
65
+ }
66
+ })
67
+
68
+ // Start http server
69
+ app.listen(port, () => {
70
+ console.log(`Server started at http://localhost:${port}`)
71
+ })
@@ -0,0 +1,25 @@
1
+ #app {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ }
12
+ .logo:hover {
13
+ filter: drop-shadow(0 0 2em #646cffaa);
14
+ }
15
+ .logo.preact:hover {
16
+ filter: drop-shadow(0 0 2em #673ab8aa);
17
+ }
18
+
19
+ .card {
20
+ padding: 2em;
21
+ }
22
+
23
+ .read-the-docs {
24
+ color: #888;
25
+ }
@@ -0,0 +1,32 @@
1
+ import { useState } from 'preact/hooks'
2
+ import preactLogo from './assets/preact.svg'
3
+ import './app.css'
4
+
5
+ export function App() {
6
+ const [count, setCount] = useState(0)
7
+
8
+ return (
9
+ <>
10
+ <div>
11
+ <a href="https://vitejs.dev" target="_blank">
12
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
13
+ </a>
14
+ <a href="https://preactjs.com" target="_blank">
15
+ <img src={preactLogo} class="logo preact" alt="Preact logo" />
16
+ </a>
17
+ </div>
18
+ <h1>Vite + Preact</h1>
19
+ <div class="card">
20
+ <button onClick={() => setCount((count) => count + 1)}>
21
+ count is {count}
22
+ </button>
23
+ <p>
24
+ Edit <code>src/app.jsx</code> and save to test HMR
25
+ </p>
26
+ </div>
27
+ <p class="read-the-docs">
28
+ Click on the Vite and Preact logos to learn more
29
+ </p>
30
+ </>
31
+ )
32
+ }
@@ -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="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
@@ -0,0 +1,5 @@
1
+ import './index.css'
2
+ import { hydrate } from 'preact'
3
+ import { App } from './app'
4
+
5
+ hydrate(<App />, document.getElementById('app'))
@@ -0,0 +1,7 @@
1
+ import renderToString from 'preact-render-to-string'
2
+ import { App } from './app'
3
+
4
+ export function render() {
5
+ const html = renderToString(<App />)
6
+ return { html }
7
+ }
@@ -0,0 +1,70 @@
1
+ :root {
2
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3
+ font-size: 16px;
4
+ line-height: 24px;
5
+ font-weight: 400;
6
+
7
+ color-scheme: light dark;
8
+ color: rgba(255, 255, 255, 0.87);
9
+ background-color: #242424;
10
+
11
+ font-synthesis: none;
12
+ text-rendering: optimizeLegibility;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ -webkit-text-size-adjust: 100%;
16
+ }
17
+
18
+ a {
19
+ font-weight: 500;
20
+ color: #646cff;
21
+ text-decoration: inherit;
22
+ }
23
+ a:hover {
24
+ color: #535bf2;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ display: flex;
30
+ place-items: center;
31
+ min-width: 320px;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ h1 {
36
+ font-size: 3.2em;
37
+ line-height: 1.1;
38
+ }
39
+
40
+ button {
41
+ border-radius: 8px;
42
+ border: 1px solid transparent;
43
+ padding: 0.6em 1.2em;
44
+ font-size: 1em;
45
+ font-weight: 500;
46
+ font-family: inherit;
47
+ background-color: #1a1a1a;
48
+ cursor: pointer;
49
+ transition: border-color 0.25s;
50
+ }
51
+ button:hover {
52
+ border-color: #646cff;
53
+ }
54
+ button:focus,
55
+ button:focus-visible {
56
+ outline: 4px auto -webkit-focus-ring-color;
57
+ }
58
+
59
+ @media (prefers-color-scheme: light) {
60
+ :root {
61
+ color: #213547;
62
+ background-color: #ffffff;
63
+ }
64
+ a:hover {
65
+ color: #747bff;
66
+ }
67
+ button {
68
+ background-color: #f9f9f9;
69
+ }
70
+ }
@@ -0,0 +1,15 @@
1
+ import { createRequire } from 'module'
2
+ import { defineConfig } from 'vite'
3
+ import preact from '@preact/preset-vite'
4
+
5
+ // https://vitejs.dev/config/
6
+ export default defineConfig({
7
+ plugins: [
8
+ preact({
9
+ babel: {
10
+ // Change cwd to load Preact Babel plugins
11
+ cwd: createRequire(import.meta.url).resolve('@preact/preset-vite')
12
+ }
13
+ })
14
+ ]
15
+ })