1
import type { ReactNode } from "react";
2
 
3
type IslandHostProps = {
4
  name: string;
5
  props: unknown;
6
  children: ReactNode;
7
  className?: string;
8
};
9
 
10
function serializeProps(props: unknown): string {
11
  return JSON.stringify(props).replace(/[<>&\u2028\u2029]/g, (match) => {
12
    switch (match) {
13
      case "<":
14
        return "\\u003c";
15
      case ">":
16
        return "\\u003e";
17
      case "&":
18
        return "\\u0026";
19
      case "\u2028":
20
        return "\\u2028";
21
      case "\u2029":
22
        return "\\u2029";
23
      default:
24
        return match;
25
    }
26
  });
27
}
28
 
29
export function IslandHost({ name, props, children, className }: IslandHostProps) {
30
  return (
31
    <div data-island={name} className={className}>
32
      <script
33
        type="application/json"
34
        data-island-props
35
        dangerouslySetInnerHTML={{ __html: serializeProps(props) }}
36
      />
37
      <div data-island-root>{children}</div>
38
    </div>
39
  );
40
}