Support simple dynamic code for number and string props

[itsdouges]

Common methods of declaring some props are to use simple math, for example rotation and using Math.PI. To make using these kinds of prop declarations easier Triplex needs to support:

1. Updating props with "code"
2. Declaring the code in the prop controls

For (1) currently you'll find Triplex only supports updating primitive values / arrays. It should also support arbitrarily setting "code". We may already be able to do this with no changes, need to explore.

For (2) declaring the code in prop controls will need a more advanced input to be built that can switch between "primitive" and "code" view. And ideally the code side also needs to "on-rails" so it can't be given invalid options.

[itsdouges]

If anyone is interested in picking this up the renderer and inputs are open source. I can help you get started and point you in the right direction.

[benjamincloquet]

Hey @itsdouges ! Really interested in picking this one as I'm discovering your codebase. I've got a few questions for you:

• as a user, if I set some property to "Math.PI / 2" (assuming we're sticking with js syntax here), should I expect the same piece of code to appear as a prop in my source file? or simply the literal value (1.57... in this case) of my expression ? Going with the former option is slightly more complex but worth it IMO because prop edition becomes seamless.
• as you mentioned, there's a little bit of validation to be applied for code inputs. Do other inputs implement validation somewhere? If not, what's your go to solution? Starting fresh I'd go with react hook form and zod but this might be overkill for such a small feature, lmk what you think 👍

[itsdouges]

hey mate! glad to have you

1. yeah exactly. both directions seem good, I'd lean towards the simple case so we can land something sooner rather than later, but happy to be convinced otherwise. to get a good editing experience on the client we'd need to be parsing the code input as an AST then doing validation on it which brings us to..
2. if we're inputting code our only option is to parse the string into a code AST and then validate the AST. so react hook form / zod wouldn't really give us anything there. validation in triplex inputs rn is quite simple. the most complex would be in number input to handle the dragging I suppose

another thought would be if it's arbitrary code then we might need a new input altogether "code input"? and then any prop could be upgraded to that if it's not supported. the bigger question would be is this something folks would find useful, don't want to spend a ton of effort if noone uses it

[benjamincloquet]

Okay makes sense! I gotta admit aside from math keywords I can't see any obvious use cases. Nevertheless I'll try to implement something simple to begin with 👍 thx