preact-render-to-string - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

dist/index.js

@@ -20,2 +20,8 @@ (function (global, factory) {
 
+	var 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
+	};
+
 	var UNNAMED = [];
@@ -42,2 +48,9 @@
 
+	var memoize = function (fn) {
+		var mem = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+		return function (v) {
+			return mem[v] || (mem[v] = fn(v));
+		};
+	};
+
 	var indent = function (s, char) {
@@ -51,2 +64,24 @@ return String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 
+	function styleObjToCss(s) {
+		var str = '';
+		for (var prop in s) {
+			var val = s[prop];
+			if (val != null) {
+				if (str) str += ' ';
+				str += jsToCss(prop);
+				str += ': ';
+				str += val;
+				if (typeof val === 'number' && !NON_DIMENSION_PROPS[prop]) {
+					str += 'px';
+				}
+				str += ';';
+			}
+		}
+		return str;
+	}
+
+	var jsToCss = memoize(function (s) {
+		return s.replace(/([A-Z])/g, '-$1').toLowerCase();
+	});
+
 	function assign(obj, props) {
@@ -102,2 +137,3 @@ for (var i in props) {
 					c.context = context;
+					if (c.componentWillMount) c.componentWillMount();
 					rendered = c.render(c.props, c.state, c.context);
@@ -131,2 +167,5 @@
 				}
+				if (name === 'style' && v && typeof v === 'object') {
+					v = styleObjToCss(v);
+				}
 				if (name === 'dangerouslySetInnerHTML') {
@@ -133,0 +172,0 @@ html = v && v.__html;

package.json

 {
   "name": "preact-render-to-string",
   "amdName": "preactRenderToString",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Render JSX to an HTML string, with support for Preact components.",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/index.js

@@ -30,2 +30,9 @@
 
+// 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
+};
+
 // components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
@@ -46,2 +53,4 @@ const UNNAMED = [];
 
+let memoize = (fn, mem={}) => v => mem[v] || (mem[v] = fn(v));
+
 let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
@@ -51,2 +60,23 @@
 
+function styleObjToCss(s) {
+	let str = '';
+	for (let prop in s) {
+		let val = s[prop];
+		if (val!=null) {
+			if (str) str += ' ';
+			str += jsToCss(prop);
+			str += ': ';
+			str += val;
+			if (typeof val==='number' && !NON_DIMENSION_PROPS[prop]) {
+				str += 'px';
+			}
+			str += ';';
+		}
+	}
+	return str;
+}
+
+// Convert a JavaScript camel-case CSS property name to a CSS property name
+let jsToCss = memoize( s => s.replace(/([A-Z])/g,'-$1').toLowerCase() );
+
 function assign(obj, props) {
@@ -128,2 +158,3 @@ for (let i in props) obj[i] = props[i];
 				c.context = context;
+				if (c.componentWillMount) c.componentWillMount();
 				rendered = c.render(c.props, c.state, c.context);
@@ -159,2 +190,5 @@
 			}
+			if (name==='style' && v && typeof v==='object') {
+				v = styleObjToCss(v);
+			}
 			if (name==='dangerouslySetInnerHTML') {
@@ -161,0 +195,0 @@ html = v && v.__html;

test/render.js

@@ -67,2 +67,9 @@ import { render, shallowRender } from '../src';
 		});
+
+		it('should serialize object styles', () => {
+			let rendered = render(<div style={{ color:'red', border:'none' }} />),
+				expected = `<div style="color: red; border: none;"></div>`;
+
+			expect(rendered).to.equal(expected);
+		});
 	});
@@ -209,2 +216,19 @@
 		});
+
+		it('should invoke componentWillMount', () => {
+			class Test extends Component {
+				componentWillMount() {}
+				render(props) {
+					return <div {...props} />;
+				}
+			}
+			spy(Test.prototype, 'componentWillMount');
+			spy(Test.prototype, 'render');
+
+			render(<Test />);
+
+			expect(Test.prototype.componentWillMount)
+				.to.have.been.calledOnce
+				.and.to.have.been.calledBefore(Test.prototype.render);
+		});
 	});
@@ -211,0 +235,0 @@

No alert changes

Improved metrics

Total package byte prevSize

48179

increased by11.7%

Lines of code

843

increased by11.07%

No dependency changes