Simplify playground/devEnv (#397

packages/playground/devEnv/build.ts

@@ -9,10 +9,8 @@ import {ServerStyleSheet} from 'styled-components'
 import {definedGlobals} from '../../../theatre/devEnv/definedGlobals'
 import {createEsbuildLiveReloadTools} from './createEsbuildLiveReloadTools'
 import {createProxyServer} from './createProxyServer'
-import {createServerForceClose} from './createServerForceClose'
 import {PlaygroundPage} from './home/PlaygroundPage'
 import {openForOS} from './openForOS'
-import {timer} from './timer'
 import {tryMultiplePorts} from './tryMultiplePorts'
 
 const playgroundDir = (folder: string) => path.join(__dirname, '..', folder)
@@ -22,7 +20,7 @@ const sharedDir = playgroundDir('src/shared')
 const personalDir = playgroundDir('src/personal')
 const testDir = playgroundDir('src/tests')
 
-export async function start(options: {
+async function start(options: {
   /** enable live reload and watching stuff */
   dev: boolean
   /** make some UI elements predictable by setting the __IS_VISUAL_REGRESSION_TESTING value on window */
@@ -30,11 +28,10 @@ export async function start(options: {
   serve?: {
     findAvailablePort: boolean
     openBrowser: boolean
-    waitBeforeStartingServer?: Promise<void>
     /** defaults to 8080 */
     defaultPort?: number
   }
-}): Promise<{stop(): Promise<void>}> {
+}): Promise<void> {
   const defaultPort = options.serve?.defaultPort ?? 8080
 
   const liveReload =
@@ -54,16 +51,22 @@ export async function start(options: {
 
   // Collect all entry directories per module per group
   const groups: Groups = await Promise.all(
-    [sharedDir, personalDir, testDir].map(async (groupDir) =>
+    [sharedDir, personalDir, testDir].map(async (groupDir) => {
-      readdir(groupDir)
+      let groupDirItems: string[]
-        .then(async (groupDirItems) => [
+
-          path.basename(groupDir),
+      try {
-          await Promise.all(
+        groupDirItems = await readdir(groupDir)
+      } catch (error) {
+        // If the group dir doesn't exist, we just set its entry to undefined
+        return [path.basename(groupDir), undefined]
+      }
+
+      const allEntries = await Promise.all(
         groupDirItems.map(
           async (
             moduleDirName,
           ): Promise<[string, PlaygroundExample | undefined]> => {
-                const entryKey = path.basename(moduleDirName)
+            const playgroundKey = path.basename(moduleDirName)
             const entryFilePath = path.join(
               groupDir,
               moduleDirName,
@@ -75,17 +78,9 @@ export async function start(options: {
                 .then((s) => s.isFile())
                 .catch(() => false))
             )
-                  return [entryKey, undefined]
+              return [playgroundKey, undefined]
 
-                return [
+            const playgroundExample = {
-                  entryKey,
-                  {
-                    // Including your own html file for playground is an experimental feature,
-                    // it's not quite ready for "prime time" and advertising to the masses until
-                    // it properly handles file watching.
-                    // It's good for now, since we can use it for some demos, just make sure that
-                    // you add a comment to the custom index.html file saying that you have to
-                    // restart playground server entirely to see changes.
               useHtml: await readFile(
                 path.join(groupDir, moduleDirName, 'index.html'),
                 'utf-8',
@@ -96,29 +91,25 @@ export async function start(options: {
                 path.basename(groupDir),
                 moduleDirName,
               ),
+            }
+
+            return [playgroundKey, playgroundExample]
           },
-                ]
-              },
-            ),
-          ).then((entries) =>
-            Object.fromEntries(
-              entries.filter((entry) => entry[1] !== undefined),
-            ),
-          ),
-        ])
-        .catch(() =>
-          // If the group dir doesn't exist, we just set its entry to undefined
-          [path.basename(groupDir), undefined],
-        ),
         ),
       )
-    .then((entries) =>
+
+      const validEntries = allEntries.filter(
+        ([_, playgroundExample]) => playgroundExample !== undefined,
+      )
+
+      return [path.basename(groupDir), Object.fromEntries(validEntries)]
+    }),
+  ).then((entries) =>
     Object.fromEntries(
       // and then filter it out.
       entries.filter((entry) => entry[1] !== undefined),
     ),
   )
-    .catch(wrapCatch('reading group dirs'))
 
   // Collect all entry files
   const entryPoints = Object.values(groups)
@@ -126,8 +117,8 @@ export async function start(options: {
     .map((module) => module.entryFilePath)
 
   // Collect all output directories
-  const outModules = Object.values(groups).flatMap((group) =>
+  const outModules: PlaygroundExample[] = Object.values(groups).flatMap(
-    Object.values(group),
+    (group) => Object.values(group),
   )
 
   // Render home page contents
@@ -155,8 +146,6 @@ export async function start(options: {
     }
   })()
 
-  const _initialBuild = timer('esbuild initial playground entry point builds')
-
   const esbuildConfig: BuildOptions = {
     entryPoints,
     bundle: true,
@@ -179,12 +168,12 @@ export async function start(options: {
       'process.env.BUILT_FOR_PLAYGROUND': JSON.stringify('true'),
     },
     banner: liveReload?.esbuildBanner,
-    watch: liveReload?.esbuildWatch && {
+    // watch: liveReload?.esbuildWatch && {
-      onRebuild(error, result) {
+    //   onRebuild(error, result) {
-        esbuildWatchStop = result?.stop ?? esbuildWatchStop
+    //     esbuildWatchStop = result?.stop ?? esbuildWatchStop
-        liveReload?.esbuildWatch.onRebuild?.(error, result)
+    //     liveReload?.esbuildWatch.onRebuild?.(error, result)
-      },
+    //   },
-    },
+    // },
     plugins: [
       {
         name: 'watch playground assets',
@@ -234,24 +223,20 @@ export async function start(options: {
     ],
   }
 
-  let esbuildWatchStop: undefined | (() => void)
+  const ctx = await esbuild.context(esbuildConfig)
+
+  if (liveReload) {
+    await ctx.watch()
+  } else {
+    await ctx.rebuild()
+  }
 
-  await esbuild
-    .build(esbuildConfig)
-    .finally(() => _initialBuild.stop())
-    .catch(
-      // if in dev mode, permit continuing to watch even if there was an error
-      options.dev
-        ? () => Promise.resolve()
-        : wrapCatch(`failed initial esbuild.build`),
-    )
-    .then(async (buildResult) => {
-      esbuildWatchStop = buildResult?.stop
   // Read index.html template
   const index = await readFile(
     path.join(__dirname, 'index.html'),
     'utf8',
   ).catch(wrapCatch('reading index.html template'))
+
   await Promise.all([
     // Write home page
     writeFile(
@@ -277,44 +262,31 @@ export async function start(options: {
         'utf-8',
       ).catch(
         wrapCatch(
-              `writing index.html for ${path.relative(
+          `writing index.html for ${path.relative(buildDir, outModule.outDir)}`,
-                buildDir,
-                outModule.outDir,
-              )}`,
         ),
       ),
     ),
   ])
-    })
-    .catch((err) => {
-      console.error('build.ts: esbuild or html files writing error', err)
-      return process.exit(1)
-    })
 
   // Only start dev server in serve, otherwise just run build and that's it
   if (!options.serve) {
-    return {
+    await ctx.dispose()
-      stop() {
+    return
-        esbuildWatchStop?.()
-        return Promise.resolve()
-      },
-    }
   }
 
   const {serve} = options
-  await serve.waitBeforeStartingServer
 
   // We start ESBuild serve with no build config because it doesn't need to build
   // anything, we are already using ESBuild watch.
   /** See https://esbuild.github.io/api/#serve-return-values */
-  const esbuildServe = await esbuild.serve({servedir: buildDir}, {})
+  const esbuildServe = await ctx.serve({servedir: buildDir})
 
   const proxyServer = createProxyServer(liveReload?.handleRequest, {
     hostname: '0.0.0.0',
     port: esbuildServe.port,
   })
 
-  const proxyForceExit = createServerForceClose(proxyServer)
+  // const proxyForceExit = createServerForceClose(proxyServer)
   const portTries = serve.findAvailablePort ? 10 : 1
   const portChosen = await tryMultiplePorts(defaultPort, portTries, proxyServer)
 
@@ -328,15 +300,12 @@ export async function start(options: {
     }, 1000)
   }
 
-  return {
+  // return {
-    stop() {
+  //   async stop() {
-      esbuildServe.stop()
+  //     esbuildWatchStop?.()
-      esbuildWatchStop?.()
+  //     await proxyForceExit()
-      return Promise.all([proxyForceExit(), esbuildServe.wait]).then(() => {
+  //   },
-        // map to void for type defs
+  // }
-      })
-    },
-  }
 }
 
 function wrapCatch(message: string) {
@@ -344,3 +313,27 @@ function wrapCatch(message: string) {
     return Promise.reject(`Rejected "${message}":\n    ${err.toString()}`)
   }
 }
+
+const dev = process.argv.find((arg) => ['--dev', '-d'].includes(arg)) != null
+
+const serve =
+  process.argv.find((arg) => ['--serve'].includes(arg)) != null || undefined
+
+const isCI = Boolean(process.env.CI)
+
+start({
+  dev: !isCI && dev,
+  isVisualRegressionTesting: isCI,
+  serve: serve && {
+    findAvailablePort: !isCI,
+    // If not in CI, try to spawn a browser
+    openBrowser: !isCI,
+    // waitBeforeStartingServer: current?.stop(),
+  },
+}).then(
+  () => {},
+  (err) => {
+    console.error(err)
+    process.exit(1)
+  },
+)

packages/playground/devEnv/cli.js

@@ -1,66 +0,0 @@
-// @ts-check
-const {timer} = require('./timer')
-
-const dev = process.argv.find((arg) => ['--dev', '-d'].includes(arg)) != null
-const serve =
-  process.argv.find((arg) => ['--serve'].includes(arg)) != null || undefined
-
-const isCI = Boolean(process.env.CI)
-
-/** Currently running server that can be stopped before restarting */
-let current
-
-console.log('cli.js', {dev, serve, isCI})
-
-function onUpdatedBuildScript(rebuild) {
-  delete require.cache[require.resolve('./build.compiled')]
-  /** @type {import("./build")} */
-  const module = require('./build.compiled')
-  const _start = timer('build.compiled start')
-  try {
-    module
-      .start({
-        dev: !isCI && dev,
-        isVisualRegressionTesting: isCI,
-        serve: serve && {
-          findAvailablePort: !isCI,
-          // If not in CI, try to spawn a browser
-          openBrowser: !isCI && !rebuild,
-          waitBeforeStartingServer: current?.stop(),
-        },
-      })
-      .then((running) => {
-        current = running
-      })
-      .catch((err) => {
-        console.error('cli.js calling start() in build.compiled.js', err)
-      })
-      .finally(() => _start.stop())
-  } catch (err) {
-    _start.stop()
-  }
-}
-
-timer('cli.js').wrap(() => {
-  timer('esbuild build.compiled.js').wrap(() => {
-    const {build} = require('esbuild')
-
-    // compile build files directly which is about 10x faster than esbuild-register
-    build({
-      entryPoints: [__dirname + '/build.ts'],
-      outfile: __dirname + '/build.compiled.js',
-      bundle: true,
-      platform: 'node',
-      external: ['esbuild', 'react', 'react-dom/server'],
-      watch: dev && {
-        onRebuild(err, res) {
-          if (!err) {
-            onUpdatedBuildScript(true)
-          }
-        },
-      },
-    }).then(() => {
-      onUpdatedBuildScript(false)
-    })
-  })
-})

packages/playground/devEnv/createEsbuildLiveReloadTools.ts

@@ -5,23 +5,22 @@ export function createEsbuildLiveReloadTools(): {
   handleRequest(req: IncomingMessage, res: ServerResponse): boolean
   hasOpenConnections(): boolean
   esbuildBanner: esbuild.BuildOptions['banner']
-  esbuildWatch: esbuild.WatchMode
 } {
   const openResponses = new Set<ServerResponse>()
   return {
     handleRequest(req, res) {
       // If special /esbuild url requested, subscribe clients to changes
-      if (req.url === '/esbuild') {
+      // if (req.url === '/esbuild') {
-        res.writeHead(200, {
+      //   res.writeHead(200, {
-          'Content-Type': 'text/event-stream',
+      //     'Content-Type': 'text/event-stream',
-          'Cache-Control': 'no-cache',
+      //     'Cache-Control': 'no-cache',
-          Connection: 'keep-alive',
+      //     Connection: 'keep-alive',
-        })
+      //   })
-        res.write('data: open\n\n')
+      //   res.write('data: open\n\n')
-        openResponses.add(res)
+      //   openResponses.add(res)
-        res.on('close', () => openResponses.delete(res))
+      //   res.on('close', () => openResponses.delete(res))
-        return true // handled
+      //   return true // handled
-      }
+      // }
       return false
     },
     hasOpenConnections() {
@@ -32,6 +31,7 @@ export function createEsbuildLiveReloadTools(): {
       // This is being used so we can at least get a few type completions, but please understand that
       // you cannot reference any non-global browser values from within the function.
       js: `;(${function liveReloadClientSetup() {
+        console.log('%cLive reload enabled', 'color: gray')
         // from packages/playground/devEnv/createEsbuildLiveReloadTools.ts
         function connect() {
           if (window.parent !== window) {
@@ -39,24 +39,13 @@ export function createEsbuildLiveReloadTools(): {
               '%cLive reload disabled for iframed content',
               'color: gray',
             )
-            return
           }
           try {
             const es = new EventSource('/esbuild')
-            es.onmessage = (evt) => {
+            es.addEventListener('change', () => {
-              switch (evt.data) {
+              console.log('%cLive reload triggered', 'color: gray')
-                case 'reload':
+              window.location.reload()
-                  location.reload()
+            })
-                  break
-                case 'open':
-                  console.log('%cLive reload ready', 'color: gray')
-                  break
-              }
-            }
-            es.onerror = () => {
-              es.close()
-              attemptConnect()
-            }
           } catch (err) {
             attemptConnect()
           }
@@ -67,19 +56,5 @@ export function createEsbuildLiveReloadTools(): {
         attemptConnect()
       }.toString()})();`,
     },
-    esbuildWatch: {
-      onRebuild(error, res) {
-        if (!error) {
-          if (openResponses.size > 0) {
-            console.error(`Reloading for ${openResponses.size} clients...`)
-            // Notify clients on rebuild
-            openResponses.forEach((res) => res.write('data: reload\n\n'))
-            openResponses.clear()
-          }
-        } else {
-          console.error('Rebuild had errors...')
-        }
-      },
-    },
   }
 }

packages/playground/devEnv/createServerForceClose.ts

@@ -1,21 +0,0 @@
-import type {Server, Socket} from 'net'
-
-export function createServerForceClose(server: Server) {
-  const openConnections = new Set<Socket>()
-  server.on('connection', (conn) => {
-    openConnections.add(conn)
-    conn.on('close', () => openConnections.delete(conn))
-  })
-
-  return function serverForceClose(): Promise<void> {
-    for (const openConnection of openConnections) {
-      openConnection.destroy()
-    }
-
-    return new Promise((res) => {
-      server.close(() => {
-        res()
-      })
-    })
-  }
-}

packages/playground/devEnv/timer.d.ts

@@ -1,5 +0,0 @@
-/** Create timer */
-export function timer(name: string): {
-  wrap<T>(fn: () => T): T
-  stop(): void
-}

packages/playground/devEnv/timer.js

@@ -1,25 +0,0 @@
-/** @param {string} name */
-function timer(name) {
-  const startMs = Date.now()
-  console.group(`▶️ ${name}`)
-  let stopped = false
-  return {
-    /**
-     * @type {<T> (fn: () => T): T}
-     */
-    wrap(fn) {
-      const result = fn()
-      this.stop()
-      return result
-    },
-    stop() {
-      if (stopped) return
-      stopped = true
-      console.groupEnd()
-      console.log(
-        `✓ ${name} in ${((Date.now() - startMs) * 0.001).toFixed(3)}s`,
-      )
-    },
-  }
-}
-exports.timer = timer

packages/playground/package.json

@@ -8,9 +8,9 @@
     "dist/**/*"
   ],
   "scripts": {
-    "serve": "node devEnv/cli.js --serve --dev",
+    "serve": "node -r esbuild-register devEnv/build.ts --serve --dev",
-    "serve:ci": "node devEnv/cli.js --serve",
+    "serve:ci": "node -r esbuild-register devEnv/build.ts --serve",
-    "build": "node devEnv/cli.js",
+    "build": "node -r esbuild-register devEnv/build.ts",
     "build:static": "echo 'building for vercel' && yarn run build",
     "typecheck": "tsc --noEmit",
     "test": "playwright test --config=devEnv/playwright.config.ts",
@@ -29,7 +29,8 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
-    "esbuild": "^0.13.15",
+    "esbuild": "^0.17.6",
+    "esbuild-register": "^3.4.2",
     "three": "^0.130.1",
     "typescript": "^4.4.2"
   }

yarn.lock

@@ -5966,6 +5966,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/android-arm64@npm:0.17.6"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.15.15":
   version: 0.15.15
   resolution: "@esbuild/android-arm@npm:0.15.15"
@@ -5980,6 +5987,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/android-arm@npm:0.17.6"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/android-x64@npm:0.16.7"
@@ -5987,6 +6001,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/android-x64@npm:0.17.6"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/darwin-arm64@npm:0.16.7"
@@ -5994,6 +6015,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/darwin-arm64@npm:0.17.6"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/darwin-x64@npm:0.16.7"
@@ -6001,6 +6029,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/darwin-x64@npm:0.17.6"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/freebsd-arm64@npm:0.16.7"
@@ -6008,6 +6043,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/freebsd-arm64@npm:0.17.6"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/freebsd-x64@npm:0.16.7"
@@ -6015,6 +6057,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/freebsd-x64@npm:0.17.6"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-arm64@npm:0.16.7"
@@ -6022,6 +6071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-arm64@npm:0.17.6"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-arm@npm:0.16.7"
@@ -6029,6 +6085,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-arm@npm:0.17.6"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-ia32@npm:0.16.7"
@@ -6036,6 +6099,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-ia32@npm:0.17.6"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.15.15":
   version: 0.15.15
   resolution: "@esbuild/linux-loong64@npm:0.15.15"
@@ -6050,6 +6120,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-loong64@npm:0.17.6"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-mips64el@npm:0.16.7"
@@ -6057,6 +6134,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-mips64el@npm:0.17.6"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-ppc64@npm:0.16.7"
@@ -6064,6 +6148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-ppc64@npm:0.17.6"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-riscv64@npm:0.16.7"
@@ -6071,6 +6162,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-riscv64@npm:0.17.6"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-s390x@npm:0.16.7"
@@ -6078,6 +6176,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-s390x@npm:0.17.6"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/linux-x64@npm:0.16.7"
@@ -6085,6 +6190,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/linux-x64@npm:0.17.6"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/netbsd-x64@npm:0.16.7"
@@ -6092,6 +6204,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/netbsd-x64@npm:0.17.6"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/openbsd-x64@npm:0.16.7"
@@ -6099,6 +6218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/openbsd-x64@npm:0.17.6"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/sunos-x64@npm:0.16.7"
@@ -6106,6 +6232,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/sunos-x64@npm:0.17.6"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/win32-arm64@npm:0.16.7"
@@ -6113,6 +6246,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/win32-arm64@npm:0.17.6"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/win32-ia32@npm:0.16.7"
@@ -6120,6 +6260,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/win32-ia32@npm:0.17.6"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.16.7":
   version: 0.16.7
   resolution: "@esbuild/win32-x64@npm:0.16.7"
@@ -6127,6 +6274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.17.6":
+  version: 0.17.6
+  resolution: "@esbuild/win32-x64@npm:0.17.6"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^0.4.3":
   version: 0.4.3
   resolution: "@eslint/eslintrc@npm:0.4.3"
@@ -15355,13 +15509,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-android-arm64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-android-arm64@npm:0.13.15"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-android-arm64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-android-arm64@npm:0.15.15"
@@ -15369,13 +15516,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-darwin-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-darwin-64@npm:0.13.15"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-darwin-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-darwin-64@npm:0.15.15"
@@ -15383,13 +15523,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-darwin-arm64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-darwin-arm64@npm:0.13.15"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-darwin-arm64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-darwin-arm64@npm:0.15.15"
@@ -15397,13 +15530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-freebsd-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-freebsd-64@npm:0.13.15"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-freebsd-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-freebsd-64@npm:0.15.15"
@@ -15411,13 +15537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-freebsd-arm64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-freebsd-arm64@npm:0.13.15"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-freebsd-arm64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-freebsd-arm64@npm:0.15.15"
@@ -15438,13 +15557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-32@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-32@npm:0.13.15"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-32@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-32@npm:0.15.15"
@@ -15452,13 +15564,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-64@npm:0.13.15"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-64@npm:0.15.15"
@@ -15466,13 +15571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-arm64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-arm64@npm:0.13.15"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-arm64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-arm64@npm:0.15.15"
@@ -15480,13 +15578,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-arm@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-arm@npm:0.13.15"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-arm@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-arm@npm:0.15.15"
@@ -15494,13 +15585,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-mips64le@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-mips64le@npm:0.13.15"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-mips64le@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-mips64le@npm:0.15.15"
@@ -15508,13 +15592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-ppc64le@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-linux-ppc64le@npm:0.13.15"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-ppc64le@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-linux-ppc64le@npm:0.15.15"
@@ -15553,13 +15630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-netbsd-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-netbsd-64@npm:0.13.15"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-netbsd-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-netbsd-64@npm:0.15.15"
@@ -15567,13 +15637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-openbsd-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-openbsd-64@npm:0.13.15"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-openbsd-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-openbsd-64@npm:0.15.15"
@@ -15602,10 +15665,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-sunos-64@npm:0.13.15":
+"esbuild-register@npm:^3.4.2":
-  version: 0.13.15
+  version: 3.4.2
-  resolution: "esbuild-sunos-64@npm:0.13.15"
+  resolution: "esbuild-register@npm:3.4.2"
-  conditions: os=sunos & cpu=x64
+  dependencies:
+    debug: ^4.3.4
+  peerDependencies:
+    esbuild: ">=0.12 <1"
+  checksum: f65d1ccb58b1ccbba376efb1fc023abe22731d9b79eead1b0120e57d4413318f063696257a5af637b527fa1d3f009095aa6edb1bf6ff69d637a9ab281fb727b3
   languageName: node
   linkType: hard
 
@@ -15616,13 +15683,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-32@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-windows-32@npm:0.13.15"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-32@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-windows-32@npm:0.15.15"
@@ -15630,13 +15690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-windows-64@npm:0.13.15"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-windows-64@npm:0.15.15"
@@ -15644,13 +15697,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-arm64@npm:0.13.15":
-  version: 0.13.15
-  resolution: "esbuild-windows-arm64@npm:0.13.15"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-arm64@npm:0.15.15":
   version: 0.15.15
   resolution: "esbuild-windows-arm64@npm:0.15.15"
@@ -15685,68 +15731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.13.15":
-  version: 0.13.15
-  resolution: "esbuild@npm:0.13.15"
-  dependencies:
-    esbuild-android-arm64: 0.13.15
-    esbuild-darwin-64: 0.13.15
-    esbuild-darwin-arm64: 0.13.15
-    esbuild-freebsd-64: 0.13.15
-    esbuild-freebsd-arm64: 0.13.15
-    esbuild-linux-32: 0.13.15
-    esbuild-linux-64: 0.13.15
-    esbuild-linux-arm: 0.13.15
-    esbuild-linux-arm64: 0.13.15
-    esbuild-linux-mips64le: 0.13.15
-    esbuild-linux-ppc64le: 0.13.15
-    esbuild-netbsd-64: 0.13.15
-    esbuild-openbsd-64: 0.13.15
-    esbuild-sunos-64: 0.13.15
-    esbuild-windows-32: 0.13.15
-    esbuild-windows-64: 0.13.15
-    esbuild-windows-arm64: 0.13.15
-  dependenciesMeta:
-    esbuild-android-arm64:
-      optional: true
-    esbuild-darwin-64:
-      optional: true
-    esbuild-darwin-arm64:
-      optional: true
-    esbuild-freebsd-64:
-      optional: true
-    esbuild-freebsd-arm64:
-      optional: true
-    esbuild-linux-32:
-      optional: true
-    esbuild-linux-64:
-      optional: true
-    esbuild-linux-arm:
-      optional: true
-    esbuild-linux-arm64:
-      optional: true
-    esbuild-linux-mips64le:
-      optional: true
-    esbuild-linux-ppc64le:
-      optional: true
-    esbuild-netbsd-64:
-      optional: true
-    esbuild-openbsd-64:
-      optional: true
-    esbuild-sunos-64:
-      optional: true
-    esbuild-windows-32:
-      optional: true
-    esbuild-windows-64:
-      optional: true
-    esbuild-windows-arm64:
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: d5fac8f28a6328592e45f9d49a7e98420cf2c2a3ff5a753bbf011ab79bcb5c062209ef862d3ae0875d8f2a50d40c112b0224e8b419a7cbffc6e2b02cee11ef7e
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:^0.15.15":
   version: 0.15.15
   resolution: "esbuild@npm:0.15.15"
@@ -15901,6 +15885,83 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.17.6":
+  version: 0.17.6
+  resolution: "esbuild@npm:0.17.6"
+  dependencies:
+    "@esbuild/android-arm": 0.17.6
+    "@esbuild/android-arm64": 0.17.6
+    "@esbuild/android-x64": 0.17.6
+    "@esbuild/darwin-arm64": 0.17.6
+    "@esbuild/darwin-x64": 0.17.6
+    "@esbuild/freebsd-arm64": 0.17.6
+    "@esbuild/freebsd-x64": 0.17.6
+    "@esbuild/linux-arm": 0.17.6
+    "@esbuild/linux-arm64": 0.17.6
+    "@esbuild/linux-ia32": 0.17.6
+    "@esbuild/linux-loong64": 0.17.6
+    "@esbuild/linux-mips64el": 0.17.6
+    "@esbuild/linux-ppc64": 0.17.6
+    "@esbuild/linux-riscv64": 0.17.6
+    "@esbuild/linux-s390x": 0.17.6
+    "@esbuild/linux-x64": 0.17.6
+    "@esbuild/netbsd-x64": 0.17.6
+    "@esbuild/openbsd-x64": 0.17.6
+    "@esbuild/sunos-x64": 0.17.6
+    "@esbuild/win32-arm64": 0.17.6
+    "@esbuild/win32-ia32": 0.17.6
+    "@esbuild/win32-x64": 0.17.6
+  dependenciesMeta:
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 13c4c3bcaa7ff291810d2c8294a1eb997b4672c60a9285b32d8eafcbc552e4468e06efe9d1a15067f5cbd41adcb12ddb4362618845e2e916e437f281c9aa80ab
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.0.2, escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -25228,7 +25289,8 @@ fsevents@^1.2.7:
     "@types/lodash-es": ^4.17.4
     "@types/node": ^15.6.2
     "@types/react": ^17.0.9
-    esbuild: ^0.13.15
+    esbuild: ^0.17.6
+    esbuild-register: ^3.4.2
     three: ^0.130.1
     typescript: ^4.4.2
   languageName: unknown