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

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

* Migrate test

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) {
-  return transform(source, {
+export function transform(
+  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');
-const {validateThemeConfig} = require('./validateThemeConfig');
+import path from 'path';
+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;
-
-theme.validateThemeConfig = validateThemeConfig;
+export {validateThemeConfig} from './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};