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: