@github/file-attachment-element - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

dist/file-attachment-element.d.ts

 import Attachment from './attachment';
+export { Attachment };
 export default class FileAttachmentElement extends HTMLElement {
-    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     get directory(): boolean;
@@ -8,1 +10,6 @@ set directory(value: boolean);
 }
+declare global {
+    interface Window {
+        FileAttachmentElement: typeof FileAttachmentElement;
+    }
+}

dist/file-attachment-element.js

 import Attachment from './attachment';
+export { Attachment };
 export default class FileAttachmentElement extends HTMLElement {
-    constructor() {
-        super();
+    connectedCallback() {
         this.addEventListener('dragenter', onDragenter);
@@ -12,2 +12,10 @@ this.addEventListener('dragover', onDragenter);
     }
+    disconnectedCallback() {
+        this.removeEventListener('dragenter', onDragenter);
+        this.removeEventListener('dragover', onDragenter);
+        this.removeEventListener('dragleave', onDragleave);
+        this.removeEventListener('drop', onDrop);
+        this.removeEventListener('paste', onPaste);
+        this.removeEventListener('change', onChange);
+    }
     get directory() {
@@ -112,3 +120,3 @@ return this.hasAttribute('directory');
     const id = container.getAttribute('input');
-    if (!id || input.id !== id)
+    if (id && input.id !== id)
         return;
@@ -121,1 +129,5 @@ const files = input.files;
 }
+if (!window.customElements.get('file-attachment')) {
+    window.FileAttachmentElement = FileAttachmentElement;
+    window.customElements.define('file-attachment', FileAttachmentElement);
+}

dist/index.js

@@ -124,4 +124,3 @@ class Attachment {
 class FileAttachmentElement extends HTMLElement {
-    constructor() {
-        super();
+    connectedCallback() {
         this.addEventListener('dragenter', onDragenter);
@@ -134,2 +133,10 @@ this.addEventListener('dragover', onDragenter);
     }
+    disconnectedCallback() {
+        this.removeEventListener('dragenter', onDragenter);
+        this.removeEventListener('dragover', onDragenter);
+        this.removeEventListener('dragleave', onDragleave);
+        this.removeEventListener('drop', onDrop);
+        this.removeEventListener('paste', onPaste);
+        this.removeEventListener('change', onChange);
+    }
     get directory() {
@@ -234,3 +241,3 @@ return this.hasAttribute('directory');
     const id = container.getAttribute('input');
-    if (!id || input.id !== id)
+    if (id && input.id !== id)
         return;
@@ -243,3 +250,2 @@ const files = input.files;
 }
-
 if (!window.customElements.get('file-attachment')) {
@@ -246,0 +252,0 @@ window.FileAttachmentElement = FileAttachmentElement;

dist/index.umd.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = global || self, factory(global.FileAttachmentElement = {}));
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FileAttachmentElement = {}));
 }(this, (function (exports) { 'use strict';
@@ -130,4 +130,3 @@
     class FileAttachmentElement extends HTMLElement {
-        constructor() {
-            super();
+        connectedCallback() {
             this.addEventListener('dragenter', onDragenter);
@@ -140,2 +139,10 @@ this.addEventListener('dragover', onDragenter);
         }
+        disconnectedCallback() {
+            this.removeEventListener('dragenter', onDragenter);
+            this.removeEventListener('dragover', onDragenter);
+            this.removeEventListener('dragleave', onDragleave);
+            this.removeEventListener('drop', onDrop);
+            this.removeEventListener('paste', onPaste);
+            this.removeEventListener('change', onChange);
+        }
         get directory() {
@@ -240,3 +247,3 @@ return this.hasAttribute('directory');
         const id = container.getAttribute('input');
-        if (!id || input.id !== id)
+        if (id && input.id !== id)
             return;
@@ -249,3 +256,2 @@ const files = input.files;
     }
-
     if (!window.customElements.get('file-attachment')) {
@@ -252,0 +258,0 @@ window.FileAttachmentElement = FileAttachmentElement;

package.json

 {
   "name": "@github/file-attachment-element",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Attach files via drag and drop or file input.",
@@ -27,14 +27,15 @@ "main": "dist/index.umd.js",
     "@github/prettier-config": "0.0.4",
-    "chai": "^4.1.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-github": "^3.4.1",
-    "karma": "^4.4.1",
+    "chai": "^4.3.4",
+    "eslint": "^7.26.0",
+    "eslint-plugin-custom-elements": "^0.0.2",
+    "eslint-plugin-github": "^4.1.3",
+    "karma": "^6.3.2",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^7.1.1",
-    "rollup": "^2.3.1",
-    "typescript": "^3.8.3"
+    "mocha": "^8.4.0",
+    "rollup": "^2.48.0",
+    "typescript": "^4.2.4"
   }
 }

README.md

@@ -18,4 +18,4 @@ # <file-attachment> element
 ```html
-<file-attachment directory input="upload">
-  <input id="upload" type="file" multiple>
+<file-attachment directory>
+  <input type="file" multiple />
 </file-attachment>
@@ -27,3 +27,3 @@ ```
 - `file-attachment[directory]` enables traversing directories.
-- `file-attachment[input]` points to the ID of a file input inside of `<file-attachment>`. Files selected from the `<input>` will be attached to `<file-attachment>`. Supplying an input is strongly recommended in order to ensure users can upload files without a mouse or knowing where to paste files.
+- `file-attachment[input]` points to the ID of a file input inside of `<file-attachment>`. If supplied, only files selected from the corresponding `<input>` will be attached to `<file-attachment>`.
 
@@ -30,0 +30,0 @@ ### Styling drag state

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30712

increased by4.06%

Lines of code

797

increased by3.24%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by8.33%

Number of package files

9

decreased by-10%

No dependency changes