fix: address review feedback and sanitize vue listener wrapping

Agent-Logs-Url: https://github.com/ElMassimo/iles/sessions/64e6d452-d6f0-447a-9605-2933041a844f

Co-authored-by: ElMassimo <1158253+ElMassimo@users.noreply.github.com>

Author: Copilot

packages/iles/jsx-runtime.js

@@ -42,7 +42,7 @@ function wrapListeners (props, type) {
       args[0],
       {
         source: 'mdx',
-        event: key.slice(2).toLowerCase(),
+        event: key.slice(2),
         tag: typeof type === 'string' ? type : type?.name || 'Component',
       },
     )

packages/iles/src/client/app/components/DebugPanel.vue

@@ -12,6 +12,7 @@ export default defineComponent({
     const open = ref(false)
     const buttonLabel = computed(() => message.value || 'Debug')
     const listenerWarnings = computed(() => (window as any).__ILE_DEVTOOLS__?.getListenerWarnings?.() || [])
+    const formattedListenerWarnings = computed(() => listenerWarnings.value.map((item: any) => item.message).join('\n\n'))
 
     const cleanPage = computed(() => {
       const layout = page.value.layoutName || 'false'
@@ -56,6 +57,7 @@ export default defineComponent({
       copyAll,
       content,
       listenerWarnings,
+      formattedListenerWarnings,
     }
   },
 })
@@ -66,7 +68,7 @@ export default defineComponent({
     <p class="title">{{ buttonLabel }}<span class="info">Open DevTools to inspect <b>islands</b> 🏝</span></p>
     <pre ref="content" class="block">{{ cleanPage }}</pre>
     <pre v-if="listenerWarnings.length" class="block warning">
-{{ listenerWarnings.map((item: any) => item.message).join('\n\n') }}
+{{ formattedListenerWarnings }}
     </pre>
     <button v-show="open" class="debug title" @click="copyAll(content)">Copy to Clipboard</button>
   </div>

packages/iles/src/client/app/listenerGuard.ts

@@ -46,4 +46,3 @@ export function guardListenerCall<T> (handler: () => T, event: Event, details: L
 
 if (typeof window !== 'undefined')
   (window as any).__ILE_GUARD_LISTENER_CALL__ = guardListenerCall
-

packages/iles/src/node/plugin/wrap.ts

@@ -135,7 +135,7 @@ function processSFCListeners (elements: ElementNode[], s: MagicString, filename:
         options.warn?.(warning)
 
       if (options.wrapListeners && prop.exp?.loc?.source)
-        s.overwrite(prop.exp.loc.start.offset, prop.exp.loc.end.offset, guardedVueExpression(prop.exp.loc.source, warning))
+        wrapVueExpression(s, prop.exp.loc.start.offset, prop.exp.loc.end.offset, warning)
     }
 
     for (const child of node.children || []) {
@@ -148,13 +148,13 @@ function processSFCListeners (elements: ElementNode[], s: MagicString, filename:
     walk(element)
 }
 
-function guardedVueExpression (expression: string, warning: ListenerWarning) {
+function wrapVueExpression (s: MagicString, start: number, end: number, warning: ListenerWarning) {
   const details = JSON.stringify({
     source: 'vue',
     ...warning,
   })
-  const run = `{ const __ile_handler = (${expression}); return typeof __ile_handler === 'function' ? __ile_handler($event) : __ile_handler }`
-  return `($event) => (window.__ILE_GUARD_LISTENER_CALL__ ? window.__ILE_GUARD_LISTENER_CALL__(() => ${run}, $event, ${details}) : (() => ${run})())`
+  s.appendLeft(start, `($event) => window.__ILE_GUARD_LISTENER_CALL__(() => { const _ileHandler = (`)
+  s.appendRight(end, `); return typeof _ileHandler === 'function' ? _ileHandler($event) : _ileHandler }, $event, ${details})`)
 }
 
 function isOnDirective (prop: any): prop is DirectiveNode {

packages/iles/tests/listener-guard.spec.ts

@@ -37,4 +37,3 @@ describe('listener guard', () => {
     expect(errors.length).toBe(0)
   })
 })
-

packages/iles/tests/remark-wrap-islands.spec.ts

@@ -31,4 +31,3 @@ describe('remarkWrapIslands listener diagnostics', () => {
     expect(warnings[0]).toContain('/src/pages/demo.mdx')
   })
 })
-

packages/iles/tests/wrap.spec.ts

@@ -34,4 +34,3 @@ describe('wrapIslandsInSFC listener diagnostics', () => {
     expect(result?.code).toContain('__ILE_GUARD_LISTENER_CALL__')
   })
 })
-