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

package/.editorconfig

@@ -0,0 +1,12 @@
+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

package/README.md

@@ -8,12 +8,9 @@ Adds support for [WebC, the single file web component format](https://github.com
 
 * 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.
+* Tired of importing components? Use our new global or per-page no-import components.
+* 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, you _can_ render any existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside of WebC.
 * Works great with out of the box with [is-land](https://www.11ty.dev/docs/plugins/partial-hydration/)
 
 ## ➡ [Documentation](https://www.11ty.dev/docs/languages/webc/)
@@ -29,17 +26,13 @@ Adds support for [WebC, the single file web component format](https://github.com
 
 ## Installation
 
-You’ve found this early! It’s not yet on npm.
+It’s on [npm at `@11ty/eleventy-plugin-webc`](https://www.npmjs.com/package/@11ty/eleventy-plugin-webc)!
 
-<!--
 ```
 npm install @11ty/eleventy-plugin-webc
 ```
--->
 
-## Usage
-
-Enable the plugin in your Eleventy configuration file:
+To add support for `.webc` files in Eleventy, add the plugin in your Eleventy configuration file:
 
 ```js
 const pluginWebc = require("@11ty/eleventy-plugin-webc");
@@ -49,7 +42,43 @@ module.exports = function(eleventyConfig) {
 };
 ```
 
-### Full options list
+<details>
+<summary><strong>Full options list</strong></summary>
+
+```js
+const pluginWebc = require("@11ty/eleventy-plugin-webc");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(pluginWebc, {
+		// Glob to find no-import global components
+		components: false,
+		// components: "_includes/components/**/*.webc",
+
+		// Adds an Eleventy WebC transform to process all HTML output
+		useTransform: false,
+
+		// Additional global data used in the Eleventy WebC transform
+		transformData: {},
+	});
+};
+```
+
+</details>
+
+### How to use it
+
+There are a few different ways to use WebC in Eleventy:
+
+1. Add a new `.webc` file to your Eleventy input directory
+1. Use the [Render plugin](https://www.11ty.dev/docs/plugins/render/) in an existing template
+1. Preprocess all HTML input as WebC
+1. Use the WebC Eleventy transform to process all of the HTML output (disabled by default)
+
+#### Add New `.webc` files
+
+Adding the plugin will enable support for `.webc` files in your Eleventy project. Just make a new `.webc` HTML file in your Eleventy input directory and Eleventy will process it for you! If you’re using [global components](#components), don’t forget to point the plugin to your components directory!
+
+Notably, `.webc` files will operate [WebC in bundler mode](https://github.com/11ty/webc#aggregating-css-and-js), [aggregating the CSS and JS](#css-and-js) in use on each individual page to create a bundle of the assets in use on the page.
 
 ```js
 const pluginWebc = require("@11ty/eleventy-plugin-webc");
@@ -57,7 +86,41 @@ 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`
+		components: "_includes/components/**/*.webc",
+	});
+};
+```
+
+#### Use the Render plugin
+
+Using Eleventy’s built-in [Render plugin](https://www.11ty.dev/docs/plugins/render/) with WebC also works great.
+
+Consider this example Nunjucks or Liquid template:
+
+```
+{% renderTemplate "webc" %}
+<my-custom-component></my-custom-component>
+{% endrenderTemplate %}
+```
+
+#### Preprocess all HTML input as WebC
+
+You can use the configuration option to change the default HTML preprocessor (from `liquid`) to `webc`. This might look like `htmlTemplateEngine: "webc"`. Read more on the [Eleventy documentation: Default Template Engine for HTML Files](https://www.11ty.dev/docs/config/#default-template-engine-for-html-files).
+
+#### Use the global WebC Eleventy transform
+
+This is a catch-all option to let WebC process _all_ `.html` output files in your project. [Read more about Eleventy transforms.](https://www.11ty.dev/docs/config/#transforms) This method is useful when you want to get up and running with WebC on an existing project quickly (but is also the slowest method for build-performance).
+
+The WebC Eleventy transform operates WebC in non-bundler mode, which means that it does process WebC but _does not_ aggregate JS or CSS on the page.
+
+The transform is disabled by default, you will need to add a configuration option to enable it:
+
+```js
+const pluginWebc = require("@11ty/eleventy-plugin-webc");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(pluginWebc, {
+		useTransform: true,
 	});
 };
 ```
@@ -116,8 +179,8 @@ layout: "my-layout.webc"
 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
+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).
 
@@ -125,9 +188,20 @@ Notably, WebC components are not restricted to the same naming limitations as cu
 
 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.
 
+```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",
+	});
+};
+```
+
 #### Specify no-import Components in the Data Cascade
 
-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:
+You can also use and configure specific components as part of the data cascade as well (scoped to a folder or a template) by assigning a glob (or array of globs) to `webc.components`, like so:
 
 `my-directory/my-page.webc`:
 
@@ -142,7 +216,7 @@ webc:
 
 * 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
+### CSS and JS (Bundler mode)
 
 [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.
 
@@ -233,32 +307,22 @@ You can also use this out of the box with Eleventy’s [`is-land` component for
 
 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>
-
-	<link rel="stylesheet" media="style/island" href="some-arbitrary-css.css">
-	<script type="module/island" src="some-arbitrary-js.js"></script>
+	<template data-island>
+		<!-- CSS -->
+		<style webc:keep>
+		/* This is on-visible CSS */
+		</style>
+		<link rel="stylesheet" href="some-arbitrary-css.css" webc:keep>
+
+		<!-- JS -->
+		<script type="module" webc:keep>
+		console.log("This is on-visible JavaScript");
+		</script>
+		<script type="module" src="some-arbitrary-js.js" webc:keep></script>
+	</template>
 </is-land>
 ```

package/eleventyWebcPlugin.js

@@ -1,23 +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;
-}
+const templatePlugin = require("./src/eleventyWebcTemplate.js");
+const transformPlugin = require("./src/eleventyWebcTransform.js");
 
 /* TODO
  * Use JavaScript functions or universal shortcodes as built-in components?
@@ -30,126 +13,26 @@ 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();
-	});
+	templatePlugin(eleventyConfig, options);
 
-	function getCss(pageUrl, bucket = "default") {
-		return cssManager.getForPage(pageUrl, bucket);
+	if(options.useTransform) {
+		transformPlugin(eleventyConfig, options);
 	}
-
-	function getJs(pageUrl, bucket = "default") {
-		return jsManager.getForPage(pageUrl, bucket);
-	}
-
-	// 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",
-
-		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;
-			};
-		}
-	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.3.1",
+	"version": "0.4.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.4.0"
 	},
 	"devDependencies": {
 		"ava": "^4.3.3"

package/src/eleventyWebcTemplate.js

@@ -0,0 +1,138 @@
+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);
+
+			// TODO add all universal filters/JavaScript functions as helpers here:
+
+			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;
+			};
+		}
+	});
+};

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

@@ -46,6 +46,7 @@ class WebCIncremental {
 	add(inputContent, inputPath) {
 		let WebC = this.webc;
 		let page = new WebC();
+		page.setBundlerMode(true);
 		page.setContent(inputContent, inputPath);
 
 		if(this.globalComponentsMap) {

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>`);
-});