Support createContext of preact x (#88)

Support createContext of preact x

Author: marvinhagemeister

src/index.js

@@ -76,8 +76,14 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 			if (options.render) options.render(vnode);
 
 			if (!nodeName.prototype || typeof nodeName.prototype.render!=='function') {
+				// Necessary for createContext api. Setting this property will pass
+				// the context value as `this.context` just for this component.
+				let cxType = nodeName.contextType;
+				let provider = cxType && context[cxType.__c];
+				let cctx = cxType != null ? (provider ? provider.props.value : cxType._defaultValue) : context;
+
 				// stateless functional components
-				rendered = nodeName.call(vnode.__c, props, context);
+				rendered = nodeName.call(vnode.__c, props, cctx);
 			}
 			else {
 				// class-based components

test/context.js

@@ -0,0 +1,73 @@
+import render from '../src/jsx';
+import { h, createContext } from 'preact';
+import chai, { expect } from 'chai';
+import sinonChai from 'sinon-chai';
+chai.use(sinonChai);
+
+// tag to remove leading whitespace from tagged template literal
+function dedent([str]) {
+	return str.split( '\n'+str.match(/^\n*(\s+)/)[1] ).join('\n').replace(/(^\n+|\n+\s*$)/g, '');
+}
+
+describe('context', () => {
+	let renderJsx = (jsx, opts) => render(jsx, null, opts).replace(/ {2}/g, '\t');
+
+	it('should support createContext', () => {
+		const { Provider, Consumer } = createContext();
+		let rendered = renderJsx(
+			<Provider value="correct">
+				<Consumer>
+					{(value) => (
+						<section>
+							value is: {value}
+						</section>
+					)}
+				</Consumer>
+			</Provider>
+		);
+
+		expect(rendered).to.equal(dedent`
+			<section>value is: correct</section>
+		`);
+	});
+
+	it('should support nested Providers', () => {
+		const { Provider, Consumer } = createContext();
+		let rendered = renderJsx(
+			<Provider value="wrong">
+				<Provider value="correct">
+					<Consumer>
+						{(value) => (
+							<section>
+								value is: {value}
+							</section>
+						)}
+					</Consumer>
+				</Provider>
+			</Provider>
+		);
+
+		expect(rendered).to.equal(dedent`
+			<section>value is: correct</section>
+		`);
+	});
+
+	it('should support falsy context value', () => {
+		const { Provider, Consumer } = createContext();
+		let rendered = renderJsx(
+			<Provider value={null}>
+				<Consumer>
+					{(value) => (
+						<section>
+							value is: {value}
+						</section>
+					)}
+				</Consumer>
+			</Provider>
+		);
+
+		expect(rendered).to.equal(dedent`
+			<section>value is: </section>
+		`);
+	});
+});