jsx-dom - npm Package Compare versions

Comparing version 3.0.0 to 4.0.1

dist/index.cjs.js

@@ -5,124 +5,125 @@ 'use strict';
 
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+};
+
 function isElement(val) {
-	return val && typeof val.nodeType === 'number';
+    return val && typeof val.nodeType === 'number';
 }
-
 function isString(val) {
-	return typeof val === 'string';
+    return typeof val === 'string';
 }
-
 function isNumber(val) {
-	return typeof val === 'number';
+    return typeof val === 'number';
 }
-
 function isObject(val) {
-	return val && (typeof val === 'object' || isFunction(val));
+    return val && (typeof val === 'object' || isFunction(val));
 }
-
 function isFunction(val) {
-	return typeof val === 'function';
+    return typeof val === 'function';
 }
-
-function isArrayLike( obj ) {
-	return isObject( obj )
-		&& typeof obj.length === 'number'
-		&& typeof obj.nodeType !== 'number';
+function isArrayLike(obj) {
+    return isObject(obj) && typeof obj.length === 'number' && typeof obj.nodeType !== 'number';
 }
 
-function className( value ) {
-	if (Array.isArray( value )) {
-		return value.filter( Boolean ).join(' ');
-	} else if (isObject( value )) {
-		return Object.keys( value ).filter( function (k) { return value[k]; } ).join(' ');
-	} else {
-		return '' + value;
-	}
+function preventDefault(event) {
+    event.preventDefault();
+    return event;
 }
-
-function createElement( tag, attr ) {
-	var children = [], len = arguments.length - 2;
-	while ( len-- > 0 ) children[ len ] = arguments[ len + 2 ];
-
-	if (isString( tag )) {
-		var node = document.createElement( tag );
-		attributes( attr || {}, node );
-		append( children, node );
-		return node;
-	} else if (isFunction( tag )) {
-		// Custom elements.
-		var node$1 = new tag();
-		attributes(attr, node$1);
-		return node$1;
-	}
+function stopPropagation(event) {
+    event.stopPropagation();
+    return event;
 }
-
-function append( children, node ) {
-	if ( node === void 0 ) node = this;
-
-	if (isElement( children ) || isString( children )) {
-		children = [ children ];
-	}
-	for (var i = 0, list = children; i < list.length; i += 1) {
-		var child = list[i];
-
-		if (isArrayLike( child )) {
-			append( child, node );
-		} else if (isString( child ) || isNumber( child )) {
-			node.appendChild( document.createTextNode( child ) );
-		} else if (child === null) {
-			node.appendChild( document.createComment('') );
-		} else if (isElement( child )) {
-			node.appendChild( child );
-		}
-	}
-	return node;
+function className(value) {
+    if (Array.isArray(value)) {
+        return value.filter(Boolean).join(' ');
+    } else if (isObject(value)) {
+        return Object.keys(value).filter(function (k) {
+            return value[k];
+        }).join(' ');
+    } else {
+        return '' + value;
+    }
 }
-
-function attributes( attr, node ) {
-	for (var i = 0, list = Object.keys(attr); i < list.length; i += 1) {
-		var key = list[i];
-
-		var value = attr[key];
-
-		switch (key) {
-			case 'style':
-				typeof value === 'object'
-				? Object.assign( node[key], value )
-				: node.style = value;
-				continue;
-			case 'dataset':
-				Object.assign( node[key], value );
-				continue;
-			case 'innerHTML':
-			case 'innerText':
-			case 'textContent':
-				node[key] = value;
-				continue;
-			case 'class':
-			case 'className':
-				node.className = className( value );
-				continue;
-		}
-
-		if (isFunction( value )) {
-			if (key.startsWith('on')) {
-				var name = key.slice(2).toLowerCase();
-				listen( node, name, value );
-			} else {
-				value = value.call( node, node.getAttribute( key ));
-				node.setAttribute( key, value );
-			}
-		} else if ( node ) {
-			node.setAttribute( key, value );
-		}
-	}
-	return node;
+function createElement(tag, attr) {
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    if (isString(tag)) {
+        var node = document.createElement(tag);
+        attributes(attr || {}, node);
+        append(children, node);
+        return node;
+    } else if (isFunction(tag)) {
+        return tag(__assign({}, attr, { children: children }));
+    }
 }
-
-
-function listen( node, eventName, callback ) {
-	node.addEventListener( eventName, callback );
-	return node;
+function append(children, node) {
+    if (node === void 0) {
+        node = this;
+    }
+    if (isElement(children) || isString(children)) {
+        children = [children];
+    }
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var child = children_1[_i];
+        if (isArrayLike(child)) {
+            append(child, node);
+        } else if (isString(child) || isNumber(child)) {
+            node.appendChild(document.createTextNode(child));
+        } else if (child === null) {
+            node.appendChild(document.createComment(''));
+        } else if (isElement(child)) {
+            node.appendChild(child);
+        }
+    }
+    return node;
 }
+function attributes(attr, node) {
+    for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {
+        var key = _a[_i];
+        var value = attr[key];
+        switch (key) {
+            case 'style':
+                typeof value === 'object' ? __assign(node[key], value) : node.style = value;
+                continue;
+            case 'dataset':
+                __assign(node[key], value);
+                continue;
+            case 'innerHTML':
+            case 'innerText':
+            case 'textContent':
+                node[key] = value;
+                continue;
+            case 'class':
+            case 'className':
+                node.className = className(value);
+                continue;
+        }
+        if (isFunction(value)) {
+            if (key.startsWith('on')) {
+                var name = key.slice(2).toLowerCase();
+                listen(node, name, value);
+            } else {
+                value = value.call(node, node.getAttribute(key));
+                node.setAttribute(key, value);
+            }
+        } else if (node) {
+            node.setAttribute(key, value);
+        }
+    }
+    return node;
+}
+function listen(node, eventName, callback) {
+    node.addEventListener(eventName, callback);
+    return node;
+}
 
+exports.preventDefault = preventDefault;
+exports.stopPropagation = stopPropagation;
 exports.createElement = createElement;

dist/index.es.js

@@ -0,123 +1,124 @@
+
+
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+};
+
 function isElement(val) {
-	return val && typeof val.nodeType === 'number';
+    return val && typeof val.nodeType === 'number';
 }
-
 function isString(val) {
-	return typeof val === 'string';
+    return typeof val === 'string';
 }
-
 function isNumber(val) {
-	return typeof val === 'number';
+    return typeof val === 'number';
 }
-
 function isObject(val) {
-	return val && (typeof val === 'object' || isFunction(val));
+    return val && (typeof val === 'object' || isFunction(val));
 }
-
 function isFunction(val) {
-	return typeof val === 'function';
+    return typeof val === 'function';
 }
-
-function isArrayLike( obj ) {
-	return isObject( obj )
-		&& typeof obj.length === 'number'
-		&& typeof obj.nodeType !== 'number';
+function isArrayLike(obj) {
+    return isObject(obj) && typeof obj.length === 'number' && typeof obj.nodeType !== 'number';
 }
 
-function className( value ) {
-	if (Array.isArray( value )) {
-		return value.filter( Boolean ).join(' ');
-	} else if (isObject( value )) {
-		return Object.keys( value ).filter( function (k) { return value[k]; } ).join(' ');
-	} else {
-		return '' + value;
-	}
+function preventDefault(event) {
+    event.preventDefault();
+    return event;
 }
-
-function createElement( tag, attr ) {
-	var children = [], len = arguments.length - 2;
-	while ( len-- > 0 ) children[ len ] = arguments[ len + 2 ];
-
-	if (isString( tag )) {
-		var node = document.createElement( tag );
-		attributes( attr || {}, node );
-		append( children, node );
-		return node;
-	} else if (isFunction( tag )) {
-		// Custom elements.
-		var node$1 = new tag();
-		attributes(attr, node$1);
-		return node$1;
-	}
+function stopPropagation(event) {
+    event.stopPropagation();
+    return event;
 }
-
-function append( children, node ) {
-	if ( node === void 0 ) node = this;
-
-	if (isElement( children ) || isString( children )) {
-		children = [ children ];
-	}
-	for (var i = 0, list = children; i < list.length; i += 1) {
-		var child = list[i];
-
-		if (isArrayLike( child )) {
-			append( child, node );
-		} else if (isString( child ) || isNumber( child )) {
-			node.appendChild( document.createTextNode( child ) );
-		} else if (child === null) {
-			node.appendChild( document.createComment('') );
-		} else if (isElement( child )) {
-			node.appendChild( child );
-		}
-	}
-	return node;
+function className(value) {
+    if (Array.isArray(value)) {
+        return value.filter(Boolean).join(' ');
+    } else if (isObject(value)) {
+        return Object.keys(value).filter(function (k) {
+            return value[k];
+        }).join(' ');
+    } else {
+        return '' + value;
+    }
 }
-
-function attributes( attr, node ) {
-	for (var i = 0, list = Object.keys(attr); i < list.length; i += 1) {
-		var key = list[i];
-
-		var value = attr[key];
-
-		switch (key) {
-			case 'style':
-				typeof value === 'object'
-				? Object.assign( node[key], value )
-				: node.style = value;
-				continue;
-			case 'dataset':
-				Object.assign( node[key], value );
-				continue;
-			case 'innerHTML':
-			case 'innerText':
-			case 'textContent':
-				node[key] = value;
-				continue;
-			case 'class':
-			case 'className':
-				node.className = className( value );
-				continue;
-		}
-
-		if (isFunction( value )) {
-			if (key.startsWith('on')) {
-				var name = key.slice(2).toLowerCase();
-				listen( node, name, value );
-			} else {
-				value = value.call( node, node.getAttribute( key ));
-				node.setAttribute( key, value );
-			}
-		} else if ( node ) {
-			node.setAttribute( key, value );
-		}
-	}
-	return node;
+function createElement(tag, attr) {
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    if (isString(tag)) {
+        var node = document.createElement(tag);
+        attributes(attr || {}, node);
+        append(children, node);
+        return node;
+    } else if (isFunction(tag)) {
+        return tag(__assign({}, attr, { children: children }));
+    }
 }
-
-
-function listen( node, eventName, callback ) {
-	node.addEventListener( eventName, callback );
-	return node;
+function append(children, node) {
+    if (node === void 0) {
+        node = this;
+    }
+    if (isElement(children) || isString(children)) {
+        children = [children];
+    }
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var child = children_1[_i];
+        if (isArrayLike(child)) {
+            append(child, node);
+        } else if (isString(child) || isNumber(child)) {
+            node.appendChild(document.createTextNode(child));
+        } else if (child === null) {
+            node.appendChild(document.createComment(''));
+        } else if (isElement(child)) {
+            node.appendChild(child);
+        }
+    }
+    return node;
 }
+function attributes(attr, node) {
+    for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {
+        var key = _a[_i];
+        var value = attr[key];
+        switch (key) {
+            case 'style':
+                typeof value === 'object' ? __assign(node[key], value) : node.style = value;
+                continue;
+            case 'dataset':
+                __assign(node[key], value);
+                continue;
+            case 'innerHTML':
+            case 'innerText':
+            case 'textContent':
+                node[key] = value;
+                continue;
+            case 'class':
+            case 'className':
+                node.className = className(value);
+                continue;
+        }
+        if (isFunction(value)) {
+            if (key.startsWith('on')) {
+                var name = key.slice(2).toLowerCase();
+                listen(node, name, value);
+            } else {
+                value = value.call(node, node.getAttribute(key));
+                node.setAttribute(key, value);
+            }
+        } else if (node) {
+            node.setAttribute(key, value);
+        }
+    }
+    return node;
+}
+function listen(node, eventName, callback) {
+    node.addEventListener(eventName, callback);
+    return node;
+}
 
-export { createElement };
+export { preventDefault, stopPropagation, createElement };

dist/jsx-dom.d.ts

 declare module "jsx-dom" {
+  type Child = Node | string | number;
+
+  function createElement<K extends keyof HTMLElementTagNameMap>(
+    tagName: K,
+    props?: any,
+    ...children: Child[]
+  ): HTMLElementTagNameMap[K];
+
   function createElement(
-    type: string | Function,
+  	tagName: string,
+  	props?: any,
+  	...children: Child[]
+  ): HTMLElement;
+
+  function createElement<K extends Element>(
+    factory: (props) => K,
     props?: any,
-    ...children: (Node|string)[]
-  ): Element;
-}
+    ...children: Child[]
+  ): K;
+
+
+  // Utility functions
+  function stopPropagation(event: Event): Event;
+  function preventDefault(event: Event): Event;
+}

package.json

 {
   "name": "jsx-dom",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "JSX to document.createElement",
@@ -17,9 +17,8 @@ "main": "dist/index.cjs.js",
   "devDependencies": {
-    "rollup": "^0.36.3",
-    "rollup-plugin-buble": "^0.14.0"
+    "@alexlur/rollup-plugin-typescript": "^1.0.2",
+    "@types/babel-core": "^6.7.14",
+    "babel-core": "^6.21.0",
+    "rollup": "^0.38.0",
+    "typescript": "^2.1.4"
   },
-  "dependencies": {
-    "rollup": "^0.36.3",
-    "rollup-plugin-buble": "^0.14.0"
-  },
   "repository": {
@@ -26,0 +25,0 @@ "type": "git",

README.md

@@ -24,3 +24,3 @@ # jsx-dom
 	"plugins": [
-		[ "transform-react-jsx", "jsxDom" ]
+		[ "transform-react-jsx", { "pragma": "jsxDom" } ]
 	]
@@ -39,5 +39,10 @@ }
 6. `innerHTML`, `innerText` and `textContent` are accepted.
-7. Uppercase tag names are treated as a **Custom Element** and will be initialized with a `new` call.
 
+## Goodies
+Two extra functions are provided by this package:
+
+1. `preventDefault(event: Event): Event`
+2. `stopPropagation(event: Event): Event`
+
 ## Browser Support
 `jsx-dom` requires `Object.keys` and `Object.assign` (an ES6 feature). If you are using Babel, the [`transform-object-assign`](https://babeljs.io/docs/plugins/transform-object-assign/#usage) plugin should eliminate the need for a polyfill.

rollup.config.js

@@ -1,16 +0,26 @@
-import buble from 'rollup-plugin-buble';
+import ts from '@alexlur/rollup-plugin-typescript';
+import * as babel from 'babel-core';
 
+function transformBundle(code) {
+	const transformed = babel.transform(code, {
+		babelrc: false,
+		comments: false,
+		minified: false,
+	});
+	return {
+		code: transformed.code,
+		map: transformed.map,
+	};
+}
+
 export default {
-	entry: './src/index',
+	entry: './src/index.ts',
 	plugins: [
-		buble({
-			transforms: {
-				dangerousForOf: true
-			}
-		})
+		ts(),
+		{ transformBundle },
 	],
 	targets: [
 		{ dest: 'dist/index.cjs.js', format: 'cjs' },
-		{ dest: 'dist/index.es.js', format: 'es' }
+		{ dest: 'dist/index.es.js', format: 'es' },
 	]
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26929

increased by144.99%

Dependency count

0

decreased by-100%

Number of package files

11

increased by22.22%

Lines of code

411

increased by21.6%

Number of lines in readme file

46

increased by12.2%

Worsened metrics

Dev dependency count

5

increased by150%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedrollup@^0.36.3

• - Removedrollup-plugin-buble@^0.14.0

• - Removedacorn@3.3.0(transitive)

• - Removedacorn-jsx@3.0.1(transitive)

• - Removedacorn-object-spread@1.0.0(transitive)

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedbuble@0.14.3(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedestree-walker@0.2.1(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedmagic-string@0.14.0(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedos-homedir@1.0.2(transitive)

• - Removedrollup@0.36.4(transitive)

• - Removedrollup-plugin-buble@0.14.0(transitive)

• - Removedrollup-pluginutils@1.5.2(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedsource-map-support@0.4.18(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.0(transitive)

• - Removedvlq@0.2.3(transitive)