@nutin/cli 2.0.0 → 2.1.1

package/templates/base/src/core/services/router/router.ts.hbs

@@ -6,6 +6,7 @@ import { NavigationManager } from './helpers/navigation-manager.helper.js';
 
 // centralized export
 export { Routes, RouteGuard } from './helpers/route-guard-manager.helper.js';
+export { NavigationManager } from './helpers/navigation-manager.helper.js';
 
 /**
  * IRouter is a type alias for the instance of Router, not a true interface 
@@ -15,6 +16,7 @@ export type IRouter = InstanceType<typeof Router>;
 export interface RouteMatch {
   route: RouteConfig;
   params: Record<string, string>;
+  pattern: string;
 }
 
 class Router extends Service<Router> {
@@ -28,7 +30,7 @@ class Router extends Service<Router> {
   constructor(private routes: Routes) {
     super();
     this.initializeEventListeners();
-    this.navigate(NavigationManager.getCurrentPath());
+    this.navigate(NavigationManager.getCurrentPath() + window.location.hash);
     this.registerCleanup(this.removeEventListeners);
   }
 
@@ -42,13 +44,14 @@ class Router extends Service<Router> {
 
   public async reload(): Promise<void> {
     const currentRoute = NavigationManager.getCurrentPath();
-    await this.navigate(currentRoute, false);
+    await this.navigate(currentRoute + window.location.hash, false);
   }
 
   public async navigate(path: string | '', pushState: boolean = true): Promise<void> {
-    const normalizedPath = NavigationManager.normalizePath(path);
+    const [rawPath = '', hash] = path.split('#');
+    const normalizedPath = NavigationManager.normalizePath(rawPath);
     const currentPath = NavigationManager.getCurrentPath();
-    
+
     // Try to match the route with parameters
     const routeMatch = this.matchRoute(normalizedPath);
 
@@ -58,23 +61,30 @@ class Router extends Service<Router> {
     }
 
     const guardResult = await this.handleGuards(
-      normalizedPath, 
-      routeMatch.route, 
-      routeMatch.params, 
+      normalizedPath,
+      routeMatch.route,
+      routeMatch.params,
       pushState
     );
-    
+
     if (!guardResult) return;
 
     this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
     this._currentParams = routeMatch.params;
+
+    // Must run before renderNewView(): a view's onEnter() may rewrite the URL via
+    // NavigationManager.replaceState (e.g. canonicalizing a bare route to a default
+    // sub-page), which acts on whatever history entry is current — so that entry needs
+    // to already be this route's, not the previous view's, before onEnter() fires.
+    NavigationManager.updateHistory(normalizedPath, currentPath, pushState, hash);
+
     this._currentView = ViewRenderManager.renderNewView(
-      guardResult.viewConstructor!, 
+      guardResult.viewConstructor!,
       routeMatch.params
     );
-    
-    NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
-    window.scrollTo({ top: 0 });
+
+    NavigationManager.updateDocumentTitle(this._currentView, routeMatch.pattern);
+    NavigationManager.scrollToHash(hash);
   }
 
   public getCurrentParams(): Record<string, string> {
@@ -109,7 +119,7 @@ class Router extends Service<Router> {
     if (newLocale && newLocale !== I18nService.currentLanguage) {
       await I18nService.setCurrentLanguage(newLocale as Language);
     }
-    this.navigate(NavigationManager.getCurrentPath(), false);
+    this.navigate(NavigationManager.getCurrentPath() + window.location.hash, false);
   }
 
   /**
@@ -122,7 +132,7 @@ class Router extends Service<Router> {
     for (const [pattern, routeConfig] of Object.entries(this.routes)) {
       const match = NavigationManager.matchPattern(pattern, path);
       if (match) {
-        return { route: routeConfig, params: match };
+        return { route: routeConfig, params: match, pattern };
       }
     }
     return null;
@@ -145,7 +155,8 @@ class Router extends Service<Router> {
     this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
     this._currentParams = {};
     this._currentView = ViewRenderManager.renderNewView(notFoundConstructor, {});
-    
+
+    NavigationManager.updateDocumentTitle(this._currentView, '/404');
     NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
   }
 

package/templates/base/src/index.html.hbs

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>

package/templates/base/src/styles/_styles.scss.hbs

@@ -1,113 +1 @@
-@use "variables" as *;
-
-/* ===========
-   CSS Reset
-   =========== */
-
-/* Box sizing */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Remove default spacing */
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-/* Document */
-
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  min-height: 100vh;
-  font: inherit;
-  line-height: 1.5;
-}
-
-/* Media */
-
-img,
-picture,
-svg,
-canvas,
-video {
-  display: block;
-  max-width: 100%;
-}
-
-/* Forms */
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-textarea {
-  resize: vertical;
-}
-
-/* Tables */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* Lists */
-
-ul,
-ol {
-  list-style: none;
-}
-
-/* Links */
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* Quotes */
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: "";
-}
-
-/* Miscellaneous */
-
-hr {
-  border: none;
-}
-
-fieldset {
-  border: none;
-}
-
-:where([hidden]) {
-  display: none !important;
-}
+// Global styles

package/templates/base/src/styles/main.scss.hbs

@@ -1,2 +1,2 @@
-// CSS reset & global styles
+// Global styles
 @use "styles";

package/templates/base/tools/builder/builder.js.hbs

@@ -1,9 +1,14 @@
 #!/usr/bin/env node
 
 import path from 'path';
-import { print, runScript } from '../utils/index.js';
+import { print, runScript, acquireBuildLock } from '../utils/index.js';
 import { builderConfig } from './builder.config.js';
 
+// Must happen before copy-static.js wipes/recreates dist-build — a second build
+// starting mid-run (a manual build, another dev watcher instance, ...) would
+// otherwise race it. See tools/utils/build-lock.js.
+await acquireBuildLock();
+
 const scriptsDir = path.join(process.cwd(), 'tools', 'builder', 'core');
 
 print.boldHead(`\nStarting build...`);
@@ -22,8 +27,9 @@ if (builderConfig.tailwind) runScript(path.join(scriptsDir, 'styles', 'tailwind.
 
 if (builderConfig.i18n) runScript(path.join(scriptsDir, 'i18n', 'build-i18n.js'), 'Combining locales...');
 
+runScript(path.join(scriptsDir, 'prod-bundle', 'esbuild.js'), 'Running esbuild...');
+
 if (builderConfig.isProd) {
-	runScript(path.join(scriptsDir, 'prod-bundle', 'esbuild.js'), 'Running esbuild...');
 	runScript(path.join(scriptsDir, 'prod-bundle', 'hash-files.js'), 'Hashing files...');
 	runScript(path.join(scriptsDir, 'prod-bundle', 'compress-files.js'), 'Compressing files...');
 	if (builderConfig.generateSEO) runScript(path.join(scriptsDir, 'seo', 'generate-seo-files.js'), 'Generating SEO Files...');

package/templates/base/tools/builder/core/html-index/add-tags.js.hbs

@@ -1,12 +1,9 @@
 import { writeFile } from 'fs/promises';
-import { builderConfig } from '../../builder.config.js';
 
 export async function addTags(htmlContent, filePath) {
-  const scriptSrc = builderConfig.isProd ? "bundle.js" : "app/main.js";
-  
   const tags = [
     { type: 'stylesheet', href: 'main.css', position: 'head' },
-    { type: 'script', src: scriptSrc, position: 'body' }
+    { type: 'script', src: 'bundle.js', position: 'body' }
   ];
 
   let modifiedHtml = htmlContent;

package/templates/base/tools/builder/core/html-index/add-tags.test.js.hbs

@@ -22,7 +22,7 @@ describe('addTags', () => {
     const result = await addTags(html, filePath);
 
     expect(result).toBe(
-      '<html><head><title>T</title><link rel="stylesheet" href="/main.css"></head><body><script type="module" src="/app/main.js"></script></body></html>'
+      '<html><head><title>T</title><link rel="stylesheet" href="/main.css"></head><body><script type="module" src="/bundle.js"></script></body></html>'
     );
   });
 
@@ -32,7 +32,7 @@ describe('addTags', () => {
     const result = await addTags(html, filePath);
 
     expect(result).toBe(
-      '<html><link rel="stylesheet" href="/main.css"><title>T</title><body><script type="module" src="/app/main.js"></script></body></html>'
+      '<html><link rel="stylesheet" href="/main.css"><title>T</title><body><script type="module" src="/bundle.js"></script></body></html>'
     );
   });
 
@@ -42,7 +42,7 @@ describe('addTags', () => {
     const result = await addTags(html, filePath);
 
     expect(result).toBe(
-      '<html></html><link rel="stylesheet" href="/main.css"><script type="module" src="/app/main.js"></script>'
+      '<html></html><link rel="stylesheet" href="/main.css"><script type="module" src="/bundle.js"></script>'
     );
   });
 

package/templates/base/tools/builder/core/prod-bundle/esbuild.js.hbs

@@ -4,12 +4,21 @@ import { print, errorExit } from '../../../utils/index.js';
 import { PATHS } from '../app/paths.js';
 import { builderConfig } from '../../builder.config.js';
 
-const ENTRY_FILE = path.join(PATHS.tempApp, 'main.ts');
+// Prod bundles straight from the copied .ts sources (tsc runs --noEmit there);
+// dev bundles tsc's emitted .js, which is kept on disk for testin-nutin.
+const ENTRY_FILE = path.join(PATHS.tempApp, builderConfig.isProd ? 'main.ts' : 'main.js');
 const OUT_FILE = path.join(PATHS.tempSource, 'bundle.js');
 
+const DEV_OVERRIDES = {
+  minify: false,
+  sourcemap: true,
+  drop: [],
+};
+
 async function build() {
   await esbuild.build({
     ...builderConfig.esbuild,
+    ...(builderConfig.isProd ? {} : DEV_OVERRIDES),
     platform: 'browser',
     format: 'esm',
     legalComments: 'none',
@@ -17,7 +26,7 @@ async function build() {
       '.json': 'json',
     },
     define: {
-      'process.env.NODE_ENV': '"production"',
+      'process.env.NODE_ENV': builderConfig.isProd ? '"production"' : '"development"',
     },
     entryPoints: [ENTRY_FILE],
     outfile: OUT_FILE,

package/templates/base/tools/builder/core/seo/generate-seo-html.js.hbs

@@ -8,16 +8,32 @@ import { builderConfig } from '../../builder.config.js';
 import { resolveLocaleValue, valueForLangWithFallback, collectI18nSeoIssues } from './i18n-resolution.js';
 import { segmentsOf, validateMockParams, writeRouteHtml, warnForRoutesMissingSeoConfig } from './route-output.js';
 
+// og:image/twitter:image require an absolute URL for social platforms to resolve them;
+// every other absolute field (og:url, canonical) is already baseUrl-prefixed, so ogImage
+// (a repo-relative path in config/seo.json) needs the same treatment.
+function toAbsoluteUrl(urlOrPath, baseUrl) {
+  if (!urlOrPath) return urlOrPath;
+  return /^https?:\/\//.test(urlOrPath) ? urlOrPath : `${baseUrl}${urlOrPath}`;
+}
+
 async function processRoute(template, baseUrl, defaultLanguage, languages, route, bundleUrl) {
   validateMockParams(route);
 
   const routeSuffix = route.path === '/' ? '' : route.path;
 
   if (builderConfig.i18n) {
+    // Same for every language variant of this route — lets crawlers know these URLs
+    // are alternates of one page rather than duplicate/competing content. x-default
+    // points at the default language.
+    const hreflangLinks = [
+      ...languages.map((l) => ({ hreflang: l, href: `${baseUrl}/${l}${routeSuffix}/` })),
+      { hreflang: 'x-default', href: `${baseUrl}/${defaultLanguage}${routeSuffix}/` },
+    ];
+
     for (const lang of languages) {
       const title = valueForLangWithFallback(route.title, lang, defaultLanguage);
       const description = valueForLangWithFallback(route.description, lang, defaultLanguage);
-      const ogImage = valueForLangWithFallback(route.ogImage, lang, defaultLanguage);
+      const ogImage = toAbsoluteUrl(valueForLangWithFallback(route.ogImage, lang, defaultLanguage), baseUrl);
 
       const pageUrl = `${baseUrl}/${lang}${routeSuffix}`;
       const body = await renderRoute({
@@ -31,7 +47,7 @@ async function processRoute(template, baseUrl, defaultLanguage, languages, route
       });
 
       await writeRouteHtml({
-        template, lang, title, description, pageUrl, ogImage, body,
+        template, lang, title, description, pageUrl, ogImage, body, hreflangLinks,
         outputSegments: [lang, ...segmentsOf(routeSuffix)],
         routePath: route.path,
       });
@@ -39,7 +55,7 @@ async function processRoute(template, baseUrl, defaultLanguage, languages, route
   } else {
     const title = resolveLocaleValue(route.title, defaultLanguage);
     const description = resolveLocaleValue(route.description, defaultLanguage);
-    const ogImage = resolveLocaleValue(route.ogImage, defaultLanguage);
+    const ogImage = toAbsoluteUrl(resolveLocaleValue(route.ogImage, defaultLanguage), baseUrl);
 
     if (!title || !description) {
       errorExit(`Missing title or description for route "${route.path}" in seo.json`, 'generate-seo-html');

package/templates/base/tools/builder/core/seo/html-substitutions.js.hbs

@@ -14,7 +14,7 @@ export function upsertInHead(html, pattern, replacement, fullTag) {
   return html.replace('</head>', `\n    ${fullTag}\n  </head>`);
 }
 
-export function applySubstitutions(template, lang, title, description, pageUrl, ogImage) {
+export function applySubstitutions(template, lang, title, description, pageUrl, ogImage, hreflangLinks = []) {
   let html = template;
 
   // lang attribute on <html>
@@ -53,6 +53,15 @@ export function applySubstitutions(template, lang, title, description, pageUrl,
     `<meta property="og:url" content="${pageUrl}/" />`
   );
 
+  // hreflang alternates — one per active language plus x-default, so crawlers see
+  // these URLs as language variants of the same page rather than duplicate content
+  if (hreflangLinks.length > 0) {
+    const altTags = hreflangLinks
+      .map(({ hreflang, href }) => `<link rel="alternate" hreflang="${hreflang}" href="${href}" />`)
+      .join('\n    ');
+    html = html.replace('</head>', `\n    ${altTags}\n  </head>`);
+  }
+
   // og:title
   html = upsertInHead(html,
     /(<meta\s+property=["']og:title["']\s+content=)["'][^"']*["']/,
@@ -81,6 +90,20 @@ export function applySubstitutions(template, lang, title, description, pageUrl,
     `<meta name="twitter:description" content="${escape(description)}" />`
   );
 
+  // og:type
+  html = upsertInHead(html,
+    /(<meta\s+property=["']og:type["']\s+content=)["'][^"']*["']/,
+    `$1"website"`,
+    `<meta property="og:type" content="website" />`
+  );
+
+  // twitter:card — required for Twitter/X to render an image card at all
+  html = upsertInHead(html,
+    /(<meta\s+name=["']twitter:card["']\s+content=)["'][^"']*["']/,
+    `$1"summary_large_image"`,
+    `<meta name="twitter:card" content="summary_large_image" />`
+  );
+
   // og:image + twitter:image — only when explicitly provided in route config
   if (ogImage) {
     html = upsertInHead(html,

package/templates/base/tools/builder/core/seo/route-output.js.hbs

@@ -29,8 +29,8 @@ export function validateMockParams(route) {
   }
 }
 
-export async function writeRouteHtml({ template, lang, title, description, pageUrl, ogImage, body, outputSegments, routePath }) {
-  let html = applySubstitutions(template, lang, title, description, pageUrl, ogImage);
+export async function writeRouteHtml({ template, lang, title, description, pageUrl, ogImage, body, outputSegments, routePath, hreflangLinks }) {
+  let html = applySubstitutions(template, lang, title, description, pageUrl, ogImage, hreflangLinks);
 
   if (html === template) {
     errorExit(`Failed to apply any changes for ${routePath} (lang "${lang}") — index.html may be missing a </head> tag`, 'generate-seo-html');

package/templates/base/tools/builder/core/seo/ssr/ssr-render.js.hbs

@@ -28,7 +28,11 @@ export async function getAppRoutePaths(bundleUrl, lang, pageUrl) {
 export async function renderRoute({ bundleUrl, appRoutesKey, mockParams, mockFetch, lang, pageUrl, i18nEnabled }) {
   // Passing a real URL instance as `location` gives `.pathname`/`.href`
   // which is what I18n's getLocaleFromUrl() actually reads.
-  const { window } = parseHTML('<!doctype html><html><body></body></html>', { location: new URL(pageUrl) });
+  // <main id="app"> mirrors index.html's real mount target — View defaults to mounting
+  // there (view.ts), and without it the View tree is never attached to `document`, so
+  // DomHelper.cleanupOptionalContent()'s document-wide `[data-optional]` query silently
+  // misses it, leaking raw "undefined" text for any unset optional field.
+  const { window } = parseHTML('<!doctype html><html><body><main id="app"></main></body></html>', { location: new URL(pageUrl) });
   const { trackedFetches } = installGlobals(window, {
     lang,
     mockFetch: mockFetch ?? {},

package/templates/base/tools/builder/core/styles/sass.js.hbs

@@ -13,24 +13,25 @@ const scssOrigins = builderConfig.sass.paths;
 const scssPath = (origin) => path.join(stylesPath, origin);
 const stylesInput = scssOrigins.map(origin => scssPath(origin));
 const pathsToLoad = [ ...stylesInput ];
+// resolves `@use "pkg:<package>/<subpath>"` through node_modules (package exports)
+const importers = [ new sass.NodePackageImporter() ];
 
 try {
   const mainResult = await sass.compileAsync(path.join(stylesPath, 'main.scss'), {
     loadPaths: [ ...pathsToLoad ],
+    importers,
     style: 'compressed'
   });
   fs.writeFileSync(stylesOutput, mainResult.css);
 
   // features styles
   const appInput = path.join(PATHS.source, 'app');
-  const appStyles = [
-    ...getFilesRecursive(path.join(appInput, 'components'), 'scss'),
-    ...getFilesRecursive(path.join(appInput, 'views'), 'scss')
-  ];
+  const appStyles = getFilesRecursive(appInput, 'scss');
 
   for (const style of appStyles) {
     const result = await sass.compileAsync(style, {
       loadPaths: [ ...pathsToLoad ],
+      importers,
       style: 'compressed'
     })
     fs.appendFileSync(stylesOutput, result.css);

package/templates/base/tools/dev/dev-serve.js.hbs

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 
-import { spawn } from 'child_process';
+import { spawn, spawnSync } from 'child_process';
 import { print, runCommand } from '../utils/index.js';
 
+const isWindows = process.platform === 'win32';
+
 async function startDev() {
   console.clear();
   print.blue('🚀 Starting Dev Environment...\n');
@@ -14,22 +16,59 @@ async function startDev() {
     process.exit(1);
   }
 
-  const serve = spawn(['{{packageManager}}', 'run', 'serve:only', '--silent'].join(' '), { stdio: 'inherit', shell: true });
-  const watcher = spawn(['node', 'tools/dev/watcher.js', '--silent'].join(' '), { stdio: 'inherit', shell: true });
+  // detached: true makes each child the leader of its own process group, so its
+  // descendants (watcher.js's own `exec('{{packageManager}} run build')` included) can be
+  // killed as a group below. Without this, a shutdown that doesn't cleanly propagate
+  // SIGINT down the shell layers (backgrounded, launched by a task runner, a closed
+  // terminal tab instead of Ctrl-C, ...) leaves them running as orphans — multiple
+  // stray watcher.js processes then race each other's builds.
+  // Not on Windows: there, detached children leave the console, so Ctrl-C would no
+  // longer reach them, and negative-pid group kills aren't supported — taskkill /T
+  // walks the process tree instead.
+  const serve = spawn(['{{packageManager}}', 'run', 'serve:only', '--silent'].join(' '), { stdio: 'inherit', shell: true, detached: !isWindows });
+  const watcher = spawn(['node', 'tools/dev/watcher.js', '--silent'].join(' '), { stdio: 'inherit', shell: true, detached: !isWindows });
+
+  const children = [serve, watcher];
+  let shuttingDown = false;
+
+  function killGroup(child, signal) {
+    if (!child.pid) return;
+    if (isWindows) {
+      spawnSync('taskkill', ['/pid', String(child.pid), '/T', '/F'], { stdio: 'ignore' });
+      return;
+    }
+    try {
+      process.kill(-child.pid, signal);
+    } catch {
+      // group already gone
+    }
+  }
+
+  function shutdown(signal, exitCode = 0) {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    children.forEach((child) => killGroup(child, signal));
+    process.exit(exitCode);
+  }
+
+  process.on('SIGINT', () => shutdown('SIGINT'));
+  process.on('SIGTERM', () => shutdown('SIGTERM'));
 
   serve.on('error', (err) => {
     print.boldError(`live-server failed to start: ${err.message}`);
     process.exit(1);
   });
   serve.on('close', (code) => {
+    if (shuttingDown) return;
     print.error(`live-server exited with code ${code}`);
-    process.exit(code ?? 1);
+    shutdown('SIGTERM', code ?? 1);
   });
   watcher.on('error', (err) => {
     print.boldError(`watcher failed to start: ${err.message}`);
     process.exit(1);
   });
   watcher.on('close', (code) => {
+    if (shuttingDown) return;
     print.error(`watcher exited with code ${code}`);
   });
 }

package/templates/base/tools/dev/watcher.js.hbs

@@ -9,42 +9,58 @@ const watcher = chokidar.watch(['src'], {
 });
 
 let isBuilding = false;
+let pendingRebuild = false;
 let buildTimeout = null;
+let lastChangedPath = null;
+
+function runBuild() {
+  isBuilding = true;
+  pendingRebuild = false;
+
+  console.clear();
+  print.boldInfo(`\n🔄 File changed: ${path.relative(process.cwd(), lastChangedPath)}\n`);
+  print.info('\nRebuilding...');
+
+  const command = '{{packageManager}} run build --silent';
+
+  exec(command, { maxBuffer: 10 * 1024 * 1024 }, (err, stdout, stderr) => {
+    if (stdout) process.stdout.write(stdout);
+    if (stderr) process.stderr.write(stderr);
+    if (err) {
+      if (err.code === 'ERR_CHILD_PROCESS_STDIO_MAXBUFFER') {
+        print.boldError(`\nBuild output exceeded the buffer size — raise maxBuffer in tools/dev/watcher.js.`);
+      } else {
+        print.boldError(`\nBuild failed: ${err.message}`);
+      }
+    } else {
+      print.boldBlue('Watching for changes...');
+    }
+    isBuilding = false;
+
+    // A change arrived while this build was running — it was never picked up by
+    // any debounce timer (isBuilding used to make those just silently return,
+    // dropping the change for good), so build again now instead of missing it.
+    if (pendingRebuild) runBuild();
+  });
+}
 
 watcher.on('error', (err) => {
   print.boldError(`\nWatcher error: ${err.message}`);
 });
 
 watcher.on('change', (filePath) => {
+  lastChangedPath = filePath;
+
+  if (isBuilding) {
+    pendingRebuild = true;
+    return;
+  }
+
   if (buildTimeout) {
     clearTimeout(buildTimeout);
   }
-  
-  buildTimeout = setTimeout(() => {
-    if (isBuilding) return;
-    isBuilding = true;
-
-    console.clear();
-    print.boldInfo(`\n🔄 File changed: ${path.relative(process.cwd(), filePath)}\n`);
-    print.info('\nRebuilding...');
-
-    const command = '{{packageManager}} run build --silent';
-
-    exec(command, { maxBuffer: 10 * 1024 * 1024 }, (err, stdout, stderr) => {
-      if (stdout) process.stdout.write(stdout);
-      if (stderr) process.stderr.write(stderr);
-      if (err) {
-        if (err.code === 'ERR_CHILD_PROCESS_STDIO_MAXBUFFER') {
-          print.boldError(`\nBuild output exceeded the buffer size — raise maxBuffer in tools/dev/watcher.js.`);
-        } else {
-          print.boldError(`\nBuild failed: ${err.message}`);
-        }
-      } else {
-        print.boldBlue('Watching for changes...');
-      }
-      isBuilding = false;
-    });
-  }, 100);
+
+  buildTimeout = setTimeout(runBuild, 100);
 });
 
 watcher.on('ready', () => {