Islands of any framework

An island is a place in a PAD page where a component takes over: an element naming the component, its props as JSON in data-props, and HTML of PAD's own inside that shows until the component runs. Which framework the component is written in does not matter to the page:

<div data-island="VueCounter" data-props="{^counter}">{$counter.start}</div>
<div data-island="Shelf" data-load="visible" data-props="{^shelf}"></div>

{vite 'src/main.js'}

A small runtime in the build pairs each name with a component and its framework, and mounts it - fetching the component, and its framework with it, only when an island of that name is on the page and due:

islands({
  VueCounter: vue(() => import('./islands/Counter.vue')),
  Shelf:      react(() => import('./islands/Shelf.react.jsx'))
});

• data-load says when: eager (at once), idle (when the browser has nothing else to do) or visible (when the island scrolls into view).
• An adapter per framework mounts a component with props and answers how to unmount it - React, Vue, Svelte, Preact and Solid each take a dozen lines.
• Islands of different frameworks share state through a store, and talk to PAD through the page's JSON ($padExpose) and posts with the CSRF token.
• Vite builds the components; {vite} links the build, or the dev server while it runs.

The islands application has all of it, with the runtime, the adapters and the components beside each example: islands. The react application does the same without a build step, with Babel in the browser.