feat: v4 (#96)

* init search * refactor(theme-doc): share pageGroups analysis * search data with group info * improve name * improve code style * save work * upgrade deps * no loger need @types/react-router-dom * upgrade react-dom usage * update deps * keep rollup version align with vite * migrate to react-router v6 * fix ts error * dev mode works * tweak ssr * run types-react-codemod * fix ssr * fix types * simplify ssr config * migrate DemoMdxPlugin to mdx 2.x * TsInfoMdxPlugin works with mdx 2.x * FileTextMdxPlugin works with mdx 2.x * replace ImageMdxPlugin with remcohaszing/remark-mdx-images * add comment * fix routes and topBar links * disable search for now * remove theme-basic * don't need linkBins * chore: publish 4.0.0-alpha.0 * update create-project templates * chore: publish 4.0.0-alpha.1 * fix optimizeDeps * bump deps of templates * fix mdx code tag render * fix antd style * chore: publish alpha * works in node commonjs * fix ssr issue: commonjs interop * tweak test timout * update pnpm.lock * fix ci: taskkill error https://pipelines.actions.githubusercontent.com/serviceHosts/994468f0-9514-4a95-bb54-d52b4298100c/_apis/pipelines/1/runs/209/signedlogcontent/5?urlExpires=2022-11-24T15%3A31%3A48.5125848Z&urlSigningMethod=HMACV1&urlSignature=ijfBRodz0%2FlGqMcPz3vwUYkLYFkU8vHeE2Lp2boZ2gk%3D * prepare to analyze outline info (table of content) at buildtime * tweak windows test ci * improve test-setup * fix ssr on windows * fix typo * outline info render * chore: publish alpha * fix outline render * improve demo * chore: publish alpha * fix import error in cjs env * chore: publish alpha * simplify demos * upgrade antd to 5.x * tweak demo * chore: publish alpha * fix theme style * chore: publish alpha * fix test * improve search * fix anchor link when using hash router * chore: publish alpha * fix ts error * chore: publish alpha * fix build * chore: publish alpha * fix import allPagesOutlines * chore: publish alpha * fix build * fix ci * fix anchor link scroll * improve demos * chore: publish alpha * fix cleanStaticData * OutlineInfoModuleManager should skip update it outline info didn't changed * headings (outlines) update should trigger hmr hot update instead of full reload * chore: publish alpha * make hmr works with mdx files workaround this issue: vitejs/vite-plugin-react#38 * don't show loading state when: - User navigates back to a loaded page. - Hmr update during dev. * improve file names * fix path * fix hydration layout change * chore: publish alpha * better name * update jotai and remove local copy * bundle client modules to reduce browser request during dev and avoid conflict npm package with users * update pnpm lock * jotai provider-less mode * experiment * chore: publish alpha * don't need to build client with tsc; cleanup * update deps * fix ts error * adapt to vite-plugin-react 3.0 breaking change: no longer do jsx transform to .md files * upgrade playwright test * chore: publish alpha * fix warning of useLayoutEffect during ssr * fix react warning * publish alpha * cleanup setup for doc * cleanup * warn for old mdx plugin * update lock * make setupPlugins the default export * update setup * improve vite setup * improve vite setup * update docs * publish alpha * prevent search popup scroll with page * improve mdx setup * fix outline layout * improve search popup style on narrow screen * publish alpha * add an option to turn off search * publish alpha * cleanup deps * improve antd ssr * fix ssr hydrate style flash * publish alpha * react-pages should not couple on @ant-design/cssinjs * alpha * use a rollup plugin to add style import to output bundles * implement a SSR plugin system to decouple vite-pages ssr from antd ssr steps * publish alpha * vite-pages-theme-doc have "type": "module" * pub * support ssr plugin to let user hook into the ssr process * improve ssr plugin * improve ssr plugin system: no longer need vite plugin * improve ssr plugin * fix ssr plugin * fix outline style * cleanup * update deps * remove vite-plugin-mdx * fix cleanStaticData * fix demo * fix demos * publish alpha * update contributing guide * feat: minify html for ssg mode (#102) * feat: minify html for ssg * chore: format Co-authored-by: 阿良仔 <[email protected]>
vitejs · Dec 27, 2022 · a295d29 · a295d29
1 parent ebda73c
commit a295d29
Show file tree

Hide file tree

Showing 169 changed files with 6,637 additions and 6,823 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -3,9 +3,6 @@ packages/**/dist
 packages/**/lib
 packages/playground-temp
 
-packages/react-pages/src/client/jotai/index.js
-packages/react-pages/src/client/jotai/utils.js
-
 doc-site/dist
 doc-site/node_modules
 

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -4,14 +4,21 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch via NPM",
+      "request": "launch",
+      "runtimeArgs": ["run-script", "dev"],
+      "runtimeExecutable": "npm",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node",
+      "cwd": "${fileDirname}"
+    },
     {
       "type": "node",
       "request": "attach",
       "name": "Attach",
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     }
   ]
-}
+}
diff --git a/TODO.md b/TODO.md
@@ -29,7 +29,4 @@ DATA node, graph, lazy/eager node
         - file 2.3
         - file 2.4 (lazy)
 
-- [upgrade to mdx v2](https://github.com/brillout/vite-plugin-mdx#vite-plugin-mdx)
-- upgrade to React 18 and react-router-dom 6.x
-
 bug: routePath don't change when route from a 404 page to another 404 page
diff --git a/doc-site/declare.d.ts b/doc-site/declare.d.ts
diff --git a/doc-site/package.json b/doc-site/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "description": "",
+  "type": "module",
   "scripts": {
     "dev": "vite serve",
     "debug": "node --inspect ./node_modules/vite/bin/vite serve",
@@ -15,20 +16,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.5.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-router-dom": "^5.1.7",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@types/react": "^18.0.26",
+    "@vitejs/plugin-react": "^3.0.0",
     "gh-pages": "^4.0.0",
     "rimraf": "^3.0.2",
-    "serve": "^14.0.1",
-    "vite": "^3.1.0",
+    "serve": "^14.1.2",
+    "vite": "^4.0.1",
     "vite-pages-theme-doc": "workspace:*",
-    "vite-plugin-mdx": "^3.5.11",
     "vite-plugin-react-pages": "workspace:*"
   }
 }
diff --git a/doc-site/pages/404.tsx b/doc-site/pages/404.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 
 const Component404 = () => {
-  return <Redirect to="/" />
+  return <Navigate to="/" replace />
 }
 
 export default Component404
diff --git a/doc-site/pages/_assets/outline-and-search.jpg b/doc-site/pages/_assets/outline-and-search.jpg
diff --git a/doc-site/pages/page-data$.mdx b/doc-site/pages/page-data$.mdx
@@ -82,7 +82,7 @@ As stated in [the theme customization doc](/theme-customization), a theme is a R
 
 Here is the interface of a theme:
 
-<FileText src="../../packages/react-pages/theme.doc.d.ts" syntax="ts">
+<FileText src="../../packages/react-pages/theme.doc.d.ts" syntax="ts" />
 
 > Here is an example implementation of vite-pages theme: [vite-pages-theme-doc](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/theme-doc/src/index.tsx). [This fixture](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/playground/use-theme-doc/pages/_theme.tsx) demonstrate how to use it.
 

diff --git a/doc-site/pages/upgrade-from-v2$.mdx → doc-site/pages/upgrade-from-v2-to-v3$.mdx b/doc-site/pages/upgrade-from-v2$.mdx → doc-site/pages/upgrade-from-v2-to-v3$.mdx
@@ -1,10 +1,10 @@
 ---
-title: Upgrade from v2
-order: 6
+title: Upgrade from v2 to v3
+order: 2
 subGroup: upgrade-guides
 ---
 
-# Upgrade from vite-plugin-react-pages v2
+# Upgrade from v2 to v3
 
 ## Upgrade package versions
 

diff --git a/doc-site/pages/upgrade-from-v3-to-v4$.mdx b/doc-site/pages/upgrade-from-v3-to-v4$.mdx
@@ -0,0 +1,75 @@
+---
+title: Upgrade from v3 to v4
+order: 1
+subGroup: upgrade-guides
+---
+
+# Upgrade from v3 to v4
+
+vite-pages v4 is released with following improvements:
+
+- Support [Vite v4](https://vitejs.dev/guide/migration.html).
+- Upgrade React to [18.x](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html).
+- Upgrade react-router to [6.x](https://reactrouter.com/en/main/upgrading/v5).
+- Upgrade mdx to [2.x](https://mdxjs.com/migrating/v2/).
+- Upgrade antd to [5.x](https://ant.design/docs/react/migration-v5) (for vite-pages-theme-doc).
+- Support [Node.js ECMAScript modules](https://nodejs.org/api/esm.html).
+- Support markdown outline (table of content).
+- Support search.
+
+![outline-and-search](./_assets/outline-and-search.jpg)
+
+The following article will show you the migrate instructions. If you encounter problems, open an issue in the repo. Or checkout the [getting-stated templates](https://vitejs.github.io/vite-plugin-react-pages/#getting-stated) for reference.
+
+## Upstream libraries migration
+
+Most upgrade work for upstream libraries is already done inside `vite-plugin-react-pages` and `vite-pages-theme-doc`. But some migration need to be done in userland, if you are using some old APIs that are dropped by these upstream libraries. For example, you can no longer use `<Switch>` of `react-router`. Checkout the links above for the migration guides of upstream libraries.
+
+We expect upstream libraries migration to be very easy for framwork users, unless you used many `react-router` v5-only APIs.
+
+## Remove vite-plugin-mdx
+
+Since `vite-plugin-mdx` doesn't support mdx v2, vite-pages now includes a builtin mdx plugin. So you should remove the `vite-plugin-mdx` in vite-pages v5.
+
+Update `vite.config.ts`:
+
+```diff
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+- import mdx from 'vite-plugin-mdx'
+import pages from 'vite-plugin-react-pages'
+
+export default defineConfig({
+  plugins: [
+    react(),
+-   mdx(),
+    pages()
+  ],
+})
+```
+
+Notice that `pages()` now return an array of vite plugins(instead of return a plugin). But vite can understand that and apply every plugin in that array. So the invoke pattern of `vite-plugin-react-pages` looks exactly the same as before! You don't need to apply the new builtin mdx plugin manually.
+
+Update `package.json`:
+
+- Remove `vite-plugin-mdx` and `@mdx-js/mdx`.
+- You should upgrade `@mdx-js/react` to `^2.1.5`. It is a peerDependencies of mdx, so it should be installed by your vite project.
+
+```diff
+{
+  "devDependencies": {
+-   "@mdx-js/mdx": "^1.6.22",
+-   "vite-plugin-mdx": "^3.5.11",
+-   "@mdx-js/react": "^1.6.22",
++   "@mdx-js/react": "^2.1.5",
+  }
+}
+```
+
+## Use Node.js ECMAScript modules
+
+The Node.js community is quickly migrating from CommonJS to ECMAScript modules (esm). And we encourage you to run vite on the esm mode of Node.js.
+
+How to enable esm for Node.js? Just add a `"type": "module"` field to the `package.json` of your vite project!
+
+> It is encouraged to have a dedicated `package.json` for your vite project. Your vite project should not share a `package.json` with the npm package that you are publishing (or the worspace package in the project root directory, if you are using monorepo).
diff --git a/doc-site/prettier.config.js b/doc-site/prettier.config.js
diff --git a/packages/theme-basic/src/vite-env.d.ts → doc-site/vite-env.d.ts b/packages/theme-basic/src/vite-env.d.ts → doc-site/vite-env.d.ts
diff --git a/doc-site/vite.config.ts b/doc-site/vite.config.ts
@@ -1,10 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import mdx from 'vite-plugin-mdx'
 import pages from 'vite-plugin-react-pages'
 
 export default defineConfig({
-  plugins: [react(), mdx(), pages()],
+  plugins: [react(), pages()],
   base:
     process.env.GITHUB_PAGES_DEPLOY === 'true'
       ? '/vite-plugin-react-pages/'

diff --git a/package.json b/package.json
@@ -8,53 +8,48 @@
     "build": "pnpm -r --filter='./packages/*' run build",
     "dev": "pnpm -r --parallel --filter='./packages/*' run dev",
     "format": "prettier --write ./**/*.{js,ts,tsx}",
-    "ver": "pnpm recursive --filter create-vite-pages --filter vite-plugin-react-pages --filter vite-pages-theme-basic --filter vite-pages-theme-doc exec -- npm version",
+    "ver": "pnpm recursive --filter create-vite-pages --filter vite-plugin-react-pages --filter vite-pages-theme-doc exec -- npm version",
     "ver:p": "npm run ver -- patch",
     "ver:mi": "npm run ver -- minor",
     "ver:major": "npm run ver -- major",
-    "pub": "pnpm -r publish --filter create-vite-pages --filter vite-plugin-react-pages --filter vite-pages-theme-basic --filter vite-pages-theme-doc",
+    "ver:alpha": "npm run ver -- prerelease --preid alpha",
+    "pub": "pnpm -r publish --filter create-vite-pages --filter vite-plugin-react-pages --filter vite-pages-theme-doc",
     "update-deps": "pnpm -r update -i -L",
-    "update-local-deps": "pnpm update -r vite-plugin-react-pages vite-pages-theme-basic vite-pages-theme-doc --workspace --filter \"!./packages/create-project/**\"",
+    "update-local-deps": "pnpm update -r vite-plugin-react-pages vite-pages-theme-doc --workspace --filter \"!./packages/create-project/**\"",
     "test": "playwright test -c ./test-setup",
     "test-serve": "cross-env VITE_PAGES_MODE=serve pnpm test",
     "test-build": "cross-env VITE_PAGES_MODE=build pnpm test",
     "test-ssr": "cross-env VITE_PAGES_MODE=ssr pnpm test",
     "test-debug": "pnpm test -- --debug",
     "build:docs": "pnpm --filter doc-site run ssr-for-deploy",
-    "postinstall": "node ./scripts/linkBins.js",
     "install-test-deps": "playwright install --with-deps chromium",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@playwright/test": "~1.23.4",
-    "@pnpm/link-bins": "^7.2.4",
-    "@pnpm/logger": "^4.0.0",
-    "@types/node": "^17.0.42",
+    "@playwright/test": "~1.29.0",
+    "@pnpm/link-bins": "^8.0.4",
+    "@pnpm/logger": "^5.0.0",
+    "@types/node": "^18.11.16",
     "@types/wait-on": "^5.3.1",
     "cross-env": "^7.0.3",
     "execa": "^5.1.1",
     "get-port": "^5.1.1",
-    "husky": "^8.0.1",
-    "prettier": "^2.7.1",
+    "husky": "^8.0.2",
+    "prettier": "^2.8.1",
     "sirv": "^2.0.2",
     "slash": "^3.0.0",
-    "typescript": "^4.8.3",
+    "typescript": "^4.9.4",
     "wait-on": "^6.0.1"
   },
   "pnpm": {
     "overrides": {
-      "react": "^17.0.1",
-      "react-dom": "^17.0.1",
       "vite-plugin-react-pages": "workspace:*",
-      "vite-pages-theme-doc": "workspace:*",
-      "vite-pages-theme-basic": "workspace:*"
+      "vite-pages-theme-doc": "workspace:*"
     },
     "peerDependencyRules": {
       "ignoreMissing": [
         "react",
         "react-dom",
-        "@mdx-js/mdx",
-        "@alifd/meet-react",
         "typescript",
         "rollup",
         "@babel/core"

diff --git a/packages/create-project/package.json b/packages/create-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-vite-pages",
-  "version": "3.2.3",
+  "version": "4.0.0-alpha.17",
   "keywords": [
     "vite",
     "react",
@@ -22,7 +22,7 @@
     "cvp": "index.js"
   },
   "dependencies": {
-    "fs-extra": "^10.1.0",
-    "minimist": "^1.2.5"
+    "fs-extra": "^11.1.0",
+    "minimist": "^1.2.7"
   }
 }
diff --git a/packages/create-project/template-app/package.json b/packages/create-project/template-app/package.json
@@ -2,6 +2,7 @@
   "name": "app-demo",
   "version": "1.0.2",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite serve",
     "build": "rimraf dist && vite build --outDir dist && serve -s dist",
@@ -11,22 +12,19 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.5.0"
   },
   "devDependencies": {
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
-    "@types/node": "^17.0.42",
-    "@types/react": "^17.0.3",
-    "@types/react-router-dom": "^5.1.7",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@mdx-js/react": "^2.2.1",
+    "@types/node": "^18.11.16",
+    "@types/react": "^18.0.26",
+    "@vitejs/plugin-react": "^3.0.0",
     "rimraf": "^3.0.2",
-    "serve": "^14.0.1",
-    "vite": "^3.1.0",
-    "vite-pages-theme-doc": "^3.1.4",
-    "vite-plugin-mdx": "^3.5.11",
-    "vite-plugin-react-pages": "^3.1.8"
+    "serve": "^14.1.2",
+    "vite": "^4.0.1",
+    "vite-pages-theme-doc": "^4.0.0-alpha.1",
+    "vite-plugin-react-pages": "^4.0.0-alpha.2"
   }
 }