Render event handlers

Author: Timothy Johnson

dest/devtools/panel.html

@@ -39,6 +39,7 @@
         background-color: rgb(48, 64, 81);
         color: white;
         content: attr(data-tooltip);
+        white-space: pre;
         opacity: 0;
         transition: opacity 0.2s;
         transform: translateY(100%);

dest/privilegedContent.js

@@ -39,6 +39,11 @@
             o.push({ key, value, isBound: key in node.detail.$$.bound })
             return o
           }, []),
+          listeners: Object.entries(node.detail.$$.callbacks).reduce(
+            (list, [type, value]) =>
+              list.concat(value.map(o => ({ type, handler: o.toString() }))),
+            []
+          ),
           ctx: Object.entries(ctx).map(([key, value]) => ({ key, value }))
         }
         break
@@ -47,7 +52,13 @@
           attributes: Array.from(node.detail.attributes).map(attr => ({
             key: attr.name,
             value: attr.value
-          }))
+          })),
+          listeners: node.detail._listeners
+            ? node.detail._listeners.map(o => ({
+                type: o.type,
+                handler: o.handler.toString()
+              }))
+            : []
         }
 
         break
@@ -69,6 +80,7 @@
 
   const nodeMap = new Map()
   let _id = 0
+  let svelteDepth = 0
   let currentComponent
 
   function addNode(node, target, anchor) {
@@ -90,8 +102,6 @@
   }
 
   function onElementAdded(element, target, anchor) {
-    instrumentElement(element)
-
     addNode(
       {
         id: _id++,
@@ -114,6 +124,22 @@
     }
   }
 
+  function addEventListener(type, handler, options) {
+    if (!this._listeners) this._listeners = []
+    this._listeners.push({ type, handler })
+    this._addEventListener(type, handler, options)
+  }
+
+  function removeEventListener(type, handler, options) {
+    if (this._listeners) {
+      const index = this._listeners.findIndex(
+        o => o.type == type && o.handler == handler
+      )
+      if (index != -1) this._listeners.splice(index, 1)
+    }
+    this._removeEventListener(type, handler, options)
+  }
+
   function appendChild(child) {
     onElementAdded(child, this)
     this._appendChild(child)
@@ -146,23 +172,30 @@
     })
   )
 
-  function instrumentElement(element) {
-    if (!element._appendChild) {
-      element._appendChild = element.appendChild
-      element.appendChild = appendChild
-    }
+  document._createElement = document.createElement
+  document.createElement = type => {
+    if (svelteDepth < 1) return document._createElement(type)
 
-    if (!element._insertBefore) {
-      element._insertBefore = element.insertBefore
-      element.insertBefore = insertBefore
-    }
+    const element = document._createElement(type)
 
-    if (!element._removeChild) {
-      element._removeChild = element.removeChild
-      element.removeChild = removeChild
-    }
+    element._addEventListener = element.addEventListener
+    element.addEventListener = addEventListener
+
+    element._removeEventListener = element.removeEventListener
+    element.removeEventListener = removeEventListener
+
+    element._appendChild = element.appendChild
+    element.appendChild = appendChild
+
+    element._insertBefore = element.insertBefore
+    element.insertBefore = insertBefore
+
+    element._removeChild = element.removeChild
+    element.removeChild = removeChild
 
     observer.observe(element, { characterData: true })
+
+    return element
   }
 
   document.addEventListener('SvelteRegisterComponent', e => {
@@ -175,10 +208,17 @@
       })
     })
 
+    const createFn = e.detail.component.$$.fragment.c
     const mountFn = e.detail.component.$$.fragment.m
     const patchFn = e.detail.component.$$.fragment.p
     const detachFn = e.detail.component.$$.fragment.d
+    e.detail.component.$$.fragment.c = () => {
+      svelteDepth++
+      createFn()
+      svelteDepth--
+    }
     e.detail.component.$$.fragment.m = (target, anchor) => {
+      svelteDepth++
       const node = {
         id: _id++,
         type: 'component',
@@ -188,14 +228,15 @@
       }
       addNode(node, target, anchor)
       currentComponent = node
-      instrumentElement(target)
 
       mountFn(target, anchor)
 
       currentComponent = currentComponent.parentComponent
+      svelteDepth--
     }
 
     e.detail.component.$$.fragment.p = (changed, ctx) => {
+      svelteDepth++
       const parentComponent = currentComponent
       currentComponent = nodeMap.get(e.detail.component)
 
@@ -206,9 +247,11 @@
 
       patchFn(changed, ctx)
       currentComponent = parentComponent
+      svelteDepth--
     }
 
     e.detail.component.$$.fragment.d = detaching => {
+      svelteDepth++
       const node = nodeMap.get(e.detail.component)
       nodeMap.delete(node.id)
       nodeMap.delete(e.detail.component)
@@ -217,6 +260,7 @@
         node: serializeNode(node)
       })
       detachFn(detaching)
+      svelteDepth--
     }
   })
 

src/nodes/Attributes.svelte

@@ -1,9 +1,11 @@
 <script>
-  export let values
+  export let attributes
+  export let listeners
 </script>
 
 <style>
   .attr-name {
+    position: relative;
     color: rgb(221, 0, 169);
   }
 
@@ -18,7 +20,7 @@
   }
 </style>
 
-{#each values as { key, value, isBound } (key)}
+{#each attributes as { key, value, isBound } (key)}
   &nbsp;
   <span class="attr-name">
     {#if isBound}bind:{/if}
@@ -27,3 +29,8 @@
   =
   <span class="attr-value">{JSON.stringify(value)}</span>
 {/each}
+
+{#each listeners as { type, handler } (type)}
+  &nbsp;
+  <span class="attr-name" data-tooltip={handler}>on:{type}</span>
+{/each}

src/nodes/Element.svelte

@@ -9,6 +9,7 @@
   export let highlighted
   export let tagName
   export let attributes = []
+  export let listeners = []
   export let collapsed
 </script>
 
@@ -28,7 +29,7 @@
     <Collapse {selected} bind:collapsed />
     &lt;
     <span>{tagName}</span>
-    <Attributes values={attributes} />
+    <Attributes {attributes} {listeners} />
     &gt;
     {#if collapsed}
       ...&lt;/
@@ -48,7 +49,7 @@
   <div class:hover class:selected {style}>
     &lt;
     <span>{tagName}</span>
-    <Attributes values={attributes} />
+    <Attributes {attributes} {listeners} />
     &nbsp;/&gt;
   </div>
 {/if}

test/src/App.svelte

@@ -3,6 +3,7 @@
   import Detach from './Detach/Detach.svelte'
   import Blocks from './Blocks.svelte'
   import Bind from './Bind/Bind.svelte'
+  import Events from './Events/Events.svelte'
 </script>
 
 <style>
@@ -35,4 +36,5 @@
   <Detach />
   <Blocks />
   <Bind />
+  <Events />
 </div>

test/src/Events/Events.svelte

@@ -0,0 +1,7 @@
+<script>
+  import EventsComponent from './EventsComponent.svelte'
+</script>
+
+<p>Render event listeners on elements and components.</p>
+
+<EventsComponent on:click={e => console.log(e.detail)} />

test/src/Events/EventsComponent.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<button type="button" on:click={() => dispatch('click', 'I was clicked!')}>
+  Click me!
+</button>