Bento export many comps (#36866)

* export all facebook comps

* export all embedly-card comps

* install pagination css for inline-gallery

* remove style because they're not necessary anymore

* implement base amp facebook mixin to support multiple inheritance from AmpFacebook and Base Facebook Elements

extensions/amp-embedly-card/1.0/amp-embedly-key.js

@@ -2,14 +2,14 @@ import {Layout} from '#core/dom/layout';
 
 import {isExperimentOn} from '#experiments';
 
-import {PreactBaseElement} from '#preact/base-element';
-
 import {userAssert} from '#utils/log';
 
+import {EmbedlyKeyBaseElement} from './key-base-element';
+
 /** @const {string} */
 export const TAG = 'amp-embedly-key';
 
-export class AmpEmbedlyKey extends PreactBaseElement {
+export class AmpEmbedlyKey extends EmbedlyKeyBaseElement {
   /** @override */
   isLayoutSupported(layout) {
     userAssert(

extensions/amp-embedly-card/1.0/base-element.js

@@ -4,6 +4,8 @@ import {PreactBaseElement} from '#preact/base-element';
 import {BentoEmbedlyCard} from './component';
 import {BentoEmbedlyContext} from './embedly-context';
 
+export const BENTO_TAG = 'bento-embedly-card';
+
 export class BaseElement extends PreactBaseElement {}
 
 /** @override */

extensions/amp-embedly-card/1.0/bento-embedly-card.js

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

extensions/amp-embedly-card/1.0/key-base-element.js

@@ -0,0 +1,5 @@
+import {PreactBaseElement} from '#preact/base-element';
+
+export const BENTO_TAG = 'bento-embedly-key';
+
+export class EmbedlyKeyBaseElement extends PreactBaseElement {}

extensions/amp-embedly-card/1.0/web-component.js

@@ -0,0 +1,23 @@
+import {BENTO_TAG, BaseElement} from './base-element';
+import {
+  BENTO_TAG as EMBEDLY_KEY_BENTO_TAG,
+  EmbedlyKeyBaseElement,
+} from './key-base-element';
+
+/**
+ * Registers `<bento-embedly-card> component to CustomElements registry
+ */
+export function defineElement() {
+  customElements.define(BENTO_TAG, BaseElement.CustomElement(BaseElement));
+  defineElementEmbedlyKey();
+}
+
+/**
+ * Registers <bento-embedly-key>` component to CustomElements registry
+ */
+export function defineElementEmbedlyKey() {
+  customElements.define(
+    EMBEDLY_KEY_BENTO_TAG,
+    EmbedlyKeyBaseElement.CustomElement(EmbedlyKeyBaseElement)
+  );
+}

extensions/amp-facebook/1.0/amp-facebook.js

@@ -1,4 +1,9 @@
-import {BaseElement} from './base-element';
+import {
+  BaseElement,
+  CommentsBaseElement,
+  LikeBaseElement,
+  PageBaseElement,
+} from './base-element';
 import {createLoaderLogo} from '../0.1/facebook-loader';
 import {dashToUnderline} from '#core/types/string';
 import {dict} from '#core/types/object';
@@ -13,90 +18,62 @@ const LIKE_TAG = 'amp-facebook-like';
 const PAGE_TAG = 'amp-facebook-page';
 const TYPE = 'facebook';
 
-class AmpFacebook extends BaseElement {
-  /** @override @nocollapse */
-  static createLoaderLogoCallback(element) {
-    return createLoaderLogo(element);
-  }
-
-  /** @override @nocollapse */
-  static getPreconnects(element) {
-    const ampdoc = element.getAmpDoc();
-    const {win} = ampdoc;
-    const locale = element.hasAttribute('data-locale')
-      ? element.getAttribute('data-locale')
-      : dashToUnderline(window.navigator.language);
-    return [
-      // Base URL for 3p bootstrap iframes
-      getBootstrapBaseUrl(win, ampdoc),
-      // Script URL for iframe
-      getBootstrapUrl(TYPE),
-      'https://facebook.com',
-      // This domain serves the actual tweets as JSONP.
-      'https://connect.facebook.net/' + locale + '/sdk.js',
-    ];
-  }
-
-  /** @override */
-  init() {
-    return dict({
-      'requestResize': (height) => this.attemptChangeHeight(height),
-    });
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    userAssert(
-      isExperimentOn(this.win, 'bento') ||
-        isExperimentOn(this.win, 'bento-facebook'),
-      'expected global "bento" or specific "bento-facebook" experiment to be enabled'
-    );
-    return super.isLayoutSupported(layout);
-  }
-}
-
 /**
- * Checks for valid data-embed-as attribute when given.
- * @param {!Element} element
- * @return {string}
+ * Mixin to implement base amp functionality for all facebook components
+ * @param {*} clazz1
+ * @return {*} mixin
  */
-function parseEmbed(element) {
-  const embedAs = element.getAttribute('data-embed-as');
-  userAssert(
-    !embedAs ||
-      ['post', 'video', 'comment', 'comments', 'like', 'page'].indexOf(
-        embedAs
-      ) !== -1,
-    'Attribute data-embed-as for <amp-facebook> value is wrong, should be' +
-      ' "post", "video", "comment", "comments", "like", or "page", but was: %s',
-    embedAs
-  );
-  return embedAs;
-}
+function AmpFacebookMixin(clazz1) {
+  return class extends clazz1 {
+    /** @override @nocollapse */
+    static createLoaderLogoCallback(element) {
+      return createLoaderLogo(element);
+    }
 
-/** @override */
-AmpFacebook['props'] = {
-  ...BaseElement['props'],
-  'embedAs': {
-    attrs: ['data-embed-as'],
-    parseAttrs: parseEmbed,
-  },
-};
+    /** @override @nocollapse */
+    static getPreconnects(element) {
+      const ampdoc = element.getAmpDoc();
+      const {win} = ampdoc;
+      const locale = element.hasAttribute('data-locale')
+        ? element.getAttribute('data-locale')
+        : dashToUnderline(window.navigator.language);
+      return [
+        // Base URL for 3p bootstrap iframes
+        getBootstrapBaseUrl(win, ampdoc),
+        // Script URL for iframe
+        getBootstrapUrl(TYPE),
+        'https://facebook.com',
+        // This domain serves the actual tweets as JSONP.
+        'https://connect.facebook.net/' + locale + '/sdk.js',
+      ];
+    }
 
-class AmpFacebookComments extends AmpFacebook {}
+    /** @override */
+    init() {
+      return dict({
+        'requestResize': (height) => this.attemptChangeHeight(height),
+      });
+    }
 
-/** @override */
-AmpFacebookComments['staticProps'] = {'embedAs': 'comments'};
+    /** @override */
+    isLayoutSupported(layout) {
+      userAssert(
+        isExperimentOn(this.win, 'bento') ||
+          isExperimentOn(this.win, 'bento-facebook'),
+        'expected global "bento" or specific "bento-facebook" experiment to be enabled'
+      );
+      return super.isLayoutSupported(layout);
+    }
+  };
+}
 
-class AmpFacebookLike extends AmpFacebook {}
+class AmpFacebook extends AmpFacebookMixin(BaseElement) {}
 
-/** @override */
-AmpFacebookLike['staticProps'] = {'embedAs': 'like'};
+class AmpFacebookComments extends AmpFacebookMixin(CommentsBaseElement) {}
 
-class AmpFacebookPage extends AmpFacebook {}
+class AmpFacebookLike extends AmpFacebookMixin(LikeBaseElement) {}
 
-/** @override */
-AmpFacebookPage['staticProps'] = {'embedAs': 'page'};
+class AmpFacebookPage extends AmpFacebookMixin(PageBaseElement) {}
 
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpFacebook);

extensions/amp-facebook/1.0/base-element.js

@@ -1,6 +1,13 @@
-import {BentoFacebook} from './component';
-import {PreactBaseElement} from '#preact/base-element';
+import {userAssert} from '#core/assert';
 import {dashToUnderline} from '#core/types/string';
+import {PreactBaseElement} from '#preact/base-element';
+import {BentoFacebook} from './component';
+
+/** @const {string} */
+export const TAG = 'bento-facebook';
+export const COMMENTS_TAG = 'bento-facebook-comments';
+export const LIKE_TAG = 'bento-facebook-like';
+export const PAGE_TAG = 'bento-facebook-page';
 
 export class BaseElement extends PreactBaseElement {}
 
@@ -18,7 +25,7 @@ BaseElement['props'] = {
   },
   // amp-facebook
   'allowFullScreen': {attr: 'data-allowfullscreen'},
-  'embedAs': {attr: 'data-embed-as'},
+  'embedAs': {attrs: ['data-embed-as'], parseAttrs: parseEmbed},
   'includeCommentParent': {
     attr: 'data-include-comment-parent',
     type: 'boolean',
@@ -45,8 +52,36 @@ BaseElement['props'] = {
   'tabs': {attr: 'data-tabs'},
 };
 
+/**
+ * Checks for valid data-embed-as attribute when given.
+ * @param {!Element} element
+ * @return {string}
+ */
+function parseEmbed(element) {
+  const embedAs = element.getAttribute('data-embed-as');
+  userAssert(
+    !embedAs ||
+      ['post', 'video', 'comment', 'comments', 'like', 'page'].indexOf(
+        embedAs
+      ) !== -1,
+    'Attribute data-embed-as for <amp-facebook> value is wrong, should be' +
+      ' "post", "video", "comment", "comments", "like", or "page", but was: %s',
+    embedAs
+  );
+  return embedAs;
+}
+
 /** @override */
 BaseElement['layoutSizeDefined'] = true;
 
 /** @override */
 BaseElement['usesShadowDom'] = true;
+
+export class CommentsBaseElement extends BaseElement {}
+CommentsBaseElement['staticProps'] = {'embedAs': 'comments'};
+
+export class LikeBaseElement extends BaseElement {}
+LikeBaseElement['staticProps'] = {'embedAs': 'like'};
+
+export class PageBaseElement extends BaseElement {}
+PageBaseElement['staticProps'] = {'embedAs': 'page'};

extensions/amp-facebook/1.0/bento-facebook.js

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

extensions/amp-facebook/1.0/web-component.js

@@ -0,0 +1,51 @@
+import {
+  BaseElement,
+  COMMENTS_TAG,
+  CommentsBaseElement,
+  LIKE_TAG,
+  LikeBaseElement,
+  PAGE_TAG,
+  PageBaseElement,
+  TAG,
+} from './base-element';
+
+/**
+ *Register BentoFacebook component to CustomElements registry
+ */
+export function defineElement() {
+  customElements.define(TAG, BaseElement.CustomElement(BaseElement));
+
+  defineCommentsElement();
+  defineLikeElement();
+  definePageElement();
+}
+
+/**
+ * Register BentoFacebookComments component to CustomElements registry
+ */
+export function defineCommentsElement() {
+  customElements.define(
+    COMMENTS_TAG,
+    CommentsBaseElement.CustomElement(CommentsBaseElement)
+  );
+}
+
+/**
+ * Register BentoFacebook component to CustomElements registry
+ */
+export function defineLikeElement() {
+  customElements.define(
+    LIKE_TAG,
+    LikeBaseElement.CustomElement(LikeBaseElement)
+  );
+}
+
+/**
+ * Register BentoFacebook component to CustomElements registry
+ */
+export function definePageElement() {
+  customElements.define(
+    PAGE_TAG,
+    PageBaseElement.CustomElement(PageBaseElement)
+  );
+}