Add support for mixed rendering

src/index.d.ts

@@ -5,6 +5,7 @@ declare module render {
     shallow:boolean;
     xml:boolean;
     pretty:boolean;
+    alwaysRenderedComponents: Array[String];
   }
 
   function render(vnode:VNode, context?:any, options?:Options):string;

src/index.js

@@ -34,6 +34,7 @@ const VOID_ELEMENTS = [
  *	@param {Boolean} [options.shallow=false]	If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
  *	@param {Boolean} [options.xml=false]		If `true`, uses self-closing tags for elements without children.
  *	@param {Boolean} [options.pretty=false]		If `true`, adds whitespace for readability
+ *	@param {string[]} [options.alwaysRenderedComponents=[]]	List of components that should be rendered with shallow rendering
  */
 renderToString.render = renderToString;
 
@@ -47,13 +48,13 @@ renderToString.render = renderToString;
  */
 let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
 
-
 /** The default export is an alias of `render()`. */
 export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 	let { nodeName, attributes, children } = vnode || EMPTY,
 		isComponent = false;
 	context = context || {};
 	opts = opts || {};
+	opts.alwaysRenderedComponents = opts.alwaysRenderedComponents || [];
 
 	let pretty = opts.pretty,
 		indentChar = typeof pretty==='string' ? pretty : '\t';
@@ -69,9 +70,12 @@ export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 
 	// components
 	if (typeof nodeName==='function') {
+		let componentName = getComponentName(nodeName);
 		isComponent = true;
-		if (opts.shallow && (inner || opts.renderRootComponent===false)) {
-			nodeName = getComponentName(nodeName);
+		if (opts.shallow &&
+			(inner || opts.renderRootComponent===false) &&
+			opts.alwaysRenderedComponents.indexOf(componentName)===-1) {
+			nodeName = componentName;
 		}
 		else {
 			let props = getNodeProps(vnode),

test/mixedRender.js

@@ -0,0 +1,85 @@
+import { render } from '../src';
+import {h, Component} from 'preact';
+import chai, { expect } from 'chai';
+import { spy, match } from 'sinon';
+import sinonChai from 'sinon-chai';
+
+chai.use(sinonChai);
+
+describe('mixedRender()', () => {
+	it('should not render nested components when not white listed', () => {
+		let Test = spy(({ foo, children }) => <div bar={foo}><b>test child</b>{children}</div>);
+		Test.displayName = 'Test';
+
+		let rendered = render(
+			<section>
+				<Test foo={1}><span>asdf</span></Test>
+			</section>
+			, {}, { shallow: true, alwaysRenderedComponents: [] });
+
+		expect(rendered).to.equal(`<section><Test foo="1"><span>asdf</span></Test></section>`);
+		expect(Test).not.to.have.been.called;
+	});
+
+	it('should always render root component', () => {
+		let Test = spy(({ foo, children }) => <div bar={foo}><b>test child</b>{children}</div>);
+		Test.displayName = 'Test';
+
+		let rendered = render(
+			<Test foo={1}>
+				<span>asdf</span>
+			</Test>
+			, {}, { shallow: true, alwaysRenderedComponents: [] });
+
+		expect(rendered).to.equal(`<div bar="1"><b>test child</b><span>asdf</span></div>`);
+		expect(Test).to.have.been.calledOnce;
+	});
+
+	it('should render nested components when they are white listed', () => {
+		let Test = spy(({ foo, children }) => <div bar={foo}><b>test child</b>{children}</div>);
+		Test.displayName = 'Test';
+
+		let rendered = render(
+			<section>
+				<Test foo={1}><span>asdf</span></Test>
+			</section>
+			, undefined, { alwaysRenderedComponents: ['Test'] });
+
+		expect(rendered).to.equal(`<section><div bar="1"><b>test child</b><span>asdf</span></div></section>`);
+		expect(Test).to.have.been.called;
+	});
+
+	it('should not render nested components inside a whitelisted component', () => {
+		let Test = spy(({ foo, children }) => <div bar={foo}><b>test child</b>{children}</div>);
+		let Ignored = spy(({ title, children }) => <h2>This {title} should not be rendered</h2>);
+		Test.displayName = 'Test';
+		Ignored.displayName = 'Ignored';
+
+		let rendered = render(
+			<section>
+				<Test foo={1}><Ignored title={'FooBarTitle'}/></Test>
+			</section>
+			, {}, { shallow: true, alwaysRenderedComponents: ['Test'] });
+
+		expect(rendered).to.equal(`<section><div bar="1"><b>test child</b><Ignored title="FooBarTitle"></Ignored></div></section>`);
+		expect(Test).to.have.been.called;
+		expect(Ignored).to.not.have.been.called;
+	});
+
+	it('should render deeply nested components when all are white listed', () => {
+		let Test = spy(({ foo, children }) => <div bar={foo}><b>test child</b>{children}</div>);
+		let Ignored = spy(({ title, children }) => <h2>This {title} should be rendered</h2>);
+		Test.displayName = 'Test';
+		Ignored.displayName = 'Ignored';
+
+		let rendered = render(
+			<section>
+				<Test foo={1}><Ignored title={'FooBarTitle'}/></Test>
+			</section>
+			, {}, { shallow: true, alwaysRenderedComponents: ['Test', 'Ignored'] });
+
+		expect(rendered).to.equal(`<section><div bar="1"><b>test child</b><h2>This FooBarTitle should be rendered</h2></div></section>`);
+		expect(Test).to.have.been.called;
+		expect(Ignored).to.have.been.called;
+	});
+});

test/render.js

@@ -500,7 +500,7 @@ describe('render', () => {
 			expect(renderXml(<div foo={false} bar={0} />)).to.equal(`<div bar="0" />`);
 		});
 	});
-	
+
 	describe('state locking', () => {
 		it('should set _disable and __x to true', () => {
 			let inst;
@@ -513,9 +513,9 @@ describe('render', () => {
 					return <div />;
 				}
 			}
-			
+
 			expect(render(<Foo />)).to.equal('<div></div>');
-			
+
 			expect(inst).to.have.property('_disable', true);
 			expect(inst).to.have.property('__x', true);
 		});
@@ -533,9 +533,9 @@ describe('render', () => {
 					return <Bar count={++count} />;
 				}
 			}
-			
+
 			expect(render(<Foo />)).to.equal('<div></div>');
-			
+
 			expect(Bar).to.have.been.calledOnce.and.calledWithMatch({ count: 1 });
 		});
 	});