Docz: Use iframe for Playground

[zicodeng]

The default Docz <Playground> is really cool, but it does not serve your components in an isolated browsing context

The disadvantages of shared browsing context are:

• It makes developers hard to test component responsiveness
• Possible CSS collisions between Docz default theme style and component style

I have seen multiple requests for this feature in the roadmap: http://feedback.docz.site/roadmap/p/use-iframes-for-each-playground and https://docz.canny.io/roadmap/p/open-playground-in-new-window

What is the current status of this feature? Is it in progress? I didn't see it in v1 release

If people need a temporary solution, I made a simple iframe wrapper: https://github.com/zicodeng/docz-iframe-playground

[martpie]

This is actually quite an important feature: every time you use global styles, or absolute styling, things get really messy. Styles also conflict with Docz styles, and responsive cannot be tested properly.

[kempsterrrr]

+1 on this. I just spent quite a long time trying to work this out before releasing it wasn't supported :(

Everything else about the library is amazing

[Tauka]

Very unfortunate that docz doesn't have iframe, major reason why I switched to storybook

[zicodeng]

Hi, if you are looking for built-in iframe playground solution, check out new Docz theme - Ztopia: http://docz-theme-ztopia.surge.sh :)

[floriangosse]

@zicodeng have you thought about opening a PR for your iframe implementation to get it into docz? I think many of us would be really happy to have this built-in.

[zicodeng]

@floriangosse Hi, I definitely thought about this. This feature will actually not be part of docz core, it is theme-specific. So I instead create another theme, which has this built in iframe Playground support: http://docz-theme-ztopia.surge.sh/

[martpie]

Can you elaborate on why it is theme specific? It looks to me like all themes should ship with this feature.

[zicodeng]

@martpie Hi, happy to explain my thoughts! The reason why I say that is because the iframe logic is handled on the UI component level, e.g. <Playground> component. Docz core logic doesn't care about UI level things as far as I know. I could be wrong :)

[pedronauck]

This is released in the new v2.

[techniq]

Seems like this requires https://github.com/doczjs/docz/pull/1305 (2.2.0-alpha.8) and use:

  <Playground useScoping>
    ...
  </Playground>

[rakannimer]

Hey all,

Thanks @techniq for providing a fix !

As you said this is solved in 2.2.0.

To scope your playground styles and make them independent of docz theme css you have 2 choices :

1. add a useScoping prop to your playground

<Playground useScoping> 
{
// blablabla
}
</Playground>

1. add useScopingInPlayground : true in doczrc.js

export default {
    useScopingInPlayground: true
}

If you're interested in the implementation details check out #1305

[mergebandit]

@rakannimer - Any thoughts on how this might work with css-modules?

[bgold0]

I know this is in Alpha but just wanted to let you know that this is not solved. Font's still are messed up

[raphaelboukara]

@bgold0 what is in alpha? css-modules?