fix: added readonly function and tests (#5286)

Author: jhefferman-sfdc

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/config.json

@@ -0,0 +1,7 @@
+{
+    "entry": "x/component",
+    "ssrFiles": {
+        "error": "error-ssr.txt",
+        "expected": "expected-ssr.html"
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/error-ssr.txt

@@ -0,0 +1,13 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <div>
+      Was foo mutated: true
+    </div>
+    <div>
+      Was proxy updated: true
+    </div>
+    <div>
+      Was proxy mutated: true
+    </div>
+  </template>
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/error.txt

@@ -0,0 +1,13 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <div>
+      Was foo mutated: true
+    </div>
+    <div>
+      Was proxy updated: true
+    </div>
+    <div>
+      Was proxy mutated: false
+    </div>
+  </template>
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/expected-ssr.html

@@ -0,0 +1,5 @@
+<template>
+    <div>Was foo mutated: {foo.mutated}</div>
+    <div>Was proxy updated: {readonlyFoo.mutated}</div>
+    <div>Was proxy mutated: {readonlyFoo.readonlyMutated}</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/expected.html

@@ -0,0 +1,20 @@
+import { LightningElement, readonly } from 'lwc';
+
+export default class extends LightningElement {
+    foo = {
+        mutated: false,
+        readonlyMutated: false,
+    };
+    readonlyFoo = readonly(this.foo);
+
+    connectedCallback() {
+        this.foo.mutated = true;
+
+        // Mutating the proxy should not work in V1 but will work in V2.
+        // The V2 implementation returns the original object as readonly invokation
+        // is deprecated and will be removed.
+        try {
+            this.readonlyFoo.readonlyMutated = true;
+        } catch (e) {}
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/modules/x/component/component.html

@@ -15,3 +15,15 @@ const reactiveMembrane = new ObservableMembrane();
 export function getReadOnlyProxy<T>(value: T): Readonly<T> {
     return reactiveMembrane.getReadOnlyProxy(value);
 }
+
+/**
+ * DEPRECATED: This function allows you to create a reactive readonly
+ * membrane around any object value.
+ * WARNING: This function does *NOT* make the object read-only.
+ * @param value any object
+ * @returns the provided value
+ * @deprecated
+ */
+export function readonly<T>(value: T): T {
+    return value;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/read-only-props/function/modules/x/component/component.js

@@ -40,3 +40,4 @@ export { hasScopedStaticStylesheets, renderStylesheets } from './styles';
 export { toIteratorDirective } from './to-iterator-directive';
 export { validateStyleTextContents } from './validate-style-text-contents';
 export { createContextProvider, establishContextfulRelationship, connectContext } from './wire';
+export { readonly } from './get-read-only-proxy';

packages/@lwc/ssr-runtime/src/get-read-only-proxy.ts

@@ -30,9 +30,6 @@ export function parseFragment(..._: unknown[]): never {
 export function parseSVGFragment(..._: unknown[]): never {
     throw new Error('parseSVGFragment cannot be used in SSR context.');
 }
-export function readonly(..._: unknown[]): never {
-    throw new Error('readonly cannot be used in SSR context.');
-}
 export function registerComponent(..._: unknown[]): never {
     throw new Error('registerComponent cannot be used in SSR context.');
 }