wip

Author: wmertens

packages/qwik/src/core/shared/component-execution.ts

@@ -64,7 +64,7 @@ export const executeComponent = (
   }
   if (isQrl(componentQRL)) {
     props = props || container.getHostProp(renderHost, ELEMENT_PROPS) || EMPTY_OBJ;
-    if (props && props.children) {
+    if (props.children) {
       delete props.children;
     }
     componentFn = componentQRL.getFn(iCtx);

packages/qwik/src/core/shared/qrl/qrl-class.ts

@@ -104,28 +104,33 @@ export const createQRL = <TYPE>(
     beforeFn?: () => void | boolean
   ) {
     // Note that we bind the current `this`
-    return (...args: QrlArgs<TYPE>): QrlReturn<TYPE> =>
-      maybeThen(resolveLazy(), (fn) => {
-        if (!isFunction(fn)) {
-          throw qError(QError.qrlIsNotFunction);
-        }
-        if (beforeFn && beforeFn() === false) {
-          return;
-        }
-        const context = createOrReuseInvocationContext(currentCtx);
-        const prevQrl = context.$qrl$;
-        const prevEvent = context.$event$;
-        // Note that we set the qrl here instead of in wrapFn because
-        // it is possible we're called on a copied qrl
-        context.$qrl$ = qrl;
-        context.$event$ ||= this as Event;
-        try {
-          return invoke.call(this, context, fn, ...(args as Parameters<typeof fn>));
-        } finally {
-          context.$qrl$ = prevQrl;
-          context.$event$ = prevEvent;
-        }
-      });
+    const bound = (...args: QrlArgs<TYPE>): ValueOrPromise<QrlReturn<TYPE> | undefined> => {
+      if (!qrl.resolved) {
+        return qrl.resolve().then((fn) => {
+          if (!isFunction(fn)) {
+            throw qError(QError.qrlIsNotFunction);
+          }
+          return bound(...args);
+        });
+      }
+      if (beforeFn && beforeFn() === false) {
+        return;
+      }
+      const context = createOrReuseInvocationContext(currentCtx);
+      const prevQrl = context.$qrl$;
+      const prevEvent = context.$event$;
+      // Note that we set the qrl here instead of in wrapFn because
+      // it is possible we're called on a copied qrl
+      context.$qrl$ = qrl;
+      context.$event$ ||= this as Event;
+      try {
+        return invoke.call(this, context, symbolRef as any, ...(args as any));
+      } finally {
+        context.$qrl$ = prevQrl;
+        context.$event$ = prevEvent;
+      }
+    };
+    return bound;
   }
 
   const resolveLazy = (containerEl?: Element): ValueOrPromise<TYPE> => {
@@ -138,18 +143,25 @@ export const createQRL = <TYPE>(
       return fn;
     }
     return function (this: unknown, ...args: QrlArgs<TYPE>) {
-      const context = tryGetInvokeContext() || newInvokeContext();
-      const prevQrl = context.$qrl$;
-      const prevEvent = context.$event$;
+      let context = tryGetInvokeContext();
+      // use the given qrl if it is the right one
+      if (context) {
+        // TODO check if this is necessary in production
+        if ((context.$qrl$ as QRLInternal)?.$symbol$ === qrl.$symbol$) {
+          return fn.apply(this, args);
+        }
+        const prevQrl = context.$qrl$;
+        context.$qrl$ = qrl;
+        try {
+          return fn.apply(this, args);
+        } finally {
+          context.$qrl$ = prevQrl;
+        }
+      }
+      context = newInvokeContext();
       context.$qrl$ = qrl;
-      // TODO do we use this?
       context.$event$ = this as Event;
-      try {
-        return invoke.call(this, context, fn as any, ...args);
-      } finally {
-        context.$qrl$ = prevQrl;
-        context.$event$ = prevEvent;
-      }
+      return invoke.call(this, context, fn as any, ...args);
     } as TYPE;
   };
 
@@ -174,10 +186,12 @@ export const createQRL = <TYPE>(
     const start = now();
     const ctx = tryGetInvokeContext();
     if (symbolFn !== null) {
-      symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = wrapFn(module[symbol])));
+      symbolRef = symbolFn().then(
+        (module) => (qrl.resolved = wrapFn((symbolRef = module[symbol])))
+      );
     } else {
       const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-      symbolRef = maybeThen(imported, (ref) => (qrl.resolved = symbolRef = wrapFn(ref)));
+      symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
     }
     if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
       symbolRef.then(
@@ -223,8 +237,8 @@ export const createQRL = <TYPE>(
     resolved: undefined,
   });
   if (symbolRef) {
-    // Replace symbolRef with (a promise for) the value or wrapped function
-    symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = wrapFn(resolved)));
+    // Unwrap any promises
+    symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = wrapFn((symbolRef = resolved))));
   }
 
   if (isDev) {