Fix the types of Component's render function

src/preact.d.ts

@@ -98,7 +98,7 @@ declare namespace preact {
 
 		forceUpdate(callback?: () => void): void;
 
-		abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): JSX.Element | null;
+		abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
 	}
 
 	function h<P>(

test/browser/components.js

@@ -118,6 +118,38 @@ describe('Components', () => {
 		expect(clone.prototype).to.equal(instance.prototype);
 	});
 
+	it('should render string', () => {
+		class StringComponent extends Component {
+			render() {
+				return "Hi there";
+			}
+		}
+
+		render(<StringComponent />, scratch);
+		expect(scratch.innerHTML).to.equal('Hi there');
+	});
+
+	it('should render number as string', () => {
+		class NumberComponent extends Component {
+			render() {
+				return 42;
+			}
+		}
+
+		render(<NumberComponent />, scratch);
+		expect(scratch.innerHTML).to.equal('42');
+	});
+
+	it('should render null as empty string', () => {
+		class NullComponent extends Component {
+			render() {
+				return null;
+			}
+		}
+
+		render(<NullComponent />, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
 
 	// Test for Issue #73
 	it('should remove orphaned elements replaced by Components', () => {

test/ts/Component-test.tsx

@@ -5,10 +5,11 @@ import {
 	Component,
 	FunctionalComponent,
 	ComponentConstructor,
-	RenderableProps
+	RenderableProps,
+	render
 } from "../../src/preact";
 
-export class ContextComponent extends Component<{ foo: string}> {
+export class ContextComponent extends Component<{ foo: string }> {
 	getChildContext() {
 		return { something: 2 };
 	}
@@ -23,10 +24,13 @@ export interface SimpleComponentProps {
 }
 
 export interface SimpleState {
-	name: string | null
+	name: string | null;
 }
 
-export class SimpleComponent extends Component<SimpleComponentProps, SimpleState> {
+export class SimpleComponent extends Component<
+	SimpleComponentProps,
+	SimpleState
+> {
 	constructor(props: SimpleComponentProps) {
 		super(props);
 		this.state = {
@@ -50,9 +54,10 @@ export class SimpleComponent extends Component<SimpleComponentProps, SimpleState
 	}
 }
 
-class DestructuringRenderPropsComponent
-	extends	Component<SimpleComponentProps, SimpleState> {
-
+class DestructuringRenderPropsComponent extends Component<
+	SimpleComponentProps,
+	SimpleState
+> {
 	constructor(props: SimpleComponentProps) {
 		super(props);
 		this.state = {
@@ -72,6 +77,28 @@ class DestructuringRenderPropsComponent
 	}
 }
 
+interface RandomChildrenComponenProps {
+	num?: number;
+	val?: string;
+	span?: boolean;
+}
+
+class RandomChildrenComponen extends Component<RandomChildrenComponenProps> {
+	render() {
+		const { num, val, span } = this.props;
+		if (num) {
+			return num;
+		}
+		if (val) {
+			return val;
+		}
+		if (span) {
+			return <span>hi</span>
+		}
+		return null;
+	}
+}
+
 describe("Component", () => {
 	const component = new SimpleComponent({ initialName: "da name" });