create-vite-extra 3.0.1 → 4.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/README.md +1 -1
- package/index.js +2 -2
- package/package.json +3 -3
- package/template-deno-lit/deno.json +3 -3
- package/template-deno-lit-ts/deno.json +3 -3
- package/template-deno-preact/deno.json +5 -5
- package/template-deno-preact-ts/deno.json +5 -5
- package/template-deno-react/deno.json +8 -8
- package/template-deno-react-ts/deno.json +8 -8
- package/template-deno-solid/deno.json +5 -5
- package/template-deno-solid-ts/deno.json +5 -5
- package/template-deno-svelte/deno.json +5 -5
- package/template-deno-svelte-ts/deno.json +5 -5
- package/template-deno-vanilla/deno.json +3 -3
- package/template-deno-vanilla-ts/deno.json +3 -3
- package/template-deno-vue/deno.json +5 -5
- package/template-deno-vue-ts/deno.json +5 -5
- package/template-library/package.json +1 -1
- package/template-library-ts/package.json +2 -2
- package/template-library-ts/tsconfig.json +3 -3
- package/template-ssr-preact/package.json +6 -6
- package/template-ssr-preact-ts/package.json +9 -9
- package/template-ssr-preact-ts/tsconfig.json +3 -3
- package/template-ssr-preact-ts/tsconfig.node.json +2 -2
- package/template-ssr-react/package.json +9 -9
- package/template-ssr-react-streaming/index.html +1 -1
- package/template-ssr-react-streaming/package.json +7 -7
- package/template-ssr-react-streaming/server.js +17 -6
- package/template-ssr-react-streaming/src/App.jsx +2 -2
- package/template-ssr-react-streaming/src/entry-server.jsx +20 -0
- package/template-ssr-react-streaming-ts/index.html +1 -1
- package/template-ssr-react-streaming-ts/package.json +12 -12
- package/template-ssr-react-streaming-ts/server.js +17 -6
- package/template-ssr-react-streaming-ts/src/App.tsx +2 -2
- package/template-ssr-react-streaming-ts/src/entry-server.tsx +20 -0
- package/template-ssr-react-streaming-ts/src/vite-env.d.ts +8 -0
- package/template-ssr-react-streaming-ts/tsconfig.json +3 -3
- package/template-ssr-react-streaming-ts/tsconfig.node.json +2 -2
- package/template-ssr-react-ts/package.json +12 -12
- package/template-ssr-react-ts/tsconfig.json +3 -3
- package/template-ssr-react-ts/tsconfig.node.json +2 -2
- package/template-ssr-solid/package.json +6 -6
- package/template-ssr-solid-ts/package.json +8 -8
- package/template-ssr-solid-ts/tsconfig.json +3 -3
- package/template-ssr-solid-ts/tsconfig.node.json +2 -2
- package/template-ssr-svelte/jsconfig.json +2 -2
- package/template-ssr-svelte/package.json +6 -6
- package/template-ssr-svelte-ts/package.json +10 -10
- package/template-ssr-svelte-ts/tsconfig.json +2 -2
- package/template-ssr-svelte-ts/tsconfig.node.json +1 -1
- package/template-ssr-transform/package.json +1 -1
- package/template-ssr-vanilla/package.json +4 -4
- package/template-ssr-vanilla-ts/package.json +7 -7
- package/template-ssr-vanilla-ts/tsconfig.json +3 -3
- package/template-ssr-vue/package.json +6 -6
- package/template-ssr-vue-streaming/package.json +6 -6
- package/template-ssr-vue-streaming-ts/package.json +10 -10
- package/template-ssr-vue-streaming-ts/tsconfig.json +3 -3
- package/template-ssr-vue-streaming-ts/tsconfig.node.json +2 -2
- package/template-ssr-vue-ts/package.json +10 -10
- package/template-ssr-vue-ts/tsconfig.json +3 -3
- package/template-ssr-vue-ts/tsconfig.node.json +2 -2
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Scaffolding Your First Vite Project
|
|
4
4
|
|
|
5
5
|
> **Compatibility Note:**
|
|
6
|
-
> Vite requires [Node.js](https://nodejs.org
|
|
6
|
+
> Vite requires [Node.js](https://nodejs.org) version 20.19+, 22.12+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
|
|
7
7
|
|
|
8
8
|
With NPM:
|
|
9
9
|
|
package/index.js
CHANGED
|
@@ -639,14 +639,14 @@ function setupReactSwc(root, { isTs, isDeno }) {
|
|
|
639
639
|
editFile(path.resolve(root, 'deno.json'), (content) => {
|
|
640
640
|
return content.replace(
|
|
641
641
|
/"@vitejs\/plugin-react": ".+?"/,
|
|
642
|
-
`"@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.
|
|
642
|
+
`"@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.10.2"`,
|
|
643
643
|
)
|
|
644
644
|
})
|
|
645
645
|
} else {
|
|
646
646
|
editFile(path.resolve(root, 'package.json'), (content) => {
|
|
647
647
|
return content.replace(
|
|
648
648
|
/"@vitejs\/plugin-react": ".+?"/,
|
|
649
|
-
`"@vitejs/plugin-react-swc": "^3.
|
|
649
|
+
`"@vitejs/plugin-react-swc": "^3.10.2"`,
|
|
650
650
|
)
|
|
651
651
|
})
|
|
652
652
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-vite-extra",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Bjorn Lu",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"main": "index.js",
|
|
20
20
|
"engines": {
|
|
21
|
-
"node": "^
|
|
21
|
+
"node": "^20.19.0 || >=22.12.0"
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"prompts": "^2.4.2"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"prettier": "^3.
|
|
37
|
+
"prettier": "^3.6.2"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
40
|
"format": "prettier --write .",
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
"build": "deno run -A --node-modules-dir npm:vite build"
|
|
5
5
|
},
|
|
6
6
|
"compilerOptions": {
|
|
7
|
-
"lib": ["
|
|
7
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
8
8
|
},
|
|
9
9
|
"imports": {
|
|
10
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
10
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
11
11
|
"lit": "npm:lit@^3.2.1",
|
|
12
|
-
"vite": "npm:vite@^
|
|
12
|
+
"vite": "npm:vite@^7.0.6"
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
"build": "deno run -A --node-modules-dir npm:vite build"
|
|
5
5
|
},
|
|
6
6
|
"compilerOptions": {
|
|
7
|
-
"lib": ["
|
|
7
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
8
8
|
"experimentalDecorators": true
|
|
9
9
|
},
|
|
10
10
|
"imports": {
|
|
11
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
11
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
12
12
|
"lit": "npm:lit@^3.2.1",
|
|
13
|
-
"vite": "npm:vite@^
|
|
13
|
+
"vite": "npm:vite@^7.0.6"
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "preact"
|
|
12
12
|
},
|
|
13
13
|
"imports": {
|
|
14
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
15
|
-
"@preact/preset-vite": "npm:@preact/preset-vite@^2.10.
|
|
16
|
-
"preact": "npm:preact@^10.
|
|
17
|
-
"vite": "npm:vite@^
|
|
14
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
15
|
+
"@preact/preset-vite": "npm:@preact/preset-vite@^2.10.2",
|
|
16
|
+
"preact": "npm:preact@^10.27.0",
|
|
17
|
+
"vite": "npm:vite@^7.0.6"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "preact"
|
|
12
12
|
},
|
|
13
13
|
"imports": {
|
|
14
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
15
|
-
"@preact/preset-vite": "npm:@preact/preset-vite@^2.10.
|
|
16
|
-
"preact": "npm:preact@^10.
|
|
17
|
-
"vite": "npm:vite@^
|
|
14
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
15
|
+
"@preact/preset-vite": "npm:@preact/preset-vite@^2.10.2",
|
|
16
|
+
"preact": "npm:preact@^10.27.0",
|
|
17
|
+
"vite": "npm:vite@^7.0.6"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "react",
|
|
12
12
|
"jsxImportSourceTypes": "@types/react"
|
|
13
13
|
},
|
|
14
14
|
"imports": {
|
|
15
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
16
|
-
"@types/react": "npm:@types/react@^19.
|
|
17
|
-
"@types/react-dom": "npm:@types/react-dom@^19.
|
|
18
|
-
"@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.
|
|
19
|
-
"react": "npm:react@^19.
|
|
20
|
-
"react-dom": "npm:react-dom@^19.
|
|
21
|
-
"vite": "npm:vite@^
|
|
15
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
16
|
+
"@types/react": "npm:@types/react@^19.1.9",
|
|
17
|
+
"@types/react-dom": "npm:@types/react-dom@^19.1.7",
|
|
18
|
+
"@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.7.0",
|
|
19
|
+
"react": "npm:react@^19.1.1",
|
|
20
|
+
"react-dom": "npm:react-dom@^19.1.1",
|
|
21
|
+
"vite": "npm:vite@^7.0.6"
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "react",
|
|
12
12
|
"jsxImportSourceTypes": "@types/react"
|
|
13
13
|
},
|
|
14
14
|
"imports": {
|
|
15
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
16
|
-
"@types/react": "npm:@types/react@^19.
|
|
17
|
-
"@types/react-dom": "npm:@types/react-dom@^19.
|
|
18
|
-
"@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.
|
|
19
|
-
"react": "npm:react@^19.
|
|
20
|
-
"react-dom": "npm:react-dom@^19.
|
|
21
|
-
"vite": "npm:vite@^
|
|
15
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
16
|
+
"@types/react": "npm:@types/react@^19.1.9",
|
|
17
|
+
"@types/react-dom": "npm:@types/react-dom@^19.1.7",
|
|
18
|
+
"@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.7.0",
|
|
19
|
+
"react": "npm:react@^19.1.1",
|
|
20
|
+
"react-dom": "npm:react-dom@^19.1.1",
|
|
21
|
+
"vite": "npm:vite@^7.0.6"
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "solid-js"
|
|
12
12
|
},
|
|
13
13
|
"imports": {
|
|
14
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
15
|
-
"solid-js": "npm:solid-js@^1.9.
|
|
16
|
-
"vite": "npm:vite@^
|
|
17
|
-
"vite-plugin-solid": "npm:vite-plugin-solid@^2.11.
|
|
14
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
15
|
+
"solid-js": "npm:solid-js@^1.9.7",
|
|
16
|
+
"vite": "npm:vite@^7.0.6",
|
|
17
|
+
"vite-plugin-solid": "npm:vite-plugin-solid@^2.11.8"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
10
10
|
"jsx": "react-jsx",
|
|
11
11
|
"jsxImportSource": "solid-js"
|
|
12
12
|
},
|
|
13
13
|
"imports": {
|
|
14
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
15
|
-
"solid-js": "npm:solid-js@^1.9.
|
|
16
|
-
"vite": "npm:vite@^
|
|
17
|
-
"vite-plugin-solid": "npm:vite-plugin-solid@^2.11.
|
|
14
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
15
|
+
"solid-js": "npm:solid-js@^1.9.7",
|
|
16
|
+
"vite": "npm:vite@^7.0.6",
|
|
17
|
+
"vite-plugin-solid": "npm:vite-plugin-solid@^2.11.8"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^
|
|
14
|
-
"svelte": "npm:svelte@^5.
|
|
15
|
-
"vite": "npm:vite@^
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^6.1.0",
|
|
14
|
+
"svelte": "npm:svelte@^5.37.3",
|
|
15
|
+
"vite": "npm:vite@^7.0.6"
|
|
16
16
|
}
|
|
17
17
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^
|
|
14
|
-
"svelte": "npm:svelte@^5.
|
|
15
|
-
"vite": "npm:vite@^
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^6.1.0",
|
|
14
|
+
"svelte": "npm:svelte@^5.37.3",
|
|
15
|
+
"vite": "npm:vite@^7.0.6"
|
|
16
16
|
}
|
|
17
17
|
}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"vite": "npm:vite@^
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"vite": "npm:vite@^7.0.6"
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"vite": "npm:vite@^
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"vite": "npm:vite@^7.0.6"
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^
|
|
14
|
-
"vite": "npm:vite@^
|
|
15
|
-
"vue": "npm:vue@^3.5.
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^6.0.1",
|
|
14
|
+
"vite": "npm:vite@^7.0.6",
|
|
15
|
+
"vue": "npm:vue@^3.5.18"
|
|
16
16
|
}
|
|
17
17
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
"serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
|
|
7
7
|
},
|
|
8
8
|
"compilerOptions": {
|
|
9
|
-
"lib": ["
|
|
9
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
10
10
|
},
|
|
11
11
|
"imports": {
|
|
12
|
-
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.
|
|
13
|
-
"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^
|
|
14
|
-
"vite": "npm:vite@^
|
|
15
|
-
"vue": "npm:vue@^3.5.
|
|
12
|
+
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
|
|
13
|
+
"@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^6.0.1",
|
|
14
|
+
"vite": "npm:vite@^7.0.6",
|
|
15
|
+
"vue": "npm:vue@^3.5.18"
|
|
16
16
|
}
|
|
17
17
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"compilerOptions": {
|
|
3
|
-
"target": "
|
|
3
|
+
"target": "es2022",
|
|
4
4
|
"useDefineForClassFields": true,
|
|
5
|
-
"module": "
|
|
6
|
-
"lib": ["
|
|
5
|
+
"module": "esnext",
|
|
6
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
7
7
|
"skipLibCheck": true,
|
|
8
8
|
|
|
9
9
|
/* Bundler mode */
|
|
@@ -11,15 +11,15 @@
|
|
|
11
11
|
"preview": "cross-env NODE_ENV=production node server"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"compression": "^1.8.
|
|
15
|
-
"express": "^5.0
|
|
16
|
-
"preact": "^10.
|
|
14
|
+
"compression": "^1.8.1",
|
|
15
|
+
"express": "^5.1.0",
|
|
16
|
+
"preact": "^10.27.0",
|
|
17
17
|
"preact-render-to-string": "^6.5.13",
|
|
18
18
|
"sirv": "^3.0.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@preact/preset-vite": "^2.10.
|
|
22
|
-
"cross-env": "^
|
|
23
|
-
"vite": "^
|
|
21
|
+
"@preact/preset-vite": "^2.10.2",
|
|
22
|
+
"cross-env": "^10.0.0",
|
|
23
|
+
"vite": "^7.0.6"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -11,18 +11,18 @@
|
|
|
11
11
|
"preview": "cross-env NODE_ENV=production node server"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"compression": "^1.8.
|
|
15
|
-
"express": "^5.0
|
|
16
|
-
"preact": "^10.
|
|
14
|
+
"compression": "^1.8.1",
|
|
15
|
+
"express": "^5.1.0",
|
|
16
|
+
"preact": "^10.27.0",
|
|
17
17
|
"preact-render-to-string": "^6.5.13",
|
|
18
18
|
"sirv": "^3.0.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@preact/preset-vite": "^2.10.
|
|
22
|
-
"@types/express": "^5.0.
|
|
23
|
-
"@types/node": "^
|
|
24
|
-
"cross-env": "^
|
|
25
|
-
"typescript": "~5.
|
|
26
|
-
"vite": "^
|
|
21
|
+
"@preact/preset-vite": "^2.10.2",
|
|
22
|
+
"@types/express": "^5.0.3",
|
|
23
|
+
"@types/node": "^24.1.0",
|
|
24
|
+
"cross-env": "^10.0.0",
|
|
25
|
+
"typescript": "~5.9.2",
|
|
26
|
+
"vite": "^7.0.6"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"compilerOptions": {
|
|
3
|
-
"target": "
|
|
3
|
+
"target": "es2022",
|
|
4
4
|
"useDefineForClassFields": true,
|
|
5
|
-
"module": "
|
|
6
|
-
"lib": ["
|
|
5
|
+
"module": "esnext",
|
|
6
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
7
7
|
"skipLibCheck": true,
|
|
8
8
|
"paths": {
|
|
9
9
|
"react": ["./node_modules/preact/compat/"],
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"compilerOptions": {
|
|
3
3
|
"composite": true,
|
|
4
4
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
5
|
-
"target": "
|
|
5
|
+
"target": "es2023",
|
|
6
6
|
"lib": ["ES2023"],
|
|
7
|
-
"module": "
|
|
7
|
+
"module": "esnext",
|
|
8
8
|
"skipLibCheck": true,
|
|
9
9
|
|
|
10
10
|
/* Bundler mode */
|
|
@@ -11,17 +11,17 @@
|
|
|
11
11
|
"preview": "cross-env NODE_ENV=production node server"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"compression": "^1.8.
|
|
15
|
-
"express": "^5.0
|
|
16
|
-
"react": "^19.
|
|
17
|
-
"react-dom": "^19.
|
|
14
|
+
"compression": "^1.8.1",
|
|
15
|
+
"express": "^5.1.0",
|
|
16
|
+
"react": "^19.1.1",
|
|
17
|
+
"react-dom": "^19.1.1",
|
|
18
18
|
"sirv": "^3.0.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@types/react": "^19.
|
|
22
|
-
"@types/react-dom": "^19.
|
|
23
|
-
"@vitejs/plugin-react": "^4.
|
|
24
|
-
"cross-env": "^
|
|
25
|
-
"vite": "^
|
|
21
|
+
"@types/react": "^19.1.9",
|
|
22
|
+
"@types/react-dom": "^19.1.7",
|
|
23
|
+
"@vitejs/plugin-react": "^4.7.0",
|
|
24
|
+
"cross-env": "^10.0.0",
|
|
25
|
+
"vite": "^7.0.6"
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -11,15 +11,15 @@
|
|
|
11
11
|
"preview": "cross-env NODE_ENV=production node server"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"compression": "^1.8.
|
|
15
|
-
"express": "^5.0
|
|
16
|
-
"react": "^19.
|
|
17
|
-
"react-dom": "^19.
|
|
14
|
+
"compression": "^1.8.1",
|
|
15
|
+
"express": "^5.1.0",
|
|
16
|
+
"react": "^19.1.1",
|
|
17
|
+
"react-dom": "^19.1.1",
|
|
18
18
|
"sirv": "^3.0.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@vitejs/plugin-react": "^4.
|
|
22
|
-
"cross-env": "^
|
|
23
|
-
"vite": "^
|
|
21
|
+
"@vitejs/plugin-react": "^4.7.0",
|
|
22
|
+
"cross-env": "^10.0.0",
|
|
23
|
+
"vite": "^7.0.6"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -65,21 +65,32 @@ app.use('*all', async (req, res) => {
|
|
|
65
65
|
res.status(didError ? 500 : 200)
|
|
66
66
|
res.set({ 'Content-Type': 'text/html' })
|
|
67
67
|
|
|
68
|
+
const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
|
|
69
|
+
let htmlEnded = false
|
|
70
|
+
|
|
68
71
|
const transformStream = new Transform({
|
|
69
72
|
transform(chunk, encoding, callback) {
|
|
70
|
-
|
|
73
|
+
// See entry-server.jsx for more details of this code
|
|
74
|
+
if (!htmlEnded) {
|
|
75
|
+
chunk = chunk.toString()
|
|
76
|
+
if (chunk.endsWith('<vite-streaming-end></vite-streaming-end>')) {
|
|
77
|
+
res.write(chunk.slice(0, -41) + htmlEnd, 'utf-8')
|
|
78
|
+
} else {
|
|
79
|
+
res.write(chunk, 'utf-8')
|
|
80
|
+
}
|
|
81
|
+
} else {
|
|
82
|
+
res.write(chunk, encoding)
|
|
83
|
+
}
|
|
71
84
|
callback()
|
|
72
85
|
},
|
|
73
86
|
})
|
|
74
87
|
|
|
75
|
-
const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
|
|
76
|
-
|
|
77
|
-
res.write(htmlStart)
|
|
78
|
-
|
|
79
88
|
transformStream.on('finish', () => {
|
|
80
|
-
res.end(
|
|
89
|
+
res.end()
|
|
81
90
|
})
|
|
82
91
|
|
|
92
|
+
res.write(htmlStart)
|
|
93
|
+
|
|
83
94
|
pipe(transformStream)
|
|
84
95
|
},
|
|
85
96
|
onError(error) {
|
|
@@ -7,7 +7,7 @@ const Card = lazy(() => import('./Card'))
|
|
|
7
7
|
|
|
8
8
|
function App() {
|
|
9
9
|
return (
|
|
10
|
-
|
|
10
|
+
<main>
|
|
11
11
|
<div>
|
|
12
12
|
<a href="https://vite.dev" target="_blank">
|
|
13
13
|
<img src="/vite.svg" className="logo" alt="Vite logo" />
|
|
@@ -25,7 +25,7 @@ function App() {
|
|
|
25
25
|
<p className="read-the-docs">
|
|
26
26
|
Click on the Vite and React logos to learn more
|
|
27
27
|
</p>
|
|
28
|
-
|
|
28
|
+
</main>
|
|
29
29
|
)
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -2,6 +2,25 @@ import { StrictMode } from 'react'
|
|
|
2
2
|
import { renderToPipeableStream } from 'react-dom/server'
|
|
3
3
|
import App from './App'
|
|
4
4
|
|
|
5
|
+
/*
|
|
6
|
+
React SSR streaming with Suspense works by adding JS code to the end of the
|
|
7
|
+
HTML to update the suspended element in the client side. However, there are 2
|
|
8
|
+
issues when integrating it in Vite with React's `renderToPipeableStream` API:
|
|
9
|
+
|
|
10
|
+
1. The API requires a parent element for Suspense for the above behavior to
|
|
11
|
+
work, otherwise suspended elements will be awaited in-place, resulting in
|
|
12
|
+
slow streaming.
|
|
13
|
+
|
|
14
|
+
2. The API stalls the stream to later append the JS code, causing us to unable
|
|
15
|
+
to add the trailing HTML code (the part after `<!--app-html-->` in index.html).
|
|
16
|
+
This is because React assumes full control of the entire HTML output, which
|
|
17
|
+
isn't feasible here as Vite requires HTML files as entrypoints and for bundling.
|
|
18
|
+
|
|
19
|
+
The solution here is to ensure a parent element (`<main>` in `<App/>`), and a
|
|
20
|
+
custom element (`<vite-streaming-end>`) to detect when React has finished
|
|
21
|
+
rendering its main content so we can render Vite's HTML after it.
|
|
22
|
+
*/
|
|
23
|
+
|
|
5
24
|
/**
|
|
6
25
|
* @param {string} _url
|
|
7
26
|
* @param {import('react-dom/server').RenderToPipeableStreamOptions} [options]
|
|
@@ -10,6 +29,7 @@ export function render(_url, options) {
|
|
|
10
29
|
return renderToPipeableStream(
|
|
11
30
|
<StrictMode>
|
|
12
31
|
<App />
|
|
32
|
+
<vite-streaming-end></vite-streaming-end>
|
|
13
33
|
</StrictMode>,
|
|
14
34
|
options,
|
|
15
35
|
)
|