Skip to content

Feat/reactive islands#42

Merged
hexplus merged 45 commits into
mainfrom
feat/reactive-islands
Jun 26, 2026
Merged

Feat/reactive islands#42
hexplus merged 45 commits into
mainfrom
feat/reactive-islands

Conversation

@hexplus

@hexplus hexplus commented Jun 26, 2026

Copy link
Copy Markdown
Owner

Description

Adds reactive HTML islands to SibuJS — a third rendering mode that attaches fine-grained reactivity to server-rendered HTML with no build step, no JSX, no virtual DOM, and no dependencies. The whole islands runtime is ~5.2 KB gzipped. Additive and backward-compatible — nothing existing changes.

  • enhance(target, setup) — attach reactivity to existing DOM without re-rendering it (alongside mount and hydrate, which replace markup). The EnhanceContext drives server markup in place: text, attr (a11y-correct literal booleans), classed, show (toggles the standard hidden property, so it reveals server-hidden elements), model (two-way; checkbox / number / <select multiple>), on, ref/refs, cleanup. Targets resolve via @namedata-ref="name" or a raw selector. Returns a dispose tied to the element. Plus enhanceAll(selector, setup).
  • Island runtimeregisterIsland(name, setup) + mountIslands(root?). Declare islands with data-sibu-island="name" and choose when each activates via data-sibu-load: load · idle · visible · interaction · media.
  • Lazy island codelazyIsland(() => import("./island.js")) fetches a module only when its island activates, so a page ships ~0 JS for islands that never trigger.
  • Robustness — no-op writes skipped (no hydration flash / re-paint of static content); re-enhancing an element is refused; a failing island's setup is isolated; failed lazy imports are reported, not thrown.
  • Exported from the package root and the window.Sibu CDN global → runs from a single <script> tag.
  • Docs/examples: docs/islands.md, runnable examples/islands.html + examples/islands-strategies.html, and bench/islands-size.mjs (the 5.2 KB measurement).

Tests: 30 new jsdom unit tests (full suite 3997 passing) plus a real-browser Playwright suite — 15/15 across Chromium, Firefox, and WebKit validating every strategy (real IntersectionObserver / requestIdleCallback / matchMedia / interaction timing) and lazy import() over HTTP. CHANGELOG [3.4.0] added; version bumped to 3.4.0.

Related Issue

Closes #

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

Checklist

  • I have read CONTRIBUTING.md
  • My code builds without errors
  • I have tested my changes
  • I have updated documentation if needed

hexplus added 30 commits March 28, 2026 15:11
@hexplus hexplus merged commit 109e191 into main Jun 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant