Fractal: Alternate contexts (Scenarios) for the same component?

[gui-gui]

Is it possible to alternate between contexts for the same component? This would be useful to simulate different scenarios in which the ui component might appear.

In this talk https://youtu.be/eqmoadPnn_8?t=20m17s Jordan Lewis, from envato, explains the idea i'm talking about, in depth, and better than i could here.

I guess this would be possible using variants, but this would defeat the purpose of the variant in my view, since a different scenario is not a variant. It would be great to be able to select from a dropdown between an array of scenarios and render the same component with different data.

If this is already possible, it would be great to see how i could implement it.

Thanks
gui

[allmarkedup]

@gui-gui As I mentioned in the other issue, this is definitely something I'd like to have implemented in Fractal - makes sense to separate out different variants of a thing from the different ways in which that component/variant could be showcased.

Tracking as a feature request now and will let you know when I get something together.

[shawnbot]

This might be worth a separate feature request or two, but I'd love to see the context data preview do two things differently:

1. Show the data in YAML if it was defined in YAML. The JSON previews can be kind of a bear to dig through, and YAML is much easier to read for people who know it.
2. Offer the ability to modify the context data at runtime so the component can be tested interactively with varying lengths of text, etc. If Fractal offered permalinking of the custom data (e.g. in the URL hash) this would be a great way for people to submit test cases of components that break in very specific and otherwise difficult-to-reproduce scenarios.

[allmarkedup]

@shawnbot Yes I think both these would definitely be good feature requests. It's not the same but you _can_ specify an output format for the context data in Mandelbrot using the format configuration property (see http://fractal.build/guide/web/default-theme#configuration) - but that will obviously apply to all context data output, not just ones defined in YAML.

And point 2 is definitely something I thought about adding. However the current model of server-side rendering means that this would be a feature that could only exist when using the Express-served version of the site; the static builds would not be able to replicate unless Fractal moved to supporting clientside rendering of templates. I'd actually really like this but it comes with a whole host of other additional issues that would need to be looked at first! Up until now I've been trying to always have feature parity between the dev server generated UI and the static builds, although it may be the case that it's not worth holding back specific functionality that would be useful for development just because of static site generation limitations.

[shawnbot]

Ah, good to know about YAML output! Thanks for that.

And yes, client-side rendering is a big lift, but it's not impossible. For instance, if you could isolate the bits that render the previews, that code could be browserified by the theme and inlined in the preview template with some boilerplate that looks like:

// given <div id="root">{{ yield }}</div>
var root = document.getElementById('root');
window.addEventListener('message', function(data) {
  // render() is the browserified function
  root.innerHTML = render(data);
});

then, in the view template, the context editor you could use something like CodeMirror to post updates to the preview:

var area = document.getElementById('context-editor');
var preview = document.getElementById('component-preview');
var mirror = CodeMirror.fromTextArea(area, {mode: 'yaml'});
mirror.on('change', function() {
  var data = yaml.safeLoad(area.value);
  preview.postMessage(data);
});

I might try my hand at a fork of Mandelbrot that can do this if you don't have time to think about it right now. Maybe this merits a separate issue?

[shawnbot]

Okay, so I gave the "live" context editor a stab: frctl/mandelbrot#48

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.