Fixes #3338

src/Eleventy.js

@@ -139,6 +139,7 @@ class Eleventy {
 			await this.eleventyConfig.setProjectConfigPath(this.options.configPath);
 		}
 
+		this.eleventyConfig.setRunMode(this.runMode);
 		this.eleventyConfig.setProjectUsingEsm(this.isEsm);
 		this.eleventyConfig.setLogger(this.logger);
 		this.eleventyConfig.setDirectories(this.directories);
@@ -204,9 +205,8 @@ class Eleventy {
 		this.watchManager = new EleventyWatch();
 
 		/** @member {Object} - tbd. */
-		this.watchTargets = new EleventyWatchTargets();
+		this.watchTargets = new EleventyWatchTargets(this.eleventyConfig);
 		this.watchTargets.addAndMakeGlob(this.config.additionalWatchTargets);
-		this.watchTargets.watchJavaScriptDependencies = this.config.watchJavaScriptDependencies;
 
 		/** @member {Object} - tbd. */
 		this.fileSystemSearch = new FileSystemSearch();
@@ -801,7 +801,10 @@ Arguments:
 
 		// Note: these are sync events!
 		// `templateModified` is an alias for resourceModified but all listeners for this are cleared out when the config is reset.
-		eventBus.emit("eleventy.templateModified", changedFilePath, usedByDependants);
+		eventBus.emit("eleventy.templateModified", changedFilePath, {
+			usedByDependants,
+			relevantLayouts,
+		});
 		eventBus.emit("eleventy.resourceModified", changedFilePath, usedByDependants, {
 			viaConfigReset: isResetConfig,
 			relevantLayouts,
@@ -1004,7 +1007,7 @@ Arguments:
 	 * @method
 	 */
 	async _initWatchDependencies() {
-		if (!this.watchTargets.watchJavaScriptDependencies) {
+		if (!this.eleventyConfig.shouldSpiderJavaScriptDependencies()) {
 			return;
 		}
 

src/EleventyWatchTargets.js

@@ -5,22 +5,16 @@ import JavaScriptDependencies from "./Util/JavaScriptDependencies.js";
 import eventBus from "./EventBus.js";
 
 class EleventyWatchTargets {
-	constructor() {
+	#templateConfig;
+
+	constructor(templateConfig) {
 		this.targets = new Set();
 		this.dependencies = new Set();
 		this.newTargets = new Set();
-		this._watchJavaScriptDependencies = true;
 		this.isEsm = false;
 
 		this.graph = new DepGraph();
-	}
-
-	set watchJavaScriptDependencies(watch) {
-		this._watchJavaScriptDependencies = !!watch;
-	}
-
-	get watchJavaScriptDependencies() {
-		return this._watchJavaScriptDependencies;
+		this.#templateConfig = templateConfig;
 	}
 
 	setProjectUsingEsm(isEsmProject) {
@@ -111,7 +105,7 @@ class EleventyWatchTargets {
 
 	// add only a target’s dependencies
 	async addDependencies(targets, filterCallback) {
-		if (!this.watchJavaScriptDependencies) {
+		if (this.#templateConfig && !this.#templateConfig.shouldSpiderJavaScriptDependencies()) {
 			return;
 		}
 
@@ -146,6 +140,13 @@ class EleventyWatchTargets {
 			for (let dep of isImportedInTheChangedFile) {
 				paths.add(dep);
 			}
+
+			// Use GlobalDependencyMap
+			if (this.#templateConfig) {
+				for (let dep of this.#templateConfig.usesGraph.getDependantsFor(filePath)) {
+					paths.add(dep);
+				}
+			}
 		}
 
 		eventBus.emit("eleventy.importCacheReset", paths);

src/Engines/JavaScript.js

@@ -17,9 +17,14 @@ class JavaScript extends TemplateEngine {
 		this.instances = {};
 
 		this.cacheable = false;
-		EventBusUtil.soloOn("eleventy.templateModified", (inputPath, usedByDependants = []) => {
+		EventBusUtil.soloOn("eleventy.templateModified", (inputPath, metadata = {}) => {
+			let { usedByDependants, relevantLayouts } = metadata;
 			// Remove from cached instances when modified
-			let instancesToDelete = [TemplatePath.addLeadingDotSlash(inputPath), ...usedByDependants];
+			let instancesToDelete = [
+				inputPath,
+				...(usedByDependants || []),
+				...(relevantLayouts || []),
+			].map((entry) => TemplatePath.addLeadingDotSlash(entry));
 			for (let inputPath of instancesToDelete) {
 				if (inputPath in this.instances) {
 					delete this.instances[inputPath];
@@ -74,11 +79,7 @@ class JavaScript extends TemplateEngine {
 		}
 	}
 
-	async getInstanceFromInputPath(inputPath) {
-		if (this.instances[inputPath]) {
-			return this.instances[inputPath];
-		}
-
+	async #getInstanceFromInputPath(inputPath) {
 		let isEsm = this.eleventyConfig.getIsProjectUsingEsm();
 		const mod = await EleventyImport(inputPath, isEsm ? "esm" : "cjs");
 
@@ -93,6 +94,14 @@ class JavaScript extends TemplateEngine {
 		return inst;
 	}
 
+	async getInstanceFromInputPath(inputPath) {
+		if (!this.instances[inputPath]) {
+			this.instances[inputPath] = this.#getInstanceFromInputPath(inputPath);
+		}
+
+		return this.instances[inputPath];
+	}
+
 	/**
 	 * JavaScript files defer to the module loader rather than read the files to strings
 	 *

src/GlobalDependencyMap.js

@@ -2,6 +2,7 @@ import { DepGraph } from "dependency-graph";
 import debugUtil from "debug";
 import { TemplatePath } from "@11ty/eleventy-utils";
 
+import JavaScriptDependencies from "./Util/JavaScriptDependencies.js";
 import PathNormalizer from "./Util/PathNormalizer.js";
 
 const debug = debugUtil("Eleventy:Dependencies");
@@ -11,10 +12,20 @@ class GlobalDependencyMap {
 	static LAYOUT_KEY = "layout";
 	static COLLECTION_PREFIX = "__collection:";
 
+	#templateConfig;
+
 	reset() {
 		this._map = undefined;
 	}
 
+	setIsEsm(isEsm) {
+		this.isEsm = isEsm;
+	}
+
+	setTemplateConfig(templateConfig) {
+		this.#templateConfig = templateConfig;
+	}
+
 	setConfig(config) {
 		if (this.config) {
 			return;
@@ -23,8 +34,8 @@ class GlobalDependencyMap {
 		this.config = config;
 
 		// These have leading dot slashes, but so do the paths from Eleventy
-		this.config.events.once("eleventy.layouts", (layouts) => {
-			this.addLayoutsToMap(layouts);
+		this.config.events.once("eleventy.layouts", async (layouts) => {
+			await this.addLayoutsToMap(layouts);
 		});
 	}
 
@@ -60,8 +71,9 @@ class GlobalDependencyMap {
 	}
 
 	// Eleventy Layouts don’t show up in the dependency graph, so we handle those separately
-	addLayoutsToMap(layouts) {
+	async addLayoutsToMap(layouts) {
 		let normalizedLayouts = this.normalizeLayoutsObject(layouts);
+
 		// Clear out any previous layout relationships to make way for the new ones
 		this.removeLayoutNodes(normalizedLayouts);
 
@@ -81,6 +93,11 @@ class GlobalDependencyMap {
 			for (let pageTemplate of normalizedLayouts[layout]) {
 				this.addDependency(pageTemplate, [layout]);
 			}
+
+			if (this.#templateConfig?.shouldSpiderJavaScriptDependencies()) {
+				let deps = await JavaScriptDependencies.getDependencies([layout], this.isEsm);
+				this.addDependency(layout, deps);
+			}
 		}
 	}
 

src/TemplateConfig.js

@@ -50,6 +50,7 @@ class EleventyPluginError extends EleventyBaseError {}
  */
 class TemplateConfig {
 	#templateFormats;
+	#runMode;
 
 	constructor(customRootConfig, projectConfigPath) {
 		this.userConfig = new UserConfig();
@@ -119,6 +120,18 @@ class TemplateConfig {
 		return this.directories.input;
 	}
 
+	setRunMode(runMode) {
+		this.#runMode = runMode;
+	}
+
+	shouldSpiderJavaScriptDependencies() {
+		// not for a standard build
+		return (
+			(this.#runMode === "watch" || this.#runMode === "serve") &&
+			this.userConfig.watchJavaScriptDependencies
+		);
+	}
+
 	/**
 	 * Normalises local project config file path.
 	 *
@@ -143,6 +156,7 @@ class TemplateConfig {
 
 	setProjectUsingEsm(isEsmProject) {
 		this.isEsm = !!isEsmProject;
+		this.usesGraph.setIsEsm(isEsmProject);
 	}
 
 	getIsProjectUsingEsm() {
@@ -492,6 +506,8 @@ class TemplateConfig {
 	get usesGraph() {
 		if (!this._usesGraph) {
 			this._usesGraph = new GlobalDependencyMap();
+			this._usesGraph.setIsEsm(this.isEsm);
+			this._usesGraph.setTemplateConfig(this);
 		}
 		return this._usesGraph;
 	}

src/Util/EsmResolver.js

@@ -17,7 +17,9 @@ export async function resolve(specifier, context, nextResolve) {
 		// Not a relative import and not a file import
 		// Or from node_modules (perhaps better to check if the specifier is in the project directory instead)
 		if (
-			(!specifier.startsWith("./") && !specifier.startsWith("file:")) ||
+			(!specifier.startsWith("../") &&
+				!specifier.startsWith("./") &&
+				!specifier.startsWith("file:")) ||
 			context.parentURL.includes("/node_modules/")
 		) {
 			return nextResolve(specifier);

test/EleventyTest.js

@@ -107,7 +107,9 @@ test("Eleventy process.ENV", async (t) => {
 });
 
 test("Eleventy file watching", async (t) => {
-  let elev = new Eleventy("./test/stubs", "./test/stubs/_site");
+  let elev = new Eleventy("./test/stubs", "./test/stubs/_site", {
+    runMode: "watch" // required to spider deps
+  });
   elev.setFormats("njk");
 
   await elev.init();

test/EleventyWatchTargetsTest.js

@@ -1,5 +1,6 @@
 import test from "ava";
 
+import TemplateConfig from "../src/TemplateConfig.js";
 import EleventyWatchTargets from "../src/EleventyWatchTargets.js";
 import JavaScriptDependencies from "../src/Util/JavaScriptDependencies.js";
 
@@ -89,7 +90,8 @@ test("JavaScript addDependencies (one file has two dependencies)", async (t) =>
 });
 
 test("JavaScript addDependencies (skip JS deps)", async (t) => {
-  let targets = new EleventyWatchTargets();
+  let templateConfig = new TemplateConfig();
+  let targets = new EleventyWatchTargets(templateConfig);
   targets.setProjectUsingEsm(true);
   targets.watchJavaScriptDependencies = false;
   await targets.addDependencies("./test/stubs/dependencies/two-deps.11ty.cjs");