fix(ssr): make child props immutable

Author: nolanlawson

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/error.txt

@@ -0,0 +1,15 @@
+<x-parent>
+  <template shadowrootmode="open">
+    <x-child>
+      <template shadowrootmode="open">
+        <div>
+          
+array(disabled): error hit during mutation
+object(title): error hit during mutation
+deep(spellcheck): error hit during mutation
+object(title): error hit during deletion
+        </div>
+      </template>
+    </x-child>
+  </template>
+</x-parent>

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/expected.html

@@ -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/parent-child-read-only-pseudo-attr/index.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/modules/x/child/child.html

@@ -0,0 +1,40 @@
+import { LightningElement, api } from "lwc";
+
+export default class extends LightningElement {
+  // Intentionally using the HTML global attribute names disabled/title/spellcheck here
+  @api disabled // array
+  @api title // object
+  @api spellcheck // deep
+
+  result
+
+  connectedCallback() {
+    const results = []
+    
+    try {
+      this.disabled.push('bar')
+    } catch (err) {
+      results.push('array(disabled): error hit during mutation')
+    }
+
+    try {
+      this.title.foo = 'baz'
+    } catch (err) {
+      results.push('object(title): error hit during mutation')
+    }
+    
+    try {
+      this.spellcheck.foo[0].quux = 'quux'
+    } catch (err) {
+      results.push('deep(spellcheck): error hit during mutation')
+    }
+
+    try {
+      delete this.title.foo
+    } catch (err) {
+      results.push('object(title): error hit during deletion')
+    }
+
+    this.result = '\n' + results.join('\n')
+  }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/modules/x/child/child.js

@@ -0,0 +1,8 @@
+<template>
+  <x-child
+    disabled={array}
+    title={object}
+    spellcheck={deep}
+  >
+  </x-child>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/modules/x/parent/parent.html

@@ -0,0 +1,7 @@
+import { LightningElement } from "lwc";
+
+export default class extends LightningElement {
+  array = [1, 2, 3]
+  object = { foo: 'bar '}
+  deep = { foo: [{ bar: 'baz' }]}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/parent-child-read-only-pseudo-attr/modules/x/parent/parent.js

@@ -15,6 +15,7 @@ import { TransformerContext } from '../types';
 import { expressionIrToEs } from '../expression';
 import { irChildrenToEs, irToEs } from '../ir-to-es';
 import { isNullableOf } from '../../estree/validators';
+import { bImportDeclaration } from '../../estree/builders';
 import type { CallExpression as EsCallExpression, Expression as EsExpression } from 'estree';
 
 import type {
@@ -30,8 +31,8 @@ import type { Transformer } from '../types';
 
 const bYieldFromChildGenerator = esTemplateWithYield`
     {
-        const childProps = ${is.objectExpression};
-        const childAttrs = ${is.objectExpression};
+        const childProps = __cloneAndDeepFreeze(${/* child props */ is.objectExpression});
+        const childAttrs = ${/* child attrs */ is.objectExpression};
         const slottedContent = {
             light: Object.create(null),
             shadow: async function* () {
@@ -101,6 +102,10 @@ export const Component: Transformer<IrComponent> = function Component(node, cxt)
     const importPath = kebabcaseToCamelcase(node.name);
     const componentImport = bImportGenerateMarkup(childGeneratorLocalName, importPath);
     cxt.hoist(componentImport, childGeneratorLocalName);
+    cxt.hoist(
+        bImportDeclaration([{ cloneAndDeepFreeze: '__cloneAndDeepFreeze' }]),
+        'import:cloneAndDeepFreeze'
+    );
     const childTagName = node.name;
 
     // Anything inside the slotted content is a normal slotted content except for `<template lwc:slot-data>` which is a scoped slot.

packages/@lwc/ssr-compiler/src/compile-template/transformers/component.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { freeze, entries, isObject, isArray, create, isNull } from '@lwc/shared';
+
+// Deep freeze and clone an object. Designed for cloning/freezing child props when passed from a parent to a child so
+// that they are immutable. This is one of the normal guarantees of both engine-dom and engine-server that we want to
+// emulate in ssr-runtime. The goal here is that a child cannot mutate the props of its parent and thus affect
+// the parent's rendering, which would lead to bidirectional reactivity and mischief.
+export function cloneAndDeepFreeze(obj: any): any {
+    if (isArray(obj)) {
+        const res = [];
+        for (let i = 0; i < obj.length; i++) {
+            res[i] = cloneAndDeepFreeze(obj[i]);
+        }
+        freeze(res);
+        return res;
+    } else if (!isNull(obj) && isObject(obj)) {
+        const res = create(null);
+        for (const [key, value] of entries(obj as any)) {
+            (res as any)[key] = cloneAndDeepFreeze(value);
+        }
+        freeze(res);
+        return res;
+    } else {
+        // primitive
+        return obj;
+    }
+}

packages/@lwc/ssr-runtime/src/clone-and-deep-freeze.ts

@@ -31,3 +31,4 @@ export {
 export { hasScopedStaticStylesheets, renderStylesheets } from './styles';
 export { toIteratorDirective } from './to-iterator-directive';
 export { validateStyleTextContents } from './validate-style-text-contents';
+export { cloneAndDeepFreeze } from './clone-and-deep-freeze';