Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): allow plugins to declare custom route context #7082

Merged
merged 5 commits into from
Apr 7, 2022
+36 −16
Merged

feat(core): allow plugins to declare custom route context #7082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
41dfd1d
feat(core): allow plugins to declare custom route context
Josh-Cena Apr 1, 2022
4e4a768
fix test
Josh-Cena Apr 7, 2022
86c9beb
address reviews
Josh-Cena Apr 7, 2022
ce22086
fix
Josh-Cena Apr 7, 2022
51d41b7
fix test
Josh-Cena Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/docusaurus-types/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,12 @@ export type RouteConfig = {
* `createData`)
*/
modules?: RouteModules;
/**
* The route context will wrap the `component`. Use `useRouteContext` to
* retrieve what's declared here. Note that all custom route context declared
* here will be namespaced under {@link RouteContext.data}.
*/
context?: RouteModules;
/** Nested routes config. */
routes?: RouteConfig[];
/** React router config option: `exact` routes would not match subroutes. */
Expand Down
19 changes: 13 additions & 6 deletions packages/docusaurus/src/server/__tests__/__snapshots__/routes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,26 @@ exports[`loadRoutes loads nested route config 1`] = `
"docsMetadata---docs-routef-34-881": "docs-b5f.json",
"metadata---docs-foo-baz-2-cf-fa7": "docs-foo-baz-dd9.json",
"metadata---docs-hello-956-741": "docs-hello-da2.json",
"plugin---docs-hello-665-3ca": "pluginRouteContextModule-100.json",
},
"routesChunkNames": {
"/docs/hello-44b": {
"/docs/hello-fcc": {
"__comp": "__comp---theme-doc-item-178-a40",
"__context": {
"plugin": "plugin---docs-hello-665-3ca",
},
"content": "content---docs-helloaff-811",
"metadata": "metadata---docs-hello-956-741",
},
"/docs:route-52d": {
"/docs:route-502": {
"__comp": "__comp---theme-doc-page-1-be-9be",
"docsMetadata": "docsMetadata---docs-routef-34-881",
},
"docs/foo/baz-070": {
"docs/foo/baz-eb2": {
"__comp": "__comp---theme-doc-item-178-a40",
"__context": {
"plugin": "plugin---docs-hello-665-3ca",
},
"content": "content---docs-foo-baz-8-ce-61e",
"metadata": "metadata---docs-foo-baz-2-cf-fa7",
},
Expand All @@ -89,17 +96,17 @@ import ComponentCreator from '@docusaurus/ComponentCreator';
export default [
{
path: '/docs:route',
component: ComponentCreator('/docs:route', '52d'),
component: ComponentCreator('/docs:route', '502'),
routes: [
{
path: '/docs/hello',
component: ComponentCreator('/docs/hello', '44b'),
component: ComponentCreator('/docs/hello', 'fcc'),
exact: true,
sidebar: \\"main\\"
},
{
path: 'docs/foo/baz',
component: ComponentCreator('docs/foo/baz', '070'),
component: ComponentCreator('docs/foo/baz', 'eb2'),
sidebar: \\"secondary\\",
\\"key:a\\": \\"containing colon\\",
\\"key'b\\": \\"containing quote\\",
Expand Down
6 changes: 6 additions & 0 deletions packages/docusaurus/src/server/__tests__/routes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ describe('loadRoutes', () => {
content: 'docs/hello.md',
metadata: 'docs-hello-da2.json',
},
context: {
plugin: 'pluginRouteContextModule-100.json',
},
sidebar: 'main',
},
{
Expand All @@ -126,6 +129,9 @@ describe('loadRoutes', () => {
content: 'docs/foo/baz.md',
metadata: 'docs-foo-baz-dd9.json',
},
context: {
plugin: 'pluginRouteContextModule-100.json',
},
sidebar: 'secondary',
'key:a': 'containing colon',
"key'b": 'containing quote',
Expand Down
17 changes: 7 additions & 10 deletions packages/docusaurus/src/server/plugins/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,22 +104,19 @@ export async function loadPlugins(context: LoadContext): Promise<{
plugin.name,
pluginId,
);
// TODO this would be better to do all that in the codegen phase
// TODO handle context for nested routes
Comment on lines -107 to -108
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these todo look still relevant

for example I don't think it works if you add a context to a doc route, only parent route context work?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works everywhere, because it's handled in the same way as route components are handled. As long as there are RouteContextProviders, the nested routes will be properly merged. Unless "nested routes" mean something different here?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think it "works" yes, but only parent routes are namespacing the context data under a "data" attribute while nested routes expose the context data

Maybe if we had a good case to test this feature on docs route we'll see if it works?

This looks fine for now, we'll fix edge cases as soon as we have a use-case for nested context

const pluginRouteContext: PluginRouteContext = {
plugin: {name: plugin.name, id: pluginId},
data: undefined, // TODO allow plugins to provide context data
};
const pluginRouteContextModulePath = path.join(
dataDir,
`${docuHash('pluginRouteContextModule')}.json`,
);
const pluginRouteContext: PluginRouteContext['plugin'] = {
name: plugin.name,
id: pluginId,
};
await generate(
'/',
pluginRouteContextModulePath,
JSON.stringify(pluginRouteContext, null, 2),
);

const actions: PluginContentLoadedActions = {
addRoute(initialRouteConfig) {
// Trailing slash behavior is handled generically for all plugins
Expand All @@ -129,9 +126,9 @@ export async function loadPlugins(context: LoadContext): Promise<{
);
pluginsRouteConfigs.push({
...finalRouteConfig,
modules: {
...finalRouteConfig.modules,
__context: pluginRouteContextModulePath,
context: {
...(finalRouteConfig.context && {data: finalRouteConfig.context}),
plugin: pluginRouteContextModulePath,
},
});
},
Expand Down
4 changes: 4 additions & 0 deletions packages/docusaurus/src/server/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ function genRouteCode(routeConfig: RouteConfig, res: LoadedRoutes): string {
path: routePath,
component,
modules = {},
context,
routes: subroutes,
priority,
exact,
Expand All @@ -271,6 +272,9 @@ ${JSON.stringify(routeConfig)}`,
res.routesChunkNames[`${routePath}-${routeHash}`] = {
// Avoid clash with a prop called "component"
...genChunkNames({__comp: component}, 'component', component, res),
...(context
? genChunkNames({__context: context}, 'context', routePath, res)
: {}),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not important but you could replace ternary by && here

image

...genChunkNames(modules, 'module', routePath, res),
};

Expand Down