refactor(events): remove methods from synthetic events

Instead of using methods that can be invoked anywhere in the code, it is better to explicitly return flags. It will be much easier to review code. BREAKING CHANGE: Synthetic event methods `preventDefault()` and `stopPropagation()` were removed. Before: ```ts onClick((ev) => { ev.preventDefault(); ev.stopPropagation(); }); ``` After: ```ts onClick(() => EventFlags.PreventDefault | EventFlags.StopPropagation); ```
localvoid · May 23, 2018 · e6d3f1e · e6d3f1e
1 parent 089048e
commit e6d3f1e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 23 deletions.
diff --git a/packages/ivi-events/src/__tests__/dispatch.spec.ts b/packages/ivi-events/src/__tests__/dispatch.spec.ts
@@ -1,4 +1,4 @@
-import { SyntheticEvent, SyntheticNativeEvent, dispatchEvent, onClick } from "ivi-events";
+import { SyntheticEvent, SyntheticNativeEvent, dispatchEvent, onClick, EventFlags } from "ivi-events";
 
 test("empty dispatch target array should not raise exceptions", () => {
   expect(() => {
@@ -140,7 +140,7 @@ describe("event flow", () => {
 
     const t1 = document.createElement("div");
     const t2 = document.createElement("span");
-    const h1 = onClick((e) => { order.push(1); e.stopPropagation(); });
+    const h1 = onClick(() => (order.push(1), EventFlags.StopPropagation));
     const h2 = onClick(() => { order.push(2); });
 
     dispatchEvent(
@@ -158,7 +158,7 @@ describe("event flow", () => {
     const t1 = document.createElement("div");
     const t2 = document.createElement("span");
     const h1 = onClick(() => { order.push(1); }, true);
-    const h2 = onClick((e) => { order.push(2); e.stopPropagation(); }, true);
+    const h2 = onClick(() => (order.push(2), EventFlags.StopPropagation), true);
 
     dispatchEvent(
       [{ target: t1, handlers: h1 }, { target: t2, handlers: h2 }],
@@ -175,7 +175,7 @@ describe("event flow", () => {
     const t1 = document.createElement("div");
     const t2 = document.createElement("span");
     const h1 = onClick(() => { order.push(1); });
-    const h2 = onClick((e) => { order.push(2); e.stopPropagation(); }, true);
+    const h2 = onClick(() => (order.push(2), EventFlags.StopPropagation), true);
 
     dispatchEvent(
       [{ target: t1, handlers: h1 }, { target: t2, handlers: h2 }],

diff --git a/packages/ivi-events/src/dispatch.ts b/packages/ivi-events/src/dispatch.ts
@@ -43,8 +43,7 @@ function dispatchEventToLocalEventHandlers(
   let flags: EventFlags = 0;
 
   if (Array.isArray(handlers)) {
-    for (let j = 0; j < handlers.length; ++j) {
-      const handler = handlers[j];
+    for (const handler of handlers) {
       if (handler.flags & matchFlags) {
         flags |= _dispatch(handler, dispatch, event);
       }
@@ -87,7 +86,7 @@ export function dispatchEvent(
   }
 
   // bubble phase
-  if (bubble === true) {
+  if (bubble) {
     event.flags |= SyntheticEventFlags.BubblePhase;
     for (i = 0; i < targets.length; ++i) {
       dispatchEventToLocalEventHandlers(targets[i], event, EventHandlerFlags.Bubble, dispatch);

diff --git a/packages/ivi-events/src/flags.ts b/packages/ivi-events/src/flags.ts
@@ -75,3 +75,12 @@ export const enum EventFlags {
   PreventDefault = SyntheticEventFlags.PreventedDefault,
   StopPropagation = SyntheticEventFlags.StoppedPropagation,
 }
+
+/**
+ * Prevents default behaviour for an event.
+ */
+export const PREVENT_DEFAULT = SyntheticEventFlags.PreventedDefault;
+/**
+ * Stops event propagation.
+ */
+export const STOP_PROPAGATION = SyntheticEventFlags.StoppedPropagation;
diff --git a/packages/ivi-events/src/index.ts b/packages/ivi-events/src/index.ts
@@ -2,7 +2,9 @@ export {
   getEventTarget, getNativeEventOptions,
   EVENT_CAPTURE_PASSIVE_OPTIONS, EVENT_CAPTURE_ACTIVE_OPTIONS, EVENT_PASSIVE_OPTIONS, EVENT_ACTIVE_OPTIONS,
 } from "./utils";
-export { NativeEventSourceFlags, EventHandlerFlags, SyntheticEventFlags, EventFlags } from "./flags";
+export {
+  NativeEventSourceFlags, EventHandlerFlags, SyntheticEventFlags, EventFlags, PREVENT_DEFAULT, STOP_PROPAGATION,
+} from "./flags";
 export { EventSource } from "./event_source";
 export { accumulateDispatchTargets, accumulateDispatchTargetsFromElement } from "./traverse_dom";
 export { DispatchTarget, dispatchEvent } from "./dispatch";

diff --git a/packages/ivi-events/src/synthetic_event.ts b/packages/ivi-events/src/synthetic_event.ts
@@ -20,20 +20,6 @@ export class SyntheticEvent {
     this.flags = flags;
     this.timestamp = timestamp;
   }
-
-  /**
-   * Stops event propagation.
-   */
-  stopPropagation() {
-    this.flags |= SyntheticEventFlags.StoppedPropagation;
-  }
-
-  /**
-   * Prevents default behaviour for an event.
-   */
-  preventDefault() {
-    this.flags |= SyntheticEventFlags.PreventedDefault;
-  }
 }
 
 export class SyntheticNativeEvent<E extends Event> extends SyntheticEvent {

diff --git a/packages/ivi/src/vdom/__tests__/events.spec.ts b/packages/ivi/src/vdom/__tests__/events.spec.ts
@@ -560,7 +560,7 @@ describe("events", () => {
       const n = r(
         h.input()
           .a({ type: "checkbox" })
-          .e(Events.onClick((e) => { e.preventDefault(); })),
+          .e(Events.onClick(() => Events.EventFlags.PreventDefault)),
       );
 
       n.dispatchEvent(createMouseEvent("click"));