diff --git a/proposals/Expression-Templates.md b/proposals/Expression-Templates.md new file mode 100644 index 0000000..d66ef32 --- /dev/null +++ b/proposals/Expression-Templates.md @@ -0,0 +1,68 @@ +# HTML Templates As Microtemplates With Expressions + +## Background + +The HTML Template element has proven many of its skeptics wrong, establishing itself as a powerful tool in modern web development and more than able to hold its own against template engines like [Pug] and [Mustache] in a more web-friendly manner. One of the few things that template elements lack is a way of handling simple logic like `if` or `foreach` expressions. This is entirely understandable: Mustache adopts the most conservative position possible by limiting itself to just those two expressions, and even then it immediately makes their inherent drawback obvious: they require dedicated syntax. A template engine has to decide on a semantic syntax it wants to use and must there-after adhere to it; no second guessing. + +Most proposals for filling in the missing gaps with template elements envision standardizing a syntax similar to Mustache or some similar alternative. This proposal offers a different route: a standardized API for handling template element expressions with directives. + +```html + +``` + +## API + +> NOTE: This is written in TypeScript instead of IDL for the sake of simplicity. + +```ts +type TemplateExpressionCallback = (node: Node, expression: string[]) => void; + +interface TemplateExpressionCallbackObject { + processDirectiveCallback(node: Node, expression: string[]): void; +} + +type TemplateExpressionCallbackOrCallbackObject = TemplateExpressionCallback | TemplateExpressionCallbackObject; + +class TemplateExpressionRegistry { + has(directive: string): boolean; + register(directive: string, TemplateExpressionCallbackOrCallbackObject): void; + + static create(...registries: TemplateExpressionRegistry[]): TemplateExpressionRegistry; +} + +interface Document { + defineTemplateExpressions(name: string, registry: TemplateExpressionRegistry): void; +} + +interface HTMLTemplateElement { + defineTemplateExpressions(name: string, registry: TemplateExpressionRegistry): void; +} +``` + +## Explanation + +### Logic + +When the user agent encounters a `