Skills5History

custom-directivescore

Custom client directives registered via directives.custom in vite.config.ts. ClientDirective function signature (load, options, el). AND-latch: when multiple custom directives match the same element, all must call load() before the island activates. Error handling — thrown errors fire islands:error.

211 lines

directivescore

Built-in client directives: client:visible (IntersectionObserver, rootMargin), client:media (matchMedia query), client:idle (requestIdleCallback), client:defer (setTimeout delay). Combining directives uses AND semantics — all must resolve. Per-element value overrides. Empty client:media warning.

206 lines

lifecyclecore

Island lifecycle events and SPA teardown. onIslandLoad and onIslandError helpers from vite-plugin-shopify-theme-islands/events — prefer these over raw document.addEventListener for guaranteed type safety. Raw DOM events islands:load and islands:error on document. disconnect() from the virtual module revive for SPA navigation teardown.

173 lines

setupcore

Getting-started journey and plugin configuration. Covers the full path from install to first working island. shopifyThemeIslands() options: directories (string | string[]), debug, directives deep-merge, and retry (retries, delay with exponential backoff). Load when setting up the plugin, configuring island scan directories, or enabling retry.

215 lines

writing-islandscore

Writing island files. Two discovery modes: directory scanning (files in configured directories auto-discovered by tag name = filename) and Island mixin (import Island from vite-plugin-shopify-theme-islands/island to mark files anywhere in the project). Covers customElements.define, the Island base class, and child island cascade behaviour.

165 lines