chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/scripts/eslint_rules/tests/utils.test.js

@@ -3,14 +3,14 @@
 // found in the LICENSE file.
 
 const parser = require('@typescript-eslint/parser');
+const {assert} = require('chai');
 
 const utils = require('../lib/utils.js');
-const {assert} = require('chai');
 
 describe('eslint utils', () => {
   describe('isLitHtmlTemplateCall', () => {
-    it('returns true if the code is LitHtml.html``', () => {
-      const code = 'LitHtml.html`<span>foo</span>`';
+    it('returns true if the code is Lit.html``', () => {
+      const code = 'Lit.html`<span>foo</span>`';
       const parsed = parser.parse(code);
       const result = utils.isLitHtmlTemplateCall(parsed.body[0].expression);
       assert.strictEqual(result, true);
@@ -23,8 +23,8 @@ describe('eslint utils', () => {
       assert.strictEqual(result, true);
     });
 
-    it('returns false if the code is LitHtml.somethingElse``', () => {
-      const code = 'LitHtml.somethingElse`<span>foo</span>`';
+    it('returns false if the code is Lit.somethingElse``', () => {
+      const code = 'Lit.somethingElse`<span>foo</span>`';
       const parsed = parser.parse(code);
       const result = utils.isLitHtmlTemplateCall(parsed.body[0].expression);
       assert.strictEqual(result, false);
@@ -39,8 +39,8 @@ describe('eslint utils', () => {
   });
 
   describe('isLitHtmlRenderCall', () => {
-    it('returns true if the code is LitHtml.render()', () => {
-      const code = 'LitHtml.render(LitHtml.html``, this.#shadow)';
+    it('returns true if the code is Lit.render()', () => {
+      const code = 'Lit.render(Lit.html``, this.#shadow)';
       const parsed = parser.parse(code);
       const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
       assert.strictEqual(result, true);
@@ -60,8 +60,8 @@ describe('eslint utils', () => {
       assert.strictEqual(result, false);
     });
 
-    it('returns false if the code is LitHtml.notRender()', () => {
-      const code = 'LitHtml.notRender(html``, this.#shadow)';
+    it('returns false if the code is Lit.notRender()', () => {
+      const code = 'Lit.notRender(html``, this.#shadow)';
       const parsed = parser.parse(code);
       const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
       assert.strictEqual(result, false);

package/scripts/javascript_natives/index.js

@@ -18,7 +18,10 @@ const REL_TS_LIB_PATH = '/node_modules/typescript/lib/';
 const typescriptSources =
     fs.readdirSync(process.argv[3] + REL_TS_LIB_PATH).map(name => process.argv[3] + REL_TS_LIB_PATH + name);
 
-const program = ts.createProgram({rootNames: typescriptSources, options: {noResolve: true, types: []}});
+const program = ts.createProgram({
+  rootNames: typescriptSources,
+  options: {noResolve: true, types: []},
+});
 
 for (const file of program.getSourceFiles()) {
   ts.forEachChild(file, node => {
@@ -38,8 +41,10 @@ for (const file of program.getSourceFiles()) {
 // Assume the DevTools front-end repository is at
 // `devtools/devtools-frontend`, where `devtools` is on the same level
 // as `chromium`. This matches `scripts/npm_test.js`.
-const files =
-    glob.sync(`${chromiumSource}/third_party/blink/renderer/+(core|modules)/**/*.idl`, {cwd: process.env.PWD});
+const files = glob.sync(
+    `${chromiumSource}/third_party/blink/renderer/+(core|modules)/**/*.idl`,
+    {cwd: process.env.PWD},
+);
 
 for (const file of files) {
   if (file.includes('testing')) {
@@ -56,13 +61,14 @@ for (const file of files) {
 
   try {
     WebIDL2.parse(newLines.join('\n')).forEach(walkRoot);
-  } catch (e) {
+  } catch {
     // console.error(file);
   }
 
   // Source for Console spec: https://console.spec.whatwg.org/#idl-index
   WebIDL2
-      .parse(`
+      .parse(
+          `
 [Exposed=(Window,Worker,Worklet)]
 namespace console { // but see namespace object requirements below
   // Logging
@@ -92,6 +98,8 @@ namespace console { // but see namespace object requirements below
   undefined timeLog(optional DOMString label = "default", any... data);
   undefined timeEnd(optional DOMString label = "default");
 };
-`).forEach(walkRoot);
+`,
+          )
+      .forEach(walkRoot);
 }
 postProcess();

package/scripts/migration/web-tests-esm/rename-legacy-global.mjs

@@ -56,8 +56,8 @@ async function findWebTests(dir) {
   const entries = await fs.readdir(dir, { withFileTypes: true });
   const pathPromises = entries.map(async entry => {
     const p = path.resolve(dir, entry.name);
-    if (entry.isDirectory() && entry.name !== 'resources') return findWebTests(p);
-    else if (entry.isFile() && entry.name.endsWith('.js')) {
+    if (entry.isDirectory() && entry.name !== 'resources') {return findWebTests(p);}
+    if (entry.isFile() && entry.name.endsWith('.js')) {
       return [p];
     }
     return [];
@@ -71,7 +71,7 @@ async function findWebTests(dir) {
  * it to an existing one.
  */
 function addImportIfNecessary(content, importLine) {
-  if (content.includes(importLine)) return content;
+  if (content.includes(importLine)) {return content;}
 
   // Find where to insert `importLine`. We'll add it either to
   // an existing import * as block or start a new one below the import {TestRunner} block.
@@ -105,7 +105,7 @@ for (const filePath of webTestPaths) {
     continue;
   } else if (yargsObject.from !== yargsObject.to) {
     replacedContent = content.replaceAll(fromRegex, yargsObject.to);
-    if (replacedContent === content) continue;
+    if (replacedContent === content) {continue;}
   }
 
   replacedContent = addImportIfNecessary(replacedContent, yargsObject.import);

package/scripts/npm_test.js

@@ -5,6 +5,7 @@
 const childProcess = require('child_process');
 const fs = require('fs');
 const path = require('path');
+
 const utils = require('./utils');
 
 const Flags = {

package/scripts/reformat-clang-js-ts.js

@@ -10,10 +10,9 @@
  * directories will not be used.
  **/
 
+const childProcess = require('child_process');
 const fs = require('fs');
 const path = require('path');
-const childProcess = require('child_process');
-
 const yargs = require('yargs')
                   .option('dry-run', {
                     type: 'boolean',

package/scripts/run_on_target.mjs

@@ -51,7 +51,7 @@ if (!fs.existsSync(cwd) || !fs.statSync(cwd).isDirectory() || !fs.existsSync(pat
       `Target path ${cwd} does not exist or is not a directory. Please run 'gn gen out/${target}' first.`);
   process.exit(1);
 }
-const scriptPath = path.resolve(cwd, script)
+const scriptPath = path.resolve(cwd, script);
 if (!fs.existsSync(scriptPath)) {
   console.error(`Script path ${scriptPath} does not exist, trying ninja...`);
   const {error, status} = childProcess.spawnSync('autoninja', ['-C', cwd, script], {stdio: 'inherit', cwd: sourceRoot});

package/scripts/search-trace-files.js

@@ -10,9 +10,9 @@
  * node scripts/search-trace-files.js "v8.parse"
  */
 
+const child_process = require('child_process');
 const fs = require('fs');
 const path = require('path');
-const child_process = require('child_process');
 
 const TRACE_FILES_DIR = path.join(__dirname, '..', 'front_end', 'panels', 'timeline', 'fixtures', 'traces');
 

package/scripts/stylelint_rules/lib/use_theme_colors.mjs

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import stylelint from 'stylelint';
-import { parse, comment } from 'postcss';
-import { join } from 'path';
 import { readFileSync } from 'fs';
+import { join } from 'path';
+import { comment, parse } from 'postcss';
+import stylelint from 'stylelint';
 
 const {
   createPlugin,
@@ -55,35 +55,21 @@ const COLOR_INDICATOR_REGEXES = new Set([
 
 const CUSTOM_VARIABLE_OVERRIDE_PREFIX = '--override-';
 
-const applicationColorsPath = join(
-  import.meta.dirname,
-  '..',
-  '..',
-  '..',
-  'front_end',
-  'ui',
-  'legacy',
-  'applicationColorTokens.css',
-);
-const themeColorsPath = join(
-  import.meta.dirname,
-  '..',
-  '..',
-  '..',
-  'front_end',
-  'ui',
-  'legacy',
-  'themeColors.css',
+const applicationTokensPath = join(
+    import.meta.dirname,
+    '..',
+    '..',
+    '..',
+    'front_end',
+    'application_tokens.css',
 );
-const tokensPath = join(
-  import.meta.dirname,
-  '..',
-  '..',
-  '..',
-  'front_end',
-  'ui',
-  'legacy',
-  'tokens.css',
+const designSystemTokensPath = join(
+    import.meta.dirname,
+    '..',
+    '..',
+    '..',
+    'front_end',
+    'design_system_tokens.css',
 );
 const inspectorCommonPath = join(
   import.meta.dirname,
@@ -101,7 +87,7 @@ function getRootVariableDeclarationsFromCSSFile(filePath) {
   const definedVariableNames = new Set();
   const parsed = parse(fileContents);
   // Only parse the colors in the :root declaration.
-  parsed.walkRules(':root', (rule) => {
+  parsed.walkRules(':root', rule => {
     for (const node of rule.nodes || []) {
       if (node.prop && node.prop.startsWith('--')) {
         definedVariableNames.add(node.prop);
@@ -112,22 +98,19 @@ function getRootVariableDeclarationsFromCSSFile(filePath) {
 }
 
 const DEFINED_APPLICATION_COLOR_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(applicationColorsPath);
+  getRootVariableDeclarationsFromCSSFile(applicationTokensPath);
 const DEFINED_THEME_COLOR_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(themeColorsPath);
-const DEFINED_COLOR_TOKEN_VARIABLES =
-  getRootVariableDeclarationsFromCSSFile(tokensPath);
+  getRootVariableDeclarationsFromCSSFile(designSystemTokensPath);
 const DEFINED_INSPECTOR_STYLE_VARIABLES =
   getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
 const ALL_DEFINED_VARIABLES = new Set([
   ...DEFINED_APPLICATION_COLOR_VARIABLES,
   ...DEFINED_THEME_COLOR_VARIABLES,
-  ...DEFINED_COLOR_TOKEN_VARIABLES,
-  ...DEFINED_INSPECTOR_STYLE_VARIABLES,
+    ...DEFINED_INSPECTOR_STYLE_VARIABLES,
 ]);
 
 const BOX_SHADOW_VARIABLES = new Set(
-  [1, 2, 3, 4, 5].map((x) => `var(--sys-elevation-level${x})`),
+  [1, 2, 3, 4, 5].map(x => `var(--sys-elevation-level${x})`),
 );
 
 const ruleFunction = (primary, secondary, context) => {
@@ -255,7 +238,7 @@ const ruleFunction = (primary, secondary, context) => {
       return;
     }
 
-    postcssRoot.walkRules((rule) => {
+    postcssRoot.walkRules(rule => {
       // If you are providing a selector specifically for dark mode, you can use
       // any colors you want, as it means you are purposefully deviating. This
       // is not encouraged but we do need to allow it.
@@ -268,7 +251,7 @@ const ruleFunction = (primary, secondary, context) => {
         return;
       }
 
-      rule.walkDecls((declaration) => {
+      rule.walkDecls(declaration => {
         if (!CSS_PROPS_TO_CHECK_FOR_COLOR_USAGE.has(declaration.prop)) {
           return;
         }
@@ -348,4 +331,5 @@ const ruleFunction = (primary, secondary, context) => {
 ruleFunction.ruleName = RULE_NAME;
 ruleFunction.messages = ruleMessages(RULE_NAME, {});
 
+// eslint-disable-next-line import/no-default-export
 export default createPlugin(RULE_NAME, ruleFunction);

package/scripts/stylelint_rules/tests/{use_theme_colors_test.js → use_theme_colors.test.js}

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const stylelint = require('stylelint');
-const path = require('path');
 const {assert} = require('chai');
+const path = require('path');
+const stylelint = require('stylelint');
 
 const configBase = {
   config: {
@@ -44,6 +44,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -60,6 +61,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -78,6 +80,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -96,6 +99,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -112,6 +116,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -130,6 +135,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -212,6 +218,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -230,6 +237,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });
@@ -286,6 +294,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
+        url: undefined,
       },
       {
         line: 2,
@@ -295,6 +304,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
+        url: undefined,
       },
     ]);
   });
@@ -333,6 +343,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: 'All CSS color declarations should use a variable defined in ui/legacy/themeColors.css',
+        url: undefined,
       },
     ]);
   });
@@ -417,6 +428,7 @@ describe('use_theme_colors', () => {
         rule: 'plugin/use_theme_colors',
         severity: 'error',
         text: EXPECTED_ERROR_MESSAGE,
+        url: undefined,
       },
     ]);
   });

package/scripts/utils.js

@@ -2,13 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+const {execSync: shell} = require('child_process');
 const fs = require('fs');
 const http = require('http');
 const https = require('https');
 const path = require('path');
-const parseURL = require('url').parse;
-const shell = require('child_process').execSync;
-const Stream = require('stream').Transform;
+const {Transform: Stream} = require('stream');
+const {parse: parseURL} = require('url');
 
 function fetch(url) {
   return new Promise(fetchPromise);
@@ -46,7 +46,7 @@ function atob(str) {
 function isFile(path) {
   try {
     return fs.statSync(path).isFile();
-  } catch (error) {
+  } catch {
     return false;
   }
 }
@@ -54,7 +54,7 @@ function isFile(path) {
 function isDir(path) {
   try {
     return fs.statSync(path).isDirectory();
-  } catch (error) {
+  } catch {
     return false;
   }
 }
@@ -64,7 +64,9 @@ function copy(src, dest) {
     const targetFilePath = path.resolve(dest, path.basename(src));
     fs.writeFileSync(targetFilePath, fs.readFileSync(src));
   } catch (error) {
-    throw new Error(`Received an error: [${error}] while trying to copy: ${src} -> ${dest}`);
+    throw new Error(
+        `Received an error: [${error}] while trying to copy: ${src} -> ${dest}`,
+    );
   }
 }
 
@@ -85,13 +87,18 @@ function copyRecursive(src, dest) {
         if (isDir(childPath)) {
           copyRecursive(childPath, targetDirPath);
         } else {
-          const targetFilePath = path.resolve(targetDirPath, path.basename(childPath));
+          const targetFilePath = path.resolve(
+              targetDirPath,
+              path.basename(childPath),
+          );
           fs.writeFileSync(targetFilePath, fs.readFileSync(childPath));
         }
       }
     }
   } catch (error) {
-    throw new Error(`Received an error: [${error}] while trying to copy: ${src} -> ${dest}`);
+    throw new Error(
+        `Received an error: [${error}] while trying to copy: ${src} -> ${dest}`,
+    );
   }
 }
 
@@ -114,7 +121,9 @@ function removeRecursive(filePath) {
       fs.rmdirSync(filePath);
     }
   } catch (error) {
-    throw new Error(`Received an error: [${error}] while trying to remove: ${filePath}`);
+    throw new Error(
+        `Received an error: [${error}] while trying to remove: ${filePath}`,
+    );
   }
 }
 
@@ -138,14 +147,14 @@ function parseArgs(args) {
 }
 
 module.exports = {
-  fetch,
   atob,
-  isFile,
-  isDir,
   copy,
   copyRecursive,
-  removeRecursive,
+  fetch,
   includes,
-  shellOutput,
+  isDir,
+  isFile,
   parseArgs,
+  removeRecursive,
+  shellOutput,
 };

package/scripts/watch_build.js

@@ -2,14 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const chokidar = require('chokidar');
-const path = require('path');
 const childProcess = require('child_process');
 const fs = require('fs');
+const path = require('path');
 const cwd = process.cwd();
 const frontEndDir = path.join(cwd, 'front_end');
 const testsDir = path.join(cwd, 'test');
-const {WebSocketServer} = require('ws');
 const env = process.env;
 
 const extractArgument = argName => {
@@ -34,12 +32,10 @@ const NODE_PATH = path.join('third_party', 'node', 'node.py');
 const ESBUILD_PATH = path.join('third_party', 'esbuild', 'esbuild');
 const GENERATE_CSS_JS_FILES_PATH = path.join('scripts', 'build', 'generate_css_js_files.js');
 
-const connections = {};
-let lastConnectionId = 0;
+let tId = -1;
 
 // Extract the target if it's provided.
 const target = extractArgument('--target') || 'Default';
-const PORT = 8080;
 const TARGET_GEN_DIR = path.join('out', target, 'gen');
 
 // Make sure that the target has
@@ -59,6 +55,9 @@ const assertTargetArgsForWatchBuild = async () => {
   try {
     args = JSON.parse(stdoutText);
   } catch (err) {
+    if (stdoutText.includes('devtools_css_hot_reload_enabled')) {
+      console.error('\n❗❗ You must remove `devtools_css_hot_reload_enabled` from your args.gn.\n');
+    }
     throw `Parsing args of target ${target} is failed\n${err}`;
   }
 
@@ -80,76 +79,36 @@ const assertTargetArgsForWatchBuild = async () => {
   }
 };
 
-const startWebSocketServerForCssChanges = () => {
-  const wss = new WebSocketServer({port: PORT});
-
-  wss.on('listening', () => {
-    console.log(`Listening connections for CSS changes at ${PORT}\n`);
-  });
-
-  wss.on('connection', ws => {
-    const connection = {
-      id: ++lastConnectionId,
-      ws,
-    };
-
-    connections[connection.id] = connection;
-    ws.on('close', () => {
-      delete connections[connection.id];
-    });
-  });
-};
-
-const runGenerateCssFiles = ({fileName, isLegacy}) => {
+const runGenerateCssFiles = ({fileName}) => {
   const scriptArgs = [
     /* buildTimestamp */ Date.now(),
     /* isDebugString */ 'true',
-    /* isLegacyString */ isLegacy ? 'true' : 'false',
     /* targetName */ target,
     /* srcDir */ '',
     /* targetGenDir */ TARGET_GEN_DIR,
     /* files */ relativeFileName(fileName),
-    /* hotReloadEnabledString */ 'true'
   ];
 
   childProcess.spawnSync(
       'vpython3', [NODE_PATH, '--output', GENERATE_CSS_JS_FILES_PATH, ...scriptArgs], {cwd, env, stdio: 'inherit'});
 };
 
-const isLegacyCss = absoluteFilePath => {
-  if (!absoluteFilePath.endsWith('.css')) {
-    return false;
-  }
-
-  const relativePath = path.relative(cwd, absoluteFilePath);
-  const possibleLegacyCssPath = path.join(TARGET_GEN_DIR, `${relativePath}.legacy.js`);
-  return fs.existsSync(possibleLegacyCssPath);
-};
-
-const notifyWebSocketConections = message => {
-  Object.values(connections).forEach(connection => connection.ws.send(message));
-};
-
 const changedFiles = new Set();
-let buildScheduled = false;
 
 const onFileChange = async fileName => {
   changedFiles.add(fileName);
-  // Debounce to handle them in batch
-  if (!buildScheduled) {
-    buildScheduled = true;
-    setTimeout(() => {
-      buildScheduled = false;
-      buildFiles();
-    }, 100);
-  }
+  // Debounce to handle them in batch.
+  // At 250ms, we're optimizing for individual file changes.
+  // On branch changes, its possible a ninja rebuild may start before the checkout is complete, but it will likely quickly error out. Either way, another rebuild will be attempted immediately after.
+  clearTimeout(tId);
+  tId = setTimeout(buildFiles, 250);
 };
 
 const buildFiles = async () => {
   // If we need a ninja rebuild, do that and quit
-  const nonJSOrCSSFileName = Array.from(changedFiles).find(f => !f.endsWith('.css') && !f.endsWith('.ts'));
-  if (nonJSOrCSSFileName) {
-    console.log(`${currentTimeString()} - ${relativeFileName(nonJSOrCSSFileName)} changed, running ninja`);
+  const nonTSOrCSSFileNames = Array.from(changedFiles).filter(f => !f.endsWith('.css') && !f.endsWith('.ts'));
+  if (nonTSOrCSSFileNames.length) {
+    console.log(`${currentTimeString()} - ${nonTSOrCSSFileNames.map(relativeFileName)} changed, running ninja`);
     changedFiles.clear();
     childProcess.spawnSync('autoninja', ['-C', `out/${target}`], {cwd, env, stdio: 'inherit'});
     return;
@@ -162,20 +121,8 @@ const buildFiles = async () => {
 const fastRebuildFile = async fileName => {
   if (fileName.endsWith('.css')) {
     console.log(`${currentTimeString()} - ${relativeFileName(fileName)} changed, notifying frontend`);
-    const isLegacy = isLegacyCss(fileName);
-    const content = fs.readFileSync(fileName, {encoding: 'utf8', flag: 'r'});
-    runGenerateCssFiles({fileName: relativeFileName(fileName), isLegacy});
+    runGenerateCssFiles({fileName: relativeFileName(fileName)});
     changedFiles.delete(fileName);
-
-    if (isLegacy) {
-      notifyWebSocketConections(JSON.stringify({
-        event: 'log-warn',
-        message: `a legacy css file \x1B[1m${
-            path.relative(cwd, fileName)}\x1B[m is updated, you need to refresh the page to see changes.`
-      }));
-    } else {
-      notifyWebSocketConections(JSON.stringify({event: 'css-change', file: fileName, content}));
-    }
     return;
   }
 
@@ -193,11 +140,8 @@ const fastRebuildFile = async fileName => {
         [fileName, `--outfile=${outFile}`, '--sourcemap', `--tsconfig=${tsConfigLocation}`, ...cjsForTests],
         {cwd, env, stdio: 'inherit'});
 
-    if (res && res.status === 1) {
-      notifyWebSocketConections(JSON.stringify({
-        event: 'log-warn',
-        message: `TS compilation failed for \x1B[1m${path.relative(cwd, fileName)}\x1B[m, check your terminal.`
-      }));
+    if (res?.status === 1) {
+      console.warn(`TS compilation failed for \x1B[1m${path.relative(cwd, fileName)}\x1B`);
     }
     return;
   }
@@ -209,6 +153,5 @@ childProcess.spawnSync('autoninja', ['-C', `out/${target}`], {cwd, env, stdio: '
 
 // Watch the front_end and test folder and build on any change.
 console.log(`Watching for changes in ${frontEndDir} and ${testsDir}`);
-chokidar.watch(frontEndDir, {usePolling: false, useFsEvents: true}).on('change', onFileChange);
-chokidar.watch(testsDir, {usePolling: false, useFsEvents: true}).on('change', onFileChange);
-startWebSocketServerForCssChanges();
+fs.watch(frontEndDir, {recursive: true}).on('change', (_, fileName) => onFileChange(path.join(frontEndDir, fileName)));
+fs.watch(testsDir, {recursive: true}).on('change', (_, fileName) => onFileChange(path.join(testsDir, fileName)));

package/tsconfig.json

@@ -16,7 +16,8 @@
         "rules": {
           "no-complex-attribute-binding": "off",
           "no-missing-import": "error",
-          "no-unknown-tag-name": "error"
+          "no-unknown-tag-name": "error",
+          "no-unclosed-tag": "error"
         }
       }
     ]