From d2cadb536d75d454f0575a824a377c3e223537a8 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Fri, 31 Dec 2021 17:09:09 -0600
Subject: [PATCH] use suspense
---
packages/docs-new/package.json | 2 +-
packages/docs-new/src/app.tsx | 43 ++++++++++++---
packages/docs-new/src/entry.client.tsx | 12 ++---
packages/docs-new/src/entry.server.tsx | 20 +++----
packages/docs-new/src/helpers/lazy-named.ts | 11 ++++
packages/docs-new/src/pages/document-page.tsx | 7 ++-
packages/docs-new/src/routes.tsx | 21 --------
pnpm-lock.yaml | 54 ++-----------------
8 files changed, 72 insertions(+), 98 deletions(-)
create mode 100644 packages/docs-new/src/helpers/lazy-named.ts
delete mode 100644 packages/docs-new/src/routes.tsx
diff --git a/packages/docs-new/package.json b/packages/docs-new/package.json
index f153f2f..d80d607 100644
--- a/packages/docs-new/package.json
+++ b/packages/docs-new/package.json
@@ -13,6 +13,7 @@
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-head": "^3.4.0",
+ "react-router": "^6.2.1",
"react-router-dom": "^6.2.1"
},
"devDependencies": {
@@ -28,7 +29,6 @@
"compression": "^1.7.4",
"esno": "^0.13.0",
"postcss": "^8.4.5",
- "react-location": "^3.3.0",
"rehype-highlight": "^5.0.2",
"remark-frontmatter": "^4.0.1",
"tailwindcss": "^3.0.8",
diff --git a/packages/docs-new/src/app.tsx b/packages/docs-new/src/app.tsx
index 46db0b2..4e3456b 100644
--- a/packages/docs-new/src/app.tsx
+++ b/packages/docs-new/src/app.tsx
@@ -1,12 +1,12 @@
import { description } from "reacord/package.json"
+import { lazy, Suspense } from "react"
import { Meta, Title } from "react-head"
-import type { ReactLocation } from "react-location"
-import { Link, Outlet, Router } from "react-location"
-import { routes } from "./routes"
+import { Link, Route, Routes } from "react-router-dom"
+import { lazyNamed } from "./helpers/lazy-named"
-export function App({ location }: { location: ReactLocation }) {
+export function App() {
return (
-
+ <>
Reacord
-
-
+ }>
+
+ } />
+ }>
+ {docs.map(({ route, component: Component }) => (
+ } />
+ ))}
+
+
+
+
)
}
+
+const LandingPage = lazyNamed(
+ "LandingPage",
+ () => import("./pages/landing-page"),
+)
+
+const DocumentPageLayout = lazyNamed(
+ "DocumentPage",
+ () => import("./pages/document-page"),
+)
+
+const docs = Object.entries(import.meta.glob("./docs/*.md")).map(
+ ([path, loadModule]) => ({
+ route: path.replace("./docs/", "").replace(/\.md$/, ""),
+ component: lazy(async () => {
+ const m = await loadModule()
+ return { default: m.default || m }
+ }),
+ }),
+)
diff --git a/packages/docs-new/src/entry.client.tsx b/packages/docs-new/src/entry.client.tsx
index 9cca21c..b675088 100644
--- a/packages/docs-new/src/entry.client.tsx
+++ b/packages/docs-new/src/entry.client.tsx
@@ -1,14 +1,14 @@
import { createRoot } from "react-dom"
import { HeadProvider } from "react-head"
-import { ReactLocation } from "react-location"
+import { BrowserRouter } from "react-router-dom"
import { App } from "./app"
-const location = new ReactLocation()
-
createRoot(document.querySelector("#app")!).render(
-
-
- ,
+
+
+
+
+ ,
)
declare module "react-dom" {
diff --git a/packages/docs-new/src/entry.server.tsx b/packages/docs-new/src/entry.server.tsx
index bc41508..cbc17e2 100644
--- a/packages/docs-new/src/entry.server.tsx
+++ b/packages/docs-new/src/entry.server.tsx
@@ -1,21 +1,21 @@
import { renderToString } from "react-dom/server"
import { HeadProvider } from "react-head"
-import { createMemoryHistory, ReactLocation } from "react-location"
+import { StaticRouter } from "react-router-dom/server"
import { App } from "./app"
export async function render(url: string) {
const headTags: React.ReactElement[] = []
- const location = new ReactLocation({
- history: createMemoryHistory({ initialEntries: [url] }),
- })
-
- const app = renderToString(
-
-
- ,
+ const app = (
+
+
+
+
+
)
+ const appHtml = renderToString(app)
+
const scriptSource = import.meta.env.PROD
? "/entry.client.js"
: "/src/entry.client.tsx"
@@ -36,7 +36,7 @@ export async function render(url: string) {
- ${app}
+ ${appHtml}
`
}
diff --git a/packages/docs-new/src/helpers/lazy-named.ts b/packages/docs-new/src/helpers/lazy-named.ts
new file mode 100644
index 0000000..13e8419
--- /dev/null
+++ b/packages/docs-new/src/helpers/lazy-named.ts
@@ -0,0 +1,11 @@
+import { lazy } from "react"
+
+export function lazyNamed<
+ Key extends string,
+ Component extends React.ComponentType,
+>(key: Key, loadModule: () => Promise>) {
+ return lazy(async () => {
+ const mod = await loadModule()
+ return { default: mod[key] }
+ })
+}
diff --git a/packages/docs-new/src/pages/document-page.tsx b/packages/docs-new/src/pages/document-page.tsx
index 04c755e..48b9936 100644
--- a/packages/docs-new/src/pages/document-page.tsx
+++ b/packages/docs-new/src/pages/document-page.tsx
@@ -1,10 +1,13 @@
-import { Outlet } from "react-location"
+import { Suspense } from "react"
+import { Outlet } from "react-router"
export function DocumentPage() {
return (
<>
Docs
-
+ Loading...}>
+
+
)
}
diff --git a/packages/docs-new/src/routes.tsx b/packages/docs-new/src/routes.tsx
deleted file mode 100644
index ac2a609..0000000
--- a/packages/docs-new/src/routes.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Route } from "react-location"
-
-export const routes: Route[] = [
- {
- path: "/",
- element: () =>
- import("./pages/landing-page").then((m) => ),
- },
- {
- path: "docs",
- element: () =>
- import("./pages/document-page").then((m) => ),
- children: [
- {
- path: "*",
- element: ({ params }) =>
- import(`./docs/${params["*"]}.md`).then((m) => ),
- },
- ],
- },
-]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59b4482..aed7f82 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,7 +129,7 @@ importers:
react: ^18.0.0-rc.0
react-dom: ^18.0.0-rc.0
react-head: ^3.4.0
- react-location: ^3.3.0
+ react-router: ^6.2.1
react-router-dom: ^6.2.1
rehype-highlight: ^5.0.2
remark-frontmatter: ^4.0.1
@@ -143,6 +143,7 @@ importers:
react: 18.0.0-rc.0
react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
react-head: 3.4.0_757a802188413a36d4f24237d13b8e90
+ react-router: 6.2.1_react@18.0.0-rc.0
react-router-dom: 6.2.1_757a802188413a36d4f24237d13b8e90
devDependencies:
'@mapbox/rehype-prism': 0.8.0
@@ -157,7 +158,6 @@ importers:
compression: 1.7.4
esno: 0.13.0_typescript@4.5.4
postcss: 8.4.5
- react-location: 3.3.0_757a802188413a36d4f24237d13b8e90
rehype-highlight: 5.0.2
remark-frontmatter: 4.0.1
tailwindcss: 3.0.8_cefe482e8d38053bbf3d5815e0c551b3
@@ -2171,12 +2171,6 @@ packages:
babel-preset-current-node-syntax: 1.0.1_@babel+core@7.16.5
dev: true
- /babylon/7.0.0-beta.47:
- resolution: {integrity: sha512-+rq2cr4GDhtToEzKFD6KZZMDBXhjFAr9JjPw9pAppZACeEWqNM294j+NdBzkSHYXwzzBmVjZ3nEVJlOhbR2gOQ==}
- engines: {node: '>=6.0.0'}
- hasBin: true
- dev: true
-
/bail/2.0.2:
resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
@@ -2928,11 +2922,6 @@ packages:
requiresBuild: true
dev: true
- /core-js/3.20.1:
- resolution: {integrity: sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==}
- requiresBuild: true
- dev: true
-
/core-util-is/1.0.3:
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
dev: true
@@ -4208,16 +4197,6 @@ packages:
to-regex: 3.0.2
dev: true
- /fast-async/7.0.6:
- resolution: {integrity: sha512-/iUa3eSQC+Xh5tN6QcVLsEsN7b1DaPIoTZo++VpLLIxtdNW2tEmMZex4TcrMeRnBwMOpZwue2CB171wjt5Kgqg==}
- dependencies:
- '@babel/generator': 7.16.5
- '@babel/helper-module-imports': 7.16.7
- babylon: 7.0.0-beta.47
- nodent-runtime: 3.2.1
- nodent-transform: 3.2.9
- dev: true
-
/fast-deep-equal/3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true
@@ -4914,6 +4893,7 @@ packages:
resolution: {integrity: sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==}
dependencies:
'@babel/runtime': 7.16.5
+ dev: false
/homedir-polyfill/1.0.3:
resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
@@ -7300,15 +7280,6 @@ packages:
update-notifier: 5.1.0
dev: true
- /nodent-runtime/3.2.1:
- resolution: {integrity: sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==}
- requiresBuild: true
- dev: true
-
- /nodent-transform/3.2.9:
- resolution: {integrity: sha512-4a5FH4WLi+daH/CGD5o/JWRR8W5tlCkd3nrDSkxbOzscJTyTUITltvOJeQjg3HJ1YgEuNyiPhQbvbtRjkQBByQ==}
- dev: true
-
/nopt/1.0.10:
resolution: {integrity: sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=}
hasBin: true
@@ -8204,21 +8175,6 @@ packages:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
- /react-location/3.3.0_757a802188413a36d4f24237d13b8e90:
- resolution: {integrity: sha512-0ME2sVcldYcTGB4DxbD+00wuXHY9NeACjhub3+MKOsBxnTSMQ5P2XWZZwql5IyL9Fj9IL1CjdUnoT4hCL1bCCQ==}
- peerDependencies:
- react: '>=16'
- react-dom: '>=16'
- dependencies:
- '@babel/runtime': 7.16.5
- core-js: 3.20.1
- fast-async: 7.0.6
- history: 5.2.0
- react: 18.0.0-rc.0
- react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
- ts-toolbelt: 9.6.0
- dev: true
-
/react-reconciler/0.26.2_react@17.0.2:
resolution: {integrity: sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==}
engines: {node: '>=0.10.0'}
@@ -9548,10 +9504,6 @@ packages:
resolution: {integrity: sha512-nXIb1fvdY5CBSrDIblLn73NW0qRDk5yJ0Sk1qPBF560OdJfQp9jhl+0tzcY09OZ9U+6GpeoI9RjwoIKFIoB9MQ==}
dev: true
- /ts-toolbelt/9.6.0:
- resolution: {integrity: sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==}
- dev: true
-
/tsconfig-paths/3.12.0:
resolution: {integrity: sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==}
dependencies: