fix(core): allow bind:* via spread props [WIP]

packages/qwik/handlers.mjs

@@ -6,4 +6,4 @@
  *
  * Make sure that these handlers are listed in manifest.ts
  */
-export { _run, _task } from '@qwik.dev/core';
+export { _input, _run, _task } from '@qwik.dev/core';

packages/qwik/src/core/api.md

@@ -332,6 +332,9 @@ export const inlinedQrl: <T>(symbol: T, symbolName: string, lexicalScopeCapture?
 // @internal (undocumented)
 export const inlinedQrlDEV: <T = any>(symbol: T, symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL<T>;
 
+// @internal
+export const _input: (_: any, element: HTMLInputElement) => void;
+
 export { isBrowser }
 
 export { isDev }

packages/qwik/src/core/internal.ts

@@ -3,6 +3,7 @@ export { _walkJSX } from './ssr/ssr-render-jsx';
 export { _SharedContainer } from './shared/shared-container';
 export { queueQRL as _run } from './client/queue-qrl';
 export { scheduleTask as _task } from './use/use-task';
+export { _input } from './ssr/ssr-render-jsx';
 export { _wrapSignal, _wrapProp } from './signal/signal-utils';
 export { _restProps } from './shared/utils/prop';
 export { _IMMUTABLE } from './shared/utils/constants';

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

@@ -1,4 +1,3 @@
-import { isDev } from '@qwik.dev/core/build';
 import { assertDefined } from '../error/assert';
 import { QError, qError } from '../error/error';
 import { getPlatform, isServerPlatform } from '../platform/platform';
@@ -241,13 +240,6 @@ export const createQRL = <TYPE>(
     symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = wrapFn((symbolRef = resolved))));
   }
 
-  if (isDev) {
-    Object.defineProperty(qrl, '_devOnlySymbolRef', {
-      get() {
-        return symbolRef;
-      },
-    });
-  }
   if (qDev) {
     seal(qrl);
   }

packages/qwik/src/core/shared/shared-serialization.ts

@@ -1335,11 +1335,10 @@ export function qrlToString(
     }
     // in Dev mode we need to keep track of the symbols
     if (isDev) {
-      let backChannel: Map<string, Function> = (globalThis as any)[QRL_RUNTIME_CHUNK];
-      if (!backChannel) {
-        backChannel = (globalThis as any)[QRL_RUNTIME_CHUNK] = new Map();
-      }
-      backChannel.set(value.$symbol$, (value as any)._devOnlySymbolRef);
+      const backChannel: Map<string, unknown> = ((globalThis as any)[QRL_RUNTIME_CHUNK] ||=
+        new Map());
+      // We assume that during tests the resolved value is available
+      backChannel.set(value.$symbol$, value.resolved);
       if (!chunk) {
         chunk = QRL_RUNTIME_CHUNK;
       }

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -1,15 +1,24 @@
 import { isDev } from '@qwik.dev/core/build';
+import { queueQRL } from '../client/queue-qrl';
 import { isQwikComponent } from '../shared/component.public';
-import { createQRL, isQrl, type QRLInternal } from '../shared/qrl/qrl-class';
-import type { QRL } from '../shared/qrl/qrl.public';
 import { Fragment, directGetPropsProxyProp } from '../shared/jsx/jsx-runtime';
 import { Slot } from '../shared/jsx/slot.public';
 import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
 import { SSRComment, SSRRaw, SSRStream, type SSRStreamChildren } from '../shared/jsx/utils.public';
-import { trackSignalAndAssignHost } from '../use/use-core';
+import { createQRL, isQrl, type QRLInternal } from '../shared/qrl/qrl-class';
+import type { QRL } from '../shared/qrl/qrl.public';
+import { qrlToString, type SerializationContext } from '../shared/shared-serialization';
+import { DEBUG_TYPE, VirtualType } from '../shared/types';
 import { isAsyncGenerator } from '../shared/utils/async-generator';
+import {
+  convertEventNameFromJsxPropToHtmlAttr,
+  getEventNameFromJsxProp,
+  isJsxPropertyAnEventName,
+  isPreventDefault,
+} from '../shared/utils/event-names';
 import { EMPTY_ARRAY } from '../shared/utils/flyweight';
+import { getFileLocationFromJsx } from '../shared/utils/jsx-filename';
 import {
   ELEMENT_KEY,
   FLUSH_COMMENT,
@@ -19,23 +28,15 @@ import {
   qwikInspectorAttr,
 } from '../shared/utils/markers';
 import { isPromise } from '../shared/utils/promises';
-import { isFunction, type ValueOrPromise } from '../shared/utils/types';
-import {
-  convertEventNameFromJsxPropToHtmlAttr,
-  getEventNameFromJsxProp,
-  isJsxPropertyAnEventName,
-  isPreventDefault,
-} from '../shared/utils/event-names';
+import { qInspector } from '../shared/utils/qdev';
 import { addComponentStylePrefix, isClassAttr } from '../shared/utils/scoped-styles';
-import { qrlToString, type SerializationContext } from '../shared/shared-serialization';
-import { DEBUG_TYPE, VirtualType } from '../shared/types';
-import { WrappedSignal, EffectProperty, isSignal } from '../signal/signal';
+import { serializeAttribute } from '../shared/utils/styles';
+import { isFunction, type ValueOrPromise } from '../shared/utils/types';
+import { EffectProperty, WrappedSignal, isSignal, type Signal } from '../signal/signal';
+import { trackSignalAndAssignHost } from '../use/use-core';
+import { useLexicalScope } from '../use/use-lexical-scope.public';
 import { applyInlineComponent, applyQwikComponentBody } from './ssr-render-component';
 import type { ISsrComponentFrame, ISsrNode, SSRContainer, SsrAttrs } from './ssr-types';
-import { qInspector } from '../shared/utils/qdev';
-import { serializeAttribute } from '../shared/utils/styles';
-import { getFileLocationFromJsx } from '../shared/utils/jsx-filename';
-import { queueQRL } from '../client/queue-qrl';
 
 class ParentComponentData {
   constructor(
@@ -330,8 +331,7 @@ export function toSsrAttrs(
     return null;
   }
   const ssrAttrs: SsrAttrs = [];
-  for (const key in record) {
-    let value = record[key];
+  const handleProp = (key: string, value: unknown) => {
     if (isJsxPropertyAnEventName(key)) {
       if (anotherRecord) {
         /**
@@ -360,15 +360,15 @@ export function toSsrAttrs(
             // merge values from the const props with the var props
             value = getMergedEventPropValues(value, anotherValue);
           } else {
-            continue;
+            return;
           }
         }
       }
       const eventValue = setEvent(serializationCtx, key, value);
       if (eventValue) {
         ssrAttrs.push(convertEventNameFromJsxPropToHtmlAttr(key), eventValue);
       }
-      continue;
+      return;
     }
 
     if (isSignal(value)) {
@@ -379,7 +379,7 @@ export function toSsrAttrs(
       } else {
         ssrAttrs.push(key, value);
       }
-      continue;
+      return;
     }
 
     if (isPreventDefault(key)) {
@@ -389,13 +389,37 @@ export function toSsrAttrs(
     value = serializeAttribute(key, value, styleScopedId);
 
     ssrAttrs.push(key, value as string);
+  };
+  for (const key in record) {
+    const value = record[key];
+    if (key.startsWith('bind:')) {
+      const propName = key.slice(5);
+      // emit signal value as the value of the input
+      handleProp(propName, value);
+      // emit handler to update the signal value
+      const handler = propName === 'value' ? 'onInput$' : 'onChange$';
+      handleProp(handler, createQRL(null, '_input', _input, null, null, [value, propName]));
+    } else {
+      handleProp(key, value);
+    }
   }
   if (key != null) {
     ssrAttrs.push(ELEMENT_KEY, key);
   }
   return ssrAttrs;
 }
 
+/**
+ * Handles events for bind:* props
+ *
+ * @internal
+ */
+export const _input = (_: any, element: HTMLInputElement) => {
+  const [signal, propName] = useLexicalScope<[Signal, 'value' | 'checked']>();
+  signal.value =
+    propName === 'value' && element.type === 'number' ? element.valueAsNumber : element[propName];
+};
+
 function getMergedEventPropValues(value: unknown, anotherValue: unknown) {
   let mergedValue = value;
   // merge values from the const props with the var props

packages/qwik/src/core/tests/attributes.spec.tsx

@@ -1,4 +1,4 @@
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
 import {
   component$,
@@ -17,12 +17,12 @@
   Slot,
 } from '@qwik.dev/core';
 
-const debug = false; //true;
+const debug = !false; //true;
 Error.stackTraceLimit = 100;
 
 describe.each([
   { render: ssrRenderToDom }, //
-  { render: domRender }, //
+  // { render: domRender }, //
 ])('$render.name: attributes', ({ render }) => {
   it('should render boolean and number attributes', async () => {
     const AttrComp = component$(() => {
@@ -135,7 +135,7 @@
   });
 
   describe('binding', () => {
-    it('should bind checked attribute', async () => {
+    it.only('should bind checked attribute', async () => {
       const BindCmp = component$(() => {
         const show = useSignal(false);
         return (

packages/qwik/src/core/tests/container.spec.tsx

@@ -399,15 +399,13 @@ describe('serializer v2', () => {
         const [qrl0, qrl1, qrl2] = container.$getObjectById$(0);
         expect(qrl0.$hash$).toEqual(obj[0].$hash$);
         expect(qrl0.$captureRef$).toEqual(obj[0].$captureRef$);
-        expect(qrl0._devOnlySymbolRef).toEqual((obj[0] as any)._devOnlySymbolRef);
+        expect(qrl0.resolved).toEqual((obj[0] as any).resolved);
         expect(qrl1.$hash$).toEqual(obj[1].$hash$);
         expect(qrl1.$captureRef$).toEqual(obj[1].$captureRef$);
-        expect(qrl1._devOnlySymbolRef).toEqual((obj[1] as any)._devOnlySymbolRef);
+        expect(qrl1.resolved).toEqual((obj[1] as any).resolved);
         expect(qrl2.$hash$).toEqual(obj[2].$hash$);
         expect(qrl2.$captureRef$).toEqual(obj[2].$captureRef$);
-        expect(qrl2._devOnlySymbolRef.toString()).toEqual(
-          (obj[2] as any)._devOnlySymbolRef.toString()
-        );
+        expect(qrl2.resolved.toString()).toEqual((obj[2] as any).resolved.toString());
       });
     });
 
@@ -433,7 +431,7 @@ describe('serializer v2', () => {
         expect(dstQrl.$captureRef$).toEqual(
           srcQrl.$captureRef$.length ? srcQrl.$captureRef$ : null
         );
-        expect(dstQrl._devOnlySymbolRef).toEqual((srcQrl as any)._devOnlySymbolRef);
+        expect(dstQrl.resolved).toEqual((srcQrl as any).resolved);
       });
     });
 

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_input_bind.snap

@@ -28,50 +28,31 @@ export const Greeter = component$(() => {
 ============================= test.js ==
 
 import { componentQrl } from "@qwik.dev/core";
-import { useLexicalScope } from "@qwik.dev/core";
-import { inlinedQrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 import { _wrapProp } from "@qwik.dev/core";
+import { inlinedQrl } from "@qwik.dev/core";
 import { Fragment as _Fragment } from "@qwik.dev/core/jsx-runtime";
 export const Greeter = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(()=>{
     const value = useSignal(0);
     const checked = useSignal(false);
     const stuff = useSignal();
     return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, [
         /*#__PURE__*/ _jsxSorted("input", null, {
-            "value": value,
-            "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
-                const [value] = useLexicalScope();
-                return value.value = elm.type == "number" ? elm.valueAsNumber : elm.value;
-            }, "s_6IZeYpXCNXA", [
-                value
-            ])
+            "bind:value": value
         }, null, 3, null),
         /*#__PURE__*/ _jsxSorted("input", null, {
-            "checked": checked,
-            "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
-                const [checked] = useLexicalScope();
-                return checked.value = elm.type == "number" ? elm.valueAsNumber : elm.checked;
-            }, "s_JPI3bLCVnso", [
-                checked
-            ])
+            "bind:checked": checked
         }, null, 3, null),
         /*#__PURE__*/ _jsxSorted("input", null, {
-            "stuff": stuff,
-            "onChange$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
-                const [stuff] = useLexicalScope();
-                return stuff.value = elm.type == "number" ? elm.valueAsNumber : elm.stuff;
-            }, "s_eyREJ0lZTFw", [
-                stuff
-            ])
+            "bind:stuff": stuff
         }, null, 3, null),
         /*#__PURE__*/ _jsxSorted("div", null, null, value, 3, null),
         /*#__PURE__*/ _jsxSorted("div", null, null, _wrapProp(value), 3, null)
     ], 3, "u6_0");
 }, "s_n7HuG2hhU0Q"));
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;;AAGA,OAAO,MAAM,wBAAU,sCAAW;IACjC,MAAM,QAAQ,UAAU;IACxB,MAAM,UAAU,UAAU;IAC1B,MAAM,QAAQ;IACd,qBACC;sBACC,WAAC;qBAAkB;;;uBAAA;;;;;sBACnB,WAAC;uBAAoB;;;uBAAA;;;;;sBACrB,WAAC;qBAAkB;;;uBAAA;;;;;sBACnB,WAAC,mBAAK;sBACN,WAAC,6BAAK;;AAIT,qBAAG\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,wBAAU,sCAAW;IACjC,MAAM,QAAQ,UAAU;IACxB,MAAM,UAAU,UAAU;IAC1B,MAAM,QAAQ;IACd,qBACC;sBACC,WAAC;YAAD,cAAmB;;sBACnB,WAAC;YAAD,gBAAqB;;sBACrB,WAAC;YAAD,cAAmB;;sBACnB,WAAC,mBAAK;sBACN,WAAC,6BAAK;;AAIT,qBAAG\"}")
 == DIAGNOSTICS ==
 
 []