[request] Improved leva support

[Billiam]

Leva supports a couple of features that would be helpful to me, but that aren't really possible to use in replicad currently;

Folders (demo: https://leva.pmnd.rs/?path=/story/misc-folders--simple)

This would be helpful for organizing, grouping and collapsing related parameters. The data output for nested folders is still a flat list of parameters.

This would either require allowing user code to import leva's folder method, or would need some kind of static representation that replicad could parse and convert.

Conditional properties: https://leva.pmnd.rs/?path=/story/misc-input-options--render

This would be useful to hide or swap out one param for another, based on the value of another parameter.

This is enabled in leva with the render property on a parameter:

{
  myValue: {
    value: 5,
     render: get => true // not actually conditional
  },
  actuallyConditionalValue: {
     value: 10,
    render: get => get('myValue') > 5 
 }
}

This isn't possible in replicad currently because the configuration becomes unserializable for postMessage

[sgenoud]

While I was playing (and deciding not to pursue further) the leva integration, I stumbled upon a way to do the folders.

export function folder(schema, {collapsed = false} = {}) {
  return {
    type: "FOLDER",
    schema,
    settings: { collapsed },
  };
}
const _normalize = (obj) => {
  return Object.entries(obj).flatMap(([k, v]) => {
    if (v?.type === "FOLDER") return _normalize(v.schema);
    return [[k, v?.value ?? v]];
  });
};
const normalizeProperties = (obj) => {
  return Object.fromEntries(_normalize(obj));
};

and you can apply normalizeProperties to the props passed to main.

[sgenoud]

Following this idea as well as some comments (#187 and #220), I have been thinking of ways to make it easier to build complex configuration interfaces.

You can now either hack around replicad's use of leva to show a more organized form, but as this idea shows, there are quickly some issues popping up - there would be need to invent a DSL to create forms, and this is not something I would be willing to do.

I have been thinking of going the other way. As a way of sharing models @Billiam creates HTML documents with a simple iframe. What if we could make it easier to add the form in a wrapping HTML document and only have the model (and the logic to create it) in the iframe.

So I have extended the iframe with a postMessage API. As an example you can play with: box.html. In there I have created a basic html form, but you could actually have leva, dat.ui or build a full react app with a complex interface.

I have been thinking of generating a html page in the share screen. Would anyone use it?

[sgenoud]

You can actually also host them on a codesandbox: https://c2hckl.csb.app/