TanStack
New
TanStack Intent
Search...
K
Auto
Log In
Start
RC
Start
RC
Router
Router
Query
Query
Table
Table
DB
beta
DB
beta
AI
alpha
AI
alpha
Form
new
Form
new
Virtual
Virtual
Pacer
beta
Pacer
beta
Hotkeys
alpha
Hotkeys
alpha
Store
alpha
Store
alpha
Devtools
alpha
Devtools
alpha
CLI
alpha
CLI
alpha
Intent
alpha
Intent
alpha
More Libraries
More Libraries
Builder
Alpha
Builder
Alpha
Blog
Blog
Maintainers
Maintainers
Partners
Partners
Showcase
Showcase
Learn
NEW
Learn
NEW
Stats
Stats
YouTube
YouTube
Discord
Discord
Merch
Merch
Support
Support
GitHub
GitHub
Ethos
Ethos
Tenets
Tenets
Brand Guide
Brand Guide
TanStack Intent
/
Registry
/
vite-plugin-shopify-theme-islands
vite-plugin-shopify-theme-islands
1.0.2 (latest) — 5 skills
1.0.1 — 5 skills
1.0.0 — 5 skills
Copy install prompt
Vite plugin for island architecture in Shopify themes
Skills
(5)
Skills
All Skills
5
custom-directives
core
directives
core
lifecycle
core
setup
core
writing-islands
core
Skills
5
History
custom-directives
core
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
directives
core
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
lifecycle
core
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
setup
core
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-islands
core
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