dom-component-parser - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

dist/component.js

@@ -16,7 +16,7 @@ 'use strict';
 
-    var options = function options(node) {
+    var options = function options(element) {
 
         var parseOption = function parseOption(option) {
 
-            if (!node.hasAttribute('data-' + (0, _helpers.toSnakeCase)(option))) {
+            if (!element.hasAttribute('data-' + (0, _helpers.toSnakeCase)(option))) {
 
@@ -30,3 +30,3 @@ if (defaultOptions[option] === 'required') {
 
-            var value = node.getAttribute('data-' + (0, _helpers.toSnakeCase)(option));
+            var value = element.getAttribute('data-' + (0, _helpers.toSnakeCase)(option));
 
@@ -46,6 +46,6 @@ if (value === '') {
 
-    return [].concat(_toConsumableArray(document.getElementsByClassName('js-' + tag))).map(function (node) {
+    return [].concat(_toConsumableArray(document.getElementsByClassName('js-' + tag))).map(function (element) {
         return {
-            node: node,
-            options: options(node)
+            element: element,
+            options: options(element)
         };
@@ -52,0 +52,0 @@ });

package.json

 {
   "name": "dom-component-parser",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Extract nodes and corresponding custom options from the DOM",
@@ -29,2 +29,3 @@ "main": "dist/index.js",
     "babel-preset-es2015": "^6.9.0",
+    "chai": "^3.5.0",
     "eslint": "^2.9.0",
@@ -31,0 +32,0 @@ "jsdom": "^9.3.0",

README.md

@@ -7,3 +7,3 @@ # dom-component-parser
 
-Sometimes you want to be able to quickly set up a JavaScript component in your dome with some settings. Libraries like [Vue.js](https://github.com/vuejs/vue) provide a powerful API to create custom components, but is quite heavy for cases like mounting third party libraries to your DOM.
+Sometimes you want to be able to quickly set up a JavaScript component in your DOM with some settings. Libraries like [Vue.js](https://github.com/vuejs/vue) provide a powerful API to create custom components, but is quite heavy for cases like mounting third party libraries to your DOM.
 
@@ -24,6 +24,6 @@ Say we want to mount a hypothetical `Uploader` component on all `.js-uploader` nodes:
 
-Now let's retrieve the DOM node and read out the options in JavaScript:
+Now let's retrieve the DOM element and read out the options in JavaScript:
 
 ```js
-for (let node of document.querySelectorAll('.js-uploader')) {
+for (let element of document.querySelectorAll('.js-uploader')) {
     const url = element.getAttribute('data-url');
@@ -46,7 +46,5 @@ const multiple = element.getAttribute('data-multiple') === '' ? true : false;
     multiple: false, // Defaults to false
-}).forEach(({ node, options }) => new Uploader(node, options));
+}).forEach(({ element, options }) => new Uploader(element, options));
 ```
 
-Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
-
 ## Install
@@ -64,3 +62,3 @@
 
-The `component` method always returns an array of results. Components are queried for a class with their names prefixed by `js-`, e.g. a component named uploader expects an element with a `js-uploader` class.
+The `component` method always returns an array of results. Components are queried for a class with their names prefixed by `js-`, e.g. a component named `my-uploader` expects an element with a `js-my-uploader` class.
 
@@ -75,3 +73,3 @@ ```html
 const myUploaders = component('my-uploader');
-// => [ { node: <DOMNode>, options: {} } ]
+// => [ { element: <Element>, options: {} } ]
 ```
@@ -81,3 +79,3 @@
 
-Component options are declared as objects, and map to the component's `data` attributes. The attribute's corresponding value provided in the script will be used as the default value if it's omitted from the DOM node. Camel-cased object keys will look for a snake-cased data attributes.
+Component options are declared as objects, and map to the component's `data` attributes. The attribute's corresponding value provided in the script will be used as the default value if it's omitted from the DOM element. Camel-cased object keys will look for a snake-cased data attributes.
 
@@ -91,4 +89,4 @@ ```html
 const myUploaders = component('my-uploader', { uploadUrl: 'http://example.com' });
-// [ { node: <DOMNode>, options: { uploadUrl: 'http://example.com' } },
-//   { node: <DOMNode>, options: { uploadUrl: 'http://my-site.com/upload' } } ]
+// [ { element: <Element>, options: { uploadUrl: 'http://example.com' } },
+//   { element: <Element>, options: { uploadUrl: 'http://my-site.com/upload' } } ]
 ```
@@ -116,4 +114,4 @@
 const myUploaders = component('my-uploader', { multiple: false });
-// [ { node: <DOMNode>, options: { multiple: false } },
-//   { node: <DOMNode>, options: { multiple: true } } ]
+// [ { element: <Element>, options: { multiple: false } },
+//   { element: <Element>, options: { multiple: true } } ]
 ```
@@ -120,0 +118,0 @@

src/component.js

@@ -5,7 +5,7 @@ import { keys, toSnakeCase } from './helpers';
 
-    const options = node => {
+    const options = element => {
 
         const parseOption = option => {
 
-            if (!node.hasAttribute(`data-${toSnakeCase(option)}`)) {
+            if (!element.hasAttribute(`data-${toSnakeCase(option)}`)) {
 
@@ -19,3 +19,3 @@ if (defaultOptions[option] === 'required') {
 
-            const value = node.getAttribute(`data-${toSnakeCase(option)}`);
+            const value = element.getAttribute(`data-${toSnakeCase(option)}`);
 
@@ -35,5 +35,5 @@ if (value === '') {
 
-    return [...document.getElementsByClassName(`js-${tag}`)].map(node => ({
-        node,
-        options: options(node),
+    return [...document.getElementsByClassName(`js-${tag}`)].map(element => ({
+        element,
+        options: options(element),
     }));
@@ -40,0 +40,0 @@ };

test/component.js

@@ -18,3 +18,3 @@ import { assert } from 'chai';
         assert.lengthOf(myComponents, 1);
-        assert.equal(document.querySelectorAll('.js-my-component')[0], myComponents[0].node);
+        assert.equal(document.querySelectorAll('.js-my-component')[0], myComponents[0].element);
 
@@ -33,4 +33,4 @@ });
         assert.lengthOf(myComponents, 2);
-        assert.equal(document.querySelectorAll('.js-my-component')[0], myComponents[0].node);
-        assert.equal(document.querySelectorAll('.js-my-component')[1], myComponents[1].node);
+        assert.equal(document.querySelectorAll('.js-my-component')[0], myComponents[0].element);
+        assert.equal(document.querySelectorAll('.js-my-component')[1], myComponents[1].element);
 
@@ -37,0 +37,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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

15282

decreased by-0.35%

Dev dependency count

7

increased by16.67%

Number of lines in readme file

140

decreased by-1.41%

No dependency changes