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.
Files changed (62) hide show
  1. package/README.md +1 -1
  2. package/index.js +2 -2
  3. package/package.json +3 -3
  4. package/template-deno-lit/deno.json +3 -3
  5. package/template-deno-lit-ts/deno.json +3 -3
  6. package/template-deno-preact/deno.json +5 -5
  7. package/template-deno-preact-ts/deno.json +5 -5
  8. package/template-deno-react/deno.json +8 -8
  9. package/template-deno-react-ts/deno.json +8 -8
  10. package/template-deno-solid/deno.json +5 -5
  11. package/template-deno-solid-ts/deno.json +5 -5
  12. package/template-deno-svelte/deno.json +5 -5
  13. package/template-deno-svelte-ts/deno.json +5 -5
  14. package/template-deno-vanilla/deno.json +3 -3
  15. package/template-deno-vanilla-ts/deno.json +3 -3
  16. package/template-deno-vue/deno.json +5 -5
  17. package/template-deno-vue-ts/deno.json +5 -5
  18. package/template-library/package.json +1 -1
  19. package/template-library-ts/package.json +2 -2
  20. package/template-library-ts/tsconfig.json +3 -3
  21. package/template-ssr-preact/package.json +6 -6
  22. package/template-ssr-preact-ts/package.json +9 -9
  23. package/template-ssr-preact-ts/tsconfig.json +3 -3
  24. package/template-ssr-preact-ts/tsconfig.node.json +2 -2
  25. package/template-ssr-react/package.json +9 -9
  26. package/template-ssr-react-streaming/index.html +1 -1
  27. package/template-ssr-react-streaming/package.json +7 -7
  28. package/template-ssr-react-streaming/server.js +17 -6
  29. package/template-ssr-react-streaming/src/App.jsx +2 -2
  30. package/template-ssr-react-streaming/src/entry-server.jsx +20 -0
  31. package/template-ssr-react-streaming-ts/index.html +1 -1
  32. package/template-ssr-react-streaming-ts/package.json +12 -12
  33. package/template-ssr-react-streaming-ts/server.js +17 -6
  34. package/template-ssr-react-streaming-ts/src/App.tsx +2 -2
  35. package/template-ssr-react-streaming-ts/src/entry-server.tsx +20 -0
  36. package/template-ssr-react-streaming-ts/src/vite-env.d.ts +8 -0
  37. package/template-ssr-react-streaming-ts/tsconfig.json +3 -3
  38. package/template-ssr-react-streaming-ts/tsconfig.node.json +2 -2
  39. package/template-ssr-react-ts/package.json +12 -12
  40. package/template-ssr-react-ts/tsconfig.json +3 -3
  41. package/template-ssr-react-ts/tsconfig.node.json +2 -2
  42. package/template-ssr-solid/package.json +6 -6
  43. package/template-ssr-solid-ts/package.json +8 -8
  44. package/template-ssr-solid-ts/tsconfig.json +3 -3
  45. package/template-ssr-solid-ts/tsconfig.node.json +2 -2
  46. package/template-ssr-svelte/jsconfig.json +2 -2
  47. package/template-ssr-svelte/package.json +6 -6
  48. package/template-ssr-svelte-ts/package.json +10 -10
  49. package/template-ssr-svelte-ts/tsconfig.json +2 -2
  50. package/template-ssr-svelte-ts/tsconfig.node.json +1 -1
  51. package/template-ssr-transform/package.json +1 -1
  52. package/template-ssr-vanilla/package.json +4 -4
  53. package/template-ssr-vanilla-ts/package.json +7 -7
  54. package/template-ssr-vanilla-ts/tsconfig.json +3 -3
  55. package/template-ssr-vue/package.json +6 -6
  56. package/template-ssr-vue-streaming/package.json +6 -6
  57. package/template-ssr-vue-streaming-ts/package.json +10 -10
  58. package/template-ssr-vue-streaming-ts/tsconfig.json +3 -3
  59. package/template-ssr-vue-streaming-ts/tsconfig.node.json +2 -2
  60. package/template-ssr-vue-ts/package.json +10 -10
  61. package/template-ssr-vue-ts/tsconfig.json +3 -3
  62. 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/en/) version 18+, 20+, 22+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
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.8.0"`,
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.8.0"`,
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.0.1",
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": "^18.0.0 || ^20.0.0 || >=22.0.0"
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.5.1"
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": ["ES2020", "DOM", "DOM.Iterable"]
7
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
8
8
  },
9
9
  "imports": {
10
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
10
+ "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
11
11
  "lit": "npm:lit@^3.2.1",
12
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
11
+ "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5",
12
12
  "lit": "npm:lit@^3.2.1",
13
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
15
- "@preact/preset-vite": "npm:@preact/preset-vite@^2.10.1",
16
- "preact": "npm:preact@^10.26.2",
17
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
15
- "@preact/preset-vite": "npm:@preact/preset-vite@^2.10.1",
16
- "preact": "npm:preact@^10.26.2",
17
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
16
- "@types/react": "npm:@types/react@^19.0.10",
17
- "@types/react-dom": "npm:@types/react-dom@^19.0.4",
18
- "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
19
- "react": "npm:react@^19.0.0",
20
- "react-dom": "npm:react-dom@^19.0.0",
21
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
16
- "@types/react": "npm:@types/react@^19.0.10",
17
- "@types/react-dom": "npm:@types/react-dom@^19.0.4",
18
- "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
19
- "react": "npm:react@^19.0.0",
20
- "react-dom": "npm:react-dom@^19.0.0",
21
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
15
- "solid-js": "npm:solid-js@^1.9.4",
16
- "vite": "npm:vite@^6.1.1",
17
- "vite-plugin-solid": "npm:vite-plugin-solid@^2.11.2"
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": ["ES2020", "DOM", "DOM.Iterable"],
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.4",
15
- "solid-js": "npm:solid-js@^1.9.4",
16
- "vite": "npm:vite@^6.1.1",
17
- "vite-plugin-solid": "npm:vite-plugin-solid@^2.11.2"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^5.0.3",
14
- "svelte": "npm:svelte@^5.20.2",
15
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^5.0.3",
14
- "svelte": "npm:svelte@^5.20.2",
15
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "vite": "npm:vite@^6.1.1"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^5.2.1",
14
- "vite": "npm:vite@^6.1.1",
15
- "vue": "npm:vue@^3.5.13"
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": ["ES2020", "DOM", "DOM.Iterable"]
9
+ "lib": ["ES2022", "DOM", "DOM.Iterable"]
10
10
  },
11
11
  "imports": {
12
- "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
13
- "@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^5.2.1",
14
- "vite": "npm:vite@^6.1.1",
15
- "vue": "npm:vue@^3.5.13"
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
  }
@@ -20,6 +20,6 @@
20
20
  "build": "vite build"
21
21
  },
22
22
  "devDependencies": {
23
- "vite": "^6.1.1"
23
+ "vite": "^7.0.6"
24
24
  }
25
25
  }
@@ -20,7 +20,7 @@
20
20
  "build": "tsc && vite build"
21
21
  },
22
22
  "devDependencies": {
23
- "typescript": "~5.7.3",
24
- "vite": "^6.1.1"
23
+ "typescript": "~5.9.2",
24
+ "vite": "^7.0.6"
25
25
  }
26
26
  }
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "target": "ES2020",
3
+ "target": "es2022",
4
4
  "useDefineForClassFields": true,
5
- "module": "ESNext",
6
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
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.0",
15
- "express": "^5.0.1",
16
- "preact": "^10.26.2",
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.1",
22
- "cross-env": "^7.0.3",
23
- "vite": "^6.1.1"
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.0",
15
- "express": "^5.0.1",
16
- "preact": "^10.26.2",
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.1",
22
- "@types/express": "^5.0.0",
23
- "@types/node": "^22.13.4",
24
- "cross-env": "^7.0.3",
25
- "typescript": "~5.7.3",
26
- "vite": "^6.1.1"
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": "ES2020",
3
+ "target": "es2022",
4
4
  "useDefineForClassFields": true,
5
- "module": "ESNext",
6
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
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": "ES2022",
5
+ "target": "es2023",
6
6
  "lib": ["ES2023"],
7
- "module": "ESNext",
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.0",
15
- "express": "^5.0.1",
16
- "react": "^19.0.0",
17
- "react-dom": "^19.0.0",
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.0.10",
22
- "@types/react-dom": "^19.0.4",
23
- "@vitejs/plugin-react": "^4.3.4",
24
- "cross-env": "^7.0.3",
25
- "vite": "^6.1.1"
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
  }
@@ -9,6 +9,6 @@
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"><!--app-html--></div>
12
- <script type="module" src="/src/entry-client.jsx"></script>
12
+ <script type="module" async src="/src/entry-client.jsx"></script>
13
13
  </body>
14
14
  </html>
@@ -11,15 +11,15 @@
11
11
  "preview": "cross-env NODE_ENV=production node server"
12
12
  },
13
13
  "dependencies": {
14
- "compression": "^1.8.0",
15
- "express": "^5.0.1",
16
- "react": "^19.0.0",
17
- "react-dom": "^19.0.0",
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.3.4",
22
- "cross-env": "^7.0.3",
23
- "vite": "^6.1.1"
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
- res.write(chunk, encoding)
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(htmlEnd)
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
  )
@@ -9,6 +9,6 @@
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"><!--app-html--></div>
12
- <script type="module" src="/src/entry-client.tsx"></script>
12
+ <script type="module" async src="/src/entry-client.tsx"></script>
13
13
  </body>
14
14
  </html>