Suppress Console Messages in AMP output (#609)

* Suppress console messages for amp release
* Use same input signal AMP uses for logging for the AMP output of WorkerDOM

config/rollup.main-thread.js

@@ -32,7 +32,7 @@ const ESModules = [
       removeWorkerWhitespace(),
       removeDebugCommandExecutors(),
       replace({
-        DEBUG_ENABLED: false,
+        WORKER_DOM_DEBUG: false,
       }),
       babelPlugin({
         transpileToES5: false,
@@ -60,7 +60,7 @@ const ESModules = [
         ],
       }),
       replace({
-        DEBUG_ENABLED: true,
+        WORKER_DOM_DEBUG: true,
       }),
       babelPlugin({
         transpileToES5: false,
@@ -74,6 +74,7 @@ const ESModules = [
       file: 'dist/amp/main.mjs',
       format: 'es',
       sourcemap: true,
+      banner: 'var WORKER_DOM_DEBUG = /log|development/i.test(location.hash);',
     },
     plugins: [
       removeWorkerWhitespace(),
@@ -85,9 +86,6 @@ const ESModules = [
           },
         ],
       }),
-      replace({
-        DEBUG_ENABLED: true,
-      }),
       babelPlugin({
         transpileToES5: false,
         allowConsole: true,
@@ -109,7 +107,7 @@ const IIFEModules = [
       removeWorkerWhitespace(),
       removeDebugCommandExecutors(),
       replace({
-        DEBUG_ENABLED: false,
+        WORKER_DOM_DEBUG: false,
       }),
       babelPlugin({
         transpileToES5: true,
@@ -130,7 +128,7 @@ const IIFEModules = [
     plugins: [
       removeWorkerWhitespace(),
       replace({
-        DEBUG_ENABLED: true,
+        WORKER_DOM_DEBUG: true,
       }),
       babelPlugin({
         transpileToES5: true,

config/rollup.worker-thread.js

@@ -50,7 +50,7 @@ const ESModules = [
         ],
       }),
       replace({
-        DEBUG_ENABLED: false,
+        WORKER_DOM_DEBUG: false,
       }),
       babelPlugin({
         transpileToES5: false,
@@ -77,7 +77,7 @@ const ESModules = [
         ],
       }),
       replace({
-        DEBUG_ENABLED: false,
+        WORKER_DOM_DEBUG: false,
       }),
       babelPlugin({
         transpileToES5: false,
@@ -92,6 +92,7 @@ const ESModules = [
       format: 'iife',
       name: 'WorkerThread',
       sourcemap: true,
+      banner: 'var WORKER_DOM_DEBUG = /log|development/i.test(location.hash);',
     },
     plugins: [
       copy({
@@ -102,9 +103,6 @@ const ESModules = [
           },
         ],
       }),
-      replace({
-        DEBUG_ENABLED: true,
-      }),
       babelPlugin({
         transpileToES5: false,
         allowConsole: true,
@@ -118,6 +116,7 @@ const ESModules = [
       format: 'iife',
       name: 'WorkerThread',
       sourcemap: true,
+      banner: 'var WORKER_DOM_DEBUG = /log|development/i.test(location.hash);',
     },
     plugins: [
       copy({
@@ -128,12 +127,9 @@ const ESModules = [
           },
         ],
       }),
-      replace({
-        DEBUG_ENABLED: false,
-      }),
       babelPlugin({
         transpileToES5: true,
-        allowConsole: false,
+        allowConsole: true,
       }),
       ...compilePlugins,
     ],
@@ -151,7 +147,7 @@ const IIFEModules = [
     },
     plugins: [
       replace({
-        DEBUG_ENABLED: false,
+        WORKER_DOM_DEBUG: false,
       }),
       babelPlugin({
         transpileToES5: true,
@@ -170,7 +166,7 @@ const IIFEModules = [
     },
     plugins: [
       replace({
-        DEBUG_ENABLED: true,
+        WORKER_DOM_DEBUG: true,
       }),
       babelPlugin({
         transpileToES5: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampproject/worker-dom",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A facsimile of a modern DOM implementation intended to run in a Web Worker.",
   "main": "dist/main",
   "files": [

src/main-thread/main-thread.d.ts

@@ -71,4 +71,4 @@ interface Node {
 
 type RenderableElement = (HTMLElement | SVGElement | Text | Comment) & { [index: string]: any };
 
-declare const DEBUG_ENABLED: boolean;
+declare const WORKER_DOM_DEBUG: boolean;

src/main-thread/mutator.ts

@@ -113,7 +113,7 @@ export class MutatorProcessor {
    * Investigations in using asyncFlush to resolve are worth considering.
    */
   private syncFlush = (): void => {
-    if (DEBUG_ENABLED) {
+    if (WORKER_DOM_DEBUG) {
       console.group('Mutations');
     }
     this.mutationQueue.forEach(mutationArray => {
@@ -123,13 +123,13 @@ export class MutatorProcessor {
       while (operationStart < length) {
         const mutationType = mutationArray[operationStart];
         const executor = this.executors[mutationType];
-        if (DEBUG_ENABLED) {
+        if (WORKER_DOM_DEBUG) {
           console.log(ReadableMutationType[mutationType], executor.print(mutationArray, operationStart));
         }
         operationStart = executor.execute(mutationArray, operationStart);
       }
     });
-    if (DEBUG_ENABLED) {
+    if (WORKER_DOM_DEBUG) {
       console.groupEnd();
     }
     this.mutationQueue = [];

src/main-thread/worker.ts

@@ -70,7 +70,7 @@ export class WorkerContext {
       ${authorScript}
       //# sourceURL=${encodeURI(config.authorURL)}`;
     this[TransferrableKeys.worker] = new Worker(URL.createObjectURL(new Blob([code])));
-    if (DEBUG_ENABLED) {
+    if (WORKER_DOM_DEBUG) {
       console.info('debug', 'hydratedNode', readableHydrateableRootNode(baseElement, config));
     }
     if (config.onCreateWorker) {
@@ -89,7 +89,7 @@ export class WorkerContext {
    * @param message
    */
   messageToWorker(message: MessageToWorker, transferables?: Transferable[]) {
-    if (DEBUG_ENABLED) {
+    if (WORKER_DOM_DEBUG) {
       console.info('debug', 'messageToWorker', readableMessageToWorker(this.nodeContext, message));
     }
     if (this.config.onSendMessage) {

src/test/main-thread/helpers/env.ts

@@ -67,7 +67,7 @@ export class Env {
       value: requestAnimationFrame,
     });
 
-    Object.defineProperty(global, 'DEBUG_ENABLED', {
+    Object.defineProperty(global, 'WORKER_DOM_DEBUG', {
       configurable: true,
       value: false,
     });