protocol adapters: e2e test, nodom binary, and bump worker-dom. (#29541)

* amp-script: nodom variant

- adds support for nodom flag to amp-script, for protocol adapters.
- upgrades worker-dom to the latest (which has support for callFunction,
and lite binaries).
- adds e2e test for "script" uri in amp-list.

* lint

* force nodom to not have width/height.

* 2019 --> 2020

build-system/tasks/extension-helpers.js

@@ -568,6 +568,11 @@ async function buildExtensionJs(path, name, version, latestVersion, options) {
     fs.copyFileSync(dir + 'worker.js', `${file}.js`);
     // The "mjs" output is unminified ES6 and has debugging flags enabled.
     fs.copyFileSync(dir + 'worker.mjs', `${file}.max.js`);
+
+    // Same as above but for the nodom worker variant.
+    const noDomFile = `dist/v0/amp-script-worker-nodom-${version}`;
+    fs.copyFileSync(dir + 'worker.nodom.js', `${noDomFile}.js`);
+    fs.copyFileSync(dir + 'worker.nodom.mjs', `${noDomFile}.max.js`);
   }
 }
 

extensions/amp-list/0.1/test-e2e/test-function-src.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+describes.endtoend(
+  'amp-list "amp-script:" uri',
+  {
+    testUrl:
+      'http://localhost:8000/test/fixtures/e2e/amp-list/amp-list-function-src.html',
+    experiments: ['protocol-adapters'],
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it.configure().run(
+      'should render list backed by amp-script data',
+      async function () {
+        const container = await getListContainer(controller);
+        await verifyContainer(controller, container);
+
+        // Verify that all items rendered.
+        const listItems = await getListItems(controller);
+        await expect(listItems).to.have.length(2);
+      }
+    );
+  }
+);
+
+function getListContainer(controller) {
+  return controller.findElement('div[role=list]');
+}
+
+function getListItems(controller) {
+  return controller.findElements('div[role=listitem]');
+}
+
+async function verifyContainer(controller, container) {
+  await expect(controller.getElementAttribute(container, 'class')).to.equal(
+    'i-amphtml-fill-content i-amphtml-replaced-content'
+  );
+}

extensions/amp-script/0.1/amp-script.css

@@ -21,3 +21,9 @@ amp-script {
 amp-script.i-amphtml-hydrated {
   opacity: 1;
 }
+amp-script[nodom] {
+  position: fixed !important;
+  visibility: hidden !important;
+  width: 1px;
+  height: 1px;
+}

extensions/amp-script/0.1/amp-script.js

@@ -109,6 +109,15 @@ export class AmpScript extends AMP.BaseElement {
      * @private {boolean}
      */
     this.development_ = false;
+
+    /**
+     * If true, signals that the `nodom` variant of worker-dom should be used.
+     * The worker js will have a much smaller bundle size, but no access to dom
+     * functions.
+     *
+     * @private {boolean}
+     */
+    this.nodom_ = false;
   }
 
   /** @override */
@@ -118,6 +127,7 @@ export class AmpScript extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.nodom_ = this.element.hasAttribute('nodom');
     this.development_ =
       this.element.hasAttribute('data-ampdevmode') ||
       this.element.ownerDocument.documentElement.hasAttribute(
@@ -132,6 +142,18 @@ export class AmpScript extends AMP.BaseElement {
       );
     }
 
+    if (
+      this.nodom_ &&
+      (this.element.hasAttribute('width') ||
+        this.element.hasAttribute('height'))
+    ) {
+      user().warn(
+        TAG,
+        'Cannot set width or height of a nodom <amp-script>',
+        this.element
+      );
+    }
+
     return getElementServiceForDoc(this.element, TAG, TAG).then((service) => {
       this.setService(/** @type {!AmpScriptService} */ (service));
     });
@@ -297,7 +319,7 @@ export class AmpScript extends AMP.BaseElement {
     const useLocal = getMode().localDev || getMode().test;
     const workerUrl = calculateExtensionScriptUrl(
       location,
-      'amp-script-worker',
+      this.nodom_ ? 'amp-script-worker-nodom' : 'amp-script-worker',
       '0.1',
       useLocal
     );

extensions/amp-script/0.1/test/unit/test-amp-script.js

@@ -84,6 +84,33 @@ describes.fakeWin('AmpScript', {amp: {runtimeOn: false}}, (env) => {
     return script.layoutCallback().should.be.rejected;
   });
 
+  it('should support nodom variant', async () => {
+    element.setAttribute('nodom', '');
+    element.setAttribute('src', 'https://foo.example/foo.txt');
+    env.sandbox.stub(env.ampdoc, 'getUrl').returns('https://foo.example/');
+    stubFetch(
+      'https://foo.example/foo.txt',
+      {'Content-Type': 'text/javascript; charset=UTF-8'}, // Valid content-type.
+      'alert(1)'
+    );
+
+    xhr.fetchText
+      .withArgs(env.sandbox.match(/amp-script-worker-0.1.js/))
+      .rejects();
+    xhr.fetchText
+      .withArgs(env.sandbox.match(/amp-script-worker-nodom-0.1.js/))
+      .resolves({text: () => Promise.resolve('/* noop */')});
+    registerServiceBuilderForDoc(
+      env.win.document,
+      'amp-script',
+      AmpScriptService
+    );
+
+    await script.buildCallback();
+    await script.layoutCallback();
+    resetServiceForTesting(env.win, 'amp-script');
+  });
+
   it('should work with "text/javascript" content-type for same-origin src', () => {
     env.sandbox.stub(env.ampdoc, 'getUrl').returns('https://foo.example/');
     element.setAttribute('src', 'https://foo.example/foo.txt');

package.json

@@ -17,7 +17,7 @@
     "@ampproject/animations": "0.2.2",
     "@ampproject/toolbox-cache-url": "2.5.4",
     "@ampproject/viewer-messaging": "1.1.0",
-    "@ampproject/worker-dom": "0.25.1",
+    "@ampproject/worker-dom": "0.25.2",
     "dompurify": "2.0.7",
     "intersection-observer": "0.11.0",
     "moment": "2.24.0",

test/fixtures/e2e/amp-list/amp-list-function-src.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+    <style amp4email-boilerplate>body{visibility:hidden}</style>
+</head>
+<body>
+
+  <amp-script id="fns" script="fruit-script" nodom data-ampdevmode></amp-script>
+  <script id="fruit-script" type="text/plain" target="amp-script">
+    exportFunction('getFruit', () => ({items: [{name: 'Pineapple'}, {name: 'Mango'}]}));
+  </script> 
+
+  <amp-list id="amp-list" width="auto" height="100" layout="fixed-height"
+      src="amp-script:fns.getFruit">
+      <template type="amp-mustache">
+          <div class="fruit">{{name}}</div>
+      </template>
+  </amp-list>
+
+</body>
+</html>

yarn.lock

@@ -73,10 +73,10 @@
   resolved "https://registry.yarnpkg.com/@ampproject/viewer-messaging/-/viewer-messaging-1.1.0.tgz#404f92c5754bac61014ed2272dd5e87174b9af84"
   integrity sha512-SoR1dGl2Pl8eJlyGCU/9Gz/orOggmW/13wUh7NnuGvDYqLdlhnRBzvEGqEAlq/fQKel9ZM6RNtu85Jw8WC3K2Q==
 
-"@ampproject/[email protected].1":
-  version "0.25.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.25.1.tgz#3f97441b94ee5d84f882f4f1262ca0c4888b11b6"
-  integrity sha512-6qfHzg7YFNwcUr9a2iWWQp0ZTUlM+O4UUDFClM5O3ZZ28CooK4xdhOdLCOQr04zQ0td+6zd02rUip2JBcWx4aQ==
+"@ampproject/[email protected].2":
+  version "0.25.2"
+  resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.25.2.tgz#910eed5b0f842ed139ab84719097297ca67fa23a"
+  integrity sha512-l6H1vJ2AfvvkXiGH2a5HDT4ft+YDhnbtzd0GslIiRDYcmKJ6yiJXdicvpBWQu9PLapa59Q4hW0HMxEaYRZOHeg==
 
 "@ava/babel-plugin-throws-helper@^4.0.0":
   version "4.0.0"