Alternate contexts (Scenarios) for the same component? #149

Open
gui-gui opened this Issue Sep 13, 2016 · 5 comments

Projects

None yet

3 participants

@gui-gui
gui-gui commented Sep 13, 2016 edited

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

@gui-gui gui-gui changed the title from Alternate multiple contexts (Scenarios) for the same component? to Alternate contexts (Scenarios) for the same component? Sep 13, 2016
@allmarkedup
Member

@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
shawnbot commented Jan 3, 2017

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
Member

@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
shawnbot commented Jan 4, 2017

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
shawnbot commented Jan 5, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment