Fixes #33 Fixes #11

11ty · Dec 2, 2022 · 38a2914 · 38a2914
1 parent 51e00ae
commit 38a2914
Show file tree

Hide file tree

Showing 19 changed files with 163 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^2.0.0-canary.18",
-		"@11ty/webc": "^0.7.1"
+		"@11ty/webc": "^0.7.1",
+		"dependency-graph": "^0.11.0"
 	},
 	"devDependencies": {
 		"ava": "^5.0.1"

diff --git a/src/eleventyWebcTemplate.js b/src/eleventyWebcTemplate.js
@@ -131,7 +131,9 @@ module.exports = function(eleventyConfig, options = {}) {
 			});
 
 			return async (data) => {
-				let setupObject = { data };
+				let setupObject = {
+					data,
+				};
 				if(data.webc?.components) {
 					let WebC = incremental.webc;
 					setupObject.components = WebC.getComponentsMap(relativePath(data.page.inputPath, data.webc.components));
@@ -147,22 +149,41 @@ module.exports = function(eleventyConfig, options = {}) {
 				let { ast, serializer } = setup;
 				let { html, css, js, buckets } = await serializer.compile(ast);
 
+				let hasAssets = false;
 				cssManager.addToPage(data.page.url, css, "default");
+				if(css.length > 0) {
+					hasAssets = true;
+				}
 
 				if(buckets.css) {
 					for(let bucket in buckets.css) {
 						cssManager.addToPage(data.page.url, buckets.css[bucket], bucket);
+						if(buckets.css[bucket] && buckets.css[bucket].length > 0) {
+							hasAssets = true;
+						}
 					}
 				}
 
 				jsManager.addToPage(data.page.url, js, "default");
+				if(js.length > 0) {
+					hasAssets = true;
+				}
 
 				if(buckets.js) {
 					for(let bucket in buckets.js) {
 						jsManager.addToPage(data.page.url, buckets.js[bucket], bucket);
+						if(buckets.js[bucket] && buckets.js[bucket].length > 0) {
+							hasAssets = true;
+						}
 					}
 				}
 
+				// Limit two pass compile for outermost layouts *only* that have JS/CSS assets
+				if(hasAssets && incremental.isOutermostLayoutInChain(inputPath)) {
+					let {html} = await serializer.compile(ast);
+					return html;
+				}
+
 				return html;
 			};
 		}

diff --git a/src/incremental.js b/src/incremental.js
@@ -1,3 +1,5 @@
+const { DepGraph } = require("dependency-graph");
+
 class WebCIncremental {
 	constructor() {
 		this.pages = {};
@@ -10,6 +12,32 @@ class WebCIncremental {
 
 	setLayouts(layouts) {
 		this.layouts = layouts;
+
+		let graph = new DepGraph();
+		for(let layout in layouts) {
+			if(!graph.hasNode(layout)) {
+				graph.addNode(layout);
+			}
+			for(let child of layouts[layout]) {
+				if(!layouts[child]) {
+					// not a layout
+					continue;
+				}
+				if(!graph.hasNode(child)) {
+					graph.addNode(child);
+				}
+				graph.addDependency(child, layout);
+			}
+		}
+
+		this.layoutDependencyGraph = graph;
+	}
+
+	isOutermostLayoutInChain(layoutFilePath) {
+		if(this.layouts && this.layouts[layoutFilePath]) {
+			return this.layoutDependencyGraph.dependenciesOf(layoutFilePath).length === 0;
+		}
+		return false;
 	}
 
 	isFileUsingLayout(templateFilePath, layoutFilePath) {
@@ -23,13 +51,7 @@ class WebCIncremental {
 		let WebC = this.webc;
 		let page = new WebC();
 
-		// Explicitly disable bundler mode for layouts
-		if(this.layouts && this.layouts[inputPath]) {
-			page.setBundlerMode(false);
-		} else {
-			page.setBundlerMode(true);
-		}
-
+		page.setBundlerMode(true);
 		page.setContent(inputContent, inputPath);
 
 		this.pages[inputPath] = page;

diff --git a/test/components-in-layouts/_components/inner.webc b/test/components-in-layouts/_components/inner.webc
@@ -0,0 +1,2 @@
+Test
+<style>/* Inner CSS */</style>
diff --git a/test/components-in-layouts/_components/outer.webc b/test/components-in-layouts/_components/outer.webc
@@ -0,0 +1,2 @@
+Test
+<style>/* Outer CSS */</style>
diff --git a/test/components-in-layouts/_includes/base.webc b/test/components-in-layouts/_includes/base.webc
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content="">
+		<title></title>
+		<style webc:keep @raw="getCss(page.url)"></style>
+	</head>
+	<body>
+		<template webc:nokeep @raw="content"></template>
+		<outer></outer>
+	</body>
+</html>
diff --git a/test/components-in-layouts/_includes/layout.webc b/test/components-in-layouts/_includes/layout.webc
@@ -0,0 +1,5 @@
+---
+layout: base.webc
+---
+<template webc:nokeep @raw="content"></template>
+<inner></inner>
diff --git a/test/components-in-layouts/eleventy.config.js b/test/components-in-layouts/eleventy.config.js
@@ -0,0 +1,13 @@
+const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addPlugin(EleventyWebcPlugin, {
+		components: "test/components-in-layouts/_components/**/*.webc"
+	});
+
+	return {
+		dir: {
+			includes: "_includes",
+		}
+	}
+}
diff --git a/test/components-in-layouts/other-page.webc b/test/components-in-layouts/other-page.webc
@@ -0,0 +1,3 @@
+---
+layout: layout.webc
+---
diff --git a/test/components-in-layouts/page.webc b/test/components-in-layouts/page.webc
@@ -0,0 +1,3 @@
+---
+layout: layout.webc
+---
diff --git a/test/nested-layouts/_includes/base.webc b/test/nested-layouts/_includes/base.webc
@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @raw="getCss(page.url)"></style>
+		<style webc:keep @raw="getCss(page.url)"></style>
 	</head>
 	<body>
 		<template webc:nokeep @raw="content"></template>

diff --git a/test/nested-layouts/_includes/layout.webc b/test/nested-layouts/_includes/layout.webc
@@ -3,4 +3,4 @@ layout: base.webc
 ---
 Base
 <template webc:nokeep @raw="content"></template>
-<style @raw="getCss(page.url)"></style>
+<style webc:keep @raw="getCss(page.url)"></style>
diff --git a/test/raw-layout-html/_layouts/layout.webc b/test/raw-layout-html/_layouts/layout.webc
@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @raw="getCss(page.url)"></style>
+		<style webc:keep @raw="getCss(page.url)"></style>
 	</head>
 	<body>
 		<template webc:nokeep @raw="this.content"></template>

diff --git a/test/sample-1/_layouts/layout.webc b/test/sample-1/_layouts/layout.webc
@@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
+		<style webc:keep @html="this.getCSS(this.page.url)"></style>
+		<script webc:keep @html="this.getJS(this.page.url)"></script>
 	</head>
 	<body>
 		<template webc:nokeep @html="this.content"></template>
 
-		<style @html="this.getCSS(this.page.url, 'defer')"></style>
-		<script @html="this.getJS(this.page.url, 'defer')"></script>
+		<style webc:keep @html="this.getCSS(this.page.url, 'defer')"></style>
+		<script webc:keep @html="this.getJS(this.page.url, 'defer')"></script>
 	</body>
 </html>
diff --git a/test/sample-2/_layouts/layout.webc b/test/sample-2/_layouts/layout.webc
@@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
+		<style webc:keep @html="this.getCSS(this.page.url)"></style>
+		<script webc:keep @html="this.getJS(this.page.url)"></script>
 	</head>
 	<body>
 		<template webc:nokeep @html="this.content"></template>
 
-		<style @html="this.getCSS(this.page.url, 'defer')"></style>
-		<script @html="this.getJS(this.page.url, 'defer')"></script>
+		<style webc:keep @html="this.getCSS(this.page.url, 'defer')"></style>
+		<script webc:keep @html="this.getJS(this.page.url, 'defer')"></script>
 	</body>
 </html>
diff --git a/test/sample-page-global-components-relative-to-inputpath/_layouts/layout.webc b/test/sample-page-global-components-relative-to-inputpath/_layouts/layout.webc
@@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
+		<style webc:keep @html="this.getCSS(this.page.url)"></style>
+		<script webc:keep @html="this.getJS(this.page.url)"></script>
 	</head>
 	<body>
 		<template webc:nokeep @html="this.content"></template>
 
-		<style @html="this.getCSS(this.page.url, 'defer')"></style>
-		<script @html="this.getJS(this.page.url, 'defer')"></script>
+		<style webc:keep @html="this.getCSS(this.page.url, 'defer')"></style>
+		<script webc:keep @html="this.getJS(this.page.url, 'defer')"></script>
 	</body>
 </html>
diff --git a/test/sample-page-global-components/_layouts/layout.webc b/test/sample-page-global-components/_layouts/layout.webc
@@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
+		<style webc:keep @html="this.getCSS(this.page.url)"></style>
+		<script webc:keep @html="this.getJS(this.page.url)"></script>
 	</head>
 	<body>
 		<template webc:nokeep @html="this.content"></template>
 
-		<style @html="this.getCSS(this.page.url, 'defer')"></style>
-		<script @html="this.getJS(this.page.url, 'defer')"></script>
+		<style webc:keep @html="this.getCSS(this.page.url, 'defer')"></style>
+		<script webc:keep @html="this.getJS(this.page.url, 'defer')"></script>
 	</body>
 </html>
diff --git a/test/test.js b/test/test.js
@@ -352,3 +352,51 @@ Testing
 </body>
 </html>`);
 });
+
+test("Components in layouts #11", async t => {
+	let elev = new Eleventy("./test/components-in-layouts/", "./test/components-in-layouts/_site", {
+		configPath: "./test/components-in-layouts/eleventy.config.js"
+	});
+
+	let results = await elev.toJSON();
+	let [page1, page2] = results;
+	t.is(normalize(page1.content), `<!doctype html>
+<html lang="en">
+<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content>
+		<title></title>
+		<style>/* Inner CSS */
+/* Outer CSS */</style>
+	</head>
+	<body>
+		
+<inner>Test
+</inner>
+		<outer>Test
+</outer>
+	
+</body>
+</html>`);
+
+t.is(normalize(page2.content), `<!doctype html>
+<html lang="en">
+<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content>
+		<title></title>
+		<style>/* Inner CSS */
+/* Outer CSS */</style>
+	</head>
+	<body>
+		
+<inner>Test
+</inner>
+		<outer>Test
+</outer>
+	
+</body>
+</html>`);
+});
diff --git a/test/uid-leftovers/_layouts/layout.webc b/test/uid-leftovers/_layouts/layout.webc
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<title></title>
-		<style @html="getCSS(page.url)"></style>
+		<style webc:keep @html="getCSS(page.url)"></style>
 	</head>
 	<body></body>
 </html>