add optional attributes param

Author: Gaspar Robert

README.md

@@ -8,17 +8,17 @@ David Walsh's [super simple loader](https://davidwalsh.name/javascript-loader) f
 npm i -S @prepair/basic-loader
 ```
 
-* Requires browser environment (dom).
-* Transpiled to es2015+ie context (polyfills not included).
+- Requires browser environment (dom).
+- Transpiled to es2015+ie context (polyfills not included).
 
 ## usage
 
 ```
 import load from '@prepair/basic-loader'
 
 Promise.all([
-  load.js('lib/highlighter.js'), 
-  load.js('lib/main.js'), 
+  load.js('lib/highlighter.js'),
+  load.js('lib/main.js'),
   load.css('lib/highlighter.css'),
   load.img('images/logo.png')
 ]).then(() => {
@@ -28,18 +28,27 @@ Promise.all([
 });
 ```
 
+## add optional attributes
+
+```
+load.js('lib/main.js', {
+  'data-foo': 'new-attribute',
+  'data-bar': 'new-attribute-2'
+})
+```
+
 ## caveats
 
-* Loading is not sequential of course. In the above example "main.js" may be parsed
+- Loading is not sequential of course. In the above example "main.js" may be parsed
   before "highlighter.js". If you want in order loading, use a sequential promise
   executor or a then chain.
-* Style loading may not work with very old mobile borwsers.
+- Style loading may not work with very old mobile borwsers.
   [Followup is here](https://github.com/w3core/import.js/issues/2), see addendum below.
-* The e2e test runner breaks (in phantom, but the test.html works in the browser)
+- The e2e test runner breaks (in phantom, but the test.html works in the browser)
   this is caused by an old phantomjs version in the _mocha-phantomjs_ package.
   [Issue is here](https://github.com/nathanboktae/mocha-phantomjs/issues/248). Solutions:
-  * either wait for the upstream package to be updated 
-  * or update the binary manually (inside node_modules)
+  - either wait for the upstream package to be updated
+  - or update the binary manually (inside node_modules)
 
 ## exposed test
 

src/basic-loader.js

@@ -1,37 +1,41 @@
-function _load (tag) {
-  return function (url) {
+function _load(tag) {
+  // attributes example: { 'data-test': 'new-attribute-here' }
+  return function(url, attributes = {}) {
     // This promise will be used by Promise.all to determine success or failure
     return new Promise((resolve, reject) => {
       let element = document.createElement(tag);
-      let parent = 'body';
-      let attr = 'src';
+      let parent = "body";
+      let attr = "src";
 
       // Important success and error for the promise
       element.onload = () => resolve(url);
       element.onerror = () => reject(url); // maybe we should remove the broken node, who knows
 
       // Need to set different attributes depending on tag type
       switch (tag) {
-        case 'script':
+        case "script":
           element.async = true;
           break;
-        case 'link':
-          element.type = 'text/css';
-          element.rel = 'stylesheet';
-          attr = 'href';
-          parent = 'head';
+        case "link":
+          element.type = "text/css";
+          element.rel = "stylesheet";
+          attr = "href";
+          parent = "head";
       }
 
       // Inject into document to kick off loading
       element[attr] = url;
+      Object.keys(attributes).forEach(key => {
+        element.setAttribute(key, attributes[key]);
+      });
       document[parent].appendChild(element);
     });
   };
 }
 
 // exporting a "default" would render the amd package to work differently
 module.exports = {
-  css: _load('link'),
-  js: _load('script'),
-  img: _load('img')
+  css: _load("link"),
+  js: _load("script"),
+  img: _load("img")
 };