fix(ssr): throw compile-time error on @wire-decorated getter/setter/method (#5175)

* fix(ssr): throw compile-time error on @wire-decorated getter/setter/method

* fix(ssr): disallow @wire on computed props

Author: wjhsf

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

@@ -11,6 +11,7 @@ import { rollup } from 'rollup';
 import lwcRollupPlugin from '@lwc/rollup-plugin';
 import { testFixtureDir, formatHTML } from '@lwc/test-utils-lwc-internals';
 import { setFeatureFlagForTest } from '../index';
+import type { FeatureFlagName } from '@lwc/features/dist/types';
 import type { RollupLwcOptions } from '@lwc/rollup-plugin';
 import type * as lwc from '../index';
 
@@ -128,16 +129,17 @@ function testFixtures(options?: RollupLwcOptions) {
             // the LightningElement. Therefor the compiled module should also be evaluated in the
             // same sandbox registry as the engine.
             const lwcEngineServer = await import('../index');
-            const module = (await import(compiledFixturePath)) as FixtureModule;
-
-            const features = module!.features ?? [];
-            features.forEach((flag) => {
-                lwcEngineServer!.setFeatureFlagForTest(flag, true);
-            });
 
             let result;
             let err;
+            let features: FeatureFlagName[] = [];
             try {
+                const module = (await import(compiledFixturePath)) as FixtureModule;
+
+                features = module!.features ?? [];
+                features.forEach((flag) => {
+                    lwcEngineServer!.setFeatureFlagForTest(flag, true);
+                });
                 result = formatHTML(
                     lwcEngineServer!.renderComponent(
                         module!.tagName,
@@ -146,10 +148,10 @@ function testFixtures(options?: RollupLwcOptions) {
                     )
                 );
             } catch (_err: any) {
-                if (_err.name === 'AssertionError') {
+                if (_err?.name === 'AssertionError') {
                     throw _err;
                 }
-                err = _err.message;
+                err = _err?.message || 'An empty error occurred?!';
             }
 
             features.forEach((flag) => {

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/config.json

@@ -0,0 +1,6 @@
+{
+    "ssrFiles": {
+        "error": "error-ssr.txt",
+        "expected": "expected-ssr.html"
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/error-ssr.txt

@@ -0,0 +1 @@
+Unknown state: property definition has no key

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-key/expected.html renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/error.txt

@@ -0,0 +1,10 @@
+<x-wire>
+  <template shadowrootmode="open">
+    <p>
+      Prop named symbol that should not be used: wire data
+    </p>
+    <p>
+      Prop with symbol key that should be used: unset
+    </p>
+  </template>
+</x-wire>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/expected-ssr.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/expected.html

@@ -0,0 +1,4 @@
+<template>
+    <p>Prop named symbol that should not be used: {symbol}</p>
+    <p>Prop with symbol key that should be used: {symbolValue}</p>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-key/index.js renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/index.js

@@ -0,0 +1,14 @@
+import { LightningElement, wire } from 'lwc';
+import { adapter } from './adapter';
+
+const symbol = Symbol("I'm a symbol!");
+export default class extends LightningElement {
+    symbol = 'accidentally overwritten';
+
+    @wire(adapter, { value: 'wire data' })
+    [symbol] = 'unset';
+
+    get symbolValue() {
+        return this[symbol] ?? 'unset';
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/modules/x/wire/adapter.js

@@ -0,0 +1,6 @@
+{
+    "ssrFiles": {
+        "error": "error-ssr.txt",
+        "expected": "expected-ssr.html"
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/modules/x/wire/wire.html

@@ -0,0 +1 @@
+@wire cannot be used on computed properties in SSR context.

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/computed-prop-updates-incorrectly/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/errors/throws-on-computed-getter/config.json

@@ -8,11 +8,6 @@ export default class Wire extends LightningElement {
         throw new Error('getter should not be called');
     }
 
-    @wire(adapter, { name: 'symbol' })
-    set [sym](v) {
-        throw new Error('setter should not be called');
-    }
-
     get exposedSymbol() {
         return this[sym];
     }

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/error-ssr.txt

@@ -0,0 +1,6 @@
+{
+    "ssrFiles": {
+        "error": "error-ssr.txt",
+        "expected": "expected-ssr.html"
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-key/error.txt renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/error.txt

@@ -0,0 +1 @@
+[7:13]: Unexpected token: '{'

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/expected-ssr.html

@@ -0,0 +1 @@
+An empty error occurred?!

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/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/errors/throws-on-computed-getter/index.js

@@ -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-on-computed-key/modules/x/wire/adapter.js renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/modules/x/wire/adapter.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-key/modules/x/wire/wire.html renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/modules/x/wire/wire.html

@@ -0,0 +1,14 @@
+import { LightningElement, wire } from 'lwc';
+import { adapter } from './adapter';
+const sym = Symbol('computed prop');
+
+export default class Wire extends LightningElement {
+    @wire(adapter, { name: 'symbol' })
+    [sym]() {
+        return 'john was here';
+    }
+
+    get exposedSymbol() {
+        return this[sym]();
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-key/modules/x/wire/wire.js renamed to packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-getter/modules/x/wire/wire.js

@@ -0,0 +1,6 @@
+{
+    "ssrFiles": {
+        "error": "error-ssr.txt",
+        "expected": "expected-ssr.html"
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/config.json

@@ -0,0 +1 @@
+@wire cannot be used on computed properties in SSR context.

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/error-ssr.txt

@@ -0,0 +1 @@
+setter should not be called

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/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/errors/throws-on-computed-method/expected-ssr.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-on-computed-method/expected.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/index.js

@@ -0,0 +1,15 @@
+import { LightningElement, wire } from 'lwc';
+import { adapter } from './adapter';
+const sym = Symbol('computed prop');
+
+export default class Wire extends LightningElement {
+    @wire(adapter, { name: 'symbol' })
+    set [sym](_) {
+        throw new Error('setter should not be called');
+    }
+
+    get exposedSymbol() {
+        this[sym] = 123;
+        return 123;
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/modules/x/wire/adapter.js

@@ -12,6 +12,5 @@ export const expectedFailures = new Set([
     'attribute-global-html/as-component-prop/without-@api/index.js',
     'exports/component-as-default/index.js',
     'known-boolean-attributes/default-def-html-attributes/static-on-component/index.js',
-    'wire/errors/throws-on-computed-key/index.js',
     'wire/errors/throws-when-colliding-prop-then-method/index.js',
 ]);

packages/@lwc/engine-server/src/__tests__/fixtures/wire/errors/throws-on-computed-method/modules/x/wire/wire.html

@@ -93,7 +93,11 @@ const visitors: Visitors = {
     },
     PropertyDefinition(path, state) {
         const node = path.node;
-        if (!is.identifier(node?.key)) {
+        if (!node?.key) {
+            // Seems to occur for `@wire() [symbol];` -- not sure why
+            throw new Error('Unknown state: property definition has no key');
+        }
+        if (!is.identifier(node.key)) {
             return;
         }
 
@@ -107,6 +111,10 @@ const visitors: Visitors = {
             is.identifier(decoratedExpression.callee) &&
             decoratedExpression.callee.name === 'wire'
         ) {
+            if (node.computed) {
+                // TODO [#5032]: Harmonize errors thrown in `@lwc/ssr-compiler`
+                throw new Error('@wire cannot be used on computed properties in SSR context.');
+            }
             catalogWireAdapters(path, state);
             state.privateFields.push(node.key.name);
         } else {
@@ -146,9 +154,17 @@ const visitors: Visitors = {
             is.identifier(decoratedExpression.callee) &&
             decoratedExpression.callee.name === 'wire'
         ) {
+            // not a getter/setter
+            const isRealMethod = node.kind === 'method';
+            if (node.computed) {
+                // TODO [#5032]: Harmonize errors thrown in `@lwc/ssr-compiler`
+                throw new Error(
+                    `@wire cannot be used on computed ${isRealMethod ? 'method' : 'properties'} in SSR context.`
+                );
+            }
             // 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') {
+            if (!isRealMethod) {
                 const methodAsProp = b.propertyDefinition(
                     structuredClone(node.key),
                     null,