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]>

Author: csr632

.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
 

.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>/**"]
     }
   ]
-}
+}

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

doc-site/declare.d.ts

@@ -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:*"
   }
 }

doc-site/package.json

@@ -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

doc-site/pages/404.tsx

@@ -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.
 

doc-site/pages/_assets/outline-and-search.jpg

@@ -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
 

doc-site/pages/page-data$.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).