Islands: interactivity without hydration

// doc-check: skip - server-rendered island host (HTML, not a checkable module).
// In your @nifrajs/web-vanilla page, mark any element as a host and give it inline JSON props:
html`<div data-island="counter" data-island-props="${JSON.stringify({ start: 0 })}">
  <output>0</output>
  <button type="button">+1</button>
</div>`

// doc-check: skip - browser DOM enhancer, typechecked in @nifrajs/web under its DOM lib.
import { defineIsland, mountIslands } from "@nifrajs/web/islands"

// defineIsland pins the data-island-props type; the body is plain imperative DOM. ALWAYS return the
// teardown for anything you wire - mountIslands calls it on soft-nav (NF-C020 warns if you forget).
const counter = defineIsland<{ start: number }>((el, props) => {
  let n = props.start
  const out = el.querySelector("output")!
  const onClick = () => { out.textContent = String(++n) }
  el.querySelector("button")?.addEventListener("click", onClick)
  return () => el.querySelector("button")?.removeEventListener("click", onClick)
})

// One bundle entry, loaded via the route's `islandScripts`.
mountIslands({ counter })

// doc-check: skip - server-rendered island host (HTML, not a checkable module).
html`<form data-island="search" data-island-props="${JSON.stringify({ query: "" })}"
    data-bind-on="submit:go">
  <input name="q" data-bind-value="query" />
  <button data-bind-attr="disabled:busy">Search</button>
  <p data-bind-show="busy">Searching...</p>
  <p><span data-bind-text="count">0</span> results</p>
</form>`

// doc-check: skip - browser DOM enhancer, typechecked in @nifrajs/web under its DOM lib.
import { bindIsland, mountIslands } from "@nifrajs/web/islands"

const search = bindIsland(({ state, onDispose }) => {
  // Every data-bind-* name in the markup is a state key here, seeded from data-island-props.
  const query = state("query", "")
  const busy = state("busy", false)
  const count = state("count", 0)
  const timer = setInterval(() => console.log("still searching for", query()), 5000)
  onDispose(() => clearInterval(timer))

  // The returned handlers are what data-bind-on names.
  return {
    go: async (event) => {
      event.preventDefault()
      busy.set(true)
      try {
        const hits: unknown[] = await fetch("/api/search?q=" + encodeURIComponent(query())).then((r) => r.json())
        count.set(hits.length)
      } finally {
        busy.set(false)
      }
    },
  }
})

mountIslands({ search })

import { batch, computed, effect, signal, untrack } from "@nifrajs/web/islands"

// A signal is read by calling it and written with .set. Reads inside an effect or computed subscribe.
const price = signal(20)
const quantity = signal(1)
const total = computed(() => price() * quantity())

const stop = effect(() => console.log("total", total(), "at", untrack(price)))
batch(() => {
  price.set(25)
  quantity.set((n) => n + 1)
}) // the effect runs once, after both writes: logs "total 50 at 25"
stop()

// doc-check: skip - browser DOM enhancer, typechecked in @nifrajs/web under its DOM lib.
import { bindIsland, bindList, mountIslands, resource } from "@nifrajs/web/islands"

type Hotel = { id: string; name: string }

const hotels = bindIsland(({ root, state }) => {
  const city = state("city", "paris")
  // A newer city aborts the older request; only the newest result lands.
  const found = resource(city, (c, abort) =>
    fetch("/api/hotels?city=" + encodeURIComponent(c), { signal: abort }).then((r): Promise<Hotel[]> => r.json()),
  )
  const list = root.querySelector("ul")
  if (list)
    bindList(() => found().value ?? [], list, {
      key: (h) => h.id, // a stable id, never a position (NF-C022)
      create: () => document.createElement("li"),
      update: (li, h) => {
        li.textContent = h.name
      },
    })
  // A <select data-bind-value="city"> in the markup writes city; nothing else to return.
})

mountIslands({ hotels })

import { createIslandBus } from "@nifrajs/web/islands"

// One typed channel, created once and closed over by every enhancer that needs it.
type CartEvents = { "cart:add": { sku: string }; "cart:count": number }
const bus = createIslandBus<CartEvents>()

const off = bus.on("cart:count", (n) => console.log("cart now has", n, "items"))
bus.emit("cart:add", { sku: "ABC-1" })
off() // unsubscribe - also usable directly as an island's cleanup

// doc-check: skip - browser DOM enhancer, typechecked in @nifrajs/web under its DOM lib.
import { createIslandBus, defineIsland, mountIslands } from "@nifrajs/web/islands"

type CartEvents = { "cart:add": { sku: string }; "cart:count": number }
const bus = createIslandBus<CartEvents>()

// Two islands that never import each other - they meet only on the bus.
const addButton = defineIsland<{ sku: string }>((el, props) => {
  const onClick = () => bus.emit("cart:add", { sku: props.sku })
  el.addEventListener("click", onClick)
  return () => el.removeEventListener("click", onClick)
})

let count = 0
const badge = defineIsland((el) => {
  const unsubscribe = bus.on("cart:add", () => {
    count += 1
    el.textContent = String(count)
    bus.emit("cart:count", count)
  })
  return unsubscribe // the on() unsubscribe IS the cleanup
})

mountIslands({ addButton, badge })

// doc-check: skip - browser DOM enhancer, typechecked in @nifrajs/web under its DOM lib.
import { createIslandBus, defineIsland, mountIslands } from "@nifrajs/web/islands"

// filter -> results, one directional channel. The results island owns its own DOM; the filter
// island owns none of it. No shared store, no reactive tree - a message and two enhancers.
const bus = createIslandBus<{ "filter:set": string }>()

const filter = defineIsland((el) => {
  const input = el.querySelector("input")!
  const onInput = () => bus.emit("filter:set", input.value.toLowerCase())
  input.addEventListener("input", onInput)
  return () => input.removeEventListener("input", onInput)
})

const results = defineIsland((el) =>
  bus.on("filter:set", (q) => {
    for (const row of el.querySelectorAll<HTMLElement>("[data-name]")) {
      const name = row.dataset.name ?? ""
      row.hidden = q !== "" && !name.toLowerCase().includes(q)
    }
  }),
)

mountIslands({ filter, results })

// doc-check: skip - html template markup, which the sample check cannot tell from JSX.
import { html, slot } from "@nifrajs/web-vanilla"

type Books = { q: string; page: number; titles: string[]; more: boolean }

export default ({ data }: { data: Books }) => html`
  <form action="/books" data-swap="replace:results">
    <input name="q" value="${data.q}" />
    <button>Search</button>
  </form>
  <ul data-swap-slot="results">${slot("results", [
    ...data.titles.map((title) => html`<li data-island="book">${title}</li>`),
    data.more
      ? html`<li><a href="/books?q=${encodeURIComponent(data.q)}&page=${data.page + 1}" data-swap="append:results">More</a></li>`
      : "",
  ])}</ul>`

// doc-check: skip - browser DOM entry, typechecked in @nifrajs/web under its DOM lib.
import { defineIsland } from "@nifrajs/web/islands"
import { enableSwap } from "@nifrajs/web/islands/swap"

const book = defineIsland((el) => {
  const onClick = () => el.classList.toggle("picked")
  el.addEventListener("click", onClick)
  return () => el.removeEventListener("click", onClick)
})

// In place of mountIslands: mounts the islands, then refreshes slots from data-swap links and forms.
enableSwap({ book })