Don't clone nodes as part of the debug event logger (#2635)

rictic · web-flow · commit ae3587038873 · 2022-03-15T11:10:08.000-05:00
diff --git a/.changeset/weak-feet-invent.md b/.changeset/weak-feet-invent.md
@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Make the event debug logger lazier, doing even less work (with no side effects) even in dev mode unless the page has opted in.
diff --git a/lit-next.code-workspace b/lit-next.code-workspace
@@ -1,62 +1,62 @@
 {
-	"folders": [
-		{
-			"name": "lit",
-			"path": "packages/lit"
-		},
-		{
-			"name": "lit-html",
-			"path": "packages/lit-html"
-		},
-		{
-			"name": "lit-element",
-			"path": "packages/lit-element"
-		},
-		{
-			"name": "reactive-element",
-			"path": "packages/reactive-element"
-		},
-		{
-			"name": "ssr",
-			"path": "packages/labs/ssr"
-		},
-		{
-			"name": "lit-starter-ts",
-			"path": "packages/lit-starter-ts"
-		},
-		{
-			"name": "lit-starter-js",
-			"path": "packages/lit-starter-js"
-		},
-		{
-			"name": "localize",
-			"path": "packages/localize"
-		},
-		{
-			"name": "labs",
-			"path": "packages/labs"
-		},
-		{
-			"name": "tests",
-			"path": "packages/tests"
-		},
-		{
-			"name": "benchmarks",
-			"path": "packages/benchmarks"
-		},
-		{
-			"name": "lit",
-			"path": "."
-		}
-	],
-	"settings": {
-		"typescript.tsdk": "node_modules/typescript/lib",
-		"debug.javascript.warnOnLongPrediction": false
-	},
-	"extensions": {
-		"recommendations": [
-			"dbaeumer.vscode-eslint",
-			"esbenp.prettier-vscode"
-		]
-	}
+  "folders": [
+    {
+      "name": "lit",
+      "path": "packages/lit"
+    },
+    {
+      "name": "lit-html",
+      "path": "packages/lit-html"
+    },
+    {
+      "name": "lit-element",
+      "path": "packages/lit-element"
+    },
+    {
+      "name": "reactive-element",
+      "path": "packages/reactive-element"
+    },
+    {
+      "name": "ssr",
+      "path": "packages/labs/ssr"
+    },
+    {
+      "name": "lit-starter-ts",
+      "path": "packages/lit-starter-ts"
+    },
+    {
+      "name": "lit-starter-js",
+      "path": "packages/lit-starter-js"
+    },
+    {
+      "name": "localize",
+      "path": "packages/localize"
+    },
+    {
+      "name": "labs",
+      "path": "packages/labs"
+    },
+    {
+      "name": "tests",
+      "path": "packages/tests"
+    },
+    {
+      "name": "benchmarks",
+      "path": "packages/benchmarks"
+    },
+    {
+      "name": "lit",
+      "path": "."
+    }
+  ],
+  "settings": {
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "debug.javascript.warnOnLongPrediction": false,
+    // Regardless of the user's usual formatter, files
+    // in the Lit repo must be formatted using prettier.
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "extensions": {
+    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+  }
 }
diff --git a/packages/lit-html/src/lit-html.ts b/packages/lit-html/src/lit-html.ts
@@ -192,13 +192,14 @@ const debugLogEvent = DEV_MODE
   ? (event: LitUnstable.DebugLog.Entry) => {
       const shouldEmit = (window as unknown as DebugLoggingWindow)
         .emitLitDebugLogEvents;
-      if (shouldEmit) {
-        window.dispatchEvent(
-          new CustomEvent<LitUnstable.DebugLog.Entry>('lit-debug', {
-            detail: event,
-          })
-        );
+      if (!shouldEmit) {
+        return;
       }
+      window.dispatchEvent(
+        new CustomEvent<LitUnstable.DebugLog.Entry>('lit-debug', {
+          detail: event,
+        })
+      );
     }
   : undefined;
 // Used for connecting beginRender and endRender events when there are nested
@@ -1480,7 +1481,7 @@ class ChildPart implements Disconnectable {
         kind: 'commit node',
         start: this._$startNode,
         parent: this._$parent,
-        value: value.cloneNode(true),
+        value: value,
         options: this.options,
       });
       this._$committedValue = this._insert(value);
diff --git a/packages/reactive-element/src/reactive-element.ts b/packages/reactive-element/src/reactive-element.ts
@@ -141,13 +141,14 @@ const debugLogEvent = DEV_MODE
   ? (event: ReactiveUnstable.DebugLog.Entry) => {
       const shouldEmit = (window as unknown as DebugLoggingWindow)
         .emitLitDebugLogEvents;
-      if (shouldEmit) {
-        window.dispatchEvent(
-          new CustomEvent<ReactiveUnstable.DebugLog.Entry>('lit-debug', {
-            detail: event,
-          })
-        );
+      if (!shouldEmit) {
+        return;
       }
+      window.dispatchEvent(
+        new CustomEvent<ReactiveUnstable.DebugLog.Entry>('lit-debug', {
+          detail: event,
+        })
+      );
     }
   : undefined;
 
