Dart Server with Web Components

Question

I'd like to pass the user information from my user registration form to a web-component. Is this 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 than sending data to any web page. That is, your web page or component can open an AJAX (aka XMLHttpRequest aka HttpRequest) request to the server and get JSON data back.

Because web components need to be compiled into vanilla JavaScript and HTML (until the features land in the browser... coming soon!) you can't send back raw HTML that contains your custom element (like you have 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 the JSON response and can then bind that, via components, to the page.

There's a lot of moving parts here so I think we need an end-to-end sample. In the meantime, you could 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();

This assumes you added a String toJson(); method to User class.