feat(ssr): enable @wire on getters/setters (#4986)

* fix(ssr): adjacent text in `<template>`s

Co-Authored-By: Will Harney <[email protected]>
Co-Authored-By: John Hefferman <[email protected]>

* test: fix expected failures

* test(snapshots): add helpfuler message when error/expected swap

* fix(ssr): support @wire-decorated getters/setters

* chore: add test for edge case

* test(ssr): add test for differently-wired getter/setter

* Update packages/@lwc/ssr-compiler/src/compile-js/index.ts

Co-authored-by: Nolan Lawson <[email protected]>

* fix(ssr): use structured clone when converting wired getter to prop

* test: add tests

* chore: add comment

---------

Co-authored-by: Nolan Lawson <[email protected]>
Co-authored-by: John Hefferman <[email protected]>

Author: 3 people

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/error.txt

@@ -0,0 +1,7 @@
+<x-wire>
+  <template shadowrootmode="open">
+    <div>
+      Wired? set
+    </div>
+  </template>
+</x-wire>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/expected.html

@@ -0,0 +1,3 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';
+export * from 'x/wire';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/index.js

@@ -0,0 +1,13 @@
+export class Adapter {
+    constructor(dataCallback) {
+        this.callback = dataCallback;
+    }
+
+    connect() {}
+
+    update(cfg) {
+        this.callback(cfg.value);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/modules/x/adapter/adapter.js

@@ -0,0 +1,3 @@
+<template>
+  <div>Wired? {wired}</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/modules/x/wire/wire.html

@@ -0,0 +1,13 @@
+import { wire, LightningElement } from 'lwc';
+import { Adapter } from 'x/adapter';
+export default class Test extends LightningElement {
+    @wire(Adapter, { value: 'get' })
+    get wired() {
+        throw new Error('get wired!');
+    }
+
+    @wire(Adapter, { value: 'set' })
+    set wired(val) {
+        throw new Error('set wired!');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/get-set/modules/x/wire/wire.js

@@ -0,0 +1,5 @@
+<x-wire>
+  <template shadowrootmode="open">
+    propAndMethod
+  </template>
+</x-wire>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/error.txt

@@ -0,0 +1,3 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';
+export * from 'x/wire';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/expected.html

@@ -0,0 +1,13 @@
+export class adapter {
+    constructor(dataCallback) {
+        this.dc = dataCallback;
+    }
+
+    connect() {}
+
+    update(config) {
+        this.dc(config.name);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/index.js

@@ -0,0 +1,3 @@
+<template>
+    {propAndMethod}
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/modules/x/wire/adapter.js

@@ -0,0 +1,12 @@
+import { LightningElement, wire } from 'lwc';
+
+import { adapter } from './adapter';
+
+export default class Wire extends LightningElement {
+    propAndMethod() {
+        throw new Error('should not be called');
+    }
+
+    @wire(adapter, { name: 'propAndMethod' })
+    propAndMethod;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/modules/x/wire/wire.html

@@ -0,0 +1,5 @@
+<x-wire>
+  <template shadowrootmode="open">
+    propAndMethod
+  </template>
+</x-wire>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/method-prop/modules/x/wire/wire.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';
+export * from 'x/wire';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/error.txt

@@ -0,0 +1,13 @@
+export class adapter {
+    constructor(dataCallback) {
+        this.dc = dataCallback;
+    }
+
+    connect() {}
+
+    update(config) {
+        this.dc(config.name);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/expected.html

@@ -0,0 +1,3 @@
+<template>
+    {propAndMethod}
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/index.js

@@ -0,0 +1,12 @@
+import { LightningElement, wire } from 'lwc';
+
+import { adapter } from './adapter';
+
+export default class Wire extends LightningElement {
+    @wire(adapter, { name: 'propAndMethod' })
+    propAndMethod;
+
+    propAndMethod() {
+        throw new Error('should not be called');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/modules/x/wire/adapter.js

@@ -0,0 +1 @@
+Cannot assign to read only property 'wired' of object '[object Object]'

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/modules/x/wire/wire.html

@@ -0,0 +1,3 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';
+export * from 'x/wire';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/collision/prop-method/modules/x/wire/wire.js

@@ -0,0 +1,13 @@
+export class Adapter {
+    constructor(dataCallback) {
+        this.callback = dataCallback;
+    }
+
+    connect() {}
+
+    update() {
+        this.callback(true);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/error.txt

@@ -0,0 +1,4 @@
+<template>
+  <div>Wired? {wiredProp}</div>
+  <div>Using method? {methodUsed}</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/expected.html

@@ -0,0 +1,13 @@
+import { wire, LightningElement } from 'lwc';
+import { Adapter } from 'x/adapter';
+export default class Test extends LightningElement {
+    methodUsed = false;
+
+    @wire(Adapter, { key1: '$prop1', key2: ['fixed', 'array'] })
+    wired;
+
+    @wire(Adapter, { key1: '$prop1', key2: ['fixed', 'array'] })
+    wired(val) {
+        this.methodUsed = val;
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/index.js

@@ -0,0 +1,5 @@
+<x-wire>
+  <template shadowrootmode="open">
+    getterOnly setterOnly getterWithSetter setterWithGetter bothDecorated
+  </template>
+</x-wire>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/modules/x/adapter/adapter.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';
+export * from 'x/wire';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/modules/x/wire/wire.html

@@ -0,0 +1,13 @@
+export class adapter {
+    constructor(dataCallback) {
+        this.dc = dataCallback;
+    }
+
+    connect() {}
+
+    update(config) {
+        this.dc(config.name);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-when-colliding-prop-then-method/modules/x/wire/wire.js

@@ -0,0 +1,3 @@
+<template>
+    {getterOnly} {setterOnly} {getterWithSetter} {setterWithGetter} {bothDecorated}
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/get-set/error.txt

@@ -0,0 +1,41 @@
+import { LightningElement, wire } from 'lwc';
+
+import { adapter } from './adapter';
+
+export default class Wire extends LightningElement {
+    @wire(adapter, { name: 'getterOnly' })
+    get getterOnly() {
+        throw new Error('get getterOnly should not be called');
+    }
+
+    @wire(adapter, { name: 'setterOnly' })
+    set setterOnly(v) {
+        throw new Error('set setterOnly should not be called');
+    }
+
+    @wire(adapter, { name: 'getterWithSetter' })
+    get getterWithSetter() {
+        throw new Error('get getterWithSetter should not be called');
+    }
+    set getterWithSetter(v) {
+        throw new Error('set getterWithSetter should not be called');
+    }
+
+    @wire(adapter, { name: 'setterWithGetter' })
+    get setterWithGetter() {
+        throw new Error('get setterWithGetter should not be called');
+    }
+    set setterWithGetter(v) {
+        throw new Error('set setterWithGetter should not be called');
+    }
+
+    @wire(adapter, { name: 'bothDecorated' })
+    get bothDecorated() {
+        throw new Error('get bothDecorated should not be called');
+    }
+
+    @wire(adapter, { name: 'bothDecorated' })
+    set bothDecorated(v) {
+        throw new Error('set bothDecorated should not be called');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/get-set/expected.html

@@ -34,6 +34,8 @@ export const expectedFailures = new Set([
     'superclass/render-in-superclass/unused-default-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-superclass/index.js',
     'svgs/index.js',
+    'wire/errors/throws-on-computed-key/index.js',
+    'wire/errors/throws-when-colliding-prop-then-method/index.js',
     'wire/errors/throws-when-computed-prop-is-expression/index.js',
     'wire/errors/throws-when-computed-prop-is-let-variable/index.js',
     'wire/errors/throws-when-computed-prop-is-regexp-literal/index.js',

packages/@lwc/engine-server/src/__tests__/fixtures/wire/get-set/index.js

@@ -17,13 +17,9 @@ import { addGenerateMarkupFunction } from './generate-markup';
 import { catalogWireAdapters } from './wire';
 
 import { removeDecoratorImport } from './remove-decorator-import';
-import type { Identifier as EsIdentifier, Program as EsProgram, Expression } from 'estree';
+import type { Identifier as EsIdentifier, Program as EsProgram } from 'estree';
 import type { Visitors, ComponentMetaState } from './types';
 import type { CompilationMode } from '@lwc/shared';
-import type {
-    PropertyDefinition as DecoratatedPropertyDefinition,
-    MethodDefinition as DecoratatedMethodDefinition,
-} from 'meriyah/dist/src/estree';
 
 const visitors: Visitors = {
     $: { scope: true },
@@ -72,8 +68,8 @@ const visitors: Visitors = {
             return;
         }
 
-        const decorators = (node as DecoratatedPropertyDefinition).decorators;
-        const decoratedExpression = decorators?.[0]?.expression as Expression;
+        const { decorators } = node;
+        const decoratedExpression = decorators?.[0]?.expression;
         if (is.identifier(decoratedExpression) && decoratedExpression.name === 'api') {
             state.publicFields.push(node.key.name);
         } else if (
@@ -111,14 +107,32 @@ const visitors: Visitors = {
             return;
         }
 
-        const decorators = (node as DecoratatedMethodDefinition).decorators;
-        const decoratedExpression = decorators?.[0]?.expression as Expression;
+        const { decorators } = node;
+        // The real type is a subset of `Expression`, which doesn't work with the `is` validators
+        const decoratedExpression = decorators?.[0]?.expression;
         if (
             is.callExpression(decoratedExpression) &&
             is.identifier(decoratedExpression.callee) &&
             decoratedExpression.callee.name === 'wire'
         ) {
-            catalogWireAdapters(path, state);
+            // Getters and setters are methods in the AST, but treated as properties by @wire
+            // Note that this means that their implementations are ignored!
+            if (node.kind === 'get' || node.kind === 'set') {
+                const methodAsProp = b.propertyDefinition(
+                    structuredClone(node.key),
+                    null,
+                    node.computed,
+                    node.static
+                );
+                methodAsProp.decorators = structuredClone(decorators);
+                path.replaceWith(methodAsProp);
+                // We do not need to call `catalogWireAdapters()` because, by replacing the current
+                // node, `traverse()` will visit it again automatically, so we will just call
+                // `catalogWireAdapters()` later anyway.
+                return;
+            } else {
+                catalogWireAdapters(path, state);
+            }
         }
 
         switch (node.key.name) {