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
package/template-ssr-vue/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/template-ssr-vue/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Vue 3 + Vite
2
+
3
+ This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
package/template-ssr-vue/_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/template-ssr-vue/index.html ADDED
@@ -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 + Vue</title>
8
+ <!--app-head-->
9
+ </head>
10
+ <body>
11
+ <div id="app"><!--app-html--></div>
12
+ <script type="module" src="/src/entry-client.js"></script>
13
+ </body>
14
+ </html>
package/template-ssr-vue/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "vite-vue-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.js --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
+ "sirv": "^2.0.2",
17
+ "vue": "^3.2.37"
18
+ },
19
+ "devDependencies": {
20
+ "@vitejs/plugin-vue": "^3.0.1",
21
+ "cross-env": "^7.0.3",
22
+ "vite": "^3.0.1"
23
+ }
24
+ }
package/template-ssr-vue/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/template-ssr-vue/server.js ADDED
@@ -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.js')).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
+ })
package/template-ssr-vue/src/App.vue ADDED
@@ -0,0 +1,31 @@
1
+ <script setup>
2
+ // This starter template is using Vue 3 <script setup> SFCs
3
+ // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
4
+ import HelloWorld from './components/HelloWorld.vue'
5
+ </script>
6
+
7
+ <template>
8
+ <div>
9
+ <a href="https://vitejs.dev" target="_blank">
10
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
11
+ </a>
12
+ <a href="https://vuejs.org/" target="_blank">
13
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
14
+ </a>
15
+ </div>
16
+ <HelloWorld msg="Vite + Vue" />
17
+ </template>
18
+
19
+ <style scoped>
20
+ .logo {
21
+ height: 6em;
22
+ padding: 1.5em;
23
+ will-change: filter;
24
+ }
25
+ .logo:hover {
26
+ filter: drop-shadow(0 0 2em #646cffaa);
27
+ }
28
+ .logo.vue:hover {
29
+ filter: drop-shadow(0 0 2em #42b883aa);
30
+ }
31
+ </style>
package/template-ssr-vue/src/assets/vue.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="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
package/template-ssr-vue/src/components/HelloWorld.vue ADDED
@@ -0,0 +1,40 @@
1
+ <script setup>
2
+ import { ref } from 'vue'
3
+
4
+ defineProps({
5
+ msg: String
6
+ })
7
+
8
+ const count = ref(0)
9
+ </script>
10
+
11
+ <template>
12
+ <h1>{{ msg }}</h1>
13
+
14
+ <div class="card">
15
+ <button type="button" @click="count++">count is {{ count }}</button>
16
+ <p>
17
+ Edit
18
+ <code>components/HelloWorld.vue</code> to test HMR
19
+ </p>
20
+ </div>
21
+
22
+ <p>
23
+ Check out
24
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25
+ >create-vue</a
26
+ >, the official Vue + Vite starter
27
+ </p>
28
+ <p>
29
+ Install
30
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
31
+ in your IDE for a better DX
32
+ </p>
33
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34
+ </template>
35
+
36
+ <style scoped>
37
+ .read-the-docs {
38
+ color: #888;
39
+ }
40
+ </style>
package/template-ssr-vue/src/entry-client.js ADDED
@@ -0,0 +1,6 @@
1
+ import './style.css'
2
+ import { createApp } from './main'
3
+
4
+ const { app } = createApp()
5
+
6
+ app.mount('#app')
package/template-ssr-vue/src/entry-server.js ADDED
@@ -0,0 +1,15 @@
1
+ import { renderToString } from 'vue/server-renderer'
2
+ import { createApp } from './main'
3
+
4
+ export async function render() {
5
+ const { app } = createApp()
6
+
7
+ // passing SSR context object which will be available via useSSRContext()
8
+ // @vitejs/plugin-vue injects code into a component's setup() that registers
9
+ // itself on ctx.modules. After the render, ctx.modules would contain all the
10
+ // components that have been instantiated during this render call.
11
+ const ctx = {}
12
+ const html = await renderToString(app, ctx)
13
+
14
+ return { html }
15
+ }
package/template-ssr-vue/src/main.js ADDED
@@ -0,0 +1,10 @@
1
+ import { createSSRApp } from 'vue'
2
+ import App from './App.vue'
3
+
4
+ // SSR requires a fresh app instance per request, therefore we export a function
5
+ // that creates a fresh app instance. If using Vuex, we'd also be creating a
6
+ // fresh store here.
7
+ export function createApp() {
8
+ const app = createSSRApp(App)
9
+ return { app }
10
+ }
package/template-ssr-vue/src/style.css ADDED
@@ -0,0 +1,90 @@
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
+ a {
28
+ font-weight: 500;
29
+ color: #646cff;
30
+ text-decoration: inherit;
31
+ }
32
+ a:hover {
33
+ color: #535bf2;
34
+ }
35
+
36
+ body {
37
+ margin: 0;
38
+ display: flex;
39
+ place-items: center;
40
+ min-width: 320px;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ h1 {
45
+ font-size: 3.2em;
46
+ line-height: 1.1;
47
+ }
48
+
49
+ button {
50
+ border-radius: 8px;
51
+ border: 1px solid transparent;
52
+ padding: 0.6em 1.2em;
53
+ font-size: 1em;
54
+ font-weight: 500;
55
+ font-family: inherit;
56
+ background-color: #1a1a1a;
57
+ cursor: pointer;
58
+ transition: border-color 0.25s;
59
+ }
60
+ button:hover {
61
+ border-color: #646cff;
62
+ }
63
+ button:focus,
64
+ button:focus-visible {
65
+ outline: 4px auto -webkit-focus-ring-color;
66
+ }
67
+
68
+ .card {
69
+ padding: 2em;
70
+ }
71
+
72
+ #app {
73
+ max-width: 1280px;
74
+ margin: 0 auto;
75
+ padding: 2rem;
76
+ text-align: center;
77
+ }
78
+
79
+ @media (prefers-color-scheme: light) {
80
+ :root {
81
+ color: #213547;
82
+ background-color: #ffffff;
83
+ }
84
+ a:hover {
85
+ color: #747bff;
86
+ }
87
+ button {
88
+ background-color: #f9f9f9;
89
+ }
90
+ }
package/template-ssr-vue/vite.config.js ADDED
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [vue()]
7
+ })
package/template-ssr-vue-ts/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/template-ssr-vue-ts/README.md ADDED
@@ -0,0 +1,16 @@
1
+ # Vue 3 + TypeScript + Vite
2
+
3
+ This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
8
+
9
+ ## Type Support For `.vue` Imports in TS
10
+
11
+ Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
12
+
13
+ 1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
14
+ 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
15
+
16
+ You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
package/template-ssr-vue-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/template-ssr-vue-ts/index.html ADDED
@@ -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 + Vue + TS</title>
8
+ <!--app-head-->
9
+ </head>
10
+ <body>
11
+ <div id="app"><!--app-html--></div>
12
+ <script type="module" src="/src/entry-client.ts"></script>
13
+ </body>
14
+ </html>
package/template-ssr-vue-ts/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "vite-vue-typescript-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.ts --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
+ "sirv": "^2.0.2",
17
+ "vue": "^3.2.37"
18
+ },
19
+ "devDependencies": {
20
+ "@vitejs/plugin-vue": "^3.0.1",
21
+ "cross-env": "^7.0.3",
22
+ "typescript": "^4.6.4",
23
+ "vite": "^3.0.1",
24
+ "vue-tsc": "^0.38.8"
25
+ }
26
+ }
package/template-ssr-vue-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/template-ssr-vue-ts/server.js ADDED
@@ -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.ts')).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
+ })
package/template-ssr-vue-ts/src/App.vue ADDED
@@ -0,0 +1,31 @@
1
+ <script setup lang="ts">
2
+ // This starter template is using Vue 3 <script setup> SFCs
3
+ // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
4
+ import HelloWorld from './components/HelloWorld.vue'
5
+ </script>
6
+
7
+ <template>
8
+ <div>
9
+ <a href="https://vitejs.dev" target="_blank">
10
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
11
+ </a>
12
+ <a href="https://vuejs.org/" target="_blank">
13
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
14
+ </a>
15
+ </div>
16
+ <HelloWorld msg="Vite + Vue" />
17
+ </template>
18
+
19
+ <style scoped>
20
+ .logo {
21
+ height: 6em;
22
+ padding: 1.5em;
23
+ will-change: filter;
24
+ }
25
+ .logo:hover {
26
+ filter: drop-shadow(0 0 2em #646cffaa);
27
+ }
28
+ .logo.vue:hover {
29
+ filter: drop-shadow(0 0 2em #42b883aa);
30
+ }
31
+ </style>
package/template-ssr-vue-ts/src/assets/vue.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="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
package/template-ssr-vue-ts/src/components/HelloWorld.vue ADDED
@@ -0,0 +1,38 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue'
3
+
4
+ defineProps<{ msg: string }>()
5
+
6
+ const count = ref(0)
7
+ </script>
8
+
9
+ <template>
10
+ <h1>{{ msg }}</h1>
11
+
12
+ <div class="card">
13
+ <button type="button" @click="count++">count is {{ count }}</button>
14
+ <p>
15
+ Edit
16
+ <code>components/HelloWorld.vue</code> to test HMR
17
+ </p>
18
+ </div>
19
+
20
+ <p>
21
+ Check out
22
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
23
+ >create-vue</a
24
+ >, the official Vue + Vite starter
25
+ </p>
26
+ <p>
27
+ Install
28
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
29
+ in your IDE for a better DX
30
+ </p>
31
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
32
+ </template>
33
+
34
+ <style scoped>
35
+ .read-the-docs {
36
+ color: #888;
37
+ }
38
+ </style>
package/template-ssr-vue-ts/src/entry-client.ts ADDED
@@ -0,0 +1,6 @@
1
+ import './style.css'
2
+ import { createApp } from './main'
3
+
4
+ const { app } = createApp()
5
+
6
+ app.mount('#app')
package/template-ssr-vue-ts/src/entry-server.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { renderToString } from 'vue/server-renderer'
2
+ import { createApp } from './main'
3
+
4
+ export async function render() {
5
+ const { app } = createApp()
6
+
7
+ // passing SSR context object which will be available via useSSRContext()
8
+ // @vitejs/plugin-vue injects code into a component's setup() that registers
9
+ // itself on ctx.modules. After the render, ctx.modules would contain all the
10
+ // components that have been instantiated during this render call.
11
+ const ctx = {}
12
+ const html = await renderToString(app, ctx)
13
+
14
+ return { html }
15
+ }
package/template-ssr-vue-ts/src/main.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { createSSRApp } from 'vue'
2
+ import App from './App.vue'
3
+
4
+ // SSR requires a fresh app instance per request, therefore we export a function
5
+ // that creates a fresh app instance. If using Vuex, we'd also be creating a
6
+ // fresh store here.
7
+ export function createApp() {
8
+ const app = createSSRApp(App)
9
+ return { app }
10
+ }