mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-13 08:12:48 +02:00
refactor(theme-classic): add comments to Prism setup; minor refactor (#6391)
This commit is contained in:
parent
7bab9ba46d
commit
1d7827d572
2 changed files with 16 additions and 6 deletions
|
@ -18,13 +18,13 @@ import type {Plugin as PostCssPlugin} from 'postcss';
|
||||||
import rtlcss from 'rtlcss';
|
import rtlcss from 'rtlcss';
|
||||||
import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
|
import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
|
||||||
import type {Options} from '@docusaurus/theme-classic';
|
import type {Options} from '@docusaurus/theme-classic';
|
||||||
|
import type webpack from 'webpack';
|
||||||
|
|
||||||
const requireFromDocusaurusCore = createRequire(
|
const requireFromDocusaurusCore = createRequire(
|
||||||
require.resolve('@docusaurus/core/package.json'),
|
require.resolve('@docusaurus/core/package.json'),
|
||||||
);
|
);
|
||||||
const ContextReplacementPlugin = requireFromDocusaurusCore(
|
const ContextReplacementPlugin: typeof webpack.ContextReplacementPlugin =
|
||||||
'webpack/lib/ContextReplacementPlugin',
|
requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
|
||||||
);
|
|
||||||
|
|
||||||
// Need to be inlined to prevent dark mode FOUC
|
// Need to be inlined to prevent dark mode FOUC
|
||||||
// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
|
// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
|
||||||
|
@ -172,6 +172,9 @@ export default function docusaurusThemeClassic(
|
||||||
|
|
||||||
return {
|
return {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
// This allows better optimization by only bundling those components
|
||||||
|
// that the user actually needs, because the modules are dynamically
|
||||||
|
// required and can't be known during compile time.
|
||||||
new ContextReplacementPlugin(
|
new ContextReplacementPlugin(
|
||||||
/prismjs[\\/]components$/,
|
/prismjs[\\/]components$/,
|
||||||
new RegExp(`^./(${prismLanguages})$`),
|
new RegExp(`^./(${prismLanguages})$`),
|
||||||
|
|
|
@ -12,14 +12,21 @@ import type * as PrismNamespace from 'prismjs';
|
||||||
const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
|
const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
|
||||||
if (ExecutionEnvironment.canUseDOM) {
|
if (ExecutionEnvironment.canUseDOM) {
|
||||||
const {
|
const {
|
||||||
themeConfig: {prism = {}},
|
themeConfig: {prism},
|
||||||
} = siteConfig;
|
} = siteConfig;
|
||||||
const {additionalLanguages = []} = prism as {additionalLanguages: string[]};
|
const {additionalLanguages} = prism as {additionalLanguages: string[]};
|
||||||
|
|
||||||
|
// Prism components work on the Prism instance on the window, while
|
||||||
|
// prism-react-renderer uses its own Prism instance. We temporarily mount
|
||||||
|
// the instance onto window, import components to enhance it, then remove it
|
||||||
|
// to avoid polluting global namespace.
|
||||||
|
// You can mutate this object: registering plugins, deleting languages... As
|
||||||
|
// long as you don't re-assign it
|
||||||
window.Prism = PrismObject;
|
window.Prism = PrismObject;
|
||||||
|
|
||||||
additionalLanguages.forEach((lang) => {
|
additionalLanguages.forEach((lang) => {
|
||||||
require(`prismjs/components/prism-${lang}`); // eslint-disable-line
|
// eslint-disable-next-line global-require, import/no-dynamic-require
|
||||||
|
require(`prismjs/components/prism-${lang}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
delete (window as Window & {Prism?: typeof PrismNamespace}).Prism;
|
delete (window as Window & {Prism?: typeof PrismNamespace}).Prism;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue