fix(runtime): clear up rootAppliedStyles (#6087)

* fix(runtime): clear up detached hostRefs and rootAppliedStyles

* fix build

* prettier

* fix after rebase

* more reverts

* more cleanups

* remove hostrefs manually instead of cleanups

* prettier

* fix build

* found the leak

* found it without errors

* delete the right element

* clean up after animation frame

* prettier

* use isConnected to check whether node is in DOM

* prettier

* solve leak for dist custom elements

* prettier

* fix: PR comment

* more rigurous cleanup

* delete the lazy instance after a timeout to ensure that any pending state updates have been processed

* prettier

* fix unit test

* chore(ci): trigger build

* disable test

* logging

* tweak

* tweak

* clean up

* minor comment update

* more cleanups

Author: christian-bromann

src/client/client-host-ref.ts

@@ -22,6 +22,15 @@ const hostRefs: WeakMap<d.RuntimeRef, d.HostRef> = /*@__PURE__*/ BUILD.hotModule
   ? ((window as any).__STENCIL_HOSTREFS__ ||= new WeakMap())
   : new WeakMap();
 
+/**
+ * Given a {@link d.RuntimeRef} remove the corresponding {@link d.HostRef} from
+ * the {@link hostRefs} WeakMap.
+ *
+ * @param ref the runtime ref of interest
+ * @returns — true if the element was successfully removed, or false if it was not present.
+ */
+export const deleteHostRef = (ref: d.RuntimeRef) => hostRefs.delete(ref);
+
 /**
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
  *

src/hydrate/platform/index.ts

@@ -129,6 +129,7 @@ export const supportsConstructableStylesheets = false;
 const hostRefs: WeakMap<d.RuntimeRef, d.HostRef> = new WeakMap();
 
 export const getHostRef = (ref: d.RuntimeRef) => hostRefs.get(ref);
+export const deleteHostRef = (ref: d.RuntimeRef) => hostRefs.delete(ref);
 
 export const registerInstance = (lazyInstance: any, hostRef: d.HostRef) =>
   hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);

src/runtime/bootstrap-custom-element.ts

@@ -1,5 +1,14 @@
 import { BUILD } from '@app-data';
-import { addHostEventListeners, forceUpdate, getHostRef, registerHost, styles, supportsShadow } from '@platform';
+import {
+  addHostEventListeners,
+  deleteHostRef,
+  forceUpdate,
+  getHostRef,
+  plt,
+  registerHost,
+  styles,
+  supportsShadow,
+} from '@platform';
 import { CMP_FLAGS } from '@utils';
 
 import type * as d from '../declarations';
@@ -89,6 +98,20 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
       if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
+
+      /**
+       * Clean up Node references lingering around in `hostRef` objects
+       * to ensure GC can clean up the memory.
+       */
+      plt.raf(() => {
+        const hostRef = getHostRef(this);
+        if (hostRef?.$vnode$?.$elm$ instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
+          delete hostRef.$vnode$;
+        }
+        if (this instanceof Node && !this.isConnected) {
+          deleteHostRef(this);
+        }
+      });
     },
     __attachShadow() {
       if (supportsShadow) {

src/runtime/bootstrap-lazy.ts

@@ -159,6 +159,19 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
 
         disconnectedCallback() {
           plt.jmp(() => disconnectedCallback(this));
+
+          /**
+           * Clear up references within the `$vnode$` object to the DOM
+           * node that was removed. This is necessary to ensure that these
+           * references used as keys in the `hostRef` object can be properly
+           * garbage collected.
+           */
+          plt.raf(() => {
+            const hostRef = getHostRef(this);
+            if (hostRef?.$vnode$?.$elm$ instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
+              delete hostRef.$vnode$.$elm$;
+            }
+          });
         }
 
         componentOnReady() {

src/runtime/disconnected-callback.ts

@@ -3,6 +3,7 @@ import { getHostRef, plt } from '@platform';
 
 import type * as d from '../declarations';
 import { PLATFORM_FLAGS } from './runtime-constants';
+import { rootAppliedStyles } from './styles';
 import { safeCall } from './update-component';
 
 const disconnectInstance = (instance: any) => {
@@ -33,4 +34,18 @@ export const disconnectedCallback = async (elm: d.HostElement) => {
       hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
     }
   }
+
+  /**
+   * Remove the element from the `rootAppliedStyles` WeakMap
+   */
+  if (rootAppliedStyles.has(elm)) {
+    rootAppliedStyles.delete(elm);
+  }
+
+  /**
+   * Remove the shadow root from the `rootAppliedStyles` WeakMap
+   */
+  if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot as unknown as Element)) {
+    rootAppliedStyles.delete(elm.shadowRoot as unknown as Element);
+  }
 };

src/runtime/styles.ts

@@ -6,7 +6,7 @@ import type * as d from '../declarations';
 import { createTime } from './profile';
 import { HYDRATED_STYLE_ID, NODE_TYPE, SLOT_FB_CSS } from './runtime-constants';
 
-const rootAppliedStyles: d.RootAppliedStyleMap = /*@__PURE__*/ new WeakMap();
+export const rootAppliedStyles: d.RootAppliedStyleMap = /*@__PURE__*/ new WeakMap();
 
 /**
  * Register the styles for a component by creating a stylesheet and then

src/runtime/vdom/update-element.ts

@@ -1,5 +1,4 @@
 import { BUILD } from '@app-data';
-import { EMPTY_OBJ } from '@utils';
 
 import type * as d from '../../declarations';
 import { NODE_TYPE } from '../runtime-constants';
@@ -24,8 +23,8 @@ export const updateElement = (oldVnode: d.VNode | null, newVnode: d.VNode, isSvg
     newVnode.$elm$.nodeType === NODE_TYPE.DocumentFragment && newVnode.$elm$.host
       ? newVnode.$elm$.host
       : (newVnode.$elm$ as any);
-  const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
-  const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
+  const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || {};
+  const newVnodeAttrs = newVnode.$attrs$ || {};
 
   if (BUILD.updatable) {
     // remove attributes no longer present on the vnode by setting them to undefined

src/testing/platform/index.ts

@@ -1,6 +1,6 @@
 export { Build } from './testing-build';
 export { modeResolutionChain, styles } from './testing-constants';
-export { getHostRef, registerHost, registerInstance } from './testing-host-ref';
+export { deleteHostRef, getHostRef, registerHost, registerInstance } from './testing-host-ref';
 export { consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, setErrorHandler } from './testing-log';
 export {
   isMemberInElement,

src/testing/platform/testing-host-ref.ts

@@ -11,6 +11,15 @@ export const getHostRef = (elm: d.RuntimeRef | undefined): d.HostRef | undefined
   return hostRefs.get(elm);
 };
 
+/**
+ * Given a {@link d.RuntimeRef} remove the corresponding {@link d.HostRef} from
+ * the {@link hostRefs} WeakMap.
+ *
+ * @param ref the runtime ref of interest
+ * @returns — true if the element was successfully removed, or false if it was not present.
+ */
+export const deleteHostRef = (ref: d.RuntimeRef) => hostRefs.delete(ref);
+
 /**
  * Add the provided `hostRef` instance to the global {@link hostRefs} map, using the provided `lazyInstance` as a key.
  * @param lazyInstance a Stencil component instance

src/utils/constants.ts

@@ -120,12 +120,6 @@ export const enum CMP_FLAGS {
  */
 export const DEFAULT_STYLE_MODE = '$';
 
-/**
- * Reusable empty obj/array
- * Don't add values to these!!
- */
-export const EMPTY_OBJ: Record<never, never> = {};
-
 /**
  * Namespaces
  */