fix(runtime): clear up rootAppliedStyles

src/runtime/bootstrap-lazy.ts

@@ -16,7 +16,7 @@ import {
 import { hmrStart } from './hmr-component';
 import { createTime, installDevTools } from './profile';
 import { proxyComponent } from './proxy-component';
-import { HYDRATED_CSS, PLATFORM_FLAGS, PROXY_FLAGS, SLOT_FB_CSS } from './runtime-constants';
+import { HYDRATED_CSS, NODE_TYPE, PLATFORM_FLAGS, PROXY_FLAGS, SLOT_FB_CSS } from './runtime-constants';
 import { appDidLoad } from './update-component';
 export { setNonce } from '@platform';
 
@@ -159,6 +159,23 @@ 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$ &&
+              hostRef.$vnode$.$elm$.nodeType === NODE_TYPE.ElementNode &&
+              !isNodeAttached(hostRef.$vnode$.$elm$)
+            ) {
+              delete hostRef.$vnode$.$elm$;
+            }
+          });
         }
 
         componentOnReady() {
@@ -259,3 +276,12 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
   // Fallback appLoad event
   endBootstrap();
 };
+
+/**
+ * Check if a node is attached to the DOM
+ * @param node an element or document
+ * @returns true if the node is attached to the DOM
+ */
+function isNodeAttached(node: Node): boolean {
+  return node === document || node === document.documentElement || document.contains(node);
+}

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/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
  */