Web components

[hexus]

A set of web components could be used to either fully render a form, or selectively render parts of a form. Using field definitions for layout is then optional.

<pragma-form> would be a decorator element that propagates field data to any relevant children, internally managing a Pragma Form instance.

<pragma-form fields="..." data="...">
  <form>
    <div class="saves">
      <!-- Automatically render a subset of fields -->
      <pragma-fields path="defense.saves"/>
    </div>

    <!-- Manually lay out elements for fields -->
    <textarea name="defense.notes"></textarea>

    <!-- Define layout for field templates -->
    <template name="templates.spell">
      <div class="spell">
        <input type="text" name="templates.spell.name"/>
        <!-- ... -->
      </div>
    </template>
  </form>
</pragma-form>

<pragma-form> and <pragma-fields> elements could optionally load field sets by themselves.

<pragma-form src="/fields.json" data="...">
  <pragma-fields/>
</pragma>

<pragma-fields src="/fields.yaml" path="defense.saves"/>

[hexus]

Allowing layout to be defined separately means data structure doesn't need to be tied to layout.

This may add complexity, but improves versatility and separation of concerns (data vs. presentation). It means that markup wouldn't be the only way to define form layout; it can be data-driven.

<pragma-fields fields="..." layout="..." data="..."></pragma-fields>

If no layout is provided, it can be generated from the field set.

The real question is how different a layout object structure would look, and what they would be allowed to override. For example, it'd make sense for a layout field to override a field's input type, but probably not its actual data type.

[hexus]

Unsolved problem

Integrating Stencil with the webpack build process to avoid two separate pipelines and NPM projects. Ouch.

Unexplored problem

Mapping fields, in <pragma-form>, to arbitrary HTML elements. 🤔

Perhaps only:

• Map to known HTML5 inputs
• Also map to the field property of any element in case it understands Pragma fields. Doesn't feel great, but what else can be done?

[hexus]

A registerFieldElementMapping() method, or similar, on <pragma-form> might be the best way to do the latter, above. It would allow field mappings for custom elements can always be defined somehow.

[hexus]

Extending built-ins with Stencil: ionic-team/stencil#1382 (comment)