diff --git a/.gitignore b/.gitignore index 5148e52..bfcca05 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ logs *.log npm-debug.log* +package-lock.json # Runtime data pids *.pid diff --git a/lib/h.js b/lib/h.js index 8acd2d1..8f51cc4 100644 --- a/lib/h.js +++ b/lib/h.js @@ -11,6 +11,9 @@ * @function * @access public */ + +var xmlns = "http://www.w3.org/2000/svg"; + var H = function (argv) { if (!(this instanceof H)) { if (!(argv instanceof H)) { @@ -89,12 +92,24 @@ H.prototype.render = function (node, parent) { return node.el; }; +H.prototype.setAttribute = function(name, value) { + try { + if (this.el instanceof window.SVGElement) { + this.el.setAttributeNS(null, name, value); + } else { + this.el.setAttribute(name, value); + } + } catch(e) { + this.el.setAttribute(name, value); + } +}; + H.prototype.setProp = function (name, value) { if (typeof this.el !== 'undefined') { if (name === 'className') { - this.el.setAttribute('class', value); + this.setAttribute('class', value); } else if (name === 'style' && typeof value !== 'string') { - this.el.setAttribute('style', _stylePropToString(value)); + this.setAttribute('style', _stylePropToString(value)); } else if (name.match(/^on/)) { this.addEvent(name, value); } else if (name === 'ref') { @@ -102,10 +117,10 @@ H.prototype.setProp = function (name, value) { value(this.el); } } else if (typeof value === 'boolean' || value === 'true') { - this.el.setAttribute(name, value); + this.setAttribute(name, value); this.el[name] = Boolean(value); } else { - this.el.setAttribute(name, value); + this.setAttribute(name, value); } } @@ -227,9 +242,30 @@ var _createTextNode = function (text) { }; var createElement = function (node, parent) { - node.el = node.tag === 'text' - ? document.createTextNode(node.children) - : document.createElement(node.tag); +// node.el = node.tag === 'text' +// ? document.createTextNode(node.children) +// : document.createElement(node.tag); + + + switch (node.tag) { + case 'text': + node.el = document.createTextNode(node.children); + break; + case 'svg': + case 'g': + case 'circle': + case 'ellipse': + case 'line': + case 'path': + case 'polygon': + case 'polyline': + case 'rect': + node.el = document.createElementNS(xmlns, node.tag); + break; + default: + node.el = document.createElement(node.tag); + break; + } if (typeof node.props !== 'undefined') { node.setProps(node.props); diff --git a/package.json b/package.json index 556e8ea..5628eda 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "basic-virtual-dom", - "version": "0.3.3", + "version": "0.4.0", "description": "Basic virtual dom implementation", "main": "index.js", "files": [ @@ -10,14 +10,13 @@ "LICENSE" ], "directories": {}, - "dependencies": {}, "devDependencies": { "chai": "^3.5.0", "coveralls": "^2.11.15", - "eslint": "^3.11.1", - "jsdom": "^9.8.3", + "eslint": "^3.19.0", + "jsdom": "^9.12.0", "mocha": "^3.2.0", - "mocha-jsdom": "^1.1.0", + "mocha-jsdom": "~1.1.0", "nyc": "^10.0.0", "sinon": "^2.1.0" }, diff --git a/tests/fixtures/svg.js b/tests/fixtures/svg.js new file mode 100644 index 0000000..f12b194 --- /dev/null +++ b/tests/fixtures/svg.js @@ -0,0 +1,24 @@ +var h = require('../../').h; + +exports.a = + h('svg', { id: 'app'}, + h( + 'g', + null, + h('rect', { x: '40', y: '80', fill: 'blue' }), + h('rect', { x: '40', y: '80', fill: 'red' }), + h('rect', { x: '40', y: '80', fill: 'green' }) + ) +); + +exports.a = + h('svg', { id: 'app'}, + h( + 'g', + null, + h('rect', { x: '40', y: '80', fill: 'blue' }), + h('text', { x: '40', y: '80' }, 'text node') + ) +); + + diff --git a/tests/mocha-tests/svg.test.js b/tests/mocha-tests/svg.test.js new file mode 100644 index 0000000..8c990fd --- /dev/null +++ b/tests/mocha-tests/svg.test.js @@ -0,0 +1,24 @@ +var expect = require('chai').expect; +var sinon = require('sinon'); +var jsdom = require('mocha-jsdom'); + +var a = require('../fixtures/svg').a; +var d = require('../fixtures/svg').d; +var h = require('../../').h; + +describe('Test ', function() { + jsdom(); + + it('should create svg tree', function() { + expect(a).to.be.exists; + expect(a).to.be.an('object'); + expect(a.tag).to.be.equal('svg'); + expect(a.children).to.be.an('array'); + }); + + it('should create empty svg node', function() { + var empty = h('svg', null, ''); + expect(empty.tag).to.be.equal('svg'); + }); + +});