Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
babel-plugin-jsx-dom-expressions
Advanced tools
babel-plugin-jsx-dom-expressions - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
@@ -374,3 +374,3 @@ var NOMATCH = -1, | ||
| function appendNodes(parent, array) { | ||
| function appendNodes(parent, array, marker) { | ||
| for (let i = 0, len = array.length; i < len; i++) { | ||
@@ -380,6 +380,16 @@ let node = array[i]; | ||
| node = array[i] = document.createTextNode(node); | ||
| parent.appendChild(node); | ||
| parent.insertBefore(node, marker); | ||
| } | ||
| } | ||
| function clearAll(parent, current, marker) { | ||
| if (!marker) return parent.textContent = ''; | ||
| if (Array.isArray(current)) { | ||
| for (let i = 0; i < current.length; i++) { | ||
| parent.removeChild(current[i]); | ||
| } | ||
| } else if (current != null && current != '') parent.removeChild(marker.previousSibling); | ||
| return ''; | ||
| } | ||
| function model(el) { | ||
@@ -394,32 +404,40 @@ let m = el.model, a = el.action, r; | ||
| function singleExpression(parent, value, current) { | ||
| function insertExpression(parent, value, current, marker) { | ||
| if (value === current) return current; | ||
| parent = (marker && marker.parentNode) || parent; | ||
| const t = typeof value; | ||
| if (t === 'string') { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| } else if ('number' === t) { | ||
| value = value.toString(); | ||
| if (current !== "" && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| if (t === 'string' || t === 'number') { | ||
| if (t === 'number') value = value.toString(); | ||
| if (marker) { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = marker.previousSibling.data = value; | ||
| } else { | ||
| const node = document.createTextNode(value); | ||
| if (current !== '' && current != null) { | ||
| parent.replaceChild(node, marker.previousSibling); | ||
| } else parent.insertBefore(node, marker); | ||
| } | ||
| } else { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| } | ||
| } else if (value == null || value === '' || t === 'boolean') { | ||
| current = parent.textContent = ''; | ||
| current = clearAll(parent, current, marker); | ||
| } else if (t === 'function') { | ||
| wrap(function() { current = singleExpression(parent, value(), current); }); | ||
| wrap(function() { current = insertExpression(parent, value(), current, marker); }); | ||
| } else if (value instanceof Node) { | ||
| if (Array.isArray(current)) { | ||
| if (current.length === 0) { | ||
| parent.appendChild(value); | ||
| parent.insertBefore(value, marker); | ||
| } else if (current.length === 1) { | ||
| parent.replaceChild(value, current[0]); | ||
| } else { | ||
| parent.textContent = ''; | ||
| clearAll(parent, current, marker); | ||
| parent.appendChild(value); | ||
| } | ||
| } else if (current == null || current === '') { | ||
| parent.appendChild(value); | ||
| parent.insertBefore(value, marker); | ||
| } else { | ||
| parent.replaceChild(value, parent.firstChild); | ||
| parent.replaceChild(value, (marker && marker.previousSibling) || parent.firstChild); | ||
| } | ||
@@ -430,14 +448,14 @@ current = value; | ||
| if (array.length === 0) { | ||
| parent.textContent = ''; | ||
| clearAll(parent, current, marker); | ||
| } else { | ||
| if (Array.isArray(current)) { | ||
| if (current.length === 0) { | ||
| appendNodes(parent, array); | ||
| appendNodes(parent, array, marker); | ||
| } else { | ||
| reconcileArrays(parent, current, array); | ||
| reconcileArrays(parent, current, array, !!marker); | ||
| } | ||
| } else if (current == null || current === '') { | ||
| appendNodes(parent, array); | ||
| appendNodes(parent, array, marker); | ||
| } else { | ||
| reconcileArrays(parent, [parent.firstChild], array); | ||
| reconcileArrays(parent, [(marker && marker.previousSibling) || parent.firstChild], array, !!marker); | ||
| } | ||
@@ -453,83 +471,10 @@ } | ||
| function multipleExpressions(parent, value, nodes) { | ||
| let marker = null; | ||
| const t = typeof value; | ||
| parent = (nodes[0] && nodes[0].parentNode) ? nodes[0].parentNode : parent; | ||
| if (t === 'string' || t === 'number') { | ||
| if (nodes[0].nodeType === 3) { | ||
| nodes[0].data = value.toString(); | ||
| marker = nodes[0]; | ||
| } else { | ||
| value = document.createTextNode(value.toString()); | ||
| if (nodes[0]) { | ||
| parent.replaceChild(value, nodes[0]); | ||
| } else parent.appendChild(value); | ||
| nodes[0] = marker = value; | ||
| } | ||
| } else if (t === 'function') { | ||
| wrap(function() { nodes = multipleExpressions(parent, value(), nodes); }); | ||
| marker = nodes[nodes.length - 1]; | ||
| } else if (value instanceof Node) { | ||
| if (nodes[0]) { | ||
| if (nodes[0] !== value) parent.replaceChild(value, nodes[0]); | ||
| } else parent.appendChild(value); | ||
| nodes[0] = marker = value; | ||
| } else if (Array.isArray(value)) { | ||
| const array = normalizeIncomingArray([], value); | ||
| if (array.length) { | ||
| if (nodes.length === 1) { | ||
| let next = nodes[0].nextSibling; | ||
| nodes[0].remove(); | ||
| for (let i = 0, len = array.length; i < len; i++) { | ||
| let node = array[i]; | ||
| if (!(node instanceof Node)) | ||
| node = nodes[i] = document.createTextNode(node); | ||
| parent.insertBefore(node, next); | ||
| nodes[i] = node; | ||
| } | ||
| marker = nodes[array.length - 1]; | ||
| } else { | ||
| reconcileArrays(parent, nodes, array, true); | ||
| nodes = array; | ||
| marker = nodes[nodes.length - 1]; | ||
| } | ||
| } | ||
| } | ||
| // handle nulls | ||
| if (marker == null) { | ||
| if (nodes[0] === parent.firstChild && nodes.length > 1 && nodes[nodes.length - 1] === parent.lastChild) { | ||
| parent.textContent = ''; | ||
| value = document.createTextNode(''); | ||
| parent.appendChild(value); | ||
| marker = nodes[0] = value; | ||
| nodes.length = 1; | ||
| } else if (nodes[0].nodeType === 3) { | ||
| nodes[0].data = ''; | ||
| marker = nodes[0]; | ||
| } else { | ||
| value = document.createTextNode(''); | ||
| if (nodes[0]) | ||
| parent.replaceChild(value, nodes[0]); | ||
| else parent.appendChild(value); | ||
| marker = nodes[0] = value; | ||
| } | ||
| } | ||
| // trim extras | ||
| let node; | ||
| while (marker !== (node = nodes[nodes.length - 1])) { | ||
| parent.removeChild(node); | ||
| nodes.length = nodes.length - 1; | ||
| } | ||
| return nodes; | ||
| } | ||
| return Object.assign({ | ||
| insert(parent, accessor, init) { | ||
| if (typeof accessor !== 'function') return singleExpression(parent, accessor, init); | ||
| wrap((current = init) => singleExpression(parent, accessor(), current)); | ||
| if (typeof accessor !== 'function') return insertExpression(parent, accessor, init); | ||
| wrap((current = init) => insertExpression(parent, accessor(), current)); | ||
| }, | ||
| insertM(parent, accessor, init) { | ||
| if (typeof accessor !== 'function') return multipleExpressions(parent, accessor, init); | ||
| wrap((current = init) => multipleExpressions(parent, accessor(), current)); | ||
| insertM(parent, accessor, init, marker) { | ||
| if (typeof accessor !== 'function') return insertExpression(parent, accessor, init, marker); | ||
| wrap((current = init) => insertExpression(parent, accessor(), current, marker)); | ||
| }, | ||
@@ -536,0 +481,0 @@ addEventListener(node, eventName, handler) { |
149
lib/index.js
@@ -382,3 +382,3 @@ 'use strict'; | ||
| function appendNodes(parent, array) { | ||
| function appendNodes(parent, array, marker) { | ||
| for (let i = 0, len = array.length; i < len; i++) { | ||
@@ -388,6 +388,16 @@ let node = array[i]; | ||
| node = array[i] = document.createTextNode(node); | ||
| parent.appendChild(node); | ||
| parent.insertBefore(node, marker); | ||
| } | ||
| } | ||
| function clearAll(parent, current, marker) { | ||
| if (!marker) return parent.textContent = ''; | ||
| if (Array.isArray(current)) { | ||
| for (let i = 0; i < current.length; i++) { | ||
| parent.removeChild(current[i]); | ||
| } | ||
| } else if (current != null && current != '') parent.removeChild(marker.previousSibling); | ||
| return ''; | ||
| } | ||
| function model(el) { | ||
@@ -402,32 +412,40 @@ let m = el.model, a = el.action, r; | ||
| function singleExpression(parent, value, current) { | ||
| function insertExpression(parent, value, current, marker) { | ||
| if (value === current) return current; | ||
| parent = (marker && marker.parentNode) || parent; | ||
| const t = typeof value; | ||
| if (t === 'string') { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| } else if ('number' === t) { | ||
| value = value.toString(); | ||
| if (current !== "" && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| if (t === 'string' || t === 'number') { | ||
| if (t === 'number') value = value.toString(); | ||
| if (marker) { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = marker.previousSibling.data = value; | ||
| } else { | ||
| const node = document.createTextNode(value); | ||
| if (current !== '' && current != null) { | ||
| parent.replaceChild(node, marker.previousSibling); | ||
| } else parent.insertBefore(node, marker); | ||
| } | ||
| } else { | ||
| if (current !== '' && typeof current === 'string') { | ||
| current = parent.firstChild.data = value; | ||
| } else current = parent.textContent = value; | ||
| } | ||
| } else if (value == null || value === '' || t === 'boolean') { | ||
| current = parent.textContent = ''; | ||
| current = clearAll(parent, current, marker); | ||
| } else if (t === 'function') { | ||
| wrap(function() { current = singleExpression(parent, value(), current); }); | ||
| wrap(function() { current = insertExpression(parent, value(), current, marker); }); | ||
| } else if (value instanceof Node) { | ||
| if (Array.isArray(current)) { | ||
| if (current.length === 0) { | ||
| parent.appendChild(value); | ||
| parent.insertBefore(value, marker); | ||
| } else if (current.length === 1) { | ||
| parent.replaceChild(value, current[0]); | ||
| } else { | ||
| parent.textContent = ''; | ||
| clearAll(parent, current, marker); | ||
| parent.appendChild(value); | ||
| } | ||
| } else if (current == null || current === '') { | ||
| parent.appendChild(value); | ||
| parent.insertBefore(value, marker); | ||
| } else { | ||
| parent.replaceChild(value, parent.firstChild); | ||
| parent.replaceChild(value, (marker && marker.previousSibling) || parent.firstChild); | ||
| } | ||
@@ -438,14 +456,14 @@ current = value; | ||
| if (array.length === 0) { | ||
| parent.textContent = ''; | ||
| clearAll(parent, current, marker); | ||
| } else { | ||
| if (Array.isArray(current)) { | ||
| if (current.length === 0) { | ||
| appendNodes(parent, array); | ||
| appendNodes(parent, array, marker); | ||
| } else { | ||
| reconcileArrays(parent, current, array); | ||
| reconcileArrays(parent, current, array, !!marker); | ||
| } | ||
| } else if (current == null || current === '') { | ||
| appendNodes(parent, array); | ||
| appendNodes(parent, array, marker); | ||
| } else { | ||
| reconcileArrays(parent, [parent.firstChild], array); | ||
| reconcileArrays(parent, [(marker && marker.previousSibling) || parent.firstChild], array, !!marker); | ||
| } | ||
@@ -461,83 +479,10 @@ } | ||
| function multipleExpressions(parent, value, nodes) { | ||
| let marker = null; | ||
| const t = typeof value; | ||
| parent = (nodes[0] && nodes[0].parentNode) ? nodes[0].parentNode : parent; | ||
| if (t === 'string' || t === 'number') { | ||
| if (nodes[0].nodeType === 3) { | ||
| nodes[0].data = value.toString(); | ||
| marker = nodes[0]; | ||
| } else { | ||
| value = document.createTextNode(value.toString()); | ||
| if (nodes[0]) { | ||
| parent.replaceChild(value, nodes[0]); | ||
| } else parent.appendChild(value); | ||
| nodes[0] = marker = value; | ||
| } | ||
| } else if (t === 'function') { | ||
| wrap(function() { nodes = multipleExpressions(parent, value(), nodes); }); | ||
| marker = nodes[nodes.length - 1]; | ||
| } else if (value instanceof Node) { | ||
| if (nodes[0]) { | ||
| if (nodes[0] !== value) parent.replaceChild(value, nodes[0]); | ||
| } else parent.appendChild(value); | ||
| nodes[0] = marker = value; | ||
| } else if (Array.isArray(value)) { | ||
| const array = normalizeIncomingArray([], value); | ||
| if (array.length) { | ||
| if (nodes.length === 1) { | ||
| let next = nodes[0].nextSibling; | ||
| nodes[0].remove(); | ||
| for (let i = 0, len = array.length; i < len; i++) { | ||
| let node = array[i]; | ||
| if (!(node instanceof Node)) | ||
| node = nodes[i] = document.createTextNode(node); | ||
| parent.insertBefore(node, next); | ||
| nodes[i] = node; | ||
| } | ||
| marker = nodes[array.length - 1]; | ||
| } else { | ||
| reconcileArrays(parent, nodes, array, true); | ||
| nodes = array; | ||
| marker = nodes[nodes.length - 1]; | ||
| } | ||
| } | ||
| } | ||
| // handle nulls | ||
| if (marker == null) { | ||
| if (nodes[0] === parent.firstChild && nodes.length > 1 && nodes[nodes.length - 1] === parent.lastChild) { | ||
| parent.textContent = ''; | ||
| value = document.createTextNode(''); | ||
| parent.appendChild(value); | ||
| marker = nodes[0] = value; | ||
| nodes.length = 1; | ||
| } else if (nodes[0].nodeType === 3) { | ||
| nodes[0].data = ''; | ||
| marker = nodes[0]; | ||
| } else { | ||
| value = document.createTextNode(''); | ||
| if (nodes[0]) | ||
| parent.replaceChild(value, nodes[0]); | ||
| else parent.appendChild(value); | ||
| marker = nodes[0] = value; | ||
| } | ||
| } | ||
| // trim extras | ||
| let node; | ||
| while (marker !== (node = nodes[nodes.length - 1])) { | ||
| parent.removeChild(node); | ||
| nodes.length = nodes.length - 1; | ||
| } | ||
| return nodes; | ||
| } | ||
| return Object.assign({ | ||
| insert(parent, accessor, init) { | ||
| if (typeof accessor !== 'function') return singleExpression(parent, accessor, init); | ||
| wrap((current = init) => singleExpression(parent, accessor(), current)); | ||
| if (typeof accessor !== 'function') return insertExpression(parent, accessor, init); | ||
| wrap((current = init) => insertExpression(parent, accessor(), current)); | ||
| }, | ||
| insertM(parent, accessor, init) { | ||
| if (typeof accessor !== 'function') return multipleExpressions(parent, accessor, init); | ||
| wrap((current = init) => multipleExpressions(parent, accessor(), current)); | ||
| insertM(parent, accessor, init, marker) { | ||
| if (typeof accessor !== 'function') return insertExpression(parent, accessor, init, marker); | ||
| wrap((current = init) => insertExpression(parent, accessor(), current, marker)); | ||
| }, | ||
@@ -792,3 +737,3 @@ addEventListener(node, eventName, handler) { | ||
| ); | ||
| results.exprs.push(t.expressionStatement(t.callExpression(t.identifier(`${moduleName}.insertM`), [results.id, child.exprs[0], t.arrayExpression([exprId])]))); | ||
| results.exprs.push(t.expressionStatement(t.callExpression(t.identifier(`${moduleName}.insertM`), [results.id, child.exprs[0], t.nullLiteral(), exprId]))); | ||
| tempPath = exprId.name; | ||
@@ -795,0 +740,0 @@ i++; |
| { | ||
| "name": "babel-plugin-jsx-dom-expressions", | ||
| "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "author": "Ryan Carniato", | ||
@@ -6,0 +6,0 @@ "license": "MIT", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-6.17%
51691
- Lines of code
- decreased by-8.35%
1185
No dependency changes