domestique - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

index.js

@@ -23,3 +23,5 @@ import inViewport from './src/dimension/in-viewport';
 import find from './src/query/find';
+import focusable from './src/query/focusable';
 import matches from './src/query/matches';
+import tabbable from './src/query/tabbable';
 
@@ -55,3 +57,5 @@ export {
     find,
-    matches
+    focusable,
+    matches,
+    tabbable
 };

package.json

 {
   "name": "domestique",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A modular DOM helper library.",
@@ -29,2 +29,9 @@ "repository": "https://github.com/jsor/domestique.git",
   ],
+  "browserslist": [
+    "Chrome >= 60",
+    "Edge >= 15",
+    "Firefox >= 54",
+    "iOS >= 10.3",
+    "Safari >= 10.1"
+  ],
   "xo": {
@@ -44,21 +51,19 @@ "space": 4,
     "globals": [
-      "after",
-      "afterEach",
-      "assert",
-      "before",
-      "beforeEach",
-      "describe",
-      "it"
+      "assert"
     ],
     "envs": [
       "node",
-      "browser"
+      "browser",
+      "mocha"
     ]
   },
   "scripts": {
+    "build:test:browserstack": "webpack test/index.js --debug --mode none --progress --output test/build.js",
+    "build:test:browserstack-legacy": "BROWSERSLIST='defaults, IE 10' webpack test/index.js --debug --mode none --progress --output test/build-legacy.js --module-bind 'js=babel-loader?presets[]=babel-preset-env'",
+    "compat": "compat --recursive --target src/ test/ --jsEnvs chrome60 edge15 firefox54 ios10_3 safari10_1 --htmlEnvs chrome60 edge15 firefox54 ios_saf10.3 safari10.1",
+    "dev": "karma start",
     "lint": "xo",
-    "build:test": "webpack --config test/webpack.config.js test/index.js --output test/build.js",
-    "dev": "karma start",
-    "test": "npm run lint && karma start --single-run",
-    "test:browserstack": "npm run build:test && browserstack-runner"
+    "test": "npm run lint && npm run compat && karma start --single-run",
+    "test:browserstack": "npm run build:test:browserstack && browserstack-runner",
+    "test:browserstack-legacy": "npm run build:test:browserstack-legacy && BROWSERSTACK_JSON=browserstack-legacy.json browserstack-runner"
   },
@@ -69,4 +74,5 @@ "devDependencies": {
     "babel-preset-env": "^1.7.0",
-    "browserstack-runner": "^0.8.0",
+    "browserstack-runner": "^0.9.0",
     "chai": "^4.1.2",
+    "compat-cli": "^0.1.3",
     "istanbul-instrumenter-loader": "^3.0.1",
@@ -77,3 +83,3 @@ "karma": "^3.0.0",
     "karma-coverage": "^1.1.2",
-    "karma-coverage-istanbul-reporter": "^2.0.1",
+    "karma-coverage-istanbul-reporter": "^2.0.2",
     "karma-firefox-launcher": "^1.1.0",
@@ -84,3 +90,3 @@ "karma-mocha": "^1.3.0",
     "mocha": "^5.2.0",
-    "webpack": "^4.15.1",
+    "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0",
@@ -87,0 +93,0 @@ "xo": "^0.22.0"

README.md

@@ -16,22 +16,6 @@ Domestique
 
-**Note**: This library is written as ES2015 code and published as such to 
-[npm](https://www.npmjs.com/package/domestique).
-That means, code from `domestique` must *not* be excluded from transpilation.
+> **Note:** This library is written as ES2015 code and published as such to
+  [npm](https://www.npmjs.com/package/domestique).
+  Read the [Compatibility](#compatibility) section for more information.
 
-If you're using webpack and babel, that could look like:
-
-```javascript
-{
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules\/(?!domestique)/,
-                loader: 'babel-loader'
-            }
-        ]
-    }
-}
-```
-
 Usage
@@ -42,8 +26,8 @@ -----
 import {
-    // Dimension
+     // Dimension
+    inViewport,
     scrollbarSize,
-    viewport,
     viewportHeight,
     viewportWidth,
-        
+
     // Element
@@ -59,15 +43,17 @@ activeElement,
     render,
-    
+
     // Event
-    ready,
+    delegate,
+    dispatch,
     on,
     onTransitionEnd,
     off,
-    delegate,
-    dispatch,
+    ready,
 
     // Query
+    closest,
     find,
-    closest,
-    matches
+    focusable,
+    matches,
+    tabbable
 } from 'domestique';
@@ -95,12 +81,14 @@ ```
 * [Event](#event)
-  * [ready()](#ready)
+  * [delegate()](#delegate)
+  * [dispatch()](#dispatch)
   * [on()](#on)
   * [onTransitionEnd()](#ontransitionend)
   * [off()](#off)
-  * [delegate()](#delegate)
-  * [dispatch()](#dispatch)
+  * [ready()](#ready)
 * [Query](#query)
+  * [closest()](#closest)
   * [find()](#find)
-  * [closest()](#closest)
+  * [focusable()](#focusable)
   * [matches()](#matches)
+  * [tabbable()](#tabbable)
 
@@ -145,5 +133,5 @@ ### Dimension
 
-Note: The height represent the CSS viewport height
-([@media (height)](https://www.w3.org/TR/mediaqueries-4/#height)) including the
-size of a rendered scroll bar (if any).
+> **Note:** The height represent the CSS viewport height
+  ([@media (height)](https://www.w3.org/TR/mediaqueries-4/#height)) including the
+  size of a rendered scroll bar (if any).
 
@@ -164,5 +152,5 @@ #### Example
 
-Note: The width represent the CSS viewport width
-([@media (width)](https://www.w3.org/TR/mediaqueries-4/#width)) including the
-size of a rendered scroll bar (if any).
+> **Note:** The width represent the CSS viewport width
+  ([@media (width)](https://www.w3.org/TR/mediaqueries-4/#width)) including the
+  size of a rendered scroll bar (if any).
 
@@ -347,15 +335,17 @@ #### Example
 
-> Note: The `ref` attributes will be removed from the returned elements.
+> **Note:** The `ref` attributes will be removed from the returned elements.
 
 ### Event
 
-#### ready()
+#### delegate()
 
 ```
-ready(listener: function): void
+delegate(target: EventTarget, type: string, selector: string, listener: EventListener[, options: object]): function
 ```
 
-Registers a listener to be called once the DOM is ready.
+Registers a `listener` for the event `type` on `target` with `options` that
+processes events from descendant elements of `target` matching the specified
+`selector`.
 
-Unlike `DOMContentLoaded`, this also works when called after the DOM was loaded.
+The function returns another function which can be used to unregister the event listener.
 
@@ -365,7 +355,53 @@ ##### Example
 ```javascript
-ready(function () {
-    console.log('DOM is ready!');
-});
+const listener = function (e, target) {
+    target.classList.add('my-target-clicked');
+
+    console.log('My Button clicked');
+};
+const options = {
+    passive: true
+};
+
+const remove = delegate(
+    document, // Listen on document
+    'click',
+    '.my-button',
+    listener,
+    options
+);
+
+remove(); // Remove event listener
 ```
 
+#### dispatch()
+
+```
+dispatch(target: EventTarget, type: string[, eventInit: CustomEventInit]): bool
+```
+
+Dispatches a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) 
+`type` at the specified `target` optionally using the `eventInit` options.
+
+The function returns `false` if the event is cancelable and at least one of the
+event handlers which handled this event called `Event.preventDefault()`.
+Otherwise it returns `true`.
+
+##### Example
+
+```javascript
+const clickNotCancelled = dispatch(document, 'click');
+
+const myEventNotCancelled = dispatch(
+    document.querySelector('.my-button'),
+    'my:event',
+    {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+            foo: 'bar'
+        }
+    }
+);
+```
+
 #### on()
@@ -459,13 +495,11 @@
 
-#### delegate()
+#### ready()
 
 ```
-delegate(target: EventTarget, type: string, selector: string, listener: EventListener[, options: object]): function
+ready(listener: function): void
 ```
 
-Registers a `listener` for the event `type` on `target` with `options` that
-processes events from descendant elements of `target` matching the specified
-`selector`.
+Registers a listener to be called once the DOM is ready.
 
-The function returns another function which can be used to unregister the event listener.
+Unlike `DOMContentLoaded`, this also works when called after the DOM was loaded.
 
@@ -475,34 +509,19 @@ ##### Example
 ```javascript
-const listener = function (e, target) {
-    target.classList.add('my-target-clicked');
+ready(function () {
+    console.log('DOM is ready!');
+});
+```
 
-    console.log('My Button clicked');
-};
-const options = {
-    passive: true
-};
+### Query
 
-const remove = delegate(
-    document, // Listen on document
-    'click',
-    '.my-button',
-    listener,
-    options
-);
+#### closest()
 
-remove(); // Remove event listener
 ```
-
-#### dispatch()
-
+closest(element: Element, selector: string): Element
 ```
-dispatch(target: EventTarget, type: string[, eventInit: CustomEventInit]): bool
-```
 
-Dispatches a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) 
-`type` at the specified `target` optionally using the `eventInit` options.
+Returns the closest ancestor of the `element` (or the `element` itself) which
+matches the specified `selector`. 
 
-The function returns `false` if the event is cancelable and at least one of the
-event handlers which handled this event called `Event.preventDefault()`.
-Otherwise it returns `true`.
+If there isn't such an ancestor, it returns `null`.
 
@@ -512,19 +531,5 @@ ##### Example
 ```javascript
-const clickNotCancelled = dispatch(document, 'click');
-
-const myEventNotCancelled = dispatch(
-    document.querySelector('.my-button'),
-    'my:event',
-    {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-            foo: 'bar'
-        }
-    }
-);
+const closestParagraph = closest(element, 'p');
 ```
 
-### Query
-
 #### find()
@@ -548,17 +553,25 @@
 
-#### closest()
+#### focusable()
 
 ```
-closest(element: Element, selector: string): Element
+focusable([element: Element]): array
 ```
 
-Returns the closest ancestor of the `element` (or the `element` itself) which
-matches the specified `selector`. 
+Returns an `array` of focusable elements in the DOM which are
+descendants of the `document` or the `element` specified as optional second 
+argument.
 
-If there isn't such an ancestor, it returns `null`.
+Unlike [`tabbable()`](#tabbable), the array also includes elements which are not
+focusable by the keyboard, but only by script (`element.focus()`) and possibly
+the mouse (or pointer). Usually, those are elements with a negative `tabindex`
+attribute value, like `-1`.
 
+> **Note:** The elements in the array are ordered according to the 
+  [sequential focus navigation order](https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation)
+  which may be different from the DOM order.
+
 ##### Example
 
 ```javascript
-const closestParagraph = closest(element, 'p');
+const focusableElements = focusable();
 ```
@@ -581,2 +594,64 @@
 
+#### tabbable()
+
+```
+tabbable([element: Element]): array
+```
+
+Returns an `array` of keyboard focusable ("tabbable") elements in the DOM which
+are descendants of the `document` or the `element` specified as optional second 
+argument.
+
+Unlike [`focusable()`](#focusable), the array **only** includes elements which
+are focusable by the keyboard (by pressing the <kbd>TAB</kbd> and
+<kbd>SHIFT</kbd>+<kbd>TAB</kbd> keys). Elements that are only focusable by
+script (`element.focus()`) and possibly the mouse (or pointer) are excluded.
+
+> **Note:** The elements in the array are ordered according to the 
+  [sequential focus navigation order](https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation)
+  which may be different from the DOM order.
+
+##### Example
+
+```javascript
+const tabbableElements = tabbable();
+```
+
+Compatibility
+-------------
+
+This library is written as ES2015 code and published as such to
+[npm](https://www.npmjs.com/package/domestique).
+It is compatible with
+[modern browsers](http://browserl.ist/?q=Chrome+%3E%3D+60%2C+Edge+%3E%3D+15%2C+Firefox+%3E%3D+54%2C+iOS+%3E%3D+10.3%2C+Safari+%3E%3D+10.1)
+which natively support `<script type="module">`.
+
+If support for older browsers is required, code from `domestique` must be
+transpiled, eg. by using [Babel](https://github.com/babel/babel).
+
+Most bundlers (like [Webpack](https://github.com/babel/babel-loader#usage) and
+[Rollup](https://github.com/rollup/rollup-plugin-babel#usage)) recommend
+to not transpile anything from the `node_modules/` directory. It must be
+ensured, that code from `domestique` is **not** excluded from transpilation.
+
+If you're using Webpack and Babel, that could look like:
+
+```javascript
+{
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules\/(?!domestique)/,
+                loader: 'babel-loader'
+            }
+        ]
+    }
+}
+```
+
+After transpilation, `domestique` supports the
+[most common browsers including IE 10](http://browserl.ist/?q=defaults%2C+IE+10)
+without polyfills.
+
 Thank You
@@ -583,0 +658,0 @@ ---------

src/element/create.js

@@ -11,8 +11,10 @@ import fragmentContainer from '../util/fragment-container';
 
-    if (element) {
-        // Detach element from container
-        container.removeChild(element);
+    if (!element) {
+        return document.createTextNode('');
     }
 
+    // Detach element from container
+    container.removeChild(element);
+
     return element;
 }

src/util/fragment-container.js

 /*
  * Ported from jQuery's html()
- * https://github.com/jquery/jquery/blob/c9aae3565edc840961ecbeee77fb0cb367c46702/src/manipulation/buildFragment.js
+ * https://github.com/jquery/jquery/blob/6153eb0fd401cda90bf2007335cd4338093d38f0/src/manipulation/buildFragment.js
  */
@@ -22,9 +22,7 @@
 
+const regexpTag = /<([a-z][^/\0>\u0020\t\r\n\f]*)/i;
+
 export default function fragmentContainer(html) {
-    if (html === '') {
-        return document.createTextNode(' ');
-    }
+    const match = regexpTag.exec(html);
 
-    const match = /<([a-z][^/\0>\u0020\t\r\n\f]*)/i.exec(html);
-
     const tag = match ? match[0].replace(/</g, '').replace(/>/g, '') : '_';
@@ -31,0 +29,0 @@ const map = wrapMap[tag] || wrapMap._;

src/util/scroll-position-restorer.js

 import parents from '../element/parents';
 
 export default function scrollPositionRestorer(element) {
-    const positions = parents(element).map(element => {
-        return {
-            element,
-            top: element.scrollTop,
-            left: element.scrollLeft
-        };
+    const positions = parents(element).map(parent => {
+        return [parent, parent.scrollTop, parent.scrollLeft];
     });
 
     return () => {
-        positions.forEach(({element, top, left}) => {
-            element.scrollTop = top;
-            element.scrollLeft = left;
+        positions.forEach(cache => {
+            cache[0].scrollTop = cache[1];
+            cache[0].scrollLeft = cache[2];
         });
     };
 }

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

Total package byte prevSize

36589

increased by21.83%

Number of package files

31

increased by10.71%

Lines of code

623

increased by18.22%

Number of lines in readme file

657

increased by12.89%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes