create-vite-extra 0.1.7 → 0.1.9

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 (77) hide show
  1. package/README.md +23 -21
  2. package/index.js +21 -0
  3. package/package.json +4 -3
  4. package/template-deno-lit/README.md +1 -1
  5. package/template-deno-lit/deno.json +2 -2
  6. package/template-deno-lit/vite.config.mjs +2 -2
  7. package/template-deno-preact/README.md +1 -1
  8. package/template-deno-preact/deno.json +3 -3
  9. package/template-deno-preact/vite.config.mjs +4 -4
  10. package/template-deno-react/README.md +1 -1
  11. package/template-deno-react/deno.json +3 -3
  12. package/template-deno-react/vite.config.mjs +4 -4
  13. package/template-deno-solid/README.md +30 -0
  14. package/template-deno-solid/deno.json +8 -0
  15. package/template-deno-solid/index.html +13 -0
  16. package/template-deno-solid/public/vite-deno.svg +36 -0
  17. package/template-deno-solid/public/vite.svg +1 -0
  18. package/template-deno-solid/src/App.css +26 -0
  19. package/template-deno-solid/src/App.jsx +35 -0
  20. package/template-deno-solid/src/assets/solid.svg +1 -0
  21. package/template-deno-solid/src/index.css +70 -0
  22. package/template-deno-solid/src/main.jsx +7 -0
  23. package/template-deno-solid/vite.config.mjs +9 -0
  24. package/template-deno-svelte/README.md +1 -1
  25. package/template-deno-svelte/deno.json +3 -3
  26. package/template-deno-svelte/src/App.svelte +2 -2
  27. package/template-deno-svelte/vite.config.mjs +3 -3
  28. package/template-deno-vanilla/deno.json +3 -3
  29. package/template-deno-vue/README.md +1 -1
  30. package/template-deno-vue/deno.json +3 -3
  31. package/template-deno-vue/vite.config.mjs +3 -3
  32. package/template-library/package.json +2 -2
  33. package/template-library-ts/package.json +3 -3
  34. package/template-ssr-preact/package.json +4 -4
  35. package/template-ssr-preact/src/app.css +1 -0
  36. package/template-ssr-preact-ts/package.json +6 -6
  37. package/template-ssr-preact-ts/src/app.css +1 -0
  38. package/template-ssr-preact-ts/tsconfig.node.json +0 -1
  39. package/template-ssr-react/package.json +5 -5
  40. package/template-ssr-react-ts/package.json +6 -6
  41. package/template-ssr-react-ts/tsconfig.node.json +0 -1
  42. package/template-ssr-solid/_gitignore +24 -0
  43. package/template-ssr-solid/index.html +14 -0
  44. package/template-ssr-solid/package.json +24 -0
  45. package/template-ssr-solid/public/vite.svg +1 -0
  46. package/template-ssr-solid/server.js +74 -0
  47. package/template-ssr-solid/src/App.css +26 -0
  48. package/template-ssr-solid/src/App.jsx +34 -0
  49. package/template-ssr-solid/src/assets/solid.svg +1 -0
  50. package/template-ssr-solid/src/entry-client.jsx +6 -0
  51. package/template-ssr-solid/src/entry-server.jsx +7 -0
  52. package/template-ssr-solid/src/index.css +70 -0
  53. package/template-ssr-solid/vite.config.js +7 -0
  54. package/template-ssr-solid-ts/_gitignore +24 -0
  55. package/template-ssr-solid-ts/index.html +14 -0
  56. package/template-ssr-solid-ts/package.json +24 -0
  57. package/template-ssr-solid-ts/public/vite.svg +1 -0
  58. package/template-ssr-solid-ts/server.js +74 -0
  59. package/template-ssr-solid-ts/src/App.css +26 -0
  60. package/template-ssr-solid-ts/src/App.tsx +34 -0
  61. package/template-ssr-solid-ts/src/assets/solid.svg +1 -0
  62. package/template-ssr-solid-ts/src/entry-client.tsx +6 -0
  63. package/template-ssr-solid-ts/src/entry-server.tsx +7 -0
  64. package/template-ssr-solid-ts/src/index.css +70 -0
  65. package/template-ssr-solid-ts/src/vite-env.d.ts +1 -0
  66. package/template-ssr-solid-ts/tsconfig.json +22 -0
  67. package/template-ssr-solid-ts/tsconfig.node.json +14 -0
  68. package/template-ssr-solid-ts/vite.config.ts +7 -0
  69. package/template-ssr-svelte/package.json +4 -4
  70. package/template-ssr-svelte/src/App.svelte +2 -2
  71. package/template-ssr-svelte-ts/package.json +7 -7
  72. package/template-ssr-svelte-ts/src/App.svelte +2 -2
  73. package/template-ssr-transform/package.json +2 -2
  74. package/template-ssr-vanilla/package.json +3 -3
  75. package/template-ssr-vanilla-ts/package.json +4 -4
  76. package/template-ssr-vue/package.json +4 -4
  77. package/template-ssr-vue-ts/package.json +5 -5
package/template-ssr-preact/package.json CHANGED
@@ -12,14 +12,14 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "compression": "^1.7.4",
15
- "express": "^4.18.1",
16
- "preact": "^10.11.0",
17
- "preact-render-to-string": "^5.2.4",
15
+ "express": "^4.18.2",
16
+ "preact": "^10.11.3",
17
+ "preact-render-to-string": "^5.2.6",
18
18
  "sirv": "^2.0.2"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@preact/preset-vite": "^2.4.0",
22
22
  "cross-env": "^7.0.3",
23
- "vite": "^3.1.3"
23
+ "vite": "^3.2.3"
24
24
  }
25
25
  }
package/template-ssr-preact/src/app.css CHANGED
@@ -8,6 +8,7 @@
8
8
  .logo {
9
9
  height: 6em;
10
10
  padding: 1.5em;
11
+ will-change: filter;
11
12
  }
12
13
  .logo:hover {
13
14
  filter: drop-shadow(0 0 2em #646cffaa);
package/template-ssr-preact-ts/package.json CHANGED
@@ -12,16 +12,16 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "compression": "^1.7.4",
15
- "express": "^4.18.1",
16
- "preact": "^10.11.0",
17
- "preact-render-to-string": "^5.2.4",
15
+ "express": "^4.18.2",
16
+ "preact": "^10.11.3",
17
+ "preact-render-to-string": "^5.2.6",
18
18
  "sirv": "^2.0.2"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@preact/preset-vite": "^2.4.0",
22
- "@types/node": "^18.7.21",
22
+ "@types/node": "^18.11.9",
23
23
  "cross-env": "^7.0.3",
24
- "typescript": "^4.8.3",
25
- "vite": "^3.1.3"
24
+ "typescript": "^4.8.4",
25
+ "vite": "^3.2.3"
26
26
  }
27
27
  }
package/template-ssr-preact-ts/src/app.css CHANGED
@@ -8,6 +8,7 @@
8
8
  .logo {
9
9
  height: 6em;
10
10
  padding: 1.5em;
11
+ will-change: filter;
11
12
  }
12
13
  .logo:hover {
13
14
  filter: drop-shadow(0 0 2em #646cffaa);
package/template-ssr-preact-ts/tsconfig.node.json CHANGED
@@ -9,7 +9,6 @@
9
9
  "include": [
10
10
  "vite.config.ts",
11
11
  "src/entry-server.tsx",
12
- "src/app.tsx",
13
12
  "src/preact.d.ts",
14
13
  "src/vite-env.d.ts"
15
14
  ]
package/template-ssr-react/package.json CHANGED
@@ -12,16 +12,16 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "compression": "^1.7.4",
15
- "express": "^4.18.1",
15
+ "express": "^4.18.2",
16
16
  "react": "^18.2.0",
17
17
  "react-dom": "^18.2.0",
18
18
  "sirv": "^2.0.2"
19
19
  },
20
20
  "devDependencies": {
21
- "@types/react": "^18.0.21",
22
- "@types/react-dom": "^18.0.6",
23
- "@vitejs/plugin-react": "^2.1.0",
21
+ "@types/react": "^18.0.25",
22
+ "@types/react-dom": "^18.0.9",
23
+ "@vitejs/plugin-react": "^2.2.0",
24
24
  "cross-env": "^7.0.3",
25
- "vite": "^3.1.3"
25
+ "vite": "^3.2.3"
26
26
  }
27
27
  }
package/template-ssr-react-ts/package.json CHANGED
@@ -12,17 +12,17 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "compression": "^1.7.4",
15
- "express": "^4.18.1",
15
+ "express": "^4.18.2",
16
16
  "react": "^18.2.0",
17
17
  "react-dom": "^18.2.0",
18
18
  "sirv": "^2.0.2"
19
19
  },
20
20
  "devDependencies": {
21
- "@types/react": "^18.0.21",
22
- "@types/react-dom": "^18.0.6",
23
- "@vitejs/plugin-react": "^2.1.0",
21
+ "@types/react": "^18.0.25",
22
+ "@types/react-dom": "^18.0.9",
23
+ "@vitejs/plugin-react": "^2.2.0",
24
24
  "cross-env": "^7.0.3",
25
- "typescript": "^4.8.3",
26
- "vite": "^3.1.3"
25
+ "typescript": "^4.8.4",
26
+ "vite": "^3.2.3"
27
27
  }
28
28
  }
package/template-ssr-react-ts/tsconfig.node.json CHANGED
@@ -9,7 +9,6 @@
9
9
  "include": [
10
10
  "vite.config.ts",
11
11
  "src/entry-server.tsx",
12
- "src/App.tsx",
13
12
  "src/vite-env.d.ts"
14
13
  ]
15
14
  }
package/template-ssr-solid/_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-solid/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 + Solid</title>
8
+ <!--app-head-->
9
+ </head>
10
+ <body>
11
+ <div id="root"><!--app-html--></div>
12
+ <script type="module" src="/src/entry-client.jsx"></script>
13
+ </body>
14
+ </html>
package/template-ssr-solid/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "vite-solid-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.2",
16
+ "sirv": "^2.0.2",
17
+ "solid-js": "^1.6.2"
18
+ },
19
+ "devDependencies": {
20
+ "cross-env": "^7.0.3",
21
+ "vite": "^3.2.3",
22
+ "vite-plugin-solid": "^2.4.0"
23
+ }
24
+ }
package/template-ssr-solid/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-solid/server.js ADDED
@@ -0,0 +1,74 @@
1
+ import fs from 'node:fs/promises'
2
+ import express from 'express'
3
+ import { generateHydrationScript } from 'solid-js/web'
4
+
5
+ // Constants
6
+ const isProduction = process.env.NODE_ENV === 'production'
7
+ const port = process.env.PORT || 5173
8
+ const base = process.env.BASE || '/'
9
+
10
+ // Cached production assets
11
+ const templateHtml = isProduction
12
+ ? await fs.readFile('./dist/client/index.html', 'utf-8')
13
+ : ''
14
+ const ssrManifest = isProduction
15
+ ? await fs.readFile('./dist/client/ssr-manifest.json', 'utf-8')
16
+ : undefined
17
+
18
+ // Create http server
19
+ const app = express()
20
+
21
+ // Add Vite or respective production middlewares
22
+ let vite
23
+ if (!isProduction) {
24
+ const { createServer } = await import('vite')
25
+ vite = await createServer({
26
+ server: { middlewareMode: true },
27
+ appType: 'custom',
28
+ base
29
+ })
30
+ app.use(vite.middlewares)
31
+ } else {
32
+ const compression = (await import('compression')).default
33
+ const sirv = (await import('sirv')).default
34
+ app.use(compression())
35
+ app.use(base, sirv('./dist/client', { extensions: [] }))
36
+ }
37
+
38
+ // Serve HTML
39
+ app.use('*', async (req, res) => {
40
+ try {
41
+ const url = req.originalUrl.replace(base, '')
42
+
43
+ let template
44
+ let render
45
+ if (!isProduction) {
46
+ // Always read fresh template in development
47
+ template = await fs.readFile('./index.html', 'utf-8')
48
+ template = await vite.transformIndexHtml(url, template)
49
+ render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render
50
+ } else {
51
+ template = templateHtml
52
+ render = (await import('./dist/server/entry-server.js')).render
53
+ }
54
+
55
+ const rendered = await render(url, ssrManifest)
56
+
57
+ const head = (rendered.head ?? '') + generateHydrationScript()
58
+
59
+ const html = template
60
+ .replace(`<!--app-head-->`, head)
61
+ .replace(`<!--app-html-->`, rendered.html ?? '')
62
+
63
+ res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
64
+ } catch (e) {
65
+ vite?.ssrFixStacktrace(e)
66
+ console.log(e.stack)
67
+ res.status(500).end(e.stack)
68
+ }
69
+ })
70
+
71
+ // Start http server
72
+ app.listen(port, () => {
73
+ console.log(`Server started at http://localhost:${port}`)
74
+ })
package/template-ssr-solid/src/App.css ADDED
@@ -0,0 +1,26 @@
1
+ #root {
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
+ will-change: filter;
12
+ }
13
+ .logo:hover {
14
+ filter: drop-shadow(0 0 2em #646cffaa);
15
+ }
16
+ .logo.solid:hover {
17
+ filter: drop-shadow(0 0 2em #61dafbaa);
18
+ }
19
+
20
+ .card {
21
+ padding: 2em;
22
+ }
23
+
24
+ .read-the-docs {
25
+ color: #888;
26
+ }
package/template-ssr-solid/src/App.jsx ADDED
@@ -0,0 +1,34 @@
1
+ import { createSignal } from 'solid-js'
2
+ import solidLogo from './assets/solid.svg'
3
+ import './App.css'
4
+
5
+ function App() {
6
+ const [count, setCount] = createSignal(0)
7
+
8
+ return (
9
+ <div class="App">
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://www.solidjs.com" target="_blank">
15
+ <img src={solidLogo} class="logo solid" alt="Solid logo" />
16
+ </a>
17
+ </div>
18
+ <h1>Vite + Solid</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 Solid logos to learn more
29
+ </p>
30
+ </div>
31
+ )
32
+ }
33
+
34
+ export default App
package/template-ssr-solid/src/assets/solid.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
package/template-ssr-solid/src/entry-client.jsx ADDED
@@ -0,0 +1,6 @@
1
+ /* @refresh reload */
2
+ import './index.css'
3
+ import { hydrate } from 'solid-js/web'
4
+ import App from './App'
5
+
6
+ hydrate(() => <App />, document.getElementById('root'))
package/template-ssr-solid/src/entry-server.jsx ADDED
@@ -0,0 +1,7 @@
1
+ import { renderToString } from 'solid-js/web'
2
+ import App from './App'
3
+
4
+ export function render() {
5
+ const html = renderToString(() => <App />)
6
+ return { html }
7
+ }
package/template-ssr-solid/src/index.css ADDED
@@ -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
+ }
package/template-ssr-solid/vite.config.js ADDED
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import solid from 'vite-plugin-solid'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [solid({ ssr: true })]
7
+ })
package/template-ssr-solid-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-solid-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 + Solid</title>
8
+ <!--app-head-->
9
+ </head>
10
+ <body>
11
+ <div id="root"><!--app-html--></div>
12
+ <script type="module" src="/src/entry-client.tsx"></script>
13
+ </body>
14
+ </html>
package/template-ssr-solid-ts/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "vite-solid-ts-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.tsx --outDir dist/server",
11
+ "preview": "cross-env NODE_ENV=production node server"
12
+ },
13
+ "dependencies": {
14
+ "compression": "^1.7.4",
15
+ "express": "^4.18.2",
16
+ "sirv": "^2.0.2",
17
+ "solid-js": "^1.6.2"
18
+ },
19
+ "devDependencies": {
20
+ "cross-env": "^7.0.3",
21
+ "vite": "^3.2.3",
22
+ "vite-plugin-solid": "^2.4.0"
23
+ }
24
+ }
package/template-ssr-solid-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-solid-ts/server.js ADDED
@@ -0,0 +1,74 @@
1
+ import fs from 'node:fs/promises'
2
+ import express from 'express'
3
+ import { generateHydrationScript } from 'solid-js/web'
4
+
5
+ // Constants
6
+ const isProduction = process.env.NODE_ENV === 'production'
7
+ const port = process.env.PORT || 5173
8
+ const base = process.env.BASE || '/'
9
+
10
+ // Cached production assets
11
+ const templateHtml = isProduction
12
+ ? await fs.readFile('./dist/client/index.html', 'utf-8')
13
+ : ''
14
+ const ssrManifest = isProduction
15
+ ? await fs.readFile('./dist/client/ssr-manifest.json', 'utf-8')
16
+ : undefined
17
+
18
+ // Create http server
19
+ const app = express()
20
+
21
+ // Add Vite or respective production middlewares
22
+ let vite
23
+ if (!isProduction) {
24
+ const { createServer } = await import('vite')
25
+ vite = await createServer({
26
+ server: { middlewareMode: true },
27
+ appType: 'custom',
28
+ base
29
+ })
30
+ app.use(vite.middlewares)
31
+ } else {
32
+ const compression = (await import('compression')).default
33
+ const sirv = (await import('sirv')).default
34
+ app.use(compression())
35
+ app.use(base, sirv('./dist/client', { extensions: [] }))
36
+ }
37
+
38
+ // Serve HTML
39
+ app.use('*', async (req, res) => {
40
+ try {
41
+ const url = req.originalUrl.replace(base, '')
42
+
43
+ let template
44
+ let render
45
+ if (!isProduction) {
46
+ // Always read fresh template in development
47
+ template = await fs.readFile('./index.html', 'utf-8')
48
+ template = await vite.transformIndexHtml(url, template)
49
+ render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render
50
+ } else {
51
+ template = templateHtml
52
+ render = (await import('./dist/server/entry-server.js')).render
53
+ }
54
+
55
+ const rendered = await render(url, ssrManifest)
56
+
57
+ const head = (rendered.head ?? '') + generateHydrationScript()
58
+
59
+ const html = template
60
+ .replace(`<!--app-head-->`, head)
61
+ .replace(`<!--app-html-->`, rendered.html ?? '')
62
+
63
+ res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
64
+ } catch (e) {
65
+ vite?.ssrFixStacktrace(e)
66
+ console.log(e.stack)
67
+ res.status(500).end(e.stack)
68
+ }
69
+ })
70
+
71
+ // Start http server
72
+ app.listen(port, () => {
73
+ console.log(`Server started at http://localhost:${port}`)
74
+ })
package/template-ssr-solid-ts/src/App.css ADDED
@@ -0,0 +1,26 @@
1
+ #root {
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
+ will-change: filter;
12
+ }
13
+ .logo:hover {
14
+ filter: drop-shadow(0 0 2em #646cffaa);
15
+ }
16
+ .logo.solid:hover {
17
+ filter: drop-shadow(0 0 2em #61dafbaa);
18
+ }
19
+
20
+ .card {
21
+ padding: 2em;
22
+ }
23
+
24
+ .read-the-docs {
25
+ color: #888;
26
+ }
package/template-ssr-solid-ts/src/App.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { createSignal } from 'solid-js'
2
+ import solidLogo from './assets/solid.svg'
3
+ import './App.css'
4
+
5
+ function App() {
6
+ const [count, setCount] = createSignal(0)
7
+
8
+ return (
9
+ <div class="App">
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://www.solidjs.com" target="_blank">
15
+ <img src={solidLogo} class="logo solid" alt="Solid logo" />
16
+ </a>
17
+ </div>
18
+ <h1>Vite + Solid</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.tsx</code> and save to test HMR
25
+ </p>
26
+ </div>
27
+ <p class="read-the-docs">
28
+ Click on the Vite and Solid logos to learn more
29
+ </p>
30
+ </div>
31
+ )
32
+ }
33
+
34
+ export default App
package/template-ssr-solid-ts/src/assets/solid.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
package/template-ssr-solid-ts/src/entry-client.tsx ADDED
@@ -0,0 +1,6 @@
1
+ /* @refresh reload */
2
+ import './index.css'
3
+ import { hydrate } from 'solid-js/web'
4
+ import App from './App'
5
+
6
+ hydrate(() => <App />, document.getElementById('root') as HTMLElement)