7b6eab6 feat(qrl): wrap resolved funcs for scope (#6575)

QwikDev/qwik@7b6eab6
QwikDev · Jun 20, 2024 · e74070e · e74070e
1 parent 596ff1c
commit e74070e
Show file tree

Hide file tree

Showing 26 changed files with 196 additions and 130 deletions.
diff --git a/bindings/qwik.win32-x64-msvc.node b/bindings/qwik.win32-x64-msvc.node
diff --git a/build/package.json b/build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik/build",
-  "version": "1.5.7-dev20240620004924",
+  "version": "1.5.7-dev20240620045207",
   "main": "index.mjs",
   "types": "index.d.ts",
   "private": true,

diff --git a/cli.cjs b/cli.cjs
@@ -1,6 +1,6 @@
 /**
  * @license
- * @builder.io/qwik/cli 1.5.7-dev20240620004924
+ * @builder.io/qwik/cli 1.5.7-dev20240620045207
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -4889,7 +4889,7 @@ async function printHelp(app) {
   await runCommand2(Object.assign(app, { task: args[0], args }));
 }
 function printVersion() {
-  console.log("1.5.7-dev20240620004924");
+  console.log("1.5.7-dev20240620045207");
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

diff --git a/core.cjs b/core.cjs
@@ -1,6 +1,6 @@
 /**
  * @license
- * @builder.io/qwik 1.5.7-dev20240620004924
+ * @builder.io/qwik 1.5.7-dev20240620045207
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -1560,7 +1560,7 @@
      *
      * @public
      */
-    const version = "1.5.7-dev20240620004924";
+    const version = "1.5.7-dev20240620045207";
 
     const hashCode = (text, hash = 0) => {
         for (let i = 0; i < text.length; i++) {
@@ -8627,6 +8627,35 @@ Task Symbol: ${task.$qrl$.$symbol$}
             }
             return _containerEl;
         };
+        // Wrap functions to provide their lexical scope
+        const wrapFn = (fn) => {
+            if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
+                return fn;
+            }
+            return function (...args) {
+                let context = tryGetInvokeContext();
+                if (context) {
+                    const prevQrl = context.$qrl$;
+                    context.$qrl$ = qrl;
+                    const prevEvent = context.$event$;
+                    if (context.$event$ === undefined) {
+                        context.$event$ = this;
+                    }
+                    // const result = invoke.call(this, context, f, ...(args as Parameters<typeof f>));
+                    try {
+                        return fn.apply(this, args);
+                    }
+                    finally {
+                        context.$qrl$ = prevQrl;
+                        context.$event$ = prevEvent;
+                    }
+                }
+                context = newInvokeContext();
+                context.$qrl$ = qrl;
+                context.$event$ = this;
+                return invoke.call(this, context, fn, ...args);
+            };
+        };
         const resolve = async (containerEl) => {
             if (symbolRef !== null) {
                 // Resolving (Promise) or already resolved (value)
@@ -8641,44 +8670,36 @@ Task Symbol: ${task.$qrl$.$symbol$}
                 const hash = _containerEl.getAttribute(QInstance);
                 const doc = _containerEl.ownerDocument;
                 const qFuncs = getQFuncs(doc, hash);
+                // No need to wrap, syncQRLs can't have captured scope
                 return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
             }
+            const start = now();
+            const ctx = tryGetInvokeContext();
             if (symbolFn !== null) {
-                return (symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = module[symbol])));
+                symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = wrapFn(module[symbol])));
             }
             else {
                 const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-                return (symbolRef = maybeThen(imported, (ref) => {
-                    return (qrl.resolved = symbolRef = ref);
-                }));
+                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = symbolRef = wrapFn(ref)));
             }
+            symbolRef.finally(() => emitUsedSymbol(symbol, ctx?.$element$, start));
+            return symbolRef;
         };
         const resolveLazy = (containerEl) => {
             return symbolRef !== null ? symbolRef : resolve(containerEl);
         };
         function invokeFn(currentCtx, beforeFn) {
-            return (...args) => {
-                const start = now();
-                const fn = resolveLazy();
-                return maybeThen(fn, (f) => {
-                    if (isFunction(f)) {
-                        if (beforeFn && beforeFn() === false) {
-                            return;
-                        }
-                        const baseContext = createOrReuseInvocationContext(currentCtx);
-                        const context = {
-                            ...baseContext,
-                            $qrl$: qrl,
-                        };
-                        if (context.$event$ === undefined) {
-                            context.$event$ = this;
-                        }
-                        emitUsedSymbol(symbol, context.$element$, start);
-                        return invoke.call(this, context, f, ...args);
-                    }
+            // Note that we bind the current `this`
+            return (...args) => maybeThen(resolveLazy(), (f) => {
+                if (!isFunction(f)) {
                     throw qError(QError_qrlIsNotFunction);
-                });
-            };
+                }
+                if (beforeFn && beforeFn() === false) {
+                    return;
+                }
+                const context = createOrReuseInvocationContext(currentCtx);
+                return invoke.call(this, context, f, ...args);
+            });
         }
         const createOrReuseInvocationContext = (invoke) => {
             if (invoke == null) {
@@ -8711,7 +8732,8 @@ Task Symbol: ${task.$qrl$.$symbol$}
             resolved: undefined,
         });
         if (symbolRef) {
-            maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = resolved));
+            // Replace symbolRef with (a promise for) the value or wrapped function
+            symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = wrapFn(resolved)));
         }
         if (qDev) {
             seal(qrl);

diff --git a/core.cjs.map b/core.cjs.map
diff --git a/core.d.ts b/core.d.ts
@@ -3835,7 +3835,7 @@ export declare type ValueOrPromise<T> = T | Promise<T>;
 export declare const _verifySerializable: <T>(value: T, preMessage?: string) => T;
 
 /**
- * 1.5.7-dev20240620004924
+ * 1.5.7-dev20240620045207
  *
  * @public
  */

diff --git a/core.min.mjs b/core.min.mjs
diff --git a/core.mjs b/core.mjs
@@ -1,6 +1,6 @@
 /**
  * @license
- * @builder.io/qwik 1.5.7-dev20240620004924
+ * @builder.io/qwik 1.5.7-dev20240620045207
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -1556,7 +1556,7 @@ const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
  *
  * @public
  */
-const version = "1.5.7-dev20240620004924";
+const version = "1.5.7-dev20240620045207";
 
 const hashCode = (text, hash = 0) => {
     for (let i = 0; i < text.length; i++) {
@@ -8623,6 +8623,35 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         }
         return _containerEl;
     };
+    // Wrap functions to provide their lexical scope
+    const wrapFn = (fn) => {
+        if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
+            return fn;
+        }
+        return function (...args) {
+            let context = tryGetInvokeContext();
+            if (context) {
+                const prevQrl = context.$qrl$;
+                context.$qrl$ = qrl;
+                const prevEvent = context.$event$;
+                if (context.$event$ === undefined) {
+                    context.$event$ = this;
+                }
+                // const result = invoke.call(this, context, f, ...(args as Parameters<typeof f>));
+                try {
+                    return fn.apply(this, args);
+                }
+                finally {
+                    context.$qrl$ = prevQrl;
+                    context.$event$ = prevEvent;
+                }
+            }
+            context = newInvokeContext();
+            context.$qrl$ = qrl;
+            context.$event$ = this;
+            return invoke.call(this, context, fn, ...args);
+        };
+    };
     const resolve = async (containerEl) => {
         if (symbolRef !== null) {
             // Resolving (Promise) or already resolved (value)
@@ -8637,44 +8666,36 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
             const hash = _containerEl.getAttribute(QInstance);
             const doc = _containerEl.ownerDocument;
             const qFuncs = getQFuncs(doc, hash);
+            // No need to wrap, syncQRLs can't have captured scope
             return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
         }
+        const start = now();
+        const ctx = tryGetInvokeContext();
         if (symbolFn !== null) {
-            return (symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = module[symbol])));
+            symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = wrapFn(module[symbol])));
         }
         else {
             const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-            return (symbolRef = maybeThen(imported, (ref) => {
-                return (qrl.resolved = symbolRef = ref);
-            }));
+            symbolRef = maybeThen(imported, (ref) => (qrl.resolved = symbolRef = wrapFn(ref)));
         }
+        symbolRef.finally(() => emitUsedSymbol(symbol, ctx?.$element$, start));
+        return symbolRef;
     };
     const resolveLazy = (containerEl) => {
         return symbolRef !== null ? symbolRef : resolve(containerEl);
     };
     function invokeFn(currentCtx, beforeFn) {
-        return (...args) => {
-            const start = now();
-            const fn = resolveLazy();
-            return maybeThen(fn, (f) => {
-                if (isFunction(f)) {
-                    if (beforeFn && beforeFn() === false) {
-                        return;
-                    }
-                    const baseContext = createOrReuseInvocationContext(currentCtx);
-                    const context = {
-                        ...baseContext,
-                        $qrl$: qrl,
-                    };
-                    if (context.$event$ === undefined) {
-                        context.$event$ = this;
-                    }
-                    emitUsedSymbol(symbol, context.$element$, start);
-                    return invoke.call(this, context, f, ...args);
-                }
+        // Note that we bind the current `this`
+        return (...args) => maybeThen(resolveLazy(), (f) => {
+            if (!isFunction(f)) {
                 throw qError(QError_qrlIsNotFunction);
-            });
-        };
+            }
+            if (beforeFn && beforeFn() === false) {
+                return;
+            }
+            const context = createOrReuseInvocationContext(currentCtx);
+            return invoke.call(this, context, f, ...args);
+        });
     }
     const createOrReuseInvocationContext = (invoke) => {
         if (invoke == null) {
@@ -8707,7 +8728,8 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         resolved: undefined,
     });
     if (symbolRef) {
-        maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = resolved));
+        // Replace symbolRef with (a promise for) the value or wrapped function
+        symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = wrapFn(resolved)));
     }
     if (qDev) {
         seal(qrl);

diff --git a/core.mjs.map b/core.mjs.map
diff --git a/core.prod.cjs b/core.prod.cjs
@@ -1,6 +1,6 @@
 /**
  * @license
- * @builder.io/qwik 1.5.7-dev20240620004924
+ * @builder.io/qwik 1.5.7-dev20240620045207
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -540,7 +540,7 @@
     }
     const shouldWrapFunctional = (res, node) => !!node.key && (!isJSXNode(res) || !isFunction(res.type) && res.key != node.key);
     const dangerouslySetInnerHTML = "dangerouslySetInnerHTML";
-    const version = "1.5.7-dev20240620004924";
+    const version = "1.5.7-dev20240620045207";
     const hashCode = (text, hash = 0) => {
         for (let i = 0; i < text.length; i++) {
             hash = (hash << 5) - hash + text.charCodeAt(i), hash |= 0;
@@ -4299,6 +4299,22 @@
             return await fn(...args);
         };
         const setContainer = el => (_containerEl || (_containerEl = el), _containerEl);
+        const wrapFn = fn => "function" != typeof fn || !capture?.length && !captureRef?.length ? fn : function(...args) {
+            let context = tryGetInvokeContext();
+            if (context) {
+                const prevQrl = context.$qrl$;
+                context.$qrl$ = qrl;
+                const prevEvent = context.$event$;
+                void 0 === context.$event$ && (context.$event$ = this);
+                try {
+                    return fn.apply(this, args);
+                } finally {
+                    context.$qrl$ = prevQrl, context.$event$ = prevEvent;
+                }
+            }
+            return context = newInvokeContext(), context.$qrl$ = qrl, context.$event$ = this, 
+            invoke.call(this, context, fn, ...args);
+        };
         const resolve = async containerEl => {
             if (null !== symbolRef) {
                 return symbolRef;
@@ -4309,34 +4325,29 @@
                 const qFuncs = getQFuncs(_containerEl.ownerDocument, hash);
                 return qrl.resolved = symbolRef = qFuncs[Number(symbol)];
             }
+            const start = now();
+            const ctx = tryGetInvokeContext();
             if (null !== symbolFn) {
-                return symbolRef = symbolFn().then((module => qrl.resolved = symbolRef = module[symbol]));
-            }
-            {
+                symbolRef = symbolFn().then((module => qrl.resolved = symbolRef = wrapFn(module[symbol])));
+            } else {
                 const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-                return symbolRef = maybeThen(imported, (ref => qrl.resolved = symbolRef = ref));
+                symbolRef = maybeThen(imported, (ref => qrl.resolved = symbolRef = wrapFn(ref)));
             }
+            return symbolRef.finally((() => emitUsedSymbol(symbol, ctx?.$element$, start))), 
+            symbolRef;
         };
         const resolveLazy = containerEl => null !== symbolRef ? symbolRef : resolve(containerEl);
         function invokeFn(currentCtx, beforeFn) {
-            return (...args) => {
-                const start = now();
-                const fn = resolveLazy();
-                return maybeThen(fn, (f => {
-                    if (isFunction(f)) {
-                        if (beforeFn && !1 === beforeFn()) {
-                            return;
-                        }
-                        const context = {
-                            ...createOrReuseInvocationContext(currentCtx),
-                            $qrl$: qrl
-                        };
-                        return void 0 === context.$event$ && (context.$event$ = this), emitUsedSymbol(symbol, context.$element$, start), 
-                        invoke.call(this, context, f, ...args);
-                    }
+            return (...args) => maybeThen(resolveLazy(), (f => {
+                if (!isFunction(f)) {
                     throw qError(10);
-                }));
-            };
+                }
+                if (beforeFn && !1 === beforeFn()) {
+                    return;
+                }
+                const context = createOrReuseInvocationContext(currentCtx);
+                return invoke.call(this, context, f, ...args);
+            }));
         }
         const createOrReuseInvocationContext = invoke => null == invoke ? newInvokeContext() : isArray(invoke) ? newInvokeContextFromTuple(invoke) : invoke;
         const resolvedSymbol = refSymbol ?? symbol;
@@ -4357,7 +4368,7 @@
             $captureRef$: captureRef,
             dev: null,
             resolved: void 0
-        }), symbolRef && maybeThen(symbolRef, (resolved => qrl.resolved = symbolRef = resolved)), 
+        }), symbolRef && (symbolRef = maybeThen(symbolRef, (resolved => qrl.resolved = symbolRef = wrapFn(resolved)))), 
         qrl;
     };
     const getSymbolHash = symbolName => {