✨ Mustache service for Bento standalone components (#37584)

extensions/amp-date-countdown/1.0/base-element.js

@@ -4,6 +4,8 @@ import {PreactBaseElement} from '#preact/base-element';
 
 import {BentoDateCountdown} from './component';
 
+export const TAG = 'bento-date-countdown';
+
 export class BaseElement extends PreactBaseElement {}
 
 /** @override */

extensions/amp-date-countdown/1.0/bento-date-countdown.js

@@ -0,0 +1,3 @@
+import {defineElement} from './web-component';
+
+defineElement();

extensions/amp-date-countdown/1.0/web-component.js

@@ -0,0 +1,31 @@
+import mustache from '#bento/components/bento-mustache/1.0/bento-mustache';
+import {getTemplate} from '#bento/util/template';
+
+import {defineBentoElement} from '#preact/bento-ce';
+
+import {BaseElement, TAG} from './base-element';
+
+export class BentoDateCountdown extends BaseElement {
+  /** @override */
+  checkPropsPostMutations() {
+    const template = getTemplate(this.element);
+    if (!template) {
+      // show error?
+      return;
+    }
+
+    this.mutateProps({
+      'render': (data) => {
+        const html = mustache.render(template./*OK*/ innerHTML, data);
+        return {'__html': html};
+      },
+    });
+  }
+}
+
+/**
+ * Registers `<bento-date-countdown>` component to CustomElements registry
+ */
+export function defineElement() {
+  defineBentoElement(TAG, BentoDateCountdown);
+}

extensions/amp-date-display/1.0/base-element.js

@@ -5,6 +5,8 @@ import {createParseAttrsWithPrefix} from '#preact/parse-props';
 
 import {BentoDateDisplay} from './component';
 
+export const TAG = 'bento-date-display';
+
 export class BaseElement extends PreactBaseElement {}
 
 /** @override */

extensions/amp-date-display/1.0/bento-date-display.js

@@ -0,0 +1,3 @@
+import {defineElement} from './web-component';
+
+defineElement();

extensions/amp-date-display/1.0/web-component.js

@@ -0,0 +1,31 @@
+import mustache from '#bento/components/bento-mustache/1.0/bento-mustache';
+import {getTemplate} from '#bento/util/template';
+
+import {defineBentoElement} from '#preact/bento-ce';
+
+import {BaseElement, TAG} from './base-element';
+
+export class BentoDateDisplay extends BaseElement {
+  /** @override */
+  checkPropsPostMutations() {
+    const template = getTemplate(this.element);
+    if (!template) {
+      // show error?
+      return;
+    }
+
+    this.mutateProps({
+      'render': (data) => {
+        const html = mustache.render(template./*OK*/ innerHTML, data);
+        return {'__html': html};
+      },
+    });
+  }
+}
+
+/**
+ * Registers `<bento-date-display>` component to CustomElements registry
+ */
+export function defineElement() {
+  defineBentoElement(TAG, BentoDateDisplay);
+}

src/bento/components/bento-mustache/1.0/bento-mustache.js

@@ -0,0 +1,5 @@
+// Bento components must import `bento-mustache.js` instead of `mustache` directly.
+// This is so that the bundler links it to the external `bento-mustache.js` binary.
+import mustache from '#third_party/mustache/mustache';
+
+export default mustache;

src/bento/util/template.js

@@ -0,0 +1,18 @@
+import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @return {HTMLTemplateElement|null}
+ */
+export function getTemplate(element, attribute = 'template') {
+  if (element.hasAttribute(attribute)) {
+    const id = element.getAttribute(attribute);
+    return Boolean(id)
+      ? element.ownerDocument.querySelector(
+          `template#${escapeCssSelectorIdent(id)}`
+        )
+      : null;
+  }
+  return element.querySelector('template');
+}