diff --git a/examples/amp-list-data-transform.html b/examples/amp-list-data-transform.html
new file mode 100644
index 000000000000..b6eb82f00a72
--- /dev/null
+++ b/examples/amp-list-data-transform.html
@@ -0,0 +1,28 @@
+
+
+
+ amp-list data transform example
+
+
+
+
+
+
+
+
+
+
+ amp-list data transform example
+
+
+ {{key}}: {{val}}
+
+
+
+
diff --git a/examples/amp-list-data-transform.js b/examples/amp-list-data-transform.js
new file mode 100644
index 000000000000..b2aa3d1525f5
--- /dev/null
+++ b/examples/amp-list-data-transform.js
@@ -0,0 +1,13 @@
+onmessage = function(e) {
+ console.log('amp-list transformer, input:\n', e.data);
+ const finaldata = {
+ items: Object.keys(e.data).map(key => {
+ return {
+ key: key,
+ val: e.data[key]
+ };
+ })
+ };
+ console.log('amp-list transformer, output:\n', finaldata);
+ postMessage(finaldata);
+};
\ No newline at end of file
diff --git a/examples/amp-list-data-transform.json b/examples/amp-list-data-transform.json
new file mode 100644
index 000000000000..1903996b01a2
--- /dev/null
+++ b/examples/amp-list-data-transform.json
@@ -0,0 +1,5 @@
+{
+ "a": "123",
+ "b": "456",
+ "c": "789"
+}
\ No newline at end of file
diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
index 06334c8cf109..7a5203bc5925 100644
--- a/extensions/amp-list/0.1/amp-list.js
+++ b/extensions/amp-list/0.1/amp-list.js
@@ -169,6 +169,9 @@ export class AmpList extends AMP.BaseElement {
/** @private {?../../../src/ssr-template-helper.SsrTemplateHelper} */
this.ssrTemplateHelper_ = null;
+
+ /** @private {Worker} */
+ this.dataTransformer_ = null;
}
/** @override */
@@ -192,6 +195,16 @@ export class AmpList extends AMP.BaseElement {
// is missing attributes in the constructor.
this.initialSrc_ = this.element.getAttribute('src');
+ // Remember, this is a proof of concept. No validation or error
+ // handling is performed.
+ if (this.element.hasAttribute('transform')) {
+ try {
+ this.dataTransformer_ = new Worker(
+ this.element.getAttribute('transform')
+ );
+ } catch (ex) {}
+ }
+
if (this.element.hasAttribute('diffable')) {
// Set container to the initial content, if it exists. This allows
// us to DOM diff with the rendered result.
@@ -552,17 +565,30 @@ export class AmpList extends AMP.BaseElement {
if (this.ssrTemplateHelper_.isEnabled()) {
fetch = this.ssrTemplate_(opt_refresh);
} else {
- fetch = this.prepareAndSendFetch_(opt_refresh).then(data => {
- const items = this.computeListItems_(data);
- if (this.loadMoreEnabled_) {
- this.updateLoadMoreSrc_(/** @type {!JsonObject} */ (data));
- }
- return this.scheduleRender_(
- items,
- /*opt_append*/ false,
- data
- ).then(() => this.maybeSetLoadMore_());
- });
+ fetch = this.prepareAndSendFetch_(opt_refresh)
+ .then(data => {
+ // Remember, this is a proof of concept. No validation or error
+ // handling is performed.
+ if (this.dataTransformer_) {
+ this.dataTransformer_.postMessage(data);
+ return new Promise(resolve => {
+ this.dataTransformer_.onmessage = e => resolve(e.data);
+ });
+ } else {
+ return Promise.resolve(data);
+ }
+ })
+ .then(data => {
+ const items = this.computeListItems_(data);
+ if (this.loadMoreEnabled_) {
+ this.updateLoadMoreSrc_(/** @type {!JsonObject} */ (data));
+ }
+ return this.scheduleRender_(
+ items,
+ /*opt_append*/ false,
+ data
+ ).then(() => this.maybeSetLoadMore_());
+ });
}
return fetch.catch(error => {