wip remove $capture$ from qrl

Author: wmertens

packages/docs/src/routes/api/qwik/api.json

@@ -808,7 +808,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Create an inlined QRL. This is mostly useful on the server side for serialization.\n\n\n```typescript\ninlinedQrl: <T>(symbol: T | null, symbolName: string, lexicalScopeCapture?: any[]) => QRL<T>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nsymbol\n\n\n</td><td>\n\nT \\| null\n\n\n</td><td>\n\nThe object/function to register, or `null` to retrieve a previously registered one by hash\n\n\n</td></tr>\n<tr><td>\n\nsymbolName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe name of the symbol.\n\n\n</td></tr>\n<tr><td>\n\nlexicalScopeCapture\n\n\n</td><td>\n\nany\\[\\]\n\n\n</td><td>\n\n_(Optional)_ A set of lexically scoped variables to capture.\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\n[QRL](#qrl)<!-- -->&lt;T&gt;",
+      "content": "Create an inlined QRL. This is mostly useful on the server side for serialization.\n\n\n```typescript\ninlinedQrl: <T>(symbol: T | null, symbolName: string, lexicalScopeCapture?: any[] | null) => QRL<T>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nsymbol\n\n\n</td><td>\n\nT \\| null\n\n\n</td><td>\n\nThe object/function to register, or `null` to retrieve a previously registered one by hash\n\n\n</td></tr>\n<tr><td>\n\nsymbolName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe name of the symbol.\n\n\n</td></tr>\n<tr><td>\n\nlexicalScopeCapture\n\n\n</td><td>\n\nany\\[\\] \\| null\n\n\n</td><td>\n\n_(Optional)_ A set of lexically scoped variables to capture.\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\n[QRL](#qrl)<!-- -->&lt;T&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.ts",
       "mdFile": "core.inlinedqrl.md"
     },

packages/docs/src/routes/api/qwik/index.mdx

@@ -1713,7 +1713,7 @@ Create an inlined QRL. This is mostly useful on the server side for serializatio
 inlinedQrl: <T>(
   symbol: T | null,
   symbolName: string,
-  lexicalScopeCapture?: any[],
+  lexicalScopeCapture?: any[] | null,
 ) => QRL<T>;
 ```
 
@@ -1762,7 +1762,7 @@ lexicalScopeCapture
 
 </td><td>
 
-any[]
+any[] \| null
 
 </td><td>
 

packages/qwik/src/core/qwik.core.api.md

@@ -394,13 +394,13 @@ export const _IMMUTABLE: unique symbol;
 export const implicit$FirstArg: <FIRST, REST extends any[], RET>(fn: (qrl: QRL<FIRST>, ...rest: REST) => RET) => ((qrl: FIRST, ...rest: REST) => RET);
 
 // @public
-export const inlinedQrl: <T>(symbol: T | null, symbolName: string, lexicalScopeCapture?: any[]) => QRL<T>;
+export const inlinedQrl: <T>(symbol: T | null, symbolName: string, lexicalScopeCapture?: any[] | null) => QRL<T>;
 
 // Warning: (ae-forgotten-export) The symbol "QRLDev" needs to be exported by the entry point index.d.ts
 // Warning: (ae-internal-missing-underscore) The name "inlinedQrlDEV" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const inlinedQrlDEV: <T = any>(symbol: T, symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL<T>;
+export const inlinedQrlDEV: <T = any>(symbol: T, symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[] | null) => QRL<T>;
 
 export { isBrowser }
 
@@ -570,10 +570,10 @@ export type NativeUIEvent = UIEvent;
 export type NativeWheelEvent = WheelEvent;
 
 // @internal (undocumented)
-export const _noopQrl: <T>(symbolName: string, lexicalScopeCapture?: any[]) => QRL<T>;
+export const _noopQrl: <T>(symbolName: string, lexicalScopeCapture?: any[] | null) => QRL<T>;
 
 // @internal (undocumented)
-export const _noopQrlDEV: <T>(symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL<T>;
+export const _noopQrlDEV: <T>(symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[] | null) => QRL<T>;
 
 // @public
 export type NoSerialize<T> = (T & {

packages/qwik/src/core/shared/jsx/jsx-node.ts

@@ -158,10 +158,10 @@ const handleBindProp = (props: Props, prop: string) => {
   if (value) {
     if (prop === BIND_CHECKED) {
       props.checked = value;
-      props['on:input'] = createQRL(null, '_chk', _chk, null, null, [value]);
+      props['on:input'] = createQRL(null, '_chk', _chk, null, [value]);
     } else {
       props.value = value;
-      props['on:input'] = createQRL(null, '_val', _val, null, null, [value]);
+      props['on:input'] = createQRL(null, '_val', _val, null, [value]);
     }
     return true;
   }

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

@@ -35,7 +35,6 @@ export type QRLInternalMethods<TYPE> = {
   readonly $symbol$: string;
   readonly $hash$: string;
 
-  $capture$: string[] | null;
   $captureRef$: unknown[] | null;
   dev: QRLDev | null;
 
@@ -65,7 +64,6 @@ export const createQRL = <TYPE>(
   symbol: string,
   symbolRef: null | ValueOrPromise<TYPE>,
   symbolFn: null | (() => Promise<Record<string, TYPE>>),
-  capture: null | Readonly<number[]>,
   captureRef: Readonly<unknown[]> | null
 ): QRLInternal<TYPE> => {
   if (qDev && qSerialize) {
@@ -128,7 +126,7 @@ export const createQRL = <TYPE>(
 
   // Wrap functions to provide their lexical scope
   const wrapFn = (fn: TYPE): TYPE => {
-    if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
+    if (typeof fn !== 'function' || !captureRef?.length) {
       return fn;
     }
     return function (this: unknown, ...args: QrlArgs<TYPE>) {
@@ -236,7 +234,6 @@ export const createQRL = <TYPE>(
     $hash$: hash,
     getFn: bindFnToContext,
 
-    $capture$: capture,
     $captureRef$: captureRef,
     dev: null,
     resolved: undefined,

packages/qwik/src/core/shared/qrl/qrl.public.ts

@@ -254,7 +254,7 @@ export const $ = <T>(expression: T): QRL<T> => {
     );
   }
 
-  return createQRL<T>(null, 's' + runtimeSymbolId++, expression, null, null, null);
+  return createQRL<T>(null, 's' + runtimeSymbolId++, expression, null, null);
 };
 /** @private Use To avoid optimizer replacement */
 export const dollar = $;
@@ -303,7 +303,7 @@ export const sync$ = <T extends Function>(fn: T): SyncQRL<T> => {
     fn = new Function('return ' + fn.toString())() as any;
   }
 
-  return createQRL<T>('', SYNC_QRL, fn, null, null, null) as any;
+  return createQRL<T>('', SYNC_QRL, fn, null, null) as any;
 };
 
 /**
@@ -324,5 +324,5 @@ export const _qrlSync = function <TYPE extends Function>(
     serializedFn = fn.toString();
   }
   (fn as any).serialized = serializedFn;
-  return createQRL<TYPE>('', SYNC_QRL, fn, null, null, null) as any;
+  return createQRL<TYPE>('', SYNC_QRL, fn, null, null) as any;
 };

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

@@ -75,7 +75,7 @@ export const qrl = <T = any>(
   }
 
   // Unwrap subscribers
-  return createQRL<T>(chunk, symbol, null, symbolFn, null, lexicalScopeCapture);
+  return createQRL<T>(chunk, symbol, null, symbolFn, lexicalScopeCapture);
 };
 
 /**
@@ -90,25 +90,25 @@ export const qrl = <T = any>(
 export const inlinedQrl = <T>(
   symbol: T | null,
   symbolName: string,
-  lexicalScopeCapture: any[] = EMPTY_ARRAY
+  lexicalScopeCapture: any[] | null = null
 ): QRL<T> => {
   // Unwrap subscribers
-  return createQRL<T>(null, symbolName, symbol, null, null, lexicalScopeCapture);
+  return createQRL<T>(null, symbolName, symbol, null, lexicalScopeCapture);
 };
 
 /** @internal */
 export const _noopQrl = <T>(
   symbolName: string,
-  lexicalScopeCapture: any[] = EMPTY_ARRAY
+  lexicalScopeCapture: any[] | null = null
 ): QRL<T> => {
-  return createQRL<T>(null, symbolName, null, null, null, lexicalScopeCapture);
+  return createQRL<T>(null, symbolName, null, null, lexicalScopeCapture);
 };
 
 /** @internal */
 export const _noopQrlDEV = <T>(
   symbolName: string,
   opts: QRLDev,
-  lexicalScopeCapture: any[] = EMPTY_ARRAY
+  lexicalScopeCapture: any[] | null = null
 ): QRL<T> => {
   const newQrl = _noopQrl(symbolName, lexicalScopeCapture) as QRLInternal<T>;
   newQrl.dev = opts;
@@ -120,7 +120,7 @@ export const qrlDEV = <T = any>(
   chunkOrFn: string | (() => Promise<any>),
   symbol: string,
   opts: QRLDev,
-  lexicalScopeCapture: any[] = EMPTY_ARRAY
+  lexicalScopeCapture?: any[]
 ): QRL<T> => {
   const newQrl = qrl(chunkOrFn, symbol, lexicalScopeCapture, 1) as QRLInternal<T>;
   newQrl.dev = opts;
@@ -132,7 +132,7 @@ export const inlinedQrlDEV = <T = any>(
   symbol: T,
   symbolName: string,
   opts: QRLDev,
-  lexicalScopeCapture: any[] = EMPTY_ARRAY
+  lexicalScopeCapture: any[] | null = null
 ): QRL<T> => {
   const qrl = inlinedQrl(symbol, symbolName, lexicalScopeCapture) as QRLInternal<T>;
   qrl.dev = opts;

packages/qwik/src/core/shared/qrl/qrl.unit.ts

@@ -61,31 +61,25 @@ describe('serialization', () => {
     matchProps(parseQRL('./chunk#s1'), {
       $chunk$: './chunk',
       $symbol$: 's1',
-      $capture$: null,
     });
     matchProps(parseQRL('./chunk#s1[1 2]'), {
       $chunk$: './chunk',
       $symbol$: 's1',
-      $capture$: [1, 2],
     });
     matchProps(parseQRL('./chunk#s1[1 2]'), {
       $chunk$: './chunk',
       $symbol$: 's1',
-      $capture$: [1, 2],
     });
     matchProps(parseQRL('./chunk#s1[1 2]'), {
       $chunk$: './chunk',
       $symbol$: 's1',
-      $capture$: [1, 2],
     });
     matchProps(parseQRL('./chunk[1 2]'), {
       $chunk$: './chunk',
-      $capture$: [1, 2],
     });
     matchProps(parseQRL('./path#symbol[2]'), {
       $chunk$: './path',
       $symbol$: 'symbol',
-      $capture$: [2],
     });
     matchProps(
       parseQRL(
@@ -94,7 +88,6 @@ describe('serialization', () => {
       {
         $chunk$: '/src/path%2d/foo_symbol.js?_qrl_parent=/home/user/project/src/path/foo.js',
         $symbol$: 'symbol',
-        $capture$: [2],
       }
     );
   });
@@ -109,36 +102,22 @@ describe('serialization', () => {
       new WeakMap<any, any>()
     );
     assert.equal(
-      qrlToString(serializationContext, createQRL('./chunk', '', null, null, null, null)),
+      qrlToString(serializationContext, createQRL('./chunk', '', null, null, null)),
       'chunk#'
     );
     assert.equal(
-      qrlToString(serializationContext, createQRL('./c', 's1', null, null, null, null)),
+      qrlToString(serializationContext, createQRL('./c', 's1', null, null, null)),
       'c#s1'
     );
+    assert.equal(qrlToString(serializationContext, createQRL('./c', 's1', null, null, [])), 'c#s1');
     assert.equal(
-      qrlToString(serializationContext, createQRL('./c', 's1', null, null, [], null)),
-      'c#s1'
-    );
-    assert.equal(
-      qrlToString(
-        serializationContext,
-        createQRL(
-          './c',
-          's1',
-          null,
-          null,
-          // should be ignored
-          [1, '2'] as any,
-          [{}, {}]
-        )
-      ),
+      qrlToString(serializationContext, createQRL('./c', 's1', null, null, [{}, {}])),
       'c#s1[0 1]'
     );
     assert.equal(
       qrlToString(
         serializationContext,
-        createQRL('src/routes/[...index]/a+b/c?foo', 's1', null, null, null, [{}, {}])
+        createQRL('src/routes/[...index]/a+b/c?foo', 's1', null, null, [{}, {}])
       ),
       'src/routes/[...index]/a+b/c?foo#s1[2 3]'
     );
@@ -176,19 +155,19 @@ describe('serialization', () => {
 
 describe('createQRL', () => {
   test('should create QRL', () => {
-    const q = createQRL('chunk', 'symbol', 'resolved', null, null, null);
+    const q = createQRL('chunk', 'symbol', 'resolved', null, null);
     matchProps(q, {
       $chunk$: 'chunk',
       $symbol$: 'symbol',
       resolved: 'resolved',
     });
   });
   test('should have .resolved: given scalar', async () => {
-    const q = createQRL('chunk', 'symbol', 'resolved', null, null, null);
+    const q = createQRL('chunk', 'symbol', 'resolved', null, null);
     assert.equal(q.resolved, 'resolved');
   });
   test('should have .resolved: given promise for scalar', async () => {
-    const q = createQRL('chunk', 'symbol', Promise.resolve('resolved'), null, null, null);
+    const q = createQRL('chunk', 'symbol', Promise.resolve('resolved'), null, null);
     assert.equal(q.resolved, undefined);
     assert.equal(await q.resolve(), 'resolved');
     assert.equal(q.resolved, 'resolved');
@@ -199,7 +178,6 @@ describe('createQRL', () => {
       'symbol',
       null,
       () => Promise.resolve({ symbol: 'resolved' }),
-      null,
       null
     );
     assert.equal(q.resolved, undefined);
@@ -209,31 +187,31 @@ describe('createQRL', () => {
 
   const fn = () => 'hi';
   test('should have .resolved: given function without captures', async () => {
-    const q = createQRL('chunk', 'symbol', fn, null, null, null);
+    const q = createQRL('chunk', 'symbol', fn, null, null);
     assert.equal(q.resolved, fn);
   });
   test('should have .resolved: given promise for function without captures', async () => {
-    const q = createQRL('chunk', 'symbol', Promise.resolve(fn), null, null, null);
+    const q = createQRL('chunk', 'symbol', Promise.resolve(fn), null, null);
     assert.equal(q.resolved, undefined);
     assert.equal(await q.resolve(), fn);
     assert.equal(q.resolved, fn);
   });
   test('should have .resolved: promise for function without captures', async () => {
-    const q = createQRL('chunk', 'symbol', null, () => Promise.resolve({ symbol: fn }), null, null);
+    const q = createQRL('chunk', 'symbol', null, () => Promise.resolve({ symbol: fn }), null);
     assert.equal(q.resolved, undefined);
     assert.equal(await q.resolve(), fn);
     assert.equal(q.resolved, fn);
   });
 
   const capFn = () => useLexicalScope();
   test('should have .resolved: given function with captures', async () => {
-    const q = createQRL('chunk', 'symbol', capFn, null, null, ['hi']);
+    const q = createQRL('chunk', 'symbol', capFn, null, ['hi']);
     assert.isDefined(q.resolved);
     assert.notEqual(q.resolved, capFn);
     assert.deepEqual(q.resolved!(), ['hi']);
   });
   test('should have .resolved: given promise for function with captures', async () => {
-    const q = createQRL('chunk', 'symbol', Promise.resolve(capFn), null, null, ['hi']);
+    const q = createQRL('chunk', 'symbol', Promise.resolve(capFn), null, ['hi']);
     assert.equal(q.resolved, undefined);
     assert.deepEqual(await q(), ['hi']);
     assert.notEqual(q.resolved, capFn);
@@ -245,7 +223,6 @@ describe('createQRL', () => {
       'symbol',
       null,
       () => Promise.resolve({ symbol: capFn }),
-      null,
       ['hi']
     );
     assert.equal(q.resolved, undefined);

packages/qwik/src/core/shared/scheduler-rules.unit.tsx

@@ -60,7 +60,7 @@ function createMockTask(
 }
 
 function createMockQRL(symbol: string): QRL {
-  return createQRL(null, symbol, null, null, null, null) as QRL;
+  return createQRL(null, symbol, null, null, null) as QRL;
 }
 
 describe('findBlockingChore', () => {

packages/qwik/src/core/shared/serdes/allocate.ts

@@ -51,11 +51,22 @@ export const allocate = (container: DeserializeContainer, typeId: number, value:
     case TypeIds.QRL:
     case TypeIds.PreloadQRL: {
       if (typeof value === 'string') {
-        const data = value.split(' ').map(Number);
-        const chunk = container.$getObjectById$(data[0]) as string;
-        const symbol = container.$getObjectById$(data[1]) as string;
-        const captureIds = data.length > 2 ? data.slice(2) : null;
-        return createQRLWithBackChannel(chunk, symbol, captureIds);
+        const firstSpace = value.indexOf(' ');
+        const chunkIdx = Number(value.slice(0, firstSpace));
+        const secondSpace = value.indexOf(' ', firstSpace + 1);
+        const symbolIdx = Number(
+          secondSpace === -1
+            ? value.slice(firstSpace + 1)
+            : value.slice(firstSpace + 1, secondSpace)
+        );
+        const chunk = container.$getObjectById$(chunkIdx) as string;
+        const symbol = container.$getObjectById$(symbolIdx) as string;
+        const qrl = createQRLWithBackChannel(chunk, symbol);
+        if (secondSpace !== -1) {
+          // temporarily store the captured references for inflate
+          qrl.$captureRef$ = value.slice(secondSpace + 1) as unknown as unknown[];
+        }
+        return qrl;
       } else {
         return createQRLWithBackChannel('', String(value));
       }