feat(runtime): Basic implementation of the patchEvent() function

rigor789 · Mar 15, 2020 · 730d416 · 730d416
1 parent e97cd18
commit 730d416
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 24 deletions.
diff --git a/apps/test/app/app.js b/apps/test/app/app.js
@@ -37,24 +37,6 @@ const app = createApp({
                 col
             })
 
-        const toggleAttrTest = condition =>
-            h('Label', {
-                text: 'Hello World',
-                ref: 'test',
-                row: 3,
-                ...(condition
-                    ? {
-                          textWrap: true,
-                          fontSize: 60,
-                          padding: 60,
-                          borderWidth: 2,
-                          customProperty: 'TESTING',
-                          'android:borderColor': 'red',
-                          'ios:borderColor': 'blue'
-                      }
-                    : {})
-            })
-
         const labelsTest = () =>
             h(
                 'GridLayout',
@@ -91,6 +73,36 @@ const app = createApp({
                 ]
             )
 
+        const toggleAttrTest = condition =>
+            h('Label', {
+                text: 'Hello World',
+                ref: 'test',
+                row: 3,
+                ...(condition
+                    ? {
+                          textWrap: true,
+                          fontSize: 60,
+                          padding: 60,
+                          borderWidth: 2,
+                          customProperty: 'TESTING',
+                          'android:borderColor': 'red',
+                          'ios:borderColor': 'blue'
+                      }
+                    : {})
+            })
+
+        const buttonsTest = () =>
+            h(
+                'Button',
+                {
+                    row: 4,
+                    onTap: () => {
+                        console.log('Clicked')
+                    }
+                },
+                ['Click me']
+            )
+
         return h('Frame', [
             h(
                 'Page',
@@ -130,12 +142,13 @@ const app = createApp({
                     h(
                         'GridLayout',
                         {
-                            rows: '*, *, auto, auto'
+                            rows: '*, *, *, auto, auto'
                         },
                         [
                             h('ContentView', [labelsTest()]),
                             textNodesTest(),
-                            toggleAttrTest(this.toggler)
+                            toggleAttrTest(this.toggler),
+                            buttonsTest()
                         ]
                     )
                 ]

diff --git a/packages/runtime/src/modules/events.ts b/packages/runtime/src/modules/events.ts
@@ -1,12 +1,48 @@
+import { EMPTY_OBJ } from '@vue/shared'
 import { INSVElement } from '../nodes'
-import { ComponentInternalInstance } from '@vue/runtime-core'
 
 export function patchEvent(
   el: INSVElement,
   name: string,
   prevValue: any,
-  nextValue: any,
-  instance: ComponentInternalInstance | null = null
+  nextValue: any
 ) {
-  // todo implement patchEvent
+  const prevOptions = prevValue && 'options' in prevValue && prevValue.options
+  const nextOptions = nextValue && 'options' in nextValue && nextValue.options
+  const invoker = prevValue && prevValue.invoker
+  const value =
+    nextValue && 'handler' in nextValue ? nextValue.handler : nextValue
+
+  if (prevOptions || nextOptions) {
+    const prev = prevOptions || EMPTY_OBJ
+    const next = nextOptions || EMPTY_OBJ
+    if (
+      prev.capture !== next.capture ||
+      prev.passive !== next.passive ||
+      prev.once !== next.once
+    ) {
+      if (invoker) {
+        el.removeEventListener(name, invoker)
+      }
+      if (nextValue && value) {
+        const invoker = value
+        nextValue.invoker = invoker
+        // TODO: use nextOptions here for supporting event options
+        el.addEventListener(name, invoker)
+      }
+      return
+    }
+  }
+
+  if (nextValue && value) {
+    if (invoker) {
+      ;(prevValue as any).invoker = null
+      invoker.value = value
+      nextValue.invoker = invoker
+    } else {
+      el.addEventListener(name, value)
+    }
+  } else if (invoker) {
+    el.removeEventListener(name, invoker)
+  }
 }
diff --git a/packages/runtime/src/nodes.ts b/packages/runtime/src/nodes.ts
@@ -54,6 +54,8 @@ export interface INSVElement extends INSVNode {
 
   removeEventListener(event: string, handler?: any): void
 
+  dispatchEvent(event: string): void
+
   nativeView: (ViewBase | LayoutBase) & { [ELEMENT_REF]: INSVElement }
 
   getAttribute(name: string): unknown
@@ -144,6 +146,10 @@ export class NSVElement extends NSVNode implements INSVElement {
     this.nativeView.removeEventListener(event, handler)
   }
 
+  dispatchEvent(event: string) {
+    this.nativeView.notify({ eventName: event, object: this.nativeView })
+  }
+
   getAttribute(name: string): unknown {
     return this.nativeView[name]
   }

diff --git a/packages/runtime/src/patchProp.ts b/packages/runtime/src/patchProp.ts
@@ -37,6 +37,7 @@ export function patchProp(
       break
     default:
       if (isOn(key)) {
+        // console.log('->patchProp+Event')
         patchEvent(el, key.substr(2).toLowerCase(), prevValue, nextValue)
       } else {
         patchAttr(el, key, prevValue, nextValue)