-
type BuilderState = {
name: string;
counter: number;
};
const BuilderContext = createContext<{
state: State<BuilderState>;
increment: () => void;
} | null>(null);
const Preview = () => {
const { state, increment } = useContext(BuilderContext)!;
return (
<>
<p>Count: {state.counter}</p>
<span onClick={() => {increment()}}>Click me</span>
</>
);
};
const PreviewWrapper = () => {
let iframe: HTMLIFrameElement;
let dispose: () => void;
onMount(() => {
const previewDocument = iframe.contentDocument!;
previewDocument.write(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>`);
previewDocument.close();
// THIS:
// delegateEvents_MODIFIED(["click", "input"], previewDocument);
dispose = render(Preview, previewDocument.body);
});
onCleanup(() => {
dispose();
});
return <iframe ref={(elem) => (iframe = elem)}></iframe>;
};The iframe's isolated document doesn't have events globally registered and hence the above example doesn't work. It kinda works when I modify the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Honestly I don't know. I didn't realize this was a thing. I've only ever used iFrames to load content from other sites. If I understand you are writing to the document in the iframe from the parent. The child has no scripts or knowledge of Solid so it doesn't run stuff in its own context. Instead all code is basically run in the context of the parent document. I don't know how the compiler could ever account for this. I can extend delegateEvents to provide an optional document object but you'd need to manually put all the events in yourself. I'm open to adding the second optional parameter, but I'm not sure what else can be done. You could turn off event delegation in your builds (although I'm not sure spreads will respect that) or use non-delegating syntax |
Beta Was this translation helpful? Give feedback.
-
|
Using an iframe without an actual "remote origin" is really useful for overall isolation (stylesheets, ...). (My exact use-case uses an iframe to preview a rendered page of something the app produces.)
Exactly!
Tbh, I don't really expect the compiler to do this since it can't possibly infer this bit of information.
That'd be just fine. So we'd end with something like this? export function delegateEvents(eventNames, document: Document = window.document);
export function clearDelegatedEvents(document: Document = window.document); |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that seems perfectly fine. We can do that. I've been using Shadow DOM for the style isolation case. But I guess it's not perfectly isolated to be fair. |
Beta Was this translation helpful? Give feedback.
-
|
I didn't know that Shadow DOM does style isolation. Today I learned! |
Beta Was this translation helpful? Give feedback.
Honestly I don't know. I didn't realize this was a thing. I've only ever used iFrames to load content from other sites. If I understand you are writing to the document in the iframe from the parent. The child has no scripts or knowledge of Solid so it doesn't run stuff in its own context. Instead all code is basically run in the context of the parent document.
I don't know how the compiler could ever account for this. I can extend delegateEvents to provide an optional document object but you'd need to manually put all the events in yourself. I'm open to adding the second optional parameter, but I'm not sure what else can be done. You could turn off event delegation in your builds (althoug…