[RFC] Add a useClient() hook for writing JS expressions in IDE

[bharatkashyap]

Goal

Being able to write a client-side function in VS Code which has access to the current runtime global scope

Motivation

Instead of having to write client side expressions in the binding editor, I could write those in my IDE as well. We could then have a clean separation of pro-code and drag/drop UI.

Disclaimer

At the outset, this is not to suggest that every single expression of JS should need opening up the editor to write a function. What I propose is that we allow simplistic actions (that would otherwise only require a standard, single Javascript expression) to be achieved from the UI. For instance, attaching rows to a Datagrid; or binding a function to a Button without any customisation.

What I am suggesting is to move the fall-through case – where a user must write code in the UI – to the IDE as well.

Example

For instance, in the functions.ts file, we could allow calling a useClient hook:

// functions.ts

function callAPIWithCustomData() {

const { text1, dataGrid2 } = useClient();

// Do stuff with text1 and dataGrid2

const rowsWithoutAParticularColumn = dataGrid2.rows(...)
const matchCellValuesToText1 = rowsWithoutAParticularColumn(...)["column"].match(text1.value)

api.call(matchCellValuesToText1);

}

In the UI, I would then be able to bind the onClick handler to the above-defined function, which would use the real-time evaluated values of text1 and dataGrid2 from the UI.

This way, we move complex JavaScript outside the UI and make a clean separation between UI editing and pro-code.

[Janpot]

1. Where does this functions.ts file go in the project folder and how is it associated with a page
2. How do text1 and dataGrid2 get strong types? Or will they be any typed?
3. You're calling a hook useClient inside a function that is not a hook callAPIWithCustomData. It's hard to envision how this would work exactly. What's the llifecycle of callAPIWithCustomData? When does it get called? You want to bind callAPIWithCustomData to an event, but a hook must be called every render.
4. Should the callAPIWithCustomData be exported from this file? How will the Toolpad page runtime use it?
5. Did you check out this?

[apedroferreira]

In this example, it's not completely clear to me whether the whole function would run on the client or server side.
By using useClient inside a function, does it somehow mean that the function runs on the client side? Or does it just run on the server side but has access to those prop values from the page?
Also the pattern of a React-like hook in a function might be a bit confusing.
Maybe we could have some kind of client-side functions instead, which would be able to access the prop values of the page?