fix(v2): swizzle minor improvements

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'

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,49 +80,45 @@ function getComponentName(
  return readComponent(themePath);
 }
 
-function themeComponents(
- themePath: string,
- plugin: Plugin<unknown>,
- danger: boolean,
-): string {
- const components = colorCode(themePath, plugin, danger);
- return `Theme Components available for swizzle:\n${components.join('\n')}`;
+function themeComponents(themePath: string, plugin: Plugin<unknown>): string {
+ const components = colorCode(themePath, plugin);
+
+ 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<string> {
+function colorCode(themePath: string, plugin: any): Array<string> {
  // 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(
@@ -228,18 +224,14 @@ export default async function swizzle(
  `Component ${componentName} not found.${
  suggestion
  ? ` Did you mean "${suggestion}"?`
- : `${themeComponents(
- themePath,
- pluginModule,
- Boolean(danger),
- )}`
+ : `${themeComponents(themePath, pluginModule)}`
  }`,
  );
  }
  }
  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);
@@ -266,7 +258,7 @@ export default async function swizzle(
  );
  }
  } else {
- console.log(themeComponents(themePath, pluginModule, Boolean(danger)));
+ console.log(themeComponents(themePath, pluginModule));
  }
  }
 }