fix: use esbuild to watch files in dev

netbox/project-static/bundle.js

@@ -14,9 +14,11 @@ const options = {
 // Get CLI arguments for optional overrides.
 const ARGS = process.argv.slice(2);
 
+const watch = ARGS.includes('--watch');
+
 async function bundleGraphIQL() {
   try {
-    const result = await esbuild.build({
+    const esbuildSettings = {
       ...options,
       entryPoints: {
         graphiql: 'netbox-graphiql/index.ts',
@@ -25,7 +27,16 @@ async function bundleGraphIQL() {
       define: {
         global: 'window',
       },
-    });
+    };
+    if (watch) {
+      esbuildSettings.watch = {
+        onRebuild(error) {
+          if (error) console.error('❌ Rebuild graphiql failed -', error);
+          else console.log('✅ Rebuilt graphiql files');
+        },
+      };
+    }
+    const result = await esbuild.build(esbuildSettings);
     if (result.errors.length === 0) {
       console.log(`✅ Bundled source file 'netbox-graphiql/index.ts' to 'graphiql.js'`);
     }
@@ -45,11 +56,20 @@ async function bundleNetBox() {
     status: 'src/device/status.ts',
   };
   try {
-    const result = await esbuild.build({
+    const esbuildSettings = {
       ...options,
       entryPoints,
       target: 'es2016',
-    });
+    };
+    if (watch) {
+      esbuildSettings.watch = {
+        onRebuild(error) {
+          if (error) console.error('❌ Rebuild source failed -', error);
+          else console.log('✅ Rebuilt source files');
+        },
+      };
+    }
+    const result = await esbuild.build(esbuildSettings);
     if (result.errors.length === 0) {
       for (const [targetName, sourceName] of Object.entries(entryPoints)) {
         const source = sourceName.split('/')[1];
@@ -89,7 +109,7 @@ async function bundleStyles() {
     if (ARGS.includes('--no-cache')) {
       pluginOptions.cache = false;
     }
-    let result = await esbuild.build({
+    const esbuildSettings = {
       ...options,
       // Disable sourcemaps for CSS/SCSS files, see #7068
       sourcemap: false,
@@ -102,7 +122,16 @@ async function bundleStyles() {
         '.svg': 'file',
         '.ttf': 'file',
       },
-    });
+    };
+    if (watch) {
+      esbuildSettings.watch = {
+        onRebuild(error) {
+          if (error) console.error('❌ Rebuild styles failed -', error);
+          else console.log('✅ Rebuilt style files');
+        },
+      };
+    }
+    let result = await esbuild.build(esbuildSettings);
     if (result.errors.length === 0) {
       for (const [targetName, sourceName] of Object.entries(entryPoints)) {
         const source = sourceName.split('/')[1];
@@ -130,3 +159,5 @@ async function bundleAll() {
 }
 
 bundleAll();
+
+module.exports = { bundleStyles, bundleScripts };

netbox/project-static/develop.js

@@ -1,21 +0,0 @@
-const { execSync } = require('child_process');
-const chokidar = require('chokidar');
-
-const sassWatcher = chokidar.watch('styles/**/*.scss');
-const tsWatcher = chokidar.watch('src/**/*.ts');
-
-const collectStatic = type => {
-  console.log('[*] bundling..');
-  execSync(`node bundle.js ${type && `--${type}`}`);
-  console.log('[*] waiting..\n');
-};
-
-sassWatcher.on('change', path => {
-  console.log(`[*] '${path}' has changed`);
-  collectStatic('styles');
-});
-
-tsWatcher.on('change', path => {
-  console.log(`[*] '${path}' has changed`);
-  collectStatic('scripts');
-});

netbox/project-static/package.json

@@ -4,11 +4,9 @@
   "main": "dist/netbox.js",
   "license": "Apache-2.0",
   "private": true,
-  "workspaces": [
-    "netbox-graphiql"
-  ],
+  "workspaces": ["netbox-graphiql"],
   "scripts": {
-    "dev": "node develop.js",
+    "dev": "node bundle.js --watch",
     "bundle": "node bundle.js",
     "bundle:styles": "node bundle.js --styles",
     "bundle:scripts": "node bundle.js --scripts",