fix(runtime): double check hostRef value (#6341)

Author: christian-bromann

src/hydrate/platform/hydrate-app.ts

@@ -205,6 +205,9 @@ async function hydrateComponent(
     if (cmpMeta != null) {
       waitingElements.add(elm);
       const hostRef = getHostRef(this);
+      if (!hostRef) {
+        return;
+      }
       addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
 
       try {
@@ -214,7 +217,7 @@ async function hydrateComponent(
         results.hydratedCount++;
 
         const ref = getHostRef(elm);
-        const modeName = !ref.$modeName$ ? '$' : ref.$modeName$;
+        const modeName = !ref?.$modeName$ ? '$' : ref?.$modeName$;
         if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) {
           results.components.push({
             tag: tagName,

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

@@ -87,7 +87,7 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
             get: function (this: any) {
               const ref = getHostRef(this);
               // incoming value from a attr / prop?
-              const attrPropVal = ref.$instanceValues$?.get(memberName);
+              const attrPropVal = ref?.$instanceValues$?.get(memberName);
 
               if (origGetter && attrPropVal === undefined && !getValue(this, memberName)) {
                 // if the initial value comes from an instance getter

src/runtime/bootstrap-custom-element.ts

@@ -77,6 +77,9 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
     connectedCallback() {
       if (!this.__hasHostListenerAttached) {
         const hostRef = getHostRef(this);
+        if (!hostRef) {
+          return;
+        }
         addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
         this.__hasHostListenerAttached = true;
       }
@@ -121,7 +124,7 @@ export const forceModeUpdate = (elm: d.RenderNode) => {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
 
-    if (hostRef.$modeName$ !== mode) {
+    if (hostRef && hostRef.$modeName$ !== mode) {
       const cmpMeta = hostRef.$cmpMeta$;
       const oldScopeId = elm['s-sc'];
       const scopeId = getScopeId(cmpMeta, mode);

src/runtime/bootstrap-lazy.ts

@@ -136,6 +136,9 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
 
         connectedCallback() {
           const hostRef = getHostRef(this);
+          if (!hostRef) {
+            return;
+          }
 
           /**
            * The `connectedCallback` lifecycle event can potentially be fired multiple times
@@ -174,6 +177,9 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
            */
           plt.raf(() => {
             const hostRef = getHostRef(this);
+            if (!hostRef) {
+              return;
+            }
             const i = deferredConnectedCallbacks.findIndex((host) => host === this);
             if (i > -1) {
               deferredConnectedCallbacks.splice(i, 1);
@@ -185,7 +191,7 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
         }
 
         componentOnReady() {
-          return getHostRef(this).$onReadyPromise$;
+          return getHostRef(this)?.$onReadyPromise$;
         }
       };
 

src/runtime/client-hydrate.ts

@@ -138,14 +138,16 @@ export const initializeClientHydrate = (
       // if this child is a non-shadow component being added to a shadowDOM,
       // let's find and add its styles to the shadowRoot, so we don't get a visual flicker
       const cmpMeta = getHostRef(childRenderNode.$elm$);
-      const scopeId = getScopeId(
-        cmpMeta.$cmpMeta$,
-        BUILD.mode ? childRenderNode.$elm$.getAttribute('s-mode') : undefined,
-      );
-      const styleSheet = win.document.querySelector(`style[sty-id="${scopeId}"]`);
+      if (cmpMeta) {
+        const scopeId = getScopeId(
+          cmpMeta.$cmpMeta$,
+          BUILD.mode ? childRenderNode.$elm$.getAttribute('s-mode') : undefined,
+        );
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId}"]`);
 
-      if (styleSheet) {
-        hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        if (styleSheet) {
+          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        }
       }
     }
 

src/runtime/connected-callback.ts

@@ -14,6 +14,10 @@ import { insertBefore } from './vdom/vdom-render';
 export const connectedCallback = (elm: d.HostElement) => {
   if ((plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) {
     const hostRef = getHostRef(elm);
+    if (!hostRef) {
+      return;
+    }
+
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
 

src/runtime/disconnected-callback.ts

@@ -17,7 +17,7 @@ export const disconnectedCallback = async (elm: d.HostElement) => {
     const hostRef = getHostRef(elm);
 
     if (BUILD.hostListener) {
-      if (hostRef.$rmListeners$) {
+      if (hostRef?.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = undefined;
       }

src/runtime/element.ts

@@ -3,4 +3,4 @@ import { getHostRef } from '@platform';
 
 import type * as d from '../declarations';
 
-export const getElement = (ref: any) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : (ref as d.HostElement));
+export const getElement = (ref: any) => (BUILD.lazyLoad ? getHostRef(ref)?.$hostElement$ : (ref as d.HostElement));

src/runtime/hmr-component.ts

@@ -21,6 +21,9 @@ import { initializeComponent } from './initialize-component';
 export const hmrStart = (hostElement: d.HostElement, cmpMeta: d.ComponentRuntimeMeta, hmrVersionId: string) => {
   // ¯\_(ツ)_/¯
   const hostRef = getHostRef(hostElement);
+  if (!hostRef) {
+    return;
+  }
 
   // reset state flags to only have been connected
   hostRef.$flags$ = HOST_FLAGS.hasConnected;

src/runtime/mode.ts

@@ -7,4 +7,4 @@ export const computeMode = (elm: d.HostElement) => modeResolutionChain.map((h) =
 
 // Public
 export const setMode = (handler: d.ResolutionHandler) => modeResolutionChain.push(handler);
-export const getMode = (ref: d.RuntimeRef) => getHostRef(ref).$modeName$;
+export const getMode = (ref: d.RuntimeRef) => getHostRef(ref)?.$modeName$;