Make build-figma-plugin --watch more robust

yuanqing · Aug 13, 2023 · 4b271e3 · 4b271e3
1 parent df5aa26
commit 4b271e3
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 36 deletions.
diff --git a/packages/build/src/build-async.ts b/packages/build/src/build-async.ts
@@ -8,9 +8,9 @@ import { trackElapsedTime } from './utilities/track-elapsed-time.js'
 import { typeCheckBuild } from './utilities/type-check/type-check-build.js'
 
 export async function buildAsync(
-  options: BuildOptions & { clearPreviousLine: boolean }
+  options: BuildOptions & { clearPreviousLine: boolean; exitOnError: boolean }
 ): Promise<void> {
-  const { minify, typecheck, clearPreviousLine } = options
+  const { minify, typecheck, clearPreviousLine, exitOnError } = options
   try {
     if (typecheck === true) {
       const getTypeCheckElapsedTime = trackElapsedTime()
@@ -39,6 +39,8 @@ export async function buildAsync(
     }
   } catch (error: any) {
     log.error(error.message)
-    process.exit(1)
+    if (exitOnError === true) {
+      process.exit(1)
+    }
   }
 }
diff --git a/packages/build/src/cli.ts b/packages/build/src/cli.ts
@@ -25,11 +25,16 @@ sade('build-figma-plugin', true)
       await buildAsync({
         ...buildOptions,
         clearPreviousLine: true,
+        exitOnError: false,
         typecheck: false
       })
       await watchAsync(buildOptions)
       return
     }
-    await buildAsync({ ...buildOptions, clearPreviousLine: false })
+    await buildAsync({
+      ...buildOptions,
+      clearPreviousLine: false,
+      exitOnError: true
+    })
   })
   .parse(process.argv)
diff --git a/packages/build/src/watch-async/watch-async.ts b/packages/build/src/watch-async/watch-async.ts
@@ -13,6 +13,12 @@ import { watchIgnoreRegex } from './watch-ignore-regex.js'
 const cssRegex = /\.css$/
 const packageJsonRegex = /^package\.json$/
 
+const mapChokidarWatchEventToLabel: Record<string, string> = {
+  add: 'Added',
+  change: 'Changed',
+  unlink: 'Deleted'
+}
+
 export async function watchAsync(options: BuildOptions): Promise<void> {
   const { minify, typecheck } = options
   let endTypeCheckWatch: () => void
@@ -34,40 +40,48 @@ export async function watchAsync(options: BuildOptions): Promise<void> {
       }
     }
   )
-  if (typecheck === false) {
-    watcher.on('ready', function (): void {
+
+  watcher.on('ready', function (): void {
+    if (typecheck === false) {
       log.info('Watching...')
-    })
-  }
-  watcher.on('change', async function (file: string): Promise<void> {
-    try {
-      if (typecheck === true && file.indexOf('tsconfig.json') !== -1) {
-        endTypeCheckWatch()
-      }
-      log.clearViewport()
-      const getElapsedTime = trackElapsedTime()
-      log.info(`Changed ${yellow(file)}`)
-      const promises: Array<Promise<void>> = []
-      if (packageJsonRegex.test(file) === true) {
-        promises.push(buildManifestAsync(minify))
-      } else {
-        if (cssRegex.test(file) === true) {
-          promises.push(buildCssModulesTypingsAsync())
+    }
+
+    watcher.on(
+      'all',
+      async function (event: string, file: string): Promise<void> {
+        if (typeof mapChokidarWatchEventToLabel[event] === 'undefined') {
+          return
+        }
+        try {
+          if (typecheck === true && file.indexOf('tsconfig.json') !== -1) {
+            endTypeCheckWatch()
+          }
+          log.clearViewport()
+          const getElapsedTime = trackElapsedTime()
+          log.info(`${mapChokidarWatchEventToLabel[event]} ${yellow(file)}`)
+          const promises: Array<Promise<void>> = []
+          if (packageJsonRegex.test(file) === true) {
+            promises.push(buildManifestAsync(minify))
+          } else {
+            if (cssRegex.test(file) === true) {
+              promises.push(buildCssModulesTypingsAsync())
+            }
+          }
+          promises.push(buildBundlesAsync(minify))
+          await Promise.all(promises)
+          log.success(`Built in ${getElapsedTime()}`)
+          if (typecheck === false) {
+            log.info('Watching...')
+            return
+          }
+          if (file.indexOf('tsconfig.json') !== -1) {
+            // Restart the type-check watcher program
+            endTypeCheckWatch = typeCheckWatch()
+          }
+        } catch (error: any) {
+          log.error(error.message)
         }
       }
-      promises.push(buildBundlesAsync(minify))
-      await Promise.all(promises)
-      log.success(`Built in ${getElapsedTime()}`)
-      if (typecheck === false) {
-        log.info('Watching...')
-        return
-      }
-      if (file.indexOf('tsconfig.json') !== -1) {
-        // Restart the type-check watcher program
-        endTypeCheckWatch = typeCheckWatch()
-      }
-    } catch (error: any) {
-      log.error(error.message)
-    }
+    )
   })
 }