@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
118 lines (114 loc) • 3.61 kB
JavaScript
import { composeRefs } from './ROP6QZQ7.js';
import { EnvironmentProvider } from './YO2MCGXO.js';
import { createComponent, template, use, spread, insert, 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 _tmpl$ = /* @__PURE__ */ template(`<iframe>`);
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 = () => {
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() {
var _el$ = _tmpl$();
var _ref$ = composeRefs(setFrameRef, localProps.ref);
typeof _ref$ === "function" && use(_ref$, _el$);
spread(_el$, localProps, false, true);
insert(_el$, 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;
}
});
}
})
}), null);
insert(_el$, createComponent(Show, {
get when() {
return mountNode();
},
get children() {
return createComponent(Portal, {
get mount() {
return frameRef().contentDocument.head;
},
get children() {
return frameProps.head;
}
});
}
}), null);
return _el$;
}
});
};
export { Frame };