dombili - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

@@ -12,2 +12,9 @@ ```text
 
+## **dombili** (*v0.8.0*)
+
+* Default export was not working, fixed it.
+* Added `webpack`-specific instructions to the **README**.
+* Added `$` as an **alias** to `find`.
+* Updated documentation
+
 ## **dombili** (*v0.7.0*)
@@ -14,0 +21,0 @@

index.js

@@ -16,4 +16,2 @@ /*          |\__.__/|
 
-import * as dombili from './src';
-
-export default dombili;
+module.exports = require( './src' );

package.json

 {
     "name": "dombili",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "dombili is a light, zero-dependency wrapper around modern browser APIs.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -74,3 +74,3 @@ ## About `dombili`
 
-That said, there’s nothing preventing you from configuring your bundler of choice to consume `dombili` as an “*EcmaScript module*” and produce backwards-compatible flavor of code you need.
+That said, there’s nothing preventing you from configuring your bundler of choice to consume `dombili` as an “*EcmaScript module*” and produce a backwards-compatible flavor of code you need.
 
@@ -87,2 +87,27 @@ For a typical [webpack][webpack] environment for instance, this will be similar to:
 
+> **Webpack-specific Note**
+>
+> You will also need to tell [`webpack`][webpack] to add `dombili` to the bundle.
+>
+> Here’s one way of doing it:
+>
+> ```
+> …
+>     module: {
+>         rules: [ {
+>             test: /\.js$/,
+>             include: [
+>
+>                 // Assuming `src` has your source files:
+>                 join( __dirname, 'src' ),
+>
+>                 // Include `dombili` to the bundle too:
+>                 join( __dirname, 'node_modules/dombili' )
+>             ],
+>             use: [ 'babel-loader' ]
+>         } ]
+>     },
+> …
+> ```
+
 ## Installation
@@ -107,3 +132,3 @@
 ```javascript
-import { json, find, el, after } from 'dombili';
+import { json, $, el, after } from 'dombili';
 
@@ -114,3 +139,3 @@ const url = 'https://some.website/api/v1/data';
 json( url ).then( ( res ) => {
-    const meaning = find( '#meaning-of-life' );
+    const meaning = $( '#meaning-of-life' );
     const fortyTwo = el( 'p', res.html );
@@ -140,3 +165,3 @@
 > If you feel like there is a missing example, [please file an issue][issue],<br>
-> or better **[fork dombili][fork]** and fix it.
+> or better, **[fork dombili][fork]** and fix it.
 
@@ -143,0 +168,0 @@ ## Dependencies

src/burrito.js

@@ -22,5 +22,5 @@ /*          |\__.__/|
  * @example
- * import { wrap, find } from 'dombili';
- * const beans = find( '#beans' );
- * const pita = find( '#pita' );
+ * import { wrap, $ } from 'dombili';
+ * const beans = $( '#beans' );
+ * const pita = $( '#pita' );
  * wrap( beans, pita );
@@ -49,4 +49,4 @@ *
  * @example
- * import { unwrap, find } from 'dombili';
- * const el = find( '#target' );
+ * import { unwrap, $ } from 'dombili';
+ * const el = $( '#target' );
  * unrwap( el );
@@ -53,0 +53,0 @@ *

src/create.js

@@ -48,4 +48,4 @@ /*          |\__.__/|
  * @example
- * import { html, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { html, find as $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * html( node, '<h1>Yummy!</h1>' );
@@ -93,5 +93,5 @@ *
  * @example
- * import { el, before, find } from 'dombili';
+ * import { el, before, find as $ } from 'dombili';
  * const elm = el( 'li', 'Remember the milk.' );
- * const ref = find( '#todo-list li:first-child' );
+ * const ref = $( '#todo-list li:first-child' );
  * before( el, ref );
@@ -118,5 +118,5 @@ *
  * @example
- * import { el, after, find } from 'dombili';
+ * import { el, after, find as $ } from 'dombili';
  * const elm = el( 'li', 'Remember the milk.' );
- * const ref = find( '#todo-list li:last-child' );
+ * const ref = $( '#todo-list li:last-child' );
  * after( el, ref );
@@ -143,5 +143,5 @@ *
  * @example
- * import { el, append, find } from 'dombili';
+ * import { el, append, $ } from 'dombili';
  * const elm = el( 'li', 'Remember the milk.' );
- * const ref = find( '#todo-list' );
+ * const ref = $( '#todo-list' );
  * append( el, ref );
@@ -167,5 +167,5 @@ *
  * @example
- * import { el, prepend, find } from 'dombili';
+ * import { el, prepend, $ } from 'dombili';
  * const elm = el( 'li', 'Remember the milk.' );
- * const ref = find( '#todo-list' );
+ * const ref = $( '#todo-list' );
  * prepend( el, ref );
@@ -191,5 +191,5 @@ *
  * @example
- * import { el, replace, find } from 'dombili';
+ * import { el, replace, $ } from 'dombili';
  * const elm = el( 'li', 'Remember the milk.' );
- * const ref = find( '#todo-list li:last-child' );
+ * const ref = $( '#todo-list li:last-child' );
  * replace( el, ref );
@@ -216,4 +216,4 @@ *
  * @example
- * import { remove, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { remove, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * remove( lahmacun );
@@ -238,4 +238,4 @@ *
  * @example
- * import { setAttr, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { setAttr, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * setAttr( node, 'yummy', 'very' );
@@ -261,4 +261,4 @@ *
  * @example
- * import { attr, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { attr, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * console.log( attr( node, 'yummy' ) );
@@ -283,4 +283,4 @@ *
  * @example
- * import { setData, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { setData, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * setData( node, 'yummy', 'very' );
@@ -302,4 +302,4 @@ *
  * @example
- * import { data, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { data, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * console.log( data( node, 'yummy' ) );
@@ -306,0 +306,0 @@ *

src/dimension.js

@@ -21,4 +21,4 @@ /*          |\__.__/|
 
-const nullRect = { width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 };
-const nullOffset = { left: 0, height: 0 };
+const nullRect = Object.freeze( { width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 } );
+const nullOffset = Object.freeze( { left: 0, height: 0 } );
 
@@ -29,4 +29,4 @@ /**
  * @example
- * import { rect, find } from 'dombili';
- * const elRect = rect( find( '#draggable' ) );
+ * import { rect, $ } from 'dombili';
+ * const elRect = rect( $( '#draggable' ) );
  *
@@ -50,4 +50,4 @@ * @param {Element} el The `Element` to compute the bounding client rectangle of.
  * @example
- * import { offset, find } from 'dombili';
- * const elOffset = offset( find( '#draggable' ) );
+ * import { offset, $ } from 'dombili';
+ * const elOffset = offset( $( '#draggable' ) );
  *
@@ -70,4 +70,4 @@ * @param {Element} el The `Element` to compute the offset of.
  * @example
- * import { relativeOffset, find } from 'dombili';
- * const elOffset = relativeOffset( find( '#draggable' ) );
+ * import { relativeOffset, $ } from 'dombili';
+ * const elOffset = relativeOffset( $( '#draggable' ) );
  *
@@ -74,0 +74,0 @@ * @param {Element} el The `Element` to compute the offset of.

src/display.js

@@ -24,4 +24,4 @@ /*          |\__.__/|
  * @example
- * import { show, find } from 'dombili';
- * const el = find( '#target' );
+ * import { show, $ } from 'dombili';
+ * const el = $( '#target' );
  * show( el );
@@ -48,4 +48,4 @@ *
  * @example
- * import { hide, find } from 'dombili';
- * const el = find( '#target' );
+ * import { hide, $ } from 'dombili';
+ * const el = $( '#target' );
  * hide( el );
@@ -72,4 +72,4 @@ *
  * @example
- * import { toggle, find } from 'dombili';
- * const el = find( '#target' );
+ * import { toggle, $ } from 'dombili';
+ * const el = $( '#target' );
  * toggle( el );
@@ -76,0 +76,0 @@ *

src/event.js

@@ -24,4 +24,4 @@ /*          |\__.__/|
  * @example
- * import { on, find } from 'dombili';
- * const list = find( '#todo-list' );
+ * import { on, $ } from 'dombili';
+ * const list = $( '#todo-list' );
  * on( list, 'click', ( evt ) => console.log( evt.target.nodeName ) );
@@ -48,4 +48,4 @@ *
  * @example
- * import { on, off, find } from 'dombili';
- * const list = find( '#todo-list' );
+ * import { on, off, $ } from 'dombili';
+ * const list = $( '#todo-list' );
  * // A constant reference to the actual event listener:
@@ -52,0 +52,0 @@ * const onListClick = ( evt ) => console.log( evt.target.nodeName );

src/family.js

@@ -27,4 +27,4 @@ /*          |\__.__/|
  * @example
- * import { siblings, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { siblings, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const otherTodos = siblings( node );
@@ -67,4 +67,4 @@ *
  * @example
- * import { parents, find } from 'dombili';
- * const node = find( '#todo-list' );
+ * import { parents, $ } from 'dombili';
+ * const node = $( '#todo-list' );
  * const parents = parents( node );
@@ -106,4 +106,4 @@ *
  * @example
- * import { nextAll, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { nextAll, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const otherTodos = nextAll( node );
@@ -145,4 +145,4 @@ *
  * @example
- * import { prevAll, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { prevAll, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const otherTodos = prevAll( node );
@@ -184,4 +184,4 @@ *
  * @example
- * import { next, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { next, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const nextTodo = next( node );
@@ -211,4 +211,4 @@ *
  * @example
- * import { next, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { next, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const nextTodo = next( node );
@@ -238,4 +238,4 @@ *
  * @example
- * import { first, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { first, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const firstTodo = first( node );
@@ -265,4 +265,4 @@ *
  * @example
- * import { last, find } from 'dombili';
- * const node = find( '#todo-list li' );
+ * import { last, $ } from 'dombili';
+ * const node = $( '#todo-list li' );
  * const lastTodo = last( node );
@@ -269,0 +269,0 @@ *

src/index.js

@@ -28,3 +28,3 @@ /*          |\__.__/|
 import { get, post, json } from './network';
-import { select, selectFirst, find, matches, parent, closest } from './query';
+import { select, selectFirst, find, $, matches, parent, closest } from './query';
 import { scrollLeft, scrollTop, scrollToLeft, scrollToTop, scrollTo, scroll } from './scroll';
@@ -45,3 +45,3 @@ import { css, setCss, hasClass, addClass, removeClass } from './style';
     siblings, parents, next, prev, nextAll, prevAll, first, last,
-    select, selectFirst, find, matches, parent, closest,
+    select, selectFirst, find, $, matches, parent, closest,
     scrollLeft, scrollTop, scrollToLeft, scrollToTop, scrollTo, scroll,
@@ -48,0 +48,0 @@ css, setCss, hasClass, addClass, removeClass,

src/query.js

@@ -68,7 +68,24 @@ /*          |\__.__/|
 /**
+ * Finds the first `Element` that matches a given selector.
+ *
+ * > This method is an **alias** to `selectFirst`.
+ *
+ * @method $
+ *
+ * @example
+ * import { $ } from 'dombili';
+ * const node = $( '#todos li' );
+ *
+ * @param {string} selector The **CSS** selector to select the nodes.
+ *
+ * @returns {Node} A `Node` that matches; `null` if no match.
+ */
+const $ = selectFirst;
+
+/**
  * A predicate function that returns `true` if the `Element` `el` matches the `selector`.
  *
  * @example
- * import { matches, find } from 'dombili';
- * const node = find( '#todos li' );
+ * import { matches, $ } from 'dombili';
+ * const node = $( '#todos li' );
  * if ( matches( node, '#todos li' ) ) {
@@ -96,4 +113,4 @@ *     console.log( 'The node matches the selector.' );
  * @example
- * import { parent, find } from 'dombili';
- * const luke = find( '#the-force-is-strong-with-this-one' );
+ * import { parent, $ } from 'dombili';
+ * const luke = $( '#the-force-is-strong-with-this-one' );
  * const vader = parent( luke );
@@ -118,4 +135,4 @@ *
  * @example
- * import { closest, find } from 'dombili';
- * const node = find( '#todos' );
+ * import { closest, $ } from 'dombili';
+ * const node = $( '#todos' );
  * const top = closest( node, '.container' );
@@ -137,2 +154,2 @@ *
 
-export { select, selectFirst, find, matches, parent, closest };
+export { select, selectFirst, find, $, matches, parent, closest };

src/scroll.js

@@ -83,4 +83,4 @@ /*          |\__.__/|
  * @example
- * import { scrollTo, find } from 'dombili';
- * scroll( find( '#container' ), 100, 100 );
+ * import { scrollTo, $ } from 'dombili';
+ * scroll( $( '#container' ), 100, 100 );
  *
@@ -87,0 +87,0 @@ * @param {any} [el=window] The `Element` to adjust the scroll of.

src/style.js

@@ -22,4 +22,4 @@ /*          |\__.__/|
  * @example
- * import { setCss, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { setCss, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * setCss( node, { color: '#160024' } );
@@ -48,4 +48,4 @@ *
  * @example
- * import { css, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { css, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * console.log( css( node, 'color' ) );
@@ -76,4 +76,4 @@ *
  * @example
- * import { hasClass, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { hasClass, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * console.log( hasClass( node, 'yummy' ) );
@@ -98,4 +98,4 @@ *
  * @example
- * import { addClass, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { addClass, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * addClass( node, 'yummy' );
@@ -120,4 +120,4 @@ *
  * @example
- * import { removeClass, find } from 'dombili';
- * const node = find( '#lahmacun' );
+ * import { removeClass, $ } from 'dombili';
+ * const node = $( '#lahmacun' );
  * removeClass( node, 'yummy' );
@@ -124,0 +124,0 @@ *

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64435

1.5%

Lines of code

1527

0.99%

Number of lines in readme file

236

11.85%

No dependency changes