Seperate build util functions

Author: Josh-Cena

packages/docusaurus-utils-build/src/build.ts

@@ -5,28 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import path from 'path';
 import fs from 'fs';
-import {transformFileSync} from '@babel/core';
 import {Globby} from '@docusaurus/utils';
 import Prettier from 'prettier';
-
-export function compileOrCopy(
-  filePath: string,
-  sourceDir: string,
-  targetDir: string,
-  compileAction: (file: string) => string,
-): void {
-  const targetPath = path
-    .resolve(targetDir, path.relative(sourceDir, filePath))
-    .replace(/\.tsx?/g, '.js');
-  fs.mkdirSync(path.dirname(targetPath), {recursive: true});
-  if (/\.tsx?/.test(path.extname(filePath))) {
-    fs.writeFileSync(targetPath, compileAction(filePath));
-  } else {
-    fs.copyFileSync(filePath, targetPath);
-  }
-}
+import {compileOrCopy, fullyTranspile, stripTypes} from './compiler';
 
 function transformDir(
   sourceDir: string,
@@ -41,33 +23,6 @@ function transformDir(
   );
 }
 
-export function fullyTranspile(file: string): string {
-  return (
-    transformFileSync(file, {
-      presets: [
-        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
-      ],
-      plugins: [
-        '@babel/plugin-transform-modules-commonjs',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        '@babel/plugin-proposal-optional-chaining',
-      ],
-    })?.code ?? ''
-  );
-}
-
-function stripTypes(file: string, prettierConfig: Prettier.Options) {
-  // TODO let's hope for the pipeline operator :D
-  return Prettier.format(
-    transformFileSync(file, {
-      presets: [
-        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
-      ],
-    })?.code ?? '',
-    {parser: 'babel', ...prettierConfig},
-  );
-}
-
 export default async function build(
   options: Partial<{
     sourceDir: string;

packages/docusaurus-utils-build/src/compiler.ts

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import Prettier from 'prettier';
+import {transformFileSync} from '@babel/core';
+
+export function compileOrCopy(
+  filePath: string,
+  sourceDir: string,
+  targetDir: string,
+  compileAction: (file: string) => string,
+): void {
+  const targetPath = path
+    .resolve(targetDir, path.relative(sourceDir, filePath))
+    .replace(/\.tsx?/g, '.js');
+  fs.mkdirSync(path.dirname(targetPath), {recursive: true});
+  if (/\.tsx?/.test(path.extname(filePath))) {
+    fs.writeFileSync(targetPath, compileAction(filePath));
+  } else {
+    fs.copyFileSync(filePath, targetPath);
+  }
+}
+
+export function fullyTranspile(file: string): string {
+  return (
+    transformFileSync(file, {
+      presets: [
+        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+      ],
+      plugins: [
+        '@babel/plugin-transform-modules-commonjs',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        '@babel/plugin-proposal-optional-chaining',
+      ],
+    })?.code ?? ''
+  );
+}
+
+export function stripTypes(
+  file: string,
+  prettierConfig: Prettier.Options,
+): string {
+  // TODO let's hope for the pipeline operator :D
+  return Prettier.format(
+    transformFileSync(file, {
+      presets: [
+        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+      ],
+    })?.code ?? '',
+    {parser: 'babel', ...prettierConfig},
+  );
+}

packages/docusaurus-utils-build/src/watch.ts

@@ -8,31 +8,43 @@
 import chokidar from 'chokidar';
 import {debounce} from 'lodash';
 import chalk from 'chalk';
-import {fullyTranspile, compileOrCopy} from './build';
+import {fullyTranspile, stripTypes, compileOrCopy} from './compiler';
 
 export default async function watch(
   options: Partial<{
     sourceDir: string;
     targetDir: string;
+    themeDir: string;
+    themeTargetDir: string;
     ignore: string[];
   }> = {},
 ): Promise<void> {
   const {
     sourceDir = 'src',
     targetDir = 'lib',
+    themeDir = 'src/theme',
+    themeTargetDir = 'lib/theme',
     ignore = ['**/__tests__/**'],
   } = options;
-  const watcher = chokidar.watch(sourceDir, {
+  const watcher = chokidar.watch([sourceDir, themeDir], {
     ignoreInitial: true,
-    ignored: ignore,
+    ignored: [...ignore, '**/*.d.ts'],
     awaitWriteFinish: {
       stabilityThreshold: 50,
       pollInterval: 10,
     },
   });
-  const debouncedCompile = debounce((filePath) => {
+  const debouncedCompile = debounce((filePath: string) => {
     try {
-      compileOrCopy(filePath, sourceDir, targetDir, fullyTranspile);
+      // TODO: is check this good enough?
+      if (filePath.includes(themeDir)) {
+        // For perf reasons, we don't do prettier in watch mode
+        compileOrCopy(filePath, themeDir, themeTargetDir, (file) =>
+          stripTypes(file, {}),
+        );
+      } else {
+        compileOrCopy(filePath, sourceDir, targetDir, fullyTranspile);
+      }
     } catch (e) {
       console.log(chalk.red(`Error while processing ${chalk.cyan(filePath)}:`));
       console.error(e);