prevwong/reka.js

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:
Screenshot 2024-02-08 at 6 06 54 PM
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.

Related to #135 and #86