refactor(live-codeblock): migrate theme to TS (#6583)

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

* Don't make it visible

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",

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() {

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;
+}

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js → 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} />;
     }
 

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js → 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};`)}

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;
+}

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"]
+}

packages/docusaurus-theme-live-codeblock/tsconfig.server.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/*.ts"],
+  "exclude": ["src/custom-buble.ts"]
+}

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",