Add a few more missing watch maps

Author: bcomnes

index.js

@@ -1,6 +1,7 @@
 /**
  * @import { DomStackOpts as DomStackOpts, Results, SiteData } from './lib/builder.js'
- * @import { FSWatcher, Stats } from 'node:fs'
+ * @import { FSWatcher } from 'chokidar'
+ * @import { Stats } from 'node:fs'
  * @import { PostVarsFunction, AsyncPostVarsFunction, AsyncLayoutFunction, LayoutFunction } from './lib/build-pages/page-data.js'
  * @import { PageFunction, AsyncPageFunction } from './lib/build-pages/page-builders/page-writer.js'
  * @import { TemplateFunction } from './lib/build-pages/page-builders/template-builder.js'
@@ -128,6 +129,8 @@ async function findDepsOf (filepath) {
  *   layoutPageMap: Map<string, Set<PageInfo>>,
  *   pageFileMap: Map<string, PageInfo>,
  *   layoutFileMap: Map<string, string>,
+ *   pageDepMap: Map<string, Set<PageInfo>>,
+ *   templateDepMap: Map<string, Set<TemplateInfo>>,
  * }>}
  */
 async function buildWatchMaps (siteData) {
@@ -139,6 +142,10 @@ async function buildWatchMaps (siteData) {
   const pageFileMap = new Map()
   /** @type {Map<string, string>} layout filepath -> layoutName */
   const layoutFileMap = new Map()
+  /** @type {Map<string, Set<PageInfo>>} depFilepath -> Set<PageInfo> */
+  const pageDepMap = new Map()
+  /** @type {Map<string, Set<TemplateInfo>>} depFilepath -> Set<TemplateInfo> */
+  const templateDepMap = new Map()
 
   // Build layoutDepMap and layoutFileMap via static dep analysis
   await pMap(Object.values(siteData.layouts), async (layout) => {
@@ -150,7 +157,8 @@ async function buildWatchMaps (siteData) {
     }
   }, { concurrency: 8 })
 
-  // Build layoutPageMap and pageFileMap by resolving each page's layout var.
+  // Build layoutPageMap, pageFileMap, and pageDepMap by resolving each page's layout var
+  // and static dep analysis of its page file and page.vars file.
   // This runs in the main process — ESM cache is acceptable since we only need
   // to know the layout name string, not call the module.
   await pMap(siteData.pages, async (pageInfo) => {
@@ -162,9 +170,29 @@ async function buildWatchMaps (siteData) {
 
     if (!layoutPageMap.has(layoutName)) layoutPageMap.set(layoutName, new Set())
     layoutPageMap.get(layoutName)?.add(pageInfo)
+
+    // Track transitive deps of page.js and page.vars so changes to shared modules trigger a page rebuild
+    const filesToTrack = [pageInfo.pageFile.filepath]
+    if (pageInfo.pageVars) filesToTrack.push(pageInfo.pageVars.filepath)
+    for (const file of filesToTrack) {
+      const deps = await findDepsOf(file)
+      for (const dep of deps) {
+        if (!pageDepMap.has(dep)) pageDepMap.set(dep, new Set())
+        pageDepMap.get(dep)?.add(pageInfo)
+      }
+    }
+  }, { concurrency: 8 })
+
+  // Build templateDepMap via static dep analysis of each template file
+  await pMap(siteData.templates, async (templateInfo) => {
+    const deps = await findDepsOf(templateInfo.templateFile.filepath)
+    for (const dep of deps) {
+      if (!templateDepMap.has(dep)) templateDepMap.set(dep, new Set())
+      templateDepMap.get(dep)?.add(templateInfo)
+    }
   }, { concurrency: 8 })
 
-  return { layoutDepMap, layoutPageMap, pageFileMap, layoutFileMap }
+  return { layoutDepMap, layoutPageMap, pageFileMap, layoutFileMap, pageDepMap, templateDepMap }
 }
 
 /**
@@ -302,8 +330,9 @@ export class DomStack {
         console.error('esbuild rebuild errors:', result.errors)
         return
       }
-      console.log('esbuild rebuilt JS/CSS, re-rendering all pages...')
-      runPageBuild().catch(errorLogger)
+      // Stable filenames in watch mode mean page HTML doesn't change when bundles rebuild.
+      // Browser-sync reloads the browser directly — no page rebuild needed.
+      console.log('esbuild rebuilt JS/CSS')
     }
 
     // Run static copy and esbuild (watch mode) concurrently for the initial build.
@@ -344,14 +373,16 @@ export class DomStack {
     console.log('Initial JS, CSS and Page Build Complete')
 
     // --- Build watch maps ---
-    let { layoutDepMap, layoutPageMap, pageFileMap, layoutFileMap } = await buildWatchMaps(siteData)
+    let { layoutDepMap, layoutPageMap, pageFileMap, layoutFileMap, pageDepMap, templateDepMap } = await buildWatchMaps(siteData)
 
     const rebuildMaps = async () => {
       const maps = await buildWatchMaps(siteData)
-      layoutDepMap = maps.layoutDepMap
-      layoutPageMap = maps.layoutPageMap
-      pageFileMap = maps.pageFileMap
-      layoutFileMap = maps.layoutFileMap
+      layoutDepMap = maps.layoutDepMap       // depFilepath -> Set<layoutName>
+      layoutPageMap = maps.layoutPageMap     // layoutName -> Set<PageInfo>
+      pageFileMap = maps.pageFileMap         // pageFile/pageVars filepath -> PageInfo
+      layoutFileMap = maps.layoutFileMap     // layout filepath -> layoutName
+      pageDepMap = maps.pageDepMap           // depFilepath -> Set<PageInfo> (via page.js + page.vars deps)
+      templateDepMap = maps.templateDepMap   // depFilepath -> Set<TemplateInfo>
     }
 
     /**
@@ -455,15 +486,16 @@ export class DomStack {
     watcher.on('change', async path => {
       assert(src)
       assert(dest)
-      console.log(`File ${path} has been changed`)
-
       const fileName = basename(path)
       const absPath = resolve(path)
 
-      // 1. global.vars.* — data change, rebuild all pages + postVars
+      // 1. global.vars.* — always do a full rebuild. The `browser` key is read by
+      // buildEsbuild() in the main process and passed to esbuild as `define` substitutions.
+      // esbuild's own watcher does NOT track global.vars as an input, so any change could
+      // affect bundle output and requires restarting esbuild with fresh `define` values.
       if (globalVarsNames.has(fileName)) {
-        console.log('global.vars changed, rebuilding all pages...')
-        runPageBuild().catch(errorLogger)
+        console.log('global.vars changed, running full rebuild...')
+        await fullRebuild()
         return
       }
 
@@ -477,7 +509,7 @@ export class DomStack {
       // 3. markdown-it.settings.* — rebuild all .md pages only (rendering change)
       if (markdownItSettingsNames.has(fileName)) {
         const mdPages = new Set(siteData.pages.filter(p => p.type === 'md'))
-        console.log(`markdown-it.settings changed, rebuilding ${mdPages.size} .md page(s)...`)
+        logRebuildTree(fileName, mdPages)
         runPageBuild(mdPages).catch(errorLogger)
         return
       }
@@ -486,7 +518,7 @@ export class DomStack {
       if (layoutFileMap.has(absPath)) {
         const layoutName = /** @type {string} */ (layoutFileMap.get(absPath))
         const affectedPages = layoutPageMap.get(layoutName) ?? new Set()
-        console.log(`Layout "${layoutName}" changed, rebuilding ${affectedPages.size} page(s)...`)
+        logRebuildTree(fileName, affectedPages)
         runPageBuild(affectedPages).catch(errorLogger)
         return
       }
@@ -501,34 +533,62 @@ export class DomStack {
             affectedPages.add(pageInfo)
           }
         }
-        console.log(`Layout dep "${fileName}" changed, rebuilding ${affectedPages.size} page(s)...`)
+        logRebuildTree(fileName, affectedPages)
         runPageBuild(affectedPages).catch(errorLogger)
         return
       }
 
       // 6. Page file or page.vars changed — data change, rebuild page + postVarsPages
       if (pageFileMap.has(absPath)) {
         const affectedPage = /** @type {PageInfo} */ (pageFileMap.get(absPath))
-        const pagesToRebuild = new Set([affectedPage, ...postVarsPages])
-        console.log(`Page "${relname(src, path)}" changed, rebuilding ${pagesToRebuild.size} page(s) (incl. ${postVarsPages.size} postVars page(s))...`)
-        runPageBuild(pagesToRebuild).catch(errorLogger)
+        const directPages = new Set([affectedPage])
+        logRebuildTree(relname(src, path), directPages, undefined, postVarsPages)
+        runPageBuild(new Set([affectedPage, ...postVarsPages])).catch(errorLogger)
         return
       }
 
       // 7. Template file changed — rebuild that template only
       if (templateSuffixes.some(s => fileName.endsWith(s))) {
         const affectedTemplate = siteData.templates.find(t => t.templateFile.filepath === absPath)
         if (affectedTemplate) {
-          console.log(`Template "${fileName}" changed, rebuilding template...`)
+          logRebuildTree(fileName, undefined, new Set([affectedTemplate]))
           runPageBuild(new Set(), new Set([affectedTemplate])).catch(errorLogger)
           return
         }
       }
 
-      // 8. Layout style/client (.layout.css, .layout.client.*) — esbuild watches these,
-      // onEnd will fire a full page rebuild automatically. Nothing to do here.
+      // 8. Dep of a page.js or page.vars file — data change, rebuild affected pages + postVarsPages
+      if (pageDepMap.has(absPath)) {
+        const affectedPages = /** @type {Set<PageInfo>} */ (pageDepMap.get(absPath))
+        logRebuildTree(fileName, affectedPages, undefined, postVarsPages)
+        runPageBuild(new Set([...affectedPages, ...postVarsPages])).catch(errorLogger)
+        return
+      }
+
+      // 9. Dep of a template file — rebuild affected templates only
+      if (templateDepMap.has(absPath)) {
+        const affectedTemplates = /** @type {Set<TemplateInfo>} */ (templateDepMap.get(absPath))
+        logRebuildTree(fileName, undefined, affectedTemplates)
+        runPageBuild(new Set(), affectedTemplates).catch(errorLogger)
+        return
+      }
+
+      // 10. Any JS/CSS bundle (client.js, page.css, .layout.css, .layout.client.*, etc.)
+      // esbuild's own watcher picks these up and rebuilds the bundle. Since watch mode
+      // uses stable (unhashed) filenames, page HTML doesn't change — browser-sync reloads
+      // the browser directly. Nothing to do here.
+      const esbuildEntryPoints = new Set([
+        siteData.globalClient?.filepath,
+        siteData.globalStyle?.filepath,
+        ...siteData.pages.flatMap(p => [p.clientBundle?.filepath, p.pageStyle?.filepath, ...Object.values(p.workers ?? {}).map(w => w.filepath)]),
+        ...Object.values(siteData.layouts).flatMap(l => [l.layoutClient?.filepath, l.layoutStyle?.filepath]),
+      ].filter(Boolean))
+      if (esbuildEntryPoints.has(absPath)) {
+        console.log(`"${fileName}" changed — esbuild will rebuild (browser-sync will reload)`)
+        return
+      }
 
-      // 9. Unrecognized — skip
+      // 11. Unrecognized — skip
       console.log(`"${fileName}" changed but did not match any rebuild rule, skipping.`)
     })
 
@@ -564,6 +624,27 @@ function relname (root, name) {
   return root === name ? basename(name) : relative(root, name)
 }
 
+/**
+ * Log a rebuild tree showing what triggered a rebuild and what will be rebuilt.
+ * @param {string} trigger - The changed file (display name)
+ * @param {Set<PageInfo>} [pages]
+ * @param {Set<import('./lib/identify-pages.js').TemplateInfo>} [templates]
+ * @param {Set<PageInfo>} [postVarsPages]
+ */
+function logRebuildTree (trigger, pages, templates, postVarsPages) {
+  const lines = [`"${trigger}" changed:`]
+  for (const p of pages ?? []) {
+    lines.push(`  → ${p.outputRelname}`)
+  }
+  for (const p of postVarsPages ?? []) {
+    if (!pages?.has(p)) lines.push(`  → ${p.outputRelname} (postVars)`)
+  }
+  for (const t of templates ?? []) {
+    lines.push(`  → ${t.outputName} (template)`)
+  }
+  console.log(lines.join('\n'))
+}
+
 /**
  * An error logger
  * @param  {Error | AggregateError | any } err The error to log

lib/identify-pages.test.js

@@ -18,7 +18,7 @@ test.describe('identify-pages', () => {
     assert.equal(Object.keys(results.pages).length, 27, '27 pages are found')
 
     assert.equal(results.warnings.length, 1, '1 warning produced')
-    assert.equal(results.warnings[0].code, 'DOM_STACK_WARNING_PAGE_MD_SHADOWS_README', 'page.md shadows README.md warning is produced')
+    assert.equal(results.warnings[0]?.code, 'DOM_STACK_WARNING_PAGE_MD_SHADOWS_README', 'page.md shadows README.md warning is produced')
     // assert.equal(results.nonPageFolders.length, 4, '4 non-page-folder')
     assert.equal(results.pages.find(p => p.path === 'html-page')?.pageFile?.type, 'html', 'html page is type html')
     assert.equal(results.pages.find(p => p.path === 'md-page')?.pageFile?.type, 'md', 'md page is type md')