fix(ssr-compiler): only track attribute mutations during connectedCallback (#4680)

Author: ekashida

packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts

@@ -41,11 +41,15 @@ const bGenerateMarkup = esTemplate`
         });
         instance[__SYMBOL__SET_INTERNALS](props, __REFLECTED_PROPS__, attrs);
         instance.isConnected = true;
-        instance.connectedCallback?.();
+        if (instance.connectedCallback) {
+            __mutationTracker.enable(instance);
+            instance.connectedCallback();
+            __mutationTracker.disable(instance);
+        }
         const tmplFn = ${isIdentOrRenderCall} ?? __fallbackTmpl;
         yield \`<\${tagName}\`;
         yield tmplFn.stylesheetScopeTokenHostClass ?? '';
-        yield *__renderAttrs(instance, attrs)
+        yield* __renderAttrs(instance, attrs)
         yield '>';
         yield* tmplFn(props, attrs, slotted, ${1}, instance);
         yield \`</\${tagName}>\`;
@@ -55,6 +59,7 @@ const bGenerateMarkup = esTemplate`
 const bInsertFallbackTmplImport = esTemplate`
     import {
         fallbackTmpl as __fallbackTmpl,
+	mutationTracker as __mutationTracker,
         renderAttrs as __renderAttrs,
         SYMBOL__SET_INTERNALS as __SYMBOL__SET_INTERNALS,
     } from '@lwc/ssr-runtime';

packages/@lwc/ssr-runtime/src/index.ts

@@ -11,7 +11,7 @@ export {
     LightningElementConstructor,
     SYMBOL__SET_INTERNALS,
 } from './lightning-element';
-export { MutationTracker } from './mutation-tracker';
+export { mutationTracker } from './mutation-tracker';
 // renderComponent is an alias for serverSideRenderComponent
 export {
     fallbackTmpl,

packages/@lwc/ssr-runtime/src/mutation-tracker.ts

@@ -7,18 +7,31 @@
 
 import { LightningElement } from './lightning-element';
 
-export class MutationTracker {
-    mutationMap = new WeakMap<LightningElement, Set<string>>();
+class MutationTracker {
+    #enabledSet = new WeakSet<LightningElement>();
+    #mutationMap = new WeakMap<LightningElement, Set<string>>();
+
     add(instance: LightningElement, attrName: string): void {
-        let mutatedAttrs = this.mutationMap.get(instance);
-        if (!mutatedAttrs) {
-            mutatedAttrs = new Set();
-            this.mutationMap.set(instance, mutatedAttrs);
+        if (this.#enabledSet.has(instance)) {
+            let mutatedAttrs = this.#mutationMap.get(instance);
+            if (!mutatedAttrs) {
+                mutatedAttrs = new Set();
+                this.#mutationMap.set(instance, mutatedAttrs);
+            }
+            mutatedAttrs.add(attrName.toLowerCase());
         }
-        mutatedAttrs.add(attrName.toLowerCase());
     }
+
+    enable(instance: LightningElement) {
+        this.#enabledSet.add(instance);
+    }
+
+    disable(instance: LightningElement) {
+        this.#enabledSet.delete(instance);
+    }
+
     renderMutatedAttrs(instance: LightningElement): string {
-        const mutatedAttrs = this.mutationMap.get(instance);
+        const mutatedAttrs = this.#mutationMap.get(instance);
         if (mutatedAttrs) {
             return ` data-lwc-host-mutated="${[...mutatedAttrs].sort().join(' ')}"`;
         } else {