@11ty/eleventy-plugin-bundle - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

BundleFileOutput.js

@@ -14,3 +14,3 @@ const fs = require("fs");
 		this.outputDirectory = outputDirectory;
-		this.bundleDirectory = bundleDirectory;
+		this.bundleDirectory = bundleDirectory || "";
 		this.hashLength = 10;
@@ -17,0 +17,0 @@ this.fileExtension = undefined;

codeManager.js

@@ -20,2 +20,3 @@ const BundleFileOutput = require("./BundleFileOutput");
 		this.fileExtension = undefined;
+		this.toFileDirectory = undefined;
 	}
@@ -31,2 +32,6 @@
 
+	setBundleDirectory(dir) {
+		this.toFileDirectory = dir;
+	}
+
 	reset() {
@@ -150,3 +155,3 @@ this.pages = {};
 
-		let { output, bundle, write } = options;
+		let { output, write } = options;
 
@@ -157,3 +162,3 @@ buckets = CodeManager.normalizeBuckets(buckets);
 		let content = await this.getForPage(pageData, buckets);
-		let writer = new BundleFileOutput(output, bundle);
+		let writer = new BundleFileOutput(output, this.toFileDirectory);
 		writer.setFileExtension(this.fileExtension);
@@ -160,0 +165,0 @@ return writer.writeBundle(content, this.name, write);

eleventy.bundle.js

@@ -37,9 +37,10 @@ const pkg = require("./package.json");
 		pluginOptions.bundles.forEach(name => {
-			let hoist = Array.isArray(pluginOptions.hoistDuplicateBundlesFor) && pluginOptions.hoistDuplicateBundlesFor.includes(name);
+			let isHoisting = Array.isArray(pluginOptions.hoistDuplicateBundlesFor) && pluginOptions.hoistDuplicateBundlesFor.includes(name);
 
 			eleventyConfig.addBundle(name, {
-				hoist,
+				hoist: isHoisting,
 				outputFileExtension: name, // default as `name`
 				shortcodeName: name, // `false` will skip shortcode
 				transforms: pluginOptions.transforms,
+				toFileDirectory: pluginOptions.toFileDirectory,
 			});
@@ -46,0 +47,0 @@ });

eleventy.bundleManagers.js

@@ -29,2 +29,6 @@
 
+			if(bundleOptions.toFileDirectory) {
+				managers[name].setBundleDirectory(bundleOptions.toFileDirectory);
+			}
+
 			if(bundleOptions.transforms) {
@@ -41,5 +45,7 @@ managers[name].setTransforms(bundleOptions.transforms);
 			// These shortcode names are not configurable on purpose (for wider plugin compatibility)
-			eleventyConfig.addPairedShortcode(shortcodeName, function addContent(content, bucket, urlOverride) {
-				let url = urlOverride || this.page.url;
-				managers[name].addToPage(url, content, bucket);
+			eleventyConfig.addPairedShortcode(shortcodeName, function addContent(content, bucket, explicitUrl) {
+				let url = explicitUrl || this.page?.url;
+				if(url) { // don’t add if a file doesn’t have an output URL
+					managers[name].addToPage(url, content, bucket);
+				}
 				return "";
@@ -46,0 +52,0 @@ });

eleventy.shortcodes.js

@@ -25,3 +25,3 @@ const OutOfOrderRender = require("./outOfOrderRender.js");
 	// This shortcode name is not configurable on purpose (for wider plugin compatibility)
-	eleventyConfig.addShortcode("getBundle", function getContent(type, bucket) {
+	eleventyConfig.addShortcode("getBundle", function getContent(type, bucket, explicitUrl) {
 		if(!type || !(type in managers) || Object.keys(managers).length === 0) {
@@ -31,4 +31,5 @@ throw new Error(`Invalid bundle type: ${type}. Available options: ${Object.keys(managers)}`);
 
-		if(this.page.url) {
-			pagesUsingBundles[this.page.url] = true;
+		let url = explicitUrl || this.page?.url;
+		if(url) {
+			pagesUsingBundles[url] = true;
 		}
@@ -41,3 +42,3 @@
 	// This shortcode name is not configurable on purpose (for wider plugin compatibility)
-	eleventyConfig.addShortcode("getBundleFileUrl", function(type, bucket) {
+	eleventyConfig.addShortcode("getBundleFileUrl", function(type, bucket, explicitUrl) {
 		if(!type || !(type in managers) || Object.keys(managers).length === 0) {
@@ -47,4 +48,5 @@ throw new Error(`Invalid bundle type: ${type}. Available options: ${Object.keys(managers)}`);
 
-		if(this.page.url) {
-			pagesUsingBundles[this.page.url] = true;
+		let url = explicitUrl || this.page?.url;
+		if(url) {
+			pagesUsingBundles[url] = true;
 		}
@@ -76,4 +78,3 @@
 
-		render.setOutputDirectory(eleventyConfig.dir.output);
-		render.setBundleDirectory(pluginOptions.toFileDirectory);
+		render.setOutputDirectory(eleventyConfig.directories.output);
 		render.setWriteToFileSystem(writeToFileSystem);
@@ -80,0 +81,0 @@

outOfOrderRender.js

@@ -34,6 +34,2 @@ const debug = require("debug")("Eleventy:Bundle");
 
-	setBundleDirectory(dir) {
-		this.bundleDirectory = dir;
-	}
-
 	normalizeMatch(match) {
@@ -134,3 +130,2 @@ if(match.startsWith("/*__EleventyBundle:")) {
 					output: this.outputDirectory,
-					bundle: this.bundleDirectory,
 					write: this.writeToFileSystem,
@@ -137,0 +132,0 @@ });

package.json

 {
 	"name": "@11ty/eleventy-plugin-bundle",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Little bundles of code, little bundles of joy.",
@@ -5,0 +5,0 @@ "main": "eleventy.bundle.js",

README.md

@@ -19,40 +19,42 @@ # eleventy-plugin-bundle
 
-It’s available on [npm as `@11ty/eleventy-plugin-bundle`](https://www.npmjs.com/package/@11ty/eleventy-plugin-bundle):
+No installation necessary. Starting with Eleventy `v3.0.0-alpha.10` and newer, this plugin is now bundled with Eleventy.
 
-```
-npm install @11ty/eleventy-plugin-bundle
-```
+## Usage
 
-And then in your Eleventy configuration file (probably `.eleventy.js`):
+By default, Bundle Plugin v2.0 does not include any default bundles. You must add these yourself via `eleventyConfig.addBundle`. One notable exception happens when using the WebC Eleventy Plugin, which adds `css`, `js`, and `html` bundles for you.
 
+To create a bundle type, use `eleventyConfig.addBundle` in your Eleventy configuration file (default `.eleventy.js`):
+
 ```js
-const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
-
+// .eleventy.js
 module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(bundlerPlugin);
+	eleventyConfig.addBundle("css");
 };
 ```
 
-<details>
-<summary><strong>Full options list</strong></summary>
+This does two things:
 
-And then in your Eleventy configuration file (probably `.eleventy.js`):
+1. Creates a new `css` shortcode for adding arbitrary code to this bundle
+2. Adds `"css"` as an eligible type argument to the `getBundle` and `getBundleFileUrl` shortcodes.
 
+### Full options list
+
 ```js
-const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
-
 module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(bundlerPlugin, {
-		// Folder (in the output directory) bundle files will write to:
+	eleventyConfig.addBundle("css", {
+		// Optional, folder (relative to output directory) files will write to:
 		toFileDirectory: "bundle",
 
-		// Extra bundle names ("css", "js", "html" are guaranteed)
-		bundles: [],
+		// Optional, defaults to bundle name
+		outputFileExtension: "css",
 
-		// Array of async-friendly callbacks to transform bundle content.
-		// Works with getBundle and getBundleFileUrl
+		// Optional, defaults to bundle name
+		shortcodeName: "css",
+		// shortcodeName: false, // don’t add a shortcode.
+
+		// Optional, modify bundle content
 		transforms: [],
 
-		// Array of bundle names eligible for duplicate bundle hoisting
-		hoistDuplicateBundlesFor: [], // e.g. ["css", "js"]
+		// Optional (advanced): if two identical code blocks exist in non-default buckets, they’ll be hoisted to the first bucket in common.
+		hoist: true,
 	});
@@ -62,16 +64,14 @@ };
 
-Read more about [`hoistDuplicateBundlesFor` and duplicate bundle hoisting](https://github.com/11ty/eleventy-plugin-bundle/issues/5).
+Read more about [`hoist` and duplicate bundle hoisting](https://github.com/11ty/eleventy-plugin-bundle/issues/5).
 
-</details>
+### Universal Shortcodes
 
-## Usage
-
 The following Universal Shortcodes (available in `njk`, `liquid`, `hbs`, `11ty.js`, and `webc`) are provided by this plugin:
 
-* `css`, `js`, and `html` to add code to a bundle.
-* `getBundle` and `getBundleFileUrl` to get bundled code.
+* `getBundle` to retrieve bundled code as a string.
+* `getBundleFileUrl` to create a bundle file on disk and retrieve the URL to that file.
 
 Here’s a [real-world commit showing this in use on the `eleventy-base-blog` project](https://github.com/11ty/eleventy-base-blog/commit/c9595d8f42752fa72c66991c71f281ea960840c9?diff=split).
 
-### Add bundle code in a Markdown file in Eleventy
+### Example: Add bundle code in a Markdown file in Eleventy
 
@@ -106,2 +106,4 @@ ```md
 
+_There are a few [more examples below](#examples)!_
+
 ### Render bundle code
@@ -159,2 +161,9 @@
 
+```js
+// .eleventy.js
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addBundle("css");
+};
+```
+
 Use asset bucketing to divide CSS between the `default` bucket and a `defer` bucket, loaded asynchronously.
@@ -192,13 +201,20 @@
 
-Here `svg` is an asset bucket on the `html` bundle.
+Here an `svg` is bundle is created.
 
+```js
+// .eleventy.js
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addBundle("svg");
+};
+```
+
 ```html
 <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
-	<defs>{% getBundle "html", "svg" %}</defs>
+	<defs>{% getBundle "svg" %}</defs>
 </svg>
 
 <!-- And anywhere on your page you can add icons to the set -->
-{% html "svg" %}
+{% svg %}
 <g id="icon-close"><path d="…" /></g>
-{% endhtml %}
+{% endsvg %}
 
@@ -215,2 +231,9 @@ And now you can use `icon-close` in as many SVG instances as you’d like (without repeating the heftier SVG content).
 
+```js
+// .eleventy.js
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addBundle("html");
+};
+```
+
 This might exist in an Eleventy layout file:
@@ -268,3 +291,3 @@
 	* For consistency, you may prefer using the bundle plugin method names everywhere: `<style @raw="getBundle('css')">` and `<script @raw="getBundle('js')">` both work fine.
-* Outside of WebC, the [Universal Filters `webcGetCss` and `webcGetJs`](https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode)) were available to access CSS and JS bundles but are considered deprecated in favor of the `getBundle` Universal Shortcode (`{% getBundle "css" %}` and `{% getBundle "js" %}` respectively).
+* Outside of WebC, the Universal Filters `webcGetCss` and `webcGetJs` were removed in Eleventy `v3.0.0-alpha.10` in favor of the `getBundle` Universal Shortcode (`{% getBundle "css" %}` and `{% getBundle "js" %}` respectively).
 
@@ -276,3 +299,2 @@ #### Modify the bundle output
 ```js
-const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
 const postcss = require("postcss");
@@ -282,13 +304,9 @@ const postcssNested = require("postcss-nested");
 module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(bundlerPlugin, {
+	eleventyConfig.addBundle("css", {
 		transforms: [
 			async function(content) {
 				// this.type returns the bundle name.
-				if (this.type === 'css') {
-					// Same as Eleventy transforms, this.page is available here.
-					let result = await postcss([postcssNested]).process(content, { from: this.page.inputPath, to: null });
-					return result.css;
-				}
-
-				return content;
+				// Same as Eleventy transforms, this.page is available here.
+				let result = await postcss([postcssNested]).process(content, { from: this.page.inputPath, to: null });
+				return result.css;
 			}
@@ -300,28 +318,4 @@ ]
 
-#### Bundling on the [Edge](https://www.11ty.dev/docs/plugins/edge/)
+## Advanced
 
-_Coming soon_
-
-## Advanced options:
-
-
-### Add your own bundle type
-
-If you’d like to add your own bundle types (in addition to the guaranteed types: `css`, `js`, and `html`), you can do so:
-
-```js
-const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
-
-module.exports = function(eleventyConfig) {
-	eleventyConfig.addPlugin(bundlerPlugin, {
-		bundles: ["possum"]
-	});
-};
-```
-
-This does two things:
-
-1. creates a new `possum` shortcode for adding arbitrary code to this bundle
-2. adds `"possum"` as an eligible type argument to `getBundle` and `getBundleFileUrl`
-
 ### Limitations
@@ -328,0 +322,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29759

increased by0.28%

Lines of code

497

increased by1.43%

Worsened metrics

Number of lines in readme file

333

decreased by-1.77%

No dependency changes