dombili - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

CHANGELOG.md

@@ -11,4 +11,12 @@ ```text
 ```
-## **dombili** (*v0.6.0*)
 
-* Initial version.
+## **dombili** (*v.0.6.1*)
+
+* Minor updates and bugfixes.
+* Minor fixes in documentation.
+* A few additional methods.
+* Bumped version number (*a lot*) to sync with `npm`.
+
+## **dombili** (*v0.2.0*)
+
+* Initial version.

CODE_OF_CONDUCT.md

@@ -31,2 +31,2 @@ ```
 
-*This Code of Conduct has been adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at  [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)*.
+*This Code of Conduct has been adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at  [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)*.

LICENSE.md

@@ -32,2 +32,2 @@ ```
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.**
+SOFTWARE.**

package.json

 {
-  "name": "dombili",
-  "version": "0.6.0",
-  "description": "Dombili knows your DOM.",
-  "main": "index.js",
-  "scripts": {
-    "lint": "bin/lint.sh",
-    "test": "bin/test.sh",
-    "doc": "bin/doc.sh"
-  },
-  "repository": "[e-mail]:jsbites/dombili.git",
-  "author": "Volkan Özçelik <[e-mail]> (https://volkan.io)",
-  "license": "MIT",
-  "dependencies": {},
-  "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "eslint": "^3.19.0",
-    "eslint-config-jsbites": "^0.5.0",
-    "eslint-plugin-babel": "^4.1.1",
-    "ink-docstrap": "^1.3.0",
-    "jsdoc": "^3.4.3"
-  }
+    "name": "dombili",
+    "version": "0.6.1",
+    "description": "dombili is a light, zero-dependency wrapper around modern browser APIs.",
+    "main": "index.js",
+    "scripts": {
+        "lint": "bin/lint.sh",
+        "test": "bin/test.sh",
+        "doc": "bin/doc.sh"
+    },
+    "repository": "[e-mail]:jsbites/dombili.git",
+    "author": "Volkan Özçelik <[e-mail]> (https://volkan.io)",
+    "license": "MIT",
+    "dependencies": {},
+    "devDependencies": {
+        "babel-eslint": "^7.2.3",
+        "eslint": "^3.19.0",
+        "eslint-config-jsbites": "^0.5.0",
+        "eslint-plugin-babel": "^4.1.1",
+        "ink-docstrap": "^1.3.0",
+        "jsdoc": "^3.4.3"
+    }
 }

README.md

@@ -81,3 +81,3 @@ ## About `dombili`
 
-// do stuff with dombili.;
+// Do stuff with dombili.
 ```
@@ -113,3 +113,3 @@
 
-… after [forking dombili][fork], to generate the documentation locally.
+… after [**forking dombili**][fork], to generate the documentation locally.
 
@@ -191,2 +191,2 @@ > If you feel like there is a missing example, [please file an issue][issue],<br>
 [node]: https://nodejs.or/ "Node.JS"
-[fork]: https://github.com/jsbites/dombili/ "Dombili on GitHub"
+[fork]: https://github.com/jsbites/dombili/ "Dombili on GitHub"

src/cookie.js

@@ -16,2 +16,4 @@ /*          |\__.__/|
 
+const MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000;
+
 /**
@@ -31,3 +33,3 @@ * Gets the value of the cookie with the given `name`.
 const get = ( name ) => {
-    const matches = document.cookie.match( `(^|;) ?${name}=([^;]*)(;|$)` );
+    const matches = document.cookie.match( `(^|;) ?${encodeURIComponent( name )}=([^;]*)(;|$)` );
 
@@ -55,3 +57,3 @@ return matches ? decodeURIComponent( matches[ 2 ] ) : null;
 
-    date.setTime( date.getTime() + 24 * 60 * 60 * 1000 * days );
+    date.setTime( date.getTime() + MILLISECONDS_IN_A_DAY * days );
 
@@ -58,0 +60,0 @@ const encodedName = encodeURIComponent( name );

src/create.js

@@ -30,3 +30,3 @@ /*          |\__.__/|
 /**
- * If the `el` is a `string`, returns a **DOM** text node, otherwise returns `el` itself.
+ * If the `elm` is a `string`, returns a **DOM** text node, otherwise returns `elm` itself.
  *
@@ -37,9 +37,30 @@ * @example
  *
- * @param {any} el the element to normalize.
+ * @param {any} elm the `Element` to normalize.
  *
  * @returns {Node} a **DOM** `Node`.
  */
-const normalize = ( el ) => typeof el === 'string' ? text( el ) : el;
+const normalize = ( elm ) => typeof elm === 'string' ? text( elm ) : elm;
 
 /**
+ * Updates the `innerHTML` of the `Element` `elm`.
+ *
+ * > Compare this to the `$.html()` method of **jQuery**.
+ *
+ * @example
+ * import { html, find } from 'dombili';
+ * const node = find( '#lahmacun' );
+ * html( node, '<h1>Yummy!</h1>' );
+ *
+ * @param {Element} elm The `Element` to change the `innerHTML` of.
+ * @param {string} innerHtml the `innerHTML` to set.
+ *
+ * @returns {undefined} Nothing.
+ */
+const html = ( elm, innerHtml ) => {
+    if ( !elm ) { return; }
+
+    elm.innerHTML = `${innerHtml}`;
+};
+
+/**
  * Creates an `Element`.
@@ -49,9 +70,9 @@ *
  * import { el } from 'dombili';
- * const el = el( 'div' );
+ * const elm = el( 'div' );
  *
  * @param {string} nodeName The node (*tag*) name.
- * @param {string} [html=''] (Optional) the `innerHTML` of the element.
+ * @param {string} [innerHtml=''] (Optional) the `innerHTML` of the element.
  * @returns {Element} the created element.
  */
-const el = ( nodeName, html = '' ) => {
+const el = ( nodeName, innerHtml = '' ) => {
     if ( !nodeName ) { return null; }
@@ -61,4 +82,4 @@
 
-    if ( html ) {
-        element.innerHTML = html;
+    if ( innerHtml ) {
+        html( element, innerHtml );
     }
@@ -86,3 +107,2 @@
 const before = ( elm, ref ) => {
-    if ( !elm ) { return; }
     if ( !ref ) { return; }
@@ -112,3 +132,2 @@ if ( !ref.parentNode ) { return; }
 const after = ( elm, ref ) => {
-    if ( !elm ) { return; }
     if ( !ref ) { return; }
@@ -138,3 +157,2 @@ if ( !ref.parentNode ) { return; }
 const append = ( elm, ref ) => {
-    if ( !elm ) { return; }
     if ( !ref ) { return; }
@@ -163,7 +181,6 @@ if ( !ref.appendChild ) { return; }
 const prepend = ( elm, ref ) => {
-    if ( !elm ) { return; }
     if ( !ref ) { return; }
     if ( !ref.appendChild ) { return; }
 
-    before( normalize( elm ), ref.firstChild );
+    before( elm, ref.firstChild );
 };
@@ -188,7 +205,4 @@
 const replace = ( elm, ref ) => {
-    if ( !elm ) { return; }
-    if ( !ref ) { return; }
+    const parent = ( elm && elm.parentNode ) || ( ref && ref.parentNode ) || null;
 
-    const parent = elm.parentNode || ref.parentNode || null;
-
     if ( !parent ) { return; }
@@ -221,24 +235,2 @@
 /**
- * Updates the `innerHTML` of the `Element` `elm`.
- *
- * > Compare this to the `$.html()` method of **jQuery**.
- *
- * @example
- * import { html, find } from 'dombili';
- * const node = find( '#lahmacun' );
- * html( node, '<h1>Yummy!</h1>' );
- *
- * @param {Element} elm The `Element` to change the `innerHTML` of.
- * @param {string} innerHtml the `innerHTML` to set.
- *
- * @returns {undefined} Nothing.
- */
-const html = ( elm, innerHtml ) => {
-    if ( !elm ) { return; }
-    if ( typeof elm.innerHTML === 'undefined' ) { return; }
-
-    elm.innerHTML = `${innerHtml}`;
-};
-
-/**
  * Sets the attributed of an `Element` `elm`.
@@ -262,3 +254,3 @@ *
 
-    elm[ attribute ] = value;
+    elm[ `${attribute}` ] = `${value}`;
 };
@@ -284,3 +276,3 @@
 
-    return elm[ attribute ];
+    return elm[ `${attribute}` ];
 };
@@ -304,8 +296,4 @@
  */
-const setData = ( elm, attribute, value ) => {
-    if ( !elm ) { return; }
+const setData = ( elm, attribute, value ) => setAttr( elm, `data-${attribute}`, value );
 
-    elm[ `data-${attribute}` ] = value;
-};
-
 /**
@@ -326,8 +314,4 @@ * Gets the value of the data attribute associated with the `Element` `elm`.
  */
-const data = ( elm, attribute ) => {
-    if ( !elm ) { return null; }
+const data = ( elm, attribute ) => attr( elm, `data-${attribute}` );
 
-    return elm[ `data-${attribute}` ];
-};
-
 export {
@@ -334,0 +318,0 @@ text, normalize, el, before, after, append, prepend, replace,

src/dimension.js

@@ -18,5 +18,8 @@ /*          |\__.__/|
 
-const nullRect = { width: 0, top: 0, left: 0, bottom: 0, height: 0 };
-const nullOffset = { left: 0, top: 0 };
+void scrollLeft;
+void scrollTop;
 
+const nullRect = { width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 };
+const nullOffset = { left: 0, height: 0 };
+
 /**
@@ -57,3 +60,3 @@ * Computes the bounding client rectangle of the `Element` `el`.
 
-    return { left: el.offsetLeft || 0, top: el.offsetTop || 0 };
+    return { top: el.offsetTop || 0, left: el.offsetLeft || 0 };
 };
@@ -60,0 +63,0 @@

src/display.js

@@ -36,3 +36,3 @@ /*          |\__.__/|
     if ( !el ) { return; }
-    if ( !el.style || !el.style.display ) { return; }
+    if ( !el.style || typeof el.style.display === 'undefined' ) { return; }
 
@@ -60,3 +60,3 @@ el.style.display = display || 'block';
     if ( !el ) { return; }
-    if ( !el.style || !el.style.display ) { return; }
+    if ( !el.style || typeof el.style.display === 'undefined' ) { return; }
 
@@ -83,2 +83,5 @@ el.style.display = 'none';
 const toggle = ( el, display = 'block' ) => {
+    if ( !el ) { return; }
+    if ( !el.style || typeof el.style.display === 'undefined' ) { return; }
+
     const displayStyle = css( el, 'display', true );
@@ -85,0 +88,0 @@

src/event.js

@@ -16,3 +16,3 @@ /*          |\__.__/|
 
-const noop = () => {};
+import { noop } from './utils';
 
@@ -39,3 +39,3 @@ /**
 
-    el.addEventListener( eventType, onEvent, false );
+    el.addEventListener( el, `${eventType}`, onEvent, false );
 };
@@ -69,3 +69,3 @@
 
-    el.removeEventListener( eventType, onEvent );
+    el.removeEventListener( el, `${eventType}`, onEvent );
 };
@@ -72,0 +72,0 @@

src/family.js

@@ -16,3 +16,3 @@ /*          |\__.__/|
 
-const returnTrue = () => true;
+import { returnTrue } from './utils';
 
@@ -48,6 +48,4 @@ /**
     while ( nextSibling ) {
-        if ( filter( nextSibling ) ) {
-            if ( nextSibling !== el ) {
-                peers.push( nextSibling );
-            }
+        if ( filter( nextSibling ) && nextSibling !== el ) {
+            peers.push( nextSibling );
         }
@@ -54,0 +52,0 @@

src/index.js

@@ -28,6 +28,6 @@ /*          |\__.__/|
 import { get, post } from './network';
-import { select, find, selectFirst, matches, parent, closest } from './query';
+import { select, selectFirst, find, matches, parent, closest } from './query';
 import { scrollLeft, scrollTop, scrollToLeft, scrollToTop, scrollTo, scroll } from './scroll';
 import { css, setCss, hasClass, addClass, removeClass } from './style';
-import { extend, inArray } from './util';
+import { noop, returnTrue, returnFalse, extend, inArray } from './utils';
 
@@ -42,11 +42,11 @@ const dombili = {
     on, off, ready,
-    siblings, next, prev, nextAll, prevAll, first, last,
     script, style,
     get, post,
-    select, find, selectFirst, matches, parent, closest,
+    siblings, next, prev, nextAll, prevAll, first, last,
+    select, selectFirst, find, matches, parent, closest,
     scrollLeft, scrollTop, scrollToLeft, scrollToTop, scrollTo, scroll,
     css, setCss, hasClass, addClass, removeClass,
-    extend, inArray
+    noop, returnTrue, returnFalse, extend, inArray
 };
 
 export default dombili;

src/lazy.js

@@ -16,2 +16,4 @@ /*          |\__.__/|
 
+import { el, append } from './create';
+
 /**
@@ -31,7 +33,7 @@ * Lazily injects a `<script>` element to the document.
 
-    const scr = document.createElement( 'script' );
+    const scr = el( 'script' );
 
     scr.src = `${src}`;
 
-    document.body.appendChild( scr );
+    append( scr, document.body );
 };
@@ -51,11 +53,13 @@
 const style = ( src ) => {
-    const link = document.createElement( 'link' );
+    if ( !src ) { return; }
 
+    const link = el( 'link' );
+
+    link.href = `${src}`;
+    link.media = 'all';
     link.rel = 'stylesheet';
-    link.media = 'all';
-    link.href = `${src}`;
 
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( link );
+    append( link, document.body );
 };
 
-export { style, script };
+export { script, style };

src/network.js

@@ -16,8 +16,9 @@ /*          |\__.__/|
 
+import { extend } from './utils';
+
 const fetch = window.fetch;
+const Promise = window.Promise;
 
-import { extend } from './util';
-
 /**
- * Sends an **HTTP GET** request.
+ * Sends an `HTTP GET` request.
  *
@@ -38,10 +39,10 @@ * This method uses `window.fetch` API in the background.
 const get = ( url, options = {} ) => {
-    if ( !fetch ) { return; }
-    if ( !Object.assign ) { return; }
+    if ( !Promise ) { throw new Error( 'Me wantz Promisez!' ); }
+    if ( !fetch ) { return Promise.reject( 'Unsupported user agent!' ); }
 
-    fetch( url, extend( { method: 'GET' }, options ) );
+    return fetch( url, extend( { method: 'GET' }, options ) );
 };
 
 /**
- * Sends an **HTTP POST** request.
+ * Sends an `HTTP POST` request.
  *
@@ -62,7 +63,8 @@ * This method uses `window.fetch` API in the background.
 const post = ( url, options = {} ) => {
-    if ( !fetch ) { return; }
+    if ( !Promise ) { throw new Error( 'Me wantz Promisez!' ); }
+    if ( !fetch ) { return Promise.reject( 'Unsupported user agent!' ); }
 
-    fetch( url, extend( { method: 'POST' }, options ) );
+    return fetch( url, extend( { method: 'POST' }, options ) );
 };
 
 export { get, post };

src/query.js

@@ -17,11 +17,11 @@ /*          |\__.__/|
 /**
- * Finds all the `Element`s that match a given selector.
+ * Finds the first `Element` that matches a given selector.
  *
  * @example
- * import { select } from 'dombili';
- * const nodes = select( '#todos li' );
+ * import { selectFirst } from 'dombili';
+ * const node = selectFirst( '#todos li' );
  *
  * @param {string} selector The **CSS** selector to select the nodes.
  *
- * @returns {NodeList} A live `NodeList`; an empty `NodeList` if no match.
+ * @returns {Node} A `Node` that matches; `null` if no match.
  */
@@ -31,3 +31,3 @@ const select = ( selector ) => {
 
-    return document.querySelectorAll( selector );
+    return document.querySelectorAll( `${selector}` );
 };
@@ -49,3 +49,3 @@
 
-    return document.querySelector( selector );
+    return document.querySelector( `${selector}` );
 };
@@ -56,3 +56,3 @@
  *
- * This method is an alias to `selectFirst`.
+ * > This method is an **alias** to `selectFirst`.
  *
@@ -87,6 +87,6 @@ * @method find
 const matches = ( el, selector ) => {
-    if ( !el ) { return null; }
-    if ( !el.matches ) { return null; }
+    if ( !el ) { return false; }
+    if ( !el.matches ) { return false; }
 
-    return el.matches( selector );
+    return el.matches( `${selector}` );
 };
@@ -133,4 +133,4 @@
     if ( !el ) { return null; }
+    if ( !selector ) { return el.parentNode ? el.parentNode : null; }
     if ( !el.closest ) { return null; }
-    if ( !selector ) { return null; }
 
@@ -137,0 +137,0 @@ return el.closest( `${selector}` );

src/scroll.js

@@ -82,2 +82,6 @@ /*          |\__.__/|
  *
+ * @example
+ * import { scrollTo, find } from 'dombili';
+ * scroll( find( '#container' ), 100, 100 );
+ *
  * @param {any} [el=window] The `Element` to adjust the scroll of.
@@ -84,0 +88,0 @@ * @param {number} [left=0] The left scroll position to set in pixels. Defaults to `0`.

src/style.js

@@ -34,5 +34,6 @@ /*          |\__.__/|
     if ( typeof style !== 'object' ) { return; }
+    if ( !el.style ) { return; }
 
     for ( const prop in style ) {
-        el.style[prop] = style[prop];
+        el.style[ prop ] = style[ prop ];
     }
@@ -60,7 +61,10 @@ };
     if ( !el ) { return ''; }
-    if ( typeof prop !== 'string' ) { return ''; }
+    if ( !el.style ) { return ''; }
+    if ( !prop ) { return ''; }
+    if ( !window.getComputedStyle && computed ) { return ''; }
 
     return computed ?
-        window.getComputedStyle( el, null )[ prop ] :
-        el.style[ prop ];
+        window.getComputedStyle( el, null )[ `${prop}` ] :
+        el.style[ `${prop}` ];
+
 };
@@ -83,5 +87,6 @@
     if ( !el ) { return false; }
+    if ( !className ) { return false; }
     if ( !el.classList ) { return false; }
 
-    return el.classList.contains( className );
+    return el.classList.contains( `${className}` );
 };
@@ -92,2 +97,7 @@
  *
+ * @example
+ * import { addClass, find } from 'dombili';
+ * const node = find( '#lahmacun' );
+ * addClass( node, 'yummy' );
+ *
  * @param {Element} el The element to add a **CSS** class to.
@@ -100,5 +110,6 @@ * @param {string} className The **CSS** class to add.
     if ( !el ) { return; }
+    if ( !className ) { return; }
     if ( !el.classList ) { return; }
 
-    el.classList.add( className );
+    el.classList.add( `${className}` );
 };
@@ -121,7 +132,8 @@
     if ( !el ) { return; }
+    if ( !className ) { return; }
     if ( !el.classList ) { return; }
 
-    el.classList.remove( className );
+    el.classList.remove( `${className}` );
 };
 
 export { css, setCss, hasClass, addClass, removeClass };

src/utils.js

@@ -17,2 +17,36 @@ /*          |\__.__/|
 /**
+ * Does nothing. — It is just a void function.
+ *
+ * @example
+ * import { noop } from 'dombili';
+ * // This does nothing:
+ * noop();
+ *
+ * @returns {undefined} Nothing.
+ */
+const noop = () => {};
+
+/**
+ * Returns `true` all the time.
+ *
+ * @example
+ * import { returnTrue } from 'dombili';
+ * console.log( returnTrue() );
+ *
+ * @returns {bool} `true`. — Always returns `true`.
+ */
+const returnTrue = () => true;
+
+/**
+ * Returns `false` all the time.
+ *
+ * @example
+ * import { returnFalse } from 'dombili';
+ * console.log( returnFalse() );
+ *
+ * @returns {bool} `false`. — Always returns `false`.
+ */
+const returnFalse = () => false;
+
+/**
  * Extends `dest` with the attributes of `src`,
@@ -60,13 +94,13 @@ * by **shallowly** copying each attribute from `src` to `dest`.
  * @param {any} needle The object to check against.
- * @param {Array} haystack The `Array` to search.
+ * @param {Array} hayStack The `Array` to search.
  *
  * @returns {bool} `true` if `haystack` contains the `needle`; `false` otherwise.
  */
-const inArray = ( needle, haystack ) => {
-    if ( !haystack ) { return false; }
-    if ( !haystack.indexOf ) { return false; }
+const inArray = ( needle, hayStack ) => {
+    if ( !hayStack ) { return false; }
+    if ( !hayStack.indexOf ) { return false; }
 
-    return haystack.indexOf( needle ) > -1;
+    return hayStack.indexOf( needle ) > -1;
 };
 
-export { extend, inArray };
+export { noop, returnTrue, returnFalse, extend, inArray };

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 14 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of medium supply chain risk alerts

5

decreased by-76.19%

Worsened metrics

Total package byte prevSize

347488

decreased by-92.96%

Number of package files

52

decreased by-47.47%

Lines of code

1466

decreased by-98.89%

Number of lines in readme file

189

decreased by-0.53%

No dependency changes