-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core,theme): useRouteContext + HtmlClassNameProvider (#6933)
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
- Loading branch information
Showing
14 changed files
with
235 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React, {type ReactNode} from 'react'; | ||
import Head from '@docusaurus/Head'; | ||
import clsx from 'clsx'; | ||
import useRouteContext from '@docusaurus/useRouteContext'; | ||
|
||
const HtmlClassNameContext = React.createContext<string | undefined>(undefined); | ||
|
||
// This wrapper is necessary because Helmet does not "merge" classes | ||
// See https://github.com/staylor/react-helmet-async/issues/161 | ||
export function HtmlClassNameProvider({ | ||
className: classNameProp, | ||
children, | ||
}: { | ||
className: string; | ||
children: ReactNode; | ||
}): JSX.Element { | ||
const classNameContext = React.useContext(HtmlClassNameContext); | ||
const className = clsx(classNameContext, classNameProp); | ||
return ( | ||
<HtmlClassNameContext.Provider value={className}> | ||
<Head> | ||
<html className={className} /> | ||
</Head> | ||
{children} | ||
</HtmlClassNameContext.Provider> | ||
); | ||
} | ||
|
||
function pluginNameToClassName(pluginName: string) { | ||
return `plugin-${pluginName.replace( | ||
/docusaurus-(?:plugin|theme)-(?:content-)?/gi, | ||
'', | ||
)}`; | ||
} | ||
|
||
export function PluginHtmlClassNameProvider({ | ||
children, | ||
}: { | ||
children: ReactNode; | ||
}): JSX.Element { | ||
const routeContext = useRouteContext(); | ||
const nameClass = pluginNameToClassName(routeContext.plugin.name); | ||
const idClass = `plugin-id-${routeContext.plugin.id}`; | ||
return ( | ||
<HtmlClassNameProvider className={clsx(nameClass, idClass)}> | ||
{children} | ||
</HtmlClassNameProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
packages/docusaurus/src/client/exports/useRouteContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React from 'react'; | ||
import type {PluginRouteContext} from '@docusaurus/types'; | ||
import {Context} from '../routeContext'; | ||
|
||
export default function useRouteContext(): PluginRouteContext { | ||
const context = React.useContext(Context); | ||
if (!context) { | ||
throw new Error( | ||
'Unexpected: no Docusaurus parent/current route context found', | ||
); | ||
} | ||
return context; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React, {useMemo, type ReactNode} from 'react'; | ||
import type {PluginRouteContext, RouteContext} from '@docusaurus/types'; | ||
|
||
export const Context = React.createContext<PluginRouteContext | null>(null); | ||
|
||
function mergeContexts({ | ||
parent, | ||
value, | ||
}: { | ||
parent: PluginRouteContext | null; | ||
value: RouteContext | null; | ||
}): PluginRouteContext { | ||
if (!parent) { | ||
if (!value) { | ||
throw new Error( | ||
'Unexpected: no Docusaurus parent/current route context found', | ||
); | ||
} else if (!('plugin' in value)) { | ||
throw new Error( | ||
'Unexpected: Docusaurus parent route context has no plugin attribute', | ||
); | ||
} | ||
return value; | ||
} | ||
|
||
// TODO deep merge this | ||
const data = {...parent.data, ...value?.data}; | ||
|
||
return { | ||
// nested routes are not supposed to override plugin attribute | ||
plugin: parent.plugin, | ||
data, | ||
}; | ||
} | ||
|
||
export function RouteContextProvider({ | ||
children, | ||
value, | ||
}: { | ||
children: ReactNode; | ||
value: PluginRouteContext | null; | ||
}): JSX.Element { | ||
const parent = React.useContext(Context); | ||
|
||
const mergedValue = useMemo( | ||
() => mergeContexts({parent, value}), | ||
[parent, value], | ||
); | ||
|
||
return <Context.Provider value={mergedValue}>{children}</Context.Provider>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.