fix(wire): connect wire before calling connectedCallback @W-18205007 (#5322)

* test(ssr): add LWR's lwcRuntimeFlags test

* test(util): fix order of expected/actual

* test(wire): simplify test to focus on broken case

* fix(wire): connect wire before calling connectedCallback

Author: wjhsf

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/config.json

@@ -0,0 +1,3 @@
+{
+    "entry": "x/component"
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/error.txt

@@ -0,0 +1,3 @@
+<fixture-test>
+  connect, update(hello)
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/expected.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    {connectedCallbackProp}
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/modules/x/component/component.html

@@ -0,0 +1,12 @@
+import { LightningElement, wire } from 'lwc';
+import adapter from './wire';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    @wire(adapter, { value: 'hello' })
+    data;
+
+    connectedCallback() {
+        this.connectedCallbackProp = this.data.join(', ');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/modules/x/component/component.js

@@ -0,0 +1,20 @@
+export default class {
+    constructor(callback) {
+        this.callback = callback;
+        this.state = [];
+    }
+
+    update(config) {
+        this.state.push(`update(${config.value})`);
+        this.callback([...this.state]);
+    }
+
+    connect() {
+        this.state.push('connect');
+        this.callback([...this.state]);
+    }
+
+    disconnect() {
+        this.state.push('disconnect');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/adapter-lifecycle/modules/x/component/wire.js

@@ -52,13 +52,13 @@ const bGenerateMarkup = esTemplate`
                 attrs,
                 __lwcPublicProperties__
             );
+            ${/*connect wire*/ is.statement}
             instance.isConnected = true;
             if (instance.connectedCallback) {
                 __mutationTracker.enable(instance);
                 instance.connectedCallback();
                 __mutationTracker.disable(instance);
             }
-            ${/*connect wire*/ is.statement}
             // If a render() function is defined on the class or any of its superclasses, then that takes priority.
             // Next, if the class or any of its superclasses has an implicitly-associated template, then that takes
             // second priority (e.g. a foo.html file alongside a foo.js file). Finally, there is a fallback empty template.

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

@@ -19,6 +19,7 @@
  */
 
 import * as fs from 'node:fs/promises';
+import { AssertionError } from 'node:assert';
 import { equals, type Assertion, type ChaiPlugin, type ExpectStatic } from '@vitest/expect';
 import { swapLwcStyleForStyleTag } from './swap-lwc-style-for-style';
 
@@ -29,18 +30,11 @@ function createMismatchError<T = unknown>(
     expected: T
 ) {
     // TODO [W-17971915]: clean this up, potentially using AssertionError
-    const error = new Error(message);
-    Object.defineProperty(error, 'actual', {
-        value: actual,
-        enumerable: true,
-        configurable: true,
-        writable: true,
-    });
-    Object.defineProperty(error, 'expected', {
-        value: expected,
-        enumerable: true,
-        configurable: true,
-        writable: true,
+    // DONE
+    const error = new AssertionError({
+        message,
+        actual,
+        expected,
     });
     Object.defineProperty(error, 'diffOptions', { value: { expand } });
     return error;
@@ -70,30 +64,32 @@ export const HtmlSnapshotPlugin: ChaiPlugin = (chai, utils) => {
         async function (this: Assertion, htmlFilePath: string, expect: ExpectStatic) {
             utils.flag(this, '_name', 'toMatchHtmlSnapshot');
 
-            const expectedHtml = utils.flag(this, 'object');
+            const actualHtml = utils.flag(this, 'object');
             const isNot = utils.flag(this, 'negate');
             if (isNot) {
                 throw new Error('toMatchHtmlSnapshot cannot be used with "not"');
             }
 
             // Leverage the built-in mechanism to write new fixtures to disk.
             if (!(await fileExists(htmlFilePath))) {
-                return await expect(expectedHtml).toMatchFileSnapshot(htmlFilePath);
+                return await expect(actualHtml).toMatchFileSnapshot(htmlFilePath);
             }
 
-            const actualHtml = await fs.readFile(htmlFilePath, 'utf8');
-            const actualHtmlCompatWithSSRv1 = swapLwcStyleForStyleTag(actualHtml);
+            const expectedHtmlRaw = await fs.readFile(htmlFilePath, 'utf8');
+            // SSR v2 uses <lwc-style> elements, but SSR v1 only uses <style>, so we have to
+            // normalize the output in order to reuse the same snapshots for both packages
+            const expectedHtmlNormalized = swapLwcStyleForStyleTag(expectedHtmlRaw);
 
             // This isn't strictly necessary because we await the assertion in `test-fixture-dir.ts`.
             // However, it mimics the behavior exhibited by `toMatchFileSnapshot` such that, if the
             // assertion were not awaited, any failed assertions would be queued up and reported
             // asynchronously after the test completed.
-            if (!equals(actualHtmlCompatWithSSRv1, expectedHtml)) {
+            if (!equals(expectedHtmlNormalized, actualHtml)) {
                 throw createMismatchError(
                     'HTML snapshot mismatch',
                     true,
-                    actualHtmlCompatWithSSRv1,
-                    expectedHtml
+                    actualHtml,
+                    expectedHtmlNormalized
                 );
             }
         }