Dart server with web components

Question

I would like to transfer user information from my user registration form to the web component. It is possible. Something like below:

app.addRequestHandler( (req) => req.method == 'POST' && req.path == '/newUser', (req, res) { ... input.onClosed = () { ... var user = new User(); user.name = params["user[first_name]"]; user.email = params["user[email]"]; res.outputStream.writeString('<x-MyWebComponent data-value="User: user"></x-MyWebComponent>'); res.outputStream.close(); }; ... } ); 

Answer 1

Thanks for the question!

Sending data to a web component is no different from sending data to any web page. That is, your web page or component can open an AJAX request (aka XMLHttpRequest aka HttpRequest) to the server and return the JSON data.

Since web components need to be compiled into vanilla JavaScript and HTML (until the functions are in the browser ... soon!), You cannot send raw HTML code containing your custom element (for example, in your example).

Basically, create a handler on your server that creates the user in the database and sends a JSON response containing the user details. Your web page (or component) will receive a JSON response and then can bind it through the components to the page.

There are many moving parts here, so I think we need an end-to-end sampling. In the meantime, you can do something like this:

 var user = new User(); user.name = params["user[first_name]"]; user.email = params["user[email]"]; res.headers.add('Content-Type', 'application/json'); res.outputStream.writeString(user.toJson()); res.outputStream.close(); 

It is assumed that you have added the String toJson(); method String toJson(); to the class User.