Functionally complete declarative templating #997
Description
Part of Declarative Web Application stack proposals. Following discourse thread Fully functional declarative template.
Proposing the templating engine which would fit into "classic" template definition.
template as reusable resource
Once declared, the template could be used as is. Unlike TEMPLATE in custom element, it can be reused without the need to be cloned on each instance.
For example, template could comprise just SVG image. This image would be reused without re-instantiation on each template use.
ways to define
As the TEMPLTE element does not fit into requirements, it can not be used without significant update comparable with switching from SCRIPT to script type="module". But the use of templating spread far beyond the inline template definition and as such the TEMPLATE alone is not sufficient. Here are some of template uses:
- inline. As the body of Declarative Custom Element definition
<element>🖼️</element>- inline with
id. As a template to be reused by other components.
<head><template id="reused-one">🖼️ </template></head>
<body><img src="#reused-one"/>... <include src="#reused-one"/>- external with local ID. Loaded on demand or by same deferred logic as SCRIPT. Note that ID in sample is local. There is no need to load the template without use or explicit instructions. While the template is loading, the fallback content is used.
<head> <template id="reused-one" src="template.html" > fallback content </template></head>
<body> <img src="#reused-one"/>... <include src="#reused-one"/>- inline INCLUDE, no need for IDs.
<body> <include src="template.html/>
complete functionality
full data access
including data and input traversing as loop and in the depth, conditions, constants, and custom functions.
rendering
data injection as into final DOM and attributes. as into owned data layer.
data injection
The data slice is outlined separately. Its internal presentation is hidden, exposed over (XPath) selector inside of template.
slice samples:
- DOM payload of template invocation element.
- context properties
- attributes of template invocation element
- window/page properties. URL, URL parameters, history, etc.
- external data. Covered in context of Declarative Custom Element.
http-request,local-storage, and other DCE-compliant custom elements would emit the dataslice.
slot
is a backward-compatible with SLOT in TEMPLATE. Internal implementation would treat named SLOT as own slice
modular development with namespace insulation
has to be supported by template engine in order to be sufficient for "mature" platform which would include parts from different vendors and versions. XSLT does fit the bill with XML namespaces, modularity, custom functions, etc.
asynchronous & streaming
for embedded, low-RAM, or low-CPU is critical to be able to
- defer the loading, initialization, and instantiation on demand. Be compliant with element hydration lifecycle.
- during loading, initialization, instantiation(s) be able to utilize the streaming so the final rendering could start as soon as sufficient initial data become available.
XSLT 3.0 fits the bill with streaming on import of template and streaming the transformation output while the template is still loading.
no side effects
is the principle of Declarative Web Application itself and its components. The template should NOT bring external JavaScript and any another script which is capable to interact (change the state) with page and external elements. Only its content is subject for processing/modification.
POC
Most of proposed features can be polyfilled with current browser stack. You can try it withing the Declarative Custom Element
proof of concept
@epa-wg/custom-element
Is based on native in browser XSLT implementation, backward compatible with TEMPLATE+SLOTS, no shadow DOM. Does provide DX transparency on data layer and dev tools for debugging.
This description is going to be modified to reflect the input. The clone of previous content will be added to the thread for reference.