Use a data attribute to store namespaced attribute settings.

Author: jhamlet

.gitignore

@@ -2,3 +2,4 @@
 npm-debug.log
 /node_modules/*
 /build.js
+/*.tgz

helpers.js

@@ -1,37 +1,36 @@
-var React   = require('react');
-var keys    = require('lodash/object/keys');
-var rootKey = 'xmlReactLoader-root';
-
-var NS_SEPARATOR = ':';
+var React    = require('react');
+var forEach  = require('lodash/collection/forEach');
+var ATTR_KEY = 'data-svgreactloader';
 
 module.exports = {
+    /**
+     * @param {HTMLElement}
+     */
+    applyAttributes: function (el) {
+        var data = this.hasXmlAttributes(el);
+        if (data) {
+            forEach(JSON.parse(data), function (args) {
+                var method = 'setAttribute' + (args.length === 3 ? 'NS' : '');
+                el[method].apply(el, args);
+            });
+        }
+    },
+    /**
+     * @param {HTMLElement}
+     */
+    hasXmlAttributes: function (el) {
+        return el && el.getAttribute(ATTR_KEY);
+    },
     /**
      * @param {React.Component}
      */
-    applyUnsafe: function (component) {
-        var context = component.xmlReactLoader;
-        var namespaces = context.ns;
-        var map = context.map;
-
-        keys(map).
-            forEach(function (key) {
-                var ref   = key === rootKey ? component : component.refs[key];
-                var el    = React.findDOMNode(ref);
-                var attrs = map[key];
+    applyXmlAttributes: function (component) {
+        var domEl = React.findDOMNode(component);
+        var fn = this.applyAttributes.bind(this);
 
-                keys(attrs).
-                    forEach(function (key) {
-                        var i = key.indexOf(NS_SEPARATOR);
-                        var nskey = key.slice(0, i);
-                        var attr = key.slice(i + 1);
-
-                        if (namespaces[nskey]) {
-                            el.setAttributeNS(namespaces[nskey], attr, attrs[key]);
-                        }
-                        else {
-                            el.setAttribute(key, attrs[key]);
-                        }
-                    });
-            });
+        if (domEl) {
+            fn(domEl);
+            forEach(domEl.querySelectorAll('[' + ATTR_KEY + ']'), fn);
+        }
     }
 };

index.js

@@ -34,7 +34,7 @@ module.exports = function (source) {
 
     if (params.attrs) {
         // easier than having to write json in the query
-        // if anyone wants to exploit it, its their build process
+        // if anyone wants to exploit it, it's their build process
         /*eslint no-eval:0*/
         eval('assign(attrs, ' + params.attrs + ');');
     }
@@ -49,26 +49,23 @@ module.exports = function (source) {
 
         var tagName = keys(result)[0];
         var root    = result[tagName];
-        var context = {};
-        var props   = sanitize(root, context).$ || {};
 
         if (tag) {
-            result[tag] = root;
+            root = result[tag] = root;
             delete result[tagName];
             tagName = tag;
-            props = {};
+            props = root.$ = {};
         }
 
-        props = assign(props, attrs);
+        var props = assign(sanitize(root).$ || {}, attrs);
 
         var xmlBuilder = new xml2js.Builder({ headless: true });
         var xmlSrc = xmlBuilder.buildObject(result);
         var component = tmpl({
             tagName:       tagName,
             displayName:   displayName,
-            initialProps:  props,
-            innerXml:      xmlSrc.split(/\n/).slice(1, -1).join('\n'),
-            context:       context
+            defaultProps:  props,
+            innerXml:      xmlSrc.split(/\n/).slice(1, -1).join('\n')
         });
 
         callback(null, component);

package.json

@@ -2,7 +2,7 @@
     "name": "svg-react-loader",
     "fullname": "SVG to React Loader",
     "description": "A Webpack Loader to turn SVGs into React Components",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "keywords": [
         "webpack",
         "loader",

test/test-test.js

@@ -1,5 +1,5 @@
 /*globals describe, it*/
-var loader = require('../');
+var loader = require('svg-react-loader');
 var babel  = require('babel-core');
 var fs     = require('fs');
 var path   = require('path');
@@ -50,6 +50,7 @@ describe('something', function () {
                 done();
             },
             resourcePath: filename
+            // resourceQuery: '?tag=foo&attrs={foo: \'bar\'}'
         });
     });
 });

utility/sanitize.js

@@ -1,84 +1,65 @@
 var keys = require('lodash/object/keys');
 var omit = require('lodash/object/omit');
-var pick = require('lodash/object/pick');
 
 var ATTR_KEY          = '$';
 var NS_SEPARATOR      = ':';
-var REF_TMPL          = 'xmlReactLoader-';
-var ROOT_REF          = REF_TMPL + 'root';
+var DATA_ATTR_KEY     = 'data-svgreactloader';
 var XML_NAMESPACE_KEY = 'xmlns';
 
 /**
  * Remove any non-jsx xml attributes from the given node and any of its child
  * nodes. Return the original node sanitized.
  *
- * The optional context argument can be used to get a mapping of reference
- * strings to unsafe attributes for that reference key.
- *
  * @param {Object} xmlNode
- * @param {Object} [context]
  * @returns {Object} the node that was given
  */
-module.exports = function sanitize (xmlNode, context) {
-    var attrs = xmlNode.$;
-    var unsafeAttrs =
-            attrs &&
-            pick(attrs, function (value, key) {
-                return !!~key.indexOf(NS_SEPARATOR);
-            });
-    var unsafeKeys = unsafeAttrs && keys(unsafeAttrs);
-    var isRoot = false;
+module.exports = function sanitize (xmlNode, namespaces) {
+    namespaces = namespaces || {};
 
-    // first time through?
-    if (!context || !context._) {
-        isRoot      = true;
-        context     = context || {};
-        context._   = { refCount: 0 };
-        context.ns  = context.ns || {};
-        context.map = context.map || {};
-    }
+    xmlNode.$ =
+        keys(xmlNode.$).
+        reduce(function (acc, key) {
+            var i      = key.indexOf(NS_SEPARATOR);
+            var hasSep = !!~i;
+            var ns     = hasSep && key.slice(0, i);
+            var attr   = hasSep ? key.slice(i + 1) : key;
+            var value  = xmlNode.$[key];
+            var nsKey  = hasSep ? ns : attr;
 
-    if (unsafeKeys && unsafeKeys.length) {
-        var refKey;
+            if (nsKey === XML_NAMESPACE_KEY && !hasSep) {
+                namespaces.xml = value;
+            }
+            else if (nsKey === XML_NAMESPACE_KEY) {
+                namespaces[attr] = value;
+            }
 
-        if (isRoot) {
-            refKey = ROOT_REF;
-        }
-        else {
-            refKey = REF_TMPL + context._.refCount++;
-        }
+            nsKey = nsKey === XML_NAMESPACE_KEY ? 'xml' : nsKey;
 
-        var namespaces = context.ns;
-        var map = context.map;
-        // determine if we have any namespace definitions
-        // add them to our internal references
-        // otherwise just flag them to be used later
-        unsafeKeys.
-            forEach(function (key) {
-                var i = key.indexOf(NS_SEPARATOR);
-                var ns = key.slice(0, i);
-                var attr = key.slice(i + 1);
+            if (ns && attr) {
+                acc[DATA_ATTR_KEY] = acc[DATA_ATTR_KEY] || [];
+                acc[DATA_ATTR_KEY].push([namespaces[nsKey], attr, value]);
+            }
+            else {
+                acc[key] = value;
+            }
 
-                if (ns === XML_NAMESPACE_KEY) {
-                    namespaces[attr] = unsafeAttrs[key];
-                }
-            });
+            return acc;
+        }, {});
 
-        xmlNode[ATTR_KEY] = omit(attrs, unsafeKeys);
-        xmlNode[ATTR_KEY].ref = refKey;
-        map[refKey] = unsafeAttrs;
+    if (xmlNode.$[DATA_ATTR_KEY]) {
+        xmlNode.$[DATA_ATTR_KEY] = JSON.stringify(xmlNode.$[DATA_ATTR_KEY]);
     }
 
     keys(omit(xmlNode, ATTR_KEY)).
         forEach(function (key) {
             var child = xmlNode[key];
             if (Array.isArray(child)) {
-                child.forEach(function (c) {
-                    sanitize(c, context);
+                child.forEach(function (child) {
+                    sanitize(child, namespaces);
                 });
             }
             else {
-                sanitize(xmlNode[key], context);
+                sanitize(child, namespaces);
             }
         });
 

utility/template.txt

@@ -6,13 +6,11 @@ module.exports = React.createClass({
     displayName: <%= JSON.stringify(displayName) %>,
 
     getDefaultProps () {
-        return <%= JSON.stringify(initialProps) %>;
+        return <%= JSON.stringify(defaultProps) %>;
     },
 
-    xmlReactLoader: <%= JSON.stringify(context) %>,
-
     componentDidMount () {
-        helpers.applyUnsafe(this);
+        helpers.applyXmlAttributes(this);
     },
 
     render () {