feat(packages/code-block): generate inputs for functions

[NicolasLopes7]

Is your feature request related to a problem? Please describe.

Developers often have to test their functions with different inputs to ensure their code works as expected. However, manually needing to create the function, and log the result can be boring. So, to make that a way easier I've thought about generating the inputs for the functions.

Describe the solution you'd like

I would like to request a new feature that automates the process of generating inputs for functions in JS/TS code. Specifically, if the root node of the AST is a variable assigned to an arrow function or a regular function, the feature should retrieve all the parameters and their possible types and generate input fields accordingly.

For example, if there is a function defined as:

const sum = (a: number, b: number) => a + b

The editor should generate two number input fields to allow users to provide input for the parameters a and b. Also, should replace the original node on the AST to incorporate the generated inputs.

Additional context

This feature could leverage the @typescript-eslint/parser to extract information from TypeScript code and generate input fields accordingly. This would help to document and streamline the process of testing and debugging code, as well as one more motivation to use this as a widget in other sites!

[NicolasLopes7]

If you like this, I can handle/implement as well! Just will need some help with the input UI design

[joaopcm]

Hi, @NicolasLopes7! Thank you very much for opening the first Nodepad issue!

I loved the suggestion, but I was left with a few questions:

1. Currently, Nodepad does not support TS. How do you imagine we can support TS natively?
2. I can help you with the input design! How do you plan to structure this input? A simple text? A dynamic form according to the readings we will make in the root node of the AST?

[NicolasLopes7]

Currently, Nodepad does not support TS. How do you imagine we can support TS natively?

I see that you're using web containers, we can add one more step to transpile code from TS -> JS and then run. I don't see huge issues with this!

I can help you with the input design! How do you plan to structure this input? A simple text? A dynamic form according to the readings we will make in the root node of the AST?

I think we can do both:

• If the parameter has a type, generate a different input according to the type:
  • Text (Simple Text Input)
  • Number (Simple Number Input)
  • Enum/String Union (Select) We can just support after as fallback if the parameters don't have any type definition, render a generic input.

If it sticks, we can build custom inputs for arrays/objects in the future!

[NicolasLopes7]

So, let's move with smaller building blocks.

• Support TS
• Parse code, and run w/ tests
• inputs

[joaopcm]

Sounds good and possible! For me, it'd be a great feature to have on Nodepad! Let's start working on that.

For the first step, I'm gonna work on TS support for code snippets. I'll create a PR mentioning this issue.

We can think about the next steps (parse code, run tests, dynamic inputs) then.

Thank you for your contribution! I'll let you know when we get the first step done 🏄🏼‍♂️

[joaopcm]

@NicolasLopes7, just merged a PR adding TypeScript support to Nodepad 🔥

Here's the v1.6.0 release tag. Also, here's a cool note welcoming TypeScript to Nodepad.

[joaopcm]

Now, we can think about the Parse code, and run w/ tests step since we have native TS support on Nodepad! 🚀

If you need any help with this step, hit me up! I'm gonna work on the visits counter feature now 😄

cc @NicolasLopes7