@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
122 lines (118 loc) • 3.79 kB
JavaScript
import { composeRefs } from './ROP6QZQ7.js';
import { EnvironmentProvider } from './3P5T77QU.js';
import { ark } from './EPLBB4QN.js';
import { createComponent, mergeProps, Portal } from 'solid-js/web';
import { splitProps, createMemo, createSignal, createEffect, onCleanup, Show } from 'solid-js';
var FrameContent = (props) => {
const {
onMount,
onUnmount,
children
} = props;
createEffect(() => {
onMount?.();
onCleanup(() => {
onUnmount?.();
});
});
return children;
};
// src/components/frame/frame.tsx
var resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
var initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
function getMountNode(frame) {
const doc = frame.contentWindow?.document;
if (!doc) return null;
return doc.body.querySelector(".frame-root") || doc.body;
}
var Frame = (props) => {
const [frameProps, localProps] = splitProps(props, ["children", "head", "onMount", "onUnmount", "srcdoc"]);
const srcdoc = createMemo(() => frameProps.srcdoc ?? initialSrcDoc);
const [frameRef, setFrameRef] = createSignal(null);
const [mountNode, setMountNode] = createSignal(null);
createEffect(() => {
const frame = frameRef();
if (!frame) return;
const doc = frame.contentWindow?.document;
if (!doc) return;
doc.open();
doc.write(srcdoc());
doc.close();
setMountNode(getMountNode(frame));
});
createEffect(() => {
const frame = frameRef();
if (!frame || !frame.contentDocument) return;
const win = frame.contentWindow;
if (!win) return;
const node = getMountNode(frame);
if (!node) return;
const exec = () => {
win.requestAnimationFrame(() => {
const rootEl = frame.contentDocument?.documentElement;
if (!rootEl) return;
frame.style.setProperty("--width", `${node.scrollWidth}px`);
frame.style.setProperty("--height", `${node.scrollHeight}px`);
});
};
const resizeObserver = new win.ResizeObserver(exec);
exec();
if (frame.contentDocument) {
resizeObserver.observe(node);
}
onCleanup(() => {
resizeObserver.disconnect();
});
});
return createComponent(EnvironmentProvider, {
value: () => frameRef()?.contentDocument ?? document,
get children() {
return createComponent(ark.iframe, mergeProps(localProps, {
ref(r$) {
var _ref$ = composeRefs(setFrameRef, localProps.ref);
typeof _ref$ === "function" && _ref$(r$);
},
get children() {
return [createComponent(Show, {
get when() {
return mountNode();
},
children: (node) => createComponent(Portal, {
get mount() {
return node();
},
get children() {
return createComponent(FrameContent, {
get onMount() {
return frameProps.onMount;
},
get onUnmount() {
return frameProps.onUnmount;
},
get children() {
return frameProps.children;
}
});
}
})
}), createComponent(Show, {
get when() {
return mountNode();
},
get children() {
return createComponent(Portal, {
get mount() {
return frameRef().contentDocument.head;
},
get children() {
return frameProps.head;
}
});
}
})];
}
}));
}
});
};
export { Frame };