@11ty/eleventy-plugin-webc 0.3.1

package/.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+on: push
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: ["ubuntu-latest", "macos-latest", "windows-latest"]
+        node: ["14", "16", "18"]
+    name: Node.js ${{ matrix.node }} on ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          # cache: npm
+      - run: npm install
+      - run: npm test
+env:
+  YARN_GPG: no

package/README.md

@@ -0,0 +1,264 @@
+<p align="center"><img src="https://www.11ty.dev/img/logo-github.svg" width="200" height="200" alt="11ty Logo"></p>
+
+# eleventy-plugin-webc 🕚⚡️🎈🐀
+
+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/)
+
+## ➡ [Documentation](https://www.11ty.dev/docs/languages/webc/)
+
+- Please 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.
+
+#### 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:
+
+`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>
+
+	<link rel="stylesheet" media="style/island" href="some-arbitrary-css.css">
+	<script type="module/island" src="some-arbitrary-js.js"></script>
+</is-land>
+```

package/eleventyWebcPlugin.js

@@ -0,0 +1,155 @@
+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?
+ */
+
+module.exports = function(eleventyConfig, options = {}) {
+	try {
+		eleventyConfig.versionCheck(pkg["11ty"].compatibility);
+	} catch(e) {
+		console.log( `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` );
+	}
+
+	options = Object.assign({
+		components: false, // glob for no-import global components
+	}, options);
+
+	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
+	// 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

@@ -0,0 +1,47 @@
+{
+	"name": "@11ty/eleventy-plugin-webc",
+	"version": "0.3.1",
+	"description": "WebC support for Eleventy adds for Single File Web Components",
+	"main": "eleventyWebcPlugin.js",
+	"scripts": {
+		"test": "npx ava"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"license": "MIT",
+	"engines": {
+		"node": ">=14.18"
+	},
+  "11ty": {
+    "compatibility": ">=2.0.0-canary.16"
+  },
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/11ty"
+	},
+	"keywords": [
+		"eleventy",
+		"eleventy-plugin",
+		"web-components",
+		"custom-elements"
+	],
+	"author": {
+		"name": "Zach Leatherman",
+		"email": "zachleatherman@gmail.com",
+		"url": "https://zachleat.com/"
+	},
+	"ava": {
+		"failFast": true,
+		"files": [
+			"./test/*.js"
+		]
+	},
+	"dependencies": {
+		"@11ty/eleventy": "^2.0.0-canary.16",
+		"@11ty/webc": "^0.3.1"
+	},
+	"devDependencies": {
+		"ava": "^4.3.3"
+	}
+}

package/src/codeManager.js

@@ -0,0 +1,33 @@
+class Manager {
+	constructor() {
+		this.reset();
+	}
+
+	reset() {
+		this.pages = {};
+	}
+
+	addToPage(pageUrl, code = [], bucket = "default") {
+		if(code.length === 0) {
+			return;
+		}
+
+		if(!this.pages[pageUrl]) {
+			this.pages[pageUrl] = {};
+		}
+		if(!this.pages[pageUrl][bucket]) {
+			this.pages[pageUrl][bucket] = new Set();
+		}
+
+		this.pages[pageUrl][bucket].add(code.join("\n"));
+	}
+
+	getForPage(pageUrl, bucket = "default") {
+		if(this.pages[pageUrl]) {
+			return Array.from(this.pages[pageUrl][bucket] || []).join("\n");
+		}
+		return "";
+	}
+}
+
+module.exports = Manager;

package/src/incremental.js

@@ -0,0 +1,81 @@
+class WebCIncremental {
+	constructor() {
+		this.pages = {};
+		this.setups = {};
+		this.globalComponentsMap = false;
+		this.components = {};
+	}
+
+	setWebC(cls) {
+		this.webc = cls;
+	}
+
+	needsComponents() {
+		return this.globalComponentsMap === false;
+	}
+
+	setComponents(glob) {
+		let map = this.getComponentMap(glob);
+		if(map) {
+			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 );
+		return components;
+	}
+
+	setLayouts(layouts) {
+		this.layouts = layouts;
+	}
+
+	isTemplateUsingLayout(templateFilePath, layoutFilePath) {
+		if(this.layouts && this.layouts[layoutFilePath] && this.layouts[layoutFilePath].includes(templateFilePath)) {
+			return true;
+		}
+		return false;
+	}
+
+	add(inputContent, inputPath) {
+		let WebC = this.webc;
+		let page = new WebC();
+		page.setContent(inputContent, inputPath);
+
+		if(this.globalComponentsMap) {
+			page.defineComponents(this.globalComponentsMap);
+		}
+
+		this.pages[inputPath] = page;
+
+		return page;
+	}
+
+	addSetup(inputPath, setup) {
+		this.setups[inputPath] = setup;
+		this.components[inputPath] = setup.serializer.components;
+	}
+
+	get(inputPath) {
+		let setup = this.setups[inputPath];
+		let components = this.components[inputPath];
+
+		if(setup && components) {
+			setup.serializer.restorePreparsedComponents(components);
+		}
+
+		return {
+			page: this.pages[inputPath],
+			setup,
+			components,
+		}
+	}
+}
+
+module.exports = WebCIncremental;

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

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

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

package/test/sample-1/page.webc

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,131 @@
+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>`);
+});