React-styleguidist: Try rendering examples in iframe

Created on 12 Dec 2019  路  4Comments  路  Source: styleguidist/react-styleguidist

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.
enhancement help wanted
Source
picture sapegin
👎1 👍1

All 4 comments

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

stepancar picture stepancar on 12 Dec 2019
👍1

This could help for sharing the styles between iframe

```jsx padded
import Frame from "react-frame-component";

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


;
```

psjsaravana picture psjsaravana on 3 Jan 2020
👎2 👍1

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

sapegin picture sapegin on 3 Jan 2020

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

sapegin picture sapegin on 30 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dlim-dlim picture dlim-dlim  路  4Comments
mealeyst picture mealeyst  路  3Comments
crobinson42 picture crobinson42  路  3Comments
magicmark picture magicmark  路  3Comments
dzimmerman902 picture dzimmerman902  路  3Comments