ClintchizandClaude Opus 5
e898929193
Two faults found by driving the island demo in a real browser. Both were
silent: the markup, every asset, and all 48 island tests were correct
either way.
An island renders nothing until it mounts, so its placeholder is
zero-height, and IntersectionObserver does not treat a zero-area target
consistently -- client:visible islands mounted on one load and not the
next. Visibility for those is now decided from the element's own rect,
driven by scroll and resize; a placeholder with real size still uses the
observer. The strategy had no test at all, which is why this shipped.
After an island source edit the browser kept running the old code. The
rebuild worked and the file was refetched, but the loader imports a URL
that does not change, and the browser caches modules by URL. Remounts now
carry a generation the dev loader folds into the request.
Verified in the browser: mounts with start={3} as a number, clicks reach
React (3 -> 5), and an edit to Counter.tsx now shows the new text and
stays interactive.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
/**
|
|
* The island bootstrap served at `/__wrnexus/islands.js`.
|
|
*
|
|
* Mirrors the `@wrnexus/csr` pattern: this file is only ever fetched when a
|
|
* `data-wrn-island` marker is present, so island-free pages download nothing —
|
|
* including React.
|
|
*/
|
|
export function getIslandRuntime(development = false): string {
|
|
return `
|
|
(function () {
|
|
function loader(name, generation) {
|
|
var url = "/__wrnexus/island/" + encodeURIComponent(name) + ".js";
|
|
// A rebuilt island keeps its URL, and the browser caches modules by URL,
|
|
// so a remount has to ask for a URL it has not imported before.
|
|
return import(generation ? url + "?v=" + generation : url);
|
|
}
|
|
|
|
function boot() {
|
|
if (!document.querySelector("[data-wrn-island]")) return;
|
|
import("/__wrnexus/island/runtime.js").then(function (runtime) {
|
|
runtime.mountIslands(document, { loader: loader, development: ${development} });
|
|
window.__wrnexusUnmountIslands = function (root) {
|
|
runtime.unmountIslands(root || document);
|
|
};
|
|
window.__wrnexusRemountIslands = function (root) {
|
|
return runtime.remountIslands(root || document, {
|
|
loader: loader,
|
|
development: ${development}
|
|
});
|
|
};
|
|
// HMR morphs the server placeholder back over the mounted island, which
|
|
// discards the React tree. Remount once the DOM has settled.
|
|
window.addEventListener("wrnexus:hmr-updated", function () {
|
|
window.__wrnexusRemountIslands();
|
|
});
|
|
}).catch(function (error) {
|
|
console.error("[wrnexus] failed to load the island runtime", error);
|
|
});
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", boot);
|
|
} else {
|
|
boot();
|
|
}
|
|
})();
|
|
`;
|
|
}
|