fix: on$:event should not confuse with qrlFactory

src/core/component/component.public.ts

@@ -178,6 +178,7 @@ export function component<PROPS extends {}>(
       const invokeCtx = newInvokeContext(hostElement);
       return useInvoke(invokeCtx, onMount, componentProps);
     };
+    onRenderFactory.__brand__ = 'QRLFactory';
     return h(tagName, { 'on:qRender': onRenderFactory, ...props });
   };
 }

src/core/props/props-on.ts

@@ -22,10 +22,15 @@ const ON_WINDOW_PREFIX_$ = 'onWindow$:';
 export function isOnProp(prop: string): boolean {
   return (
     prop.startsWith(ON_PREFIX) ||
-    prop.startsWith(ON_PREFIX_$) ||
     prop.startsWith(ON_DOCUMENT_PREFIX) ||
+    prop.startsWith(ON_WINDOW_PREFIX)
+  );
+}
+
+export function isOn$Prop(prop: string): boolean {
+  return (
+    prop.startsWith(ON_PREFIX_$) ||
     prop.startsWith(ON_DOCUMENT_PREFIX_$) ||
-    prop.startsWith(ON_WINDOW_PREFIX) ||
     prop.startsWith(ON_WINDOW_PREFIX_$)
   );
 }
@@ -40,10 +45,13 @@ export function isOnProp(prop: string): boolean {
  * `getProps` than looks to see if it already has a resolved value, and if so the
  * `qrlFactory` is ignored, otherwise the `qrlFactory` is used to recover the `QRL`.
  */
-export type qrlFactory = (element: Element) => Promise<QRL<any>>;
+export interface qrlFactory {
+  __brand__: `QRLFactory`;
+  (element: Element): Promise<QRL<any>>;
+}
 
 function isQrlFactory(value: any): value is qrlFactory {
-  return typeof value === 'function';
+  return typeof value === 'function' && value.__brand__ === 'QRLFactory';
 }
 
 export function qPropReadQRL(

src/core/props/props.ts

@@ -1,7 +1,7 @@
 import { assertEqual } from '../assert/assert';
 import { QError, qError } from '../error/error';
 import { parseQRL } from '../import/qrl';
-import type { QRL } from '../import/qrl.public';
+import { QRL, $ } from '../import/qrl.public';
 import { qJsonParse, qJsonStringify } from '../json/q-json';
 import { getQObjectId, QObjectIdSymbol, wrap } from '../object/q-object';
 import { QStore_hydrate } from '../object/store';
@@ -15,7 +15,7 @@ import {
   QObjectMap,
   updateSubscriptions,
 } from './props-obj-map';
-import { qPropWriteQRL, qPropReadQRL, isOnProp } from './props-on';
+import { qPropWriteQRL, qPropReadQRL, isOnProp, isOn$Prop } from './props-on';
 import { getProps, Props } from './props.public';
 
 Error.stackTraceLimit = 9999;
@@ -111,6 +111,8 @@ export function newQProps(element: Element): Props {
           if (prop === 'children') return true;
           if (isOnProp(prop)) {
             qPropWriteQRL(cache, qObjMap, prop, value);
+          } else if (isOn$Prop(prop)) {
+            qPropWriteQRL(cache, qObjMap, prop.replace('$', ''), $(value));
           } else if (prop === ':subscriptions') {
             updateSubscriptions(element, qObjRefMap, value as Set<object>);
           } else {
@@ -143,7 +145,7 @@ export function newQProps(element: Element): Props {
     }));
 }
 
-export function test_clearqPropsCache(element: Element) {
+export function test_clearPropsCache(element: Element) {
   (element as any)[Q_PROP] = undefined;
 }
 

src/core/props/props.unit.tsx

@@ -1,5 +1,5 @@
 import { createDocument } from '../../testing/document';
-import { diff, test_clearqPropsCache as test_clearQPropsCache } from './props';
+import { diff, test_clearPropsCache } from './props';
 import { getQObjectId } from '../object/q-object';
 import { dehydrate } from '../object/store.public';
 import { getProps, Props } from './props.public';
@@ -9,7 +9,7 @@ import { useStore } from '../use/use-state.public';
 import { isPromise } from '../util/promises';
 import { useEvent } from '../use/use.event.public';
 import { newInvokeContext, useInvoke } from '../use/use-core';
-import type { QRL } from '../import/qrl.public';
+import { QRL, $ } from '../import/qrl.public';
 
 describe('q-element', () => {
   let document: Document;
@@ -40,7 +40,7 @@ describe('q-element', () => {
     expect(div.getAttribute('is-awesome')).toEqual('true');
     expect(qDiv.myObj).toEqual({ mark: 'OBJ' });
 
-    test_clearQPropsCache(div);
+    test_clearPropsCache(div);
     qDiv = getProps(div);
 
     expect(qDiv.name).toBe('Qwik');
@@ -71,14 +71,14 @@ describe('q-element', () => {
   });
   it('should serialize innerHTML', () => {
     qDiv.innerHTML = '<span>WORKS</span>';
-    test_clearQPropsCache(div);
+    test_clearPropsCache(div);
     qDiv = getProps(div);
     expect(div.getAttribute('inner-h-t-m-l')).toEqual('');
     expect(div.innerHTML.toUpperCase()).toEqual('<SPAN>WORKS</SPAN>');
   });
   it('should serialize innerText', () => {
     qDiv.innerText = 'TEXT';
-    test_clearQPropsCache(div);
+    test_clearPropsCache(div);
     qDiv = getProps(div);
     expect(div.getAttribute('inner-text')).toEqual('');
     expect(div.innerText).toEqual('TEXT');
@@ -185,6 +185,21 @@ describe('q-element', () => {
       expect(await renderPromise).toEqual(['qRender']);
       expect(log).toEqual(['WORKS', 'qRender']);
     });
+
+    it('should accept QRL factory fn with "on:"', async () => {
+      const log: string[] = [];
+      const promise = Promise.resolve($(() => log.push('WORKS')));
+      qDiv['on:click'] = Object.assign(() => promise, { __brand__: 'QRLFactory' });
+      await useInvoke(newInvokeContext(div), () => qDiv['on:click']());
+      expect(log).toEqual(['WORKS']);
+    });
+
+    it('should not accept QRL factory fn with "on$:"', async () => {
+      const log: string[] = [];
+      qDiv['on$:click'] = () => log.push('WORKS');
+      await useInvoke(newInvokeContext(div), () => qDiv['on:click']());
+      expect(log).toEqual(['WORKS']);
+    });
   });
 
   describe('traverse', () => {