vsvg - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

dist/vsvg.js

@@ -11,71 +11,15 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 }
-},{"./src/":2}],2:[function(require,module,exports){
-
+},{"./src/":3}],2:[function(require,module,exports){
 'use strict';
 
-var tags = require( './tags' ),
-    SvgNode = require( './svgNode' ),
-    parser = require( './parser' ),
-    methods = {};
+var startTag = /^<([-A-Za-z0-9_:]+)(.*?)(\/?)>/g, // match opening tag
+    endTag = /<\/([-A-Za-z0-9_:]+)[^>]*>/, // this just matches the first one
+    attr = /([-A-Za-z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // match tag attributes
 
-/*
-    runs and returns an object with all the tagNames eg. vsvg.style()
-*/
+exports.parse = parse;
 
-module.exports = ( function() {
-    tags.forEach( function( tagName ) {
-        methods[ tagName ] = SvgNode.bind( null, tagName );
-    } );
-    return methods;
-}( ) );
+function makeArray( arr ) {
+    return Array.prototype.slice.call( arr, 0 );
+}
 
-var _eachTag =
-methods._eachTag = function _eachTag( tag ) {
- 
-    var elem;
-
-    if ( tag.tagName ) {
-
-        elem = methods[ tag.tagName ]( tag.attributes );
-        if ( elem.children ) {    
-
-            for( var i = 0; i < tag.children.length; i += 1 ) {
-
-                var _elem = _eachTag( tag.children[ i ] );
-
-                if ( typeof _elem === 'string' ) {
-
-                    elem.innerText = _elem;
-                } else {
-
-                    elem.appendChild( _elem );
-                }
-            }
-        }
-
-        return elem;
-    }
-
-    return tag.text;
-};
-
-methods.parse = function( svg ) {
-    var parsedSVG;
-    try {
-        parsedSVG = parser.parse( svg );
-    } catch ( e ) {
-        return null;
-    }
-    return parsedSVG.map( _eachTag );
-};
-},{"./parser":3,"./svgNode":4,"./tags":5}],3:[function(require,module,exports){
-'use strict';
-
-var startTag = /^<([-A-Za-z0-9_]+)(.*?)(\/?)>/g, // match opening tag
-    endTag = /<\/([-A-Za-z0-9_]+)[^>]*>/, // this just matches the first one
-    attr = /([-A-Za-z0-9_]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g, // match tag attributes
-    utils = require( './utils' ); 
-
-exports.parse = parse;
-
 /*
@@ -158,3 +102,3 @@ getAttributes - turns an array of attributes into a key value object
     function getArray( position, arr ) {
-        var _position = utils.makeArray( position );
+        var _position = makeArray( position );
         if ( _position.length === 1 ) {
@@ -207,3 +151,3 @@ return arr;
     var tags = [],
-        position = [ 0 ], // initial position
+        position = [ -1 ], // initial position
         openTag, 
@@ -275,5 +219,8 @@ attributes,
                 // eg. [ 0, 0, 1 ] this is a map of where this tag should be at
+            } else {
+                position[ 0 ] += 1;
             }
 
-            tag.position = utils.makeArray( position );
+
+            tag.position = makeArray( position );
             tags.push( tag ); // push the tag
@@ -291,8 +238,131 @@
 }
-},{"./utils":7}],4:[function(require,module,exports){
+},{}],3:[function(require,module,exports){
 
 'use strict';
 
+var tags = require( './tags' ),
+    SvgNode = require( './svgNode' ),
+    parser = require( 'vsvg-parser' ),
+    methods = {};
+
+/*
+    runs and returns an object with all the tagNames eg. vsvg.style()
+*/
+
+module.exports = ( function() {
+    tags.forEach( function( tagName ) {
+        methods[ tagName ] = SvgNode.bind( null, tagName );
+    } );
+    return methods;
+}( ) );
+
+
+/*
+    vsvg::_eachTag - utility to loop through the children of results of a parsed svg 
+    string to turn the structure into vsvg tags.
+
+    params
+        tag { Object } - a tag object returned from parser.parse
+
+    returns
+        elem { Object } - a svgNode or textNode
+*/
+
+var _eachTag =
+methods._eachTag = function _eachTag( tag ) {
+ 
+    var elem;
+
+    if ( tag.tagName && methods[ tag.tagName ] ) {
+
+        elem = methods[ tag.tagName ]( tag.attributes );
+        if ( elem.children ) {    
+
+            for( var i = 0; i < tag.children.length; i += 1 ) {
+
+                var _elem = _eachTag( tag.children[ i ] );
+
+                if ( typeof _elem === 'string' ) {
+
+                    elem.innerText = _elem;
+                } else {
+
+                    elem.appendChild( _elem );
+                }
+            }
+        }
+
+        return elem;
+    }
+
+    return tag.text || '';
+};
+
+/*
+    vsvg::parse - A wrapper around parser.parse to create vsvg Elements
+    out of the return of parser.parse
+
+    params
+        svg { String } - a compiled string version of a svg to be parsed
+
+    returns 
+        tags { Array } - an array of svgNodes
+*/
+var parse =
+methods.parse = function( svg ) {
+    var parsedSVG;
+    try {
+        parsedSVG = parser.parse( svg );
+    } catch ( e ) {
+        return null;
+    }
+    return parsedSVG.map( _eachTag );
+};
+
+/*
+    vsvg::_addNodeToVNode - adds regular DOM node to virtual node to allow for
+    method proxing to actual dom nodes. Als o recusivly jumps into children and 
+    attempts to add those nodes as well.
+
+    params 
+        node { Object } - a DOM node
+        vNode { object } - a virtual svgNode
+*/
+
+var addNodeToVNode =
+methods._addNodeToVNode = function( node, vNode ) {
+    
+    function eachChild( _vNode, index ) {
+        addNodeToVNode( node.children[ index ], _vNode ); // recursivly jump down tree
+    }
+
+    vNode.children.forEach( eachChild ); // loop through all the children
+    vNode._node = node;// attach node to vNode
+};
+
+/*
+    vsvg::mount - mounts to a actual dom node and adds children  dom nodes to virtual tree
+    as well.
+
+    params 
+        el { Object } - an entry point DOM node
+
+    returns
+        elem { Object } - a virtual representation of the DOM node
+*/
+
+methods.mount = function( el ) {
+    var svg = el.outerHTML,
+        tagTree = parse( svg );
+
+    addNodeToVNode( el, tagTree[ 0 ] ); // start walking the parsed tree 
+    return tagTree[ 0 ];
+};
+},{"./svgNode":4,"./tags":5,"vsvg-parser":2}],4:[function(require,module,exports){
+
+'use strict';
+
 var utils = require( './utils' ),
-    TextNode = require( './textNode' );
+    TextNode = require( './textNode' ),
+    namespace = 'http://www.w3.org/2000/svg';
 
@@ -319,7 +389,13 @@ module.exports = SvgNode;
 
+    attributes = Object.create( attributes || {} );
+
     this.guid = utils.guid();
     this.tagName = tagName;
     this._children = [];
-    this._attributes = Object.create( attributes || {} );
-    this.styles = {};
+    this.styles = attributes.style ? utils.styleToObject( attributes.style ) : {};
+    attributes.style = this.styles;
+    this._attributes = attributes;
+    if ( typeof document === 'object' ) { // auto create element if in client
+        this._node = document.createElementNS( namespace, tagName );
+    }
 }
@@ -340,2 +416,5 @@
         this._children.splice( index, 0, elem );
+        if ( this._node && elem._node && refElem._node ) {
+            this._node.insertBefore( elem._node, refElem._node );
+        }
     },
@@ -356,2 +435,5 @@
         this._children.splice( index, 1 ); 
+        if ( this._node && elem._node ) {
+            this._node.removeChild( elem._node );
+        }
     },
@@ -373,2 +455,5 @@
         this._children.splice( index, 1, replaceElem ); 
+        if ( this._node && elem._node && replaceElem._node ) {
+            this._node.replaceChild( replaceElem._node, elem._node );
+        }
     },
@@ -386,2 +471,5 @@
         this._children.push( elem );
+        if ( this._node && elem._node ) {
+            this._node.appendChild( elem._node );
+        }
     },
@@ -468,2 +556,5 @@
         this._attributes[ key ] = value;
+        if ( this._node ) {
+            this._node.setAttribute( key, value );
+        }
     },
@@ -512,2 +603,20 @@
     /*
+        SvgNode::innerHTML [ setter ]
+        params 
+            html { String } - compiled version of element's children
+    */
+
+    set  innerHTML ( html ) {
+        var vsvg = require( '../' ); // defer require so everything is loaded
+
+        if ( this._node ) {
+            this._node.innerHTML = html;
+            this._children = vsvg.mount( this._node ).children;
+        }
+        else {
+            this._children = vsvg.parse( html ); 
+        }
+    },
+
+    /*
         SvgNode::innerText [ getter ]
@@ -535,5 +644,8 @@ returns
         } ) ); // style tags need no escape
+        if ( this._node ) {
+            this._node.innerText = value;
+        }
     }
 };
-},{"./textNode":6,"./utils":7}],5:[function(require,module,exports){
+},{"../":1,"./textNode":6,"./utils":7}],5:[function(require,module,exports){
 
@@ -692,2 +804,29 @@ 'use strict';
 /*
+    styleToObject - decompilies key:value to { key: value };
+    params
+        styles { String } - compiled sting with css declarations
+    retruns
+        ret { Object } - object of style declarations
+*/
+
+exports.styleToObject = function styleToObject( styles ) {
+    var ret = { };
+
+    if ( typeof styles === 'object' ) {
+        return styles;
+    }
+
+    styles.split( ';' ).map( keyVal ).forEach( addToReturn );
+
+    function addToReturn ( keyval ) {
+        ret[ keyval[ 0 ] ] = keyval[ 1 ];
+    }
+
+    function keyVal( str ) {
+        return str.trim().split( ':' );
+    }
+    return ret;
+};
+
+/*
     objToAttribute - compiles { key: value } to key="value"
@@ -708,3 +847,5 @@ params
         value = attr === 'style' ? objToStyles( attributes[ attr ] ) : attributes[ attr ];
-        ret += attr + '="' + value + '" ';
+        if ( attr !== 'style' || value ) {
+            ret += attr + '="' + value + '" ';
+        }
     }
@@ -711,0 +852,0 @@ return ret;

examples/basics.js

 var vsvg = require( '../index' ),
-    util = require( 'util' ),
     svg = vsvg.svg({ // creating svg
@@ -20,17 +19,10 @@ width: '130', // attributes
         }
-    }),
-    group = vsvg.g({
-        class: 'innerHTML test'
     });
 
 style.innerText = '.my-class{ stoke-width: 5px; }';
-group.innerHTML = '<g><line /><span>Hello</span></g>';
 
 svg.appendChild( line ); // append node to another node
 svg.insertBefore( style, line ); // append node before another node
-svg.appendChild( group );
 
 console.log( svg.innerHTML );
-console.log( svg.outerHTML ); //<svg xmlns="http://www.w3.org/2000/svg" width="130" height="120" class="bar" ><style  type="text/css" >.my-class{ stoke-width: 5px; }</style><line  x1="0" y1="0" x2="100" y2="100" class="my-class" style="stroke:black;" ></line></svg>
-
-// console.log( util.inspect( svg, { depth: Infinity, colors: true } ) );
+console.log( svg.outerHTML ); //<svg xmlns="http://www.w3.org/2000/svg" width="130" height="120" class="bar" ><style  type="text/css" >.my-class{ stoke-width: 5px; }</style><line  x1="0" y1="0" x2="100" y2="100" class="my-class" style="stroke:black;" ></line></svg>

package.json

 {
   "name": "vsvg",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A minimal implementation of a vdom that allows for quick server or client side rendering of svg's",
   "main": "index.js",
   "scripts": {
-    "test": "npm run lint && faucet",
+    "test": "npm run lint && npm run servertest && npm run clienttest",
+    "clienttest": "browserify test/*.js | tape-run -b firefox",
+    "servertest": "faucet",
     "lint": "jshint ./src/*",
-    "dist": "npm test && browserify index.js -o dist/vsvg.js"
+    "build": "browserify index.js -o dist/vsvg.js",
+    "dist": "npm test && npm run build"
   },
@@ -31,3 +34,4 @@ "repository": {
     "jshint": "^2.5.10",
-    "tape": "^3.0.3"
+    "tape": "^3.0.3",
+    "tape-run": "^0.3.0"
   },
@@ -34,0 +38,0 @@ "dependencies": {

src/index.js

@@ -20,2 +20,14 @@
 
+
+/*
+    vsvg::_eachTag - utility to loop through the children of results of a parsed svg 
+    string to turn the structure into vsvg tags.
+
+    params
+        tag { Object } - a tag object returned from parser.parse
+
+    returns
+        elem { Object } - a svgNode or textNode
+*/
+
 var _eachTag =
@@ -51,2 +63,13 @@ methods._eachTag = function _eachTag( tag ) {
 
+/*
+    vsvg::parse - A wrapper around parser.parse to create vsvg Elements
+    out of the return of parser.parse
+
+    params
+        svg { String } - a compiled string version of a svg to be parsed
+
+    returns 
+        tags { Array } - an array of svgNodes
+*/
+var parse =
 methods.parse = function( svg ) {
@@ -60,2 +83,42 @@ var parsedSVG;
     return parsedSVG.map( _eachTag );
+};
+
+/*
+    vsvg::_addNodeToVNode - adds regular DOM node to virtual node to allow for
+    method proxing to actual dom nodes. Als o recusivly jumps into children and 
+    attempts to add those nodes as well.
+
+    params 
+        node { Object } - a DOM node
+        vNode { object } - a virtual svgNode
+*/
+
+var addNodeToVNode =
+methods._addNodeToVNode = function( node, vNode ) {
+    
+    function eachChild( _vNode, index ) {
+        addNodeToVNode( node.children[ index ], _vNode ); // recursivly jump down tree
+    }
+
+    vNode.children.forEach( eachChild ); // loop through all the children
+    vNode._node = node;// attach node to vNode
+};
+
+/*
+    vsvg::mount - mounts to a actual dom node and adds children  dom nodes to virtual tree
+    as well.
+
+    params 
+        el { Object } - an entry point DOM node
+
+    returns
+        elem { Object } - a virtual representation of the DOM node
+*/
+
+methods.mount = function( el ) {
+    var svg = el.outerHTML,
+        tagTree = parse( svg );
+
+    addNodeToVNode( el, tagTree[ 0 ] ); // start walking the parsed tree 
+    return tagTree[ 0 ];
 };

src/svgNode.js

@@ -5,3 +5,4 @@
 var utils = require( './utils' ),
-    TextNode = require( './textNode' );
+    TextNode = require( './textNode' ),
+    namespace = 'http://www.w3.org/2000/svg';
 
@@ -36,2 +37,5 @@ module.exports = SvgNode;
     this._attributes = attributes;
+    if ( typeof document === 'object' ) { // auto create element if in client
+        this._node = document.createElementNS( namespace, tagName );
+    }
 }
@@ -52,2 +56,5 @@
         this._children.splice( index, 0, elem );
+        if ( this._node && elem._node && refElem._node ) {
+            this._node.insertBefore( elem._node, refElem._node );
+        }
     },
@@ -68,2 +75,5 @@
         this._children.splice( index, 1 ); 
+        if ( this._node && elem._node ) {
+            this._node.removeChild( elem._node );
+        }
     },
@@ -85,2 +95,5 @@
         this._children.splice( index, 1, replaceElem ); 
+        if ( this._node && elem._node && replaceElem._node ) {
+            this._node.replaceChild( replaceElem._node, elem._node );
+        }
     },
@@ -98,2 +111,5 @@
         this._children.push( elem );
+        if ( this._node && elem._node ) {
+            this._node.appendChild( elem._node );
+        }
     },
@@ -180,2 +196,5 @@
         this._attributes[ key ] = value;
+        if ( this._node ) {
+            this._node.setAttribute( key, value );
+        }
     },
@@ -231,3 +250,10 @@
         var vsvg = require( '../' ); // defer require so everything is loaded
-        this._children = vsvg.parse( html ); 
+
+        if ( this._node ) {
+            this._node.innerHTML = html;
+            this._children = vsvg.mount( this._node ).children;
+        }
+        else {
+            this._children = vsvg.parse( html ); 
+        }
     },
@@ -258,3 +284,6 @@
         } ) ); // style tags need no escape
+        if ( this._node ) {
+            this._node.innerText = value;
+        }
     }
 };

test/svg.spec.js

@@ -70,2 +70,3 @@ var test = require( 'tape' ),
     svg.appendChild( group );
+
     svg.replaceChild( group, group2 );
@@ -177,3 +178,3 @@
 
-    svg.innerHTML = '<g foo="bar"><line /><line /></g>';
+    svg.innerHTML = '<g foo="bar"><line></line><line></line></g>';
 
@@ -180,0 +181,0 @@ t.equals( svg.children.length, 1, 'svg gets one child from innerHTML' );

No alert changes

Improved metrics

Total package byte prevSize

106286

increased by6.94%

Number of package files

29

increased by3.57%

Lines of code

1684

increased by12.04%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes