@ribajs/bs4 - npm Package Compare versions

Comparing version 1.9.0-beta.1 to 1.9.0-beta.2

package.json

 {
   "name": "@ribajs/bs4",
   "description": "Bootstrap 4 module for Riba.js",
-  "version": "1.9.0-beta.1",
+  "version": "1.9.0-beta.2",
   "author": "Pascal Garber <[e-mail]>",
@@ -44,42 +44,46 @@ "contributors": [],
   },
+  "files": [
+    "/src",
+    "/dist"
+  ],
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
+    "@babel/cli": "^7.12.0",
+    "@babel/core": "^7.12.0",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.0",
     "@babel/plugin-syntax-export-default-from": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.11.2",
-    "@babel/runtime-corejs3": "^7.11.2",
-    "@ribajs/eslint-config": "1.9.0-beta.1",
-    "@ribajs/tsconfig": "1.9.0-beta.1",
-    "@ribajs/types": "1.9.0-beta.1",
-    "@types/jest": "^26.0.13",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "@yarnpkg/pnpify": "^2.2.1",
-    "babel-jest": "^26.3.0",
+    "@babel/plugin-transform-runtime": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/preset-typescript": "^7.12.0",
+    "@babel/runtime": "^7.12.0",
+    "@babel/runtime-corejs3": "^7.12.0",
+    "@ribajs/eslint-config": "1.9.0-beta.2",
+    "@ribajs/tsconfig": "1.9.0-beta.2",
+    "@ribajs/types": "1.9.0-beta.2",
+    "@types/jest": "^26.0.14",
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.4.1",
+    "@yarnpkg/pnpify": "^2.3.3",
+    "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "babel-plugin-array-includes": "^2.0.3",
     "core-js": "^3.6.5",
-    "eslint": "^7.8.1",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "jest": "^26.4.2",
+    "jest": "^26.5.3",
     "jest-extended": "^0.11.5",
-    "prettier": "^2.1.1",
-    "ts-jest": "^26.3.0",
-    "typescript": "^4.0.2",
-    "webpack": "^5.0.0-beta.22",
-    "webpack-cli": "^3.3.12"
+    "prettier": "^2.1.2",
+    "ts-jest": "^26.4.1",
+    "typescript": "^4.0.3",
+    "webpack": "^5.1.2",
+    "webpack-cli": "^4.0.0"
   },
   "dependencies": {
-    "@ribajs/cache": "1.9.0-beta.1",
-    "@ribajs/core": "1.9.0-beta.1",
-    "@ribajs/extras": "1.9.0-beta.1",
-    "@ribajs/utils": "1.9.0-beta.1",
-    "bootstrap": "^4.5.2",
+    "@ribajs/cache": "1.9.0-beta.2",
+    "@ribajs/core": "1.9.0-beta.2",
+    "@ribajs/extras": "1.9.0-beta.2",
+    "@ribajs/utils": "1.9.0-beta.2",
+    "bootstrap": "^4.5.3",
     "popper.js": "^1.16.1"
@@ -86,0 +90,0 @@ },

src/binders/bs4-collapse-on-url.binder.ts

@@ -12,9 +12,20 @@ import { Binder, EventDispatcher } from "@ribajs/core";
   name: "bs4-collapse-on-url",
+  bind(el: HTMLElement) {
+    this.customData = {
+      dispatcher: EventDispatcher.getInstance("main"),
+      collapseService: new CollapseService(el, [], { toggle: false }),
+    };
+  },
+  unbind() {
+    if (this.customData.checkURL) {
+      this.customData.dispatcher.off("newPageReady", this.customData.checkURL);
+    }
+  },
   routine(el: HTMLElement, url: string) {
-    const collapseService = new CollapseService(this.el, [], { toggle: false });
-    const dispatcher = new EventDispatcher("main");
-
-    const checkURL = (urlToCheck?: string) => {
-      if (urlToCheck && onRoute(urlToCheck)) {
-        collapseService.hide();
+    if (this.customData.checkURL) {
+      this.customData.dispatcher.off("newPageReady", this.customData.checkURL);
+    }
+    this.customData.checkURL = () => {
+      if (url && onRoute(url)) {
+        this.customData.collapseService.hide();
         return true;
@@ -25,5 +36,4 @@ }
     };
-
-    dispatcher.on("newPageReady", () => checkURL(url));
+    this.customData.dispatcher.on("newPageReady", this.customData.checkURL);
   },
 };

src/binders/bs4-show-toast-on.binder.ts

@@ -20,3 +20,5 @@ import { Binder, EventDispatcher } from "@ribajs/core";
     const eventName = this.args[0] as string;
-    el.addEventListener(eventName, this.binder.onEvent.bind(this));
+    // assign onEvent to bound version so we can remove the DOM Element listener later without problems
+    this.binder.onEvent = this.binder.onEvent.bind(this);
+    el.addEventListener(eventName, this.binder.onEvent);
   },
@@ -31,4 +33,4 @@ routine(el: HTMLUnknownElement, toastData: Toast) {
     const eventName = this.args[0] as string;
-    el.removeEventListener(eventName, this.binder.onEvent.bind(this));
+    el.removeEventListener(eventName, this.binder.onEvent);
   },
 };

src/binders/toggle-attribute.binder.ts

@@ -81,7 +81,9 @@ import { Binder, EventDispatcher } from "@ribajs/core";
       TOGGLE_BUTTON.eventNames.toggle,
-      self.onToggle.bind(this)
+      self.onToggle,
+      self
     );
     self.toggleButtonEvents?.off(
       TOGGLE_BUTTON.eventNames.init,
-      self.triggerState.bind(this)
+      self.triggerState,
+      self
     );
@@ -95,10 +97,4 @@ },
     if (oldId && toggleButton) {
-      toggleButton.off(
-        TOGGLE_BUTTON.eventNames.toggle,
-        self.onToggle.bind(this)
-      );
-      toggleButton.off(
-        TOGGLE_BUTTON.eventNames.init,
-        self.triggerState.bind(this)
-      );
+      toggleButton.off(TOGGLE_BUTTON.eventNames.toggle, self.onToggle, self);
+      toggleButton.off(TOGGLE_BUTTON.eventNames.init, self.triggerState, self);
     }
@@ -111,12 +107,6 @@
       toggleButton = self.toggleButtonEvents as EventDispatcher;
-      toggleButton.on(
-        TOGGLE_BUTTON.eventNames.toggle,
-        self.onToggle.bind(this)
-      );
-      toggleButton.on(
-        TOGGLE_BUTTON.eventNames.init,
-        self.triggerState.bind(this)
-      );
+      toggleButton.on(TOGGLE_BUTTON.eventNames.toggle, self.onToggle, self);
+      toggleButton.on(TOGGLE_BUTTON.eventNames.init, self.triggerState, self);
     }
   },
 };

src/binders/toggle-class.binder.ts

@@ -81,7 +81,9 @@ import { Binder, EventDispatcher } from "@ribajs/core";
       TOGGLE_BUTTON.eventNames.toggle,
-      self.onToggle.bind(this)
+      self.onToggle,
+      self
     );
     self.toggleButtonEvents?.off(
       TOGGLE_BUTTON.eventNames.init,
-      self.triggerState.bind(this)
+      self.triggerState,
+      self
     );
@@ -95,10 +97,4 @@ },
     if (oldId && toggleButton) {
-      toggleButton.off(
-        TOGGLE_BUTTON.eventNames.toggle,
-        self.onToggle.bind(this)
-      );
-      toggleButton.off(
-        TOGGLE_BUTTON.eventNames.init,
-        self.triggerState.bind(this)
-      );
+      toggleButton.off(TOGGLE_BUTTON.eventNames.toggle, self.onToggle, this);
+      toggleButton.off(TOGGLE_BUTTON.eventNames.init, self.triggerState, this);
     }
@@ -111,12 +107,6 @@
       toggleButton = self.toggleButtonEvents as EventDispatcher;
-      toggleButton.on(
-        TOGGLE_BUTTON.eventNames.toggle,
-        self.onToggle.bind(this)
-      );
-      toggleButton.on(
-        TOGGLE_BUTTON.eventNames.init,
-        self.triggerState.bind(this)
-      );
+      toggleButton.on(TOGGLE_BUTTON.eventNames.toggle, self.onToggle, this);
+      toggleButton.on(TOGGLE_BUTTON.eventNames.init, self.triggerState, this);
     }
   },
 };

src/components/bs4-navbar/bs4-navbar.component.ts

@@ -30,2 +30,3 @@ import { Component, EventDispatcher } from "@ribajs/core";
     super(element);
+    this.onStateChange = this.onStateChange.bind(this);
   }
@@ -72,3 +73,3 @@
     this.routerEvents = new EventDispatcher("main");
-    this.routerEvents.on("newPageReady", this.onNewPageReady.bind(this));
+    this.routerEvents.on("newPageReady", this.onNewPageReady, this);
 
@@ -106,10 +107,4 @@ this.setCollapseElement();
       this.collapseElements.forEach((collapseElement: HTMLElement) => {
-        collapseElement.addEventListener(
-          EVENT_SHOWN,
-          this.onStateChange.bind(this)
-        );
-        collapseElement.addEventListener(
-          EVENT_HIDDEN,
-          this.onStateChange.bind(this)
-        );
+        collapseElement.addEventListener(EVENT_SHOWN, this.onStateChange);
+        collapseElement.addEventListener(EVENT_HIDDEN, this.onStateChange);
       });
@@ -138,3 +133,3 @@ }
     if (this.routerEvents) {
-      this.routerEvents.off("newPageReady", this.onNewPageReady);
+      this.routerEvents.off("newPageReady", this.onNewPageReady, this);
     }
@@ -141,0 +136,0 @@ }

src/components/bs4-notification-container/bs4-notification-container.component.ts

@@ -57,2 +57,11 @@ import { Component, EventDispatcher } from "@ribajs/core";
 
+  protected onShowNotification(notification: Notification) {
+    this.debug(
+      "Received notification container on " + this.scope.channelName,
+      this.scope,
+      notification
+    );
+    this.scope.notifications.push(notification);
+  }
+
   protected async afterBind() {
@@ -64,13 +73,16 @@ super.afterBind();
       "show-notification",
-      (notification: Notification) => {
-        this.debug(
-          "Received notification container on " + this.scope.channelName,
-          this.scope,
-          notification
-        );
-        this.scope.notifications.push(notification);
-      }
+      this.onShowNotification,
+      this
     );
   }
 
+  protected disconnectedCallback() {
+    super.disconnectedCallback();
+    (this.notificationDispatcher as EventDispatcher).off(
+      "show-notification",
+      this.onShowNotification,
+      this
+    );
+  }
+
   protected requiredAttributes() {
@@ -77,0 +89,0 @@ return [];

src/components/bs4-sidebar/bs4-sidebar.component.ts

@@ -164,9 +164,7 @@ import { Component, EventDispatcher } from "@ribajs/core";
     this.style = window.getComputedStyle(this.el);
-    window.addEventListener(
-      "resize",
-      this.onEnviromentChanges.bind(this),
-      false
-    );
+    // assign this to bound version, so we can remove window EventListener later without problem
+    this.onEnvironmentChanges = this.onEnvironmentChanges.bind(this);
+    window.addEventListener("resize", this.onEnvironmentChanges, false);
     // inital
-    this.onEnviromentChanges();
+    this.onEnvironmentChanges();
   }
@@ -180,4 +178,4 @@
     if (this.toggleButtonEvents) {
-      this.toggleButtonEvents.off("toggle", this.onToggle.bind(this));
-      this.toggleButtonEvents.off("init", this.triggerState.bind(this));
+      this.toggleButtonEvents.off("toggle");
+      this.toggleButtonEvents.off("init");
     }
@@ -187,4 +185,4 @@ this.toggleButtonEvents = new EventDispatcher(
     );
-    this.toggleButtonEvents.on("toggle", this.onToggle.bind(this));
-    this.toggleButtonEvents.on("init", this.triggerState.bind(this));
+    this.toggleButtonEvents.on("toggle", this.onToggle, this);
+    this.toggleButtonEvents.on("init", this.triggerState, this);
   }
@@ -194,3 +192,3 @@
     if (this.scope.watchNewPageReadyEvent) {
-      this.routerEvents.on("newPageReady", this.onEnviromentChanges.bind(this));
+      this.routerEvents.on("newPageReady", this.onEnvironmentChanges, this);
     }
@@ -280,3 +278,3 @@ }
    */
-  protected onEnviromentChanges() {
+  protected onEnvironmentChanges() {
     this.setStateByEnviroment();
@@ -362,3 +360,3 @@ }
     this.initRouterEventDispatcher();
-    return this.onEnviromentChanges();
+    return this.onEnvironmentChanges();
   }
@@ -368,3 +366,3 @@
     await super.afterBind();
-    return this.onEnviromentChanges();
+    return this.onEnvironmentChanges();
   }
@@ -402,8 +400,4 @@
     this.toggleButtonEvents?.off("init", this.triggerState.bind(this));
-    this.routerEvents.off("newPageReady", this.onEnviromentChanges.bind(this));
-    window.removeEventListener(
-      "resize",
-      this.onEnviromentChanges.bind(this),
-      false
-    );
+    this.routerEvents.off("newPageReady", this.onEnvironmentChanges, this);
+    window.removeEventListener("resize", this.onEnvironmentChanges, false);
   }
@@ -410,0 +404,0 @@

src/components/bs4-slideshow/bs4-slideshow.component.ts

@@ -323,3 +323,3 @@ import { TemplatesComponent } from "../templates/templates.component";
 
-  protected routerEvents?: EventDispatcher;
+  protected routerEvents = new EventDispatcher("main");
 
@@ -381,2 +381,9 @@ /**
     super(element);
+    // set event listeners to the this-bound version once, so we can easily pass them to DOM event handlers and remove them again later
+    this.onViewChanges = this.onViewChanges.bind(this);
+    this.onVisibilityChanged = this.onVisibilityChanged.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.onScrollend = this.onScrollend.bind(this);
+    this.onMouseIn = this.onMouseIn.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
   }
@@ -764,64 +771,34 @@
   protected addEventListeners() {
-    if (!this.routerEvents) {
-      this.routerEvents = new EventDispatcher("main");
-    }
+    this.routerEvents.on("newPageReady", this.onBreakpointChanges, this);
 
-    this.routerEvents.on("newPageReady", this.onBreakpointChanges.bind(this));
+    window.addEventListener("resize", this.onViewChanges);
 
-    window.addEventListener("resize", this.onViewChanges.bind(this));
-
     // Custom event triggered by some parent components when this component changes his visibility, e.g. triggered in the bs4-tabs component
     this.el.addEventListener(
       "visibility-changed" as any,
-      this.onVisibilityChanged.bind(this)
+      this.onVisibilityChanged
     );
 
-    this.slideshowInner.addEventListener("scroll", this.onScroll.bind(this), {
+    this.slideshowInner.addEventListener("scroll", this.onScroll, {
       passive: true,
     });
-    this.slideshowInner.addEventListener(
-      "scrollended",
-      this.onScrollend.bind(this),
-      { passive: true }
-    );
-
-    this.el.addEventListener("mouseenter", this.onMouseIn.bind(this), {
+    this.slideshowInner.addEventListener("scrollended", this.onScrollend, {
       passive: true,
     });
-    this.el.addEventListener("mouseover", this.onMouseIn.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("focusin", this.onMouseIn.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("touchstart", this.onMouseIn.bind(this), {
-      passive: true,
-    });
 
-    this.el.addEventListener("mouseout", this.onMouseOut.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("mouseleave", this.onMouseOut.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("focusout", this.onMouseOut.bind(this), {
-      passive: true,
-    });
+    this.el.addEventListener("mouseenter", this.onMouseIn, { passive: true });
+    this.el.addEventListener("mouseover", this.onMouseIn, { passive: true });
+    this.el.addEventListener("focusin", this.onMouseIn, { passive: true });
+    this.el.addEventListener("touchstart", this.onMouseIn, { passive: true });
 
-    this.el.addEventListener("mouseup", this.onMouseUp.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("touchend", this.onMouseUp.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("scroll", this.onMouseUp.bind(this), {
-      passive: true,
-    });
-    this.el.addEventListener("scrollend", this.onMouseUp.bind(this), {
-      passive: true,
-    });
+    this.el.addEventListener("mouseout", this.onMouseOut, { passive: true });
+    this.el.addEventListener("mouseleave", this.onMouseOut, { passive: true });
+    this.el.addEventListener("focusout", this.onMouseOut, { passive: true });
+
+    this.el.addEventListener("mouseup", this.onMouseUp, { passive: true });
+    this.el.addEventListener("touchend", this.onMouseUp, { passive: true });
+    this.el.addEventListener("scroll", this.onMouseUp, { passive: true });
+    this.el.addEventListener("scrollend", this.onMouseUp, { passive: true });
     // See ScrollEventsService for this event
-    this.el.addEventListener("scrollended", this.onMouseUp.bind(this), {
-      passive: true,
-    });
+    this.el.addEventListener("scrollended", this.onMouseUp, { passive: true });
 
@@ -835,24 +812,29 @@ // inital
   protected removeEventListeners() {
-    // TODO is this removing other throttled resize event listeners?
-    window.removeEventListener("resize", this.onViewChanges.bind(this));
+    this.routerEvents.off("newPageReady", this.onBreakpointChanges, this);
 
+    window.removeEventListener("resize", this.onViewChanges);
+
     this.el.removeEventListener(
       "visibility-changed" as any,
-      this.onVisibilityChanged.bind(this)
+      this.onVisibilityChanged
     );
 
-    this.slideshowInner.removeEventListener("scroll", this.onScroll.bind(this));
-    this.slideshowInner.removeEventListener(
-      "scrollended",
-      this.onScrollend.bind(this)
-    );
+    this.slideshowInner.removeEventListener("scroll", this.onScroll);
+    this.slideshowInner.removeEventListener("scrollended", this.onScrollend);
 
-    this.el.removeEventListener("mouseenter", this.onMouseIn.bind(this));
-    this.el.removeEventListener("mouseover", this.onMouseIn.bind(this));
-    this.el.removeEventListener("focusin", this.onMouseIn.bind(this));
-    this.el.removeEventListener("touchstart", this.onMouseIn.bind(this));
+    this.el.removeEventListener("mouseenter", this.onMouseIn);
+    this.el.removeEventListener("mouseover", this.onMouseIn);
+    this.el.removeEventListener("focusin", this.onMouseIn);
+    this.el.removeEventListener("touchstart", this.onMouseIn);
 
-    this.el.removeEventListener("mouseout", this.onMouseOut.bind(this));
-    this.el.removeEventListener("mouseleave", this.onMouseOut.bind(this));
-    this.el.removeEventListener("focusout", this.onMouseOut.bind(this));
+    this.el.removeEventListener("mouseout", this.onMouseOut);
+    this.el.removeEventListener("mouseleave", this.onMouseOut);
+    this.el.removeEventListener("focusout", this.onMouseOut);
+
+    this.el.removeEventListener("mouseup", this.onMouseUp);
+    this.el.removeEventListener("touchend", this.onMouseUp);
+    this.el.removeEventListener("scroll", this.onMouseUp);
+    this.el.removeEventListener("scrollend", this.onMouseUp);
+    // See ScrollEventsService for this event
+    this.el.removeEventListener("scrollended", this.onMouseUp);
   }
@@ -859,0 +841,0 @@

src/components/bs4-toggle-button/bs4-toggle-button.component.ts

@@ -95,3 +95,4 @@ /**
         TOGGLE_BUTTON.eventNames.toggled,
-        this.onToggledEvent
+        this.onToggledEvent,
+        this
       );
@@ -102,3 +103,4 @@ }
       TOGGLE_BUTTON.eventNames.toggled,
-      this.onToggledEvent.bind(this)
+      this.onToggledEvent,
+      this
     );
@@ -108,3 +110,4 @@ // Triggered state triggered by `..trigger('init', ...`
       TOGGLE_BUTTON.eventNames.state,
-      this.onToggledEvent.bind(this)
+      this.onToggledEvent,
+      this
     );
@@ -150,3 +153,4 @@ }
         TOGGLE_BUTTON.eventNames.toggled,
-        this.onToggledEvent
+        this.onToggledEvent,
+        this
       );
@@ -153,0 +157,0 @@ }

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

Network access

Supply chain risk

This module accesses the network.

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

Total package byte prevSize

930982

increased by200.04%

Number of package files

234

increased by110.81%

Lines of code

17356

increased by104.96%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@ribajs/cache@1.9.0-beta.2(transitive)

• + Added@ribajs/core@1.9.0-beta.2(transitive)

• + Added@ribajs/extras@1.9.0-beta.2(transitive)

• + Added@ribajs/utils@1.9.0-beta.2(transitive)

• - Removed@ribajs/cache@1.9.0-beta.1(transitive)

• - Removed@ribajs/core@1.9.0-beta.1(transitive)

• - Removed@ribajs/extras@1.9.0-beta.1(transitive)

• - Removed@ribajs/utils@1.9.0-beta.1(transitive)

• Updated@ribajs/cache@1.9.0-beta.2

• Updated@ribajs/core@1.9.0-beta.2

• Updated@ribajs/extras@1.9.0-beta.2

• Updated@ribajs/utils@1.9.0-beta.2

• Updatedbootstrap@^4.5.3