refactor(live-codeblock): migrate package to TS (#5851)

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

* Migrate test

packages/docusaurus-theme-live-codeblock/copyUntypedFiles.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+
+/**
+ * Copy all untyped and static assets files to lib.
+ */
+const srcDir = path.resolve(__dirname, 'src');
+const libDir = path.resolve(__dirname, 'lib');
+fs.copySync(srcDir, libDir, {
+  filter(filepath) {
+    return !/__tests__/.test(filepath) && !/\.tsx?$/.test(filepath);
+  },
+});

packages/docusaurus-theme-live-codeblock/package.json

@@ -2,10 +2,14 @@
   "name": "@docusaurus/theme-live-codeblock",
   "version": "2.0.0-beta.8",
   "description": "Docusaurus live code block component.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc && node copyUntypedFiles.js",
+    "watch": "node copyUntypedFiles.js && tsc --watch"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/docusaurus.git",
@@ -17,10 +21,15 @@
     "@docusaurus/utils-validation": "2.0.0-beta.8",
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",
+    "fs-extra": "^10.0.0",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^1.2.1",
     "react-live": "2.2.3"
   },
+  "devDependencies": {
+    "@docusaurus/types": "2.0.0-beta.8",
+    "@types/buble": "^0.20.1"
+  },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"

packages/docusaurus-theme-live-codeblock/src/__tests__/validateThemeConfig.test.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {validateThemeConfig, DEFAULT_CONFIG} = require('../validateThemeConfig');
+import {validateThemeConfig, DEFAULT_CONFIG} from '../validateThemeConfig';
 
 function testValidateThemeConfig(themeConfig) {
   function validate(schema, cfg) {

packages/docusaurus-theme-live-codeblock/src/custom-buble.ts

@@ -8,15 +8,23 @@
 // fork of Buble which removes Buble's large dependency and weighs in
 // at a smaller size of ~51kB
 // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
-const {transform, features: bubleFeatures} = require('@philpl/buble');
+import {
+  transform as bubleTransform,
+  features as bubleFeatures,
+  TransformOptions,
+  TransformOutput,
+} from '@philpl/buble';
 
 // This file is designed to mimic what's written in
 // https://github.com/kitten/buble/blob/mini/src/index.js, with custom transforms options,
 // so that webpack can consume it correctly.
-exports.features = bubleFeatures;
+export {bubleFeatures as features};
 
-exports.transform = function customTransform(source, options) {
+export function transform(
-  return transform(source, {
+  source: string,
+  options: TransformOptions,
+): TransformOutput {
+  return bubleTransform(source, {
     ...options,
     transforms: {
       asyncAwait: false,
@@ -25,4 +33,4 @@ exports.transform = function customTransform(source, options) {
       ...options.transforms,
     },
   });
-};
+}

packages/docusaurus-theme-live-codeblock/src/index.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
+import path from 'path';
-const {validateThemeConfig} = require('./validateThemeConfig');
+import {Plugin} from '@docusaurus/types';
 
-function theme() {
+export default function theme(): Plugin {
   return {
     name: 'docusaurus-theme-live-codeblock',
 
@@ -28,6 +28,4 @@ function theme() {
   };
 }
 
-module.exports = theme;
+export {validateThemeConfig} from './validateThemeConfig';
-
-theme.validateThemeConfig = validateThemeConfig;

packages/docusaurus-theme-live-codeblock/src/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 '@philpl/buble' {
+  import type {TransformOptions as OriginalTransformOptions} from 'buble';
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export * from 'buble';
+  export const features: string[];
+  export interface TransformOptions extends OriginalTransformOptions {
+    transforms?: OriginalTransformOptions['transforms'] & {
+      asyncAwait?: boolean;
+      getterSetter?: boolean;
+    };
+  }
+}

packages/docusaurus-theme-live-codeblock/src/validateThemeConfig.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {Joi} = require('@docusaurus/utils-validation');
+import {Joi} from '@docusaurus/utils-validation';
+import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
 
 const DEFAULT_CONFIG = {
   playgroundPosition: 'bottom',
 };
-exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
 const Schema = Joi.object({
   liveCodeBlock: Joi.object({
@@ -21,8 +21,15 @@ const Schema = Joi.object({
     .label('themeConfig.liveCodeBlock')
     .default(DEFAULT_CONFIG),
 });
-exports.Schema = Schema;
 
-exports.validateThemeConfig = function ({validate, themeConfig}) {
+function validateThemeConfig({
+  validate,
+  themeConfig,
+}: {
+  validate: Validate<ThemeConfig>;
+  themeConfig: ThemeConfig;
+}): ValidationResult<ThemeConfig> {
   return validate(Schema, themeConfig);
-};
+}
+
+export {DEFAULT_CONFIG, Schema, validateThemeConfig};

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

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  }
+}

yarn.lock

@@ -3928,6 +3928,13 @@
   resolved "https://registry.yarnpkg.com/@types/braces/-/braces-3.0.1.tgz#5a284d193cfc61abb2e5a50d36ebbc50d942a32b"
   integrity sha512-+euflG6ygo4bn0JHtn4pYqcXwRtLvElQ7/nnjDu7iYG56H0+OhCd7d6Ug0IE3WcFpZozBKW2+80FUbv5QGk5AQ==
 
+"@types/buble@^0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@types/buble/-/buble-0.20.1.tgz#cba009801fd417b0d2eb8fa6824b537842e05803"
+  integrity sha512-itmN3lGSTvXg9IImY5j290H+n0B3PpZST6AgEfJJDXfaMx2cdJJZro3/Ay+bZZdIAa25Z5rnoo9rHiPCbANZoQ==
+  dependencies:
+    magic-string "^0.25.0"
+
 "@types/cacheable-request@^6.0.1":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9"