WorkerDOM: upgrade to 0.6.0 (#21726)

* WorkerDOM: upgrade to 0.4.0

* Upgraded to the new hydration API

* fix compilation errors

* upgrade to 0.6.0

* review fixed

examples/amp-script/hello-world.js

@@ -28,7 +28,7 @@ document.getElementById('hello').addEventListener('click', () => {
 // Long task.
 if (document.getElementById('long')) {
   document.getElementById('long').addEventListener('click', () => {
-    fetch('/examples/amp-script/hello-world-data.json')
+    fetch('http://localhost:8000/examples/amp-script/hello-world-data.json')
         .then(response => response.json())
         .then(json => {
           const el = document.createElement('h1');

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

@@ -19,7 +19,6 @@ import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {UserActivationTracker} from './user-activation-tracker';
 import {
-  WorkerDom,
   sanitizer,
   upgrade,
 } from '@ampproject/worker-dom/dist/unminified.index.safe.mjs.patched';
@@ -43,6 +42,7 @@ const MAX_SCRIPT_SIZE = 150000;
  */
 const MAX_FREE_MUTATION_HEIGHT = 300;
 
+const PHASE_HYDRATING = 1;
 const PHASE_MUTATING = 2;
 
 export class AmpScript extends AMP.BaseElement {
@@ -56,7 +56,7 @@ export class AmpScript extends AMP.BaseElement {
     /** @private @const {!../../../src/service/vsync-impl.Vsync} */
     this.vsync_ = Services.vsyncFor(this.win);
 
-    /** @private {?WorkerDom} */
+    /** @private {?Worker} */
     this.workerDom_ = null;
 
     /** @private {?UserActivationTracker} */
@@ -110,30 +110,28 @@ export class AmpScript extends AMP.BaseElement {
             + MAX_SCRIPT_SIZE);
         return [];
       }
-      return [workerScript, authorScript, authorUrl];
+      return [workerScript, authorScript];
     }),
-    // Configure callbacks.
+    // WorkerDOMConfiguration
     {
+      authorURL: authorUrl,
+      mutationPump: this.mutationPump_.bind(this),
+      longTask: promise => {
+        this.userActivation_.expandLongTask(promise);
+        // TODO(dvoytenko): consider additional "progress" UI.
+      },
+
+      // Callbacks.
       onCreateWorker: data => {
         dev().info(TAG, 'Create worker:', data);
       },
-      onHydration: () => {
-        dev().info(TAG, 'Hydrated!');
-        this.element.classList.add('i-amphtml-hydrated');
-      },
       onSendMessage: data => {
         dev().info(TAG, 'To worker:', data);
       },
       onReceiveMessage: data => {
         dev().info(TAG, 'From worker:', data);
       },
-      onMutationPump: this.mutationPump_.bind(this),
-      onLongTask: promise => {
-        this.userActivation_.expandLongTask(promise);
-        // TODO(dvoytenko): consider additional "progress" UI.
-      },
-    },
-    /* debug */ true).then(workerDom => {
+    }).then(workerDom => {
       this.workerDom_ = workerDom;
     });
     return Promise.resolve();
@@ -158,6 +156,10 @@ export class AmpScript extends AMP.BaseElement {
    * @private
    */
   mutationPump_(flush, phase) {
+    if (phase == PHASE_HYDRATING) {
+      this.vsync_.mutate(
+          () => this.element.classList.add('i-amphtml-hydrated'));
+    }
     const allowMutation = (
       // Hydration is always allowed.
       phase != PHASE_MUTATING
@@ -182,11 +184,6 @@ export class AmpScript extends AMP.BaseElement {
   }
 }
 
-/** @return {!Function} */
-export function getWorkerDomClassForTesting() {
-  return WorkerDom;
-}
-
 AMP.extension('amp-script', '0.1', function(AMP) {
   AMP.registerElement('amp-script', AmpScript, CSS);
 });

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@ampproject/animations": "0.1.2",
-    "@ampproject/worker-dom": "0.3.0",
+    "@ampproject/worker-dom": "0.6.0",
     "document-register-element": "1.5.0",
     "dompurify": "1.0.10",
     "moment": "2.24.0",

yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@ampproject/animations/-/animations-0.1.2.tgz#88b034c5f2a9a41d90722885966d2d67629ce522"
   integrity sha512-B+BgrRHJLnNr8pkSfZB3aOitHmtgZSZnioV3ixym3ZAr6VDpvUw4u7tzWgHwG3X03ohHQBdau843pnQOf2oXhA==
 
-"@ampproject/worker-dom@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.3.0.tgz#3c48e6b9266844e2412cebb209587bcfc378cdaf"
-  integrity sha512-pPp1Utkbf9dvU76WSMmKLmnjmUruEYvA0iNggOGn6DqYqag3/Ag1XNVy/3CNlPrFhYLzwKiUu69D5vo1+kg0+Q==
+"@ampproject/worker-dom@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.6.0.tgz#c4fac2a6cd0207960b6b42c7e58e62a3681e0a42"
+  integrity sha512-bGjJDO/SY7Ma9Rgy3aG61Gi5v0P6FNzsV3g+7XJtfmU5wLfgZKJeAGZpvIuDKRnX6jR+tuzWa9OyKvFn7XBnnA==
   dependencies:
     dompurify "1.0.10"