optimize theme's watch command

README.md

@@ -78,4 +78,4 @@ $ yarn lerna version --no-private
 
 - [ ] Automate publishing
 - [ ] Add unit testing
-- [ ] Optimize [Logos theme](./packages/logos-docusaurus-theme)'s watch command
+- [x] Optimize [Logos theme](./packages/logos-docusaurus-theme)'s watch command

package.json

@@ -34,6 +34,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "sync-directory": "^5.1.9",
     "typescript": "~4.7.4",
     "typescript-transform-paths": "^3.3.1"
   },

packages/logos-docusaurus-theme/gulpfile.js

@@ -1,16 +1,13 @@
 const _ = require('lodash')
-const minimist = require('minimist')
-const { promisify } = require('util')
-const exec = promisify(require('child_process').exec)
 
 const gulp = require('gulp')
 const path = require('path')
 const merge = require('merge2')
 const rimraf = require('rimraf')
 const ts = require('gulp-typescript')
-const replace = require('gulp-replace')
+const TscWatch = require('tsc-watch/client')
 const sourcemaps = require('gulp-sourcemaps')
-const sass = require('gulp-sass')(require('sass'))
+const syncDirectory = require('sync-directory')
 const { replaceTscAliasPaths } = require('tsc-alias')
 
 const project = ts.createProject('./tsconfig.client.json', {
@@ -20,24 +17,16 @@ const project = ts.createProject('./tsconfig.client.json', {
 
 const SOURCE_DIR = project.config.compilerOptions.rootDir ?? 'src'
 const OUT_DIR = project.config.compilerOptions.outDir ?? 'lib'
-const CLIENT_DIR = 'client'
-const STATIC_DIR = 'static'
 
 const sourceDir = path.resolve('./', SOURCE_DIR)
 const outDir = path.resolve('./', OUT_DIR)
 
-const sourceClientDir = path.join(sourceDir, CLIENT_DIR)
-const sourceStaticDir = path.join(sourceClientDir, STATIC_DIR)
-
-const outClientDir = path.join(outDir, CLIENT_DIR)
-const outStaticDir = path.join(outClientDir, STATIC_DIR)
-
 const clean = async (cb) => {
   rimraf(outDir, cb)
 }
 
 const build = (cb) => {
-  return gulp.series(clean, buildClient, clientPostBuild, buildServer)(cb)
+  return gulp.series(buildClient, copyFiles, postBuild, buildServer)(cb)
 }
 
 const buildClient = () => {
@@ -48,26 +37,13 @@ const buildClient = () => {
   )
 }
 
-const clientPostBuild = (done) =>
-  gulp.series(
-    (cb) =>
-      replaceTscAliasPaths({
-        configFile: './tsconfig.client.json',
-      })
-        .then(cb)
-        .catch(cb),
-    () =>
-      gulp
-        .src(path.join(outClientDir, '/**/*.js'), { base: outClientDir })
-        .pipe(
-          replace(/import (.+?) from '([^']+)\.scss'/g, (str) =>
-            str.replace('.scss', '.css'),
-          ),
-        )
-        .pipe(gulp.dest(outClientDir)),
-    transpileStyles,
-    copyStaticFiles,
-  )(done)
+const replaceTsAliasPaths = () =>
+  replaceTscAliasPaths({
+    configFile: './tsconfig.client.json',
+  })
+
+const postBuild = (done) =>
+  gulp.series((cb) => replaceTsAliasPaths().finally(cb))(done)
 
 const buildServer = () => {
   const project = ts.createProject('./tsconfig.json', {
@@ -79,39 +55,28 @@ const buildServer = () => {
   return merge(compiled.dts, compiled.js).pipe(gulp.dest(outDir))
 }
 
-const transpileSass = () =>
-  gulp
-    .src(path.join(sourceClientDir, '**/*.scss'))
-    .pipe(sourcemaps.init())
-    .pipe(sass().on('error', sass.logError))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest(outClientDir))
-
-const copyCssFiles = () =>
-  gulp
-    .src(path.join(sourceClientDir, '**/*.{css,scss}'), {
-      base: sourceClientDir,
-    })
-    .pipe(gulp.dest(outClientDir))
-
-const copyStaticFiles = () =>
-  gulp
-    .src(path.join(sourceStaticDir, '**/*'), { base: sourceStaticDir })
-    .pipe(gulp.dest(outStaticDir))
-
-const transpileStyles = (cb) => gulp.series(transpileSass, copyCssFiles)(cb)
+const syncDirectories = async (watch = false) => {
+  syncDirectory.async(sourceDir, outDir, {
+    watch,
+    verbose: 1,
+    exclude: [/.*\.(ts|tsx)$/],
+  })
+}
 
 const watch = async () => {
-  const { command } = minimist(process.argv.slice(2), {
-    string: 'command',
-    alias: ['c', 'cmd'],
+  syncDirectories(true)
+
+  const watch = new TscWatch()
+
+  watch.on('success', async () => {
+    await postBuild()
   })
 
-  await exec(command)
+  watch.start('--build')
+}
 
-  gulp.watch([path.join(sourceDir, '**/*.{ts,tsx,css,scss}')], (cb) =>
-    exec(command).finally(cb),
-  )
+const copyFiles = (cb) => {
+  syncDirectories(false).finally(cb)
 }
 
 gulp.task('build', build)
@@ -119,6 +84,5 @@ gulp.task('watch', watch)
 gulp.task('clean', clean)
 gulp.task('build-server', buildServer)
 gulp.task('build-client', buildClient)
-gulp.task('client-post-build', clientPostBuild)
-gulp.task('transpile-styles', transpileStyles)
-gulp.task('copy-static-files', copyStaticFiles)
+gulp.task('post-build', postBuild)
+gulp.task('copy-files', copyFiles)

packages/logos-docusaurus-theme/package.json

@@ -12,9 +12,10 @@
   "license": "MIT",
   "scripts": {
     "clean": "yarn gulp clean",
+    "prebuild": "yarn clean",
     "build": "yarn gulp build",
-    "watch": "yarn gulp watch --command 'yarn build'",
-    "build:client": "yarn gulp build-client && yarn gulp client-post-build",
+    "watch": "yarn gulp watch",
+    "build:client": "yarn gulp build-client",
     "build:server": "yarn gulp build-server",
     "prepublishOnly": "yarn clean && yarn build"
   },
@@ -51,7 +52,8 @@
     "@types/lodash": "^4.14.186",
     "@types/mdx-js__react": "^1.5.5",
     "sass": "^1.55.0",
-    "tsc-alias": "^1.7.0"
+    "tsc-alias": "^1.7.0",
+    "tsc-watch": "^5.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/logos-docusaurus-theme/src/index.ts

@@ -7,7 +7,7 @@ export default function logosTheme(
   options: PluginOptions,
 ): Plugin<undefined> {
   const clientModules: string[] = [
-    path.resolve(__dirname, './client/css/custom.css'),
+    path.resolve(__dirname, './client/css/custom.scss'),
   ]
 
   if (options.customCss) {

packages/logos-docusaurus-theme/tsconfig.client.json

@@ -23,5 +23,5 @@
     "plugins": [{ "transform": "typescript-transform-paths" }]
   },
   "include": ["src/client", "src/*.d.ts", "src/theme.ts"],
-  "exclude": ["**/__tests__/**"]
+  "exclude": ["src/index.ts", "**/__tests__/**"]
 }

packages/logos-docusaurus-theme/tsconfig.json

@@ -7,7 +7,8 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "rootDir": "src",
     "outDir": "lib",
-    "jsx": "react"
+    "jsx": "react",
+    "target": "es5"
   },
   "include": ["src"],
   "exclude": ["src/client", "**/__tests__/**"]