From 250d9c8cf5bdf49e2e426a63730b7eb5afcdd388 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 2 Feb 2022 17:48:06 +0800
Subject: [PATCH] refactor(live-codeblock): migrate theme to TS (#6583)

* refactor(live-codeblock): migrate theme to TS

* Don't make it visible
---
 .../package.json                              |  8 +++--
 .../src/index.ts                              |  9 ++++--
 .../src/theme-live-codeblock.d.ts             | 32 +++++++++++++++++++
 .../theme/CodeBlock/{index.js => index.tsx}   |  7 ++--
 .../theme/Playground/{index.js => index.tsx}  | 24 ++++++++------
 .../ReactLiveScope/{index.js => index.tsx}    |  0
 .../src/types.d.ts                            | 18 +++++++++++
 .../tsconfig.client.json                      |  8 +++++
 .../tsconfig.server.json                      |  5 +++
 .../package.json                              |  7 ++--
 ...nfig.browser.json => tsconfig.client.json} |  0
 11 files changed, 98 insertions(+), 20 deletions(-)
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
 rename packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/{index.js => index.tsx} (68%)
 rename packages/docusaurus-theme-live-codeblock/src/theme/Playground/{index.js => index.tsx} (83%)
 rename packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/{index.js => index.tsx} (100%)
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/types.d.ts
 create mode 100644 packages/docusaurus-theme-live-codeblock/tsconfig.client.json
 create mode 100644 packages/docusaurus-theme-live-codeblock/tsconfig.server.json
 rename packages/docusaurus-theme-search-algolia/{tsconfig.browser.json => tsconfig.client.json} (100%)

diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
index 45ac58c657..4e279352fc 100644
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@@ -3,12 +3,16 @@
   "version": "2.0.0-beta.15",
   "description": "Docusaurus live code block component.",
   "main": "lib/index.js",
+  "types": "src/theme-live-codeblock.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc && node copyUntypedFiles.mjs",
-    "watch": "node copyUntypedFiles.mjs && tsc --watch"
+    "build": "yarn build:server && yarn build:client && yarn build:copy && yarn build:format",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build:client": "tsc --project tsconfig.client.json",
+    "build:copy": "node copyUntypedFiles.mjs",
+    "build:format": "prettier --config ../../.prettierrc --write \"lib/**/*.js\""
   },
   "repository": {
     "type": "git",
diff --git a/packages/docusaurus-theme-live-codeblock/src/index.ts b/packages/docusaurus-theme-live-codeblock/src/index.ts
index be944c4290..67d239b685 100644
--- a/packages/docusaurus-theme-live-codeblock/src/index.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/index.ts
@@ -7,9 +7,9 @@
 
 import path from 'path';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
-import type {DocusaurusContext, Plugin} from '@docusaurus/types';
+import type {LoadContext, Plugin} from '@docusaurus/types';
 
-export default function theme(context: DocusaurusContext): Plugin {
+export default function themeLiveCodeblock(context: LoadContext): Plugin {
   const {
     i18n: {currentLocale},
   } = context;
@@ -18,7 +18,10 @@ export default function theme(context: DocusaurusContext): Plugin {
     name: 'docusaurus-theme-live-codeblock',
 
     getThemePath() {
-      return path.resolve(__dirname, './theme');
+      return path.resolve(__dirname, '../lib/theme');
+    },
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, '../src/theme');
     },
 
     getDefaultCodeTranslationMessages() {
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
new file mode 100644
index 0000000000..b377abadb6
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module '@docusaurus/theme-live-codeblock' {
+  export type ThemeConfig = {
+    liveCodeBlock: {
+      playgroundPosition: 'top' | 'bottom';
+    };
+  };
+}
+
+declare module '@theme/Playground' {
+  import type {LiveProviderProps} from 'react-live';
+
+  export interface Props extends LiveProviderProps {
+    children: string;
+  }
+  export default function Playground(props: LiveProviderProps): JSX.Element;
+}
+
+declare module '@theme/ReactLiveScope' {
+  interface Scope {
+    [key: string]: unknown;
+  }
+
+  const ReactLiveScope: Scope;
+  export default ReactLiveScope;
+}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
similarity index 68%
rename from packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
rename to packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
index 425e35bf7f..8babca5660 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx
@@ -8,11 +8,12 @@
 import React from 'react';
 import Playground from '@theme/Playground';
 import ReactLiveScope from '@theme/ReactLiveScope';
-import CodeBlock from '@theme-init/CodeBlock';
+import CodeBlock, {type Props} from '@theme-init/CodeBlock';
 
-const withLiveEditor = (Component) => {
-  function WrappedComponent(props) {
+const withLiveEditor = (Component: typeof CodeBlock) => {
+  function WrappedComponent(props: Props) {
     if (props.live) {
+      // @ts-expect-error: we have deliberately widened the type of language prop
       return <Playground scope={ReactLiveScope} {...props} />;
     }
 
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
similarity index 83%
rename from packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
rename to packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index 04e8bcdecd..62a11ab6ae 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as React from 'react';
+import React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
@@ -14,8 +14,10 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import type {Props} from '@theme/Playground';
+import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
-function Header({children}) {
+function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
@@ -55,7 +57,7 @@ function ThemedLiveEditor() {
     <LiveEditor
       // We force remount the editor on hydration,
       // otherwise dark prism theme is not applied
-      key={isBrowser}
+      key={String(isBrowser)}
       className={styles.playgroundEditor}
     />
   );
@@ -76,18 +78,22 @@ function EditorWithHeader() {
   );
 }
 
-export default function Playground({children, transformCode, ...props}) {
+export default function Playground({
+  children,
+  transformCode,
+  ...props
+}: Props): JSX.Element {
   const {
-    siteConfig: {
-      themeConfig: {
-        liveCodeBlock: {playgroundPosition},
-      },
-    },
+    siteConfig: {themeConfig},
   } = useDocusaurusContext();
+  const {
+    liveCodeBlock: {playgroundPosition},
+  } = themeConfig as ThemeConfig;
   const prismTheme = usePrismTheme();
 
   return (
     <div className={styles.playgroundContainer}>
+      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
         transformCode={transformCode || ((code) => `${code};`)}
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx
similarity index 100%
rename from packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js
rename to packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx
diff --git a/packages/docusaurus-theme-live-codeblock/src/types.d.ts b/packages/docusaurus-theme-live-codeblock/src/types.d.ts
new file mode 100644
index 0000000000..df2fa7d216
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/types.d.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// <reference types="@docusaurus/theme-classic" />
+
+declare module '@theme-init/CodeBlock' {
+  import type CodeBlock, {Props as BaseProps} from '@theme/CodeBlock';
+
+  export interface Props extends BaseProps {
+    live?: boolean;
+  }
+  const CodeBlockComp: typeof CodeBlock;
+  export default CodeBlockComp;
+}
diff --git a/packages/docusaurus-theme-live-codeblock/tsconfig.client.json b/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
new file mode 100644
index 0000000000..462a6376e3
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "jsx": "react-native"
+  },
+  "include": ["src/theme/", "src/*.d.ts", "src/custom-buble.ts"]
+}
diff --git a/packages/docusaurus-theme-live-codeblock/tsconfig.server.json b/packages/docusaurus-theme-live-codeblock/tsconfig.server.json
new file mode 100644
index 0000000000..2159e2ef8e
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/tsconfig.server.json
@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/*.ts"],
+  "exclude": ["src/custom-buble.ts"]
+}
diff --git a/packages/docusaurus-theme-search-algolia/package.json b/packages/docusaurus-theme-search-algolia/package.json
index 9b2e5a9a86..1f4a033989 100644
--- a/packages/docusaurus-theme-search-algolia/package.json
+++ b/packages/docusaurus-theme-search-algolia/package.json
@@ -18,10 +18,11 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "yarn build:server && yarn build:browser && yarn build:copy",
+    "build": "yarn build:server && yarn build:client && yarn build:copy && yarn build:format",
     "build:server": "tsc --project tsconfig.server.json",
-    "build:browser": "tsc --project tsconfig.browser.json",
-    "build:copy": "node copyUntypedFiles.mjs"
+    "build:client": "tsc --project tsconfig.client.json",
+    "build:copy": "node copyUntypedFiles.mjs",
+    "build:format": "prettier --config ../../.prettierrc --write \"lib/**/*.js\""
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.39",
diff --git a/packages/docusaurus-theme-search-algolia/tsconfig.browser.json b/packages/docusaurus-theme-search-algolia/tsconfig.client.json
similarity index 100%
rename from packages/docusaurus-theme-search-algolia/tsconfig.browser.json
rename to packages/docusaurus-theme-search-algolia/tsconfig.client.json