Skip to content

Commit

Permalink
♻️ [bento][amp-stream-gallery] Split component files for NPM Packaging (
Browse files Browse the repository at this point in the history
ampproject#34208)

* Split amp-stream-gallery

* Rename jss and type files

* Review comments

* Add package.json file

* Fix indentation

* Update npm and latest version in config

* Update dependency config

* Update zindex doc

* Update npm definition
  • Loading branch information
krdwan authored and rochapablo committed Aug 30, 2021
1 parent be011c7 commit b102d34
Show file tree
Hide file tree
Showing 11 changed files with 145 additions and 88 deletions.
17 changes: 14 additions & 3 deletions build-system/compile/bundles.config.extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -584,9 +584,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",
Expand Down
4 changes: 2 additions & 2 deletions build-system/test-configs/dep-check-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion css/Z_INDEX.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
99 changes: 20 additions & 79 deletions extensions/amp-stream-gallery/1.0/amp-stream-gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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 */
Expand All @@ -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);
Expand Down
74 changes: 74 additions & 0 deletions extensions/amp-stream-gallery/1.0/base-element.js
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
31 changes: 31 additions & 0 deletions extensions/amp-stream-gallery/1.0/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
2 changes: 1 addition & 1 deletion extensions/amp-stream-gallery/1.0/storybook/Basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', {}, () => {
Expand Down

0 comments on commit b102d34

Please sign in to comment.