@docusaurus/core 0.0.0-4850 → 0.0.0-4851
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.
- package/lib/client/App.js +7 -3
- package/lib/client/PendingNavigation.d.ts +2 -6
- package/lib/client/PendingNavigation.js +39 -49
- package/lib/client/clientEntry.js +1 -2
- package/lib/client/docusaurus.js +1 -1
- package/lib/client/preload.d.ts +1 -3
- package/lib/client/preload.js +2 -2
- package/lib/client/serverEntry.js +1 -2
- package/package.json +10 -10
package/lib/client/App.js
CHANGED
|
@@ -6,7 +6,9 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import routes from '@generated/routes';
|
|
9
|
-
import
|
|
9
|
+
import { useLocation } from '@docusaurus/router';
|
|
10
|
+
import normalizeLocation from './normalizeLocation';
|
|
11
|
+
import renderRoutes from '@docusaurus/renderRoutes';
|
|
10
12
|
import { BrowserContextProvider } from './browserContext';
|
|
11
13
|
import { DocusaurusContextProvider } from './docusaurusContext';
|
|
12
14
|
import PendingNavigation from './PendingNavigation';
|
|
@@ -19,6 +21,8 @@ import './clientLifecyclesDispatcher';
|
|
|
19
21
|
import ErrorBoundary from '@docusaurus/ErrorBoundary';
|
|
20
22
|
import Error from '@theme/Error';
|
|
21
23
|
export default function App() {
|
|
24
|
+
const routeElement = renderRoutes(routes);
|
|
25
|
+
const location = useLocation();
|
|
22
26
|
return (<ErrorBoundary fallback={Error}>
|
|
23
27
|
<DocusaurusContextProvider>
|
|
24
28
|
<BrowserContextProvider>
|
|
@@ -26,8 +30,8 @@ export default function App() {
|
|
|
26
30
|
<SiteMetadataDefaults />
|
|
27
31
|
<SiteMetadata />
|
|
28
32
|
<BaseUrlIssueBanner />
|
|
29
|
-
<PendingNavigation
|
|
30
|
-
{
|
|
33
|
+
<PendingNavigation location={normalizeLocation(location)} delay={1000}>
|
|
34
|
+
{routeElement}
|
|
31
35
|
</PendingNavigation>
|
|
32
36
|
</Root>
|
|
33
37
|
</BrowserContextProvider>
|
|
@@ -5,12 +5,9 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import { type RouteComponentProps } from 'react-router-dom';
|
|
9
|
-
import type { RouteConfig } from 'react-router-config';
|
|
10
8
|
import type { Location } from 'history';
|
|
11
9
|
import './nprogress.css';
|
|
12
|
-
declare type Props =
|
|
13
|
-
readonly routes: RouteConfig[];
|
|
10
|
+
declare type Props = {
|
|
14
11
|
readonly delay: number;
|
|
15
12
|
readonly location: Location;
|
|
16
13
|
readonly children: JSX.Element;
|
|
@@ -28,5 +25,4 @@ declare class PendingNavigation extends React.Component<Props, State> {
|
|
|
28
25
|
private stopProgressBar;
|
|
29
26
|
render(): JSX.Element;
|
|
30
27
|
}
|
|
31
|
-
|
|
32
|
-
export default _default;
|
|
28
|
+
export default PendingNavigation;
|
|
@@ -5,11 +5,10 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import { Route
|
|
8
|
+
import { Route } from 'react-router-dom';
|
|
9
9
|
import nprogress from 'nprogress';
|
|
10
10
|
import clientLifecyclesDispatcher from './clientLifecyclesDispatcher';
|
|
11
11
|
import preload from './preload';
|
|
12
|
-
import normalizeLocation from './normalizeLocation';
|
|
13
12
|
import './nprogress.css';
|
|
14
13
|
nprogress.configure({ showSpinner: false });
|
|
15
14
|
class PendingNavigation extends React.Component {
|
|
@@ -25,61 +24,50 @@ class PendingNavigation extends React.Component {
|
|
|
25
24
|
// Intercept location update and still show current route until next route
|
|
26
25
|
// is done loading.
|
|
27
26
|
shouldComponentUpdate(nextProps, nextState) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (routeDidChange) {
|
|
33
|
-
const nextLocation = normalizeLocation(nextProps.location);
|
|
34
|
-
this.startProgressBar(delay);
|
|
35
|
-
// Save the location first.
|
|
36
|
-
this.previousLocation = normalizeLocation(this.props.location);
|
|
37
|
-
this.setState({
|
|
38
|
-
nextRouteHasLoaded: false,
|
|
39
|
-
});
|
|
40
|
-
// Load data while the old screen remains.
|
|
41
|
-
preload(routes, nextLocation.pathname)
|
|
42
|
-
.then(() => {
|
|
43
|
-
clientLifecyclesDispatcher.onRouteUpdate({
|
|
44
|
-
previousLocation: this.previousLocation,
|
|
45
|
-
location: nextLocation,
|
|
46
|
-
});
|
|
47
|
-
// Route has loaded, we can reset previousLocation.
|
|
48
|
-
this.previousLocation = null;
|
|
49
|
-
this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
|
|
50
|
-
const { hash } = nextLocation;
|
|
51
|
-
if (!hash) {
|
|
52
|
-
window.scrollTo(0, 0);
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
const id = decodeURIComponent(hash.substring(1));
|
|
56
|
-
const element = document.getElementById(id);
|
|
57
|
-
if (element) {
|
|
58
|
-
element.scrollIntoView();
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
})
|
|
62
|
-
.catch((e) => console.warn(e));
|
|
63
|
-
return false;
|
|
64
|
-
}
|
|
65
|
-
// There's a pending route transition. Don't update until it's done.
|
|
66
|
-
if (!nextState.nextRouteHasLoaded) {
|
|
67
|
-
return false;
|
|
27
|
+
if (nextProps.location === this.props.location) {
|
|
28
|
+
// `nextRouteHasLoaded` is false means there's a pending route transition.
|
|
29
|
+
// Don't update until it's done.
|
|
30
|
+
return nextState.nextRouteHasLoaded;
|
|
68
31
|
}
|
|
69
|
-
//
|
|
70
|
-
|
|
32
|
+
// props.location being different means the router is trying to navigate to
|
|
33
|
+
// a new route. We will preload the new route.
|
|
34
|
+
const nextLocation = nextProps.location;
|
|
35
|
+
// Save the location first.
|
|
36
|
+
this.previousLocation = this.props.location;
|
|
37
|
+
this.setState({ nextRouteHasLoaded: false });
|
|
38
|
+
this.startProgressBar(this.props.delay);
|
|
39
|
+
// Load data while the old screen remains.
|
|
40
|
+
preload(nextLocation.pathname)
|
|
41
|
+
.then(() => {
|
|
42
|
+
clientLifecyclesDispatcher.onRouteUpdate({
|
|
43
|
+
previousLocation: this.previousLocation,
|
|
44
|
+
location: nextLocation,
|
|
45
|
+
});
|
|
46
|
+
this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
|
|
47
|
+
const { hash } = nextLocation;
|
|
48
|
+
if (!hash) {
|
|
49
|
+
window.scrollTo(0, 0);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
const id = decodeURIComponent(hash.substring(1));
|
|
53
|
+
const element = document.getElementById(id);
|
|
54
|
+
element?.scrollIntoView();
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
.catch((e) => console.warn(e));
|
|
58
|
+
return false;
|
|
71
59
|
}
|
|
72
60
|
clearProgressBarTimeout() {
|
|
73
61
|
if (this.progressBarTimeout) {
|
|
74
|
-
clearTimeout(this.progressBarTimeout);
|
|
62
|
+
window.clearTimeout(this.progressBarTimeout);
|
|
75
63
|
this.progressBarTimeout = null;
|
|
76
64
|
}
|
|
77
65
|
}
|
|
78
66
|
startProgressBar(delay) {
|
|
79
67
|
this.clearProgressBarTimeout();
|
|
80
|
-
this.progressBarTimeout = setTimeout(() => {
|
|
68
|
+
this.progressBarTimeout = window.setTimeout(() => {
|
|
81
69
|
clientLifecyclesDispatcher.onRouteUpdateDelayed({
|
|
82
|
-
location:
|
|
70
|
+
location: this.props.location,
|
|
83
71
|
});
|
|
84
72
|
nprogress.start();
|
|
85
73
|
}, delay);
|
|
@@ -90,7 +78,9 @@ class PendingNavigation extends React.Component {
|
|
|
90
78
|
}
|
|
91
79
|
render() {
|
|
92
80
|
const { children, location } = this.props;
|
|
93
|
-
|
|
81
|
+
// Use a controlled <Route> to trick all descendants into rendering the old
|
|
82
|
+
// location.
|
|
83
|
+
return <Route location={location} render={() => children}/>;
|
|
94
84
|
}
|
|
95
85
|
}
|
|
96
|
-
export default
|
|
86
|
+
export default PendingNavigation;
|
|
@@ -8,7 +8,6 @@ import React from 'react';
|
|
|
8
8
|
import ReactDOM from 'react-dom';
|
|
9
9
|
import { BrowserRouter } from 'react-router-dom';
|
|
10
10
|
import { HelmetProvider } from 'react-helmet-async';
|
|
11
|
-
import routes from '@generated/routes';
|
|
12
11
|
import ExecutionEnvironment from './exports/ExecutionEnvironment';
|
|
13
12
|
import App from './App';
|
|
14
13
|
import preload from './preload';
|
|
@@ -22,7 +21,7 @@ if (ExecutionEnvironment.canUseDOM) {
|
|
|
22
21
|
// For development, there is no existing markup so we had to render it.
|
|
23
22
|
// We also preload async component to avoid first-load loading screen.
|
|
24
23
|
const renderMethod = process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render;
|
|
25
|
-
preload(
|
|
24
|
+
preload(window.location.pathname).then(() => {
|
|
26
25
|
renderMethod(
|
|
27
26
|
// @ts-expect-error: https://github.com/staylor/react-helmet-async/pull/165
|
|
28
27
|
<HelmetProvider>
|
package/lib/client/docusaurus.js
CHANGED
package/lib/client/preload.d.ts
CHANGED
|
@@ -4,14 +4,12 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import { type RouteConfig } from 'react-router-config';
|
|
8
7
|
/**
|
|
9
8
|
* Helper function to make sure all async components for that particular route
|
|
10
9
|
* is preloaded before rendering. This is especially useful to avoid loading
|
|
11
10
|
* screens.
|
|
12
11
|
*
|
|
13
|
-
* @param routes react-router-config
|
|
14
12
|
* @param pathname the route pathname, example: /docs/installation
|
|
15
13
|
* @returns Promise object represents whether pathname has been preloaded
|
|
16
14
|
*/
|
|
17
|
-
export default function preload(
|
|
15
|
+
export default function preload(pathname: string): Promise<void[]>;
|
package/lib/client/preload.js
CHANGED
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
+
import routes from '@generated/routes';
|
|
7
8
|
import { matchRoutes } from 'react-router-config';
|
|
8
9
|
/**
|
|
9
10
|
* Helper function to make sure all async components for that particular route
|
|
10
11
|
* is preloaded before rendering. This is especially useful to avoid loading
|
|
11
12
|
* screens.
|
|
12
13
|
*
|
|
13
|
-
* @param routes react-router-config
|
|
14
14
|
* @param pathname the route pathname, example: /docs/installation
|
|
15
15
|
* @returns Promise object represents whether pathname has been preloaded
|
|
16
16
|
*/
|
|
17
|
-
export default function preload(
|
|
17
|
+
export default function preload(pathname) {
|
|
18
18
|
const matches = matchRoutes(routes, pathname);
|
|
19
19
|
return Promise.all(
|
|
20
20
|
// @ts-expect-error: ComponentCreator injected this method.
|
|
@@ -14,7 +14,6 @@ import Loadable from 'react-loadable';
|
|
|
14
14
|
import { minify } from 'html-minifier-terser';
|
|
15
15
|
import path from 'path';
|
|
16
16
|
import fs from 'fs-extra';
|
|
17
|
-
import routes from '@generated/routes';
|
|
18
17
|
import preload from './preload';
|
|
19
18
|
import App from './App';
|
|
20
19
|
import { createStatefulLinksCollector, LinksCollectorProvider, } from './LinksCollector';
|
|
@@ -49,7 +48,7 @@ It might also require to wrap your client code in code=${'useEffect'} hook and/o
|
|
|
49
48
|
async function doRender(locals) {
|
|
50
49
|
const { routesLocation, headTags, preBodyTags, postBodyTags, onLinksCollected, baseUrl, ssrTemplate, noIndex, } = locals;
|
|
51
50
|
const location = routesLocation[locals.path];
|
|
52
|
-
await preload(
|
|
51
|
+
await preload(location);
|
|
53
52
|
const modules = new Set();
|
|
54
53
|
const routerContext = {};
|
|
55
54
|
const helmetContext = {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/core",
|
|
3
3
|
"description": "Easy to Maintain Open Source Documentation Websites",
|
|
4
|
-
"version": "0.0.0-
|
|
4
|
+
"version": "0.0.0-4851",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"@babel/runtime": "^7.17.9",
|
|
42
42
|
"@babel/runtime-corejs3": "^7.17.9",
|
|
43
43
|
"@babel/traverse": "^7.17.9",
|
|
44
|
-
"@docusaurus/cssnano-preset": "0.0.0-
|
|
45
|
-
"@docusaurus/logger": "0.0.0-
|
|
46
|
-
"@docusaurus/mdx-loader": "0.0.0-
|
|
44
|
+
"@docusaurus/cssnano-preset": "0.0.0-4851",
|
|
45
|
+
"@docusaurus/logger": "0.0.0-4851",
|
|
46
|
+
"@docusaurus/mdx-loader": "0.0.0-4851",
|
|
47
47
|
"@docusaurus/react-loadable": "5.5.2",
|
|
48
|
-
"@docusaurus/utils": "0.0.0-
|
|
49
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
50
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
48
|
+
"@docusaurus/utils": "0.0.0-4851",
|
|
49
|
+
"@docusaurus/utils-common": "0.0.0-4851",
|
|
50
|
+
"@docusaurus/utils-validation": "0.0.0-4851",
|
|
51
51
|
"@slorber/static-site-generator-webpack-plugin": "^4.0.4",
|
|
52
52
|
"@svgr/webpack": "^6.2.1",
|
|
53
53
|
"autoprefixer": "^10.4.4",
|
|
@@ -105,8 +105,8 @@
|
|
|
105
105
|
"webpackbar": "^5.0.2"
|
|
106
106
|
},
|
|
107
107
|
"devDependencies": {
|
|
108
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
109
|
-
"@docusaurus/types": "0.0.0-
|
|
108
|
+
"@docusaurus/module-type-aliases": "0.0.0-4851",
|
|
109
|
+
"@docusaurus/types": "0.0.0-4851",
|
|
110
110
|
"@types/detect-port": "^1.3.2",
|
|
111
111
|
"@types/nprogress": "^0.2.0",
|
|
112
112
|
"@types/react-dom": "^18.0.0",
|
|
@@ -127,5 +127,5 @@
|
|
|
127
127
|
"engines": {
|
|
128
128
|
"node": ">=14"
|
|
129
129
|
},
|
|
130
|
-
"gitHead": "
|
|
130
|
+
"gitHead": "c87ae506757fe2a8d020ceb773fdcb1fc4fd3a38"
|
|
131
131
|
}
|