From 78e9f186e018ef3db96dbcb8dddd2122f6dcfa1b Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 10 Feb 2023 15:59:53 -0600 Subject: [PATCH] Use eleventy-plugin-bundle internally --- eleventyWebcPlugin.js | 10 +++ package.json | 3 +- src/bundleAssets.js | 50 --------------- src/codeManager.js | 33 ---------- src/eleventyWebcTemplate.js | 59 +++++++---------- test/bundler-helpers/eleventy.config.js | 5 ++ test/bundler-helpers/index.webc | 6 ++ test/test-bundle-assets.js | 84 ------------------------- test/test.js | 15 +++++ 9 files changed, 59 insertions(+), 206 deletions(-) delete mode 100644 src/bundleAssets.js delete mode 100644 src/codeManager.js create mode 100644 test/bundler-helpers/eleventy.config.js create mode 100644 test/bundler-helpers/index.webc delete mode 100644 test/test-bundle-assets.js diff --git a/eleventyWebcPlugin.js b/eleventyWebcPlugin.js index 2c5e2e9..1608304 100644 --- a/eleventyWebcPlugin.js +++ b/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) { diff --git a/package.json b/package.json index e855cf1..2832447 100644 --- a/package.json +++ b/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": { diff --git a/src/bundleAssets.js b/src/bundleAssets.js deleted file mode 100644 index 4ca3dc2..0000000 --- a/src/bundleAssets.js +++ /dev/null @@ -1,50 +0,0 @@ -class BundleAssetsToContent { - static SPLIT_REGEX = /(\/\*__WebC:[^:]*:[^:]*:WebC__\*\/)/; - static SEPARATOR = ":"; - - constructor(content) { - this.content = content; - this.managers = {}; - } - - static getAssetKey(name, bucket) { - return `/*__WebC:${name}:${bucket || "default"}:WebC__*/` - } - - setAssetManager(name, assetManager) { - this.managers[name] = assetManager; - } - - normalizeMatch(match) { - if(match.startsWith("/*__WebC:")) { - let [prefix, name, bucket, suffix] = match.split(BundleAssetsToContent.SEPARATOR); - return { name, bucket }; - } - return match; - } - - findAll() { - let matches = this.content.split(BundleAssetsToContent.SPLIT_REGEX); - let ret = []; - for(let match of matches) { - ret.push(this.normalizeMatch(match)); - } - return ret; - } - - replaceAll(url) { - let matches = this.findAll(); - return matches.map(match => { - if(typeof match === "string") { - return match; - } - let {name, bucket} = match; - if(!this.managers[name]) { - throw new Error(`No asset manager found for ${name}. Known keys: ${Object.keys(this.managers)}`); - } - return this.managers[name].getForPage(url, bucket); - }).join(""); - } -} - -module.exports = BundleAssetsToContent; diff --git a/src/codeManager.js b/src/codeManager.js deleted file mode 100644 index dd72889..0000000 --- a/src/codeManager.js +++ /dev/null @@ -1,33 +0,0 @@ -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; diff --git a/src/eleventyWebcTemplate.js b/src/eleventyWebcTemplate.js index 2380fe0..8a03bc5 100644 --- a/src/eleventyWebcTemplate.js +++ b/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; }; } }); diff --git a/test/bundler-helpers/eleventy.config.js b/test/bundler-helpers/eleventy.config.js new file mode 100644 index 0000000..bd0f458 --- /dev/null +++ b/test/bundler-helpers/eleventy.config.js @@ -0,0 +1,5 @@ +const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js"); + +module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(EleventyWebcPlugin); +} diff --git a/test/bundler-helpers/index.webc b/test/bundler-helpers/index.webc new file mode 100644 index 0000000..b077ede --- /dev/null +++ b/test/bundler-helpers/index.webc @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/test/test-bundle-assets.js b/test/test-bundle-assets.js deleted file mode 100644 index 5e4a996..0000000 --- a/test/test-bundle-assets.js +++ /dev/null @@ -1,84 +0,0 @@ -const test = require("ava"); -const BundleAssetsToContent = require("../src/bundleAssets.js"); -const CodeManager = require("../src/codeManager.js"); - -test("getAssetKey", t => { - t.is(BundleAssetsToContent.getAssetKey("css", "default"), "/*__WebC:css:default:WebC__*/"); -}); - -test("findAll Empty", t => { - let b = new BundleAssetsToContent("BeforeAfter"); - t.deepEqual(b.findAll(), ["BeforeAfter"]) -}); - -test("findAll Single", t => { - let b = new BundleAssetsToContent(`Before${BundleAssetsToContent.getAssetKey("css", "default")}After`); - t.deepEqual(b.findAll(), [ - "Before", - { - name: "css", - bucket: "default" - }, - "After" - ]); -}); - -test("findAll Double", t => { - let key1 = BundleAssetsToContent.getAssetKey("css", "default"); - let key2 = BundleAssetsToContent.getAssetKey("js", "default"); - - let b = new BundleAssetsToContent(`Before${key1}Middle${key2}After`); - t.deepEqual(b.findAll(), [ - "Before", - { - name: "css", - bucket: "default" - }, - "Middle", - { - name: "js", - bucket: "default" - }, - "After" - ]); -}); - -test("findAll Triple", t => { - let key1 = BundleAssetsToContent.getAssetKey("css", "default"); - let key2 = BundleAssetsToContent.getAssetKey("css", "defer"); - let key3 = BundleAssetsToContent.getAssetKey("js", "default"); - - let b = new BundleAssetsToContent(`Before${key1}Middle${key2}Yawn${key3}After`); - t.deepEqual(b.findAll(), [ - "Before", - { - name: "css", - bucket: "default" - }, - "Middle", - { - name: "css", - bucket: "defer" - }, - "Yawn", - { - name: "js", - bucket: "default" - }, - "After" - ]); -}); - -test("replaceAll", t => { - let bucket = "default"; - let mgr = new CodeManager(); - mgr.addToPage("/page/", [`p { color: blue; }`], bucket); - mgr.addToPage("/", [`p { color: red; }`], bucket); - - let b = new BundleAssetsToContent(``); - b.setAssetManager("css", mgr); - - t.is(b.replaceAll("/page/"), ``); - t.is(b.replaceAll("/"), ``); - t.is(b.replaceAll("/non-existent/"), ``); -}); diff --git a/test/test.js b/test/test.js index 9bac51e..424f763 100644 --- a/test/test.js +++ b/test/test.js @@ -408,3 +408,18 @@ t.is(normalize(page3.content), `No layouts here Test `); }); + + +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), ` +`); +});