ampproject / ampproject/amphtml

Bento Tracking Issue: 3p Iframe Support

Open
#35,676 1 comment 0 reactions 0 assignees View on GitHub
Stale Type: Feature Request WG: bento
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

[Building a Bento Iframe Component](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-iframe-component.md) outlines how to build components in the Bento paradigm which use either an iframe directly or a proxy iframe for 3p embeds. There are a few AMP contributor and devX pain points with the current model. This is a tracking issue to organize the efforts so that contributing and using one of these components in any mode (AMP, Bento, Preact) is straightforward from start to finish!

- [x] Make build constants available in Storybooks #35560
- [x] Extricate `deserializeMessage` from logging system (which causes errors in Preact mode) #35563
- [x] Default and overridable `bootstrap` and `src` props for the `ProxyIframeEmbed` should not depend on AMP runtime #35669
- [ ] Components using code in `3p/` should trigger build when run in Storybooks
- [x] `ProxyIframeEmbed` `src` and `options` props should be simplified to provide a clear API surface. For example, `` should also be supported as ``. This is particularly noticeable if there is only one such prop needed, i.e. `` -> ``. This is even more confusing for `Reddit` whose `src` prop passes to the `ProxyIframeEmbed` `src` and is not used, as one might expect, for the Reddit iframe url `src`. #35685
- [ ] Update documentation when the above work is complete

### Alternatives Considered

n/a

### Additional Context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with docs/building-a-bento-iframe-component.md and the remaining checklist item about components using code in 3p/ triggering a build in Storybooks. Trace the Storybook build entry point and related 3p/ component handling; done means those components trigger the build correctly and the documentation reflects the completed work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, documentation, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.