perf(ssr): avoid proxying entire props object (#5125)

salesforce · Jan 21, 2025 · 47d26b3 · 47d26b3
1 parent b02b0b9
commit 47d26b3
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts
@@ -17,7 +17,7 @@ import type { Transformer } from '../../types';
 
 const bYieldFromChildGenerator = esTemplateWithYield`
     {
-        const childProps = __getReadOnlyProxy(${/* child props */ is.objectExpression});
+        const childProps = ${/* child props */ is.objectExpression};
         const childAttrs = ${/* child attrs */ is.objectExpression};
         ${
             /*
@@ -52,7 +52,6 @@ export const Component: Transformer<IrComponent> = function Component(node, cxt)
     const importPath = kebabcaseToCamelcase(node.name);
     cxt.import({ default: childComponentLocalName }, importPath);
     cxt.import({
-        getReadOnlyProxy: '__getReadOnlyProxy',
         SYMBOL__GENERATE_MARKUP: '__SYMBOL__GENERATE_MARKUP',
     });
     const childTagName = node.name;

diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts
@@ -23,7 +23,7 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
         if (typeof Ctor !== 'function' || !(Ctor.prototype instanceof LightningElement)) {
             throw new Error(\`Invalid constructor: "\${String(Ctor)}" is not a LightningElement constructor.\`)
         }
-        const childProps = __getReadOnlyProxy(${/* child props */ is.objectExpression});
+        const childProps = ${/* child props */ is.objectExpression};
         const childAttrs = ${/* child attrs */ is.objectExpression};
         ${
             /*
@@ -57,7 +57,6 @@ export const LwcComponent: Transformer<IrLwcComponent> = function LwcComponent(n
     const lwcIs = directives.find((directive) => directive.name === 'Is');
     if (!isUndefined(lwcIs)) {
         cxt.import({
-            getReadOnlyProxy: '__getReadOnlyProxy',
             LightningElement: undefined,
             SYMBOL__GENERATE_MARKUP: '__SYMBOL__GENERATE_MARKUP',
         });

diff --git a/packages/@lwc/ssr-runtime/src/index.ts b/packages/@lwc/ssr-runtime/src/index.ts
@@ -11,7 +11,6 @@ export * from './stubs';
 export { htmlEscape, setHooks, sanitizeHtmlContent, normalizeClass } from '@lwc/shared';
 
 export { ClassList } from './class-list';
-export { getReadOnlyProxy } from './get-read-only-proxy';
 export {
     LightningElement,
     LightningElementConstructor,

diff --git a/packages/@lwc/ssr-runtime/src/lightning-element.ts b/packages/@lwc/ssr-runtime/src/lightning-element.ts
@@ -28,6 +28,7 @@ import {
 import { ClassList } from './class-list';
 import { mutationTracker } from './mutation-tracker';
 import { descriptors as reflectionDescriptors } from './reflection';
+import { getReadOnlyProxy } from './get-read-only-proxy';
 import type { Attributes, Properties } from './types';
 import type { Stylesheets } from '@lwc/shared';
 
@@ -94,7 +95,9 @@ export class LightningElement implements PropsAvailableAtConstruction {
                 ((REFLECTIVE_GLOBAL_PROPERTY_SET.has(propName) || isAriaAttribute(attrName)) &&
                     !privateFields.has(propName))
             ) {
-                (this as any)[propName] = props[propName];
+                // For props passed from parents to children, they are intended to be read-only
+                // to avoid a child mutating its parent's state
+                (this as any)[propName] = getReadOnlyProxy(props[propName]);
             }
         }
     }