fix: v2 non-field api support (#5178)

* fix: support non-field api in ssr

* chore: tests

* fix: additional coverage, redundant api decorator error

* chore: add throw TODO

* fix: added tests

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/expected.html

@@ -0,0 +1,14 @@
+<x-parent>
+  <template shadowrootmode="open">
+    <x-child>
+      <template shadowrootmode="open">
+        const setter getter api value
+      </template>
+    </x-child>
+    <x-child>
+      <template shadowrootmode="open">
+        setter getter api value
+      </template>
+    </x-child>
+  </template>
+</x-parent>

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/modules/x/child/child.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/modules/x/child/child.js

@@ -0,0 +1,12 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    set setterGetterApi(value) {
+        this._someApi = value;
+    }
+
+    @api
+    get setterGetterApi() {
+        return this._someApi;
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/modules/x/parent/parent.html

@@ -0,0 +1,4 @@
+<template>
+    <x-child setter-getter-api="const setter getter api value"></x-child>
+    <x-child setter-getter-api={setterGetterApiValue}></x-child>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-getter/modules/x/parent/parent.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Parent extends LightningElement {
+    setterGetterApiValue = 'setter getter api value';
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/error.txt

@@ -0,0 +1 @@
+LWC1112: @api get setterGetterApi and @api set setterGetterApi detected in class declaration. Only one of the two needs to be decorated with @api.

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/modules/x/child/child.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/modules/x/child/child.js

@@ -0,0 +1,13 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    @api
+    set setterGetterApi(value) {
+        this._someApi = value;
+    }
+
+    @api
+    get setterGetterApi() {
+        return this._someApi;
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/modules/x/parent/parent.html

@@ -0,0 +1,4 @@
+<template>
+    <x-child setter-getter-api="const setter getter api value"></x-child>
+    <x-child setter-getter-api={setterGetterApiValue}></x-child>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter-getter/modules/x/parent/parent.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Parent extends LightningElement {
+    setterGetterApiValue = 'setter getter api value';
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/expected.html

@@ -0,0 +1,14 @@
+<x-parent>
+  <template shadowrootmode="open">
+    <x-child>
+      <template shadowrootmode="open">
+        const setter getter api value
+      </template>
+    </x-child>
+    <x-child>
+      <template shadowrootmode="open">
+        setter getter api value
+      </template>
+    </x-child>
+  </template>
+</x-parent>

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/modules/x/child/child.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/modules/x/child/child.js

@@ -0,0 +1,12 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    @api
+    set setterGetterApi(value) {
+        this._someApi = value;
+    }
+
+    get setterGetterApi() {
+        return this._someApi;
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/modules/x/parent/parent.html

@@ -0,0 +1,4 @@
+<template>
+    <x-child setter-getter-api="const setter getter api value"></x-child>
+    <x-child setter-getter-api={setterGetterApiValue}></x-child>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/api/decorated-setter/modules/x/parent/parent.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Parent extends LightningElement {
+    setterGetterApiValue = 'setter getter api value';
+}

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

@@ -0,0 +1,14 @@
+<x-parent>
+  <template shadowrootmode="open">
+    <x-child>
+      <template shadowrootmode="open">
+        const field api value
+      </template>
+    </x-child>
+    <x-child>
+      <template shadowrootmode="open">
+        field api value
+      </template>
+    </x-child>
+  </template>
+</x-parent>

packages/@lwc/engine-server/src/__tests__/fixtures/api/property/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/property/modules/x/child/child.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/api/property/modules/x/child/child.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    @api fieldApi;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/api/property/modules/x/parent/parent.html

@@ -0,0 +1,4 @@
+<template>
+    <x-child field-api="const field api value"></x-child>
+    <x-child field-api={fieldApiValue}></x-child>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/api/property/modules/x/parent/parent.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Parent extends LightningElement {
+    fieldApiValue = 'field api value';
+}

packages/@lwc/engine-server/src/__tests__/fixtures/reserved-keywords/modules/x/cmp/cmp.js

@@ -1,7 +1,7 @@
 import { LightningElement } from 'lwc';
 
-const privateFields = undefined;
-const publicFields = undefined;
+const privateProperties = undefined;
+const publicProperties = undefined;
 const stylesheetScopeToken = undefined;
 const hasScopedStylesheets = undefined;
 const defaultScopedStylesheets = undefined;
@@ -12,8 +12,8 @@ export default class extends LightningElement {
         Object.assign(
             {},
             {
-                privateFields,
-                publicFields,
+                privateProperties,
+                publicProperties,
                 stylesheetScopeToken,
                 hasScopedStylesheets,
                 defaultScopedStylesheets,

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

@@ -16,8 +16,8 @@ import type { ComponentMetaState } from './types';
 
 const bGenerateMarkup = esTemplate`
     // These variables may mix with component-authored variables, so should be reasonably unique
-    const __lwcPublicFields__ = new Set(${/*public fields*/ is.arrayExpression});
-    const __lwcPrivateFields__ = new Set(${/*private fields*/ is.arrayExpression});
+    const __lwcPublicProperties__ = new Set(${/*api*/ is.arrayExpression});
+    const __lwcPrivateProperties__ = new Set(${/*private fields*/ is.arrayExpression});
 
     async function* generateMarkup(
             tagName, 
@@ -43,8 +43,8 @@ const bGenerateMarkup = esTemplate`
         instance[__SYMBOL__SET_INTERNALS](
             props,
             attrs,
-            __lwcPublicFields__,
-            __lwcPrivateFields__,
+            __lwcPublicProperties__,
+            __lwcPrivateProperties__,
         );
         instance.isConnected = true;
         if (instance.connectedCallback) {
@@ -101,7 +101,7 @@ export function addGenerateMarkupFunction(
     tagName: string,
     filename: string
 ) {
-    const { privateFields, publicFields, tmplExplicitImports } = state;
+    const { privateProperties, publicProperties, tmplExplicitImports } = state;
 
     // The default tag name represents the component name that's passed to the transformer.
     // This is needed to generate markup for dynamic components which are invoked through
@@ -141,8 +141,8 @@ export function addGenerateMarkupFunction(
     );
     program.body.push(
         ...bGenerateMarkup(
-            b.arrayExpression(publicFields.map(b.literal)),
-            b.arrayExpression(privateFields.map(b.literal)),
+            b.arrayExpression(publicProperties.map(b.literal)),
+            b.arrayExpression(privateProperties.map(b.literal)),
             defaultTagName,
             classIdentifier,
             connectWireAdapterCode

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

@@ -105,7 +105,7 @@ const visitors: Visitors = {
         validateUniqueDecorator(decorators);
         const decoratedExpression = decorators?.[0]?.expression;
         if (is.identifier(decoratedExpression) && decoratedExpression.name === 'api') {
-            state.publicFields.push(node.key.name);
+            state.publicProperties.push(node.key.name);
         } else if (
             is.callExpression(decoratedExpression) &&
             is.identifier(decoratedExpression.callee) &&
@@ -116,9 +116,9 @@ const visitors: Visitors = {
                 throw new Error('@wire cannot be used on computed properties in SSR context.');
             }
             catalogWireAdapters(path, state);
-            state.privateFields.push(node.key.name);
+            state.privateProperties.push(node.key.name);
         } else {
-            state.privateFields.push(node.key.name);
+            state.privateProperties.push(node.key.name);
         }
 
         if (
@@ -180,6 +180,14 @@ const visitors: Visitors = {
             } else {
                 catalogWireAdapters(path, state);
             }
+        } else if (is.identifier(decoratedExpression) && decoratedExpression.name === 'api') {
+            if (state.publicProperties.includes(node.key.name)) {
+                // TODO [#5032]: Harmonize errors thrown in `@lwc/ssr-compiler`
+                throw new Error(
+                    `LWC1112: @api get ${node.key.name} and @api set ${node.key.name} detected in class declaration. Only one of the two needs to be decorated with @api.`
+                );
+            }
+            state.publicProperties.push(node.key.name);
         }
 
         switch (node.key.name) {
@@ -285,8 +293,8 @@ export default function compileJS(
         tmplExplicitImports: null,
         cssExplicitImports: null,
         staticStylesheetIds: null,
-        publicFields: [],
-        privateFields: [],
+        publicProperties: [],
+        privateProperties: [],
         wireAdapters: [],
         experimentalDynamicComponent: options.experimentalDynamicComponent,
         importManager: new ImportManager(),

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

@@ -48,10 +48,10 @@ export interface ComponentMetaState {
     cssExplicitImports: Map<string, string> | null;
     // the set of variable names associated with explicitly imported CSS files
     staticStylesheetIds: Set<string> | null;
-    // the public (`@api`-annotated) fields of the component class
-    publicFields: Array<string>;
-    // the private fields of the component class
-    privateFields: Array<string>;
+    // the public (`@api`-annotated) properties of the component class
+    publicProperties: Array<string>;
+    // the private properties of the component class
+    privateProperties: Array<string>;
     // indicates whether the LightningElement has any wired props
     wireAdapters: WireAdapter[];
     // dynamic imports configuration

packages/@lwc/ssr-runtime/src/lightning-element.ts

@@ -78,8 +78,8 @@ export class LightningElement implements PropsAvailableAtConstruction {
     [SYMBOL__SET_INTERNALS](
         props: Properties,
         attrs: Attributes,
-        publicFields: Set<string>,
-        privateFields: Set<string>
+        publicProperties: Set<string>,
+        privateProperties: Set<string>
     ) {
         this.#props = props;
         this.#attrs = attrs;
@@ -91,9 +91,9 @@ export class LightningElement implements PropsAvailableAtConstruction {
         for (const propName of keys(props)) {
             const attrName = htmlPropertyToAttribute(propName);
             if (
-                publicFields.has(propName) ||
+                publicProperties.has(propName) ||
                 ((REFLECTIVE_GLOBAL_PROPERTY_SET.has(propName) || isAriaAttribute(attrName)) &&
-                    !privateFields.has(propName))
+                    !privateProperties.has(propName))
             ) {
                 // For props passed from parents to children, they are intended to be read-only
                 // to avoid a child mutating its parent's state