Introduce a new `String` type
Closed this issue · 1 comments
It is very common for a user to define a new state/prop value with strings concatenated with some other expression. For example, in React/JS - we would typically use template literals to do the following:
<div myProp={`Hello ${myStateVariable}!`} />
To achieve the same result in Reka right now, we would have to use a combination of BinaryExpression
and Literal
which is quite verbose and awkward:
// "Hello " + myStateVariable + "!"
t.binaryExpression({
left: t.binaryExpression({
left: t.literal({ value: "Hello "}),
operator: "+",
right: t.identifier({ name: "myStateVariable" }),
}),
operator: "+",
right: t.literal({ value: "!" }),
});
This also makes it difficult when building UI abstractions - for example, building an text field where the user could type in a string and include a variable in the input, like what typically exists in most page editors. For example, here is a screenshot of an input field in Retool:
If we were to build a UI like in the image above with what we have currently, it would be quite difficult to represent a sequence of BinaryExpression
, Identifier
and Literal
into a nice string representation like in the image above.
We could potentially solve this by introducing a new String
type that would basically achieve the same functionality as a TemplateLiteral
in JS:
t.string({
value: [
"Hello",
t.identifier({ name: "myStateVariable" }),
"!",
]
})
This will then allow us to easily stringify the above node into something like "Hello {{myStateVariable}}!"
. Additionally, this would also reduce the overall size of the AST.