From 823414feb43d34d4c2d6d8dbaea5ed073123e7a7 Mon Sep 17 00:00:00 2001 From: Dhruv Manek Date: Fri, 24 Sep 2021 10:09:01 -0700 Subject: [PATCH 1/7] WIP --- extensions/amp-iframe/amp-iframe.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/extensions/amp-iframe/amp-iframe.md b/extensions/amp-iframe/amp-iframe.md index f5eaeb8cac3b..2a87e6e80761 100644 --- a/extensions/amp-iframe/amp-iframe.md +++ b/extensions/amp-iframe/amp-iframe.md @@ -92,6 +92,10 @@ The reasons for this policy are that: - `amp-iframe` has no fully iframe controlled resize mechanism. - Viewability information may not be available to `amp-iframe`. +### Standalone use outside valid AMP documents + +Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/). To find the standalone version of `amp-my-element`, see [`bento-my-element`](./1.0/README.md). + ### Iframe with placeholder It is possible to have an `amp-iframe` appear at the top of a document when the @@ -243,7 +247,8 @@ window.addEventListener('message', function (event) { The intersection message would be sent by the parent to the iframe in the format of IntersectionObserver entry wheneve there is intersectionRatio change across thresholds [0, 0.05, 0.1, ... 0.9, 0.95, 1]. -## Iframe & Consent Data + + ## Attributes From 4b324a72fb1db8bb038b6fb485386c3fafa4839c Mon Sep 17 00:00:00 2001 From: Dhruv Manek Date: Tue, 28 Sep 2021 14:22:52 -0700 Subject: [PATCH 2/7] 1. Rename IFrame to BentoIframe 2. Changes for npm publishing --- .../compile/bundles.config.extensions.json | 1 + extensions/amp-iframe/1.0/base-element.js | 4 ++-- extensions/amp-iframe/1.0/component.js | 4 ++-- extensions/amp-iframe/1.0/component.type.js | 4 ++-- extensions/amp-iframe/1.0/storybook/Basic.js | 16 ++++++++-------- extensions/amp-iframe/1.0/test/test-component.js | 14 +++++++------- 6 files changed, 22 insertions(+), 21 deletions(-) diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json index 58a8f725fdd2..b2a09eba390e 100644 --- a/build-system/compile/bundles.config.extensions.json +++ b/build-system/compile/bundles.config.extensions.json @@ -479,6 +479,7 @@ "version": "1.0", "latestVersion": "0.1", "options": { + "npm": true, "wrapper": "bento" } }, diff --git a/extensions/amp-iframe/1.0/base-element.js b/extensions/amp-iframe/1.0/base-element.js index 4d2001ed961a..c8f57c57e4ce 100644 --- a/extensions/amp-iframe/1.0/base-element.js +++ b/extensions/amp-iframe/1.0/base-element.js @@ -1,10 +1,10 @@ -import {Iframe} from './component'; +import {BentoIframe} from './component'; import {PreactBaseElement} from '#preact/base-element'; export class BaseElement extends PreactBaseElement {} /** @override */ -BaseElement['Component'] = Iframe; +BaseElement['Component'] = BentoIframe; /** @override */ BaseElement['props'] = { diff --git a/extensions/amp-iframe/1.0/component.js b/extensions/amp-iframe/1.0/component.js index da44d0efbd14..b5d2b003c3c0 100644 --- a/extensions/amp-iframe/1.0/component.js +++ b/extensions/amp-iframe/1.0/component.js @@ -9,10 +9,10 @@ import {useMergeRefs} from '#preact/utils'; const NOOP = () => {}; /** - * @param {!IframeDef.Props} props + * @param {!BentoIframeDef.Props} props * @return {PreactDef.Renderable} */ -export function Iframe({ +export function BentoIframe({ allowFullScreen, allowPaymentRequest, iframeStyle, diff --git a/extensions/amp-iframe/1.0/component.type.js b/extensions/amp-iframe/1.0/component.type.js index ace1954d3a29..517694963e34 100644 --- a/extensions/amp-iframe/1.0/component.type.js +++ b/extensions/amp-iframe/1.0/component.type.js @@ -1,7 +1,7 @@ /** @externs */ /** @const */ -var IframeDef = {}; +var BentoIframeDef = {}; /** * @typedef {{ @@ -15,4 +15,4 @@ var IframeDef = {}; * srcdoc: (string), * }} */ -IframeDef.Props; +BentoIframeDef.Props; diff --git a/extensions/amp-iframe/1.0/storybook/Basic.js b/extensions/amp-iframe/1.0/storybook/Basic.js index b70cc98c6bbf..d8adbefe4071 100644 --- a/extensions/amp-iframe/1.0/storybook/Basic.js +++ b/extensions/amp-iframe/1.0/storybook/Basic.js @@ -1,19 +1,19 @@ import * as Preact from '#preact'; -import {Iframe} from '../component'; +import {BentoIframe} from '../component'; export default { title: 'Iframe', - component: Iframe, + component: BentoIframe, }; export const _default = () => { return ( - + > ); }; @@ -27,7 +27,7 @@ export const WithIntersectingIframe = () => { backgroundColor: 'blue', }} > - +

The above iframe will not resize and should remain 100x100px

); @@ -53,7 +53,7 @@ export const WithResizableIframe = () => { backgroundColor: 'blue', }} > - +

The above iframe should be 300x300px when visible

); diff --git a/extensions/amp-iframe/1.0/test/test-component.js b/extensions/amp-iframe/1.0/test/test-component.js index 7b9c02337906..1b406c272b5f 100644 --- a/extensions/amp-iframe/1.0/test/test-component.js +++ b/extensions/amp-iframe/1.0/test/test-component.js @@ -1,26 +1,26 @@ import * as Preact from '#preact'; -import {Iframe} from '../component'; +import {BentoIframe} from '../component'; import {mount} from 'enzyme'; -describes.sandboxed('Iframe preact component v1.0', {}, (env) => { +describes.sandboxed('BentoIframe preact component v1.0', {}, (env) => { it('should render', () => { - const wrapper = mount(