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.
- package/LICENSE +21 -0
- package/README.md +79 -0
- package/index.js +384 -0
- package/package.json +34 -0
- package/template-library/_gitignore +24 -0
- package/template-library/index.d.ts +1 -0
- package/template-library/index.html +13 -0
- package/template-library/javascript.svg +1 -0
- package/template-library/lib/main.js +9 -0
- package/template-library/main.js +23 -0
- package/template-library/package.json +22 -0
- package/template-library/public/vite.svg +1 -0
- package/template-library/style.css +97 -0
- package/template-library/vite.config.js +11 -0
- package/template-library-ts/_gitignore +24 -0
- package/template-library-ts/index.d.ts +1 -0
- package/template-library-ts/index.html +13 -0
- package/template-library-ts/lib/main.ts +9 -0
- package/template-library-ts/package.json +23 -0
- package/template-library-ts/public/vite.svg +1 -0
- package/template-library-ts/src/main.ts +23 -0
- package/template-library-ts/src/style.css +97 -0
- package/template-library-ts/src/typescript.svg +1 -0
- package/template-library-ts/src/vite-env.d.ts +1 -0
- package/template-library-ts/tsconfig.json +20 -0
- package/template-library-ts/vite.config.ts +11 -0
- package/template-ssr-preact/_gitignore +24 -0
- package/template-ssr-preact/index.html +14 -0
- package/template-ssr-preact/package.json +25 -0
- package/template-ssr-preact/public/vite.svg +1 -0
- package/template-ssr-preact/server.js +71 -0
- package/template-ssr-preact/src/app.css +25 -0
- package/template-ssr-preact/src/app.jsx +32 -0
- package/template-ssr-preact/src/assets/preact.svg +1 -0
- package/template-ssr-preact/src/entry-client.jsx +5 -0
- package/template-ssr-preact/src/entry-server.jsx +7 -0
- package/template-ssr-preact/src/index.css +70 -0
- package/template-ssr-preact/vite.config.js +15 -0
- package/template-ssr-preact-ts/_gitignore +24 -0
- package/template-ssr-preact-ts/index.html +14 -0
- package/template-ssr-preact-ts/package.json +27 -0
- package/template-ssr-preact-ts/public/vite.svg +1 -0
- package/template-ssr-preact-ts/server.js +71 -0
- package/template-ssr-preact-ts/src/app.css +25 -0
- package/template-ssr-preact-ts/src/app.tsx +32 -0
- package/template-ssr-preact-ts/src/assets/preact.svg +1 -0
- package/template-ssr-preact-ts/src/entry-client.tsx +5 -0
- package/template-ssr-preact-ts/src/entry-server.tsx +7 -0
- package/template-ssr-preact-ts/src/index.css +70 -0
- package/template-ssr-preact-ts/src/preact.d.ts +1 -0
- package/template-ssr-preact-ts/src/vite-env.d.ts +1 -0
- package/template-ssr-preact-ts/tsconfig.json +23 -0
- package/template-ssr-preact-ts/tsconfig.node.json +16 -0
- package/template-ssr-preact-ts/vite.config.ts +15 -0
- package/template-ssr-react/_gitignore +24 -0
- package/template-ssr-react/index.html +14 -0
- package/template-ssr-react/package.json +27 -0
- package/template-ssr-react/public/vite.svg +1 -0
- package/template-ssr-react/server.js +71 -0
- package/template-ssr-react/src/App.css +41 -0
- package/template-ssr-react/src/App.jsx +34 -0
- package/template-ssr-react/src/assets/react.svg +1 -0
- package/template-ssr-react/src/entry-client.jsx +11 -0
- package/template-ssr-react/src/entry-server.jsx +12 -0
- package/template-ssr-react/src/index.css +70 -0
- package/template-ssr-react/vite.config.js +7 -0
- package/template-ssr-react-ts/_gitignore +24 -0
- package/template-ssr-react-ts/index.html +14 -0
- package/template-ssr-react-ts/package.json +28 -0
- package/template-ssr-react-ts/public/vite.svg +1 -0
- package/template-ssr-react-ts/server.js +71 -0
- package/template-ssr-react-ts/src/App.css +41 -0
- package/template-ssr-react-ts/src/App.tsx +34 -0
- package/template-ssr-react-ts/src/assets/react.svg +1 -0
- package/template-ssr-react-ts/src/entry-client.tsx +11 -0
- package/template-ssr-react-ts/src/entry-server.tsx +12 -0
- package/template-ssr-react-ts/src/index.css +70 -0
- package/template-ssr-react-ts/src/vite-env.d.ts +1 -0
- package/template-ssr-react-ts/tsconfig.json +21 -0
- package/template-ssr-react-ts/tsconfig.node.json +15 -0
- package/template-ssr-react-ts/vite.config.ts +7 -0
- package/template-ssr-svelte/.vscode/extensions.json +3 -0
- package/template-ssr-svelte/README.md +48 -0
- package/template-ssr-svelte/_gitignore +24 -0
- package/template-ssr-svelte/index.html +14 -0
- package/template-ssr-svelte/jsconfig.json +34 -0
- package/template-ssr-svelte/package.json +24 -0
- package/template-ssr-svelte/public/vite.svg +1 -0
- package/template-ssr-svelte/server.js +71 -0
- package/template-ssr-svelte/src/App.svelte +45 -0
- package/template-ssr-svelte/src/app.css +81 -0
- package/template-ssr-svelte/src/assets/svelte.svg +1 -0
- package/template-ssr-svelte/src/entry-client.js +7 -0
- package/template-ssr-svelte/src/entry-server.js +6 -0
- package/template-ssr-svelte/src/lib/Counter.svelte +10 -0
- package/template-ssr-svelte/src/vite-env.d.ts +2 -0
- package/template-ssr-svelte/vite.config.js +13 -0
- package/template-ssr-svelte-ts/.vscode/extensions.json +3 -0
- package/template-ssr-svelte-ts/README.md +48 -0
- package/template-ssr-svelte-ts/_gitignore +24 -0
- package/template-ssr-svelte-ts/index.html +14 -0
- package/template-ssr-svelte-ts/package.json +29 -0
- package/template-ssr-svelte-ts/public/vite.svg +1 -0
- package/template-ssr-svelte-ts/server.js +71 -0
- package/template-ssr-svelte-ts/src/App.svelte +45 -0
- package/template-ssr-svelte-ts/src/app.css +81 -0
- package/template-ssr-svelte-ts/src/assets/svelte.svg +1 -0
- package/template-ssr-svelte-ts/src/entry-client.ts +7 -0
- package/template-ssr-svelte-ts/src/entry-server.ts +6 -0
- package/template-ssr-svelte-ts/src/lib/Counter.svelte +10 -0
- package/template-ssr-svelte-ts/src/vite-env.d.ts +2 -0
- package/template-ssr-svelte-ts/svelte.config.js +7 -0
- package/template-ssr-svelte-ts/tsconfig.json +21 -0
- package/template-ssr-svelte-ts/tsconfig.node.json +8 -0
- package/template-ssr-svelte-ts/vite.config.ts +13 -0
- package/template-ssr-transform/README.md +3 -0
- package/template-ssr-transform/_gitignore +24 -0
- package/template-ssr-transform/package.json +12 -0
- package/template-ssr-transform/src/foo.js +3 -0
- package/template-ssr-transform/src/main.js +5 -0
- package/template-ssr-transform/test.js +13 -0
- package/template-ssr-vanilla/_gitignore +24 -0
- package/template-ssr-vanilla/index.html +14 -0
- package/template-ssr-vanilla/package.json +22 -0
- package/template-ssr-vanilla/public/vite.svg +1 -0
- package/template-ssr-vanilla/server.js +71 -0
- package/template-ssr-vanilla/src/counter.js +9 -0
- package/template-ssr-vanilla/src/entry-client.js +5 -0
- package/template-ssr-vanilla/src/entry-server.js +22 -0
- package/template-ssr-vanilla/src/javascript.svg +1 -0
- package/template-ssr-vanilla/src/style.css +97 -0
- package/template-ssr-vanilla-ts/_gitignore +24 -0
- package/template-ssr-vanilla-ts/index.html +14 -0
- package/template-ssr-vanilla-ts/package.json +25 -0
- package/template-ssr-vanilla-ts/public/vite.svg +1 -0
- package/template-ssr-vanilla-ts/server.js +71 -0
- package/template-ssr-vanilla-ts/src/counter.ts +9 -0
- package/template-ssr-vanilla-ts/src/entry-client.ts +5 -0
- package/template-ssr-vanilla-ts/src/entry-server.ts +22 -0
- package/template-ssr-vanilla-ts/src/style.css +97 -0
- package/template-ssr-vanilla-ts/src/typescript.svg +1 -0
- package/template-ssr-vanilla-ts/src/vite-env.d.ts +1 -0
- package/template-ssr-vanilla-ts/tsconfig.json +22 -0
- package/template-ssr-vanilla-ts/tsconfig.node.json +8 -0
- package/template-ssr-vue/.vscode/extensions.json +3 -0
- package/template-ssr-vue/README.md +7 -0
- package/template-ssr-vue/_gitignore +24 -0
- package/template-ssr-vue/index.html +14 -0
- package/template-ssr-vue/package.json +24 -0
- package/template-ssr-vue/public/vite.svg +1 -0
- package/template-ssr-vue/server.js +71 -0
- package/template-ssr-vue/src/App.vue +31 -0
- package/template-ssr-vue/src/assets/vue.svg +1 -0
- package/template-ssr-vue/src/components/HelloWorld.vue +40 -0
- package/template-ssr-vue/src/entry-client.js +6 -0
- package/template-ssr-vue/src/entry-server.js +15 -0
- package/template-ssr-vue/src/main.js +10 -0
- package/template-ssr-vue/src/style.css +90 -0
- package/template-ssr-vue/vite.config.js +7 -0
- package/template-ssr-vue-ts/.vscode/extensions.json +3 -0
- package/template-ssr-vue-ts/README.md +16 -0
- package/template-ssr-vue-ts/_gitignore +24 -0
- package/template-ssr-vue-ts/index.html +14 -0
- package/template-ssr-vue-ts/package.json +26 -0
- package/template-ssr-vue-ts/public/vite.svg +1 -0
- package/template-ssr-vue-ts/server.js +71 -0
- package/template-ssr-vue-ts/src/App.vue +31 -0
- package/template-ssr-vue-ts/src/assets/vue.svg +1 -0
- package/template-ssr-vue-ts/src/components/HelloWorld.vue +38 -0
- package/template-ssr-vue-ts/src/entry-client.ts +6 -0
- package/template-ssr-vue-ts/src/entry-server.ts +15 -0
- package/template-ssr-vue-ts/src/main.ts +10 -0
- package/template-ssr-vue-ts/src/style.css +81 -0
- package/template-ssr-vue-ts/src/vite-env.d.ts +7 -0
- package/template-ssr-vue-ts/tsconfig.json +18 -0
- package/template-ssr-vue-ts/tsconfig.node.json +9 -0
- 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,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,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,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
|
+
})
|