cut the library size in half

Author: developit

package.json

@@ -4,12 +4,17 @@
   "version": "3.7.0",
   "description": "Render JSX to an HTML string, with support for Preact components.",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "umd:main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "jsnext:main": "dist/index.mjs",
   "scripts": {
+    "x-build": "microbundle src/index.js src/jsx.js --target web --external none --no-compress && npm run -s copy-typescript-definition",
     "build": "npm run -s transpile && npm run -s transpile:jsx && npm run -s copy-typescript-definition",
+    "transpile": "microbundle src/index.js -f es,umd --target web --external none",
+    "transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external none",
     "copy-typescript-definition": "copyfiles -f src/index.d.ts dist",
-    "transpile": "rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName $npm_package_jsnext_main -o $npm_package_main",
-    "transpile:jsx": "ENTRY=jsx rollup -c rollup.config.js -m dist/jsx.js.map -f umd -n $npm_package_amdName src/jsx.js -o dist/jsx.js",
+    "x-transpile": "rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName $npm_package_jsnext_main -o $npm_package_main",
+    "x-transpile:jsx": "ENTRY=jsx rollup -c rollup.config.js -m dist/jsx.js.map -f umd -n $npm_package_amdName src/jsx.js -o dist/jsx.js",
     "test": "eslint src test && mocha --compilers js:babel-register test/**/*.js",
     "prepublish": "npm run build",
     "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
@@ -57,6 +62,7 @@
     "sinon-chai": "^2.8.0"
   },
   "dependencies": {
+    "microbundle": "^0.6.0",
     "pretty-format": "^3.5.1"
   }
 }

src/index.js

@@ -1,4 +1,4 @@
-import { objectKeys, encodeEntities, falsey, memoize, indent, isLargeString, styleObjToCss, hashToClassName, assign, getNodeProps } from './util';
+import { objectKeys, encodeEntities, indent, isLargeString, styleObjToCss, assign, getNodeProps } from './util';
 
 const SHALLOW = { shallow: true };
 
@@ -119,14 +119,11 @@ export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 				if (attributes['class']) continue;
 				name = 'class';
 			}
-			else if (isSvgMode && name.match(/^xlink\:?(.+)/)) {
-				name = name.toLowerCase().replace(/^xlink\:?(.+)/, 'xlink:$1');
+			else if (isSvgMode && name.match(/^xlink\:?./)) {
+				name = name.toLowerCase().replace(/^xlink\:?/, 'xlink:');
 			}
 
-			if (name==='class' && v && typeof v==='object') {
-				v = hashToClassName(v);
-			}
-			else if (name==='style' && v && typeof v==='object') {
+			if (name==='style' && v && typeof v==='object') {
 				v = styleObjToCss(v);
 			}
 
@@ -177,7 +174,7 @@ export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 			hasLarge = ~s.indexOf('\n');
 		for (let i=0; i<len; i++) {
 			let child = children[i];
-			if (!falsey(child)) {
+			if (child!=null && child!==false) {
 				let childSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode,
 					ret = renderToString(child, context, opts, true, childSvgMode);
 				if (!hasLarge && pretty && isLargeString(ret)) hasLarge = true;

src/jsx.js

@@ -1,5 +1,5 @@
 import './polyfills';
-import renderToString from '.';
+import renderToString from './index';
 import { indent, encodeEntities, assign } from './util';
 import prettyFormat from 'pretty-format';
 

src/util.js

@@ -1,46 +1,36 @@
 // DOM properties that should NOT have "px" added when numeric
-export const NON_DIMENSION_PROPS = {
-	boxFlex:1, boxFlexGroup:1, columnCount:1, fillOpacity:1, flex:1, flexGrow:1,
-	flexPositive:1, flexShrink:1, flexNegative:1, fontWeight:1, lineClamp:1, lineHeight:1,
-	opacity:1, order:1, orphans:1, strokeOpacity:1, widows:1, zIndex:1, zoom:1
-};
-
-const ESC = {
-	'<': '&lt;',
-	'>': '&gt;',
-	'"': '&quot;',
-	'&': '&amp;'
-};
+export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
 
 export const objectKeys = Object.keys || (obj => {
 	let keys = [];
 	for (let i in obj) if (obj.hasOwnProperty(i)) keys.push(i);
 	return keys;
 });
 
-export let encodeEntities = s => String(s).replace(/[<>"&]/g, escapeChar);
-
-let escapeChar = a => ESC[a] || a;
-
-export let falsey = v => v==null || v===false;
-
-export let memoize = (fn, mem={}) => v => mem[v] || (mem[v] = fn(v));
+export let encodeEntities = s => String(s)
+	.replace(/</g, '&lt;')
+	.replace(/>/g, '&gt;')
+	.replace(/"/g, '&quot;')
+	.replace(/&/g, '&amp;');
 
 export let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 
 export let isLargeString = (s, length, ignoreLines) => (String(s).length>(length || 40) || (!ignoreLines && String(s).indexOf('\n')!==-1) || String(s).indexOf('<')!==-1);
 
+const JS_TO_CSS = {};
+
 // Convert an Object style to a CSSText string
 export function styleObjToCss(s) {
 	let str = '';
 	for (let prop in s) {
 		let val = s[prop];
 		if (val!=null) {
 			if (str) str += ' ';
-			str += jsToCss(prop);
+			// str += jsToCss(prop);
+			str += JS_TO_CSS[prop] || (JS_TO_CSS[prop] = prop.replace(/([A-Z])/g,'-$1').toLowerCase());
 			str += ': ';
 			str += val;
-			if (typeof val==='number' && !NON_DIMENSION_PROPS[prop]) {
+			if (typeof val==='number' && IS_NON_DIMENSIONAL.test(prop)===false) {
 				str += 'px';
 			}
 			str += ';';
@@ -49,22 +39,6 @@ export function styleObjToCss(s) {
 	return str || undefined;
 }
 
-
-// See https://github.com/developit/preact/blob/master/src/util.js#L61
-export function hashToClassName(c) {
-	let str = '';
-	for (let prop in c) {
-		if (c[prop]) {
-			if (str) str += ' ';
-			str += prop;
-		}
-	}
-	return str;
-}
-
-// Convert a JavaScript camel-case CSS property name to a CSS property name
-export let jsToCss = memoize( s => s.replace(/([A-Z])/g,'-$1').toLowerCase() );
-
 export function assign(obj, props) {
 	for (let i in props) obj[i] = props[i];
 	return obj;

test/jsx.js

@@ -1,4 +1,5 @@
-import render from '../src/jsx';
+// import render from '../src/jsx';
+import render from '../dist/jsx';
 import { h, Component } from 'preact';
 import chai, { expect } from 'chai';
 import { spy, match } from 'sinon';