AbsoluteJS

absolutejs-island-example

absolutejs-island-examplev0.0.1betaDev Tools

An example project demonstrating the AbsoluteJS islands architecture — mix React, Svelte, Vue, Angular, HTML, and HTMX components on the same page with shared state across frameworks.

#Installation

BASH
# Private workspace project: ~/abs/examples/island

#Capabilities

Overview

An example project demonstrating the AbsoluteJS islands architecture — mix React, Svelte, Vue, Angular, HTML, and HTMX components on the same page with shared state across frameworks.

What Are Islands?

Islands architecture renders most of the page as static HTML on the server and selectively hydrates interactive "islands" on the client. Each island is a self-contained component that can be written in any supported framework and hydrated independently using one of three strategies:

hydrate="load" — Hydrate immediately when the page loads (eager).

hydrate="idle" — Hydrate when the browser is idle via requestIdleCallback.

Show 1 more

hydrate="visible" — Hydrate when the island scrolls into the viewport via IntersectionObserver.

What This Example Shows

Multi-framework islands — React, Svelte, Vue, and Angular counter components all coexist on the same page, each hydrated independently.

Shared cross-framework state — A shared counter store (counterIslandStore) built with createIslandStore allows all islands, regardless of framework, to read and write shared state.

Typed islands — A central island registry provides full TypeScript type inference for framework, component name, and props when using TypedReactIsland, TypedSvelteIsland, TypedVueIsland, or TypedAngularIsland.

Show 3 more

Loose islands — The untyped <Island> primitive allows ad-hoc usage without the registry for quick prototyping.

Multiple host pages — The same islands render from host pages written in React (/), Vue (/vue), Svelte (/svelte), Angular (/angular), plain HTML (/html), and HTMX (/htmx).

Elysia server — The backend uses Elysia with the AbsoluteJS plugin for SSR, asset serving, and routing.

Prerequisites

Bun (v1.1+)

Getting Started

The dev server will start and print the local URL (default http://localhost:3000).

Scripts

Command — Description

bun run dev — Start the development server with HMR

bun run start — Start the production server

Show 3 more

bun run lint — Run ESLint

bun run format — Format code with Prettier

bun run typecheck — Run type checking across all frameworks

How It Works

1. Define a shared store

2. Register island components

3. Use islands in any host page

Show 1 more

Every framework has its own typed island helper (TypedReactIsland, TypedSvelteIsland, etc.) so props are fully type-checked regardless of which framework the host page is written in.

Routes

Path — Host Framework — Description

/ — React — All island types and hydration modes

/vue — Vue — Vue host page with mixed islands

Show 4 more

/svelte — Svelte — Svelte host page with mixed islands

/angular — Angular — Angular host page with mixed islands

/html — HTML — Plain HTML host page

/htmx — HTMX — HTMX host page

Outcomes

What you can build

Build on the supported package contract

Use absolutejs-island-example through its supported public entry points.

Hardening checklist

Production guidance

Make every external boundary explicitPin the deployed absolutejs-island-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.

Follow in order

Troubleshooting path

1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-island-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.

#Getting Started

Partial snippet

Working example for Getting Started.

BASH
# Clone the repository
git clone https://github.com/absolutejs/examples.git
cd examples/island

# Install dependencies
bun install

# Start the dev server
bun run dev

#Project Structure

Partial snippet

Working example for Project Structure.

TXT
src/
├── backend/
│   ├── assets/              # Static assets (icons, images, SVGs)
│   ├── plugins/
│   │   └── pagesPlugin.ts   # Route definitions for each host page
│   ├── server.ts            # Elysia server setup
│   └── vueImporter.ts       # Vue SSR import helper
└── frontend/
    ├── angular/             # Angular island components and host page
    ├── client/
    │   └── bootstrap.ts     # Client-side island hydration bootstrap
    ├── html/                # Plain HTML host page
    ├── htmx/                # HTMX host page
    ├── islands/
    │   ├── counterStore.ts  # Shared cross-framework state store
    │   └── registry.ts      # Central island registry (type-safe)
    ├── react/               # React island components and host page
    ├── styles/              # Global styles
    ├── svelte/              # Svelte island components and host page
    └── vue/                 # Vue island components and host page

#Package commands

Scripts declared by this package manifest.

bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.