Use eleventy-plugin-bundle internally

eleventyWebcPlugin.js

@@ -1,3 +1,4 @@
+const eleventyBundlePlugin = require("@11ty/eleventy-plugin-bundle");
 const pkg = require("./package.json");
 const templatePlugin = require("./src/eleventyWebcTemplate.js");
 const transformPlugin = require("./src/eleventyWebcTransform.js");
@@ -9,6 +10,7 @@ module.exports = function(eleventyConfig, options = {}) {
 		console.log( `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` );
 	}
 
+	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
 	let filters = Object.assign({
 		css: "webcGetCss",
 		js: "webcGetJs",
@@ -20,6 +22,7 @@ module.exports = function(eleventyConfig, options = {}) {
 		transformData: {}, // extra global data for transforms specifically
 	}, options);
 
+	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
 	options.filters = filters;
 
 	if(options.components) {
@@ -33,6 +36,13 @@ module.exports = function(eleventyConfig, options = {}) {
 		eleventyConfig.ignores.add(options.components);
 	}
 
+	// TODO Remove this when @11ty/eleventy-plugin-bundle is moved to core.
+	// If the bundle plugin has not been added, we add it here:
+	let bundlePlugin = eleventyConfig.plugins.find(entry => entry.plugin.eleventyPackage === "@11ty/eleventy-plugin-bundle");
+	if(!bundlePlugin) {
+		eleventyConfig.addPlugin(eleventyBundlePlugin);
+	}
+
 	templatePlugin(eleventyConfig, options);
 
 	if(options.useTransform) {

package.json

@@ -38,7 +38,8 @@
 		]
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^2.0.0-canary.19",
+		"@11ty/eleventy": "2.0.0-beta.3",
+		"@11ty/eleventy-plugin-bundle": "^1.0.1",
 		"@11ty/webc": "^0.8.0"
 	},
 	"devDependencies": {

src/eleventyWebcTemplate.js

@@ -3,9 +3,6 @@ const path = require("path");
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const CompileString = EleventyRenderPlugin.String;
 
-const CodeManager = require("./codeManager.js");
-const BundleAssetsToContent = require("./bundleAssets.js");
-
 function relativePath(inputPath, newGlob) {
 	// project root
 	if(newGlob.startsWith("~/")) {
@@ -20,19 +17,14 @@ function relativePath(inputPath, newGlob) {
 }
 
 module.exports = function(eleventyConfig, options = {}) {
+	// TODO remove this when WebC is moved out of plugin-land into core.
 	eleventyConfig.addTemplateFormats("webc");
 
-	let cssManager = new CodeManager();
-	let jsManager = new CodeManager();
-
 	let _WebC;
 	let componentsMap = false; // cache the glob search
 	let moduleScript;
 
 	eleventyConfig.on("eleventy.before", async () => {
-		cssManager.reset();
-		jsManager.reset();
-
 		// For ESM in CJS
 		let { WebC, ModuleScript } = await import("@11ty/webc");
 		moduleScript = ModuleScript;
@@ -43,22 +35,18 @@ module.exports = function(eleventyConfig, options = {}) {
 		}
 	});
 
-	// Expose bundled CSS code to other template languages
+	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
 	if(options.filters.css) {
-		function getCss(pageUrl, bucket = "default") {
-			return cssManager.getForPage(pageUrl, bucket);
-		}
-
-		eleventyConfig.addFilter(options.filters.css, (url, bucket) => getCss(url, bucket));
+		eleventyConfig.addFilter(options.filters.css, (url, bucket) => {
+			return eleventyConfig.javascriptFunctions.getBundle("css", bucket);
+		});
 	}
 
-	// Expose bundled JS code to other template languages
+	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
 	if(options.filters.js) {
-		function getJs(pageUrl, bucket = "default") {
-			return jsManager.getForPage(pageUrl, bucket);
-		}
-
-		eleventyConfig.addFilter(options.filters.js, (url, bucket) => getJs(url, bucket));
+		eleventyConfig.addFilter(options.filters.js, (url, bucket) => {
+			return eleventyConfig.javascriptFunctions.getBundle("js", bucket)
+		});
 	}
 
 	eleventyConfig.addExtension("webc", {
@@ -85,17 +73,17 @@ module.exports = function(eleventyConfig, options = {}) {
 				page.defineComponents(componentsMap);
 			}
 
-			// Add Eleventy JavaScript Functions as WebC helpers (Universal Filters also populate into these)
+			// Add Eleventy JavaScript Functions as WebC helpers (Universal Filters and Shortcodes 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) => BundleAssetsToContent.getAssetKey("css", bucket));
-			page.setHelper("getCSS", (url, bucket) => BundleAssetsToContent.getAssetKey("css", bucket));
+			page.setHelper("getCss", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket));
+			page.setHelper("getCSS", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket));
 
-			page.setHelper("getJs", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
-			page.setHelper("getJS", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
+			page.setHelper("getJs", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
+			page.setHelper("getJS", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
 
 			page.setTransform("11ty", async function(content) {
 				let syntax = this["11ty:type"];
@@ -126,30 +114,25 @@ module.exports = function(eleventyConfig, options = {}) {
 				// 2.0.0-canary.19+
 				this.addDependencies(inputPath, components);
 
-				cssManager.addToPage(data.page.url, css, "default");
+				// Add CSS to bundle
+				this.config.javascriptFunctions.css(css, "default", data.page.url);
 
 				if(buckets.css) {
 					for(let bucket in buckets.css) {
-						cssManager.addToPage(data.page.url, buckets.css[bucket], bucket);
+						this.config.javascriptFunctions.css(css, buckets.css[bucket], data.page.url);
 					}
 				}
 
-				jsManager.addToPage(data.page.url, js, "default");
+				// Add JS to bundle
+				this.config.javascriptFunctions.js(js, "default", data.page.url);
 
 				if(buckets.js) {
 					for(let bucket in buckets.js) {
-						jsManager.addToPage(data.page.url, buckets.js[bucket], bucket);
+						this.config.javascriptFunctions.js(js, buckets.js[bucket], data.page.url);
 					}
 				}
 
-				// Always do a two pass render for assets to catch any CSS/JS that were compiled *in* the same template.
-				// https://github.com/11ty/eleventy-plugin-webc/issues/33
-				// This unlocks use of bundled asset code anywhere in the WebC component tree (not just Eleventy Layouts)
-				let bundler = new BundleAssetsToContent(html);
-				bundler.setAssetManager("css", cssManager);
-				bundler.setAssetManager("js", jsManager);
-
-				return bundler.replaceAll(data.page.url);
+				return html;
 			};
 		}
 	});

test/bundler-helpers/eleventy.config.js

@@ -0,0 +1,5 @@
+const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addPlugin(EleventyWebcPlugin);
+}

test/bundler-helpers/index.webc

@@ -0,0 +1,6 @@
+<style>/* Bundle 1 */</style>
+<template webc:type="11ty" 11ty:type="liquid">
+{% css %}/* Bundle 2 */{% endcss %}
+</template>
+<style @raw="getCss(page.url)" webc:keep></style>
+<style @raw="getBundle('css')" webc:keep></style>

test/test.js

@@ -408,3 +408,18 @@ t.is(normalize(page3.content), `No layouts here
 <outer>Test
 </outer>`);
 });
+
+
+test("Helpers in the bundler", async t => {
+	let elev = new Eleventy("./test/bundler-helpers/index.webc", "./test/bundler-helpers/_site", {
+		configPath: "./test/bundler-helpers/eleventy.config.js"
+	});
+
+	let results = await elev.toJSON();
+	let [result] = results;
+
+	t.is(normalize(result.content), `<style>/* Bundle 2 */
+/* Bundle 1 */</style>
+<style>/* Bundle 2 */
+/* Bundle 1 */</style>`);
+});