ampproject / ampproject/amphtml
amp-script: Interop with [on] actions
- 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
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