Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce a new String type #146

Closed
prevwong opened this issue Feb 8, 2024 · 1 comment · Fixed by #147
Closed

Introduce a new String type #146

prevwong opened this issue Feb 8, 2024 · 1 comment · Fixed by #147
Labels
enhancement New feature or request

Comments

@prevwong
Copy link
Owner

prevwong commented Feb 8, 2024

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.

@prevwong
Copy link
Owner Author

prevwong commented Feb 8, 2024

Related to #135 and #86

@prevwong prevwong added the enhancement New feature or request label Feb 8, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Done in Reka Project Roadmap Feb 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

1 participant