♻️ [bento][amp-stream-gallery] Split component files for NPM Packaging

build-system/compile/bundles.config.extensions.json

@@ -646,9 +646,20 @@
   },
   {
     "name": "amp-stream-gallery",
-    "version": ["0.1", "1.0"],
-    "latestVersion": "1.0",
-    "options": {"hasCss": true}
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true
+    }
+  },
+  {
+    "name": "amp-stream-gallery",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
   },
   {
     "name": "amp-subscriptions",

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

@@ -232,8 +232,8 @@ exports.rules = [
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/responsive-attributes.js',
-      'extensions/amp-stream-gallery/1.0/amp-stream-gallery.js->extensions/amp-base-carousel/1.0/base-carousel.jss.js',
-      'extensions/amp-stream-gallery/1.0/stream-gallery.js->extensions/amp-base-carousel/1.0/base-carousel.js',
+      'extensions/amp-stream-gallery/1.0/base-element.js->extensions/amp-base-carousel/1.0/base-carousel.jss.js',
+      'extensions/amp-stream-gallery/1.0/component.js->extensions/amp-base-carousel/1.0/base-carousel.js',
 
       // Autolightboxing dependencies
       'extensions/amp-base-carousel/1.0/base-carousel.js->extensions/amp-lightbox-gallery/1.0/component.js',

css/Z_INDEX.md

@@ -141,7 +141,7 @@
 `amp-story-page[active]` | 1 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
 `.i-amphtml-stream-gallery-next` | 1 | [extensions/amp-stream-gallery/0.1/arrows.css](/extensions/amp-stream-gallery/0.1/arrows.css)
 `.i-amphtml-stream-gallery-prev` | 1 | [extensions/amp-stream-gallery/0.1/arrows.css](/extensions/amp-stream-gallery/0.1/arrows.css)
-`arrow` | 1 | [extensions/amp-stream-gallery/1.0/stream-gallery.jss.js](/extensions/amp-stream-gallery/1.0/stream-gallery.jss.js)
+`arrow` | 1 | [extensions/amp-stream-gallery/1.0/component.jss.js](/extensions/amp-stream-gallery/1.0/component.jss.js)
 `eq` | 1 | [extensions/amp-video/1.0/autoplay.jss.js](/extensions/amp-video/1.0/autoplay.jss.js)
 `.i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:after` | 0 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)
 `0%` | 0 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)

extensions/amp-stream-gallery/1.0/amp-stream-gallery.js

@@ -15,25 +15,20 @@
  */
 
 import {ActionTrust} from '../../../src/core/constants/action-constants';
-import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/base-carousel.jss';
+import {BaseElement} from './base-element';
 import {CSS} from '../../../build/amp-stream-gallery-1.0.css';
-import {CSS as GALLERY_CSS} from './stream-gallery.jss';
-import {PreactBaseElement} from '../../../src/preact/base-element';
 import {Services} from '../../../src/services';
-import {StreamGallery} from './stream-gallery';
 import {createCustomEvent} from '../../../src/event-helper';
-import {dict} from '../../../src/core/types/object';
-import {dispatchCustomEvent} from '../../../src/dom';
 import {isExperimentOn} from '../../../src/experiments';
+import {toWin} from '../../../src/types';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-stream-gallery';
 
-class AmpStreamGallery extends PreactBaseElement {
+class AmpStreamGallery extends BaseElement {
   /** @override */
   init() {
-    const {element} = this;
     this.registerApiAction('prev', (api) => api.prev(), ActionTrust.LOW);
     this.registerApiAction('next', (api) => api.next(), ActionTrust.LOW);
     this.registerApiAction(
@@ -45,11 +40,7 @@ class AmpStreamGallery extends PreactBaseElement {
       ActionTrust.LOW
     );
 
-    return dict({
-      'onSlideChange': (index) => {
-        fireSlideChangeEvent(this.win, element, index, ActionTrust.HIGH);
-      },
-    });
+    return super.init();
   }
 
   /** @override */
@@ -61,74 +52,24 @@ class AmpStreamGallery extends PreactBaseElement {
     );
     return super.isLayoutSupported(layout);
   }
-}
-
-/**
- * Triggers a 'slideChange' event with one data param:
- * 'index' - index of the current slide.
- * @param {!Window} win
- * @param {!Element} el The element that was selected or deslected.
- * @param {number} index
- * @param {!ActionTrust} trust
- * @private
- */
-function fireSlideChangeEvent(win, el, index, trust) {
-  const eventName = 'slideChange';
-  const data = dict({'index': index});
-  const slideChangeEvent = createCustomEvent(
-    win,
-    `amp-stream-gallery.${eventName}`,
-    data
-  );
-  Services.actionServiceForDoc(el).trigger(
-    el,
-    eventName,
-    slideChangeEvent,
-    trust
-  );
-  dispatchCustomEvent(el, eventName, data);
-}
-
-/** @override */
-AmpStreamGallery['Component'] = StreamGallery;
 
-/** @override */
-AmpStreamGallery['layoutSizeDefined'] = true;
-
-/** @override */
-AmpStreamGallery['props'] = {
-  'arrowPrevAs': {
-    selector: '[slot="prev-arrow"]',
-    single: true,
-    as: true,
-  },
-  'arrowNextAs': {
-    selector: '[slot="next-arrow"]',
-    single: true,
-    as: true,
-  },
-  'controls': {attr: 'controls', type: 'string', media: true},
-  'extraSpace': {attr: 'extra-space', type: 'string', media: true},
-  'loop': {attr: 'loop', type: 'boolean', media: true},
-  'minItemWidth': {attr: 'min-item-width', type: 'number', media: true},
-  'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true},
-  'maxVisibleCount': {attr: 'max-visible-count', type: 'number', media: true},
-  'minVisibleCount': {attr: 'min-visible-count', type: 'number', media: true},
-  'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true},
-  'peek': {attr: 'peek', type: 'number', media: true},
-  'slideAlign': {attr: 'slide-align', type: 'string', media: true},
-  'snap': {attr: 'snap', type: 'boolean', media: true},
-  'children': {
-    selector: '*', // This should be last as catch-all.
-    single: false,
-  },
-};
-
-/** @override */
-AmpStreamGallery['usesShadowDom'] = true;
+  /** @override */
+  triggerEvent(element, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(element.ownerDocument.defaultView),
+      `amp-stream-gallery.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(element).trigger(
+      element,
+      eventName,
+      event,
+      ActionTrust.HIGH
+    );
 
-/** @override */
-AmpStreamGallery['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS;
+    super.triggerEvent(element, eventName, detail);
+  }
+}
 
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpStreamGallery, CSS);

extensions/amp-stream-gallery/1.0/base-element.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/base-carousel.jss';
+import {CSS as GALLERY_CSS} from './component.jss';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {StreamGallery} from './component';
+import {dict} from '../../../src/core/types/object';
+
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    const {element} = this;
+    return dict({
+      'onSlideChange': (index) => {
+        this.triggerEvent(element, 'slideChange', dict({'index': index}));
+      },
+    });
+  }
+}
+
+/** @override */
+BaseElement['Component'] = StreamGallery;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'arrowPrevAs': {
+    selector: '[slot="prev-arrow"]',
+    single: true,
+    as: true,
+  },
+  'arrowNextAs': {
+    selector: '[slot="next-arrow"]',
+    single: true,
+    as: true,
+  },
+  'controls': {attr: 'controls', type: 'string', media: true},
+  'extraSpace': {attr: 'extra-space', type: 'string', media: true},
+  'loop': {attr: 'loop', type: 'boolean', media: true},
+  'minItemWidth': {attr: 'min-item-width', type: 'number', media: true},
+  'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true},
+  'maxVisibleCount': {attr: 'max-visible-count', type: 'number', media: true},
+  'minVisibleCount': {attr: 'min-visible-count', type: 'number', media: true},
+  'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true},
+  'peek': {attr: 'peek', type: 'number', media: true},
+  'slideAlign': {attr: 'slide-align', type: 'string', media: true},
+  'snap': {attr: 'snap', type: 'boolean', media: true},
+  'children': {
+    selector: '*', // This should be last as catch-all.
+    single: false,
+  },
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS;

extensions/amp-stream-gallery/1.0/stream-gallery.js → extensions/amp-stream-gallery/1.0/component.js

@@ -26,7 +26,7 @@ import {
   useRef,
   useState,
 } from '../../../src/preact';
-import {useStyles} from './stream-gallery.jss';
+import {useStyles} from './component.jss';
 import objstr from 'obj-str';
 
 const DEFAULT_VISIBLE_COUNT = 1;

extensions/amp-stream-gallery/1.0/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-stream-gallery",
+  "version": "VERSION",
+  "description": "AMP Stream Gallery Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "dist/component.js",
+  "module": "dist/component.mjs",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "dist/component-preact.mjs",
+      "require": "dist/component-preact.js"
+    },
+    "./react": {
+      "import": "dist/component-react.mjs",
+      "require": "dist/component-react.js"
+    }
+  },
+  "files": ["dist/*"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-stream-gallery/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}

extensions/amp-stream-gallery/1.0/storybook/Basic.js

@@ -15,7 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {StreamGallery} from '../stream-gallery';
+import {StreamGallery} from '../component';
 import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 
 const CONTROLS = ['auto', 'always', 'never'];

extensions/amp-stream-gallery/1.0/test/test-stream-gallery.js → extensions/amp-stream-gallery/1.0/test/test-component.js

@@ -15,7 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {StreamGallery} from '../stream-gallery';
+import {StreamGallery} from '../component';
 import {mount} from 'enzyme';
 
 describes.sandboxed('StreamGallery preact component', {}, () => {