Dojo Templating

[agubler]

Enhancement

Defining the view of Dojo widgets has two distinct approaches, using the functional API (v(), w()) and TSX. These approaches work well, however it would be nice if we could offer a templating syntax for users that are more familiar with writing HTML or for using existing HTML structures within a Dojo Application.

Proposal

Full reactive templating system for working with Dojo built on the existing VDOM rendering engine and middleware pattern. Supporting conditional logic such as if, loops and custom API injected via a templating middleware.

Example Template:

<d:template name="hello">
  <section class="root">
    <div>
      <article>
        <h2>Dojo Templating</h2>
        <div>{ $.widgetProperty }</div>
        <d:widget src="../Bar" />
      </article>
   </div>
  </section>
</d:template>

A proof of concept the demonstrates templating that could be possible with Dojo: https://codesandbox.io/s/my-first-blog-0dlvc

Changes Required

• Dojo templating syntax design
• Dojo templating implementation
• CSS module and theming support
• Typing support for templates
• Build support for templates
• Testing support for templates

Package Version: Dojo 7