| 1 | import React, { forwardRef, createContext, useContext, } from "preact/compat";
|
| 2 | import { Buffer } from "buffer";
|
| 3 | import { __DocContext } from "./document";
|
| 4 | const isServer = typeof window === "undefined";
|
| 5 | const btoa = (str) => Buffer.from(str, "utf-8").toString("base64");
|
| 6 | const HydrateContext = createContext(false);
|
| 7 | export function withHydrate(Component) {
|
| 8 | const name = Component.displayName || Component.name;
|
| 9 | return forwardRef((props, ref) => {
|
| 10 | const { hydrate } = useContext(__DocContext);
|
| 11 | const hydrateParent = useContext(HydrateContext);
|
| 12 | if (hydrateParent)
|
| 13 | throw new Error(`withHydrate() should only be called at the top-level of a Component tree. <${name} /> should not be nested within <${hydrateParent} />`);
|
| 14 | if (isServer)
|
| 15 | hydrate.current.push({ name });
|
| 16 | if (props.children && !["string", "number"].includes(typeof props.children))
|
| 17 | throw new Error(`withHydrate() is unable to serialize complex \`children\`. Please inline these children into <${name} />.`);
|
| 18 | return (React.createElement(HydrateContext.Provider, { value: name },
|
| 19 | React.createElement("div", Object.assign({}, (isServer
|
| 20 | ? {
|
| 21 | "data-hydrate": name,
|
| 22 | "data-props": Object.keys(props).length > 0
|
| 23 | ? btoa(JSON.stringify(props))
|
| 24 | : null,
|
| 25 | }
|
| 26 | : {})),
|
| 27 | React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, props), { ref }))))));
|
| 28 | });
|
| 29 | }
|