From 5519921d550a68ed22dab25fdbfb062d69f23138 Mon Sep 17 00:00:00 2001 From: Matt Mower Date: Tue, 17 Dec 2019 20:24:47 -0800 Subject: [PATCH] amp-list: Data-transform proof of concept --- examples/amp-list-data-transform.html | 28 ++++++++++++++++ examples/amp-list-data-transform.js | 13 ++++++++ examples/amp-list-data-transform.json | 5 +++ extensions/amp-list/0.1/amp-list.js | 48 +++++++++++++++++++++------ 4 files changed, 83 insertions(+), 11 deletions(-) create mode 100644 examples/amp-list-data-transform.html create mode 100644 examples/amp-list-data-transform.js create mode 100644 examples/amp-list-data-transform.json 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

+ + + + + 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 => {