Extract AMPPreactBaseElement

build-system/tasks/extension-helpers.js

@@ -742,12 +742,10 @@ async function getBentoBuildFilename(dir, name, mode, options) {
 function generateBentoEntryPointSource(name, toExport) {
   return dedent(`
     import {BaseElement} from '../base-element';
+    import {defineBentoElement} from '../../../../src/preact/bento-ce';
 
     function defineElement() {
-      customElements.define(
-        __name__,
-        BaseElement.CustomElement(BaseElement)
-      );
+      defineBentoElement(__name__, BaseElement);
     }
 
     ${toExport ? 'export {defineElement};' : 'defineElement();'}

build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js

@@ -1,12 +1,13 @@
 import {BaseElement} from './base-element';
 __css_import__;
 import {isExperimentOn} from '#experiments';
+import {AmpPreactBaseElement, setSuperClass} from '#preact/amp-base-element';
 import {userAssert} from '#utils/log';
 
 /** @const {string} */
 const TAG = 'amp-__component_name_hyphenated__';
 
-class Amp__component_name_pascalcase__ extends BaseElement {
+class Amp__component_name_pascalcase__ extends setSuperClass(BaseElement, AmpPreactBaseElement) {
   /** @override */
   init() {
     // __do_not_submit__: This is example code only.

build-system/test-configs/dep-check-config.js

@@ -223,8 +223,9 @@ exports.rules = [
       'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js',
       'extensions/amp-facebook-comments/0.1/amp-facebook-comments.js->extensions/amp-facebook/0.1/facebook-loader.js',
 
-      // VideoBaseElement, VideoIframe and VideoWrapper are meant to be shared.
+      // AmpVideoBaseElement, BentoVideoBaseElement, VideoIframe and VideoWrapper are meant to be shared.
       'extensions/**->extensions/amp-video/1.0/video-base-element.js',
+      'extensions/**->extensions/amp-video/1.0/base-element.js',
       'extensions/**->extensions/amp-video/1.0/video-iframe.js',
 
       // <amp-video-iframe> versions share this message API definition.

docs/building-a-bento-amp-extension.md

@@ -272,7 +272,7 @@ actionServiceForDoc(doc.documentElement).trigger(
   createCustomEvent(
     win,
     `amp-base-carousel.${name}`,
-    dict({'index': index})
+    {'index': index}
   ),
   ActionTrust.DEFAULT
 );
@@ -351,6 +351,8 @@ You must document your element's actions and events in its own reference documen
 The following shows the overall structure of your element implementation file (`extensions/amp-my-element/1.0/amp-my-element.js`). See [Experiments](#experiments) to make sure your component is experimentally gated if necessary.
 
 ```js
+import {AmpPreactBaseElement, setSuperClass} from '#preact/amp-base-element';
+
 import {func1, func2} from '../../../src/module';
 import {BaseElement} from './base-element'; // Preact base element.
 import {CSS} from '../../../build/amp-my-element-1.0.css';
@@ -362,7 +364,7 @@ const EXPERIMENT = 'amp-my-element';
 /** @const */
 const TAG = 'amp-my-element';
 
-class AmpMyElement extends BaseElement {
+class AmpMyElement extends setSuperClass(BaseElement, AmpPreactBaseElement) {
   /** @override */
   init() {
     // Perform any additional processing of prop values that are not
@@ -371,10 +373,10 @@ class AmpMyElement extends BaseElement {
     this.registerApiAction('close', (api) => api.close());
 
     const processedProp = parseInt(element.getAttribute('data-binary'), 2);
-    return dict({
+    return {
       'processedProp': processedProp,
-      'onClose': (event) => fireAmpEvent(event)}
-    );
+      'onClose': (event) => fireAmpEvent(event)
+    };
   }
 
   /** @override */

docs/building-a-bento-iframe-component.md

@@ -242,9 +242,9 @@ In your AMP element implementation, you will use `requestResize` to pass in the
 class AmpFantasticEmbed extends BaseElement {
   /** @override */
   init() {
-    return dict({
+    return {
       'requestResize': (height) => this.attemptChangeHeight(height),
-    });
+    };
   }
 }
 ```

docs/building-a-bento-video-player.md

@@ -14,7 +14,7 @@
 -   [How Video Player Components Work](#how-video-player-components-work)
 -   [Getting Started](#getting-started)
 -   [Directory Structure](#directory-structure)
--   [Extend `VideoBaseElement` for AMP](#extend-videobaseelement-for-amp)
+-   [Extend `AmpVideoBaseElement` for AMP](#extend-ampvideobaseelement-for-amp)
     -   [`props`](#props)
 -   [Define a Preact component](#define-a-preact-component)
     -   [Forwarding `ref`](#forwarding-ref)
@@ -51,7 +51,7 @@ However, most video players are embedded through an iframe so they should use **
 return <VideoIframe {...props}>
 ```
 
-To enable component support for **AMP documents**, our video player element must extend from a base class `VideoBaseElement`. This enables [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#amp-video-and-other-video-elements_1) and [analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md), and allows us to define further behavior specific to the AMP layer, like parsing element attributes into Preact props.
+To enable component support for **AMP documents**, our video player element must extend from a base class `AmpVideoBaseElement`. This enables [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#amp-video-and-other-video-elements_1) and [analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md), and allows us to define further behavior specific to the AMP layer, like parsing element attributes into Preact props.
 
 This guide covers how to implement video player components that are internally implemented using these Preact and AMP components.
 
@@ -75,17 +75,17 @@ A [full directory for a Bento component](./building-a-bento-amp-extension.md#dir
  └── amp-my-fantastic-player.css   # Custom CSS
 ```
 
-## Extend `VideoBaseElement` for AMP
+## Extend `AmpVideoBaseElement` for AMP
 
-Our `BaseElement` should be a superclass of `VideoBaseElement`. In **`base-element.js`**, we change:
+Our `BaseElement` should be a superclass of `BentoVideoBaseElement`. In **`base-element.js`**, we change:
 
 ```diff
   import {MyFantasticPlayer} from './component';
 - import {PreactBaseElement} from '#preact/base-element';
-+ import {VideoBaseElement} from '../../amp-video/1.0/video-base-element';
++ import {BentoVideoBaseElement} from '../../amp-video/1.0/base-element';
 
 - export class BaseElement extends PreactBaseElement {}
-+ export class BaseElement extends VideoBaseElement {}
++ export class BaseElement extends BentoVideoBaseElement {}
 ```
 
 into:
@@ -94,16 +94,37 @@ into:
 // base-element.js
 // ...
 import {MyFantasticPlayer} from './component';
-import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+import {BentoVideoBaseElement} from '../../amp-video/1.0/base-element';
 
-export class BaseElement extends VideoBaseElement {}
+export class BaseElement extends BentoVideoBaseElement {}
+```
+
+Our `AmpFantasticPlayer` should be a superclass of `AmpVideoBaseElement`. in amp-fantastic-player.js, we chagne:
+
+```diff
++ import {setSuperClass} from '#preact/amp-base-element';
+
++ import {AmpVideoBaseElement} from '../../amp-video/1.0/video-base-element';
+
+- class AmpFantasticPlayer extends BaseElement {}
++ class AmpFantasticPlayer extends setSuperClass(BaseElement, AmpVideoBaseElement) {}
+```
+
+into:
+
+```js
+import {setSuperClass} from '#preact/amp-base-element';
+
+import {AmpVideoBaseElement} from '../../amp-video/1.0/video-base-element';
+
+class AmpFantasticPlayer extends setSuperClass(BaseElement, AmpVideoBaseElement) {}
 ```
 
 This enables support for AMP actions and analytics, once we map attributes to their prop counterparts in `BaseElement['props']`, and we implement the Preact component.
 
 ### `props`
 
-[**`props`**](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-amp-extension.md#preactbaseelementprops) map the AMP element's attributes to the Preact component props. Take a look at [`VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for how most video properties are mapped. On your own `base-element.js`, you should specify any of them you support.
+[**`props`**](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-amp-extension.md#preactbaseelementprops) map the AMP element's attributes to the Preact component props. Take a look at [`AmpVideoBaseElement`](../extensions/amp-video/1.0/video-base-element.js) for how most video properties are mapped. On your own `base-element.js`, you should specify any of them you support.
 
 ```js
 // base-element.js
@@ -510,7 +531,7 @@ When we click the following button on an AMP document:
 
 We call the corresponding function `play`:
 
-> The AMP action `my-element.play` is declared to be forwarded to the Preact component's method. See the [`init()` method on `VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for a list of the supported actions.
+> The AMP action `my-element.play` is declared to be forwarded to the Preact component's method. See the [`init()` method on `AmpVideoBaseElement`](../extensions/amp-video/1.0/video-base-element.js) for a list of the supported actions.
 
 ```
 -> FantasticPlayer.play()

extensions/amp-accordion/1.0/amp-accordion.js

@@ -3,6 +3,8 @@ import {getWin} from '#core/window';
 
 import {isExperimentOn} from '#experiments';
 
+import {AmpPreactBaseElement, setSuperClass} from '#preact/amp-base-element';
+
 import {Services} from '#service';
 
 import {createCustomEvent} from '#utils/event-helper';
@@ -16,7 +18,7 @@ import {CSS} from '../../../build/amp-accordion-1.0.css';
 const TAG = 'amp-accordion';
 
 /** @extends {PreactBaseElement<BentoAccordionDef.AccordionApi>} */
-class AmpAccordion extends BaseElement {
+class AmpAccordion extends setSuperClass(BaseElement, AmpPreactBaseElement) {
   /** @override */
   init() {
     this.registerApiAction('toggle', (api, invocation) =>