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

* improve swizzle messages

* docs should allow to swizzle in --typescript

* minor swizzle cli 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,50 +80,46 @@ 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 allowedComponent = getSwizzleComponentList
+    ? getSwizzleComponentList()
+    : [];
+
+  const [greenComponents, redComponents] = partition(components, (comp) =>
+    allowedComponent.includes(comp),
   );
-      const colorCodedComponent = components
-        .filter((component) => !componentMap[component])
-        .map((component) => chalk.red(component));
+
   return [
-        ...allowedComponent.map((component) => chalk.green(component)),
-        ...colorCodedComponent,
+    ...greenComponents.map((component) => chalk.green(component)),
+    ...redComponents.map((component) => chalk.red(component)),
   ];
 }
-    return allowedComponent;
-  }
-  return readComponent(themePath);
-}
 
 export default async function swizzle(
   siteDir: string,
@@ -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));
     }
   }
 }