Netflix / x-element

A dead simple starting point for custom elements.
Apache License 2.0
28 stars 12 forks source link

Decouple templating engine from “x-element”. #119

Closed theengineear closed 1 year ago

theengineear commented 2 years ago

This makes the following changes:

  1. The library no longer declares any dependencies.
  2. A new, default template engine is provided.
  3. Integrators may self-configure the templating engine to be used.
  4. Adds TypeScript “x-element.d.ts” declarations.

Closes #105. Closes #113. Closes #115. Closes #121. Closes #122.
Closes #124. Closes #131.


To get back to exactly the prior interface, you can import lit-html and plug it back in yourself:

import XElement from '../../x-element.js';
import { asyncAppend } from '../../lit-html/directives/async-append.js';
import { asyncReplace } from '../../lit-html/directives/async-replace.js';
import { cache } from '../../lit-html/directives/cache.js';
import { classMap } from '../../lit-html/directives/class-map.js';
import { directive } from '../../lit-html/directive.js';
import { guard } from '../../lit-html/directives/guard.js';
import { html, render as originalRender, svg } from '../../lit-html/lit-html.js';
import { ifDefined } from '../../lit-html/directives/if-defined.js';
import { live } from '../../lit-html/directives/live.js';
import { repeat } from '../../lit-html/directives/repeat.js';
import { styleMap } from '../../lit-html/directives/style-map.js';
import { templateContent } from '../../lit-html/directives/template-content.js';
import { unsafeHTML } from '../../lit-html/directives/unsafe-html.js';
import { unsafeSVG } from '../../lit-html/directives/unsafe-svg.js';
import { until } from '../../lit-html/directives/until.js';

export default class BaseElement extends XElement {
  // Use lit-html's template engine rather than the built-in x-element engine.
  static get templateEngine() {
    const render = (container, template) => originalRender(template, container);
    return {
      render, html, svg, asyncAppend, asyncReplace, cache, classMap, directive,
      guard, ifDefined, live, repeat, styleMap, templateContent, unsafeHTML,
      unsafeSVG, until,
    };
  }
}
theengineear commented 1 year ago

Alright, after all that suspense — going to merge (based on prior approval). Zero dependencies, here we come!