feat(swizzle): ask user preferred language if no language CLI option provided (#9681)

Co-authored-by: sebastien <lorber.sebastien@gmail.com>

packages/docusaurus/bin/docusaurus.mjs

@@ -85,6 +85,10 @@ cli
     '-t, --typescript',
     'copy TypeScript theme files when possible (default: false)',
   )
+  .option(
+    '-j, --javascript',
+    'copy JavaScript theme files when possible (default: false)',
+  )
   .option('--danger', 'enable swizzle for unsafe component of themes')
   .option(
     '--config <config>',

packages/docusaurus/src/commands/swizzle/__tests__/index.test.ts

@@ -115,6 +115,7 @@ async function createTestSite() {
       wrap: true,
       danger: true,
       typescript,
+      javascript: !typescript,
     });
   }
 
@@ -129,6 +130,7 @@ async function createTestSite() {
       eject: true,
       danger: true,
       typescript,
+      javascript: !typescript,
     });
   }
 

packages/docusaurus/src/commands/swizzle/common.ts

@@ -63,6 +63,7 @@ export type SwizzleContext = {plugins: SwizzlePlugin[]};
 
 export type SwizzleCLIOptions = {
   typescript: boolean;
+  javascript: boolean;
   danger: boolean;
   list: boolean;
   wrap: boolean;
@@ -75,6 +76,7 @@ export function normalizeOptions(
 ): SwizzleCLIOptions {
   return {
     typescript: options.typescript ?? false,
+    javascript: options.javascript ?? false,
     danger: options.danger ?? false,
     list: options.list ?? false,
     wrap: options.wrap ?? false,

packages/docusaurus/src/commands/swizzle/index.ts

@@ -7,7 +7,13 @@
 
 import fs from 'fs-extra';
 import logger from '@docusaurus/logger';
-import {getThemeName, getThemePath, getThemeNames} from './themes';
+import {askPreferredLanguage} from '@docusaurus/utils';
+import {
+  getThemeName,
+  getThemePath,
+  getThemeNames,
+  getPluginByThemeName,
+} from './themes';
 import {getThemeComponents, getComponentName} from './components';
 import {helpTables, themeComponentsTable} from './tables';
 import {normalizeOptions} from './common';
@@ -19,6 +25,41 @@ import type {SwizzleAction, SwizzleComponentConfig} from '@docusaurus/types';
 import type {SwizzleCLIOptions, SwizzlePlugin} from './common';
 import type {ActionResult} from './actions';
 
+async function getLanguageForThemeName({
+  themeName,
+  plugins,
+  options,
+}: {
+  themeName: string;
+  plugins: SwizzlePlugin[];
+  options: SwizzleCLIOptions;
+}): Promise<'javascript' | 'typescript'> {
+  const plugin = getPluginByThemeName(plugins, themeName);
+  const supportsTS = !!plugin.instance.getTypeScriptThemePath?.();
+
+  if (options.typescript) {
+    if (!supportsTS) {
+      throw new Error(
+        logger.interpolate`Theme name=${
+          plugin.instance.name
+        } does not support the code=${'--typescript'} CLI option.`,
+      );
+    }
+    return 'typescript';
+  }
+
+  if (options.javascript) {
+    return 'javascript';
+  }
+
+  // It's only useful to prompt the user for themes that support both JS/TS
+  if (supportsTS) {
+    return askPreferredLanguage({exit: true});
+  }
+
+  return 'javascript';
+}
+
 async function listAllThemeComponents({
   themeNames,
   plugins,
@@ -96,17 +137,30 @@ export async function swizzle(
   const siteDir = await fs.realpath(siteDirParam);
 
   const options = normalizeOptions(optionsParam);
-  const {list, danger, typescript} = options;
+  const {list, danger} = options;
 
   const {plugins} = await initSwizzleContext(siteDir, options);
   const themeNames = getThemeNames(plugins);
 
   if (list && !themeNameParam) {
-    await listAllThemeComponents({themeNames, plugins, typescript});
+    await listAllThemeComponents({
+      themeNames,
+      plugins,
+      typescript: options.typescript,
+    });
   }
 
   const themeName = await getThemeName({themeNameParam, themeNames, list});
-  const themePath = getThemePath({themeName, plugins, typescript});
+
+  const language = await getLanguageForThemeName({themeName, plugins, options});
+  const typescript = language === 'typescript';
+
+  const themePath = getThemePath({
+    themeName,
+    plugins,
+    typescript,
+  });
+
   const swizzleConfig = getThemeSwizzleConfig(themeName, plugins);
 
   const themeComponents = await getThemeComponents({