feat(v2): add typescript support for live code blocks (#2824)

facebook · Jan 2, 2021 · e08d15b · e08d15b
1 parent 869e118
commit e08d15b
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 4 deletions.
diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
@@ -13,6 +13,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@babel/standalone": "^7.12.12",
     "@docusaurus/core": "2.0.0-alpha.70",
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@@ -11,13 +11,55 @@ import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
-function Playground({children, theme, transformCode, ...props}) {
+const typescriptExtensions = ['ts', 'tsx'];
+const transformJs = (code) => `${code};`;
+
+function Playground({children, theme, className, scope}) {
+  const [tsTranspileError, setTsTranspileError] = React.useState(null);
+  const transformTs = React.useCallback((code) => {
+    try {
+      // eslint-disable-next-line global-require
+      const {code: transformed} = require('@babel/standalone').transform(code, {
+        filename: 'transformedCode.ts',
+        presets: [
+          'react',
+          [
+            'typescript',
+            {
+              isTSX: true,
+              allExtensions: true,
+            },
+          ],
+        ],
+      });
+      setTsTranspileError(null);
+
+      return transformed;
+    } catch (e) {
+      setTsTranspileError(e.message);
+    }
+
+    return '() => null;';
+  }, []);
+
+  const isTypescriptCode = React.useMemo(
+    () =>
+      typescriptExtensions.some((extension) => className.endsWith(extension)),
+    [className],
+  );
+
+  const transformCode = React.useMemo(() => {
+    return isTypescriptCode ? transformTs : transformJs;
+  }, [isTypescriptCode, transformTs]);
+
   return (
     <LiveProvider
+      scope={scope}
       code={children.replace(/\n$/, '')}
-      transformCode={transformCode || ((code) => `${code};`)}
+      transformCode={transformCode}
       theme={theme}
-      {...props}>
+      language={isTypescriptCode ? 'typescript' : 'javascript'}
+      className={className}>
       <div
         className={clsx(
           styles.playgroundHeader,
@@ -35,7 +77,7 @@ function Playground({children, theme, transformCode, ...props}) {
       </div>
       <div className={styles.playgroundPreview}>
         <LivePreview />
-        <LiveError />
+        {tsTranspileError ? <pre>{tsTranspileError}</pre> : <LiveError />}
       </div>
     </LiveProvider>
   );

diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -292,6 +292,31 @@ function Clock(props) {
 }
 ```
 
+Typescript is also supported. Simply replace `jsx live` with `tsx live`, then you are good to go.
+
+```tsx live
+() => {
+  const [date, setDate] = useState<Readonly<Date>>(new Date());
+  useEffect(() => {
+    var timerID: number = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  }, []);
+
+  function tick(): void {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```
+
 :::caution react-live and imports
 
 It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.

diff --git a/yarn.lock b/yarn.lock
@@ -1178,6 +1178,11 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/standalone@^7.12.12":
+  version "7.12.12"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.12.12.tgz#f858ab1c76d9c4c23fe0783a0330ad37755f0176"
+  integrity sha512-sHuNDN9NvPHsDAmxPD3RpsIeqCoFSW+ySa6+3teInrYe9y0Gn5swLQ2ZE7Zk6L8eBBESZM2ob1l98qWauQfDMA==
+
 "@babel/template@^7.10.4", "@babel/template@^7.7.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"