fix(ssr): exponential perf slow down (#6128)

* fix(ssr): exponential perf slow down

* chore: tidying

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

src/hydrate/platform/proxy-host-element.ts

@@ -97,27 +97,32 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
           enumerable: true,
         });
 
-        // instance
-        Object.defineProperty((cstr as any).prototype, memberName, {
-          get: function (this: any) {
-            if (origGetter && attrPropVal === undefined && !getValue(this, memberName)) {
-              // if the initial value comes from an instance getter
-              // the element will never have the value set. So let's do that now.
-              setValue(this, memberName, origGetter.apply(this), cmpMeta);
-            }
-
-            // if we have a parsed value from an attribute / or userland prop use that first.
-            // otherwise if we have a getter already applied, use that.
-            const ref = getHostRef(this);
-            return ref.$instanceValues$?.get(memberName) !== undefined
-              ? ref.$instanceValues$?.get(memberName)
-              : origGetter
-                ? origGetter.apply(this)
-                : getValue(this, memberName);
-          },
-          configurable: true,
-          enumerable: true,
-        });
+        if (!(cstr as any).prototype.__stencilAugmented) {
+          // instance prototype
+          Object.defineProperty((cstr as any).prototype, memberName, {
+            get: function (this: any) {
+              const ref = getHostRef(this);
+              // incoming value from a attr / prop?
+              const attrPropVal = ref.$instanceValues$?.get(memberName);
+
+              if (origGetter && attrPropVal === undefined && !getValue(this, memberName)) {
+                // if the initial value comes from an instance getter
+                // the element will never have the value set. So let's do that now.
+                setValue(this, memberName, origGetter.apply(this), cmpMeta);
+              }
+
+              // if we have a parsed value from an attribute / or userland prop use that first.
+              // otherwise if we have a getter already applied, use that.
+              return attrPropVal !== undefined
+                ? attrPropVal
+                : origGetter
+                  ? origGetter.apply(this)
+                  : getValue(this, memberName);
+            },
+            configurable: true,
+            enumerable: true,
+          });
+        }
       } else if (memberFlags & MEMBER_FLAGS.Method) {
         Object.defineProperty(elm, memberName, {
           value(this: d.HostElement, ...args: any[]) {
@@ -131,6 +136,8 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
         });
       }
     });
+    // instance prototype should only be processed once
+    (cstr as any).prototype.__stencilAugmented = true;
   }
 }
 

src/runtime/proxy-component.ts

@@ -30,11 +30,11 @@ export const proxyComponent = (
   const prototype = (Cstr as any).prototype;
 
   if (BUILD.isTesting) {
-    if (prototype.done) {
+    if (prototype.__stencilAugmented) {
       // @ts-expect-error - we don't want to re-augment the prototype. This happens during spec tests.
       return;
     }
-    prototype.done = true;
+    prototype.__stencilAugmented = true;
   }
 
   /**

test/wdio/ssr-hydration/cmp.test.tsx

@@ -56,4 +56,31 @@ describe('ssr-shadow-cmp', () => {
 
     document.querySelector('#stage')?.remove();
   });
+
+  it('checks perf when loading lots of the same component', async () => {
+    performance.mark('start');
+
+    const { html } = await renderToString(
+      Array(50)
+        .fill(0)
+        .map((_, i) => `<ssr-shadow-cmp>Value ${i}</ssr-shadow-cmp>`)
+        .join(''),
+      {
+        fullDocument: true,
+        serializeShadowRoot: true,
+        constrainTimeouts: false,
+      },
+    );
+    const stage = document.createElement('div');
+    stage.setAttribute('id', 'stage');
+    stage.setHTMLUnsafe(html);
+    document.body.appendChild(stage);
+
+    performance.mark('end');
+    const renderTime = performance.measure('render', 'start', 'end').duration;
+
+    await expect(renderTime).toBeLessThan(100);
+
+    document.querySelector('#stage')?.remove();
+  });
 });

test/wdio/ssr-hydration/cmp.tsx

@@ -1,13 +1,25 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ssr-shadow-cmp',
   shadow: true,
 })
 export class SsrShadowCmp {
+  @Prop() value: string;
+  @Prop() label: string;
+  @Prop() selected: boolean;
+  @Prop() disabled: boolean;
+
   render() {
     return (
-      <div>
+      <div
+        class={{
+          option: true,
+          'option--selected': this.selected,
+          'option--disabled': this.disabled,
+          'option--novalue': !this.value,
+        }}
+      >
         <slot />
       </div>
     );