Fixes #3424, conflicts with existing id attributes from IdAttributePlugin

[zachleat]

Automatically resolve conflicts with other elements on the page that have an id attribute.

Conflict resolution example 1

<div id="testing"></div>
<h1>Testing</h1>

becomes

<div id="testing"></div>
<h1 id="testing-2">Testing</h1>

Conflict resolution example 2

<h1>Testing</h1>
<div id="testing"></div>

becomes

<h1 id="testing-2">Testing</h1>
<div id="testing"></div>

Filter callback

Also adds a filter callback option to IdAttributePlugin per requested at #3424.

eleventyConfig.addPlugin(IdAttributePlugin, {
	filter: function({ page }) {
		if(page.inputPath.endsWith("test-skipped.html")) {
			return false;
		}
		return true;
	}
});

[zachleat]

Ships with 3.0.0-beta.2 and 3.0.0-alpha.19

[vrugtehagel]

Note; with this solution it is still unsafe to add the plugin to an existing codebase, since it can rename elements that have an specific id (and might be relied upon by styles or scripts) if they come after a header that receives the same id.

[zachleat]

Yeah, tried to communicate that with the warning above.

To workaround that limitation would require a two-pass algorithm to find all existing id attributes up front. Might it be better to throw an error rather than rename any existing id?

[zachleat]

I wonder if a better option is to allow a prefix option to add to any assigned heading ids to further mitigate conflicts

[zachleat]

Ah, nevermind—I found an approach that avoids two-pass and doesn’t rename existing ids!

[zachleat]

I updated the examples in the first comment to reflect the new logic. Existing id attributes in your markup are not modified.

[vrugtehagel]

Thanks a bunch!