@github/auto-complete-element - npm Package Compare versions

Comparing version 3.1.0 to 3.3.4

dist/auto-complete-element.d.ts

@@ -0,1 +1,2 @@
+import { fragment } from './send.js';
 export default class AutocompleteElement extends HTMLElement {
@@ -10,2 +11,3 @@ connectedCallback(): void;
     set open(value: boolean);
+    fetchResult: typeof fragment;
     static get observedAttributes(): string[];
@@ -12,0 +14,0 @@ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;

dist/auto-complete-element.js

@@ -1,5 +0,10 @@
-import AutocompleteEvent from './auto-complete-event';
-import Autocomplete from './autocomplete';
+import Autocomplete from './autocomplete.js';
+import AutocompleteEvent from './auto-complete-event.js';
+import { fragment } from './send.js';
 const state = new WeakMap();
 export default class AutocompleteElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.fetchResult = fragment;
+    }
     connectedCallback() {
@@ -6,0 +11,0 @@ const listId = this.getAttribute('for');

dist/autocomplete.js

@@ -1,4 +0,3 @@
-import debounce from './debounce';
-import { fragment } from './send';
 import Combobox from '@github/combobox-nav';
+import debounce from './debounce.js';
 const SCREEN_READER_DELAY = window.testScreenReaderDelay || 100;
@@ -123,4 +122,4 @@ export default class Autocomplete {
     onInputChange() {
-        if (this.feedback && this.feedback.innerHTML) {
-            this.feedback.innerHTML = '';
+        if (this.feedback && this.feedback.textContent) {
+            this.feedback.textContent = '';
         }
@@ -139,3 +138,3 @@ this.container.removeAttribute('value');
             if (this.feedback) {
-                this.feedback.innerHTML = inputString;
+                this.feedback.textContent = inputString;
             }
@@ -158,3 +157,4 @@ }, SCREEN_READER_DELAY);
         this.container.dispatchEvent(new CustomEvent('loadstart'));
-        fragment(this.input, url.toString())
+        this.container
+            .fetchResult(this.input, url.toString())
             .then(html => {
@@ -161,0 +161,0 @@ this.results.innerHTML = html;

dist/bundle.js

@@ -173,9 +173,2 @@ const ctrlBindings = !!navigator.userAgent.match(/Macintosh/);
 
-class AutocompleteEvent extends CustomEvent {
-    constructor(type, init) {
-        super(type, init);
-        this.relatedTarget = init.relatedTarget;
-    }
-}
-
 function debounce(callback, wait = 0) {
@@ -192,34 +185,2 @@ let timeout;
 
-const requests = new WeakMap();
-function fragment(el, url) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.setRequestHeader('Accept', 'text/fragment+html');
-    return request(el, xhr);
-}
-function request(el, xhr) {
-    const pending = requests.get(el);
-    if (pending)
-        pending.abort();
-    requests.set(el, xhr);
-    const clear = () => requests.delete(el);
-    const result = send(xhr);
-    result.then(clear, clear);
-    return result;
-}
-function send(xhr) {
-    return new Promise((resolve, reject) => {
-        xhr.onload = function () {
-            if (xhr.status >= 200 && xhr.status < 300) {
-                resolve(xhr.responseText);
-            }
-            else {
-                reject(new Error(xhr.responseText));
-            }
-        };
-        xhr.onerror = reject;
-        xhr.send();
-    });
-}
-
 const SCREEN_READER_DELAY = window.testScreenReaderDelay || 100;
@@ -344,4 +305,4 @@ class Autocomplete {
     onInputChange() {
-        if (this.feedback && this.feedback.innerHTML) {
-            this.feedback.innerHTML = '';
+        if (this.feedback && this.feedback.textContent) {
+            this.feedback.textContent = '';
         }
@@ -360,3 +321,3 @@ this.container.removeAttribute('value');
             if (this.feedback) {
-                this.feedback.innerHTML = inputString;
+                this.feedback.textContent = inputString;
             }
@@ -379,3 +340,4 @@ }, SCREEN_READER_DELAY);
         this.container.dispatchEvent(new CustomEvent('loadstart'));
-        fragment(this.input, url.toString())
+        this.container
+            .fetchResult(this.input, url.toString())
             .then(html => {
@@ -418,4 +380,47 @@ this.results.innerHTML = html;
 
+class AutocompleteEvent extends CustomEvent {
+    constructor(type, init) {
+        super(type, init);
+        this.relatedTarget = init.relatedTarget;
+    }
+}
+
+const requests = new WeakMap();
+function fragment(el, url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.setRequestHeader('Accept', 'text/fragment+html');
+    return request(el, xhr);
+}
+function request(el, xhr) {
+    const pending = requests.get(el);
+    if (pending)
+        pending.abort();
+    requests.set(el, xhr);
+    const clear = () => requests.delete(el);
+    const result = send(xhr);
+    result.then(clear, clear);
+    return result;
+}
+function send(xhr) {
+    return new Promise((resolve, reject) => {
+        xhr.onload = function () {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(xhr.responseText);
+            }
+            else {
+                reject(new Error(xhr.responseText));
+            }
+        };
+        xhr.onerror = reject;
+        xhr.send();
+    });
+}
+
 const state = new WeakMap();
 class AutocompleteElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.fetchResult = fragment;
+    }
     connectedCallback() {
@@ -493,3 +498,2 @@ const listId = this.getAttribute('for');
 
-export default AutocompleteElement;
-export { AutocompleteEvent };
+export { AutocompleteEvent, AutocompleteElement as default };

dist/index.d.ts

@@ -1,3 +0,3 @@
-import AutocompleteElement from './auto-complete-element';
+import AutocompleteElement from './auto-complete-element.js';
 export { AutocompleteElement as default };
-export { default as AutocompleteEvent } from './auto-complete-event';
+export { default as AutocompleteEvent } from './auto-complete-event.js';

dist/index.js

 import Combobox from '@github/combobox-nav';
 
-class AutocompleteEvent extends CustomEvent {
-    constructor(type, init) {
-        super(type, init);
-        this.relatedTarget = init.relatedTarget;
-    }
-}
-
 function debounce(callback, wait = 0) {
@@ -21,34 +14,2 @@ let timeout;
 
-const requests = new WeakMap();
-function fragment(el, url) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.setRequestHeader('Accept', 'text/fragment+html');
-    return request(el, xhr);
-}
-function request(el, xhr) {
-    const pending = requests.get(el);
-    if (pending)
-        pending.abort();
-    requests.set(el, xhr);
-    const clear = () => requests.delete(el);
-    const result = send(xhr);
-    result.then(clear, clear);
-    return result;
-}
-function send(xhr) {
-    return new Promise((resolve, reject) => {
-        xhr.onload = function () {
-            if (xhr.status >= 200 && xhr.status < 300) {
-                resolve(xhr.responseText);
-            }
-            else {
-                reject(new Error(xhr.responseText));
-            }
-        };
-        xhr.onerror = reject;
-        xhr.send();
-    });
-}
-
 const SCREEN_READER_DELAY = window.testScreenReaderDelay || 100;
@@ -173,4 +134,4 @@ class Autocomplete {
     onInputChange() {
-        if (this.feedback && this.feedback.innerHTML) {
-            this.feedback.innerHTML = '';
+        if (this.feedback && this.feedback.textContent) {
+            this.feedback.textContent = '';
         }
@@ -189,3 +150,3 @@ this.container.removeAttribute('value');
             if (this.feedback) {
-                this.feedback.innerHTML = inputString;
+                this.feedback.textContent = inputString;
             }
@@ -208,3 +169,4 @@ }, SCREEN_READER_DELAY);
         this.container.dispatchEvent(new CustomEvent('loadstart'));
-        fragment(this.input, url.toString())
+        this.container
+            .fetchResult(this.input, url.toString())
             .then(html => {
@@ -247,4 +209,47 @@ this.results.innerHTML = html;
 
+class AutocompleteEvent extends CustomEvent {
+    constructor(type, init) {
+        super(type, init);
+        this.relatedTarget = init.relatedTarget;
+    }
+}
+
+const requests = new WeakMap();
+function fragment(el, url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.setRequestHeader('Accept', 'text/fragment+html');
+    return request(el, xhr);
+}
+function request(el, xhr) {
+    const pending = requests.get(el);
+    if (pending)
+        pending.abort();
+    requests.set(el, xhr);
+    const clear = () => requests.delete(el);
+    const result = send(xhr);
+    result.then(clear, clear);
+    return result;
+}
+function send(xhr) {
+    return new Promise((resolve, reject) => {
+        xhr.onload = function () {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(xhr.responseText);
+            }
+            else {
+                reject(new Error(xhr.responseText));
+            }
+        };
+        xhr.onerror = reject;
+        xhr.send();
+    });
+}
+
 const state = new WeakMap();
 class AutocompleteElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.fetchResult = fragment;
+    }
     connectedCallback() {
@@ -322,3 +327,2 @@ const listId = this.getAttribute('for');
 
-export default AutocompleteElement;
-export { AutocompleteEvent };
+export { AutocompleteEvent, AutocompleteElement as default };

package.json

 {
   "name": "@github/auto-complete-element",
-  "version": "3.1.0",
+  "version": "3.3.4",
   "description": "Auto-complete input values from server results",
@@ -36,10 +36,9 @@ "repository": "github/auto-complete-element",
     "@github/prettier-config": "0.0.4",
-    "axe-core": "^4.4.0",
+    "axe-core": "^4.4.1",
     "chai": "^4.3.6",
-    "chromium": "^3.0.3",
-    "eslint": "^7.25.0",
-    "eslint-plugin-custom-elements": "^0.0.2",
-    "eslint-plugin-github": "^4.1.3",
-    "http-server": "^14.0.0",
-    "karma": "^6.3.2",
+    "eslint": "^8.9.0",
+    "eslint-plugin-custom-elements": "^0.0.4",
+    "eslint-plugin-github": "^4.3.5",
+    "http-server": "^14.1.0",
+    "karma": "^6.3.16",
     "karma-chai": "^0.1.0",
@@ -49,7 +48,7 @@ "karma-chrome-launcher": "^3.1.0",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^8.3.2",
-    "rollup": "^2.45.2",
+    "mocha": "^9.2.1",
+    "rollup": "^2.68.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.5.5"
   }
 }

README.md

@@ -84,2 +84,6 @@ # <auto-complete> element
 
+## Properties
+
+- `fetchResult` you can override the default method used to query for results by overriding this property: `document.querySelector('auto-complete').fetchResult = async (el, url) => (await fetch(url)).text()`
+
 ## Events
@@ -86,0 +90,0 @@

validator.js

 const SELECTOR = 'auto-complete'
 const INPUT_RULE_ID = 'required-input-element-child'
+// eslint-disable-next-line i18n-text/no-en
 const INPUT_HELP_TEXT = 'This component requires an input field to be provided.'
 const CLEAR_BUTTON_RULE_ID = 'optional-clear-must-be-button'
+// eslint-disable-next-line i18n-text/no-en
 const CLEAR_BUTTON_HELP_TEXT = 'If provided with clear button, it must be a button element.'
@@ -6,0 +8,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

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

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

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

55089

increased by1.39%

Dev dependency count

16

decreased by-5.88%

Lines of code

1275

increased by1.35%

Number of lines in readme file

180

increased by2.27%

No dependency changes