PAD + islands
● Any framework, one runtime

Islands of any kind
on one PAD page.

PAD writes the page and marks the places that move. A small runtime mounts a component on each - React here, Vue there, Svelte, Preact or Solid - and fetches a framework only when an island of it is on the page. Vite builds them; {vite} links the build.

See all five How it fits together 
<div data-island="VueCounter" data-props="{^vue}"></div>
<div data-island="SvelteCounter" data-load="visible"
     data-props="{^svelte}"></div>

{vite 'src/main.js'}
islands({
  VueCounter:    vue(() => import('./Counter.vue')),
  SvelteCounter: svelte(() => import('./Counter.svelte'))
});

Any framework

3 examples

One runtime mounts the components of every framework on the islands PAD writes - React, Vue, Svelte, Preact and Solid on one page, each fetched only when an island of it is there.

Five frameworks, one page

The same counter written five times - React, Vue, Svelte, Preact and Solid - each an island with its start value from PAD, and beside it what its framework cost in bytes, read from the build's manifest.

{^field}{vite}padViteChunkreact()vue()svelte()preact()solid()

Load when it is needed

data-load says when an island's code is fetched: at once, when the browser is idle, or when it scrolls into view. The log says when each one came.

data-loadIntersectionObserverrequestIdleCallbackimport()

Three frameworks, one cart

A React shelf, a Vue summary and a Svelte badge share one store; adding posts to PAD, which keeps the cart in the session and answers it to all three.

padSession$padExposestore()post()

Built with Vite

2 examples

The components are compiled by Vite and linked by {vite}: the build in production, the dev server with hot reload while it runs.

Typed props

The island is TypeScript, and the type of its props is written by pad types from the page's own data: the order the PHP makes, captured as the page's sample. A field the PHP does not have fails the check, not the visitor.

pad types_samples/$padExpose.tsxtsc --noEmit

From source to page

What {vite 'src/main.js'} writes for this request and why: the manifest the build left, the chunks of each island, and the dev server that takes over while it runs.

{vite}$padViteBuildbuild/hottype=modulemodulepreload