@11ty/eleventy-plugin-webc 0.3.1 → 0.5.0

package/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2
+end_of_line = lf
+insert_final_newline = false
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.js]
+insert_final_newline = true
+
+[test/*.js]
+trim_trailing_whitespace = false

package/README.md

@@ -4,261 +4,33 @@
 
 Adds support for [WebC, the single file web component format](https://github.com/11ty/webc), to Eleventy.
 
-## Features
-
-* All of the [framework-independent WebC features](https://github.com/11ty/webc#features) out of the box.
-* First-class incremental support (for page templates, components, and Eleventy layouts): use with `--incremental`
-* Tired of importing components?
-	* Configure no-import global web components
-	* Configure no-import components in the data cascade to apply to a single template, a directory of templates, or a complex hierarchy of folders-o-templates.
-* Easiliy roll up the CSS and JS in-use by WebC components on a page for page-specific bundles. Dirt-simple critical CSS/JS to only load the code you need.
-	* Components can roll up CSS/JS assets to arbitrary buckets for custom use!
-* For more complex templating needs, you _can_ render any existing Eleventy template syntax inside of WebC.
-* Works great with out of the box with [is-land](https://www.11ty.dev/docs/plugins/partial-hydration/)
+* [This documentation has moved to 11ty.dev](https://www.11ty.dev/docs/languages/webc/).
+* Watch the [crash course in Eleventy WebC on YouTube](https://www.youtube.com/watch?v=X-Bpjrkz-V8).
+* Watch the [Interactive Components tutorial on YouTube](https://www.youtube.com/watch?v=p0wDUK0Z5Nw)
 
-## ➡ [Documentation](https://www.11ty.dev/docs/languages/webc/)
+[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-plugin-webc.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-plugin-webc)
 
-- Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/)!
+- Star [Eleventy on GitHub](https://github.com/11ty/eleventy/)!
 - Follow us on Twitter [@eleven_ty](https://twitter.com/eleven_ty)
 - Support [11ty on Open Collective](https://opencollective.com/11ty)
 - Subscribe to our [YouTube channel](https://11ty.dev/youtube)
-- [11ty on npm](https://www.npmjs.com/org/11ty)
-- [11ty on GitHub](https://github.com/11ty)
-
-[![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-plugin-webc.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-plugin-webc)
-
-## Installation
-
-You’ve found this early! It’s not yet on npm.
-
-<!--
-```
-npm install @11ty/eleventy-plugin-webc
-```
--->
-
-## Usage
-
-Enable the plugin in your Eleventy configuration file:
-
-```js
-const pluginWebc = require("@11ty/eleventy-plugin-webc");
-
-module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(pluginWebc);
-};
-```
-
-### Full options list
-
-```js
-const pluginWebc = require("@11ty/eleventy-plugin-webc");
-
-module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(pluginWebc, {
-		// Glob to find no-import global components
-		components: "_includes/components/**/*.webc", // defaults to `false`
-	});
-};
-```
-
-## Examples
-
-Add a new `.webc` file to your Eleventy input directory and it will render as WebC to your output directory (`_site` by default).
-
-`my-page.webc`:
-
-```html
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>WebC Example</title>
-	</head>
-	<body>
-		WebC *is* HTML.
-	</body>
-</html>
-```
-
-### Use Front Matter
-
-WebC in Eleventy works automatically with standard Eleventy conventions for [front matter](https://www.11ty.dev/docs/data-frontmatter/) (though front matter in Eleventy is _optional_).
-
-Notably you can use `yaml`, `json`, `js`, or [add your own data format](https://www.11ty.dev/docs/data-frontmatter-customize/) for front matter in Eleventy.
-
-`with-front-matter.webc` (using `_includes/my-layout.webc` as an [Eleventy layout](https://www.11ty.dev/docs/layouts/)):
-
-```html
----
-layout: "my-layout.webc"
----
-<my-webc-component>WebC *is* HTML.</my-webc-component>
-```
-
-`_includes/my-layout.webc`:
-
-```html
-<!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>
-	</head>
-	<body @html="this.content"></body>
-</html>
-```
-
-### Components
-
-There are a few ways to use web components here:
-
-1. You can use `webc:import` inside of your components to import another component directly.
-2. Use global no-import components specified in your config file
-3. Specify a glob of no-import components at a directory or template level in the data cascade
-
-Notably, WebC components are not restricted to the same naming limitations as custom elements (they do not require a dash in the name). The [WebC documentation has all of the detail on how to use and configure WebC components](https://github.com/11ty/webc#html-imports-kidding-kinda).
-
-#### Global no-import Components
 
-Use the `components` property in the Full options list in your Eleventy configuration file to specify project-wide WebC component files available for use in any page.
+## [Documentation](https://www.11ty.dev/docs/languages/webc/)
 
-#### Specify no-import Components in the Data Cascade
+This documentation has [moved to 11ty.dev](https://www.11ty.dev/docs/languages/webc/).
 
-You can also use and configure specific components as part of the data cascade as well (global to a folder or a specific template) by assigning a glob (or array of globs) to `webc.components`, like so:
-
-`my-directory/my-page.webc`:
-
-```html
----
-layout: "my-layout.webc"
-webc:
-	components: "./webc/*.webc"
----
-<my-webc-component>WebC *is* HTML.</my-webc-component>
-```
-
-* Usage warning: By default these paths are relative to the template file. If you’re setting this in the data cascade to apply multiple child folders deep, it might be better to use the global no-import components option above OR to use `~/` as a prefix (e.g. `~/my-directory/webc/*.webc`) to alias to the project’s root directory.
-
-### CSS and JS
-
-[Eleventy Layouts](https://www.11ty.dev/docs/layouts/) can bundle any specific page’s assets (CSS and JS used by components on the page). These are automatically rolled up when a component uses `<script>` or `<style>`. You can use this to easily implement component-driven Critical CSS.
-
-`_includes/webc/my-webc-component.webc`:
-
-```html
-<style>/* This is component CSS */</style>
-<script>/* This is component JS */</script>
-```
-
-`_includes/layout.webc`:
-
-```html
-<!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 @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
-	</head>
-	<body @html="this.content"></body>
-</html>
-```
-
-#### Asset bucketing
-
-Components can use the `webc:bucket` feature to output to any arbitrary bucket name for compartmentalization at the component level.
-
-`_includes/webc/my-webc-component.webc`:
-
-```html
-<style>/* This CSS is put into the default bucket */</style>
-<script>/* This JS is put into the default bucket */</script>
-<style webc:bucket="defer">/* This CSS is put into the `defer` bucket */</style>
-<script webc:bucket="defer">/* This JS is put into the `defer` bucket */</script>
-```
-
-```html
-<!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>
-		<!-- Default bucket -->
-		<style @html="this.getCSS(this.page.url)"></style>
-		<script @html="this.getJS(this.page.url)"></script>
-	</head>
-	<body>
-		<template webc:nokeep @html="this.content"></template>
-
-		<!-- `defer` bucket -->
-		<style @html="this.getCSS(this.page.url, 'defer')"></style>
-		<script @html="this.getJS(this.page.url, 'defer')"></script>
-	</body>
-</html>
-```
-
-### Use any Eleventy Template Syntax
-
-We’ve wired up [WebC’s Custom Transforms feature](https://github.com/11ty/webc#custom-transforms) `webc:type="11ty"` to the [Eleventy Render plugin](https://www.11ty.dev/docs/plugins/render/) to allow you to use existing Eleventy template syntax inside of WebC.
-
-Use the `11ty:type` attribute to specify a [valid template syntax](https://www.11ty.dev/docs/plugins/render/#rendertemplate).
-
-`my-page.webc`:
-
-```
----
-frontmatterdata: "Hello from Front Matter"
----
-<template webc:type="11ty" 11ty:type="liquid,md">
-{% assign t = "Liquid in WebC" %}
-## {{ t }}
-
-_{{ frontmatterdata }}_
-</template>
-```
-
-You have full access to the data cascade here (see `frontmatterdata` in the example above).
-
-### Use with `is-land`
-
-You can also use this out of the box with Eleventy’s [`is-land` component for web component hydration](https://www.11ty.dev/docs/plugins/partial-hydration/).
-
-At the component level, components can declare their own is-land loading conditions.
-
-_(Some features here require `is-land` 1.0.1 or newer)_
-
-`_includes/webc/my-webc-component.webc`:
-
-```html
-<is-land on:visible>
-	<style media="module/island" webc:keep>
-	/* This is some is-land on-visible CSS */
-	</style>
-	<script type="module/island" webc:keep>
-	console.log("This is some is-land on-visible JavaScript");
-	</script>
-
-	<link rel="stylesheet" media="style/island" href="some-arbitrary-css.css">
-	<script type="module/island" src="some-arbitrary-js.js"></script>
-</is-land>
-
-<is-land on:interaction>
-	<style media="module/island" webc:keep>
-		/* This is some is-land on-interaction CSS */
-	</style>
-	<script type="module/island" webc:keep>
-		console.log("This is some is-land on-interaction JavaScript");
-	</script>
+## Features
 
-	<link rel="stylesheet" media="style/island" href="some-arbitrary-css.css">
-	<script type="module/island" src="some-arbitrary-js.js"></script>
-</is-land>
-```
+* Brings first-class **components** to Eleventy.
+  * Expand any HTML element (including custom elements) to HTML with defined conventions from web standards.
+  * This means that Web Components created with WebC are compatible with server-side rendering (without duplicating author-written markup)
+  * WebC components are [Progressive Enhancement friendly](https://www.youtube.com/watch?v=p0wDUK0Z5Nw).
+* Get first-class **incremental builds** (for page templates, components, and Eleventy layouts) when [used with `--incremental`](https://www.11ty.dev/docs/usage/#incremental-for-partial-incremental-builds)
+* Streaming friendly (stream on the Edge 👀)
+* Easily scope component CSS (or use your own scoping utility).
+* Tired of importing components? Use global or per-page no-import components.
+* Shadow DOM friendly (works with or without Shadow DOM)
+* All configuration extensions/hooks into WebC are async-friendly out of the box.
+* Bundler mode: Easily roll up the CSS and JS in-use by WebC components on a page for page-specific bundles. Dirt-simple critical CSS/JS to only load the code you need.
+* For more complex templating needs, render any existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside of WebC.
+* Works great with [is-land](https://www.11ty.dev/docs/plugins/partial-hydration/) for web component hydration.

package/eleventyWebcPlugin.js

@@ -1,27 +1,6 @@
 const pkg = require("./package.json");
-const path = require("path");
-const { EleventyRenderPlugin } = require("@11ty/eleventy");
-const EleventyRenderManager = EleventyRenderPlugin.RenderManager;
-
-const CodeManager = require("./src/codeManager.js");
-const WebCIncremental = require("./src/incremental.js");
-
-function relativePath(inputPath, newGlob) {
-	// project root
-	if(newGlob.startsWith("~/")) {
-		let rootRelativePath = "." + newGlob.slice(1);
-		return rootRelativePath;
-	}
-
-	let { dir } = path.parse(inputPath);
-	// globs must have forward slashes (even on Windows)
-	let templateRelativePath = path.join(dir, newGlob).split(path.sep).join("/");
-	return templateRelativePath;
-}
-
-/* TODO
- * Use JavaScript functions or universal shortcodes as built-in components?
- */
+const templatePlugin = require("./src/eleventyWebcTemplate.js");
+const transformPlugin = require("./src/eleventyWebcTransform.js");
 
 module.exports = function(eleventyConfig, options = {}) {
 	try {
@@ -30,126 +9,28 @@ module.exports = function(eleventyConfig, options = {}) {
 		console.log( `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` );
 	}
 
+	let filters = Object.assign({
+		css: "webcGetCss",
+		js: "webcGetJs",
+	}, options.filters);
+
 	options = Object.assign({
 		components: false, // glob for no-import global components
+		useTransform: false, // global transform
+		transformData: {}, // extra global data for transforms specifically
 	}, options);
 
+	options.filters = filters;
+
 	if(options.components) {
 		eleventyConfig.addWatchTarget(options.components);
-	}
 
-	eleventyConfig.addTemplateFormats("webc");
-
-	let renderManager = new EleventyRenderManager();
-	let cssManager = new CodeManager();
-	let jsManager = new CodeManager();
-
-	eleventyConfig.on("eleventy.before", () => {
-		cssManager.reset();
-		jsManager.reset();
-	});
-
-	function getCss(pageUrl, bucket = "default") {
-		return cssManager.getForPage(pageUrl, bucket);
-	}
-
-	function getJs(pageUrl, bucket = "default") {
-		return jsManager.getForPage(pageUrl, bucket);
+		// TODO add to eleventy ignores (if not in _includes folder)
 	}
 
-	// TODO
-	// eleventyConfig.addFilter("webcGetCSS", (url, bucket) => getCss(url, bucket));
-	// eleventyConfig.addFilter("webcGetJS", (url, bucket) => getJs(url, bucket));
-
-	let incremental = new WebCIncremental();
-
-	eleventyConfig.on("eleventy.layouts", layouts => {
-		incremental.setLayouts(layouts);
-	});
-
-	eleventyConfig.on("eleventy.before", () => {
-		incremental.setComponents(options.components);
-	});
-
-	eleventyConfig.addExtension("webc", {
-		outputFileExtension: "html",
+	templatePlugin(eleventyConfig, options);
 
-		init: async function() {
-			// For ESM in CJS
-			let e = await import("@11ty/webc");
-			incremental.setWebC(e.WebC);
-
-			if(incremental.needsComponents()) {
-				incremental.setComponents(options.components);
-			}
-		},
-
-		isIncrementalMatch: function (incrementalFilePath) {
-			// Eleventy layouts don’t appear directly in the WebC component graph, so we use the `eleventy.layouts` map here
-			if(incremental.isTemplateUsingLayout(this.inputPath, incrementalFilePath)) {
-				return true;
-			}
-
-			let {page, setup} = incremental.get(this.inputPath);
-			if(page && setup) {
-				if(page.getComponents(setup).includes(incrementalFilePath)) {
-					return true;
-				}
-			}
-
-			return false;
-		},
-
-		compile: async function(inputContent, inputPath) {
-			let page = incremental.add(inputContent, inputPath);
-
-			page.setHelper("getCSS", function(url, bucket) {
-				return getCss(url, bucket);
-			});
-
-			page.setHelper("getJS", function(url, bucket) {
-				return getJs(url, bucket);
-			});
-
-			page.setTransform("11ty", async function(content) {
-				let syntax = this["11ty:type"];
-				if(syntax) {
-					let fn = await renderManager.compile(content, syntax);
-					return renderManager.render(fn, this, {});
-				}
-				return content;
-			});
-
-			return async (data) => {
-				let setupObject = { data };
-				if(data.webc?.components) {
-					setupObject.components = incremental.getComponentMap(relativePath(data.page.inputPath, data.webc.components));
-				}
-
-				let setup = await page.setup(setupObject);
-				incremental.addSetup(inputPath, setup);
-
-				let { ast, serializer } = setup;
-				let { html, css, js, buckets } = await serializer.compile(ast);
-
-				cssManager.addToPage(data.page.url, css, "default");
-
-				if(buckets.css) {
-					for(let bucket in buckets.css) {
-						cssManager.addToPage(data.page.url, buckets.css[bucket], bucket);
-					}
-				}
-
-				jsManager.addToPage(data.page.url, js, "default");
-
-				if(buckets.js) {
-					for(let bucket in buckets.js) {
-						jsManager.addToPage(data.page.url, buckets.js[bucket], bucket);
-					}
-				}
-
-				return html;
-			};
-		}
-	});
-}
+	if(options.useTransform) {
+		transformPlugin(eleventyConfig, options);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.3.1",
+	"version": "0.5.0",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
 	"scripts": {
@@ -13,9 +13,9 @@
 	"engines": {
 		"node": ">=14.18"
 	},
-  "11ty": {
-    "compatibility": ">=2.0.0-canary.16"
-  },
+	"11ty": {
+		"compatibility": ">=2.0.0-canary.16"
+	},
 	"funding": {
 		"type": "opencollective",
 		"url": "https://opencollective.com/11ty"
@@ -39,7 +39,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^2.0.0-canary.16",
-		"@11ty/webc": "^0.3.1"
+		"@11ty/webc": "^0.5.2"
 	},
 	"devDependencies": {
 		"ava": "^4.3.3"

package/src/eleventyWebcTemplate.js

@@ -0,0 +1,140 @@
+const path = require("path");
+
+const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const EleventyRenderManager = EleventyRenderPlugin.RenderManager;
+
+const CodeManager = require("./codeManager.js");
+const WebCIncremental = require("./incremental.js");
+
+function relativePath(inputPath, newGlob) {
+	// project root
+	if(newGlob.startsWith("~/")) {
+		let rootRelativePath = "." + newGlob.slice(1);
+		return rootRelativePath;
+	}
+
+	let { dir } = path.parse(inputPath);
+	// globs must have forward slashes (even on Windows)
+	let templateRelativePath = path.join(dir, newGlob).split(path.sep).join("/");
+	return templateRelativePath;
+}
+
+module.exports = function(eleventyConfig, options = {}) {
+	eleventyConfig.addTemplateFormats("webc");
+
+	let renderManager = new EleventyRenderManager();
+	let cssManager = new CodeManager();
+	let jsManager = new CodeManager();
+	let incremental = new WebCIncremental();
+
+	eleventyConfig.on("eleventy.before", () => {
+		cssManager.reset();
+		jsManager.reset();
+		incremental.setComponents(options.components);
+	});
+
+	function getCss(pageUrl, bucket = "default") {
+		return cssManager.getForPage(pageUrl, bucket);
+	}
+
+	function getJs(pageUrl, bucket = "default") {
+		return jsManager.getForPage(pageUrl, bucket);
+	}
+
+	if(options.filters.css) {
+		eleventyConfig.addFilter(options.filters.css, (url, bucket) => getCss(url, bucket));
+	}
+	if(options.filters.js) {
+		eleventyConfig.addFilter(options.filters.js, (url, bucket) => getJs(url, bucket));
+	}
+
+	eleventyConfig.on("eleventy.layouts", layouts => {
+		incremental.setLayouts(layouts);
+	});
+
+	eleventyConfig.addExtension("webc", {
+		outputFileExtension: "html",
+
+		init: async function() {
+			// For ESM in CJS
+			let { WebC } = await import("@11ty/webc");
+			incremental.setWebC(WebC);
+
+			if(incremental.needsComponents()) {
+				incremental.setComponents(options.components);
+			}
+		},
+
+		isIncrementalMatch: function (incrementalFilePath) {
+			// Eleventy layouts don’t appear directly in the WebC component graph, so we use the `eleventy.layouts` map here
+			if(incremental.isTemplateUsingLayout(this.inputPath, incrementalFilePath)) {
+				return true;
+			}
+
+			let {page, setup} = incremental.get(this.inputPath);
+			if(page && setup) {
+				if(page.getComponents(setup).includes(incrementalFilePath)) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+
+		compile: async function(inputContent, inputPath) {
+			let page = incremental.add(inputContent, inputPath);
+
+			// Add Eleventy JavaScript Functions as WebC helpers (Universal Filters also populate into these)
+			for(let helperName in this.config.javascriptFunctions) {
+				page.setHelper(helperName, this.config.javascriptFunctions[helperName]);
+			}
+
+			// Support both casings (I prefer getCss, but yeah)
+			page.setHelper("getCss", (url, bucket) => getCss(url, bucket));
+			page.setHelper("getCSS", (url, bucket) => getCss(url, bucket));
+
+			page.setHelper("getJs", (url, bucket) => getJs(url, bucket));
+			page.setHelper("getJS", (url, bucket) => getJs(url, bucket));
+
+			page.setTransform("11ty", async function(content) {
+				let syntax = this["11ty:type"];
+				if(syntax) {
+					let fn = await renderManager.compile(content, syntax);
+					return renderManager.render(fn, this, {});
+				}
+				return content;
+			});
+
+			return async (data) => {
+				let setupObject = { data };
+				if(data.webc?.components) {
+					setupObject.components = incremental.getComponentMap(relativePath(data.page.inputPath, data.webc.components));
+				}
+
+				let setup = await page.setup(setupObject);
+				incremental.addSetup(inputPath, setup);
+
+				let { ast, serializer } = setup;
+				let { html, css, js, buckets } = await serializer.compile(ast);
+
+				cssManager.addToPage(data.page.url, css, "default");
+
+				if(buckets.css) {
+					for(let bucket in buckets.css) {
+						cssManager.addToPage(data.page.url, buckets.css[bucket], bucket);
+					}
+				}
+
+				jsManager.addToPage(data.page.url, js, "default");
+
+				if(buckets.js) {
+					for(let bucket in buckets.js) {
+						jsManager.addToPage(data.page.url, buckets.js[bucket], bucket);
+					}
+				}
+
+				return html;
+			};
+		}
+	});
+};

package/src/eleventyWebcTransform.js

@@ -0,0 +1,40 @@
+module.exports = function(eleventyConfig, options = {}) {
+	let componentsMap = false; // cache the glob search
+
+	eleventyConfig.on("eleventy.before", () => {
+		componentsMap = false;
+	});
+
+	eleventyConfig.addTransform("@11ty/eleventy-plugin-webc", async function(content) {
+		// Skip non-.html output
+		// Skip .webc input
+		if(this.inputPath.endsWith(".webc") || !(this.outputPath || "").endsWith(".html")) {
+			return content;
+		}
+
+		// TODO prevent double processing with the Render plugin with WebC
+		// https://www.11ty.dev/docs/plugins/render/
+		try {
+			const { WebC } = await import("@11ty/webc");
+			let page = new WebC();
+
+			if(componentsMap === false && options.components) {
+				componentsMap = WebC.getComponentsMap(options.components); // "./_includes/webc/*.webc"
+			}
+
+			page.defineComponents(componentsMap);
+			page.setContent(content, this.outputPath);
+
+			let { html } = await page.compile({
+				// global data
+				data: options.transformData
+			});
+			return html;
+		} catch(e) {
+			console.error( `[11ty/eleventy-plugin-webc] Error transforming ${this.inputPath}`, e );
+			throw e;
+		}
+
+		return content;
+	});
+}

package/src/incremental.js

@@ -20,12 +20,12 @@ class WebCIncremental {
 			this.globalComponentsMap = map;
 		}
 	}
-	
+
 	getComponentMap(glob) {
 		if(!this.webc) {
 			return false;
 		}
-		
+
 		let WebC = this.webc;
 		let components = WebC.getComponentsMap(glob);
 		// console.log( glob, Object.keys(components).length );
@@ -46,6 +46,16 @@ class WebCIncremental {
 	add(inputContent, inputPath) {
 		let WebC = this.webc;
 		let page = new WebC();
+
+		// Explicitly disable bundler mode for layouts
+		if(this.layouts && this.layouts[inputPath]) {
+			page.setBundlerMode(false);
+			page.setReprocessingMode(false);
+		} else {
+			page.setBundlerMode(true);
+			page.setReprocessingMode(true);
+		}
+
 		page.setContent(inputContent, inputPath);
 
 		if(this.globalComponentsMap) {
@@ -78,4 +88,4 @@ class WebCIncremental {
 	}
 }
 
-module.exports = WebCIncremental;
+module.exports = WebCIncremental;

package/test/sample-1/_layouts/layout.webc

@@ -1,17 +0,0 @@
-<!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 @html="this.getCSS(this.page.url)"></style>
-		<script @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>
-	</body>
-</html>

package/test/sample-1/eleventy.config.js

@@ -1,12 +0,0 @@
-const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
-
-module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyWebcPlugin);
-
-	return {
-		dir: {
-			includes: "_includes",
-			layouts: "_layouts",
-		}
-	}
-}

package/test/sample-1/page.webc

@@ -1,9 +0,0 @@
----
-frontmatterdata: "HELLO FROM FRONT MATTER"
-layout: layout.webc
----
-<say-hello></say-hello>
-<say-hello></say-hello>
-WHO IS THIS
-hi
-<span @html="this.frontmatterdata"></span>

package/test/sample-2/_includes/component.webc

@@ -1 +0,0 @@
-This is a component.

package/test/sample-2/_layouts/layout.webc

@@ -1,17 +0,0 @@
-<!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 @html="this.getCSS(this.page.url)"></style>
-		<script @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>
-	</body>
-</html>

package/test/sample-2/eleventy.config.js

@@ -1,15 +0,0 @@
-const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
-
-module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyWebcPlugin, {
-    components: "test/sample-2/_includes/**/*.webc"
-  });
-  // eleventyConfig.addPlugin(EleventyWebcPlugin);
-
-	return {
-		dir: {
-			includes: "_includes",
-			layouts: "_layouts",
-		}
-	}
-}

package/test/sample-2/page.webc

@@ -1,9 +0,0 @@
----
-frontmatterdata: "HELLO FROM FRONT MATTER"
-layout: layout.webc
----
-<component></component>
-<component></component>
-WHO IS THIS
-hi
-<span @html="this.frontmatterdata"></span>

package/test/sample-page-global-components/_includes/page1-components/say-hello.webc

@@ -1 +0,0 @@
-HELLO

package/test/sample-page-global-components/_layouts/layout.webc

@@ -1,17 +0,0 @@
-<!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 @html="this.getCSS(this.page.url)"></style>
-		<script @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>
-	</body>
-</html>

package/test/sample-page-global-components/eleventy.config.js

@@ -1,12 +0,0 @@
-const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
-
-module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyWebcPlugin);
-
-	return {
-		dir: {
-			includes: "_includes",
-			layouts: "_layouts",
-		}
-	}
-}

package/test/sample-page-global-components/page.webc

@@ -1,11 +0,0 @@
----
-frontmatterdata: "HELLO FROM FRONT MATTER"
-layout: layout.webc
-webc:
-  components: "~/test/sample-page-global-components/_includes/page1-components/*.webc"
----
-<say-hello></say-hello>
-<say-hello></say-hello>
-WHO IS THIS
-hi
-<span @html="this.frontmatterdata"></span>

package/test/sample-page-global-components-relative-to-inputpath/_includes/page1-components/say-hello.webc

@@ -1 +0,0 @@
-HELLO

package/test/sample-page-global-components-relative-to-inputpath/_layouts/layout.webc

@@ -1,17 +0,0 @@
-<!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 @html="this.getCSS(this.page.url)"></style>
-		<script @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>
-	</body>
-</html>

package/test/sample-page-global-components-relative-to-inputpath/eleventy.config.js

@@ -1,12 +0,0 @@
-const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
-
-module.exports = function (eleventyConfig) {
-	eleventyConfig.addPlugin(EleventyWebcPlugin);
-
-	return {
-		dir: {
-			includes: "_includes",
-			layouts: "_layouts",
-		}
-	}
-}

package/test/sample-page-global-components-relative-to-inputpath/page.webc

@@ -1,11 +0,0 @@
----
-frontmatterdata: "HELLO FROM FRONT MATTER"
-layout: layout.webc
-webc:
-  components: "./_includes/page1-components/*.webc"
----
-<say-hello></say-hello>
-<say-hello></say-hello>
-WHO IS THIS
-hi
-<span @html="this.frontmatterdata"></span>

package/test/test.js

@@ -1,131 +0,0 @@
-const test = require("ava");
-const Eleventy = require("@11ty/eleventy");
-
-test("Sample page", async t => {
-	let elev = new Eleventy("./test/sample-1/page.webc", "./test/sample-1/_site", {
-		configPath: "./test/sample-1/eleventy.config.js"
-	});
-
-	let results = await elev.toJSON();
-	let [result] = results;
-
-	t.is(result.content.trim(), `<!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></style>
-		<script></script>
-	</head>
-	<body>
-		<say-hello></say-hello>
-<say-hello></say-hello>
-WHO IS THIS
-hi
-<span>HELLO FROM FRONT MATTER</span>
-
-		<style></style>
-		<script></script>
-	
-</body>
-</html>`);
-});
-
-test("Sample page with global component", async t => {
-	let elev = new Eleventy("./test/sample-2/page.webc", "./test/sample-2/_site", {
-		configPath: "./test/sample-2/eleventy.config.js"
-	});
-
-	let results = await elev.toJSON();
-	let [result] = results;
-
-	t.is(result.content.trim(), `<!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></style>
-		<script></script>
-	</head>
-	<body>
-		This is a component.
-This is a component.
-WHO IS THIS
-hi
-<span>HELLO FROM FRONT MATTER</span>
-
-		<style></style>
-		<script></script>
-	
-</body>
-</html>`);
-});
-
-test("Page with front matter no-import components", async t => {
-	let elev = new Eleventy("./test/sample-page-global-components/page.webc", "./test/sample-page-global-components/_site", {
-		configPath: "./test/sample-page-global-components/eleventy.config.js"
-	});
-
-	let results = await elev.toJSON();
-	let [result] = results;
-
-	t.is(result.content.trim(), `<!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></style>
-		<script></script>
-	</head>
-	<body>
-		HELLO
-HELLO
-WHO IS THIS
-hi
-<span>HELLO FROM FRONT MATTER</span>
-
-		<style></style>
-		<script></script>
-	
-</body>
-</html>`);
-});
-
-
-test("Page with front matter no-import components (relative to input path)", async t => {
-	let elev = new Eleventy("./test/sample-page-global-components-relative-to-inputpath/page.webc", "./test/sample-page-global-components-relative-to-inputpath/_site", {
-		configPath: "./test/sample-page-global-components-relative-to-inputpath/eleventy.config.js"
-	});
-
-	let results = await elev.toJSON();
-	let [result] = results;
-
-	t.is(result.content.trim(), `<!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></style>
-		<script></script>
-	</head>
-	<body>
-		HELLO
-HELLO
-WHO IS THIS
-hi
-<span>HELLO FROM FRONT MATTER</span>
-
-		<style></style>
-		<script></script>
-	
-</body>
-</html>`);
-});