Try rendering examples in iframe

sapegin commented 4 years ago

Right now each example is a separate React app that renders into the same DOM as the Styleguidist app itself. This approach have some problems:

We share styles between Styleguidist and user's component, we use some hacks to isolate Stylegudist styles but sometimes styles still affect each other.
We can't implement a nice responsive design preview, because we can't affect media queries in components without resizing the window.

Possible issues of the iframe approach:

It could be slower than the current approach.
Interaction between Styleguidist and iframes could be more complex.
We'll need to add global styles to every iframe instead of adding them once at the Styleguidst root level.

stepancar commented 4 years ago

@sapegin , we used https://www.npmjs.com/package/react-frame-component about 1.5 year ago, it was not bad.

psjsaravana commented 4 years ago

This could help for sharing the styles between iframe

import Frame from "react-frame-component";

const initialContent = `<!DOCTYPE html><html><head>${document.head.innerHTML}</head><body><div></div></body></html>`;

<Frame style={{ width: "80%", margin: "auto 10%" }} initialContent={initialContent}>
    <YourComponent title="Title" />
</Frame>;

sapegin commented 4 years ago

The main goal of using iframes is to prevent sharing anything between the host and iframes.

sapegin commented 4 years ago

There's a pull request with draft implementation: #1553.

styleguidist / react-styleguidist

Try rendering examples in iframe #1496