From 668b6bafddf974e7cf2de3b21e2fda4f09204ad8 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 6 Aug 2020 14:09:29 +0200 Subject: [PATCH 1/3] improve swizzle messages --- packages/docusaurus/src/commands/swizzle.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus/src/commands/swizzle.ts b/packages/docusaurus/src/commands/swizzle.ts index dd1b64db8a59..409683ff6efa 100644 --- a/packages/docusaurus/src/commands/swizzle.ts +++ b/packages/docusaurus/src/commands/swizzle.ts @@ -86,7 +86,18 @@ function themeComponents( danger: boolean, ): string { const components = colorCode(themePath, plugin, danger); - return `Theme Components available for swizzle:\n${components.join('\n')}`; + if (danger) { + return `Theme Components available for swizzle. +${chalk.green('green')}=recommended: lower breaking change risk +${chalk.red('red')}=internal: higher breaking change risk + +${components.join('\n')}`; + } else { + return `Theme Components recommended for swizzle. +Run the same command with --danger to show internal components. + +${components.join('\n')}`; + } } function formatedThemeNames(themeNames: string[]): string { @@ -239,7 +250,7 @@ export default async function swizzle( } if (!components.includes(componentName) && !danger) { throw new Error( - `${componentName} is an internal component, if you want to swizzle it use "--danger" flag.`, + `${componentName} is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.`, ); } await fs.copy(fromPath, toPath); From bee6f2a8031674dbabb4a1e2dfe455cde3301990 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 6 Aug 2020 14:18:26 +0200 Subject: [PATCH 2/3] docs should allow to swizzle in --typescript --- packages/docusaurus-plugin-content-docs/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index b8c39d1fc4ed..6ff6992f2636 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -110,6 +110,10 @@ export default function pluginContentDocs( return path.resolve(__dirname, './theme'); }, + getTypeScriptThemePath() { + return path.resolve(__dirname, '..', 'src', 'theme'); + }, + extendCli(cli) { const command = isDefaultPluginId ? 'docs:version' From ad0b9ab41ce77042e0a781a2c2fc3d2f9192b573 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 6 Aug 2020 14:32:02 +0200 Subject: [PATCH 3/3] minor swizzle cli improvements --- packages/docusaurus/src/commands/swizzle.ts | 81 ++++++++------------- 1 file changed, 31 insertions(+), 50 deletions(-) diff --git a/packages/docusaurus/src/commands/swizzle.ts b/packages/docusaurus/src/commands/swizzle.ts index 409683ff6efa..9d4cbc9c293e 100644 --- a/packages/docusaurus/src/commands/swizzle.ts +++ b/packages/docusaurus/src/commands/swizzle.ts @@ -11,7 +11,7 @@ import importFresh from 'import-fresh'; import path from 'path'; import {Plugin, LoadContext, PluginConfig} from '@docusaurus/types'; import leven from 'leven'; - +import {partition} from 'lodash'; import {THEME_PATH} from '../constants'; import {loadContext, loadPluginConfigs} from '../server'; import initPlugins from '../server/plugins/init'; @@ -80,60 +80,45 @@ function getComponentName( return readComponent(themePath); } -function themeComponents( - themePath: string, - plugin: Plugin, - danger: boolean, -): string { - const components = colorCode(themePath, plugin, danger); - if (danger) { - return `Theme Components available for swizzle. -${chalk.green('green')}=recommended: lower breaking change risk -${chalk.red('red')}=internal: higher breaking change risk - -${components.join('\n')}`; - } else { - return `Theme Components recommended for swizzle. -Run the same command with --danger to show internal components. +function themeComponents(themePath: string, plugin: Plugin): string { + const components = colorCode(themePath, plugin); -${components.join('\n')}`; + if (components.length === 0) { + return `${chalk.red('No component to swizzle')}`; } + + return ` +${chalk.cyan('Theme Components available for swizzle')} + +${chalk.green('green =>')} recommended: lower breaking change risk +${chalk.red('red =>')} internal: higher breaking change risk + +${components.join('\n')} +`; } function formatedThemeNames(themeNames: string[]): string { return `Themes available for swizzle:\n${themeNames.join('\n')}`; } -function colorCode( - themePath: string, - plugin: any, - danger: boolean, -): Array { +function colorCode(themePath: string, plugin: any): Array { // support both commonjs and ES style exports const getSwizzleComponentList = plugin.default?.getSwizzleComponentList ?? plugin.getSwizzleComponentList; - if (getSwizzleComponentList) { - const allowedComponent = getSwizzleComponentList(); - if (danger) { - const components = readComponent(themePath); - const componentMap = allowedComponent.reduce( - (acc: {[key: string]: boolean}, component) => { - acc[component] = true; - return acc; - }, - {}, - ); - const colorCodedComponent = components - .filter((component) => !componentMap[component]) - .map((component) => chalk.red(component)); - return [ - ...allowedComponent.map((component) => chalk.green(component)), - ...colorCodedComponent, - ]; - } - return allowedComponent; - } - return readComponent(themePath); + + const components = readComponent(themePath); + const allowedComponent = getSwizzleComponentList + ? getSwizzleComponentList() + : []; + + const [greenComponents, redComponents] = partition(components, (comp) => + allowedComponent.includes(comp), + ); + + return [ + ...greenComponents.map((component) => chalk.green(component)), + ...redComponents.map((component) => chalk.red(component)), + ]; } export default async function swizzle( @@ -239,11 +224,7 @@ export default async function swizzle( `Component ${componentName} not found.${ suggestion ? ` Did you mean "${suggestion}"?` - : `${themeComponents( - themePath, - pluginModule, - Boolean(danger), - )}` + : `${themeComponents(themePath, pluginModule)}` }`, ); } @@ -277,7 +258,7 @@ export default async function swizzle( ); } } else { - console.log(themeComponents(themePath, pluginModule, Boolean(danger))); + console.log(themeComponents(themePath, pluginModule)); } } }