create-element-ns - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

elm.js

@@ -1,56 +0,46 @@
-var parse = require('./sel'),
-		is = require('./is'),
-		api = require('./api')
+var common = require('./common')
 
+var is = common.is,
+		parse = common.parseSelector,
+		namespaces = common.namespaces
+
 module.exports = elementFactory
 
 function elementFactory(config) {
-	var decorators = api.decorators
+	function create(/*[,sel][,opt][,cnt]*/) {
+		var cfg = assignL2({}, create)
 
-	function create(sel /*[,opt][,cnt]*/) {
-		var cfg = config ? copyKeys({}, config) : {},
-				el = getElement(sel, cfg),
-				cntIdx = 1
-
-		if (is.function(arguments[1])) {
-			++cntIdx
-			el = arguments[1](el)
-		}
-		else if (is.object(arguments[1])) {
-			++cntIdx
-			decorate(el, arguments[1])
-		}
-		if (cntIdx < arguments.length) {
-			var cnt = []
-			for (var i = cntIdx; i<arguments.length; ++i) {
-				var itm = arguments[i]
-				if (itm || itm === 0) concatTo(cnt, itm)
+		for (var i=0; i<arguments.length; ++i) {
+			var arg = arguments[i]
+			if (i === 0 && !is.node(cfg.element)) {
+				if (is.string(arg)) parse(arg, cfg)
+				else if (is.node(arg)) cfg.element = arg
+				else if (is.function(arg)) cfg.element = arg(cfg)
+				else if (Array.isArray(arg)) concatTo(cfg.children, arg)
+				else if (is.object(arg)) assignL2(cfg, arg)
 			}
-			if (cnt.length) decorators.children(el, null, cnt)
+			else {
+				if (Array.isArray(arg) || is.stringlike(arg) || is.node(arg) || is.function(arg)) {
+					cfg.children = concatTo(cfg.children || [], arg)
+				}
+				else if (is.object(arg)) assignL2(cfg, arg)
+			}
 		}
-		if (!cfg.partial) return el
-		delete cfg.partial
-		return function factory(d) { // TODO factories all the way down
-			return is.function(d) ? d(el.cloneNode(true)) : decorate(el, d)
+
+		if (cfg.element && cfg.element.tagName && !is.node(cfg.element)) {
+			var xmlns = cfg.element.xmlns || namespaces[cfg.element.prefix],
+					doc = common.document,
+					tag = cfg.element.tagName
+			cfg.element = xmlns ? doc.createElementNS(xmlns, tag) : doc.createElement(tag)
 		}
+		if (!cfg.partial && is.node(cfg.element)) return decorate(cfg.element, cfg)
+		cfg.partial = false
+		return elementFactory(cfg)
 	}
-	return create
+	return config ? assignL1(create, config) : create
 }
-function getElement(sel, cfg) {
-	if (is.node(sel)) return decorate(sel, cfg)
-	if (is.function(sel)) return decorate(sel(), cfg)
-
-	if (is.string(sel)) parse(sel, cfg)
-	else if (is.object(sel)) copyKeys(cfg, sel)
-
-	var xmlns = cfg.xmlns || api.namespaces[cfg.prefix],
-			tag = cfg.tagName || 'div',
-			doc = api.document,
-			el = xmlns ? doc.createElementNS(xmlns, tag) : doc.createElement(tag)
-	return decorate(el, cfg)
-}
 function decorate(el, cfg) {
-	var decorators = api.decorators
+	var decorators = common.decorators
 	for (var k in cfg) {
-		if (decorators[k]) decorators[k](el, k, cfg[k])
+		if (decorators[k]) decorators[k].call(cfg, el, k, cfg[k])
 	}
@@ -64,5 +54,15 @@ return el
 }
-function copyKeys(t, s) {
+function assignL1(t, s) {
 	for (var i=0, ks=Object.keys(s); i<ks.length; ++i) t[ks[i]] = s[ks[i]]
 	return t
 }
+function assignL2(t, s) {
+	for (var i=0, ks=Object.keys(s); i<ks.length; ++i) {
+		var k = ks[i]
+		t[k] = is.node(s[k]) ? s[k].cloneNode(false)
+			: Array.isArray(s[k]) ? s[k].slice()
+			: is.object(s[k]) ? assignL1({}, s[k])
+			: s[k]
+	}
+	return t
+}

index.js

@@ -1,35 +0,7 @@
-var elm = require('./elm'),
-		api = require('./api'),
-		is = require('./is'),
-		sel = require('./sel')
+var factory = require('./elm'),
+		common = require('./common')
 
 module.exports = {
-	api: setDocument,
-	ns: setNs,
-	sel: sel,
-	is: is,
-	factory: elm,
-	decorators: api.decorators,
-	html: {
-		el: elm(),
-		fn: elm({partial: true})
-	},
-	svg: {
-		el: elm({xmlns: api.namespaces.svg}),
-		fn: elm({xmlns: api.namespaces.svg, partial: true})
-	}
+	common: common,
+	createElement: factory()
 }
-function setDocument(doc) {
-	if (!doc) return api.document
-	api.document = doc
-}
-function setNs(pre, uri) {
-	switch(arguments.length) {
-		case 0: return api.namespaces
-		case 2: {
-			if (!uri) delete api.namespaces[pre]
-			api.namespaces[pre] = uri
-		}
-	}
-	return api.namespaces[pre]
-}

is.js

@@ -1,3 +0,1 @@
-var isArray = Array.isArray
-
 module.exports = {
@@ -8,8 +6,4 @@ node: isNode,
 	object: isObject,
-	array: isArray,
-	stringlike: stringLike,
-	eitherOr: eitherOr
-
+	stringlike: stringLike
 }
-
 function isNode(node) {
@@ -30,6 +24,1 @@ return node && node.nodeName && node.nodeType > 0
 }
-function eitherOr(itm) {
-	var c = itm === undefined ? undefined : itm === null ? null : itm.constructor || Object
-	for (var i=1; i<arguments.length; ++i) if (c === arguments[i]) return true
-	return false
-}

package.json

 {
   "name": "create-element-ns",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "dom createElement hyperscript with svg, namespace and selector support",
@@ -5,0 +5,0 @@ "keywords": [

readme.md

@@ -21,3 +21,3 @@ <!-- markdownlint-disable MD004 MD007 MD010 MD041 MD022 MD024 MD032 MD036 -->
 var divEl1 = createHtmlEl('div.c1#i1[style="color:blue"].c2', {onclick: function() {}}),
-    divEl2 = createHtmlEl('.i1', {style: {color: 'blue'}, props:{className: 'c1 c2', , onclick: function() {}}})
+    divEl2 = createHtmlEl('div.i1', {style: {color: 'blue'}, props:{className: 'c1 c2', , onclick: function() {}}})
 
@@ -30,7 +30,3 @@ // namespace in different ways
 // elementfactories to create multiple modified clones
-function dec(el) {
-  el.textContent = 'x'
-  return el
-}
-var pEl0 = pFac(dec),
+var pEl0 = pFac('p', {textContent: 'x', partial: true}),
     pEl1 = pFac({textContent: 'x'})
@@ -37,0 +33,0 @@ ```

sel.js

@@ -23,4 +23,7 @@ var markers = {
 module.exports = function parseSel(sel, def) {
-	if (!def) def = {attributes: {}} // [, tagName: ''][, xmlns: ''][, prefix: '']
-	else if (!def.attributes) def.attributes = {}
+	if (!def) def = {attributes: {}, element:{}} // [, tagName: ''][, xmlns: ''][, prefix: '']
+	else {
+		if (!def.attributes) def.attributes = {}
+		if (!def.element) def.element = {}
+	}
 
@@ -61,15 +64,16 @@ var ctx = {
 function setAttribute(res, ctx) {
-	if (ctx.k === 'xmlns') res.xmlns = ctx.v
+	if (ctx.k === 'xmlns') res.element.xmlns = ctx.v
 	else res.attributes[ctx.k] = ctx.v || true
 }
 function setTN(res, ctx) {
-	res.tagName = ctx.v
+	res.element.tagName = ctx.v
 }
 function checkTagNS(res) {
-	var tagIndex = res.tagName.indexOf(':')
+	var tagName = res.element.tagName,
+			tagIndex = tagName.indexOf(':')
 	if (tagIndex >= 0) {
-		res.prefix = res.tagName.slice(0, tagIndex)
-		res.tagName = res.tagName.slice(tagIndex+1)
+		res.element.prefix = tagName.slice(0, tagIndex)
+		res.element.tagName = tagName.slice(tagIndex+1)
 	}
 	return res
 }

tst/dom.js

 var jsdom = require('jsdom'),
 		ct = require('cotest'),
-		main = require('../index')
+		ceNS = require('../index')
 
-var htm = main.html.el,
-		svg = main.svg.el,
-		document = jsdom.jsdom(),
-		DOM = document.defaultView
+var document = jsdom.jsdom(),
+		DOM = document.defaultView,
+		htm = ceNS.createElement,
+		svg = htm({element: {xmlns: ceNS.common.namespaces.svg}, partial: true})
 
-main.api(document)
+ceNS.common.document = document
 
+ct('api', function() {
+	ct('===', typeof htm, 'function')
+	ct('===', typeof svg, 'function')
+})
 ct('html', function() {
 	var el = htm('div')
-	ct('===', el.nodeName.toLowerCase(), 'div')
-	ct('!!', el instanceof DOM.Node)
+	ct('===', el instanceof DOM.Node, true)
+	ct('===', typeof el, 'object')
+	//console.log(el)
+	//ct('===', el.nodeName.toLowerCase(), 'div')
 })
 ct('svg', function() {
 	var el = svg('svg')
-	ct('===', el.nodeName, 'svg')
+	ct('===', el.nodeName.toLowerCase(), 'svg')
 	ct('!!', el instanceof DOM.Node)
@@ -24,5 +30,7 @@ })
 	var el = svg('svg', svg('path[d=mypath]'))
-	ct('===', el.nodeName, 'svg')
+	ct('===', el.nodeName.toLowerCase(), 'svg')
 	ct('!!', el instanceof DOM.Node)
-	ct('===', el.firstChild.nodeName, 'path')
+	ct('===', el.childNodes.length, 1)
+	ct('===', el.firstChild instanceof DOM.Node, true)
+	//ct('===', el.firstChild.nodeName, 'path')
 })
@@ -50,3 +58,3 @@ ct('html text nodes', function() {
 ct('selectors', function() {
-	var el = htm('.c1#i1[style="color:blue"].c2')
+	var el = htm('div.c1#i1[style="color:blue"].c2')
 	ct('===', el.nodeName, 'DIV')
@@ -80,3 +88,3 @@ ct('===', el.id, 'i1')
 			el2 = svg('circle', {style: {'font-size':'150%', color:'blue'}}),
-			el3 = htm('', {style: {'font-size':'150%', color:'blue'}})
+			el3 = htm('div', {style: {'font-size':'150%', color:'blue'}})
 	ct('===', el0.getAttribute('style'), 'font-size:150%;color:blue;')
@@ -96,10 +104,5 @@ ct('===', el1.getAttribute('style'), 'font-size:150%;color:blue')
 ct('function decorators', function() {
-	var fac = main.html.fn,
-			el0 = fac('div')
-	function dec(el) {
-		el.textContent = 'x'
-		return el
-	}
-	ct('===', el0(dec).textContent, 'x')
-	ct('===', el0({p:{textContent: 'y'}}).textContent, 'y')
+	var fac = htm('p', {partial: true}),
+			el0 = fac({p:{textContent: 'y'}})
+	ct('===', el0.textContent, 'y')
 })
@@ -106,0 +109,0 @@ ct('forced properties and attributes', function() {

tst/sel.js

@@ -5,19 +5,19 @@ var ct = require('cotest')
 ct('single tag', function(){
-	ct('{==}', sel('div'), {tagName: 'div', attributes: {}})
-	ct('{==}', sel(''), {tagName: '', attributes: {}})
+	ct('{==}', sel('div'), {element: {tagName: 'div'}, attributes: {}})
+	ct('{==}', sel(''), {element: {tagName: ''}, attributes: {}})
 })
 ct('mixed classes and id', function(){
-	ct('{==}', sel('.c1#i1.c2'), {tagName: '', attributes: {id: 'i1', class: 'c1 c2'}})
-	ct('{==}', sel('div#i1.c1.c2'), {tagName: 'div', attributes: {id: 'i1', class: 'c1 c2'}})
-	ct('{==}', sel('div.c1.c2#i1'), {tagName: 'div', attributes: {id: 'i1', class: 'c1 c2'}})
-	ct('{==}', sel('..##..##'), {tagName: '', attributes: {id: ''}})
+	ct('{==}', sel('.c1#i1.c2'), {element: {tagName: ''}, attributes: {id: 'i1', class: 'c1 c2'}})
+	ct('{==}', sel('div#i1.c1.c2'), {element: {tagName: 'div'}, attributes: {id: 'i1', class: 'c1 c2'}})
+	ct('{==}', sel('div.c1.c2#i1'), {element: {tagName: 'div'}, attributes: {id: 'i1', class: 'c1 c2'}})
+	ct('{==}', sel('..##..##'), {element: {tagName: ''}, attributes: {id: ''}})
 })
 ct('mixed classes and id as attributes', function(){
-	ct('{==}', sel('.c1#i1.c2[id=i2][class=c3]'), {tagName: '', attributes: {id: 'i2', class: 'c3'}})
-	ct('{==}', sel('.c1#i1.c2[id="i2"][class="c3"]'), {tagName: '', attributes: {id: 'i2', class: 'c3'}})
-	ct('{==}', sel('div#i1[class=c3].c1.c2'), {tagName: 'div', attributes: {id: 'i1', class: 'c3 c1 c2'}})
-	ct('{==}', sel('div#i1[class="c3"].c1.c2'), {tagName: 'div', attributes: {id: 'i1', class: 'c3 c1 c2'}})
+	ct('{==}', sel('.c1#i1.c2[id=i2][class=c3]'), {element: {tagName: ''}, attributes: {id: 'i2', class: 'c3'}})
+	ct('{==}', sel('.c1#i1.c2[id="i2"][class="c3"]'), {element: {tagName: ''}, attributes: {id: 'i2', class: 'c3'}})
+	ct('{==}', sel('div#i1[class=c3].c1.c2'), {element: {tagName: 'div'}, attributes: {id: 'i1', class: 'c3 c1 c2'}})
+	ct('{==}', sel('div#i1[class="c3"].c1.c2'), {element: {tagName: 'div'}, attributes: {id: 'i1', class: 'c3 c1 c2'}})
 })
 ct('tag namespace prefix', function(){
-	ct('{==}', sel('svg:circle'), {prefix: 'svg', tagName: 'circle', attributes: {}})
+	ct('{==}', sel('svg:circle'), {element: {prefix: 'svg', tagName: 'circle'}, attributes: {}})
 })
@@ -24,0 +24,0 @@ ct('markers in attribute values', function() {

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

Improved metrics

Total package byte prevSize

16219

increased by0.82%

Worsened metrics

Lines of code

380

decreased by-4.76%

Number of lines in readme file

76

decreased by-5%

No dependency changes