@advanced-rest-client/events-target-mixin - npm Package Compare versions

Comparing version 3.0.0-preview.3 to 3.0.0

events-target-mixin.d.ts

@@ -13,85 +13,3 @@ /**
 // tslint:disable:variable-name Describing an API that's defined elsewhere.
-// tslint:disable:no-any describes the API as best we are able today
 
-import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';
-
 export {EventsTargetMixin};
-
-
-/**
- * `ArcBehaviors.EventsTargetBehavior` is a behavior mixin that allows setting
- * up event listeners on a default or set node.
- *
- * By default the element listens on the `window` element for events. By setting
- * `eventsTarget` property on this element it removes all previously set
- * listeners and adds the same listeners to the node.
- * It also restores default state when the `eventsTarget` is removed.
- *
- * Implementations should implement two abstract methods:
- * `_attachListeners(node)` and `_detachListeners(node)`. Both of them will be
- * called with event target argument when it's required to either set or remove
- * listeners.
- *
- * ### Example (Polymer 2.x)
- *
- * ```javascript
- * class EventableElement extends ArcBehaviors.EventsTargetBehavior(Polymer.Element) {
- *  static get is() {
- *    return 'eventable-element';
- *  }
- *   _attachListeners: function(node) {
- *    mode.addEventListener('event', this._callback);
- *  }
- *
- *  _detachListeners: function(node) {
- *    mode.removeEventListener('event', this._callback);
- *  }
- * }
- * ```
- *
- * The mixin handles connectedCallback / disconnectedCallback and calls the
- * functions with required parameters.
- */
-declare function EventsTargetMixin<T extends new (...args: any[]) => {}>(base: T): T & EventsTargetMixinConstructor;
-
-interface EventsTargetMixinConstructor {
-  new(...args: any[]): EventsTargetMixin;
-}
-
-export {EventsTargetMixinConstructor};
-
-interface EventsTargetMixin {
-
-  /**
-   * Events handlers target. By default the element listens on
-   * `window` object. If set, all events listeners will be attached to this
-   * object instead of `window`.
-   */
-  eventsTarget: object|null|undefined;
-
-  /**
-   * An event target used to attach listeners.
-   */
-  _oldEventsTarget: object|null|undefined;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-
-  /**
-   * Removes old handlers (if any) and attaches listeners on new event
-   * event target.
-   *
-   * @param eventsTarget Event target to set handlers on. If not set it
-   * will set handlers on the `window` object.
-   */
-  _eventsTargetChanged(eventsTarget: Node|null): void;
-
-  /**
-   * To be implement by the element to set event listeners on the target
-   */
-  _attachListeners(): void;
-
-  /**
-   * To be implement by the element to remove event listeners from the target
-   */
-  _detachListeners(): void;
-}

events-target-mixin.js

@@ -14,3 +14,2 @@ /**
 */
-import {dedupingMixin} from '../../@polymer/polymer/lib/utils/mixin.js';
 /**
@@ -33,6 +32,3 @@ * `ArcBehaviors.EventsTargetBehavior` is a behavior mixin that allows setting
  * ```javascript
- * class EventableElement extends ArcBehaviors.EventsTargetBehavior(Polymer.Element) {
- *  static get is() {
- *    return 'eventable-element';
- *  }
+ * class EventableElement extends EventsTargetMixin(HTMLElement) {
  *   _attachListeners: function(node) {
@@ -51,61 +47,66 @@ *    mode.addEventListener('event', this._callback);
  *
- * @polymer
  * @mixinFunction
+ * @param {Class} base
+ * @return {Class}
  */
-export const EventsTargetMixin = dedupingMixin((base) => {
-  /**
-   * @polymer
-   * @mixinClass
-   */
-  class ETBmixin extends base {
-    static get properties() {
-      return {
-        /**
-         * Events handlers target. By default the element listens on
-         * `window` object. If set, all events listeners will be attached to this
-         * object instead of `window`.
-         */
-        eventsTarget: {
-          type: Object,
-          observer: '_eventsTargetChanged'
-        },
-        // An event target used to attach listeners.
-        _oldEventsTarget: Object
-      };
+export const EventsTargetMixin = (base) => class extends base {
+  static get properties() {
+    return {
+      /**
+       * Events handlers target. By default the element listens on
+       * `window` object. If set, all events listeners will be attached to this
+       * object instead of `window`.
+       */
+      eventsTarget: { type: Object },
+      // An event target used to attach listeners.
+      _oldEventsTarget: Object
+    };
+  }
+
+  get eventsTarget() {
+    return this._eventsTarget;
+  }
+
+  set eventsTarget(value) {
+    const old = this._eventsTarget;
+    if (old === value) {
+      return;
     }
-    connectedCallback() {
-      if (super.connectedCallback) {
-        super.connectedCallback();
-      }
-      this._eventsTargetChanged(this.eventsTarget);
+    this._eventsTarget = value;
+    this._eventsTargetChanged(value);
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
     }
+    this._eventsTargetChanged(this.eventsTarget);
+  }
 
-    disconnectedCallback() {
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback();
-      }
-      if (this._oldEventsTarget) {
-        this._detachListeners(this._oldEventsTarget);
-      }
+  disconnectedCallback() {
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
     }
-    /**
-     * Removes old handlers (if any) and attaches listeners on new event
-     * event target.
-     *
-     * @param {?Node} eventsTarget Event target to set handlers on. If not set it
-     * will set handlers on the `window` object.
-     */
-    _eventsTargetChanged(eventsTarget) {
-      if (this._oldEventsTarget) {
-        this._detachListeners(this._oldEventsTarget);
-      }
-      this._oldEventsTarget = eventsTarget || window;
-      this._attachListeners(this._oldEventsTarget);
+    if (this._oldEventsTarget) {
+      this._detachListeners(this._oldEventsTarget);
     }
-    // To be implement by the element to set event listeners on the target
-    _attachListeners() {}
-    // To be implement by the element to remove event listeners from the target
-    _detachListeners() {}
   }
-  return ETBmixin;
-});
+  /**
+   * Removes old handlers (if any) and attaches listeners on new event
+   * event target.
+   *
+   * @param {?Node} eventsTarget Event target to set handlers on. If not set it
+   * will set handlers on the `window` object.
+   */
+  _eventsTargetChanged(eventsTarget) {
+    if (this._oldEventsTarget) {
+      this._detachListeners(this._oldEventsTarget);
+    }
+    this._oldEventsTarget = eventsTarget || window;
+    this._attachListeners(this._oldEventsTarget);
+  }
+  // To be implement by the element to set event listeners on the target
+  _attachListeners() {}
+  // To be implement by the element to remove event listeners from the target
+  _detachListeners() {}
+};

package.json

@@ -12,14 +12,10 @@ {
   "name": "@advanced-rest-client/events-target-mixin",
-  "version": "3.0.0-preview.3",
+  "version": "3.0.0",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@advanced-rest-client/testing-karma-sl": "^1.0.2",
+    "@open-wc/testing": "^0.11.1",
+    "@open-wc/testing-karma": "^2.0.6",
     "@polymer/gen-typescript-declarations": "^1.6.1",
-    "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-demo-helpers": "^3.1.0",
-    "@polymer/test-fixture": "^4.0.2",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "chai": "^4.2.0",
-    "mocha": "^5.2.0",
-    "sinon": "^7.3.1",
-    "wct-mocha": "^1.0.0"
+    "lit-element": "^2.2.0"
   },
@@ -29,5 +25,7 @@ "main": "events-target-mixin.js",
   "scripts": {
-    "lint": "polymer lint events-target-mixin.html",
-    "test-sauce": "polymer test --plugin sauce --job-name \"events-target-mixin:local-test\"",
-    "test": "polymer test --plugin local",
+    "test": "karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false",
+    "test:legacy": "karma start --legacy --coverage",
+    "test:legacy:watch": "karma start --legacy --auto-watch=true --single-run=false",
+    "test:sl": "karma start karma.sl.config.js --legacy --coverage",
     "update-types": "gen-typescript-declarations --deleteExisting --outDir ."
@@ -38,5 +36,3 @@ },
   },
-  "dependencies": {
-    "@polymer/polymer": "^3.2.0"
-  }
+  "dependencies": {}
 }

README.md

@@ -0,4 +1,59 @@
+[![Published on NPM](https://img.shields.io/npm/v/@advanced-rest-client/events-target-mixin.svg)](https://www.npmjs.com/package/@advanced-rest-client/events-target-mixin)
+
 [![Build Status](https://travis-ci.org/advanced-rest-client/events-target-mixin.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/events-target-mixin)
 
+A Mixin that support event targets retargeting so the element listens on a set node instead of default one (window).
 
-A Mixin that support event targets retargeting so the element listens on a set node instead of default one
+### API components
+
+This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
+
+## Usage
+
+### Installation
+```
+npm install --save @advanced-rest-client/events-target-mixin
+```
+
+### In a web component
+
+```js
+import { LitElement, html } from 'lit-element';
+import { EventsTargetMixin } '@advanced-rest-client/events-target-mixin/events-target-mixin.js';
+
+class SampleElement extends EventsTargetMixin(HTMLElement) {
+  _attachListeners(node) {
+    node.addEventListener('my-event', this._testEventHandler);
+  }
+
+  _detachListeners(node) {
+    node.removeEventListener('my-event', this._testEventHandler);
+  }
+
+  _testEventHandler() {
+
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+```html
+<sample-element id="example"></sample-element>
+<div id="target"></div>
+example.eventsTarget = target;
+```
+
+The element listens for events that bubbles through #target element.
+
+### Development
+
+```sh
+git clone https://github.com/advanced-rest-client/events-target-mixin
+cd events-target-mixin
+npm install
+```
+
+### Running the tests
+```sh
+npm test
+```

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Dev dependency count

5

decreased by-44.44%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

60

increased by1100%

Worsened metrics

Total package byte prevSize

33694

decreased by-3.94%

Lines of code

116

decreased by-38.62%

Dependency changes

• - Removed@polymer/polymer@^3.2.0

• - Removed@polymer/polymer@3.5.2(transitive)

• - Removed@webcomponents/shadycss@1.11.2(transitive)