ampproject / ampproject/amphtml

amp-script: Interop with [on] actions

Open
#24,763 11 comments 7 reactions 0 assignees View on GitHub
Component: amp-script P3: When Possible Stale Type: Feature Request WG: runtime
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

# Overview

Bidirectional interoperation has two parts:

1. `amp-script` can define custom actions and other elements can call them.
2. `amp-script` can call actions on other elements.

## (1) Actions calling into `amp-script`

It'd be great if amp-script had the ability to define custom actions. The advantages are:

* less need to wrap everything with an amp-script element as components outside the amp-script element can still trigger functionality implemented in amp-script.
* better operability with existing AMP components
* less cases were amp-bind is needed

For example:

```html

Click
```

Inside the script you could implement a handler:

```js
AMP.addEventListener('fetch', () => { // do stuff })
AMP.addEventListener('update', (data) => { AMP.setState({result: update(data) })
```

### Alternative

The same thing could be accomplished with `AMP.setState(...)` and a counter:

```
Click
```

where the amp-script listens to state changes to the `fetch` variable. However, this is hacky and always requires using amp-bind.

## (2) `amp-script` calling actions on other elements

It'd be useful to be able to trigger AMP Actions from within an amp-script. Use cases would be:

* open an amp-lightbox from a script
* submit a form from a script
* trigger closeOrNavigateTo or navigateTo actions from a script

A positive side-effect would be that scripts can target elements outside the amp-script element's scope.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the existing amp-script integration and AMP action dispatch paths; the issue names no files or tests. Compare the two requested directions and establish the supported API, scope, and security behavior before implementation. Done means amp-script can both expose callable actions and invoke actions on other elements, with coverage for the documented examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.