feat(ssr): make SSR compiler recognize lwc:on directive (#5377)

Make SSR compiler recognize lwc:on directive. Also adds snapshot and hydration tests to verify
lwc:on used in SSR context

Co-authored-by: Dale Bustad <dbustad@salesforce.com>

Author: gaurav-rk9

packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts

@@ -79,6 +79,7 @@ async function compileFixture({
             pluginVirtual(`export { default } from "${entry}";`, input),
             lwcRollupPlugin({
                 enableDynamicComponents: true,
+                enableLwcOn: true,
                 experimentalDynamicComponent: {
                     loader: path.join(__dirname, './utils/custom-loader.js'),
                     strictSpecifier: false,

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-on/config.json

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

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-on/error.txt

@@ -0,0 +1,7 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <button>
+      Button which listens for multiple events
+    </button>
+  </template>
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-on/expected.html

@@ -0,0 +1,3 @@
+<template>
+    <button lwc:on={eventListeners}>Button which listens for multiple events</button>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-on/modules/x/lwc-on/lwc-on.html

@@ -0,0 +1,12 @@
+import { LightningElement } from 'lwc';
+
+export default class LwcOn extends LightningElement {
+    eventListeners = {
+        click: () => {
+            console.log('click');
+        },
+        foo: () => {
+            console.log('foo');
+        },
+    };
+}

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-on/modules/x/lwc-on/lwc-on.js

@@ -71,6 +71,7 @@ async function getCompiledModule(dirName, compileForSSR) {
                     strict: true,
                 },
                 enableDynamicComponents: true,
+                enableLwcOn: true,
                 enableStaticContentOptimization: !DISABLE_STATIC_CONTENT_OPTIMIZATION,
                 experimentalDynamicDirective: true,
             }),

packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js

@@ -0,0 +1,20 @@
+export default {
+    props: {},
+    snapshot(target) {
+        const div = target.shadowRoot.querySelector('div');
+
+        return {
+            div,
+        };
+    },
+    test(target, snapshots) {
+        const snapshotAfterHydration = this.snapshot(target);
+        expect(snapshotAfterHydration.div).toBe(snapshots.div);
+
+        // verify handler
+        snapshotAfterHydration.div.click();
+        expect(target.timesClickedHandlerIsExecuted).toBe(1);
+        snapshotAfterHydration.div.dispatchEvent(new CustomEvent('foo'));
+        expect(target.timesFooHandlerIsExecuted).toBe(1);
+    },
+};

packages/@lwc/integration-karma/test-hydration/directives/lwc-on/index.spec.js

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:on={eventListeners}>I listen for events specified in the eventListeners object</div>
+</template>

packages/@lwc/integration-karma/test-hydration/directives/lwc-on/x/main/main.html

@@ -0,0 +1,25 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Main extends LightningElement {
+    _clickedHandlerCounter = 0;
+    _fooHandlerCounter = 0;
+
+    @api
+    get timesClickedHandlerIsExecuted() {
+        return this._clickedHandlerCounter;
+    }
+
+    @api
+    get timesFooHandlerIsExecuted() {
+        return this._fooHandlerCounter;
+    }
+
+    eventListeners = {
+        click: function () {
+            this._clickedHandlerCounter++;
+        },
+        foo: function () {
+            this._fooHandlerCounter++;
+        },
+    };
+}