bhauman / devcards

Devcards aims to provide a visual REPL experience for ClojureScript
1.53k stars 116 forks source link

Iframe devcard (AKA a hack to use devcards with re-frame) #131

Closed nberger closed 6 years ago

nberger commented 6 years ago

Implements a new kind of devcard that renders the content of the devcard (the "naked card") inside of an iframe, giving the devcard an isolated runtime with respect to other devcards and thus avoiding much of the issues that come from using global state.

This solves a pain point with the re-frame and devcards combination: there is no sane way to render devcards for components from a re-frame app that interact with the app db, when it is desired to render multiple devcards on the same page initialized with different app state.

Even though much of the components from a re-frame app can be rendered as simple reagent devcards, some components will unavoidable depend on db subscriptions (at some point data from the db has to be streamed into the view components) and we might want to render some of those components as devcards. As we are doing that, we probably want to render multiple devcards with different interesting app states. For example: an empty todo list, a todo list with 1 item, and a todo list with 20 items!

This implementation introduces a new "standalone" route: By adding {:standalone true} to a devcard route (the one that's set as the current route when clicking on a devcard title), the devcard can be rendered as a "naked card" - no breadcrumb, no devcard title, and other stuff is removed. This gives us a way to implement an iframe devcard that points the iframe to this standalone route: this way the content of the devcard is isolated from the rest of the devcards and devcards system, and we are safe to initialize the re-frame app, dispatching initialization events as needed, registering handlers and subscriptions, and even dispatching from events triggered in the devcard components.

I've added some examples under a new devdemos.re-frame ns.

Fixes #105

bhauman commented 6 years ago

This is a big commit. So it may take a bit for me to digest it.

bhauman commented 6 years ago

And thanks for working on it :)

nberger commented 6 years ago

Of course, no rush, sounds reasonable :). Thanks for taking a look!

paytonrules commented 6 years ago

I'm curious if there's any progress on this. I'm interested in re-frame, but you'll pull my devcards from my cold dead hands.

nberger commented 6 years ago

It's been a while since I made this, and I don't have the time now to resolve conflicts and try to improve it (it needs a better API, more examples, etc), so I'll close this PR. I'll keep the branch in my repo in case anyone wants to use it.