refactor: adjust event options handling to be JSX friendly

packages/runtime-dom/__tests__/patchEvents.spec.ts

@@ -61,7 +61,7 @@ describe(`runtime-dom: events patching`, () => {
     const el = document.createElement('div')
     const event = new Event('click')
     const fn = jest.fn()
-    patchProp(el, 'onClick.once.capture', null, fn)
+    patchProp(el, 'onClickOnceCapture', null, fn)
     el.dispatchEvent(event)
     await timeout()
     el.dispatchEvent(event)
@@ -73,13 +73,17 @@ describe(`runtime-dom: events patching`, () => {
     const el = document.createElement('div')
     const event = new Event('click')
     const fn = jest.fn()
-    patchProp(el, 'onClick.capture', null, fn)
-    patchProp(el, 'onClick.capture', fn, null)
+    patchProp(el, 'onClickCapture', null, fn)
+    el.dispatchEvent(event)
+    await timeout()
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    patchProp(el, 'onClickCapture', fn, null)
     el.dispatchEvent(event)
     await timeout()
     el.dispatchEvent(event)
     await timeout()
-    expect(fn).not.toHaveBeenCalled()
+    expect(fn).toHaveBeenCalledTimes(1)
   })
 
   it('should support native onclick', async () => {

packages/runtime-dom/src/modules/events.ts

@@ -82,23 +82,20 @@ export function patchEvent(
   }
 }
 
-const optionsModifierRE = /\.(once|passive|capture)\b/g
+const optionsModifierRE = /(?:Once|Passive|Capture)$/
 
 function parseName(name: string): [string, EventListenerOptions | undefined] {
-  name = name.slice(2).toLowerCase()
+  let options: EventListenerOptions | undefined
   if (optionsModifierRE.test(name)) {
-    const options: EventListenerOptions = {}
-    name = name.replace(
-      optionsModifierRE,
-      (_, key: keyof EventListenerOptions) => {
-        options[key] = true
-        return ''
-      }
-    )
-    return [name, options]
-  } else {
-    return [name, undefined]
+    options = {}
+    let m
+    while ((m = name.match(optionsModifierRE))) {
+      name = name.slice(0, name.length - m[0].length)
+      ;(options as any)[m[0].toLowerCase()] = true
+      options
+    }
   }
+  return [name.slice(2).toLowerCase(), options]
 }
 
 function createInvoker(