| 1 | import { h, createContext, Fragment } from "preact";
|
| 2 | import { useContext, useRef } from "preact/hooks";
|
| 3 | import render from "preact-render-to-string";
|
| 4 | import { generateHydrateScript } from "./utils/hydration.js";
|
| 5 | export const __DocContext = createContext({
|
| 6 | head: { current: [] },
|
| 7 | });
|
| 8 | export const Document = ({ manifest, preload = [], preconnect = [], debug = false, hasGlobalScript = false, children, }) => {
|
| 9 | const head = useRef([]);
|
| 10 | const subtree = render(h(__DocContext.Provider, { value: { head } }, children), {});
|
| 11 | const styles = manifest.hydrateStyleBindings;
|
| 12 | const scripts = manifest.hydrateBindings;
|
| 13 | return (h("html", { lang: "en", dir: "ltr" },
|
| 14 | h("head", null,
|
| 15 | h("meta", Object.assign({}, { charset: "utf-8" })),
|
| 16 | h("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" }),
|
| 17 | h(Fragment, null, head.current),
|
| 18 | preconnect.map((href) => (h("link", { rel: "preconnect", href: href }))),
|
| 19 | hasGlobalScript && (h("link", { rel: "modulepreload", href: "/_hydrate/chunks/_global.js" })),
|
| 20 | preload.map((href) => (h("link", { rel: "modulepreload", href: href }))),
|
| 21 | styles &&
|
| 22 | styles.map((href) => (h("link", { rel: "preload", href: `/${href}`, as: "style" }))),
|
| 23 | styles &&
|
| 24 | styles.map((href) => h("link", { rel: "stylesheet", href: `/${href}` })),
|
| 25 | scripts && (h(Fragment, null,
|
| 26 | h("style", { dangerouslySetInnerHTML: {
|
| 27 | __html: "[data-hydrate]{display:contents;}",
|
| 28 | } })))),
|
| 29 | h("body", null,
|
| 30 | h("div", { id: "__microsite", dangerouslySetInnerHTML: { __html: subtree } }),
|
| 31 | debug && (h("script", { dangerouslySetInnerHTML: {
|
| 32 | __html: `window.__MICROSITE_DEBUG = true;`,
|
| 33 | } })),
|
| 34 | hasGlobalScript && (h("script", { type: "module", dangerouslySetInnerHTML: {
|
| 35 | __html: `import global from '/_hydrate/chunks/_global.js';\nglobal();`,
|
| 36 | } })),
|
| 37 | scripts && (h("script", { type: "module", defer: true, async: true, dangerouslySetInnerHTML: { __html: generateHydrateScript(scripts) } })))));
|
| 38 | };
|
| 39 | export const Head = () => {
|
| 40 | const { head } = useContext(__DocContext);
|
| 41 | return (h("head", null,
|
| 42 | h("meta", Object.assign({}, { charset: "utf-8" })),
|
| 43 | h("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" }),
|
| 44 | h(Fragment, null, head.current)));
|
| 45 | };
|