fix(v2): swizzle minor improvements (#3225)

* improve swizzle messages

* docs should allow to swizzle in --typescript

* minor swizzle cli improvements
This commit is contained in:
Sébastien Lorber 2020-08-06 14:47:36 +02:00 committed by GitHub
parent ef9314e5a4
commit 0079f0e8d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 42 deletions

View file

@ -110,6 +110,10 @@ export default function pluginContentDocs(
return path.resolve(__dirname, './theme'); return path.resolve(__dirname, './theme');
}, },
getTypeScriptThemePath() {
return path.resolve(__dirname, '..', 'src', 'theme');
},
extendCli(cli) { extendCli(cli) {
const command = isDefaultPluginId const command = isDefaultPluginId
? 'docs:version' ? 'docs:version'

View file

@ -11,7 +11,7 @@ import importFresh from 'import-fresh';
import path from 'path'; import path from 'path';
import {Plugin, LoadContext, PluginConfig} from '@docusaurus/types'; import {Plugin, LoadContext, PluginConfig} from '@docusaurus/types';
import leven from 'leven'; import leven from 'leven';
import {partition} from 'lodash';
import {THEME_PATH} from '../constants'; import {THEME_PATH} from '../constants';
import {loadContext, loadPluginConfigs} from '../server'; import {loadContext, loadPluginConfigs} from '../server';
import initPlugins from '../server/plugins/init'; import initPlugins from '../server/plugins/init';
@ -80,50 +80,46 @@ function getComponentName(
return readComponent(themePath); return readComponent(themePath);
} }
function themeComponents( function themeComponents(themePath: string, plugin: Plugin<unknown>): string {
themePath: string, const components = colorCode(themePath, plugin);
plugin: Plugin<unknown>,
danger: boolean, if (components.length === 0) {
): string { return `${chalk.red('No component to swizzle')}`;
const components = colorCode(themePath, plugin, danger); }
return `Theme Components available for swizzle:\n${components.join('\n')}`;
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 { function formatedThemeNames(themeNames: string[]): string {
return `Themes available for swizzle:\n${themeNames.join('\n')}`; return `Themes available for swizzle:\n${themeNames.join('\n')}`;
} }
function colorCode( function colorCode(themePath: string, plugin: any): Array<string> {
themePath: string,
plugin: any,
danger: boolean,
): Array<string> {
// support both commonjs and ES style exports // support both commonjs and ES style exports
const getSwizzleComponentList = const getSwizzleComponentList =
plugin.default?.getSwizzleComponentList ?? plugin.getSwizzleComponentList; plugin.default?.getSwizzleComponentList ?? plugin.getSwizzleComponentList;
if (getSwizzleComponentList) {
const allowedComponent = getSwizzleComponentList();
if (danger) {
const components = readComponent(themePath); const components = readComponent(themePath);
const componentMap = allowedComponent.reduce( const allowedComponent = getSwizzleComponentList
(acc: {[key: string]: boolean}, component) => { ? getSwizzleComponentList()
acc[component] = true; : [];
return acc;
}, const [greenComponents, redComponents] = partition(components, (comp) =>
{}, allowedComponent.includes(comp),
); );
const colorCodedComponent = components
.filter((component) => !componentMap[component])
.map((component) => chalk.red(component));
return [ return [
...allowedComponent.map((component) => chalk.green(component)), ...greenComponents.map((component) => chalk.green(component)),
...colorCodedComponent, ...redComponents.map((component) => chalk.red(component)),
]; ];
} }
return allowedComponent;
}
return readComponent(themePath);
}
export default async function swizzle( export default async function swizzle(
siteDir: string, siteDir: string,
@ -228,18 +224,14 @@ export default async function swizzle(
`Component ${componentName} not found.${ `Component ${componentName} not found.${
suggestion suggestion
? ` Did you mean "${suggestion}"?` ? ` Did you mean "${suggestion}"?`
: `${themeComponents( : `${themeComponents(themePath, pluginModule)}`
themePath,
pluginModule,
Boolean(danger),
)}`
}`, }`,
); );
} }
} }
if (!components.includes(componentName) && !danger) { if (!components.includes(componentName) && !danger) {
throw new Error( 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); await fs.copy(fromPath, toPath);
@ -266,7 +258,7 @@ export default async function swizzle(
); );
} }
} else { } else {
console.log(themeComponents(themePath, pluginModule, Boolean(danger))); console.log(themeComponents(themePath, pluginModule));
} }
} }
} }