alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
184 lines (180 loc) • 6.08 kB
JavaScript
import "../../../chunks/chunk-U5RRZUYZ.js";
// src/dashboard/view/preview/BrowserPreview.tsx
import { PreviewAction } from "alinea/preview/PreviewMessage";
import { HStack, Loader, Typo, fromModule, px } from "alinea/ui";
import { AppBar } from "alinea/ui/AppBar";
import { IcRoundArrowBack } from "alinea/ui/icons/IcRoundArrowBack";
import { IcRoundArrowForward } from "alinea/ui/icons/IcRoundArrowForward";
import { IcRoundLock } from "alinea/ui/icons/IcRoundLock";
import { IcRoundOpenInNew } from "alinea/ui/icons/IcRoundOpenInNew";
import { IcRoundRefresh } from "alinea/ui/icons/IcRoundRefresh";
import { useEffect, useRef, useState } from "react";
import { Preview } from "../Preview.browser.js";
// src/dashboard/view/preview/BrowserPreview.module.scss
var BrowserPreview_module_default = {
"root": "alinea-BrowserPreview",
"root-bar": "alinea-BrowserPreview-bar",
"rootBar": "alinea-BrowserPreview-bar",
"root-iframe": "alinea-BrowserPreview-iframe",
"rootIframe": "alinea-BrowserPreview-iframe",
"root-loader": "alinea-BrowserPreview-loader",
"rootLoader": "alinea-BrowserPreview-loader",
"is-loading": "alinea-BrowserPreview-is-loading",
"isLoading": "alinea-BrowserPreview-is-loading",
"mini": "alinea-BrowserPreview-mini",
"mini-footer": "alinea-BrowserPreview-mini-footer",
"miniFooter": "alinea-BrowserPreview-mini-footer"
};
// src/dashboard/view/preview/BrowserPreview.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(BrowserPreview_module_default);
function BrowserPreview({
url,
registerLivePreview
}) {
const iframe = useRef(null);
const [loading, setLoading] = useState(true);
const hasPreviewListener = useRef(false);
const origin = new URL(url, window.location.href);
const target = `${origin.protocol}//${origin.host}`;
useEffect(() => {
setLoading(true);
function handleMessage(event) {
if (!event.data || typeof event.data !== "object")
return;
if (event.data.action === PreviewAction.Pong) {
console.log("[Alinea preview window detected]");
hasPreviewListener.current = true;
registerLivePreview({
preview(update) {
post({ action: PreviewAction.Preview, ...update });
}
});
}
}
addEventListener("message", handleMessage);
return () => removeEventListener("message", handleMessage);
}, [url]);
useEffect(() => {
if (loading) {
const timeout = setTimeout(() => setLoading(false), 3e3);
return () => clearTimeout(timeout);
}
}, [loading]);
function post(message) {
iframe.current?.contentWindow?.postMessage(message, target);
}
function handlePrevious() {
post({ action: PreviewAction.Previous });
}
function handleNext() {
post({ action: PreviewAction.Next });
}
function handleReload() {
if (hasPreviewListener.current)
post({ action: PreviewAction.Reload });
else
iframe.current?.setAttribute("src", url);
setLoading(true);
}
const inner = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
"div",
{
style: {
flexGrow: 1,
position: "relative",
overflow: "hidden"
},
children: [
/* @__PURE__ */ jsx("div", { className: styles.root.loader({ loading }), children: /* @__PURE__ */ jsx(Loader, {}) }),
/* @__PURE__ */ jsx(
"iframe",
{
ref: iframe,
className: styles.root.iframe(),
allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
sandbox: "allow-top-navigation allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock",
src: url,
onLoad: () => {
setLoading(false);
try {
post({ action: PreviewAction.Ping });
} catch (e) {
hasPreviewListener.current = false;
}
}
},
url
)
]
}
) });
return /* @__PURE__ */ jsx(Preview, { children: /* @__PURE__ */ jsxs("div", { className: styles.root(), children: [
/* @__PURE__ */ jsx(AppBar.Root, { className: styles.root.bar(), children: /* @__PURE__ */ jsxs(HStack, { style: { height: "100%" }, children: [
/* @__PURE__ */ jsx(
AppBar.Item,
{
as: "button",
icon: IcRoundArrowBack,
onClick: handlePrevious
}
),
/* @__PURE__ */ jsx(
AppBar.Item,
{
as: "button",
icon: IcRoundArrowForward,
onClick: handleNext
}
),
/* @__PURE__ */ jsx(
AppBar.Item,
{
as: "button",
icon: IcRoundRefresh,
onClick: handleReload
}
),
/* @__PURE__ */ jsx(AppBar.Item, { full: true, style: { flexGrow: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
Typo.Monospace,
{
style: {
display: "block",
width: "100%",
background: "var(--alinea-highlight)",
padding: `${px(6)} ${px(15)}`,
borderRadius: px(8)
},
children: /* @__PURE__ */ jsxs(HStack, { gap: 8, center: true, children: [
/* @__PURE__ */ jsx(IcRoundLock, { style: { flexShrink: 0 } }),
/* @__PURE__ */ jsx(
"span",
{
style: {
display: "block",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
children: url
}
)
] })
}
) }),
/* @__PURE__ */ jsx(
AppBar.Item,
{
as: "a",
icon: IcRoundOpenInNew,
href: url + "&full",
target: "_blank"
}
)
] }) }),
inner
] }) });
}
export {
BrowserPreview
};