@runelight/vue 0.0.9

package/dist/preview.d.ts

@@ -0,0 +1,145 @@
+import { type Component, type InjectionKey, type PropType, type Ref } from "vue";
+export type RunelightVuePreviewProviderEntry = readonly [InjectionKey<any> | string, unknown];
+export type RunelightVuePreviewFrame<Props extends object = Record<string, unknown>> = {
+    props?: Props;
+    scope?: Record<string, unknown>;
+    providers?: readonly RunelightVuePreviewProviderEntry[];
+};
+export type RunelightVuePreviewComponent<Props extends object = Record<string, unknown>> = Component & {
+    frames?: Record<string, RunelightVuePreviewFrame<Props>>;
+};
+export type RunelightVuePreviewModule = Record<string, unknown>;
+export type RunelightVuePreviewComponentLoader = (entry: string) => RunelightVuePreviewComponent | Promise<RunelightVuePreviewComponent | undefined> | undefined;
+export type RunelightVuePreviewRouteParams = {
+    frameName: string | null;
+    frameOverrides: Map<string, string>;
+    chrome: string | null;
+    entry: string | null;
+    poolMode: boolean;
+    renderRequestSequence: number;
+    sessionId: string | null;
+    staticMode: boolean;
+};
+export declare const RunelightVuePreviewClient: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    chrome: {
+        type: PropType<boolean | string | null>;
+        default: null;
+    };
+    defaultEntry: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    entry: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    frameName: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    frameOverrides: {
+        type: PropType<Map<string, string>>;
+        default: () => Map<string, string>;
+    };
+    loadComponent: {
+        type: PropType<RunelightVuePreviewComponentLoader>;
+        required: true;
+    };
+    missingEntryDetail: {
+        type: StringConstructor;
+        default: string;
+    };
+    pool: {
+        type: PropType<boolean | string | null>;
+        default: null;
+    };
+    poolMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    renderRequestSequence: {
+        type: NumberConstructor;
+        default: number;
+    };
+    sessionId: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    staticMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    chrome: {
+        type: PropType<boolean | string | null>;
+        default: null;
+    };
+    defaultEntry: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    entry: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    frameName: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    frameOverrides: {
+        type: PropType<Map<string, string>>;
+        default: () => Map<string, string>;
+    };
+    loadComponent: {
+        type: PropType<RunelightVuePreviewComponentLoader>;
+        required: true;
+    };
+    missingEntryDetail: {
+        type: StringConstructor;
+        default: string;
+    };
+    pool: {
+        type: PropType<boolean | string | null>;
+        default: null;
+    };
+    poolMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    renderRequestSequence: {
+        type: NumberConstructor;
+        default: number;
+    };
+    sessionId: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    staticMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    chrome: string | boolean | null;
+    defaultEntry: string;
+    entry: string | null;
+    frameName: string | null;
+    frameOverrides: Map<string, string>;
+    missingEntryDetail: string;
+    pool: string | boolean | null;
+    poolMode: boolean;
+    renderRequestSequence: number;
+    sessionId: string | null;
+    staticMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare function useRunelightVueFrame(): Ref<RunelightVuePreviewFrame>;
+export declare function readRunelightVuePreviewRouteParams(params: URLSearchParams): RunelightVuePreviewRouteParams;
+export declare function parseRunelightVuePreviewEntry(entry: string): {
+    file: string;
+    exportName: string;
+};
+export declare function isRunelightVuePreviewComponent(value: unknown): value is RunelightVuePreviewComponent;
+//# sourceMappingURL=preview.d.ts.map

package/dist/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.ts"],"names":[],"mappings":"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"}

package/dist/preview.js

@@ -0,0 +1,545 @@
+import { computed, defineComponent, h, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch, } from "vue";
+import { createGPreviewErrorMessage, createGPreviewPoolReadyMessage, createGPreviewReadyMessage, createGPreviewRenderAcceptedMessage, createGPreviewResizeMessage, createGPreviewTreeMessage, createGPreviewValuesMessage, isGPreviewRenderMessage, isGPreviewRenderTarget, readRunelightPreviewFrameOverridesFromSearchParams, } from "@runelight/core/preview-protocol";
+const RunelightVueFrameSymbol = Symbol("runelight-vue-frame");
+const loadedRunelightVuePreviewEntriesByLoader = new WeakMap();
+const loadingRunelightVuePreviewEntriesByLoader = new WeakMap();
+export const RunelightVuePreviewClient = defineComponent({
+    name: "RunelightVuePreviewClient",
+    props: {
+        chrome: { type: [Boolean, String, null], default: null },
+        defaultEntry: { type: String, default: undefined },
+        entry: { type: [String, null], default: null },
+        frameName: { type: [String, null], default: null },
+        frameOverrides: { type: Object, default: () => new Map() },
+        loadComponent: { type: Function, required: true },
+        missingEntryDetail: {
+            type: String,
+            default: "Pass ?entry=src/components/.../*.g.vue to render a Runelight Vue preview.",
+        },
+        pool: { type: [Boolean, String, null], default: null },
+        poolMode: { type: Boolean, default: false },
+        renderRequestSequence: { type: Number, default: 0 },
+        sessionId: { type: [String, null], default: null },
+        staticMode: { type: Boolean, default: false },
+    },
+    setup(props) {
+        const routeTarget = computed(() => ({
+            frameName: props.frameName,
+            frameOverrides: props.frameOverrides,
+            chrome: typeof props.chrome === "boolean" ? (props.chrome ? "1" : "0") : props.chrome,
+            entry: props.entry ?? props.defaultEntry ?? null,
+            poolMode: typeof props.pool === "boolean" ? props.pool : props.pool === "1" || props.poolMode,
+            renderRequestSequence: 0,
+            sessionId: props.sessionId,
+            staticMode: props.staticMode,
+        }));
+        const renderTarget = useRunelightVuePreviewRenderTarget(routeTarget);
+        const showChrome = computed(() => showChromeForPreviewTarget(renderTarget.value.chrome));
+        return () => {
+            if (!renderTarget.value.entry) {
+                if (renderTarget.value.poolMode)
+                    return h(RunelightVuePreviewDocumentBackground, { showChrome: false });
+                return [
+                    h(RunelightVuePreviewDocumentBackground, { showChrome: showChrome.value }),
+                    h(RunelightVuePreviewMessage, {
+                        detail: props.missingEntryDetail,
+                        sessionId: renderTarget.value.sessionId,
+                        title: "Missing entry",
+                    }),
+                ];
+            }
+            return [
+                h(RunelightVuePreviewDocumentBackground, { showChrome: showChrome.value }),
+                h(RunelightVueEntryPreview, {
+                    key: previewRenderTargetKey(renderTarget.value),
+                    componentLoader: props.loadComponent,
+                    entry: renderTarget.value.entry,
+                    frameName: renderTarget.value.frameName,
+                    frameOverrides: renderTarget.value.frameOverrides,
+                    sessionId: renderTarget.value.sessionId,
+                    showChrome: showChrome.value,
+                    staticMode: renderTarget.value.staticMode,
+                }),
+            ];
+        };
+    },
+});
+const RunelightVueEntryPreview = defineComponent({
+    name: "RunelightVueEntryPreview",
+    props: {
+        componentLoader: { type: Function, required: true },
+        entry: { type: String, required: true },
+        frameName: { type: [String, null], default: null },
+        frameOverrides: { type: Object, required: true },
+        sessionId: { type: [String, null], default: null },
+        showChrome: { type: Boolean, required: true },
+        staticMode: { type: Boolean, required: true },
+    },
+    setup(props) {
+        const loadedEntry = shallowRef(readLoadedRunelightVuePreviewEntry(props.componentLoader, props.entry));
+        watch(() => [props.componentLoader, props.entry], async ([loader, entry], _previous, onCleanup) => {
+            const cached = readLoadedRunelightVuePreviewEntry(loader, entry);
+            if (cached) {
+                loadedEntry.value = cached;
+                return;
+            }
+            let ignore = false;
+            onCleanup(() => {
+                ignore = true;
+            });
+            const loaded = await loadRunelightVuePreviewEntry(loader, entry);
+            if (!ignore)
+                loadedEntry.value = loaded;
+        }, { immediate: true });
+        return () => {
+            if (!loadedEntry.value || loadedEntry.value.entry !== props.entry) {
+                return props.showChrome ? h(RunelightVuePreviewMessage, { detail: props.entry, title: "Loading" }) : null;
+            }
+            if (!loadedEntry.value.component) {
+                return h(RunelightVuePreviewMessage, {
+                    detail: props.entry,
+                    sessionId: props.sessionId,
+                    title: "Unknown Runelight entry",
+                });
+            }
+            return h(RunelightVueLoadedEntryPreview, {
+                component: loadedEntry.value.component,
+                entry: props.entry,
+                frameName: props.frameName,
+                frameOverrides: props.frameOverrides,
+                sessionId: props.sessionId,
+                showChrome: props.showChrome,
+                staticMode: props.staticMode,
+            });
+        };
+    },
+});
+const RunelightVueLoadedEntryPreview = defineComponent({
+    name: "RunelightVueLoadedEntryPreview",
+    props: {
+        component: { type: Object, required: true },
+        entry: { type: String, required: true },
+        frameName: { type: [String, null], default: null },
+        frameOverrides: { type: Object, required: true },
+        sessionId: { type: [String, null], default: null },
+        showChrome: { type: Boolean, required: true },
+        staticMode: { type: Boolean, required: true },
+    },
+    setup(props) {
+        const frames = computed(() => props.component.frames ?? {});
+        const selectedFrames = computed(() => props.frameName ? [[props.frameName, frames.value[props.frameName]]] : Object.entries(frames.value));
+        const renderableFrames = computed(() => selectedFrames.value.flatMap(([name, frame]) => (frame ? [{ name, frame }] : [])));
+        const enabled = computed(() => selectedFrames.value.length > 0 && renderableFrames.value.length === selectedFrames.value.length);
+        useRunelightVuePreviewProtocolMessages(props.sessionId, enabled, { staticMode: props.staticMode });
+        return () => {
+            if (!enabled.value) {
+                return h(RunelightVuePreviewMessage, {
+                    detail: props.frameName ?? "No frames declared",
+                    sessionId: props.sessionId,
+                    title: "Unknown Runelight frame",
+                });
+            }
+            return h("main", {
+                style: {
+                    display: "grid",
+                    gap: "16px",
+                    minHeight: props.showChrome ? "100vh" : undefined,
+                    padding: props.showChrome ? "24px" : 0,
+                },
+            }, renderableFrames.value.map(({ name, frame }) => h("section", { "data-runelight-preview-frame": name, key: name }, [
+                props.showChrome
+                    ? h("header", {
+                        style: {
+                            color: "#64748b",
+                            font: "12px ui-monospace, SFMono-Regular, Menlo, monospace",
+                            marginBottom: "8px",
+                        },
+                    }, `${props.entry} / ${name}`)
+                    : null,
+                h(RunelightVueFrameProvider, { component: props.component, entry: props.entry, frame, frameName: name }),
+            ])));
+        };
+    },
+});
+const RunelightVueFrameProvider = defineComponent({
+    name: "RunelightVueFrameProvider",
+    props: {
+        component: { type: Object, required: true },
+        entry: { type: String, required: true },
+        frame: { type: Object, required: true },
+        frameName: { type: String, required: true },
+    },
+    setup(props) {
+        const frameRef = shallowRef(props.frame);
+        provide(RunelightVueFrameSymbol, frameRef);
+        for (const [key, value] of runelightVuePreviewFrameProviderEntries(props.frame)) {
+            provide(key, value);
+        }
+        return () => {
+            const boundaryId = `runelight-boundary:${props.entry}:${props.frameName}`;
+            return h("div", {
+                "data-runelight-boundary-id": boundaryId,
+                "data-runelight-boundary-coordinate": props.entry,
+                style: { display: "contents" },
+            }, [h(props.component, props.frame.props ?? {})]);
+        };
+    },
+});
+function runelightVuePreviewFrameProviderEntries(frame) {
+    return frame.providers ?? [];
+}
+export function useRunelightVueFrame() {
+    return inject(RunelightVueFrameSymbol, ref({}));
+}
+const RunelightVuePreviewDocumentBackground = defineComponent({
+    name: "RunelightVuePreviewDocumentBackground",
+    props: {
+        showChrome: { type: Boolean, required: true },
+    },
+    setup(props) {
+        return () => (props.showChrome ? null : h("style", "html, body { background: transparent !important; }"));
+    },
+});
+const RunelightVuePreviewMessage = defineComponent({
+    name: "RunelightVuePreviewMessage",
+    props: {
+        detail: { type: String, required: true },
+        sessionId: { type: [String, null], default: null },
+        title: { type: String, required: true },
+    },
+    setup(props) {
+        onMounted(() => {
+            if (props.sessionId) {
+                window.parent.postMessage(createGPreviewErrorMessage(props.sessionId, new Error(`${props.title}: ${props.detail}`)), "*");
+            }
+        });
+        return () => h("main", {
+            "data-runelight-preview-message": "true",
+            style: {
+                color: "#172033",
+                display: "grid",
+                gap: "8px",
+                padding: "24px",
+            },
+        }, [
+            h("h1", { style: { fontSize: "18px", fontWeight: 700 } }, props.title),
+            h("p", { style: { color: "#64748b", fontSize: "14px" } }, props.detail),
+        ]);
+    },
+});
+export function readRunelightVuePreviewRouteParams(params) {
+    return {
+        frameName: params.get("frame"),
+        frameOverrides: readRunelightVuePreviewFrameOverrides(params),
+        chrome: params.get("chrome"),
+        entry: params.get("entry"),
+        poolMode: params.get("pool") === "1",
+        renderRequestSequence: 0,
+        sessionId: params.get("sessionId"),
+        staticMode: params.get("static") === "1",
+    };
+}
+export function parseRunelightVuePreviewEntry(entry) {
+    const [file, exportName] = entry.split("#", 2);
+    return { file: file ?? entry, exportName: exportName || "default" };
+}
+export function isRunelightVuePreviewComponent(value) {
+    return typeof value === "object" && value !== null;
+}
+function readLoadedRunelightVuePreviewEntry(loadComponent, entry) {
+    return loadedRunelightVuePreviewEntriesByLoader.get(loadComponent)?.get(entry) ?? null;
+}
+function loadRunelightVuePreviewEntry(loadComponent, entry) {
+    let loadedEntries = loadedRunelightVuePreviewEntriesByLoader.get(loadComponent);
+    if (!loadedEntries) {
+        loadedEntries = new Map();
+        loadedRunelightVuePreviewEntriesByLoader.set(loadComponent, loadedEntries);
+    }
+    const loadedEntry = loadedEntries.get(entry);
+    if (loadedEntry)
+        return Promise.resolve(loadedEntry);
+    let loadingEntries = loadingRunelightVuePreviewEntriesByLoader.get(loadComponent);
+    if (!loadingEntries) {
+        loadingEntries = new Map();
+        loadingRunelightVuePreviewEntriesByLoader.set(loadComponent, loadingEntries);
+    }
+    const loadingEntry = loadingEntries.get(entry);
+    if (loadingEntry)
+        return loadingEntry;
+    const nextLoadingEntry = Promise.resolve(loadComponent(entry))
+        .then((component) => ({ component: component ?? null, entry }))
+        .catch(() => ({ component: null, entry }))
+        .then((loaded) => {
+        loadedEntries.set(entry, loaded);
+        loadingEntries.delete(entry);
+        return loaded;
+    });
+    loadingEntries.set(entry, nextLoadingEntry);
+    return nextLoadingEntry;
+}
+function readRunelightVuePreviewMailboxWindow() {
+    return typeof window === "undefined" ? null : window;
+}
+let runelightVuePreviewRenderTargetMailbox = null;
+function useRunelightVuePreviewRenderTarget(routeTarget) {
+    const target = shallowRef(routeTarget.value);
+    let unsubscribe;
+    onMounted(() => {
+        if (!routeTarget.value.poolMode) {
+            target.value = routeTarget.value;
+            return;
+        }
+        const mailbox = ensureRunelightVuePreviewRenderTargetMailbox();
+        if (!mailbox)
+            return;
+        unsubscribe = mailbox.subscribe((nextTarget) => {
+            target.value = nextTarget;
+        });
+        mailbox.announcePoolReady();
+        const current = mailbox.getTarget();
+        if (current)
+            target.value = current;
+    });
+    onBeforeUnmount(() => {
+        unsubscribe?.();
+    });
+    watch(routeTarget, (nextTarget) => {
+        if (!nextTarget.poolMode)
+            target.value = nextTarget;
+    });
+    return target;
+}
+function ensureRunelightVuePreviewRenderTargetMailbox() {
+    const mailboxWindow = readRunelightVuePreviewMailboxWindow();
+    if (!mailboxWindow)
+        return null;
+    if (runelightVuePreviewRenderTargetMailbox)
+        return runelightVuePreviewRenderTargetMailbox;
+    const subscribers = new Set();
+    let currentTarget = mailboxWindow.__runelightPreviewPendingRenderTarget
+        ? previewRouteParamsFromRenderTarget(mailboxWindow.__runelightPreviewPendingRenderTarget, 0)
+        : null;
+    let renderRequestSequence = 0;
+    let poolReadyAnnounced = false;
+    const render = (target) => {
+        mailboxWindow.__runelightPreviewPendingRenderTarget = target;
+        if (target.sessionId) {
+            mailboxWindow.parent.postMessage(createGPreviewRenderAcceptedMessage(target.sessionId), "*");
+        }
+        renderRequestSequence += 1;
+        currentTarget = previewRouteParamsFromRenderTarget(target, renderRequestSequence);
+        for (const subscriber of subscribers)
+            subscriber(currentTarget);
+    };
+    mailboxWindow.__runelightPreviewRenderTargetMailbox = { render };
+    if (mailboxWindow.__runelightPreviewPrehydrationMailboxInstalled) {
+        mailboxWindow.addEventListener("runelight:preview-render-target", (event) => {
+            const target = event.detail;
+            if (isGPreviewRenderTarget(target))
+                render(target);
+        });
+    }
+    else {
+        mailboxWindow.addEventListener("message", (event) => {
+            if (isGPreviewRenderMessage(event.data))
+                render(event.data.target);
+        });
+    }
+    runelightVuePreviewRenderTargetMailbox = {
+        announcePoolReady() {
+            if (poolReadyAnnounced)
+                return;
+            poolReadyAnnounced = true;
+            if (mailboxWindow.__runelightPreviewPrehydrationMailboxInstalled)
+                return;
+            mailboxWindow.setTimeout(() => {
+                mailboxWindow.parent.postMessage(createGPreviewPoolReadyMessage(), "*");
+            }, 0);
+        },
+        getTarget() {
+            return currentTarget;
+        },
+        render,
+        subscribe(subscriber) {
+            subscribers.add(subscriber);
+            if (currentTarget)
+                subscriber(currentTarget);
+            return () => {
+                subscribers.delete(subscriber);
+            };
+        },
+    };
+    return runelightVuePreviewRenderTargetMailbox;
+}
+function previewRouteParamsFromRenderTarget(target, renderRequestSequence) {
+    return {
+        frameName: target.frameName,
+        frameOverrides: new Map(target.frameOverrides ?? []),
+        chrome: target.chrome,
+        entry: target.entry,
+        poolMode: false,
+        renderRequestSequence,
+        sessionId: target.sessionId,
+        staticMode: target.staticMode,
+    };
+}
+function showChromeForPreviewTarget(chrome) {
+    return chrome === null ? true : chrome !== "0";
+}
+function previewRenderTargetKey(target) {
+    return JSON.stringify({
+        frameName: target.frameName,
+        frameOverrides: [...target.frameOverrides],
+        chrome: target.chrome,
+        entry: target.entry,
+        poolMode: target.poolMode,
+        renderRequestSequence: target.renderRequestSequence,
+        sessionId: target.sessionId,
+        staticMode: target.staticMode,
+    });
+}
+function readRunelightVuePreviewFrameOverrides(params) {
+    return readRunelightPreviewFrameOverridesFromSearchParams(params);
+}
+function useRunelightVuePreviewProtocolMessages(sessionId, enabled, options = {}) {
+    let cleanup;
+    onMounted(() => {
+        if (!sessionId || !enabled.value)
+            return;
+        let scheduledFrame = 0;
+        let settleTimer = 0;
+        let settled = false;
+        let resizeObserver;
+        const settleStaticPreview = () => {
+            settled = true;
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("resize", scheduleLayoutPublish);
+            resizeObserver?.disconnect();
+            if (scheduledFrame)
+                window.cancelAnimationFrame(scheduledFrame);
+            if (settleTimer)
+                window.clearTimeout(settleTimer);
+        };
+        const publishLayout = async () => {
+            await nextTick();
+            const tree = readBoundaryTree();
+            window.parent.postMessage(createGPreviewTreeMessage(sessionId, tree), "*");
+            window.parent.postMessage(createGPreviewResizeMessage(sessionId, previewContentSize(tree)), "*");
+            if (options.staticMode) {
+                if (settleTimer)
+                    window.clearTimeout(settleTimer);
+                settleTimer = window.setTimeout(settleStaticPreview, 400);
+            }
+        };
+        const scheduleLayoutPublish = () => {
+            if (settled || scheduledFrame)
+                return;
+            scheduledFrame = window.requestAnimationFrame(() => {
+                scheduledFrame = 0;
+                void publishLayout();
+            });
+        };
+        const handleMessage = (event) => {
+            if (!isRuntimeValuesRequest(event.data, sessionId))
+                return;
+            const values = readBoundaryValues(event.data.boundaryId);
+            if (values) {
+                window.parent.postMessage(createGPreviewValuesMessage(sessionId, values), "*");
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        window.addEventListener("resize", scheduleLayoutPublish);
+        resizeObserver = "ResizeObserver" in window ? new ResizeObserver(scheduleLayoutPublish) : undefined;
+        resizeObserver?.observe(document.documentElement);
+        if (document.body)
+            resizeObserver?.observe(document.body);
+        window.parent.postMessage(createGPreviewReadyMessage(sessionId), "*");
+        void publishLayout();
+        cleanup = () => {
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("resize", scheduleLayoutPublish);
+            resizeObserver?.disconnect();
+            if (settleTimer)
+                window.clearTimeout(settleTimer);
+            if (scheduledFrame)
+                window.cancelAnimationFrame(scheduledFrame);
+        };
+    });
+    onBeforeUnmount(() => {
+        cleanup?.();
+    });
+}
+function readBoundaryTree() {
+    return [...document.querySelectorAll("[data-runelight-boundary-id]")].map((element) => ({
+        id: element.dataset.runelightBoundaryId ?? "",
+        coordinate: element.dataset.runelightBoundaryCoordinate ?? "",
+        rect: readElementRect(element),
+        children: [],
+    }));
+}
+function readBoundaryValues(boundaryId) {
+    const element = document.querySelector(`[data-runelight-boundary-id="${CSS.escape(boundaryId)}"]`);
+    if (!element)
+        return undefined;
+    return {
+        boundaryId,
+        props: { type: "undefined" },
+        providerValues: [],
+    };
+}
+function readElementRect(element) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+        const childRect = firstVisibleChildRect(element);
+        if (childRect)
+            return childRect;
+    }
+    return {
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+function firstVisibleChildRect(element) {
+    for (const child of element.children) {
+        if (!(child instanceof HTMLElement))
+            continue;
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0)
+            continue;
+        return {
+            x: rect.left + window.scrollX,
+            y: rect.top + window.scrollY,
+            width: rect.width,
+            height: rect.height,
+        };
+    }
+    return undefined;
+}
+function previewContentSize(tree) {
+    const rects = tree.flatMap((node) => (node.rect ? [node.rect] : []));
+    if (rects.length === 0) {
+        return {
+            width: document.documentElement.scrollWidth,
+            height: document.documentElement.scrollHeight,
+        };
+    }
+    const left = Math.min(0, ...rects.map((rect) => rect.x));
+    const top = Math.min(0, ...rects.map((rect) => rect.y));
+    const right = Math.max(...rects.map((rect) => rect.x + rect.width));
+    const bottom = Math.max(...rects.map((rect) => rect.y + rect.height));
+    return {
+        width: Math.ceil(right - left),
+        height: Math.ceil(bottom - top),
+    };
+}
+function isRuntimeValuesRequest(message, sessionId) {
+    return (typeof message === "object" &&
+        message !== null &&
+        message.type === "runelight:request-values" &&
+        message.protocolVersion === 1 &&
+        message.sessionId === sessionId &&
+        typeof message.boundaryId === "string");
+}
+//# sourceMappingURL=preview.js.map