littledom - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

littledom.js

@@ -48,3 +48,18 @@ (function(window) {
 
+    // Accepts an element, string, or $dom object, and returns an array of dom elements
+    function contentToArray(contentToInsert) {
+        var newEls = [];
+        if (!contentToInsert) {
+            newEls = [];
+        } else if (contentToInsert instanceof HTMLElement) {
+            newEls = [contentToInsert];
+        } else if (contentToInsert instanceof $dom) {
+            newEls = contentToInsert.toArray();
+        } else {
+            newEls = createElementsFromHtmlString(contentToInsert);
+        }
+        return newEls;
+    }
 
+
     var $dom = function(query, context) {
@@ -147,3 +162,3 @@ return new $dom.fn.init(query, context);
         html: function(markup) {
-            if (markup) {
+            if (typeof markup === 'string') {
                 // Set the innerHTML for all matched elements:
@@ -370,13 +385,13 @@ this.each(function(el) { el.innerHTML = String(markup); });
         // Trigger an event on the matching elements.
-        // This is usually just used to manually invoke click handlers, etc, and for the simple
-        // case a very basic dummy event object will be passed to the handler(s).
-        // However you can optionally pass in your own event object as a second parameter.
-        trigger: function(evtName, eventObj) {
-            if (!eventObj) {
-                // TODO: consider a more intelligent default event object (based on evtName)
-                eventObj = document.createEvent('MouseEvent');
-                eventObj.initMouseEvent(evtName, true, true, window);
-            }
+        // This is usually just used to manually invoke click handlers, etc, and
+        // a very basic event object will be passed to the handler(s).
+        trigger: function(evtName) {
+            // Ideally we would init a new event with the following:
+            //     var evt = new window.Event(evtName, { bubbles: true });
+            // But this doesn't work on phantomjs. See comments on https://github.com/ariya/phantomjs/issues/11289
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(evtName, true, true, window);
+
             this.each(function(el) {
-                el.dispatchEvent(eventObj);
+                el.dispatchEvent(evt);
             });
@@ -407,2 +422,26 @@ },
 
+        // Append html to the end of all of the matched elements.
+        // Accepts a string of html, a DOM node, or a $dom instance.
+        append: function(contentToInsert) {
+            var newEls = contentToArray(contentToInsert);
+            return this.each(function(selectedEl) {
+                newEls.forEach(function(newEl) {
+                    selectedEl.appendChild(newEl);
+                });
+            });
+        },
+
+        // Prepend html at the beginning of all of the matched elements.
+        // Accepts a string of html, a DOM node, or a $dom instance.
+        prepend: function(contentToInsert) {
+            var newEls = contentToArray(contentToInsert);
+            return this.each(function(selectedEl) {
+                // Need to reverse the array so that the new elements will be in
+                // the order that they were passed in (since they're prepended in order):
+                newEls.reverse().forEach(function(newEl) {
+                    selectedEl.insertBefore(newEl, selectedEl.firstChild);
+                });
+            });
+        },
+
         // Expose ES5 array methods on query results:
@@ -443,5 +482,3 @@ // TODO: consider rewriting each() with a for loop for speed.
 
-    window.$dom = $dom;
-
-    // Export using CommonJS or to the window.
+    // Export for node-style CommonJS modules, otherwise add a global to the window object:
     if (typeof(module) !== 'undefined') module.exports = $dom;
@@ -448,0 +485,0 @@ else window.$dom = $dom;

package.json

 {
   "name": "littledom",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Small jQuery-like DOM library",
@@ -5,0 +5,0 @@ "main": "littledom.js",

README.md

@@ -7,5 +7,3 @@ [![Build Status](https://secure.travis-ci.org/af/littledom.png)](http://travis-ci.org/af/littledom)
 littledom is a really tiny (experimental) jQuery work-alike for modern browsers. Think of it
-as a curated jQuery subset, optimized for readability and file size. There's still
-lots of room for more features within its 2kb (minified & gzipped) budget, so feel free to
-fork and add the API support that you want.
+as a curated jQuery subset, optimized for readability and file size.
 
@@ -22,3 +20,4 @@ littledom is *not* a drop-in replacement for jQuery, but it does implement many of its
 
-Check out the source code, it's extremely small and should be easy to read and understand.
+Check out [the source code](https://github.com/af/littledom/blob/master/littledom.js),
+it's concise and should be easy to read and understand.
 
@@ -44,7 +43,7 @@
 
-## Basic API
+## Basic API format
 
     $dom(selectorString, contextElement).<method>(<args>);
 
-## Non-jQuery methods:
+## Non-jQuery methods and attributes:
 
@@ -65,2 +64,4 @@ $dom.ready(callback)    -> equivalent to $(document).ready(callback)
     data(attrName, val)     -> set data-attrName to the given value for all matched elements
+    append(content)         -> Append content ($dom instance, DOM node, or html string) to each element
+    prepend(content)        -> Same as append(), but inserts at the front of the selection
 
@@ -94,3 +95,3 @@ // Traversal:
     off(eventName, delegationSelector, handler)
-    trigger(eventName, [eventObject])           -> trigger an event on each matched element
+    trigger(eventName)           -> trigger an event on each matched element
     bind(), unbind(), delegate(), undelegate() (legacy)
@@ -97,0 +98,0 @@

test/phantomjs_run_tests.js

@@ -9,13 +9,19 @@ var page = require('webpage').create();
     setTimeout(function() {
-        page.onConsoleMessage = function (msg) {
-            console.log('Browser: ' + msg);
-        };
+        page.onConsoleMessage = function (msg) { console.log(msg); };
+
         var testsPassed = page.evaluate(function() {
-              var failCount = parseInt(document.querySelector('#stats .failures em').innerText, 10);
-              var passCount = parseInt(document.querySelector('#stats .passes em').innerText, 10);
-              console.log(passCount + ' passed, ' + failCount + ' failed.');
-              return (failCount === 0) && (passCount > 0);
+            var failCount = parseInt(document.querySelector('#stats .failures em').innerText, 10);
+            var passCount = parseInt(document.querySelector('#stats .passes em').innerText, 10);
+
+            // Log all error text from mocha's html to the console:
+            var failElements = document.querySelectorAll('li.test.fail');
+            for (var i=0, l=failElements.length; i<l; i++) {
+                console.log('FAILED: ' + failElements[i].innerText + '\n');
+            }
+
+            console.log(passCount + ' passed, ' + failCount + ' failed.');
+            return (failCount === 0) && (passCount > 0);
         });
         phantom.exit(testsPassed ? 0 : 1);
-    }, 5000);
+    }, 4000);
 });

test/tests.js

@@ -0,1 +1,3 @@
+var $dom = window.$dom;     // For jshint.
+
 // Helper functions for tests:
@@ -9,2 +11,3 @@ function assertEqual(val1, val2) {
 
+
 describe('$dom', function() {
@@ -121,3 +124,3 @@ var testHtml = document.querySelector('#test_elements').innerHTML;
                 assertEqual(item, String(idx + 1));
-            })
+            });
         });
@@ -148,2 +151,9 @@
 
+        it('html() works when passed an empty string', function() {
+            assertEqual($dom('#htmlTest').html(), 'foo');
+            var result = $dom('#htmlTest').html('');
+            assertEqual(result.length, 1);
+            assertEqual(QSA('#htmlTest')[0].innerHTML, '');
+        });
+
         it('attr() and removeAttr() work for setting element ids', function() {
@@ -184,3 +194,3 @@ assertEqual($dom('#hideTest').attr('id'), 'hideTest');
 
-            var $els = $dom('section#test_elements div');
+            $els = $dom('section#test_elements div');
             assertEqual($els.length, 0);
@@ -460,2 +470,89 @@ });
     });
+
+    describe('append()', function() {
+        var $root = $dom('#test_elements');
+
+        afterEach(function() {
+            // Clean up inserted elements
+            $root.find('div.append_el').remove();
+        });
+
+        it('accepts an html string', function() {
+            $root.append('<div class="append_el">hi</div>');
+            var $inserted = $root.find('div.append_el');
+            assertEqual($inserted.length, 1);
+            assertEqual($inserted.html(), 'hi');
+        });
+
+        it('accepts an html string with multiple elements', function() {
+            $root.append('<div class="append_el">one</div> <div class="append_el">two</div>');
+
+            var $inserted = $root.find('div.append_el');
+            assertEqual($inserted.length, 2);
+            assertEqual($inserted.html(), 'one');    // Returns the first element's content
+        });
+
+        it('accepts a $dom object with one element and appends its element', function() {
+            var $newEls = $dom('<div class="append_el">hi</div>');
+            $root.append($newEls);
+
+            var $inserted = $root.find('div.append_el');
+            assertEqual($inserted.length, 1);
+            assertEqual($inserted.html(), 'hi');
+        });
+
+        it('accepts a $dom object with multiple elements and appends them', function() {
+            var $newEls = $dom('<div class="append_el">one</div> <div class="append_el">two</div>');
+            $root.append($newEls);
+
+            var $inserted = $root.find('div.append_el');
+            assertEqual($inserted.length, 2);
+            assertEqual($inserted.html(), 'one');    // Returns the first element's content
+        });
+
+        it('accepts a DOM node and appends it', function() {
+            var newEl = document.createElement('div');
+            newEl.className = 'append_el';
+            newEl.textContent = 'hi';
+            $root.append(newEl);
+
+            var $inserted = $root.find('div.append_el');
+            assertEqual($inserted.length, 1);
+            assertEqual($inserted.html(), 'hi');
+        });
+    });
+
+    describe('prepend()', function() {
+        var $root = $dom('#test_elements');
+
+        afterEach(function() {
+            // Clean up inserted elements
+            $root.find('div.prepend_el').remove();
+        });
+
+        it('accepts a $dom object with one element and prepends its element', function() {
+            var $newEls = $dom('<div class="prepend_el">hi</div>');
+            $root.prepend($newEls);
+
+            var $inserted = $root.find('div.prepend_el');
+            assertEqual($inserted.length, 1);
+            assertEqual($inserted.html(), 'hi');
+        });
+
+        it('accepts a $dom object with multiple elements and prepends them', function() {
+            var $newEls = $dom('<div class="prepend_el">one</div> <div class="prepend_el">two</div>');
+            $root.prepend($newEls);
+
+            var $inserted = $root.find('div.prepend_el');
+            assertEqual($inserted.length, 2);
+            assertEqual($inserted.html(), 'one');    // Returns the first element's content
+        });
+
+        it('accepts an html string', function() {
+            $root.prepend('<div class="prepend_el">hi</div>');
+            var $inserted = $root.find('div.prepend_el');
+            assertEqual($inserted.length, 1);
+            assertEqual($inserted.html(), 'hi');
+        });
+    });
 });

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140104

4.13%

Lines of code

4694

2.47%

Number of lines in readme file

111

0.91%

Worsened metrics

Number of package files

11

-8.33%

Number of low supply chain risk alerts

8

14.29%

No dependency changes