Form rendering: functional-reactive `renderer()` property

[vlukashov]

A renderer() functional property is a universal approach for reactive form rendering, independent from any library.

• In order to render a Vaadin Form one needs to set a renderer property on the form instance.
• renderer() is a function that renders the form content based on its properties.
• The form properties are provided into the renderer() function as a parameter.
• The form reacts to user input, updates its properties and calls the renderer() function on every change.
• The form is able to detect user interactions with the well-known form input elements like <input> out-of-the-box.
• In a generic case the developer needs to hook up event listeners to the rendered DOM and call appropriate handlers on the form instance. Otherwise the form is not able to detect user interactions.
• The renderer() function lets developers to use any rendering library of their choice (e.g. lit-html), or stay with plain JavaScript.

This approach is intended for use with the HTML-first API because a custom renderer property affecting the DOM children of a form works better with custom Web Components, than with standard DOM elements.

• HTML-first (+lit-html): both form-level and field-level renderer()s

  import { render, html } from 'lit-html';
  
  html`<vaadin-form .renderer=${(form, root) => render(html`
  <vaadin-form-field .renderer=${(field, root) => render(html`
    <label>User Name <input type="text" name="username"></label>
    ${field.touched && field.invalid
      ? html`<p class="error">${field.message}</p>`
      : ''}
  `, root)}
  ></vaadin-form-field>
  
  <button @click=${form.submit} ?disabled=${!form.canSubmit}>
    Submit
  </button>
  `, root)}
  ></vaadin-form>`;

• Code-first: it would be much easier to compose form- and field-level rendering with a render() function that returns some DOM (as opposed to rendering into a given outlet).

  import { VaadinForm, NativeTextField } from '@vaadin/vaadin-form';
  import { render, html } from 'lit-html';
  
  const form = new VaadinForm();
  form.addField(new NativeTextField({
  label: 'User Name',
  name: 'username',
  renderer: (field, root) => render(html`
    <label>User Name <input type="text" name="username"></label>
    ${field.touched && field.invalid
      ? html`<p class="error">${field.message}</p>`
      : ''}
  `, root)
  });
  form.renderer = (form, root) => render(html`
  <!-- The 'rederer()' functions are not easily composable in code
       without having a DOM structure. -->
  <div class="vaadin-form-field" name="username"></div>
  
  <button @click=${form.submit} ?disabled=${!form.canSubmit}>
    Submit
  </button>
  `, root);
  form.render(document.getElementById('myform'));