@smui/common - npm Package Compare versions

Comparing version 3.0.0-beta.7 to 3.0.0-beta.8

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [3.0.0-beta.8](https://github.com/hperrin/svelte-material-ui/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2021-04-15)
+
+
+### Features
+
+* forward all events, and only forward when bound, and allow modifiers ([50a0db3](https://github.com/hperrin/svelte-material-ui/commit/50a0db3af14bd8042e06c193a903526abcad35e5))
+
+
+
+
+
 # [3.0.0-beta.7](https://github.com/hperrin/svelte-material-ui/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2021-04-15)
@@ -8,0 +19,0 @@

forwardEventsBuilder.js

@@ -1,66 +0,49 @@
-import { bubble, listen } from 'svelte/internal';
+import {
+  bubble,
+  listen,
+  prevent_default,
+  stop_propagation,
+} from 'svelte/internal';
 
-export function forwardEventsBuilder(component, additionalEvents = []) {
-  const events = [
-    // Interaction Events
-    'focus',
-    'blur',
-    'fullscreenchange',
-    'fullscreenerror',
-    'scroll',
-    'cut',
-    'copy',
-    'paste',
-    'keydown',
-    'keypress',
-    'keyup',
-    'auxclick',
-    'click',
-    'contextmenu',
-    'dblclick',
-    'mousedown',
-    'mouseenter',
-    'mouseleave',
-    'mousemove',
-    'mouseover',
-    'mouseout',
-    'mouseup',
-    'pointerlockchange',
-    'pointerlockerror',
-    'select',
-    'wheel',
-    'drag',
-    'dragend',
-    'dragenter',
-    'dragstart',
-    'dragleave',
-    'dragover',
-    'drop',
-    'touchcancel',
-    'touchend',
-    'touchmove',
-    'touchstart',
-    'pointerover',
-    'pointerenter',
-    'pointerdown',
-    'pointermove',
-    'pointerup',
-    'pointercancel',
-    'pointerout',
-    'pointerleave',
-    'gotpointercapture',
-    'lostpointercapture',
-    // Transition Events
-    'transitioncancel',
-    'transitionend',
-    'transitionrun',
-    'transitionstart',
-    // Animation Events
-    'animationstart',
-    'animationiteration',
-    'animationend',
-    ...additionalEvents,
-  ];
+// Match modifiers on DOM events.
+const modifierRegex = /^[a-z]+(?::(?:preventDefault|stopPropagation|passive|nonpassive|capture|once|self))+$/;
 
+export function forwardEventsBuilder(component) {
+  // This is our pseudo $on function. It is defined on component mount.
+  let $on;
+  // This is a list of events bound before mount.
+  let events = [];
+  // This is the original component $on function.
+  const componentOn = component.$on;
+
+  // And we override the $on function to forward all bound events.
+  component.$on = (fullEventType, ...args) => {
+    let eventType = fullEventType;
+    let destructor = () => {};
+    if ($on) {
+      // The event was bound programmatically.
+      destructor = $on(eventType);
+    } else {
+      // The event was bound before mount by Svelte.
+      events.push(eventType);
+    }
+    const modifierMatch = eventType.match(modifierRegex);
+
+    if (modifierMatch) {
+      // Remove modifiers from the real event.
+      const parts = eventType.split(':');
+      eventType = parts[0];
+    }
+
+    // Call the original $on function.
+    const componentDestructor = componentOn.call(component, eventType, ...args);
+
+    return (...args) => {
+      destructor();
+      return componentDestructor(...args);
+    };
+  };
+
   function forward(e) {
+    // Internally bubble the event up from Svelte components.
     bubble(component, e);
@@ -72,4 +55,51 @@ }
 
+    // This function is responsible for forwarding all bound events.
+    $on = (fullEventType) => {
+      let eventType = fullEventType;
+      let handler = forward;
+      // DOM addEventListener options argument.
+      let options = false;
+      const modifierMatch = eventType.match(modifierRegex);
+      if (modifierMatch) {
+        // Parse the event modifiers.
+        // Supported modifiers:
+        // - preventDefault
+        // - stopPropagation
+        // - passive
+        // - nonpassive
+        // - capture
+        // - once
+        const parts = eventType.split(':');
+        eventType = parts[0];
+        options = Object.fromEntries(parts.slice(1).map((mod) => [mod, true]));
+        if (options.nonpassive) {
+          options.passive = false;
+          delete options.nonpassive;
+        }
+        if (options.preventDefault) {
+          handler = prevent_default(handler);
+          delete options.preventDefault;
+        }
+        if (options.stopPropagation) {
+          handler = stop_propagation(handler);
+          delete options.stopPropagation;
+        }
+      }
+
+      const off = listen(node, eventType, handler, options);
+      const destructor = () => {
+        off();
+        const idx = destructors.indexOf(destructor);
+        if (idx > -1) {
+          destructors.splice(idx, 1);
+        }
+      };
+
+      destructors.push(destructor);
+      return destructor;
+    };
+
     for (let i = 0; i < events.length; i++) {
-      destructors.push(listen(node, events[i], forward));
+      // Listen to all the events added before mount.
+      $on(events[i]);
     }
@@ -79,2 +109,3 @@
       destroy: () => {
+        // Remove all event listeners.
         for (let i = 0; i < destructors.length; i++) {
@@ -81,0 +112,0 @@ destructors[i]();

package.json

 {
   "name": "@smui/common",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.8",
   "description": "Svelte Material UI - Common",
@@ -30,5 +30,6 @@ "keywords": [
   "dependencies": {
+    "@material/dom": "^10.0.0",
     "svelte": "^3.35.0"
   },
-  "gitHead": "91d9b3a623637a9dd3af931257a639f8a850e834"
+  "gitHead": "c8f63fdb4e20f65d5ce777e42865aee0c4ead671"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

223

increased by11.5%

Worsened metrics

Total package byte prevSize

43464

decreased by-2.25%

Dependency count

2

increased by100%

Dependency changes

• + Added@material/dom@^10.0.0

• + Added@material/dom@10.0.0(transitive)

• + Added@material/feature-targeting@10.0.0(transitive)

• + Addedtslib@1.14.1(transitive)