-
-
Notifications
You must be signed in to change notification settings - Fork 65
/
use-island.js
34 lines (27 loc) · 1.03 KB
/
use-island.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/// <reference types="./use-island.d.ts" />
import { createElement as h, Fragment, useContext } from "react";
import IslandContext from "./island-context.js";
import "ultra/hooks/island-hydrator.js";
export default function useIsland(Component) {
const name = Component.displayName || Component.name;
if (!Component.url) {
throw new Error(
`An island component must have a static url defined. Add "${name}.url = import.meta.url;" to your island component.`,
);
}
const IslandComponent = function ({ hydrationStrategy, ...props }) {
const add = useContext(IslandContext);
const id = add(Component, props);
const WrappedComponent = h(Fragment, null, [
h("template", {
key: `island-hydration-marker-${id}`,
"data-hydration-marker": id,
"data-hydration-strategy": hydrationStrategy,
}),
h(Component, { key: `island-suspense-boundary-${id}`, ...props }),
]);
return WrappedComponent;
};
IslandComponent.displayName = `Island(${name})`;
return IslandComponent;
}