• Breaking Change affects <is-land autoinit>: Removes autoinit attribute and the is-land-autoinit.js file. Switch to use framework initialization types (via Island.addInitType()) instead (see sample code below).
• Broadens browser support (thank you @vanarok in #21) and adds (cut the mustard-style) feature test:
  • v5.0.0 supports Chrome 71, Firefox 65, Safari 12.1
  • v4.0.0 supports Chrome 88, Firefox 78, Safari 14
• Brotli compressed file size stats: v4.0.0 at 1.61 kB to v5.0.0 at 1.83 kB
• Very large performance gains when using on:idle, on:media, or on:load conditions.
• Fixes bug with node restoration order when renaming (should be inner -> outer for renames, outer -> inner for original names) causing multiple connectedCallbacks fired on custom elements. Complex Nested is-lands demo
• Use passive event listeners with on:interaction to improve scrolling performance (fixes Lighthouse warning) #20
• Adds import attribute support to core plugin (was previously in is-land-autoinit.js)
• Register your own framework initialization types using Island.addInitType() and islands must match the appropriate name in the <is-land type> attribute — examples provided for alpine, petite-vue (see below), vue, vue-ssr, preact, preact-ssr, svelte, or svelte-ssr (Web Components and lit are supported out of the box).
  • Notably when using type and import (e.g. <is-land type import>) import attribute targets are not loaded automatically for you:
    • <is-land import="">: import() is performed for you
    • <is-land import="" type="">: you’re responsible for import() in your initialization function.
• Adds Island.addFallback API to improve control of fallback content. Example provided for Alpine.js islands (Demo) (without separate <template> markup) for easier-to-control progressively-enhanced fallback content.
• Support renaming on: attribute prefix #16
• Fixes #1 allowing folks to rename the custom element tag name. Demo
• Changes manual definition use case to use ?nodefine query param per https://www.zachleat.com/web/nodefine/
• Adds dist/is-land.min.js minimized JS to published code.
• Clarify framework support instructions by @dave-kennedy in #28
• Adding SolidJS web component examples #3 by @jake-danton in #24
• Swaps to use Import Maps on Lit, Svelte, and Solid demos to skip bundling on libraries that use bare specifiers on imports.
• Adds GitHub to npm release provenance
• Fix README link to Markdown demo by @funwhilelost in #33
• Better patterns for static Island.define() and customElements.define for using a different tag name (rather than <is-land>). Island.define(tagName) API is removed. #32

New Island.addInitType API

Sample Island.addInitType usage for petite-vue:

// This code only needs to be added once globally
Island.addInitType("petite-vue", async (node) => {
	// Load the library, mount the target node
	const { createApp } = await import("https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js");
	createApp().mount(node);
});

More examples available.

New Contributors:

• @dave-kennedy
• @jake-danton
• @vanarok
• @funwhilelost

Milestone: https://github.com/11ty/is-land/milestone/2?closed=1
Full Changelog: v4.0.1...v5.0.0