refactor(theme-classic): add comments to Prism setup; minor refactor (#6391)

This commit is contained in:
Joshua Chen 2022-01-18 19:46:22 +08:00 committed by GitHub
parent 7bab9ba46d
commit 1d7827d572
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions

View file

@ -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})$`),

View file

@ -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;