assets-esbuild

Note: The options API is still evolving; expect tweaks as the project grows.

What it does

• Adds js as a template format and processes any index.js under the resolved assets js directory (from Eleventy dir.assets).
• Bundles with esbuild (default target es2020, minify on) and outputs JS.
• Skips 11tydata.js files and other JS outside the assets entry.
• Overrides the default all collection to exclude 11tydata.js.
• Registers a filter inlineESbuild to inline and bundle arbitrary JS files.

Defaults

• Entries: any index.js file under <input>/<assets>/js/ (including nested folders).
• Bundle/minify with esbuild, target es2020.
• Options: minify (default true) and target (default "es2020"); pass them via Baseline assetsESBuild options or directly to the plugin.
• Peer deps: esbuild (already included in this starter).
• Output: under dist/assets/js/ (matching Eleventy dir.assets and dir.output).

Options

• minify: forward to esbuild’s minify flag.
• target: forward to esbuild’s target.
• inlineESbuild filter also accepts an optional options object per call (merged with defaults).

Example:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(
		baseline({
			assetsESBuild: {
				minify: process.env.ELEVENTY_ENV === 'production',
				target: 'es2017'
			}
		})
	);
}

export const config = baselineConfig;

How it works

• Resolves the assets directory from Eleventy dir and builds jsDir from it.
• Registers js format and an extension handler that runs for index.js under the resolved assets js directory.
• Runs esbuild with { bundle: true, write: false } plus the configured minify and target, returns compiled text.
• Replaces the default all collection with one that filters out 11tydata.js.

Inlining a bundle

• Any JS file can be inlined with inlineESbuild; the filter bundles the exact file you pass (not limited to assets dir).
• In a template or Markdown file, build the path (e.g., from _baseline.assets.input) and pipe it through inlineESbuild.
• In Markdown, keep the call unindented and on its own lines so the <script> is treated as raw HTML.

Example:

{% set jsPath = _baseline.assets.input ~ "js/inline-example.js" %}
{{ jsPath | inlineESbuild({ minify: false, target: "es2017" }) | safe }}

Tips

• Any nested index.js under the assets js directory will be bundled; keep only the entries you intend to ship.
• Pair with inlineESbuild filter if you want to inline the bundled output in templates.
• See the “Assets Pipeline” tutorial for an end-to-end example.
• Tutorial: Assets Pipeline Quickstart