From a1e70c533d50b48a032a2583576fad7777549659 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Thu, 7 Feb 2019 18:01:59 -0800
Subject: [PATCH 1/7] Lookup return type of factory function for JSX expression
 return types

---
 src/compiler/checker.ts                       | 78 ++++++++++++++++---
 src/compiler/types.ts                         |  3 +-
 .../reference/api/tsserverlibrary.d.ts        |  2 +-
 tests/baselines/reference/api/typescript.d.ts |  2 +-
 .../doubleUnderscoreReactNamespace.errors.txt | 16 ++++
 .../doubleUnderscoreReactNamespace.types      |  4 +-
 .../reference/inlineJsxFactoryDeclarations.js |  6 +-
 .../inlineJsxFactoryDeclarations.symbols      | 13 ++--
 .../inlineJsxFactoryDeclarations.types        | 45 ++++++-----
 ...sxFactoryDeclarationsLocalTypes.errors.txt |  4 +-
 .../inlineJsxFactoryDeclarationsLocalTypes.js |  4 +-
 ...neJsxFactoryDeclarationsLocalTypes.symbols |  6 +-
 ...lineJsxFactoryDeclarationsLocalTypes.types | 18 +++--
 ...xFactoryLocalTypeGlobalFallback.errors.txt |  4 +-
 ...inlineJsxFactoryLocalTypeGlobalFallback.js |  4 +-
 ...eJsxFactoryLocalTypeGlobalFallback.symbols |  6 +-
 ...ineJsxFactoryLocalTypeGlobalFallback.types | 14 ++--
 ...inlineJsxFactoryOverridesCompilerOption.js |  2 +-
 ...eJsxFactoryOverridesCompilerOption.symbols |  3 +-
 ...ineJsxFactoryOverridesCompilerOption.types | 17 ++--
 ...neJsxFactoryWithFragmentIsError.errors.txt |  4 +-
 .../inlineJsxFactoryWithFragmentIsError.js    |  4 +-
 ...nlineJsxFactoryWithFragmentIsError.symbols |  8 +-
 .../inlineJsxFactoryWithFragmentIsError.types | 20 ++---
 .../jsxFactoryAndReactNamespace.errors.txt    |  2 +-
 .../reference/jsxFactoryAndReactNamespace.js  |  4 +-
 .../jsxFactoryAndReactNamespace.symbols       |  2 +-
 .../jsxFactoryAndReactNamespace.types         | 18 ++---
 .../reference/jsxFactoryIdentifier.js         |  4 +-
 .../reference/jsxFactoryIdentifier.js.map     |  2 +-
 .../jsxFactoryIdentifier.sourcemap.txt        | 19 +++--
 .../reference/jsxFactoryIdentifier.symbols    |  2 +-
 .../reference/jsxFactoryIdentifier.types      | 24 +++---
 .../jsxFactoryIdentifierAsParameter.types     |  2 +-
 .../reference/jsxFactoryQualifiedName.js      |  4 +-
 .../reference/jsxFactoryQualifiedName.js.map  |  2 +-
 .../jsxFactoryQualifiedName.sourcemap.txt     | 19 +++--
 .../reference/jsxFactoryQualifiedName.symbols |  2 +-
 .../reference/jsxFactoryQualifiedName.types   | 18 ++---
 ...tsxAttributesHasInferrableIndex.errors.txt | 23 ++++++
 .../tsxAttributesHasInferrableIndex.types     |  4 +-
 .../compiler/jsxFactoryAndReactNamespace.ts   | 22 +++---
 tests/cases/compiler/jsxFactoryIdentifier.ts  |  2 +-
 .../cases/compiler/jsxFactoryQualifiedName.ts | 22 +++---
 .../inline/inlineJsxFactoryDeclarations.tsx   |  6 +-
 ...inlineJsxFactoryDeclarationsLocalTypes.tsx |  4 +-
 ...nlineJsxFactoryLocalTypeGlobalFallback.tsx |  4 +-
 ...nlineJsxFactoryOverridesCompilerOption.tsx |  2 +-
 .../inlineJsxFactoryWithFragmentIsError.tsx   |  4 +-
 49 files changed, 313 insertions(+), 191 deletions(-)
 create mode 100644 tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
 create mode 100644 tests/baselines/reference/tsxAttributesHasInferrableIndex.errors.txt

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 2328b7e3d68a4..94c9145d008c7 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -888,6 +888,7 @@ namespace ts {
                     if (jsxPragma) {
                         const chosenpragma = isArray(jsxPragma) ? jsxPragma[0] : jsxPragma;
                         file.localJsxFactory = parseIsolatedEntityName(chosenpragma.arguments.factory, languageVersion);
+                        visitNode(file.localJsxFactory, markAsSynthetic);
                         if (file.localJsxFactory) {
                             return file.localJsxNamespace = getFirstIdentifier(file.localJsxFactory).escapedText;
                         }
@@ -898,6 +899,7 @@ namespace ts {
                 _jsxNamespace = "React" as __String;
                 if (compilerOptions.jsxFactory) {
                     _jsxFactoryEntity = parseIsolatedEntityName(compilerOptions.jsxFactory, languageVersion);
+                    visitNode(_jsxFactoryEntity, markAsSynthetic);
                     if (_jsxFactoryEntity) {
                         _jsxNamespace = getFirstIdentifier(_jsxFactoryEntity).escapedText;
                     }
@@ -907,6 +909,12 @@ namespace ts {
                 }
             }
             return _jsxNamespace;
+
+            function markAsSynthetic(node: Node): VisitResult<Node> {
+                node.pos = -1;
+                node.end = -1;
+                return visitEachChild(node, markAsSynthetic, nullTransformationContext);
+            }
         }
 
         function getEmitResolver(sourceFile: SourceFile, cancellationToken: CancellationToken) {
@@ -19967,9 +19975,9 @@ namespace ts {
             checkJsxOpeningLikeElementOrOpeningFragment(node);
         }
 
-        function checkJsxSelfClosingElement(node: JsxSelfClosingElement, _checkMode: CheckMode | undefined): Type {
+        function checkJsxSelfClosingElement(node: JsxSelfClosingElement): Type {
             checkNodeDeferred(node);
-            return getJsxElementTypeAt(node) || anyType;
+            return getFactoryReturnTypeForJsxOpeningLikeElement(node);
         }
 
         function checkJsxElementDeferred(node: JsxElement) {
@@ -19987,10 +19995,10 @@ namespace ts {
             checkJsxChildren(node);
         }
 
-        function checkJsxElement(node: JsxElement, _checkMode: CheckMode | undefined): Type {
+        function checkJsxElement(node: JsxElement): Type {
             checkNodeDeferred(node);
 
-            return getJsxElementTypeAt(node) || anyType;
+            return getFactoryReturnTypeForJsxOpeningLikeElement(node.openingElement);
         }
 
         function checkJsxFragment(node: JsxFragment): Type {
@@ -20003,7 +20011,7 @@ namespace ts {
             }
 
             checkJsxChildren(node);
-            return getJsxElementTypeAt(node) || anyType;
+            return getFactoryReturnTypeForJsxOpeningLikeElement(node.openingFragment);
         }
 
         /**
@@ -20429,6 +20437,49 @@ namespace ts {
             }
         }
 
+        function getFactoryReturnTypeForJsxOpeningLikeElement(node: JsxOpeningLikeElement | JsxOpeningFragment) {
+            const reactRefErr = diagnostics && compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined;
+            const reactNamespace = getJsxNamespace(node);
+            const reactLocation = isJsxOpeningLikeElement(node) ? node.tagName : node;
+            const reactSym = resolveName(reactLocation, reactNamespace, SymbolFlags.Value, reactRefErr, reactNamespace, /*isUse*/ true);
+            const factoryEntity = getJsxFactoryEntity(reactLocation);
+            if (!factoryEntity) {
+                return getJsxElementTypeAt(node) || errorType;
+            }
+            const factorySymbol = resolveEntityName(factoryEntity, SymbolFlags.Value, /*ignoreErrors*/ true, /*dontUseResolveAlias*/ false, reactLocation);
+            if (reactSym && factorySymbol && factorySymbol !== unknownSymbol) {
+                // Mark local symbol as referenced here because it might not have been marked
+                // if jsx emit was not react as there wont be error being emitted
+                reactSym.isReferenced = SymbolFlags.All;
+
+                // If react symbol is alias, mark it as referenced
+                if (reactSym.flags & SymbolFlags.Alias && !isConstEnumOrConstEnumOnlyModule(resolveAlias(reactSym))) {
+                    markAliasSymbolAsReferenced(reactSym);
+                }
+                const links = getNodeLinks(node);
+                if (!links.jsxFactoryCall) {
+                    const factoryExpression = createSyntheticExpression(node, getTypeOfSymbol(factorySymbol));
+                    const children = isJsxOpeningElement(node) ? node.parent.children : emptyArray;
+                    links.jsxFactoryCall = createCall(factoryExpression, /*typeArguments*/ undefined, [
+                        isJsxOpeningFragment(node)
+                            ? createSyntheticExpression(node, reactSym.exports ? getTypeOfSymbol(getSymbol(getExportsOfSymbol(reactSym), "Fragment" as __String, SymbolFlags.Value) || unknownSymbol) : emptyObjectType)
+                            : isJsxIntrinsicIdentifier(node.tagName) ? createSyntheticExpression(node.tagName, getLiteralType(idText((node.tagName as Identifier)))) : node.tagName,
+                        isJsxOpeningFragment(node) ? createSyntheticExpression(node, nullType) : createSyntheticExpression(node.attributes, checkMode => checkExpression(node.attributes, checkMode)),
+                        ...mapDefined(children, c => isJsxText(c) && c.containsOnlyWhiteSpaces ? undefined : createSyntheticExpression(c, isJsxText(c) ? stringType : (checkMode => checkExpression(c, checkMode))))
+                    ]);
+                    links.jsxFactoryCall.pos = node.pos;
+                    links.jsxFactoryCall.end = node.end;
+                    links.jsxFactoryCall.parent = node.parent;
+                }
+                const result =  getReturnTypeOfSignature(getResolvedSignature(links.jsxFactoryCall));
+                if (result === errorType) {
+                    return getJsxElementTypeAt(node) || errorType;
+                }
+                return result;
+            }
+            return getJsxElementTypeAt(node) || errorType;
+        }
+
         function checkJsxOpeningLikeElementOrOpeningFragment(node: JsxOpeningLikeElement | JsxOpeningFragment) {
             const isNodeOpeningLikeElement = isJsxOpeningLikeElement(node);
 
@@ -21513,7 +21564,7 @@ namespace ts {
                     // We are inferring from a spread expression in the last argument position, i.e. both the parameter
                     // and the argument are ...x forms.
                     return arg.kind === SyntaxKind.SyntheticExpression ?
-                        createArrayType((<SyntheticExpression>arg).type) :
+                        createArrayType(checkExpressionWithContextualType(<SyntheticExpression>arg, restType, context, CheckMode.Normal)) :
                         getArrayifiedType(checkExpressionWithContextualType((<SpreadElement>arg).expression, restType, context, CheckMode.Normal));
                 }
             }
@@ -21694,7 +21745,7 @@ namespace ts {
             }
         }
 
-        function createSyntheticExpression(parent: Node, type: Type, isSpread?: boolean) {
+        function createSyntheticExpression(parent: Node, type: Type | ((mode: CheckMode | undefined) => Type), isSpread?: boolean) {
             const result = <SyntheticExpression>createNode(SyntaxKind.SyntheticExpression, parent.pos, parent.end);
             result.parent = parent;
             result.type = type;
@@ -25445,13 +25496,14 @@ namespace ts {
                 case SyntaxKind.YieldExpression:
                     return checkYieldExpression(<YieldExpression>node);
                 case SyntaxKind.SyntheticExpression:
-                    return (<SyntheticExpression>node).type;
+                    const cbOrType = (<SyntheticExpression>node).type;
+                    return typeof cbOrType === "function" ? cbOrType(checkMode) : cbOrType;
                 case SyntaxKind.JsxExpression:
                     return checkJsxExpression(<JsxExpression>node, checkMode);
                 case SyntaxKind.JsxElement:
-                    return checkJsxElement(<JsxElement>node, checkMode);
+                    return checkJsxElement(<JsxElement>node);
                 case SyntaxKind.JsxSelfClosingElement:
-                    return checkJsxSelfClosingElement(<JsxSelfClosingElement>node, checkMode);
+                    return checkJsxSelfClosingElement(<JsxSelfClosingElement>node);
                 case SyntaxKind.JsxFragment:
                     return checkJsxFragment(<JsxFragment>node);
                 case SyntaxKind.JsxAttributes:
@@ -31972,6 +32024,10 @@ namespace ts {
             return literalTypeToNode(<FreshableType>type, node, tracker);
         }
 
+        function getJsxFactoryEntity(location?: Node): EntityName | undefined {
+            return location ? (getJsxNamespace(location), (getSourceFileOfNode(location).localJsxFactory || _jsxFactoryEntity)) : _jsxFactoryEntity;
+        }
+
         function createResolver(): EmitResolver {
             // this variable and functions that use it are deliberately moved here from the outer scope
             // to avoid scope pollution
@@ -32043,7 +32099,7 @@ namespace ts {
                     const symbol = node && getSymbolOfNode(node);
                     return !!(symbol && getCheckFlags(symbol) & CheckFlags.Late);
                 },
-                getJsxFactoryEntity: location => location ? (getJsxNamespace(location), (getSourceFileOfNode(location).localJsxFactory || _jsxFactoryEntity)) : _jsxFactoryEntity,
+                getJsxFactoryEntity,
                 getAllAccessorDeclarations(accessor: AccessorDeclaration): AllAccessorDeclarations {
                     accessor = getParseTreeNode(accessor, isGetOrSetAccessorDeclaration)!; // TODO: GH#18217
                     const otherKind = accessor.kind === SyntaxKind.SetAccessor ? SyntaxKind.GetAccessor : SyntaxKind.SetAccessor;
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 999a922041201..b66971e815f7b 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -1404,7 +1404,7 @@ namespace ts {
     export interface SyntheticExpression extends Expression {
         kind: SyntaxKind.SyntheticExpression;
         isSpread: boolean;
-        type: Type;
+        type: Type | ((mode: number | undefined) => Type);
     }
 
     // see: https://tc39.github.io/ecma262/#prod-ExponentiationExpression
@@ -3954,6 +3954,7 @@ namespace ts {
         contextFreeType?: Type;          // Cached context-free type used by the first pass of inference; used when a function's return is partially contextually sensitive
         deferredNodes?: Map<Node>; // Set of nodes whose checking has been deferred
         capturedBlockScopeBindings?: Symbol[]; // Block-scoped bindings captured beneath this part of an IterationStatement
+        jsxFactoryCall?: CallExpression;    // Manufactured call expression node for checking jsx factory call
     }
 
     export const enum TypeFlags {
diff --git a/tests/baselines/reference/api/tsserverlibrary.d.ts b/tests/baselines/reference/api/tsserverlibrary.d.ts
index 67d6a98e11ec5..d767fe3085e89 100644
--- a/tests/baselines/reference/api/tsserverlibrary.d.ts
+++ b/tests/baselines/reference/api/tsserverlibrary.d.ts
@@ -924,7 +924,7 @@ declare namespace ts {
     export interface SyntheticExpression extends Expression {
         kind: SyntaxKind.SyntheticExpression;
         isSpread: boolean;
-        type: Type;
+        type: Type | ((mode: number | undefined) => Type);
     }
     export type ExponentiationOperator = SyntaxKind.AsteriskAsteriskToken;
     export type MultiplicativeOperator = SyntaxKind.AsteriskToken | SyntaxKind.SlashToken | SyntaxKind.PercentToken;
diff --git a/tests/baselines/reference/api/typescript.d.ts b/tests/baselines/reference/api/typescript.d.ts
index 279357eddf752..141f361655e25 100644
--- a/tests/baselines/reference/api/typescript.d.ts
+++ b/tests/baselines/reference/api/typescript.d.ts
@@ -924,7 +924,7 @@ declare namespace ts {
     export interface SyntheticExpression extends Expression {
         kind: SyntaxKind.SyntheticExpression;
         isSpread: boolean;
-        type: Type;
+        type: Type | ((mode: number | undefined) => Type);
     }
     export type ExponentiationOperator = SyntaxKind.AsteriskAsteriskToken;
     export type MultiplicativeOperator = SyntaxKind.AsteriskToken | SyntaxKind.SlashToken | SyntaxKind.PercentToken;
diff --git a/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt b/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
new file mode 100644
index 0000000000000..17da36096ef22
--- /dev/null
+++ b/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
@@ -0,0 +1,16 @@
+tests/cases/compiler/index.tsx(7,15): error TS2554: Expected 1 arguments, but got 2.
+
+
+==== tests/cases/compiler/index.tsx (1 errors) ====
+    declare global {
+        function __make (params: object): any;
+    }
+    
+    declare var __foot: any;
+    
+    const thing = <__foot />;
+                  ~~~~~~~~~~
+!!! error TS2554: Expected 1 arguments, but got 2.
+    
+    export {}
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/doubleUnderscoreReactNamespace.types b/tests/baselines/reference/doubleUnderscoreReactNamespace.types
index b9ba88fd52942..04382944d8651 100644
--- a/tests/baselines/reference/doubleUnderscoreReactNamespace.types
+++ b/tests/baselines/reference/doubleUnderscoreReactNamespace.types
@@ -11,8 +11,8 @@ declare var __foot: any;
 >__foot : any
 
 const thing = <__foot />;
->thing : error
-><__foot /> : error
+>thing : any
+><__foot /> : any
 >__foot : any
 
 export {}
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarations.js b/tests/baselines/reference/inlineJsxFactoryDeclarations.js
index 958c43af83f68..1c3f8f7d1339d 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarations.js
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarations.js
@@ -8,9 +8,9 @@ declare global {
         }
     }
 }
-export function dom(): void;
-export function otherdom(): void;
-export function createElement(): void;
+export function dom(...args: any[]): void;
+export function otherdom(...args: any[]): void;
+export function createElement(...args: any[]): void;
 export { dom as default };
 //// [otherreacty.tsx]
 /** @jsx React.createElement */
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarations.symbols b/tests/baselines/reference/inlineJsxFactoryDeclarations.symbols
index aa2dc90320235..b3abecb1d9c10 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarations.symbols
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarations.symbols
@@ -13,14 +13,17 @@ declare global {
         }
     }
 }
-export function dom(): void;
+export function dom(...args: any[]): void;
 >dom : Symbol(dom, Decl(renderer.d.ts, 6, 1))
+>args : Symbol(args, Decl(renderer.d.ts, 7, 20))
 
-export function otherdom(): void;
->otherdom : Symbol(otherdom, Decl(renderer.d.ts, 7, 28))
+export function otherdom(...args: any[]): void;
+>otherdom : Symbol(otherdom, Decl(renderer.d.ts, 7, 42))
+>args : Symbol(args, Decl(renderer.d.ts, 8, 25))
 
-export function createElement(): void;
->createElement : Symbol(createElement, Decl(renderer.d.ts, 8, 33))
+export function createElement(...args: any[]): void;
+>createElement : Symbol(createElement, Decl(renderer.d.ts, 8, 47))
+>args : Symbol(args, Decl(renderer.d.ts, 9, 30))
 
 export { dom as default };
 >dom : Symbol(dom, Decl(renderer.d.ts, 6, 1))
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarations.types b/tests/baselines/reference/inlineJsxFactoryDeclarations.types
index dbbb5c4766773..8d62fef4b3421 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarations.types
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarations.types
@@ -9,18 +9,21 @@ declare global {
         }
     }
 }
-export function dom(): void;
->dom : () => void
+export function dom(...args: any[]): void;
+>dom : (...args: any[]) => void
+>args : any[]
 
-export function otherdom(): void;
->otherdom : () => void
+export function otherdom(...args: any[]): void;
+>otherdom : (...args: any[]) => void
+>args : any[]
 
-export function createElement(): void;
->createElement : () => void
+export function createElement(...args: any[]): void;
+>createElement : (...args: any[]) => void
+>args : any[]
 
 export { dom as default };
->dom : () => void
->default : () => void
+>dom : (...args: any[]) => void
+>default : (...args: any[]) => void
 
 === tests/cases/conformance/jsx/inline/otherreacty.tsx ===
 /** @jsx React.createElement */
@@ -28,36 +31,36 @@ import * as React from "./renderer";
 >React : typeof React
 
 <h></h>
-><h></h> : error
+><h></h> : void
 >h : any
 >h : any
 
 === tests/cases/conformance/jsx/inline/other.tsx ===
 /** @jsx h */
 import { dom as h } from "./renderer"
->dom : () => void
->h : () => void
+>dom : (...args: any[]) => void
+>h : (...args: any[]) => void
 
 export const prerendered = <h></h>;
->prerendered : error
-><h></h> : error
->h : () => void
->h : () => void
+>prerendered : void
+><h></h> : void
+>h : (...args: any[]) => void
+>h : (...args: any[]) => void
 
 === tests/cases/conformance/jsx/inline/othernoalias.tsx ===
 /** @jsx otherdom */
 import { otherdom } from "./renderer"
->otherdom : () => void
+>otherdom : (...args: any[]) => void
 
 export const prerendered2 = <h></h>;
->prerendered2 : error
-><h></h> : error
+>prerendered2 : void
+><h></h> : void
 >h : any
 >h : any
 
 === tests/cases/conformance/jsx/inline/reacty.tsx ===
 import React from "./renderer"
->React : () => void
+>React : (...args: any[]) => void
 
 export const prerendered3 = <h></h>;
 >prerendered3 : error
@@ -68,10 +71,10 @@ export const prerendered3 = <h></h>;
 === tests/cases/conformance/jsx/inline/index.tsx ===
 /** @jsx dom */
 import { dom } from "./renderer"
->dom : () => void
+>dom : (...args: any[]) => void
 
 <h></h>
-><h></h> : error
+><h></h> : void
 >h : any
 >h : any
 
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt
index c4a7c6809bcc5..35a312e59901b 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.errors.txt
@@ -27,7 +27,7 @@ tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import(
             interface ElementChildrenAttribute { children: any; }
         }
     }
-    export function dom(): dom.JSX.Element;
+    export function dom(...args: any[]): dom.JSX.Element;
 ==== tests/cases/conformance/jsx/inline/renderer2.d.ts (0 errors) ====
     export namespace predom {
         namespace JSX {
@@ -47,7 +47,7 @@ tests/cases/conformance/jsx/inline/index.tsx(24,48): error TS2322: Type 'import(
             interface ElementChildrenAttribute { children: any; }
         }
     }
-    export function predom(): predom.JSX.Element;
+    export function predom(...args: any[]): predom.JSX.Element;
 ==== tests/cases/conformance/jsx/inline/component.tsx (0 errors) ====
     /** @jsx predom */
     import { predom } from "./renderer2"
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.js b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.js
index 87487b4139da4..8bfcae0ee14c9 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.js
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.js
@@ -19,7 +19,7 @@ export namespace dom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function dom(): dom.JSX.Element;
+export function dom(...args: any[]): dom.JSX.Element;
 //// [renderer2.d.ts]
 export namespace predom {
     namespace JSX {
@@ -39,7 +39,7 @@ export namespace predom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 //// [component.tsx]
 /** @jsx predom */
 import { predom } from "./renderer2"
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.symbols b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.symbols
index c53ac6b194883..effb41e1d3a2f 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.symbols
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.symbols
@@ -43,8 +43,9 @@ export namespace dom {
 >children : Symbol(ElementChildrenAttribute.children, Decl(renderer.d.ts, 15, 44))
     }
 }
-export function dom(): dom.JSX.Element;
+export function dom(...args: any[]): dom.JSX.Element;
 >dom : Symbol(dom, Decl(renderer.d.ts, 17, 1), Decl(renderer.d.ts, 0, 0))
+>args : Symbol(args, Decl(renderer.d.ts, 18, 20))
 >dom : Symbol(dom, Decl(renderer.d.ts, 17, 1), Decl(renderer.d.ts, 0, 0))
 >JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
 >Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
@@ -94,8 +95,9 @@ export namespace predom {
 >children : Symbol(ElementChildrenAttribute.children, Decl(renderer2.d.ts, 15, 44))
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 >predom : Symbol(predom, Decl(renderer2.d.ts, 17, 1), Decl(renderer2.d.ts, 0, 0))
+>args : Symbol(args, Decl(renderer2.d.ts, 18, 23))
 >predom : Symbol(predom, Decl(renderer2.d.ts, 17, 1), Decl(renderer2.d.ts, 0, 0))
 >JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
 >Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
diff --git a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.types b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.types
index ab33876cbdadb..f4676edb4d393 100644
--- a/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.types
+++ b/tests/baselines/reference/inlineJsxFactoryDeclarationsLocalTypes.types
@@ -28,8 +28,9 @@ export namespace dom {
 >children : any
     }
 }
-export function dom(): dom.JSX.Element;
->dom : () => dom.JSX.Element
+export function dom(...args: any[]): dom.JSX.Element;
+>dom : (...args: any[]) => dom.JSX.Element
+>args : any[]
 >dom : any
 >JSX : any
 
@@ -63,15 +64,16 @@ export namespace predom {
 >children : any
     }
 }
-export function predom(): predom.JSX.Element;
->predom : () => predom.JSX.Element
+export function predom(...args: any[]): predom.JSX.Element;
+>predom : (...args: any[]) => predom.JSX.Element
+>args : any[]
 >predom : any
 >JSX : any
 
 === tests/cases/conformance/jsx/inline/component.tsx ===
 /** @jsx predom */
 import { predom } from "./renderer2"
->predom : () => predom.JSX.Element
+>predom : (...args: any[]) => predom.JSX.Element
 
 export const MySFC = (props: {x: number, y: number, children?: predom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{...this.props.children}</p>;
 >MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
@@ -107,7 +109,7 @@ export const MySFC = (props: {x: number, y: number, children?: predom.JSX.Elemen
 export class MyClass implements predom.JSX.Element {
 >MyClass : MyClass
 >predom.JSX : any
->predom : () => predom.JSX.Element
+>predom : (...args: any[]) => predom.JSX.Element
 >JSX : any
 
     __predomBrand!: void;
@@ -192,7 +194,7 @@ export default <h></h>
 === tests/cases/conformance/jsx/inline/index.tsx ===
 /** @jsx dom */
 import { dom } from "./renderer"
->dom : () => dom.JSX.Element
+>dom : (...args: any[]) => dom.JSX.Element
 
 import prerendered, {MySFC, MyClass, tree} from "./component";
 >prerendered : import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element
@@ -243,7 +245,7 @@ const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) =>
 class DOMClass implements dom.JSX.Element {
 >DOMClass : DOMClass
 >dom.JSX : any
->dom : () => dom.JSX.Element
+>dom : (...args: any[]) => dom.JSX.Element
 >JSX : any
 
     __domBrand!: void;
diff --git a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.errors.txt b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.errors.txt
index c8490e7e33f7e..0233cce07c26c 100644
--- a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.errors.txt
+++ b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.errors.txt
@@ -16,7 +16,7 @@ tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2741: Property '__pre
             interface ElementChildrenAttribute { children: any; }
         }
     }
-    export function dom(): JSX.Element;
+    export function dom(...args: any[]): JSX.Element;
 ==== tests/cases/conformance/jsx/inline/renderer2.d.ts (0 errors) ====
     export namespace predom {
         namespace JSX {
@@ -32,7 +32,7 @@ tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2741: Property '__pre
             interface ElementChildrenAttribute { children: any; }
         }
     }
-    export function predom(): predom.JSX.Element;
+    export function predom(...args: any[]): predom.JSX.Element;
 ==== tests/cases/conformance/jsx/inline/component.tsx (0 errors) ====
     /** @jsx predom */
     import { predom } from "./renderer2"
diff --git a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.js b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.js
index 4f5123ed67ddf..c85ddd3916860 100644
--- a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.js
+++ b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.js
@@ -15,7 +15,7 @@ declare global {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function dom(): JSX.Element;
+export function dom(...args: any[]): JSX.Element;
 //// [renderer2.d.ts]
 export namespace predom {
     namespace JSX {
@@ -31,7 +31,7 @@ export namespace predom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 //// [component.tsx]
 /** @jsx predom */
 import { predom } from "./renderer2"
diff --git a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.symbols b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.symbols
index 9e246795292fd..ed7632593b53b 100644
--- a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.symbols
+++ b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.symbols
@@ -33,8 +33,9 @@ declare global {
 >children : Symbol(ElementChildrenAttribute.children, Decl(renderer.d.ts, 11, 44))
     }
 }
-export function dom(): JSX.Element;
+export function dom(...args: any[]): JSX.Element;
 >dom : Symbol(dom, Decl(renderer.d.ts, 13, 1))
+>args : Symbol(args, Decl(renderer.d.ts, 14, 20))
 >JSX : Symbol(JSX, Decl(renderer.d.ts, 0, 16))
 >Element : Symbol(JSX.Element, Decl(renderer.d.ts, 4, 9))
 
@@ -73,8 +74,9 @@ export namespace predom {
 >children : Symbol(ElementChildrenAttribute.children, Decl(renderer2.d.ts, 11, 44))
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 >predom : Symbol(predom, Decl(renderer2.d.ts, 13, 1), Decl(renderer2.d.ts, 0, 0))
+>args : Symbol(args, Decl(renderer2.d.ts, 14, 23))
 >predom : Symbol(predom, Decl(renderer2.d.ts, 13, 1), Decl(renderer2.d.ts, 0, 0))
 >JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
 >Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
diff --git a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.types b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.types
index 8cb9cf66e7792..b2edf924cd28f 100644
--- a/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.types
+++ b/tests/baselines/reference/inlineJsxFactoryLocalTypeGlobalFallback.types
@@ -24,8 +24,9 @@ declare global {
 >children : any
     }
 }
-export function dom(): JSX.Element;
->dom : () => JSX.Element
+export function dom(...args: any[]): JSX.Element;
+>dom : (...args: any[]) => JSX.Element
+>args : any[]
 >JSX : any
 
 === tests/cases/conformance/jsx/inline/renderer2.d.ts ===
@@ -52,15 +53,16 @@ export namespace predom {
 >children : any
     }
 }
-export function predom(): predom.JSX.Element;
->predom : () => predom.JSX.Element
+export function predom(...args: any[]): predom.JSX.Element;
+>predom : (...args: any[]) => predom.JSX.Element
+>args : any[]
 >predom : any
 >JSX : any
 
 === tests/cases/conformance/jsx/inline/component.tsx ===
 /** @jsx predom */
 import { predom } from "./renderer2"
->predom : () => predom.JSX.Element
+>predom : (...args: any[]) => predom.JSX.Element
 
 export default <h></h>
 ><h></h> : predom.JSX.Element
@@ -70,7 +72,7 @@ export default <h></h>
 === tests/cases/conformance/jsx/inline/index.tsx ===
 /** @jsx dom */
 import { dom } from "./renderer"
->dom : () => JSX.Element
+>dom : (...args: any[]) => JSX.Element
 
 import prerendered from "./component";
 >prerendered : import("tests/cases/conformance/jsx/inline/renderer2").predom.JSX.Element
diff --git a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.js b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.js
index fef2e38ee3bd0..5c757e86cee6e 100644
--- a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.js
+++ b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.js
@@ -8,7 +8,7 @@ declare global {
         }
     }
 }
-export function dom(): void;
+export function dom(...args: any[]): void;
 export { dom as p };
 //// [reacty.tsx]
 /** @jsx dom */
diff --git a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.symbols b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.symbols
index 8ebd6770703d3..43be747e69383 100644
--- a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.symbols
+++ b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.symbols
@@ -13,8 +13,9 @@ declare global {
         }
     }
 }
-export function dom(): void;
+export function dom(...args: any[]): void;
 >dom : Symbol(dom, Decl(renderer.d.ts, 6, 1))
+>args : Symbol(args, Decl(renderer.d.ts, 7, 20))
 
 export { dom as p };
 >dom : Symbol(dom, Decl(renderer.d.ts, 6, 1))
diff --git a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.types b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.types
index 7f119837eb8a9..03843b987517f 100644
--- a/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.types
+++ b/tests/baselines/reference/inlineJsxFactoryOverridesCompilerOption.types
@@ -9,29 +9,30 @@ declare global {
         }
     }
 }
-export function dom(): void;
->dom : () => void
+export function dom(...args: any[]): void;
+>dom : (...args: any[]) => void
+>args : any[]
 
 export { dom as p };
->dom : () => void
->p : () => void
+>dom : (...args: any[]) => void
+>p : (...args: any[]) => void
 
 === tests/cases/conformance/jsx/inline/reacty.tsx ===
 /** @jsx dom */
 import {dom} from "./renderer";
->dom : () => void
+>dom : (...args: any[]) => void
 
 <h></h>
-><h></h> : error
+><h></h> : void
 >h : any
 >h : any
 
 === tests/cases/conformance/jsx/inline/index.tsx ===
 import { p } from "./renderer";
->p : () => void
+>p : (...args: any[]) => void
 
 <h></h>
-><h></h> : error
+><h></h> : void
 >h : any
 >h : any
 
diff --git a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.errors.txt b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.errors.txt
index b70ddf5f9b9aa..9629a67ba15d6 100644
--- a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.errors.txt
+++ b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.errors.txt
@@ -10,8 +10,8 @@ tests/cases/conformance/jsx/inline/reacty.tsx(3,1): error TS17017: JSX fragment
             }
         }
     }
-    export function dom(): void;
-    export function createElement(): void;
+    export function dom(...args: any[]): void;
+    export function createElement(...args: any[]): void;
 ==== tests/cases/conformance/jsx/inline/reacty.tsx (1 errors) ====
     /** @jsx React.createElement */
     import * as React from "./renderer";
diff --git a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.js b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.js
index 3af54bc04e600..457c0a8d7c27c 100644
--- a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.js
+++ b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.js
@@ -8,8 +8,8 @@ declare global {
         }
     }
 }
-export function dom(): void;
-export function createElement(): void;
+export function dom(...args: any[]): void;
+export function createElement(...args: any[]): void;
 //// [reacty.tsx]
 /** @jsx React.createElement */
 import * as React from "./renderer";
diff --git a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.symbols b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.symbols
index 0453bd2610538..306f7bb9765d0 100644
--- a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.symbols
+++ b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.symbols
@@ -13,11 +13,13 @@ declare global {
         }
     }
 }
-export function dom(): void;
+export function dom(...args: any[]): void;
 >dom : Symbol(dom, Decl(renderer.d.ts, 6, 1))
+>args : Symbol(args, Decl(renderer.d.ts, 7, 20))
 
-export function createElement(): void;
->createElement : Symbol(createElement, Decl(renderer.d.ts, 7, 28))
+export function createElement(...args: any[]): void;
+>createElement : Symbol(createElement, Decl(renderer.d.ts, 7, 42))
+>args : Symbol(args, Decl(renderer.d.ts, 8, 30))
 
 === tests/cases/conformance/jsx/inline/reacty.tsx ===
 /** @jsx React.createElement */
diff --git a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.types b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.types
index b57232adbb107..8346d850781b0 100644
--- a/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.types
+++ b/tests/baselines/reference/inlineJsxFactoryWithFragmentIsError.types
@@ -9,11 +9,13 @@ declare global {
         }
     }
 }
-export function dom(): void;
->dom : () => void
+export function dom(...args: any[]): void;
+>dom : (...args: any[]) => void
+>args : any[]
 
-export function createElement(): void;
->createElement : () => void
+export function createElement(...args: any[]): void;
+>createElement : (...args: any[]) => void
+>args : any[]
 
 === tests/cases/conformance/jsx/inline/reacty.tsx ===
 /** @jsx React.createElement */
@@ -21,19 +23,19 @@ import * as React from "./renderer";
 >React : typeof React
 
 <><h></h></>
-><><h></h></> : any
-><h></h> : any
+><><h></h></> : void
+><h></h> : void
 >h : any
 >h : any
 
 === tests/cases/conformance/jsx/inline/index.tsx ===
 /** @jsx dom */
 import { dom } from "./renderer";
->dom : () => void
+>dom : (...args: any[]) => void
 
 <><h></h></>
-><><h></h></> : any
-><h></h> : any
+><><h></h></> : void
+><h></h> : void
 >h : any
 >h : any
 
diff --git a/tests/baselines/reference/jsxFactoryAndReactNamespace.errors.txt b/tests/baselines/reference/jsxFactoryAndReactNamespace.errors.txt
index c1734f6304c25..85ddb3d6e8107 100644
--- a/tests/baselines/reference/jsxFactoryAndReactNamespace.errors.txt
+++ b/tests/baselines/reference/jsxFactoryAndReactNamespace.errors.txt
@@ -20,7 +20,7 @@ error TS5053: Option 'reactNamespace' cannot be specified with option 'jsxFactor
             return el.markAsChildOfRootElement !== undefined;
         }
     
-        export function createElement(args: any[]) {
+        export function createElement(...args: any[]) {
     
             return {
             }
diff --git a/tests/baselines/reference/jsxFactoryAndReactNamespace.js b/tests/baselines/reference/jsxFactoryAndReactNamespace.js
index 277a74a8c2f73..d744223a2ed8e 100644
--- a/tests/baselines/reference/jsxFactoryAndReactNamespace.js
+++ b/tests/baselines/reference/jsxFactoryAndReactNamespace.js
@@ -18,7 +18,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
@@ -58,7 +58,7 @@ var Element;
         return el.markAsChildOfRootElement !== undefined;
     }
     Element.isElement = isElement;
-    function createElement(args) {
+    function createElement(...args) {
         return {};
     }
     Element.createElement = createElement;
diff --git a/tests/baselines/reference/jsxFactoryAndReactNamespace.symbols b/tests/baselines/reference/jsxFactoryAndReactNamespace.symbols
index 00de54d5d0767..240f5276be4f2 100644
--- a/tests/baselines/reference/jsxFactoryAndReactNamespace.symbols
+++ b/tests/baselines/reference/jsxFactoryAndReactNamespace.symbols
@@ -48,7 +48,7 @@ export namespace Element {
 >undefined : Symbol(undefined)
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 >createElement : Symbol(createElement, Decl(Element.ts, 15, 5))
 >args : Symbol(args, Decl(Element.ts, 17, 34))
 
diff --git a/tests/baselines/reference/jsxFactoryAndReactNamespace.types b/tests/baselines/reference/jsxFactoryAndReactNamespace.types
index 12e231874b6b8..3b97109080e3e 100644
--- a/tests/baselines/reference/jsxFactoryAndReactNamespace.types
+++ b/tests/baselines/reference/jsxFactoryAndReactNamespace.types
@@ -45,8 +45,8 @@ export namespace Element {
 >undefined : undefined
     }
 
-    export function createElement(args: any[]) {
->createElement : (args: any[]) => {}
+    export function createElement(...args: any[]) {
+>createElement : (...args: any[]) => {}
 >args : any[]
 
         return {
@@ -56,10 +56,10 @@ export namespace Element {
 }
 
 export let createElement = Element.createElement;
->createElement : (args: any[]) => {}
->Element.createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
+>Element.createElement : (...args: any[]) => {}
 >Element : typeof Element
->createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
 
 function toCamelCase(text: string): string {
 >toCamelCase : (text: string) => string
@@ -99,19 +99,19 @@ class A {
 >A : A
 
 	view() {
->view : () => any[]
+>view : () => {}[]
 
 		return [
->[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : any[]
+>[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : {}[]
 
 			<meta content="helloworld"></meta>,
-><meta content="helloworld"></meta> : any
+><meta content="helloworld"></meta> : {}
 >meta : any
 >content : string
 >meta : any
 
 			<meta content={c.a!.b}></meta>
-><meta content={c.a!.b}></meta> : any
+><meta content={c.a!.b}></meta> : {}
 >meta : any
 >content : string
 >c.a!.b : string
diff --git a/tests/baselines/reference/jsxFactoryIdentifier.js b/tests/baselines/reference/jsxFactoryIdentifier.js
index a5ed7e66035fd..78e4c5245e168 100644
--- a/tests/baselines/reference/jsxFactoryIdentifier.js
+++ b/tests/baselines/reference/jsxFactoryIdentifier.js
@@ -18,7 +18,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
@@ -59,7 +59,7 @@ var Element;
         return el.markAsChildOfRootElement !== undefined;
     }
     Element.isElement = isElement;
-    function createElement(args) {
+    function createElement(...args) {
         return {};
     }
     Element.createElement = createElement;
diff --git a/tests/baselines/reference/jsxFactoryIdentifier.js.map b/tests/baselines/reference/jsxFactoryIdentifier.js.map
index 5ecfbe9d87ec4..bcef2f898ea8d 100644
--- a/tests/baselines/reference/jsxFactoryIdentifier.js.map
+++ b/tests/baselines/reference/jsxFactoryIdentifier.js.map
@@ -1,4 +1,4 @@
 //// [Element.js.map]
-{"version":3,"file":"Element.js","sourceRoot":"","sources":["Element.ts"],"names":[],"mappings":";;AAYA,IAAiB,OAAO,CAUvB;AAVD,WAAiB,OAAO;IACpB,SAAgB,SAAS,CAAC,EAAO;QAC7B,OAAO,EAAE,CAAC,wBAAwB,KAAK,SAAS,CAAC;IACrD,CAAC;IAFe,iBAAS,YAExB,CAAA;IAED,SAAgB,aAAa,CAAC,IAAW;QAErC,OAAO,EACN,CAAA;IACL,CAAC;IAJe,qBAAa,gBAI5B,CAAA;AACL,CAAC,EAVgB,OAAO,GAAP,eAAO,KAAP,eAAO,QAUvB;AAEU,QAAA,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;AAEjD,SAAS,WAAW,CAAC,IAAY;IAC7B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}
+{"version":3,"file":"Element.js","sourceRoot":"","sources":["Element.ts"],"names":[],"mappings":";;AAYA,IAAiB,OAAO,CAUvB;AAVD,WAAiB,OAAO;IACpB,SAAgB,SAAS,CAAC,EAAO;QAC7B,OAAO,EAAE,CAAC,wBAAwB,KAAK,SAAS,CAAC;IACrD,CAAC;IAFe,iBAAS,YAExB,CAAA;IAED,SAAgB,aAAa,CAAC,GAAG,IAAW;QAExC,OAAO,EACN,CAAA;IACL,CAAC;IAJe,qBAAa,gBAI5B,CAAA;AACL,CAAC,EAVgB,OAAO,GAAP,eAAO,KAAP,eAAO,QAUvB;AAEU,QAAA,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;AAEjD,SAAS,WAAW,CAAC,IAAY;IAC7B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}
 //// [test.js.map]
 {"version":3,"file":"test.js","sourceRoot":"","sources":["test.tsx"],"names":[],"mappings":";;AAAA,uCAAmC;AACnC,IAAI,aAAa,GAAG,iBAAO,CAAC,aAAa,CAAC;AAC1C,IAAI,CAIH,CAAC;AAEF,MAAM,CAAC;IACN,IAAI;QACH,OAAO;YACN,wBAAM,OAAO,EAAC,YAAY,GAAQ;YAClC,wBAAM,OAAO,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,GAAS;SAC9B,CAAC;IACH,CAAC;CACD"}
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxFactoryIdentifier.sourcemap.txt b/tests/baselines/reference/jsxFactoryIdentifier.sourcemap.txt
index b726ca466bdc4..f70e908011c89 100644
--- a/tests/baselines/reference/jsxFactoryIdentifier.sourcemap.txt
+++ b/tests/baselines/reference/jsxFactoryIdentifier.sourcemap.txt
@@ -36,7 +36,7 @@ sourceFile:Element.ts
   >                   return el.markAsChildOfRootElement !== undefined;
   >               }
   >           
-  >               export function createElement(args: any[]) {
+  >               export function createElement(...args: any[]) {
   >           
   >                   return {
   >                   }
@@ -120,7 +120,7 @@ sourceFile:Element.ts
 2 >    ^^^^^^^^^^^^^^^^^
 3 >                     ^^^^^^^^^^^^
 4 >                                 ^
-5 >                                  ^->
+5 >                                  ^^^^->
 1->
 2 >    isElement
 3 >                     (el: any): el is JSX.Element {
@@ -132,24 +132,27 @@ sourceFile:Element.ts
 3 >Emitted(8, 34) Source(16, 6) + SourceIndex(0)
 4 >Emitted(8, 35) Source(16, 6) + SourceIndex(0)
 ---
->>>    function createElement(args) {
+>>>    function createElement(...args) {
 1->^^^^
 2 >    ^^^^^^^^^
 3 >             ^^^^^^^^^^^^^
 4 >                          ^
-5 >                           ^^^^
+5 >                           ^^^
+6 >                              ^^^^
 1->
   >
   >    
 2 >    export function 
 3 >             createElement
 4 >                          (
-5 >                           args: any[]
+5 >                           ...
+6 >                              args: any[]
 1->Emitted(9, 5) Source(18, 5) + SourceIndex(0)
 2 >Emitted(9, 14) Source(18, 21) + SourceIndex(0)
 3 >Emitted(9, 27) Source(18, 34) + SourceIndex(0)
 4 >Emitted(9, 28) Source(18, 35) + SourceIndex(0)
-5 >Emitted(9, 32) Source(18, 46) + SourceIndex(0)
+5 >Emitted(9, 31) Source(18, 38) + SourceIndex(0)
+6 >Emitted(9, 35) Source(18, 49) + SourceIndex(0)
 ---
 >>>        return {};
 1 >^^^^^^^^
@@ -186,7 +189,7 @@ sourceFile:Element.ts
 5 >                                          ^^^^^^^^^^^^^^^->
 1->
 2 >    createElement
-3 >                         (args: any[]) {
+3 >                         (...args: any[]) {
   >                         
   >                                 return {
   >                                 }
@@ -221,7 +224,7 @@ sourceFile:Element.ts
   >                                                        return el.markAsChildOfRootElement !== undefined;
   >                                                    }
   >                                                
-  >                                                    export function createElement(args: any[]) {
+  >                                                    export function createElement(...args: any[]) {
   >                                                
   >                                                        return {
   >                                                        }
diff --git a/tests/baselines/reference/jsxFactoryIdentifier.symbols b/tests/baselines/reference/jsxFactoryIdentifier.symbols
index d6070f3dbc0b0..10842add31e1a 100644
--- a/tests/baselines/reference/jsxFactoryIdentifier.symbols
+++ b/tests/baselines/reference/jsxFactoryIdentifier.symbols
@@ -48,7 +48,7 @@ export namespace Element {
 >undefined : Symbol(undefined)
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 >createElement : Symbol(createElement, Decl(Element.ts, 15, 5))
 >args : Symbol(args, Decl(Element.ts, 17, 34))
 
diff --git a/tests/baselines/reference/jsxFactoryIdentifier.types b/tests/baselines/reference/jsxFactoryIdentifier.types
index ddb83d56516db..3da1917bf0673 100644
--- a/tests/baselines/reference/jsxFactoryIdentifier.types
+++ b/tests/baselines/reference/jsxFactoryIdentifier.types
@@ -45,8 +45,8 @@ export namespace Element {
 >undefined : undefined
     }
 
-    export function createElement(args: any[]) {
->createElement : (args: any[]) => {}
+    export function createElement(...args: any[]) {
+>createElement : (...args: any[]) => {}
 >args : any[]
 
         return {
@@ -56,10 +56,10 @@ export namespace Element {
 }
 
 export let createElement = Element.createElement;
->createElement : (args: any[]) => {}
->Element.createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
+>Element.createElement : (...args: any[]) => {}
 >Element : typeof Element
->createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
 
 function toCamelCase(text: string): string {
 >toCamelCase : (text: string) => string
@@ -85,10 +85,10 @@ import { Element} from './Element';
 >Element : typeof Element
 
 let createElement = Element.createElement;
->createElement : (args: any[]) => {}
->Element.createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
+>Element.createElement : (...args: any[]) => {}
 >Element : typeof Element
->createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
 
 let c: {
 >c : { a?: { b: string; }; }
@@ -105,19 +105,19 @@ class A {
 >A : A
 
 	view() {
->view : () => any[]
+>view : () => {}[]
 
 		return [
->[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : any[]
+>[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : {}[]
 
 			<meta content="helloworld"></meta>,
-><meta content="helloworld"></meta> : error
+><meta content="helloworld"></meta> : {}
 >meta : any
 >content : string
 >meta : any
 
 			<meta content={c.a!.b}></meta>
-><meta content={c.a!.b}></meta> : error
+><meta content={c.a!.b}></meta> : {}
 >meta : any
 >content : string
 >c.a!.b : string
diff --git a/tests/baselines/reference/jsxFactoryIdentifierAsParameter.types b/tests/baselines/reference/jsxFactoryIdentifierAsParameter.types
index bf7c6cebc4caa..80d453913f4cd 100644
--- a/tests/baselines/reference/jsxFactoryIdentifierAsParameter.types
+++ b/tests/baselines/reference/jsxFactoryIdentifierAsParameter.types
@@ -14,7 +14,7 @@ export class AppComponent {
 >createElement : any
 
         return <div />;
-><div /> : error
+><div /> : any
 >div : any
     }
 }
diff --git a/tests/baselines/reference/jsxFactoryQualifiedName.js b/tests/baselines/reference/jsxFactoryQualifiedName.js
index 14906d7a08770..6198f88e35c24 100644
--- a/tests/baselines/reference/jsxFactoryQualifiedName.js
+++ b/tests/baselines/reference/jsxFactoryQualifiedName.js
@@ -18,7 +18,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
@@ -58,7 +58,7 @@ var Element;
         return el.markAsChildOfRootElement !== undefined;
     }
     Element.isElement = isElement;
-    function createElement(args) {
+    function createElement(...args) {
         return {};
     }
     Element.createElement = createElement;
diff --git a/tests/baselines/reference/jsxFactoryQualifiedName.js.map b/tests/baselines/reference/jsxFactoryQualifiedName.js.map
index 619537c50ef26..68cb0b9c073fb 100644
--- a/tests/baselines/reference/jsxFactoryQualifiedName.js.map
+++ b/tests/baselines/reference/jsxFactoryQualifiedName.js.map
@@ -1,4 +1,4 @@
 //// [Element.js.map]
-{"version":3,"file":"Element.js","sourceRoot":"","sources":["Element.ts"],"names":[],"mappings":";;AAYA,IAAiB,OAAO,CAUvB;AAVD,WAAiB,OAAO;IACpB,SAAgB,SAAS,CAAC,EAAO;QAC7B,OAAO,EAAE,CAAC,wBAAwB,KAAK,SAAS,CAAC;IACrD,CAAC;IAFe,iBAAS,YAExB,CAAA;IAED,SAAgB,aAAa,CAAC,IAAW;QAErC,OAAO,EACN,CAAA;IACL,CAAC;IAJe,qBAAa,gBAI5B,CAAA;AACL,CAAC,EAVgB,OAAO,GAAP,eAAO,KAAP,eAAO,QAUvB;AAEU,QAAA,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;AAEjD,SAAS,WAAW,CAAC,IAAY;IAC7B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}
+{"version":3,"file":"Element.js","sourceRoot":"","sources":["Element.ts"],"names":[],"mappings":";;AAYA,IAAiB,OAAO,CAUvB;AAVD,WAAiB,OAAO;IACpB,SAAgB,SAAS,CAAC,EAAO;QAC7B,OAAO,EAAE,CAAC,wBAAwB,KAAK,SAAS,CAAC;IACrD,CAAC;IAFe,iBAAS,YAExB,CAAA;IAED,SAAgB,aAAa,CAAC,GAAG,IAAW;QAExC,OAAO,EACN,CAAA;IACL,CAAC;IAJe,qBAAa,gBAI5B,CAAA;AACL,CAAC,EAVgB,OAAO,GAAP,eAAO,KAAP,eAAO,QAUvB;AAEU,QAAA,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;AAEjD,SAAS,WAAW,CAAC,IAAY;IAC7B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC"}
 //// [test.js.map]
 {"version":3,"file":"test.js","sourceRoot":"","sources":["test.tsx"],"names":[],"mappings":";;AAAA,uCAAmC;AAEnC,IAAI,CAIH,CAAC;AAEF,MAAM,CAAC;IACN,IAAI;QACH,OAAO;YACN,0CAAM,OAAO,EAAC,YAAY,GAAQ;YAClC,0CAAM,OAAO,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,GAAS;SAC9B,CAAC;IACH,CAAC;CACD"}
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxFactoryQualifiedName.sourcemap.txt b/tests/baselines/reference/jsxFactoryQualifiedName.sourcemap.txt
index 012613d79608b..df15d2416cd31 100644
--- a/tests/baselines/reference/jsxFactoryQualifiedName.sourcemap.txt
+++ b/tests/baselines/reference/jsxFactoryQualifiedName.sourcemap.txt
@@ -36,7 +36,7 @@ sourceFile:Element.ts
   >                   return el.markAsChildOfRootElement !== undefined;
   >               }
   >           
-  >               export function createElement(args: any[]) {
+  >               export function createElement(...args: any[]) {
   >           
   >                   return {
   >                   }
@@ -120,7 +120,7 @@ sourceFile:Element.ts
 2 >    ^^^^^^^^^^^^^^^^^
 3 >                     ^^^^^^^^^^^^
 4 >                                 ^
-5 >                                  ^->
+5 >                                  ^^^^->
 1->
 2 >    isElement
 3 >                     (el: any): el is JSX.Element {
@@ -132,24 +132,27 @@ sourceFile:Element.ts
 3 >Emitted(8, 34) Source(16, 6) + SourceIndex(0)
 4 >Emitted(8, 35) Source(16, 6) + SourceIndex(0)
 ---
->>>    function createElement(args) {
+>>>    function createElement(...args) {
 1->^^^^
 2 >    ^^^^^^^^^
 3 >             ^^^^^^^^^^^^^
 4 >                          ^
-5 >                           ^^^^
+5 >                           ^^^
+6 >                              ^^^^
 1->
   >
   >    
 2 >    export function 
 3 >             createElement
 4 >                          (
-5 >                           args: any[]
+5 >                           ...
+6 >                              args: any[]
 1->Emitted(9, 5) Source(18, 5) + SourceIndex(0)
 2 >Emitted(9, 14) Source(18, 21) + SourceIndex(0)
 3 >Emitted(9, 27) Source(18, 34) + SourceIndex(0)
 4 >Emitted(9, 28) Source(18, 35) + SourceIndex(0)
-5 >Emitted(9, 32) Source(18, 46) + SourceIndex(0)
+5 >Emitted(9, 31) Source(18, 38) + SourceIndex(0)
+6 >Emitted(9, 35) Source(18, 49) + SourceIndex(0)
 ---
 >>>        return {};
 1 >^^^^^^^^
@@ -186,7 +189,7 @@ sourceFile:Element.ts
 5 >                                          ^^^^^^^^^^^^^^^->
 1->
 2 >    createElement
-3 >                         (args: any[]) {
+3 >                         (...args: any[]) {
   >                         
   >                                 return {
   >                                 }
@@ -221,7 +224,7 @@ sourceFile:Element.ts
   >                                                        return el.markAsChildOfRootElement !== undefined;
   >                                                    }
   >                                                
-  >                                                    export function createElement(args: any[]) {
+  >                                                    export function createElement(...args: any[]) {
   >                                                
   >                                                        return {
   >                                                        }
diff --git a/tests/baselines/reference/jsxFactoryQualifiedName.symbols b/tests/baselines/reference/jsxFactoryQualifiedName.symbols
index 00de54d5d0767..240f5276be4f2 100644
--- a/tests/baselines/reference/jsxFactoryQualifiedName.symbols
+++ b/tests/baselines/reference/jsxFactoryQualifiedName.symbols
@@ -48,7 +48,7 @@ export namespace Element {
 >undefined : Symbol(undefined)
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 >createElement : Symbol(createElement, Decl(Element.ts, 15, 5))
 >args : Symbol(args, Decl(Element.ts, 17, 34))
 
diff --git a/tests/baselines/reference/jsxFactoryQualifiedName.types b/tests/baselines/reference/jsxFactoryQualifiedName.types
index 881bfe71ae1f2..3b97109080e3e 100644
--- a/tests/baselines/reference/jsxFactoryQualifiedName.types
+++ b/tests/baselines/reference/jsxFactoryQualifiedName.types
@@ -45,8 +45,8 @@ export namespace Element {
 >undefined : undefined
     }
 
-    export function createElement(args: any[]) {
->createElement : (args: any[]) => {}
+    export function createElement(...args: any[]) {
+>createElement : (...args: any[]) => {}
 >args : any[]
 
         return {
@@ -56,10 +56,10 @@ export namespace Element {
 }
 
 export let createElement = Element.createElement;
->createElement : (args: any[]) => {}
->Element.createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
+>Element.createElement : (...args: any[]) => {}
 >Element : typeof Element
->createElement : (args: any[]) => {}
+>createElement : (...args: any[]) => {}
 
 function toCamelCase(text: string): string {
 >toCamelCase : (text: string) => string
@@ -99,19 +99,19 @@ class A {
 >A : A
 
 	view() {
->view : () => any[]
+>view : () => {}[]
 
 		return [
->[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : any[]
+>[			<meta content="helloworld"></meta>,			<meta content={c.a!.b}></meta>		] : {}[]
 
 			<meta content="helloworld"></meta>,
-><meta content="helloworld"></meta> : error
+><meta content="helloworld"></meta> : {}
 >meta : any
 >content : string
 >meta : any
 
 			<meta content={c.a!.b}></meta>
-><meta content={c.a!.b}></meta> : error
+><meta content={c.a!.b}></meta> : {}
 >meta : any
 >content : string
 >c.a!.b : string
diff --git a/tests/baselines/reference/tsxAttributesHasInferrableIndex.errors.txt b/tests/baselines/reference/tsxAttributesHasInferrableIndex.errors.txt
new file mode 100644
index 0000000000000..04a0b577a8f83
--- /dev/null
+++ b/tests/baselines/reference/tsxAttributesHasInferrableIndex.errors.txt
@@ -0,0 +1,23 @@
+tests/cases/compiler/tsxAttributesHasInferrableIndex.tsx(15,12): error TS2345: Argument of type '(attributes: Attributes | undefined, contents: string[]) => string' is not assignable to parameter of type 'string'.
+
+
+==== tests/cases/compiler/tsxAttributesHasInferrableIndex.tsx (1 errors) ====
+    type AttributeValue = number | string | Date | boolean;
+    interface Attributes {
+        [key: string]: AttributeValue;
+    }
+    function createElement(name: string, attributes: Attributes | undefined, ...contents: string[]) {
+        return name;
+    }
+    namespace createElement.JSX {
+        type Element = string;
+    }
+    
+    function Button(attributes: Attributes | undefined, contents: string[]) {
+        return '';
+    }
+    const b = <Button></Button>
+               ~~~~~~
+!!! error TS2345: Argument of type '(attributes: Attributes | undefined, contents: string[]) => string' is not assignable to parameter of type 'string'.
+!!! related TS6212 tests/cases/compiler/tsxAttributesHasInferrableIndex.tsx:15:12: Did you mean to call this expression?
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxAttributesHasInferrableIndex.types b/tests/baselines/reference/tsxAttributesHasInferrableIndex.types
index 25e76e39628ac..2f98c243ef540 100644
--- a/tests/baselines/reference/tsxAttributesHasInferrableIndex.types
+++ b/tests/baselines/reference/tsxAttributesHasInferrableIndex.types
@@ -29,8 +29,8 @@ function Button(attributes: Attributes | undefined, contents: string[]) {
 >'' : ""
 }
 const b = <Button></Button>
->b : error
-><Button></Button> : error
+>b : any
+><Button></Button> : any
 >Button : (attributes: Attributes | undefined, contents: string[]) => string
 >Button : (attributes: Attributes | undefined, contents: string[]) => string
 
diff --git a/tests/cases/compiler/jsxFactoryAndReactNamespace.ts b/tests/cases/compiler/jsxFactoryAndReactNamespace.ts
index 2bdc954da3af8..ec430de35171d 100644
--- a/tests/cases/compiler/jsxFactoryAndReactNamespace.ts
+++ b/tests/cases/compiler/jsxFactoryAndReactNamespace.ts
@@ -1,10 +1,10 @@
-//@jsx: react
-//@target: es6
-//@module: commonjs
-//@reactNamespace: Element
-//@jsxFactory: Element.createElement
-
-// @filename: Element.ts
+//@jsx: react
+//@target: es6
+//@module: commonjs
+//@reactNamespace: Element
+//@jsxFactory: Element.createElement
+
+// @filename: Element.ts
 declare namespace JSX {
     interface Element {
         name: string;
@@ -22,7 +22,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
@@ -33,9 +33,9 @@ export let createElement = Element.createElement;
 
 function toCamelCase(text: string): string {
     return text[0].toLowerCase() + text.substring(1);
-}
-
-// @filename: test.tsx
+}
+
+// @filename: test.tsx
 import { Element} from './Element';
 
 let c: {
diff --git a/tests/cases/compiler/jsxFactoryIdentifier.ts b/tests/cases/compiler/jsxFactoryIdentifier.ts
index 0ea5c7e850da5..fccfdedfd7f6f 100644
--- a/tests/cases/compiler/jsxFactoryIdentifier.ts
+++ b/tests/cases/compiler/jsxFactoryIdentifier.ts
@@ -22,7 +22,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
diff --git a/tests/cases/compiler/jsxFactoryQualifiedName.ts b/tests/cases/compiler/jsxFactoryQualifiedName.ts
index 769b7cd566d78..409289dce18fe 100644
--- a/tests/cases/compiler/jsxFactoryQualifiedName.ts
+++ b/tests/cases/compiler/jsxFactoryQualifiedName.ts
@@ -1,10 +1,10 @@
-//@jsx: react
-//@target: es6
-//@module: commonjs
-//@jsxFactory: Element.createElement
-//@sourcemap: true
-
-// @filename: Element.ts
+//@jsx: react
+//@target: es6
+//@module: commonjs
+//@jsxFactory: Element.createElement
+//@sourcemap: true
+
+// @filename: Element.ts
 declare namespace JSX {
     interface Element {
         name: string;
@@ -22,7 +22,7 @@ export namespace Element {
         return el.markAsChildOfRootElement !== undefined;
     }
 
-    export function createElement(args: any[]) {
+    export function createElement(...args: any[]) {
 
         return {
         }
@@ -33,9 +33,9 @@ export let createElement = Element.createElement;
 
 function toCamelCase(text: string): string {
     return text[0].toLowerCase() + text.substring(1);
-}
-
-// @filename: test.tsx
+}
+
+// @filename: test.tsx
 import { Element} from './Element';
 
 let c: {
diff --git a/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarations.tsx b/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarations.tsx
index f574c7e9db9b5..6298d997c1e07 100644
--- a/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarations.tsx
+++ b/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarations.tsx
@@ -7,9 +7,9 @@ declare global {
         }
     }
 }
-export function dom(): void;
-export function otherdom(): void;
-export function createElement(): void;
+export function dom(...args: any[]): void;
+export function otherdom(...args: any[]): void;
+export function createElement(...args: any[]): void;
 export { dom as default };
 // @filename: otherreacty.tsx
 /** @jsx React.createElement */
diff --git a/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarationsLocalTypes.tsx b/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarationsLocalTypes.tsx
index 009abe2e852c8..8a98b5b6eccd8 100644
--- a/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarationsLocalTypes.tsx
+++ b/tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarationsLocalTypes.tsx
@@ -18,7 +18,7 @@ export namespace dom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function dom(): dom.JSX.Element;
+export function dom(...args: any[]): dom.JSX.Element;
 // @filename: renderer2.d.ts
 export namespace predom {
     namespace JSX {
@@ -38,7 +38,7 @@ export namespace predom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 // @filename: component.tsx
 /** @jsx predom */
 import { predom } from "./renderer2"
diff --git a/tests/cases/conformance/jsx/inline/inlineJsxFactoryLocalTypeGlobalFallback.tsx b/tests/cases/conformance/jsx/inline/inlineJsxFactoryLocalTypeGlobalFallback.tsx
index 3f4340f518b4b..7a32e44bff841 100644
--- a/tests/cases/conformance/jsx/inline/inlineJsxFactoryLocalTypeGlobalFallback.tsx
+++ b/tests/cases/conformance/jsx/inline/inlineJsxFactoryLocalTypeGlobalFallback.tsx
@@ -14,7 +14,7 @@ declare global {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function dom(): JSX.Element;
+export function dom(...args: any[]): JSX.Element;
 // @filename: renderer2.d.ts
 export namespace predom {
     namespace JSX {
@@ -30,7 +30,7 @@ export namespace predom {
         interface ElementChildrenAttribute { children: any; }
     }
 }
-export function predom(): predom.JSX.Element;
+export function predom(...args: any[]): predom.JSX.Element;
 // @filename: component.tsx
 /** @jsx predom */
 import { predom } from "./renderer2"
diff --git a/tests/cases/conformance/jsx/inline/inlineJsxFactoryOverridesCompilerOption.tsx b/tests/cases/conformance/jsx/inline/inlineJsxFactoryOverridesCompilerOption.tsx
index 4efd32876ad41..6bb080558a369 100644
--- a/tests/cases/conformance/jsx/inline/inlineJsxFactoryOverridesCompilerOption.tsx
+++ b/tests/cases/conformance/jsx/inline/inlineJsxFactoryOverridesCompilerOption.tsx
@@ -8,7 +8,7 @@ declare global {
         }
     }
 }
-export function dom(): void;
+export function dom(...args: any[]): void;
 export { dom as p };
 // @filename: reacty.tsx
 /** @jsx dom */
diff --git a/tests/cases/conformance/jsx/inline/inlineJsxFactoryWithFragmentIsError.tsx b/tests/cases/conformance/jsx/inline/inlineJsxFactoryWithFragmentIsError.tsx
index 280ac26b5ce1c..f7277989ed056 100644
--- a/tests/cases/conformance/jsx/inline/inlineJsxFactoryWithFragmentIsError.tsx
+++ b/tests/cases/conformance/jsx/inline/inlineJsxFactoryWithFragmentIsError.tsx
@@ -7,8 +7,8 @@ declare global {
         }
     }
 }
-export function dom(): void;
-export function createElement(): void;
+export function dom(...args: any[]): void;
+export function createElement(...args: any[]): void;
 // @filename: reacty.tsx
 /** @jsx React.createElement */
 import * as React from "./renderer";

From 2e29b4514f81d43cc8ef5d67b2b321cfac6443a2 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wwigham@gmail.com>
Date: Tue, 12 Feb 2019 20:45:13 -0800
Subject: [PATCH 2/7] fix lint

---
 src/compiler/checker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 94c9145d008c7..89aa5a432e24f 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -20471,7 +20471,7 @@ namespace ts {
                     links.jsxFactoryCall.end = node.end;
                     links.jsxFactoryCall.parent = node.parent;
                 }
-                const result =  getReturnTypeOfSignature(getResolvedSignature(links.jsxFactoryCall));
+                const result = getReturnTypeOfSignature(getResolvedSignature(links.jsxFactoryCall));
                 if (result === errorType) {
                     return getJsxElementTypeAt(node) || errorType;
                 }

From 97287b9aea491f5cf16ce82b18f749245f1e032d Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Wed, 27 Feb 2019 16:58:20 -0800
Subject: [PATCH 3/7] Handle error spans on manufactured checked nodes, add
 petit-dom test (its nice and small)

---
 src/compiler/checker.ts                       |    2 +
 src/compiler/utilities.ts                     |    7 +-
 .../baselines/reference/petitDomSimpleJsx.js  |  870 +++++++
 .../reference/petitDomSimpleJsx.symbols       | 2047 ++++++++++++++++
 .../reference/petitDomSimpleJsx.types         | 2101 +++++++++++++++++
 tests/cases/compiler/petitDomSimpleJsx.tsx    |  563 +++++
 6 files changed, 5589 insertions(+), 1 deletion(-)
 create mode 100644 tests/baselines/reference/petitDomSimpleJsx.js
 create mode 100644 tests/baselines/reference/petitDomSimpleJsx.symbols
 create mode 100644 tests/baselines/reference/petitDomSimpleJsx.types
 create mode 100644 tests/cases/compiler/petitDomSimpleJsx.tsx

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 89aa5a432e24f..96439c9568561 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -20122,6 +20122,7 @@ namespace ts {
                     // Fake up a property declaration for the children
                     childrenPropSymbol.valueDeclaration = createPropertySignature(/*modifiers*/ undefined, unescapeLeadingUnderscores(jsxChildrenPropertyName), /*questionToken*/ undefined, /*type*/ undefined, /*initializer*/ undefined);
                     childrenPropSymbol.valueDeclaration.parent = attributes;
+                    childrenPropSymbol.valueDeclaration.original = parent;
                     childrenPropSymbol.valueDeclaration.symbol = childrenPropSymbol;
                     const childPropMap = createSymbolTable();
                     childPropMap.set(jsxChildrenPropertyName, childrenPropSymbol);
@@ -21747,6 +21748,7 @@ namespace ts {
 
         function createSyntheticExpression(parent: Node, type: Type | ((mode: CheckMode | undefined) => Type), isSpread?: boolean) {
             const result = <SyntheticExpression>createNode(SyntaxKind.SyntheticExpression, parent.pos, parent.end);
+            result.original = parent;
             result.parent = parent;
             result.type = type;
             result.isSpread = isSpread || false;
diff --git a/src/compiler/utilities.ts b/src/compiler/utilities.ts
index facc13ada282f..3c95e079adfe9 100644
--- a/src/compiler/utilities.ts
+++ b/src/compiler/utilities.ts
@@ -317,10 +317,11 @@ namespace ts {
     export function getSourceFileOfNode(node: Node): SourceFile;
     export function getSourceFileOfNode(node: Node | undefined): SourceFile | undefined;
     export function getSourceFileOfNode(node: Node): SourceFile {
+        const root = node;
         while (node && node.kind !== SyntaxKind.SourceFile) {
             node = node.parent;
         }
-        return <SourceFile>node;
+        return <SourceFile>node || (root && root.original && getSourceFileOfNode(root.original));
     }
 
     export function isStatementWithLocals(node: Node) {
@@ -938,6 +939,9 @@ namespace ts {
     }
 
     export function getErrorSpanForNode(sourceFile: SourceFile, node: Node): TextSpan {
+        while (node.original) {
+            node = node.original;
+        }
         let errorNode: Node | undefined = node;
         switch (node.kind) {
             case SyntaxKind.SourceFile:
@@ -3038,6 +3042,7 @@ namespace ts {
             case SyntaxKind.TemplateExpression:
             case SyntaxKind.ParenthesizedExpression:
             case SyntaxKind.OmittedExpression:
+            case SyntaxKind.SyntheticExpression:
                 return 20;
 
             default:
diff --git a/tests/baselines/reference/petitDomSimpleJsx.js b/tests/baselines/reference/petitDomSimpleJsx.js
new file mode 100644
index 0000000000000..667d791002bcf
--- /dev/null
+++ b/tests/baselines/reference/petitDomSimpleJsx.js
@@ -0,0 +1,870 @@
+//// [tests/cases/compiler/petitDomSimpleJsx.tsx] ////
+
+//// [index.d.ts]
+// Modified type definitions for Petit-Dom 0.2
+// Project: https://github.com/yelouafi/petit-dom
+// Definitions by: James Messinger <https://github.com/JamesMessinger>, modified by @weswigham for testing
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.4
+
+/**
+ * Creates a VNode of the specified HTML Element type and with the
+ * specified properties and contents.
+ *
+ * @param type - The tag name of element to create
+ * @param props - Properties to set on the element
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
+    type: T,
+    props?: PetitDom.Props<E> | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ElementNode<T, E>;
+
+/**
+ * Creates a VNode using a PetitDom component object.
+ *
+ * @param type - A PetitDom component object
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.Component<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ComponentNode<P>;
+
+/**
+ * Creates a VNode using a PetitDom component class.
+ *
+ * @param type - A PetitDom component class
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.ComponentClass<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ComponentClassNode<P>;
+
+/**
+ * Creates a VNode using a PetitDom function component.
+ *
+ * This function is compatible with both JSX and HyperScript syntax.
+ *
+ * @param type - A PetitDom function component
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.FunctionComponent<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.FunctionComponentNode<P>;
+
+/**
+ * Creates actual DOM Elements for the given VNode and its children.
+ *
+ * @param vnode - The VNode object to mount
+ * @returns The newly-created DOM element
+ */
+export function mount(vnode: PetitDom.VNode): Element;
+
+/**
+ * Diffs two VNodes and applies the necessary DOM changes
+ *
+ * @param newVNode - The new VNode object, which will be mounted to the DOM element of oldVNode
+ * @param oldVNode - The old VNode object to diff against
+ * @param parent - The parent DOM element. Used internally by PetitDom to recursively patch child nodes
+ * @returns The updated DOM element. This element is also moved from oldVNode to newVNode
+ */
+export function patch(newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element): Element;
+
+/**
+ * Removes the given VNode from the actual DOM
+ *
+ * @param vnode - The VNode object to unmount
+ */
+export function unmount(vnode: PetitDom.VNode): void;
+
+export namespace PetitDom {
+    type Key = string | number;
+    type ComponentProps = object;
+    interface ContentArray extends ReadonlyArray<Content> {}
+    type Content = string | VNode | ContentArray;
+
+    type DOMElementProps<E extends Element> = {
+        [P in keyof E]?: E[P];
+    };
+
+    interface IntrinsicProps {
+        content?: Content | ReadonlyArray<Content>;
+        key?: Key;
+    }
+
+    type Props<E extends Element = Element> = IntrinsicProps & DOMElementProps<E>;
+
+    type ShouldUpdate<P extends ComponentProps> = (
+        newProps: P,
+        oldProps: P,
+        newContent: ReadonlyArray<VNode>,
+        oldContent: ReadonlyArray<VNode>
+    ) => boolean;
+
+    interface FunctionComponent<P extends ComponentProps> {
+        (props: P, content: ReadonlyArray<Content>): FunctionComponentNode<P>;
+        shouldUpdate?: ShouldUpdate<P>;
+    }
+
+    interface ComponentClass<P extends ComponentProps> {
+        new(props: P, content: ReadonlyArray<Content>): Component<P>;
+    }
+
+    interface Component<P extends ComponentProps> {
+        mount(props: P, content: ReadonlyArray<VNode>): Element;
+        patch(element: Element, newProps: P, oldProps: P, newContent: ReadonlyArray<VNode>, oldContent: ReadonlyArray<VNode>): Element;
+        unmount(element: Element): void;
+    }
+
+    interface VNode {
+        readonly isSVG: boolean;
+        readonly type: any;
+        readonly key: Key | null;
+        readonly props: any;
+        readonly content: ReadonlyArray<VNode>;
+    }
+
+    interface ElementNode<T extends keyof DomElements, E extends DomElements[T]> extends VNode {
+        readonly type: T;
+        readonly props: Props<E>;
+    }
+
+    interface ComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: Component<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface ComponentClassNode<P extends ComponentProps> extends VNode {
+        readonly type: ComponentClass<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface FunctionComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: FunctionComponent<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
+        "main": HTMLMainElement;
+    }
+}
+
+declare global {
+    namespace JSX {
+        // tslint:disable-next-line:no-empty-interface
+        interface Element extends PetitDom.VNode { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface ElementClass extends PetitDom.Component<PetitDom.ComponentProps> { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicClassAttributes<T> extends PetitDom.Props { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicAttributes extends PetitDom.IntrinsicProps { }
+
+        interface ElementAttributesProperty { props: PetitDom.Props; }
+
+        interface ElementChildrenAttribute { content: PetitDom.VNode[]; }
+
+        type IntrinsicElements = {
+            [P in keyof PetitDom.DomElements]:
+            PetitDom.Props<PetitDom.DomElements[P]> &
+            {
+                content?: PetitDom.Content | ReadonlyArray<PetitDom.Content>;
+            };
+        };
+    }
+}
+
+//// [petit-dom-tests.tsx]
+/* @jsx h */
+// tslint:disable:no-empty
+// tslint:disable:no-null-keyword
+
+import { h, mount, patch, PetitDom, unmount } from "petit-dom";
+
+function assertEqual<T>(a: T, b: T) { }
+
+function eventHandler(event: Event): void { }
+
+interface CustomProps {
+    name: string;
+    count: number;
+    onSomeEvent(event: Event): void;
+}
+
+/**
+ * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithTextContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
+
+    assertEqual(aNode.isSVG, false);
+    assertEqual(aNode.type, "a");
+    assertEqual(aNode.key, null);
+    assertEqual(aNode.props.href, "link");
+    assertEqual(aNode.props.onclick, eventHandler);
+    assertEqual(aNode.content.length, 1);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <a href="link" onclick={eventHandler}>click here</a>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLAnchorElement>;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "a");
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.href, "link");
+    assertEqual(jsxNodeProps.onclick, eventHandler);
+    assertEqual(jsxNode.content.length, 1);
+}
+
+/**
+ * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithMixedContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const formNode = h(
+        "form",
+        { key: 1, method: "POST", onsubmit: eventHandler },
+        "Hello ", h("span", null, "World")
+    );
+
+    assertEqual(formNode.isSVG, false);
+    assertEqual(formNode.type, "form");
+    assertEqual(formNode.key, 1);
+    assertEqual(formNode.props.method, "POST");
+    assertEqual(formNode.props.onsubmit, eventHandler);
+    assertEqual(formNode.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLFormElement>;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "form");
+    assertEqual(jsxNode.key, 1);
+    assertEqual(jsxNodeProps.method, "POST");
+    assertEqual(jsxNodeProps.onsubmit, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+
+/**
+ * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+ */
+export function testSvgElementWithChild() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
+
+    assertEqual(svgNode.isSVG, true);
+    assertEqual(svgNode.type, "svg");
+    assertEqual(svgNode.key, 2);
+    assertEqual(svgNode.props.currentScale, 1);
+    assertEqual(svgNode.content.length, 1);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <svg key={2} currentScale={1}><path /></svg>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<SVGSVGElement>;
+
+    assertEqual(jsxNode.isSVG, true);
+    assertEqual(jsxNodeType, "svg");
+    assertEqual(jsxNode.key, 2);
+    assertEqual(jsxNodeProps.currentScale, 1);
+    assertEqual(jsxNode.content.length, 1);
+}
+
+/**
+ * Create a function component, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponent() {
+    function FunctionComponent(): JSX.Element {
+        return <div>Hello World</div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponent, { key: "1" });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponent);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponent key="1" />;
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<{}>;
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponent);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a function component with props, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithProps() {
+    function FunctionComponentWithProps(props: CustomProps): JSX.Element {
+        const { name, count, onSomeEvent } = props;
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}></div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a function component with child content, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithChildren() {
+    function FunctionComponentWithChildren(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): JSX.Element {
+        const { name, count, onSomeEvent } = props;
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(
+        FunctionComponentWithChildren,
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello",
+        h("span", null, "World")
+    );
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+        <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+            Hello <span>World</span>
+        </FunctionComponentWithChildren>
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+
+/**
+ * Create a component class, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClass() {
+    class ComponentClass {
+        props = {};
+
+        mount(): Element {
+            return mount(<div className="some-class"></div>);
+        }
+
+        patch(element: Element, newProps: object, oldProps: object, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div>Hello World</div>);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClass, { key: "1" });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClass);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClass key="1" />;
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<{}>;
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClass);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a component class with props, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithProps() {
+    class ComponentClassWithProps {
+        props: CustomProps;
+
+        constructor(props: CustomProps) {
+            this.props = props;
+        }
+
+        mount(props: CustomProps): Element {
+            const { name, count, onSomeEvent } = props;
+            return mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />);
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div> Hello World</div >);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a component class with child content, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithChildren() {
+    class ComponentClassWithChildren {
+        props: CustomProps;
+
+        constructor(props: CustomProps) {
+            this.props = props;
+        }
+
+        mount(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): Element {
+            const { name, count, onSomeEvent } = props;
+            return mount(
+                <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>
+            );
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div> Hello World</div >);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(
+        ComponentClassWithChildren,
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello",
+        h("span", null, "World")
+    );
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+        <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+            Hello <span>World</span>
+        </ComponentClassWithChildren>
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+
+
+//// [petit-dom-tests.js]
+"use strict";
+/* @jsx h */
+// tslint:disable:no-empty
+// tslint:disable:no-null-keyword
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var petit_dom_1 = require("petit-dom");
+function assertEqual(a, b) { }
+function eventHandler(event) { }
+/**
+ * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+ */
+function testHtmlElementWithTextContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    var aNode = petit_dom_1.h("a", { href: "link", onclick: eventHandler }, "click here");
+    assertEqual(aNode.isSVG, false);
+    assertEqual(aNode.type, "a");
+    assertEqual(aNode.key, null);
+    assertEqual(aNode.props.href, "link");
+    assertEqual(aNode.props.onclick, eventHandler);
+    assertEqual(aNode.content.length, 1);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h("a", { href: "link", onclick: eventHandler }, "click here");
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "a");
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.href, "link");
+    assertEqual(jsxNodeProps.onclick, eventHandler);
+    assertEqual(jsxNode.content.length, 1);
+}
+exports.testHtmlElementWithTextContent = testHtmlElementWithTextContent;
+/**
+ * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+ */
+function testHtmlElementWithMixedContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    var formNode = petit_dom_1.h("form", { key: 1, method: "POST", onsubmit: eventHandler }, "Hello ", petit_dom_1.h("span", null, "World"));
+    assertEqual(formNode.isSVG, false);
+    assertEqual(formNode.type, "form");
+    assertEqual(formNode.key, 1);
+    assertEqual(formNode.props.method, "POST");
+    assertEqual(formNode.props.onsubmit, eventHandler);
+    assertEqual(formNode.content.length, 2);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h("form", { key: 1, method: "POST", onsubmit: eventHandler },
+        "Hello ",
+        petit_dom_1.h("span", null, "World"));
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "form");
+    assertEqual(jsxNode.key, 1);
+    assertEqual(jsxNodeProps.method, "POST");
+    assertEqual(jsxNodeProps.onsubmit, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+exports.testHtmlElementWithMixedContent = testHtmlElementWithMixedContent;
+/**
+ * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+ */
+function testSvgElementWithChild() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    var svgNode = petit_dom_1.h("svg", { key: 2, currentScale: 1 }, petit_dom_1.h("path"));
+    assertEqual(svgNode.isSVG, true);
+    assertEqual(svgNode.type, "svg");
+    assertEqual(svgNode.key, 2);
+    assertEqual(svgNode.props.currentScale, 1);
+    assertEqual(svgNode.content.length, 1);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h("svg", { key: 2, currentScale: 1 },
+        petit_dom_1.h("path", null));
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, true);
+    assertEqual(jsxNodeType, "svg");
+    assertEqual(jsxNode.key, 2);
+    assertEqual(jsxNodeProps.currentScale, 1);
+    assertEqual(jsxNode.content.length, 1);
+}
+exports.testSvgElementWithChild = testSvgElementWithChild;
+/**
+ * Create a function component, using HyperScript syntax and JSX syntax
+ */
+function testFunctionComponent() {
+    function FunctionComponent() {
+        return petit_dom_1.h("div", null, "Hello World");
+    }
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    var node = petit_dom_1.h(FunctionComponent, { key: "1" });
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponent);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h(FunctionComponent, { key: "1" });
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponent);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+exports.testFunctionComponent = testFunctionComponent;
+/**
+ * Create a function component with props, using HyperScript syntax and JSX syntax
+ */
+function testFunctionComponentWithProps() {
+    function FunctionComponentWithProps(props) {
+        var name = props.name, count = props.count, onSomeEvent = props.onSomeEvent;
+        return petit_dom_1.h("div", { className: name, tabIndex: count, onclick: onSomeEvent });
+    }
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    var node = petit_dom_1.h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+exports.testFunctionComponentWithProps = testFunctionComponentWithProps;
+/**
+ * Create a function component with child content, using HyperScript syntax and JSX syntax
+ */
+function testFunctionComponentWithChildren() {
+    function FunctionComponentWithChildren(props, content) {
+        var name = props.name, count = props.count, onSomeEvent = props.onSomeEvent;
+        return petit_dom_1.h("div", { className: name, tabIndex: count, onclick: onSomeEvent }, content);
+    }
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    var node = petit_dom_1.h(FunctionComponentWithChildren, { name: "xyz", count: 123, onSomeEvent: eventHandler }, "Hello", petit_dom_1.h("span", null, "World"));
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = (petit_dom_1.h(FunctionComponentWithChildren, { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello ",
+        petit_dom_1.h("span", null, "World")));
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+exports.testFunctionComponentWithChildren = testFunctionComponentWithChildren;
+/**
+ * Create a component class, using HyperScript syntax and JSX syntax
+ */
+function testComponentClass() {
+    var ComponentClass = /** @class */ (function () {
+        function ComponentClass() {
+            this.props = {};
+        }
+        ComponentClass.prototype.mount = function () {
+            return petit_dom_1.mount(petit_dom_1.h("div", { className: "some-class" }));
+        };
+        ComponentClass.prototype.patch = function (element, newProps, oldProps, newContent, oldContent) {
+            petit_dom_1.patch(petit_dom_1.h("div", __assign({}, oldProps), oldContent), petit_dom_1.h("div", __assign({}, newProps), newContent));
+            return element;
+        };
+        ComponentClass.prototype.unmount = function (element) {
+            petit_dom_1.unmount(petit_dom_1.h("div", null, "Hello World"));
+        };
+        return ComponentClass;
+    }());
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    var node = petit_dom_1.h(ComponentClass, { key: "1" });
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClass);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h(ComponentClass, { key: "1" });
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClass);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+exports.testComponentClass = testComponentClass;
+/**
+ * Create a component class with props, using HyperScript syntax and JSX syntax
+ */
+function testComponentClassWithProps() {
+    var ComponentClassWithProps = /** @class */ (function () {
+        function ComponentClassWithProps(props) {
+            this.props = props;
+        }
+        ComponentClassWithProps.prototype.mount = function (props) {
+            var name = props.name, count = props.count, onSomeEvent = props.onSomeEvent;
+            return petit_dom_1.mount(petit_dom_1.h("div", { className: name, tabIndex: count, onclick: onSomeEvent }));
+        };
+        ComponentClassWithProps.prototype.patch = function (element, newProps, oldProps, newContent, oldContent) {
+            petit_dom_1.patch(petit_dom_1.h("div", __assign({}, oldProps), oldContent), petit_dom_1.h("div", __assign({}, newProps), newContent));
+            return element;
+        };
+        ComponentClassWithProps.prototype.unmount = function (element) {
+            petit_dom_1.unmount(petit_dom_1.h("div", null, " Hello World"));
+        };
+        return ComponentClassWithProps;
+    }());
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    var node = petit_dom_1.h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = petit_dom_1.h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+exports.testComponentClassWithProps = testComponentClassWithProps;
+/**
+ * Create a component class with child content, using HyperScript syntax and JSX syntax
+ */
+function testComponentClassWithChildren() {
+    var ComponentClassWithChildren = /** @class */ (function () {
+        function ComponentClassWithChildren(props) {
+            this.props = props;
+        }
+        ComponentClassWithChildren.prototype.mount = function (props, content) {
+            var name = props.name, count = props.count, onSomeEvent = props.onSomeEvent;
+            return petit_dom_1.mount(petit_dom_1.h("div", { className: name, tabIndex: count, onclick: onSomeEvent }, content));
+        };
+        ComponentClassWithChildren.prototype.patch = function (element, newProps, oldProps, newContent, oldContent) {
+            petit_dom_1.patch(petit_dom_1.h("div", __assign({}, oldProps), oldContent), petit_dom_1.h("div", __assign({}, newProps), newContent));
+            return element;
+        };
+        ComponentClassWithChildren.prototype.unmount = function (element) {
+            petit_dom_1.unmount(petit_dom_1.h("div", null, " Hello World"));
+        };
+        return ComponentClassWithChildren;
+    }());
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    var node = petit_dom_1.h(ComponentClassWithChildren, { name: "xyz", count: 123, onSomeEvent: eventHandler }, "Hello", petit_dom_1.h("span", null, "World"));
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    var jsxNode = (petit_dom_1.h(ComponentClassWithChildren, { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello ",
+        petit_dom_1.h("span", null, "World")));
+    var jsxNodeType = jsxNode.type;
+    var jsxNodeProps = jsxNode.props;
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+exports.testComponentClassWithChildren = testComponentClassWithChildren;
diff --git a/tests/baselines/reference/petitDomSimpleJsx.symbols b/tests/baselines/reference/petitDomSimpleJsx.symbols
new file mode 100644
index 0000000000000..48bf5e5d8893e
--- /dev/null
+++ b/tests/baselines/reference/petitDomSimpleJsx.symbols
@@ -0,0 +1,2047 @@
+=== tests/cases/compiler/node_modules/petit-dom/index.d.ts ===
+// Modified type definitions for Petit-Dom 0.2
+// Project: https://github.com/yelouafi/petit-dom
+// Definitions by: James Messinger <https://github.com/JamesMessinger>, modified by @weswigham for testing
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.4
+
+/**
+ * Creates a VNode of the specified HTML Element type and with the
+ * specified properties and contents.
+ *
+ * @param type - The tag name of element to create
+ * @param props - Properties to set on the element
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
+>h : Symbol(h, Decl(index.d.ts, 0, 0), Decl(index.d.ts, 19, 30), Decl(index.d.ts, 33, 29), Decl(index.d.ts, 47, 34))
+>T : Symbol(T, Decl(index.d.ts, 15, 18))
+>ElementTagNameMap : Symbol(ElementTagNameMap, Decl(lib.dom.d.ts, --, --))
+>E : Symbol(E, Decl(index.d.ts, 15, 52))
+>ElementTagNameMap : Symbol(ElementTagNameMap, Decl(lib.dom.d.ts, --, --))
+>T : Symbol(T, Decl(index.d.ts, 15, 18))
+
+    type: T,
+>type : Symbol(type, Decl(index.d.ts, 15, 85))
+>T : Symbol(T, Decl(index.d.ts, 15, 18))
+
+    props?: PetitDom.Props<E> | null,
+>props : Symbol(props, Decl(index.d.ts, 16, 12))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>E : Symbol(E, Decl(index.d.ts, 15, 52))
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : Symbol(children, Decl(index.d.ts, 17, 37))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+
+): PetitDom.ElementNode<T, E>;
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ElementNode : Symbol(PetitDom.ElementNode, Decl(index.d.ts, 135, 5))
+>T : Symbol(T, Decl(index.d.ts, 15, 18))
+>E : Symbol(E, Decl(index.d.ts, 15, 52))
+
+/**
+ * Creates a VNode using a PetitDom component object.
+ *
+ * @param type - A PetitDom component object
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : Symbol(h, Decl(index.d.ts, 0, 0), Decl(index.d.ts, 19, 30), Decl(index.d.ts, 33, 29), Decl(index.d.ts, 47, 34))
+>P : Symbol(P, Decl(index.d.ts, 29, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+
+    type: PetitDom.Component<P>,
+>type : Symbol(type, Decl(index.d.ts, 29, 79))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Component : Symbol(PetitDom.Component, Decl(index.d.ts, 121, 5))
+>P : Symbol(P, Decl(index.d.ts, 29, 18))
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : Symbol(props, Decl(index.d.ts, 30, 32))
+>P : Symbol(P, Decl(index.d.ts, 29, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : Symbol(children, Decl(index.d.ts, 31, 49))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+
+): PetitDom.ComponentNode<P>;
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentNode : Symbol(PetitDom.ComponentNode, Decl(index.d.ts, 140, 5))
+>P : Symbol(P, Decl(index.d.ts, 29, 18))
+
+/**
+ * Creates a VNode using a PetitDom component class.
+ *
+ * @param type - A PetitDom component class
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : Symbol(h, Decl(index.d.ts, 0, 0), Decl(index.d.ts, 19, 30), Decl(index.d.ts, 33, 29), Decl(index.d.ts, 47, 34))
+>P : Symbol(P, Decl(index.d.ts, 43, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+
+    type: PetitDom.ComponentClass<P>,
+>type : Symbol(type, Decl(index.d.ts, 43, 79))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentClass : Symbol(PetitDom.ComponentClass, Decl(index.d.ts, 117, 5))
+>P : Symbol(P, Decl(index.d.ts, 43, 18))
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : Symbol(props, Decl(index.d.ts, 44, 37))
+>P : Symbol(P, Decl(index.d.ts, 43, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : Symbol(children, Decl(index.d.ts, 45, 49))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+
+): PetitDom.ComponentClassNode<P>;
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentClassNode : Symbol(PetitDom.ComponentClassNode, Decl(index.d.ts, 145, 5))
+>P : Symbol(P, Decl(index.d.ts, 43, 18))
+
+/**
+ * Creates a VNode using a PetitDom function component.
+ *
+ * This function is compatible with both JSX and HyperScript syntax.
+ *
+ * @param type - A PetitDom function component
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : Symbol(h, Decl(index.d.ts, 0, 0), Decl(index.d.ts, 19, 30), Decl(index.d.ts, 33, 29), Decl(index.d.ts, 47, 34))
+>P : Symbol(P, Decl(index.d.ts, 59, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+
+    type: PetitDom.FunctionComponent<P>,
+>type : Symbol(type, Decl(index.d.ts, 59, 79))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>FunctionComponent : Symbol(PetitDom.FunctionComponent, Decl(index.d.ts, 112, 17))
+>P : Symbol(P, Decl(index.d.ts, 59, 18))
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : Symbol(props, Decl(index.d.ts, 60, 40))
+>P : Symbol(P, Decl(index.d.ts, 59, 18))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : Symbol(children, Decl(index.d.ts, 61, 49))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+
+): PetitDom.FunctionComponentNode<P>;
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>FunctionComponentNode : Symbol(PetitDom.FunctionComponentNode, Decl(index.d.ts, 150, 5))
+>P : Symbol(P, Decl(index.d.ts, 59, 18))
+
+/**
+ * Creates actual DOM Elements for the given VNode and its children.
+ *
+ * @param vnode - The VNode object to mount
+ * @returns The newly-created DOM element
+ */
+export function mount(vnode: PetitDom.VNode): Element;
+>mount : Symbol(mount, Decl(index.d.ts, 63, 37))
+>vnode : Symbol(vnode, Decl(index.d.ts, 71, 22))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+/**
+ * Diffs two VNodes and applies the necessary DOM changes
+ *
+ * @param newVNode - The new VNode object, which will be mounted to the DOM element of oldVNode
+ * @param oldVNode - The old VNode object to diff against
+ * @param parent - The parent DOM element. Used internally by PetitDom to recursively patch child nodes
+ * @returns The updated DOM element. This element is also moved from oldVNode to newVNode
+ */
+export function patch(newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element): Element;
+>patch : Symbol(patch, Decl(index.d.ts, 71, 54))
+>newVNode : Symbol(newVNode, Decl(index.d.ts, 81, 22))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>oldVNode : Symbol(oldVNode, Decl(index.d.ts, 81, 47))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>parent : Symbol(parent, Decl(index.d.ts, 81, 73))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+/**
+ * Removes the given VNode from the actual DOM
+ *
+ * @param vnode - The VNode object to unmount
+ */
+export function unmount(vnode: PetitDom.VNode): void;
+>unmount : Symbol(unmount, Decl(index.d.ts, 81, 101))
+>vnode : Symbol(vnode, Decl(index.d.ts, 88, 24))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+
+export namespace PetitDom {
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+
+    type Key = string | number;
+>Key : Symbol(Key, Decl(index.d.ts, 90, 27))
+
+    type ComponentProps = object;
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+
+    interface ContentArray extends ReadonlyArray<Content> {}
+>ContentArray : Symbol(ContentArray, Decl(index.d.ts, 92, 33))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+
+    type Content = string | VNode | ContentArray;
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+>ContentArray : Symbol(ContentArray, Decl(index.d.ts, 92, 33))
+
+    type DOMElementProps<E extends Element> = {
+>DOMElementProps : Symbol(DOMElementProps, Decl(index.d.ts, 94, 49))
+>E : Symbol(E, Decl(index.d.ts, 96, 25))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+        [P in keyof E]?: E[P];
+>P : Symbol(P, Decl(index.d.ts, 97, 9))
+>E : Symbol(E, Decl(index.d.ts, 96, 25))
+>E : Symbol(E, Decl(index.d.ts, 96, 25))
+>P : Symbol(P, Decl(index.d.ts, 97, 9))
+
+    };
+
+    interface IntrinsicProps {
+>IntrinsicProps : Symbol(IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+        content?: Content | ReadonlyArray<Content>;
+>content : Symbol(IntrinsicProps.content, Decl(index.d.ts, 100, 30))
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+
+        key?: Key;
+>key : Symbol(IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+>Key : Symbol(Key, Decl(index.d.ts, 90, 27))
+    }
+
+    type Props<E extends Element = Element> = IntrinsicProps & DOMElementProps<E>;
+>Props : Symbol(Props, Decl(index.d.ts, 103, 5))
+>E : Symbol(E, Decl(index.d.ts, 105, 15))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>IntrinsicProps : Symbol(IntrinsicProps, Decl(index.d.ts, 98, 6))
+>DOMElementProps : Symbol(DOMElementProps, Decl(index.d.ts, 94, 49))
+>E : Symbol(E, Decl(index.d.ts, 105, 15))
+
+    type ShouldUpdate<P extends ComponentProps> = (
+>ShouldUpdate : Symbol(ShouldUpdate, Decl(index.d.ts, 105, 82))
+>P : Symbol(P, Decl(index.d.ts, 107, 22))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+
+        newProps: P,
+>newProps : Symbol(newProps, Decl(index.d.ts, 107, 51))
+>P : Symbol(P, Decl(index.d.ts, 107, 22))
+
+        oldProps: P,
+>oldProps : Symbol(oldProps, Decl(index.d.ts, 108, 20))
+>P : Symbol(P, Decl(index.d.ts, 107, 22))
+
+        newContent: ReadonlyArray<VNode>,
+>newContent : Symbol(newContent, Decl(index.d.ts, 109, 20))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        oldContent: ReadonlyArray<VNode>
+>oldContent : Symbol(oldContent, Decl(index.d.ts, 110, 41))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+    ) => boolean;
+
+    interface FunctionComponent<P extends ComponentProps> {
+>FunctionComponent : Symbol(FunctionComponent, Decl(index.d.ts, 112, 17))
+>P : Symbol(P, Decl(index.d.ts, 114, 32))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+
+        (props: P, content: ReadonlyArray<Content>): FunctionComponentNode<P>;
+>props : Symbol(props, Decl(index.d.ts, 115, 9))
+>P : Symbol(P, Decl(index.d.ts, 114, 32))
+>content : Symbol(content, Decl(index.d.ts, 115, 18))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+>FunctionComponentNode : Symbol(FunctionComponentNode, Decl(index.d.ts, 150, 5))
+>P : Symbol(P, Decl(index.d.ts, 114, 32))
+
+        shouldUpdate?: ShouldUpdate<P>;
+>shouldUpdate : Symbol(FunctionComponent.shouldUpdate, Decl(index.d.ts, 115, 78))
+>ShouldUpdate : Symbol(ShouldUpdate, Decl(index.d.ts, 105, 82))
+>P : Symbol(P, Decl(index.d.ts, 114, 32))
+    }
+
+    interface ComponentClass<P extends ComponentProps> {
+>ComponentClass : Symbol(ComponentClass, Decl(index.d.ts, 117, 5))
+>P : Symbol(P, Decl(index.d.ts, 119, 29))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+
+        new(props: P, content: ReadonlyArray<Content>): Component<P>;
+>props : Symbol(props, Decl(index.d.ts, 120, 12))
+>P : Symbol(P, Decl(index.d.ts, 119, 29))
+>content : Symbol(content, Decl(index.d.ts, 120, 21))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>Content : Symbol(Content, Decl(index.d.ts, 93, 60))
+>Component : Symbol(Component, Decl(index.d.ts, 121, 5))
+>P : Symbol(P, Decl(index.d.ts, 119, 29))
+    }
+
+    interface Component<P extends ComponentProps> {
+>Component : Symbol(Component, Decl(index.d.ts, 121, 5))
+>P : Symbol(P, Decl(index.d.ts, 123, 24))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+
+        mount(props: P, content: ReadonlyArray<VNode>): Element;
+>mount : Symbol(Component.mount, Decl(index.d.ts, 123, 51))
+>props : Symbol(props, Decl(index.d.ts, 124, 14))
+>P : Symbol(P, Decl(index.d.ts, 123, 24))
+>content : Symbol(content, Decl(index.d.ts, 124, 23))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+        patch(element: Element, newProps: P, oldProps: P, newContent: ReadonlyArray<VNode>, oldContent: ReadonlyArray<VNode>): Element;
+>patch : Symbol(Component.patch, Decl(index.d.ts, 124, 64))
+>element : Symbol(element, Decl(index.d.ts, 125, 14))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(index.d.ts, 125, 31))
+>P : Symbol(P, Decl(index.d.ts, 123, 24))
+>oldProps : Symbol(oldProps, Decl(index.d.ts, 125, 44))
+>P : Symbol(P, Decl(index.d.ts, 123, 24))
+>newContent : Symbol(newContent, Decl(index.d.ts, 125, 57))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+>oldContent : Symbol(oldContent, Decl(index.d.ts, 125, 91))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+        unmount(element: Element): void;
+>unmount : Symbol(Component.unmount, Decl(index.d.ts, 125, 135))
+>element : Symbol(element, Decl(index.d.ts, 126, 16))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+    }
+
+    interface VNode {
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        readonly isSVG: boolean;
+>isSVG : Symbol(VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+        readonly type: any;
+>type : Symbol(VNode.type, Decl(index.d.ts, 130, 32))
+
+        readonly key: Key | null;
+>key : Symbol(VNode.key, Decl(index.d.ts, 131, 27))
+>Key : Symbol(Key, Decl(index.d.ts, 90, 27))
+
+        readonly props: any;
+>props : Symbol(VNode.props, Decl(index.d.ts, 132, 33))
+
+        readonly content: ReadonlyArray<VNode>;
+>content : Symbol(VNode.content, Decl(index.d.ts, 133, 28))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+    }
+
+    interface ElementNode<T extends keyof DomElements, E extends DomElements[T]> extends VNode {
+>ElementNode : Symbol(ElementNode, Decl(index.d.ts, 135, 5))
+>T : Symbol(T, Decl(index.d.ts, 137, 26))
+>DomElements : Symbol(DomElements, Decl(index.d.ts, 155, 5))
+>E : Symbol(E, Decl(index.d.ts, 137, 54))
+>DomElements : Symbol(DomElements, Decl(index.d.ts, 155, 5))
+>T : Symbol(T, Decl(index.d.ts, 137, 26))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        readonly type: T;
+>type : Symbol(ElementNode.type, Decl(index.d.ts, 137, 96))
+>T : Symbol(T, Decl(index.d.ts, 137, 26))
+
+        readonly props: Props<E>;
+>props : Symbol(ElementNode.props, Decl(index.d.ts, 138, 25))
+>Props : Symbol(Props, Decl(index.d.ts, 103, 5))
+>E : Symbol(E, Decl(index.d.ts, 137, 54))
+    }
+
+    interface ComponentNode<P extends ComponentProps> extends VNode {
+>ComponentNode : Symbol(ComponentNode, Decl(index.d.ts, 140, 5))
+>P : Symbol(P, Decl(index.d.ts, 142, 28))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        readonly type: Component<P>;
+>type : Symbol(ComponentNode.type, Decl(index.d.ts, 142, 69))
+>Component : Symbol(Component, Decl(index.d.ts, 121, 5))
+>P : Symbol(P, Decl(index.d.ts, 142, 28))
+
+        readonly props: P & IntrinsicProps;
+>props : Symbol(ComponentNode.props, Decl(index.d.ts, 143, 36))
+>P : Symbol(P, Decl(index.d.ts, 142, 28))
+>IntrinsicProps : Symbol(IntrinsicProps, Decl(index.d.ts, 98, 6))
+    }
+
+    interface ComponentClassNode<P extends ComponentProps> extends VNode {
+>ComponentClassNode : Symbol(ComponentClassNode, Decl(index.d.ts, 145, 5))
+>P : Symbol(P, Decl(index.d.ts, 147, 33))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        readonly type: ComponentClass<P>;
+>type : Symbol(ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>ComponentClass : Symbol(ComponentClass, Decl(index.d.ts, 117, 5))
+>P : Symbol(P, Decl(index.d.ts, 147, 33))
+
+        readonly props: P & IntrinsicProps;
+>props : Symbol(ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>P : Symbol(P, Decl(index.d.ts, 147, 33))
+>IntrinsicProps : Symbol(IntrinsicProps, Decl(index.d.ts, 98, 6))
+    }
+
+    interface FunctionComponentNode<P extends ComponentProps> extends VNode {
+>FunctionComponentNode : Symbol(FunctionComponentNode, Decl(index.d.ts, 150, 5))
+>P : Symbol(P, Decl(index.d.ts, 152, 36))
+>ComponentProps : Symbol(ComponentProps, Decl(index.d.ts, 91, 31))
+>VNode : Symbol(VNode, Decl(index.d.ts, 127, 5))
+
+        readonly type: FunctionComponent<P>;
+>type : Symbol(FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>FunctionComponent : Symbol(FunctionComponent, Decl(index.d.ts, 112, 17))
+>P : Symbol(P, Decl(index.d.ts, 152, 36))
+
+        readonly props: P & IntrinsicProps;
+>props : Symbol(FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>P : Symbol(P, Decl(index.d.ts, 152, 36))
+>IntrinsicProps : Symbol(IntrinsicProps, Decl(index.d.ts, 98, 6))
+    }
+
+    interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
+>DomElements : Symbol(DomElements, Decl(index.d.ts, 155, 5))
+>HTMLElementTagNameMap : Symbol(HTMLElementTagNameMap, Decl(lib.dom.d.ts, --, --))
+>SVGElementTagNameMap : Symbol(SVGElementTagNameMap, Decl(lib.dom.d.ts, --, --))
+
+        "main": HTMLMainElement;
+>"main" : Symbol(DomElements["main"], Decl(index.d.ts, 157, 79))
+>HTMLMainElement : Symbol(HTMLMainElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+    }
+}
+
+declare global {
+>global : Symbol(global, Decl(index.d.ts, 160, 1))
+
+    namespace JSX {
+>JSX : Symbol(JSX, Decl(index.d.ts, 162, 16))
+
+        // tslint:disable-next-line:no-empty-interface
+        interface Element extends PetitDom.VNode { }
+>Element : Symbol(Element, Decl(index.d.ts, 163, 19))
+>PetitDom.VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+
+        // tslint:disable-next-line:no-empty-interface
+        interface ElementClass extends PetitDom.Component<PetitDom.ComponentProps> { }
+>ElementClass : Symbol(ElementClass, Decl(index.d.ts, 165, 52))
+>PetitDom.Component : Symbol(PetitDom.Component, Decl(index.d.ts, 121, 5))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Component : Symbol(PetitDom.Component, Decl(index.d.ts, 121, 5))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>ComponentProps : Symbol(PetitDom.ComponentProps, Decl(index.d.ts, 91, 31))
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicClassAttributes<T> extends PetitDom.Props { }
+>IntrinsicClassAttributes : Symbol(IntrinsicClassAttributes, Decl(index.d.ts, 168, 86))
+>T : Symbol(T, Decl(index.d.ts, 171, 43))
+>PetitDom.Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicAttributes extends PetitDom.IntrinsicProps { }
+>IntrinsicAttributes : Symbol(IntrinsicAttributes, Decl(index.d.ts, 171, 72))
+>PetitDom.IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+        interface ElementAttributesProperty { props: PetitDom.Props; }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(index.d.ts, 174, 73))
+>props : Symbol(ElementAttributesProperty.props, Decl(index.d.ts, 176, 45))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+
+        interface ElementChildrenAttribute { content: PetitDom.VNode[]; }
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(index.d.ts, 176, 70))
+>content : Symbol(ElementChildrenAttribute.content, Decl(index.d.ts, 178, 44))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+
+        type IntrinsicElements = {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(index.d.ts, 178, 73))
+
+            [P in keyof PetitDom.DomElements]:
+>P : Symbol(P, Decl(index.d.ts, 181, 13))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>DomElements : Symbol(PetitDom.DomElements, Decl(index.d.ts, 155, 5))
+
+            PetitDom.Props<PetitDom.DomElements[P]> &
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>DomElements : Symbol(PetitDom.DomElements, Decl(index.d.ts, 155, 5))
+>P : Symbol(P, Decl(index.d.ts, 181, 13))
+            {
+                content?: PetitDom.Content | ReadonlyArray<PetitDom.Content>;
+>content : Symbol(content, Decl(index.d.ts, 183, 13))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(index.d.ts, 88, 53))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+
+            };
+        };
+    }
+}
+
+=== tests/cases/compiler/petit-dom-tests.tsx ===
+/* @jsx h */
+// tslint:disable:no-empty
+// tslint:disable:no-null-keyword
+
+import { h, mount, patch, PetitDom, unmount } from "petit-dom";
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>mount : Symbol(mount, Decl(petit-dom-tests.tsx, 4, 11))
+>patch : Symbol(patch, Decl(petit-dom-tests.tsx, 4, 18))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>unmount : Symbol(unmount, Decl(petit-dom-tests.tsx, 4, 35))
+
+function assertEqual<T>(a: T, b: T) { }
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>T : Symbol(T, Decl(petit-dom-tests.tsx, 6, 21))
+>a : Symbol(a, Decl(petit-dom-tests.tsx, 6, 24))
+>T : Symbol(T, Decl(petit-dom-tests.tsx, 6, 21))
+>b : Symbol(b, Decl(petit-dom-tests.tsx, 6, 29))
+>T : Symbol(T, Decl(petit-dom-tests.tsx, 6, 21))
+
+function eventHandler(event: Event): void { }
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+>event : Symbol(event, Decl(petit-dom-tests.tsx, 8, 22))
+>Event : Symbol(Event, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+interface CustomProps {
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    name: string;
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    count: number;
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    onSomeEvent(event: Event): void;
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>event : Symbol(event, Decl(petit-dom-tests.tsx, 13, 16))
+>Event : Symbol(Event, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+}
+
+/**
+ * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithTextContent() {
+>testHtmlElementWithTextContent : Symbol(testHtmlElementWithTextContent, Decl(petit-dom-tests.tsx, 14, 1))
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>href : Symbol(href, Decl(petit-dom-tests.tsx, 21, 26))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 21, 40))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(aNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(aNode.type, "a");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    assertEqual(aNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(aNode.props.href, "link");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.props.href : Symbol(href, Decl(lib.dom.d.ts, --, --))
+>aNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>href : Symbol(href, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(aNode.props.onclick, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.props.onclick : Symbol(onclick, Decl(lib.dom.d.ts, --, --))
+>aNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>onclick : Symbol(onclick, Decl(lib.dom.d.ts, --, --))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(aNode.content.length, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>aNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>aNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>aNode : Symbol(aNode, Decl(petit-dom-tests.tsx, 21, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <a href="link" onclick={eventHandler}>click here</a>;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>a : Symbol("a", Decl(lib.dom.d.ts, --, --))
+>href : Symbol(href, Decl(petit-dom-tests.tsx, 31, 22))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 31, 34))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+>a : Symbol("a", Decl(lib.dom.d.ts, --, --))
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 32, 9))
+>jsxNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLAnchorElement>;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 33, 9))
+>jsxNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>HTMLAnchorElement : Symbol(HTMLAnchorElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, "a");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 32, 9))
+
+    assertEqual(jsxNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.href, "link");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.href : Symbol(href, Decl(lib.dom.d.ts, --, --))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 33, 9))
+>href : Symbol(href, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNodeProps.onclick, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onclick : Symbol(onclick, Decl(lib.dom.d.ts, --, --))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 33, 9))
+>onclick : Symbol(onclick, Decl(lib.dom.d.ts, --, --))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 31, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithMixedContent() {
+>testHtmlElementWithMixedContent : Symbol(testHtmlElementWithMixedContent, Decl(petit-dom-tests.tsx, 41, 1))
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const formNode = h(
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+        "form",
+        { key: 1, method: "POST", onsubmit: eventHandler },
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 50, 9))
+>method : Symbol(method, Decl(petit-dom-tests.tsx, 50, 17))
+>onsubmit : Symbol(onsubmit, Decl(petit-dom-tests.tsx, 50, 33))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+        "Hello ", h("span", null, "World")
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+    );
+
+    assertEqual(formNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(formNode.type, "form");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    assertEqual(formNode.key, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(formNode.props.method, "POST");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.props.method : Symbol(method, Decl(lib.dom.d.ts, --, --))
+>formNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>method : Symbol(method, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(formNode.props.onsubmit, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.props.onsubmit : Symbol(onsubmit, Decl(lib.dom.d.ts, --, --))
+>formNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>onsubmit : Symbol(onsubmit, Decl(lib.dom.d.ts, --, --))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(formNode.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>formNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>formNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>formNode : Symbol(formNode, Decl(petit-dom-tests.tsx, 48, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form>;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>form : Symbol("form", Decl(lib.dom.d.ts, --, --))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 62, 25))
+>method : Symbol(method, Decl(petit-dom-tests.tsx, 62, 33))
+>onsubmit : Symbol(onsubmit, Decl(petit-dom-tests.tsx, 62, 47))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+>form : Symbol("form", Decl(lib.dom.d.ts, --, --))
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 63, 9))
+>jsxNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLFormElement>;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 64, 9))
+>jsxNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>HTMLFormElement : Symbol(HTMLFormElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, "form");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 63, 9))
+
+    assertEqual(jsxNode.key, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.method, "POST");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.method : Symbol(method, Decl(lib.dom.d.ts, --, --))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 64, 9))
+>method : Symbol(method, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNodeProps.onsubmit, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onsubmit : Symbol(onsubmit, Decl(lib.dom.d.ts, --, --))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 64, 9))
+>onsubmit : Symbol(onsubmit, Decl(lib.dom.d.ts, --, --))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 62, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+ */
+export function testSvgElementWithChild() {
+>testSvgElementWithChild : Symbol(testSvgElementWithChild, Decl(petit-dom-tests.tsx, 72, 1))
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 79, 30))
+>currentScale : Symbol(currentScale, Decl(petit-dom-tests.tsx, 79, 38))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+    assertEqual(svgNode.isSVG, true);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>svgNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(svgNode.type, "svg");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>svgNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    assertEqual(svgNode.key, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>svgNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(svgNode.props.currentScale, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>svgNode.props.currentScale : Symbol(currentScale, Decl(lib.dom.d.ts, --, --))
+>svgNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>currentScale : Symbol(currentScale, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(svgNode.content.length, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>svgNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>svgNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>svgNode : Symbol(svgNode, Decl(petit-dom-tests.tsx, 79, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <svg key={2} currentScale={1}><path /></svg>;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>svg : Symbol("svg", Decl(lib.dom.d.ts, --, --))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 88, 24))
+>currentScale : Symbol(currentScale, Decl(petit-dom-tests.tsx, 88, 32))
+>path : Symbol("path", Decl(lib.dom.d.ts, --, --))
+>svg : Symbol("svg", Decl(lib.dom.d.ts, --, --))
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 89, 9))
+>jsxNode.type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>type : Symbol(PetitDom.ElementNode.type, Decl(index.d.ts, 137, 96))
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<SVGSVGElement>;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 90, 9))
+>jsxNode.props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>props : Symbol(PetitDom.ElementNode.props, Decl(index.d.ts, 138, 25))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>Props : Symbol(PetitDom.Props, Decl(index.d.ts, 103, 5))
+>SVGSVGElement : Symbol(SVGSVGElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNode.isSVG, true);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, "svg");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 89, 9))
+
+    assertEqual(jsxNode.key, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.currentScale, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.currentScale : Symbol(currentScale, Decl(lib.dom.d.ts, --, --))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 90, 9))
+>currentScale : Symbol(currentScale, Decl(lib.dom.d.ts, --, --))
+
+    assertEqual(jsxNode.content.length, 1);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 88, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a function component, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponent() {
+>testFunctionComponent : Symbol(testFunctionComponent, Decl(petit-dom-tests.tsx, 97, 1))
+
+    function FunctionComponent(): JSX.Element {
+>FunctionComponent : Symbol(FunctionComponent, Decl(petit-dom-tests.tsx, 102, 41))
+>JSX : Symbol(JSX, Decl(index.d.ts, 162, 16))
+>Element : Symbol(JSX.Element, Decl(index.d.ts, 163, 19))
+
+        return <div>Hello World</div>;
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponent, { key: "1" });
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>FunctionComponent : Symbol(FunctionComponent, Decl(petit-dom-tests.tsx, 102, 41))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 108, 39))
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, FunctionComponent);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>FunctionComponent : Symbol(FunctionComponent, Decl(petit-dom-tests.tsx, 102, 41))
+
+    assertEqual(node.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+
+    assertEqual(node.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 108, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponent key="1" />;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>FunctionComponent : Symbol(FunctionComponent, Decl(petit-dom-tests.tsx, 102, 41))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 117, 38))
+
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<{}>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 118, 9))
+>jsxNode.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>FunctionComponent : Symbol(PetitDom.FunctionComponent, Decl(index.d.ts, 112, 17))
+
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 119, 9))
+>jsxNode.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, FunctionComponent);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 118, 9))
+>FunctionComponent : Symbol(FunctionComponent, Decl(petit-dom-tests.tsx, 102, 41))
+
+    assertEqual(jsxNode.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 119, 9))
+>key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 117, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a function component with props, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithProps() {
+>testFunctionComponentWithProps : Symbol(testFunctionComponentWithProps, Decl(petit-dom-tests.tsx, 126, 1))
+
+    function FunctionComponentWithProps(props: CustomProps): JSX.Element {
+>FunctionComponentWithProps : Symbol(FunctionComponentWithProps, Decl(petit-dom-tests.tsx, 131, 50))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 132, 40))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>JSX : Symbol(JSX, Decl(index.d.ts, 162, 16))
+>Element : Symbol(JSX.Element, Decl(index.d.ts, 163, 19))
+
+        const { name, count, onSomeEvent } = props;
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 133, 15))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 133, 21))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 133, 28))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 132, 40))
+
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}></div>;
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>className : Symbol(className, Decl(petit-dom-tests.tsx, 134, 19))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 133, 15))
+>tabIndex : Symbol(tabIndex, Decl(petit-dom-tests.tsx, 134, 36))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 133, 21))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 134, 53))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 133, 28))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>FunctionComponentWithProps : Symbol(FunctionComponentWithProps, Decl(petit-dom-tests.tsx, 131, 50))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 138, 48))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 138, 61))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 138, 73))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, FunctionComponentWithProps);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>FunctionComponentWithProps : Symbol(FunctionComponentWithProps, Decl(petit-dom-tests.tsx, 131, 50))
+
+    assertEqual(node.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(node.props.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 138, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>FunctionComponentWithProps : Symbol(FunctionComponentWithProps, Decl(petit-dom-tests.tsx, 131, 50))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 149, 47))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 149, 58))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 149, 70))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 150, 9))
+>jsxNode.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>FunctionComponent : Symbol(PetitDom.FunctionComponent, Decl(index.d.ts, 112, 17))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 151, 9))
+>jsxNode.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, FunctionComponentWithProps);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 150, 9))
+>FunctionComponentWithProps : Symbol(FunctionComponentWithProps, Decl(petit-dom-tests.tsx, 131, 50))
+
+    assertEqual(jsxNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 151, 9))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 151, 9))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 151, 9))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 149, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a function component with child content, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithChildren() {
+>testFunctionComponentWithChildren : Symbol(testFunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 160, 1))
+
+    function FunctionComponentWithChildren(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): JSX.Element {
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 166, 43))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>content : Symbol(content, Decl(petit-dom-tests.tsx, 166, 62))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+>JSX : Symbol(JSX, Decl(index.d.ts, 162, 16))
+>Element : Symbol(JSX.Element, Decl(index.d.ts, 163, 19))
+
+        const { name, count, onSomeEvent } = props;
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 167, 15))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 167, 21))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 167, 28))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 166, 43))
+
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>;
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>className : Symbol(className, Decl(petit-dom-tests.tsx, 168, 19))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 167, 15))
+>tabIndex : Symbol(tabIndex, Decl(petit-dom-tests.tsx, 168, 36))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 167, 21))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 168, 53))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 167, 28))
+>content : Symbol(content, Decl(petit-dom-tests.tsx, 166, 62))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+        FunctionComponentWithChildren,
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 174, 9))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 174, 22))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 174, 34))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+        "Hello",
+        h("span", null, "World")
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+    );
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, FunctionComponentWithChildren);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+
+    assertEqual(node.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(node.props.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>node.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 172, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+
+        <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 189, 38))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 189, 49))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 189, 61))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+            Hello <span>World</span>
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+
+        </FunctionComponentWithChildren>
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 193, 9))
+>jsxNode.type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+>type : Symbol(PetitDom.FunctionComponentNode.type, Decl(index.d.ts, 152, 77))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>FunctionComponent : Symbol(PetitDom.FunctionComponent, Decl(index.d.ts, 112, 17))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 194, 9))
+>jsxNode.props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+>props : Symbol(PetitDom.FunctionComponentNode.props, Decl(index.d.ts, 153, 44))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, FunctionComponentWithChildren);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 193, 9))
+>FunctionComponentWithChildren : Symbol(FunctionComponentWithChildren, Decl(petit-dom-tests.tsx, 165, 53))
+
+    assertEqual(jsxNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 194, 9))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 194, 9))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 194, 9))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 188, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a component class, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClass() {
+>testComponentClass : Symbol(testComponentClass, Decl(petit-dom-tests.tsx, 203, 1))
+
+    class ComponentClass {
+>ComponentClass : Symbol(ComponentClass, Decl(petit-dom-tests.tsx, 208, 38))
+
+        props = {};
+>props : Symbol(ComponentClass.props, Decl(petit-dom-tests.tsx, 209, 26))
+
+        mount(): Element {
+>mount : Symbol(ComponentClass.mount, Decl(petit-dom-tests.tsx, 210, 19))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            return mount(<div className="some-class"></div>);
+>mount : Symbol(mount, Decl(petit-dom-tests.tsx, 4, 11))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>className : Symbol(className, Decl(petit-dom-tests.tsx, 213, 29))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+        }
+
+        patch(element: Element, newProps: object, oldProps: object, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : Symbol(ComponentClass.patch, Decl(petit-dom-tests.tsx, 214, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 216, 14))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 216, 31))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 216, 49))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 216, 67))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 216, 110))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            patch(
+>patch : Symbol(patch, Decl(petit-dom-tests.tsx, 4, 18))
+
+                <div {...oldProps}>{oldContent}</div>,
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 216, 49))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 216, 110))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+                <div {...newProps}>{newContent}</div>
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 216, 31))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 216, 67))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+            );
+            return element;
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 216, 14))
+        }
+
+        unmount(element: Element): void {
+>unmount : Symbol(ComponentClass.unmount, Decl(petit-dom-tests.tsx, 222, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 224, 16))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            unmount(<div>Hello World</div>);
+>unmount : Symbol(unmount, Decl(petit-dom-tests.tsx, 4, 35))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClass, { key: "1" });
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>ComponentClass : Symbol(ComponentClass, Decl(petit-dom-tests.tsx, 208, 38))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 230, 36))
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, ComponentClass);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>ComponentClass : Symbol(ComponentClass, Decl(petit-dom-tests.tsx, 208, 38))
+
+    assertEqual(node.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+
+    assertEqual(node.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 230, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClass key="1" />;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>ComponentClass : Symbol(ComponentClass, Decl(petit-dom-tests.tsx, 208, 38))
+>key : Symbol(key, Decl(petit-dom-tests.tsx, 239, 35))
+
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<{}>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 240, 9))
+>jsxNode.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>ComponentClass : Symbol(PetitDom.ComponentClass, Decl(index.d.ts, 117, 5))
+
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 241, 9))
+>jsxNode.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>IntrinsicProps : Symbol(PetitDom.IntrinsicProps, Decl(index.d.ts, 98, 6))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, ComponentClass);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 240, 9))
+>ComponentClass : Symbol(ComponentClass, Decl(petit-dom-tests.tsx, 208, 38))
+
+    assertEqual(jsxNode.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.key, "1");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 241, 9))
+>key : Symbol(PetitDom.IntrinsicProps.key, Decl(index.d.ts, 101, 51))
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 239, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a component class with props, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithProps() {
+>testComponentClassWithProps : Symbol(testComponentClassWithProps, Decl(petit-dom-tests.tsx, 248, 1))
+
+    class ComponentClassWithProps {
+>ComponentClassWithProps : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+
+        props: CustomProps;
+>props : Symbol(ComponentClassWithProps.props, Decl(petit-dom-tests.tsx, 254, 35))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+        constructor(props: CustomProps) {
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 257, 20))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+            this.props = props;
+>this.props : Symbol(ComponentClassWithProps.props, Decl(petit-dom-tests.tsx, 254, 35))
+>this : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+>props : Symbol(ComponentClassWithProps.props, Decl(petit-dom-tests.tsx, 254, 35))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 257, 20))
+        }
+
+        mount(props: CustomProps): Element {
+>mount : Symbol(ComponentClassWithProps.mount, Decl(petit-dom-tests.tsx, 259, 9))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 261, 14))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            const { name, count, onSomeEvent } = props;
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 262, 19))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 262, 25))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 262, 32))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 261, 14))
+
+            return mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />);
+>mount : Symbol(mount, Decl(petit-dom-tests.tsx, 4, 11))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>className : Symbol(className, Decl(petit-dom-tests.tsx, 263, 29))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 262, 19))
+>tabIndex : Symbol(tabIndex, Decl(petit-dom-tests.tsx, 263, 46))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 262, 25))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 263, 63))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 262, 32))
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : Symbol(ComponentClassWithProps.patch, Decl(petit-dom-tests.tsx, 264, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 266, 14))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 266, 31))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 266, 54))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 266, 77))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 266, 120))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            patch(
+>patch : Symbol(patch, Decl(petit-dom-tests.tsx, 4, 18))
+
+                <div {...oldProps}>{oldContent}</div>,
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 266, 54))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 266, 120))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+                <div {...newProps}>{newContent}</div>
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 266, 31))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 266, 77))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+            );
+            return element;
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 266, 14))
+        }
+
+        unmount(element: Element): void {
+>unmount : Symbol(ComponentClassWithProps.unmount, Decl(petit-dom-tests.tsx, 272, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 274, 16))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            unmount(<div> Hello World</div >);
+>unmount : Symbol(unmount, Decl(petit-dom-tests.tsx, 4, 35))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+>ComponentClassWithProps : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 280, 45))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 280, 58))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 280, 70))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, ComponentClassWithProps);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>ComponentClassWithProps : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+
+    assertEqual(node.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(node.props.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 280, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>ComponentClassWithProps : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 291, 44))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 291, 55))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 291, 67))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 292, 9))
+>jsxNode.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>ComponentClass : Symbol(PetitDom.ComponentClass, Decl(index.d.ts, 117, 5))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 293, 9))
+>jsxNode.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, ComponentClassWithProps);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 292, 9))
+>ComponentClassWithProps : Symbol(ComponentClassWithProps, Decl(petit-dom-tests.tsx, 253, 47))
+
+    assertEqual(jsxNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 293, 9))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 293, 9))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 293, 9))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 291, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
+/**
+ * Create a component class with child content, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithChildren() {
+>testComponentClassWithChildren : Symbol(testComponentClassWithChildren, Decl(petit-dom-tests.tsx, 302, 1))
+
+    class ComponentClassWithChildren {
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+
+        props: CustomProps;
+>props : Symbol(ComponentClassWithChildren.props, Decl(petit-dom-tests.tsx, 308, 38))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+        constructor(props: CustomProps) {
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 311, 20))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+            this.props = props;
+>this.props : Symbol(ComponentClassWithChildren.props, Decl(petit-dom-tests.tsx, 308, 38))
+>this : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+>props : Symbol(ComponentClassWithChildren.props, Decl(petit-dom-tests.tsx, 308, 38))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 311, 20))
+        }
+
+        mount(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): Element {
+>mount : Symbol(ComponentClassWithChildren.mount, Decl(petit-dom-tests.tsx, 313, 9))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 315, 14))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>content : Symbol(content, Decl(petit-dom-tests.tsx, 315, 33))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>Content : Symbol(PetitDom.Content, Decl(index.d.ts, 93, 60))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            const { name, count, onSomeEvent } = props;
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 316, 19))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 316, 25))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 316, 32))
+>props : Symbol(props, Decl(petit-dom-tests.tsx, 315, 14))
+
+            return mount(
+>mount : Symbol(mount, Decl(petit-dom-tests.tsx, 4, 11))
+
+                <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>className : Symbol(className, Decl(petit-dom-tests.tsx, 318, 20))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 316, 19))
+>tabIndex : Symbol(tabIndex, Decl(petit-dom-tests.tsx, 318, 37))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 316, 25))
+>onclick : Symbol(onclick, Decl(petit-dom-tests.tsx, 318, 54))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 316, 32))
+>content : Symbol(content, Decl(petit-dom-tests.tsx, 315, 33))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+            );
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : Symbol(ComponentClassWithChildren.patch, Decl(petit-dom-tests.tsx, 320, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 322, 14))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 322, 31))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 322, 54))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 322, 77))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 322, 120))
+>ReadonlyArray : Symbol(ReadonlyArray, Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>VNode : Symbol(PetitDom.VNode, Decl(index.d.ts, 127, 5))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            patch(
+>patch : Symbol(patch, Decl(petit-dom-tests.tsx, 4, 18))
+
+                <div {...oldProps}>{oldContent}</div>,
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>oldProps : Symbol(oldProps, Decl(petit-dom-tests.tsx, 322, 54))
+>oldContent : Symbol(oldContent, Decl(petit-dom-tests.tsx, 322, 120))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+                <div {...newProps}>{newContent}</div>
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>newProps : Symbol(newProps, Decl(petit-dom-tests.tsx, 322, 31))
+>newContent : Symbol(newContent, Decl(petit-dom-tests.tsx, 322, 77))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+
+            );
+            return element;
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 322, 14))
+        }
+
+        unmount(element: Element): void {
+>unmount : Symbol(ComponentClassWithChildren.unmount, Decl(petit-dom-tests.tsx, 328, 9))
+>element : Symbol(element, Decl(petit-dom-tests.tsx, 330, 16))
+>Element : Symbol(Element, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+            unmount(<div> Hello World</div >);
+>unmount : Symbol(unmount, Decl(petit-dom-tests.tsx, 4, 35))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+>div : Symbol("div", Decl(lib.dom.d.ts, --, --))
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+        ComponentClassWithChildren,
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 338, 9))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 338, 22))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 338, 34))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+        "Hello",
+        h("span", null, "World")
+>h : Symbol(h, Decl(petit-dom-tests.tsx, 4, 8))
+
+    );
+
+    assertEqual(node.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(node.type, ComponentClassWithChildren);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+
+    assertEqual(node.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(node.props.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.props.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>node.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(node.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>node.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>node.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>node : Symbol(node, Decl(petit-dom-tests.tsx, 336, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+
+        <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+>name : Symbol(name, Decl(petit-dom-tests.tsx, 353, 35))
+>count : Symbol(count, Decl(petit-dom-tests.tsx, 353, 46))
+>onSomeEvent : Symbol(onSomeEvent, Decl(petit-dom-tests.tsx, 353, 58))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+            Hello <span>World</span>
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+>span : Symbol("span", Decl(lib.dom.d.ts, --, --))
+
+        </ComponentClassWithChildren>
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 357, 9))
+>jsxNode.type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+>type : Symbol(PetitDom.ComponentClassNode.type, Decl(index.d.ts, 147, 74))
+>PetitDom : Symbol(PetitDom, Decl(petit-dom-tests.tsx, 4, 25))
+>ComponentClass : Symbol(PetitDom.ComponentClass, Decl(index.d.ts, 117, 5))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 358, 9))
+>jsxNode.props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+>props : Symbol(PetitDom.ComponentClassNode.props, Decl(index.d.ts, 148, 41))
+>CustomProps : Symbol(CustomProps, Decl(petit-dom-tests.tsx, 8, 45))
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+>isSVG : Symbol(PetitDom.VNode.isSVG, Decl(index.d.ts, 129, 21))
+
+    assertEqual(jsxNodeType, ComponentClassWithChildren);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeType : Symbol(jsxNodeType, Decl(petit-dom-tests.tsx, 357, 9))
+>ComponentClassWithChildren : Symbol(ComponentClassWithChildren, Decl(petit-dom-tests.tsx, 307, 50))
+
+    assertEqual(jsxNode.key, null);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+>key : Symbol(PetitDom.VNode.key, Decl(index.d.ts, 131, 27))
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 358, 9))
+>name : Symbol(CustomProps.name, Decl(petit-dom-tests.tsx, 10, 23))
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 358, 9))
+>count : Symbol(CustomProps.count, Decl(petit-dom-tests.tsx, 11, 17))
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNodeProps.onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>jsxNodeProps : Symbol(jsxNodeProps, Decl(petit-dom-tests.tsx, 358, 9))
+>onSomeEvent : Symbol(CustomProps.onSomeEvent, Decl(petit-dom-tests.tsx, 12, 18))
+>eventHandler : Symbol(eventHandler, Decl(petit-dom-tests.tsx, 6, 39))
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual : Symbol(assertEqual, Decl(petit-dom-tests.tsx, 4, 63))
+>jsxNode.content.length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+>jsxNode.content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>jsxNode : Symbol(jsxNode, Decl(petit-dom-tests.tsx, 352, 9))
+>content : Symbol(PetitDom.VNode.content, Decl(index.d.ts, 133, 28))
+>length : Symbol(ReadonlyArray.length, Decl(lib.es5.d.ts, --, --))
+}
+
diff --git a/tests/baselines/reference/petitDomSimpleJsx.types b/tests/baselines/reference/petitDomSimpleJsx.types
new file mode 100644
index 0000000000000..081daec9e9015
--- /dev/null
+++ b/tests/baselines/reference/petitDomSimpleJsx.types
@@ -0,0 +1,2101 @@
+=== tests/cases/compiler/node_modules/petit-dom/index.d.ts ===
+// Modified type definitions for Petit-Dom 0.2
+// Project: https://github.com/yelouafi/petit-dom
+// Definitions by: James Messinger <https://github.com/JamesMessinger>, modified by @weswigham for testing
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.4
+
+/**
+ * Creates a VNode of the specified HTML Element type and with the
+ * specified properties and contents.
+ *
+ * @param type - The tag name of element to create
+ * @param props - Properties to set on the element
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+
+    type: T,
+>type : T
+
+    props?: PetitDom.Props<E> | null,
+>props : PetitDom.Props<E> | null | undefined
+>PetitDom : any
+>null : null
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : readonly PetitDom.Content[]
+>PetitDom : any
+
+): PetitDom.ElementNode<T, E>;
+>PetitDom : any
+
+/**
+ * Creates a VNode using a PetitDom component object.
+ *
+ * @param type - A PetitDom component object
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>PetitDom : any
+>PetitDom : any
+
+    type: PetitDom.Component<P>,
+>type : PetitDom.Component<P>
+>PetitDom : any
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : (P & PetitDom.IntrinsicProps) | null | undefined
+>PetitDom : any
+>null : null
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : readonly PetitDom.Content[]
+>PetitDom : any
+
+): PetitDom.ComponentNode<P>;
+>PetitDom : any
+
+/**
+ * Creates a VNode using a PetitDom component class.
+ *
+ * @param type - A PetitDom component class
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>PetitDom : any
+>PetitDom : any
+
+    type: PetitDom.ComponentClass<P>,
+>type : PetitDom.ComponentClass<P>
+>PetitDom : any
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : (P & PetitDom.IntrinsicProps) | null | undefined
+>PetitDom : any
+>null : null
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : readonly PetitDom.Content[]
+>PetitDom : any
+
+): PetitDom.ComponentClassNode<P>;
+>PetitDom : any
+
+/**
+ * Creates a VNode using a PetitDom function component.
+ *
+ * This function is compatible with both JSX and HyperScript syntax.
+ *
+ * @param type - A PetitDom function component
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>PetitDom : any
+>PetitDom : any
+
+    type: PetitDom.FunctionComponent<P>,
+>type : PetitDom.FunctionComponent<P>
+>PetitDom : any
+
+    props?: (P & PetitDom.IntrinsicProps) | null,
+>props : (P & PetitDom.IntrinsicProps) | null | undefined
+>PetitDom : any
+>null : null
+
+    ...children: ReadonlyArray<PetitDom.Content>
+>children : readonly PetitDom.Content[]
+>PetitDom : any
+
+): PetitDom.FunctionComponentNode<P>;
+>PetitDom : any
+
+/**
+ * Creates actual DOM Elements for the given VNode and its children.
+ *
+ * @param vnode - The VNode object to mount
+ * @returns The newly-created DOM element
+ */
+export function mount(vnode: PetitDom.VNode): Element;
+>mount : (vnode: PetitDom.VNode) => Element
+>vnode : PetitDom.VNode
+>PetitDom : any
+
+/**
+ * Diffs two VNodes and applies the necessary DOM changes
+ *
+ * @param newVNode - The new VNode object, which will be mounted to the DOM element of oldVNode
+ * @param oldVNode - The old VNode object to diff against
+ * @param parent - The parent DOM element. Used internally by PetitDom to recursively patch child nodes
+ * @returns The updated DOM element. This element is also moved from oldVNode to newVNode
+ */
+export function patch(newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element): Element;
+>patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
+>newVNode : PetitDom.VNode
+>PetitDom : any
+>oldVNode : PetitDom.VNode
+>PetitDom : any
+>parent : Element | undefined
+
+/**
+ * Removes the given VNode from the actual DOM
+ *
+ * @param vnode - The VNode object to unmount
+ */
+export function unmount(vnode: PetitDom.VNode): void;
+>unmount : (vnode: PetitDom.VNode) => void
+>vnode : PetitDom.VNode
+>PetitDom : any
+
+export namespace PetitDom {
+    type Key = string | number;
+>Key : string | number
+
+    type ComponentProps = object;
+>ComponentProps : object
+
+    interface ContentArray extends ReadonlyArray<Content> {}
+    type Content = string | VNode | ContentArray;
+>Content : Content
+
+    type DOMElementProps<E extends Element> = {
+>DOMElementProps : DOMElementProps<E>
+
+        [P in keyof E]?: E[P];
+    };
+
+    interface IntrinsicProps {
+        content?: Content | ReadonlyArray<Content>;
+>content : string | VNode | ContentArray | readonly Content[] | undefined
+
+        key?: Key;
+>key : string | number | undefined
+    }
+
+    type Props<E extends Element = Element> = IntrinsicProps & DOMElementProps<E>;
+>Props : Props<E>
+
+    type ShouldUpdate<P extends ComponentProps> = (
+>ShouldUpdate : ShouldUpdate<P>
+
+        newProps: P,
+>newProps : P
+
+        oldProps: P,
+>oldProps : P
+
+        newContent: ReadonlyArray<VNode>,
+>newContent : readonly VNode[]
+
+        oldContent: ReadonlyArray<VNode>
+>oldContent : readonly VNode[]
+
+    ) => boolean;
+
+    interface FunctionComponent<P extends ComponentProps> {
+        (props: P, content: ReadonlyArray<Content>): FunctionComponentNode<P>;
+>props : P
+>content : readonly Content[]
+
+        shouldUpdate?: ShouldUpdate<P>;
+>shouldUpdate : ShouldUpdate<P> | undefined
+    }
+
+    interface ComponentClass<P extends ComponentProps> {
+        new(props: P, content: ReadonlyArray<Content>): Component<P>;
+>props : P
+>content : readonly Content[]
+    }
+
+    interface Component<P extends ComponentProps> {
+        mount(props: P, content: ReadonlyArray<VNode>): Element;
+>mount : (props: P, content: readonly VNode[]) => Element
+>props : P
+>content : readonly VNode[]
+
+        patch(element: Element, newProps: P, oldProps: P, newContent: ReadonlyArray<VNode>, oldContent: ReadonlyArray<VNode>): Element;
+>patch : (element: Element, newProps: P, oldProps: P, newContent: readonly VNode[], oldContent: readonly VNode[]) => Element
+>element : Element
+>newProps : P
+>oldProps : P
+>newContent : readonly VNode[]
+>oldContent : readonly VNode[]
+
+        unmount(element: Element): void;
+>unmount : (element: Element) => void
+>element : Element
+    }
+
+    interface VNode {
+        readonly isSVG: boolean;
+>isSVG : boolean
+
+        readonly type: any;
+>type : any
+
+        readonly key: Key | null;
+>key : string | number | null
+>null : null
+
+        readonly props: any;
+>props : any
+
+        readonly content: ReadonlyArray<VNode>;
+>content : readonly VNode[]
+    }
+
+    interface ElementNode<T extends keyof DomElements, E extends DomElements[T]> extends VNode {
+        readonly type: T;
+>type : T
+
+        readonly props: Props<E>;
+>props : Props<E>
+    }
+
+    interface ComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: Component<P>;
+>type : Component<P>
+
+        readonly props: P & IntrinsicProps;
+>props : P & IntrinsicProps
+    }
+
+    interface ComponentClassNode<P extends ComponentProps> extends VNode {
+        readonly type: ComponentClass<P>;
+>type : ComponentClass<P>
+
+        readonly props: P & IntrinsicProps;
+>props : P & IntrinsicProps
+    }
+
+    interface FunctionComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: FunctionComponent<P>;
+>type : FunctionComponent<P>
+
+        readonly props: P & IntrinsicProps;
+>props : P & IntrinsicProps
+    }
+
+    interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
+        "main": HTMLMainElement;
+>"main" : HTMLMainElement
+    }
+}
+
+declare global {
+>global : any
+
+    namespace JSX {
+        // tslint:disable-next-line:no-empty-interface
+        interface Element extends PetitDom.VNode { }
+>PetitDom : any
+
+        // tslint:disable-next-line:no-empty-interface
+        interface ElementClass extends PetitDom.Component<PetitDom.ComponentProps> { }
+>PetitDom : any
+>PetitDom : any
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicClassAttributes<T> extends PetitDom.Props { }
+>PetitDom : any
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicAttributes extends PetitDom.IntrinsicProps { }
+>PetitDom : any
+
+        interface ElementAttributesProperty { props: PetitDom.Props; }
+>props : PetitDom.Props<Element>
+>PetitDom : any
+
+        interface ElementChildrenAttribute { content: PetitDom.VNode[]; }
+>content : PetitDom.VNode[]
+>PetitDom : any
+
+        type IntrinsicElements = {
+>IntrinsicElements : IntrinsicElements
+
+            [P in keyof PetitDom.DomElements]:
+>PetitDom : any
+
+            PetitDom.Props<PetitDom.DomElements[P]> &
+>PetitDom : any
+>PetitDom : any
+            {
+                content?: PetitDom.Content | ReadonlyArray<PetitDom.Content>;
+>content : string | PetitDom.VNode | PetitDom.ContentArray | readonly PetitDom.Content[] | undefined
+>PetitDom : any
+>PetitDom : any
+
+            };
+        };
+    }
+}
+
+=== tests/cases/compiler/petit-dom-tests.tsx ===
+/* @jsx h */
+// tslint:disable:no-empty
+// tslint:disable:no-null-keyword
+
+import { h, mount, patch, PetitDom, unmount } from "petit-dom";
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>mount : (vnode: PetitDom.VNode) => Element
+>patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
+>PetitDom : any
+>unmount : (vnode: PetitDom.VNode) => void
+
+function assertEqual<T>(a: T, b: T) { }
+>assertEqual : <T>(a: T, b: T) => void
+>a : T
+>b : T
+
+function eventHandler(event: Event): void { }
+>eventHandler : (event: Event) => void
+>event : Event
+
+interface CustomProps {
+    name: string;
+>name : string
+
+    count: number;
+>count : number
+
+    onSomeEvent(event: Event): void;
+>onSomeEvent : (event: Event) => void
+>event : Event
+}
+
+/**
+ * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithTextContent() {
+>testHtmlElementWithTextContent : () => void
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>h("a", { href: "link", onclick: eventHandler }, "click here") : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"a" : "a"
+>{ href: "link", onclick: eventHandler } : { href: string; onclick: (event: Event) => void; }
+>href : string
+>"link" : "link"
+>onclick : (event: Event) => void
+>eventHandler : (event: Event) => void
+>"click here" : "click here"
+
+    assertEqual(aNode.isSVG, false);
+>assertEqual(aNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.isSVG : boolean
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>isSVG : boolean
+>false : false
+
+    assertEqual(aNode.type, "a");
+>assertEqual(aNode.type, "a") : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.type : "a"
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>type : "a"
+>"a" : "a"
+
+    assertEqual(aNode.key, null);
+>assertEqual(aNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.key : string | number | null
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>key : string | number | null
+>null : null
+
+    assertEqual(aNode.props.href, "link");
+>assertEqual(aNode.props.href, "link") : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.props.href : string | undefined
+>aNode.props : PetitDom.Props<HTMLAnchorElement>
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>props : PetitDom.Props<HTMLAnchorElement>
+>href : string | undefined
+>"link" : "link"
+
+    assertEqual(aNode.props.onclick, eventHandler);
+>assertEqual(aNode.props.onclick, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.props.onclick : ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
+>aNode.props : PetitDom.Props<HTMLAnchorElement>
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>props : PetitDom.Props<HTMLAnchorElement>
+>onclick : ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
+>eventHandler : (event: Event) => void
+
+    assertEqual(aNode.content.length, 1);
+>assertEqual(aNode.content.length, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>aNode.content.length : number
+>aNode.content : readonly PetitDom.VNode[]
+>aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>1 : 1
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <a href="link" onclick={eventHandler}>click here</a>;
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+><a href="link" onclick={eventHandler}>click here</a> : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>a : any
+>href : string
+>onclick : (event: Event) => void
+>eventHandler : (event: Event) => void
+>a : any
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : string
+>jsxNode.type as string : string
+>jsxNode.type : "a"
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>type : "a"
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLAnchorElement>;
+>jsxNodeProps : PetitDom.Props<HTMLAnchorElement>
+>jsxNode.props as PetitDom.Props<HTMLAnchorElement> : PetitDom.Props<HTMLAnchorElement>
+>jsxNode.props : PetitDom.Props<HTMLAnchorElement>
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>props : PetitDom.Props<HTMLAnchorElement>
+>PetitDom : any
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, "a");
+>assertEqual(jsxNodeType, "a") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : string
+>"a" : "a"
+
+    assertEqual(jsxNode.key, null);
+>assertEqual(jsxNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>key : string | number | null
+>null : null
+
+    assertEqual(jsxNodeProps.href, "link");
+>assertEqual(jsxNodeProps.href, "link") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.href : string | undefined
+>jsxNodeProps : PetitDom.Props<HTMLAnchorElement>
+>href : string | undefined
+>"link" : "link"
+
+    assertEqual(jsxNodeProps.onclick, eventHandler);
+>assertEqual(jsxNodeProps.onclick, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onclick : ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
+>jsxNodeProps : PetitDom.Props<HTMLAnchorElement>
+>onclick : ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 1);
+>assertEqual(jsxNode.content.length, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>1 : 1
+}
+
+/**
+ * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithMixedContent() {
+>testHtmlElementWithMixedContent : () => void
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const formNode = h(
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>h(        "form",        { key: 1, method: "POST", onsubmit: eventHandler },        "Hello ", h("span", null, "World")    ) : PetitDom.ElementNode<"form", HTMLFormElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+
+        "form",
+>"form" : "form"
+
+        { key: 1, method: "POST", onsubmit: eventHandler },
+>{ key: 1, method: "POST", onsubmit: eventHandler } : { key: number; method: string; onsubmit: (event: Event) => void; }
+>key : number
+>1 : 1
+>method : string
+>"POST" : "POST"
+>onsubmit : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+        "Hello ", h("span", null, "World")
+>"Hello " : "Hello "
+>h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"span" : "span"
+>null : null
+>"World" : "World"
+
+    );
+
+    assertEqual(formNode.isSVG, false);
+>assertEqual(formNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.isSVG : boolean
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>isSVG : boolean
+>false : false
+
+    assertEqual(formNode.type, "form");
+>assertEqual(formNode.type, "form") : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.type : "form"
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>type : "form"
+>"form" : "form"
+
+    assertEqual(formNode.key, 1);
+>assertEqual(formNode.key, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.key : string | number | null
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>key : string | number | null
+>1 : 1
+
+    assertEqual(formNode.props.method, "POST");
+>assertEqual(formNode.props.method, "POST") : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.props.method : string | undefined
+>formNode.props : PetitDom.Props<HTMLFormElement>
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>props : PetitDom.Props<HTMLFormElement>
+>method : string | undefined
+>"POST" : "POST"
+
+    assertEqual(formNode.props.onsubmit, eventHandler);
+>assertEqual(formNode.props.onsubmit, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.props.onsubmit : ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined
+>formNode.props : PetitDom.Props<HTMLFormElement>
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>props : PetitDom.Props<HTMLFormElement>
+>onsubmit : ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined
+>eventHandler : (event: Event) => void
+
+    assertEqual(formNode.content.length, 2);
+>assertEqual(formNode.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>formNode.content.length : number
+>formNode.content : readonly PetitDom.VNode[]
+>formNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form>;
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+><form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form> : PetitDom.ElementNode<"form", HTMLFormElement>
+>form : any
+>key : number
+>1 : 1
+>method : string
+>onsubmit : (event: Event) => void
+>eventHandler : (event: Event) => void
+><span>World</span> : PetitDom.ElementNode<"span", HTMLSpanElement>
+>span : any
+>span : any
+>form : any
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : string
+>jsxNode.type as string : string
+>jsxNode.type : "form"
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>type : "form"
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLFormElement>;
+>jsxNodeProps : PetitDom.Props<HTMLFormElement>
+>jsxNode.props as PetitDom.Props<HTMLFormElement> : PetitDom.Props<HTMLFormElement>
+>jsxNode.props : PetitDom.Props<HTMLFormElement>
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>props : PetitDom.Props<HTMLFormElement>
+>PetitDom : any
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, "form");
+>assertEqual(jsxNodeType, "form") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : string
+>"form" : "form"
+
+    assertEqual(jsxNode.key, 1);
+>assertEqual(jsxNode.key, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>key : string | number | null
+>1 : 1
+
+    assertEqual(jsxNodeProps.method, "POST");
+>assertEqual(jsxNodeProps.method, "POST") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.method : string | undefined
+>jsxNodeProps : PetitDom.Props<HTMLFormElement>
+>method : string | undefined
+>"POST" : "POST"
+
+    assertEqual(jsxNodeProps.onsubmit, eventHandler);
+>assertEqual(jsxNodeProps.onsubmit, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onsubmit : ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined
+>jsxNodeProps : PetitDom.Props<HTMLFormElement>
+>onsubmit : ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual(jsxNode.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ElementNode<"form", HTMLFormElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+}
+
+/**
+ * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+ */
+export function testSvgElementWithChild() {
+>testSvgElementWithChild : () => void
+
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>h("svg", { key: 2, currentScale: 1 }, h("path")) : PetitDom.ElementNode<"svg", SVGSVGElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"svg" : "svg"
+>{ key: 2, currentScale: 1 } : { key: number; currentScale: number; }
+>key : number
+>2 : 2
+>currentScale : number
+>1 : 1
+>h("path") : PetitDom.ElementNode<"path", SVGPathElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"path" : "path"
+
+    assertEqual(svgNode.isSVG, true);
+>assertEqual(svgNode.isSVG, true) : void
+>assertEqual : <T>(a: T, b: T) => void
+>svgNode.isSVG : boolean
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>isSVG : boolean
+>true : true
+
+    assertEqual(svgNode.type, "svg");
+>assertEqual(svgNode.type, "svg") : void
+>assertEqual : <T>(a: T, b: T) => void
+>svgNode.type : "svg"
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>type : "svg"
+>"svg" : "svg"
+
+    assertEqual(svgNode.key, 2);
+>assertEqual(svgNode.key, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>svgNode.key : string | number | null
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>key : string | number | null
+>2 : 2
+
+    assertEqual(svgNode.props.currentScale, 1);
+>assertEqual(svgNode.props.currentScale, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>svgNode.props.currentScale : number | undefined
+>svgNode.props : PetitDom.Props<SVGSVGElement>
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>props : PetitDom.Props<SVGSVGElement>
+>currentScale : number | undefined
+>1 : 1
+
+    assertEqual(svgNode.content.length, 1);
+>assertEqual(svgNode.content.length, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>svgNode.content.length : number
+>svgNode.content : readonly PetitDom.VNode[]
+>svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>1 : 1
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <svg key={2} currentScale={1}><path /></svg>;
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+><svg key={2} currentScale={1}><path /></svg> : PetitDom.ElementNode<"svg", SVGSVGElement>
+>svg : any
+>key : number
+>2 : 2
+>currentScale : number
+>1 : 1
+><path /> : PetitDom.ElementNode<"path", SVGPathElement>
+>path : any
+>svg : any
+
+    const jsxNodeType = jsxNode.type as string;
+>jsxNodeType : string
+>jsxNode.type as string : string
+>jsxNode.type : "svg"
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>type : "svg"
+
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<SVGSVGElement>;
+>jsxNodeProps : PetitDom.Props<SVGSVGElement>
+>jsxNode.props as PetitDom.Props<SVGSVGElement> : PetitDom.Props<SVGSVGElement>
+>jsxNode.props : PetitDom.Props<SVGSVGElement>
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>props : PetitDom.Props<SVGSVGElement>
+>PetitDom : any
+
+    assertEqual(jsxNode.isSVG, true);
+>assertEqual(jsxNode.isSVG, true) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>isSVG : boolean
+>true : true
+
+    assertEqual(jsxNodeType, "svg");
+>assertEqual(jsxNodeType, "svg") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : string
+>"svg" : "svg"
+
+    assertEqual(jsxNode.key, 2);
+>assertEqual(jsxNode.key, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>key : string | number | null
+>2 : 2
+
+    assertEqual(jsxNodeProps.currentScale, 1);
+>assertEqual(jsxNodeProps.currentScale, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.currentScale : number | undefined
+>jsxNodeProps : PetitDom.Props<SVGSVGElement>
+>currentScale : number | undefined
+>1 : 1
+
+    assertEqual(jsxNode.content.length, 1);
+>assertEqual(jsxNode.content.length, 1) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ElementNode<"svg", SVGSVGElement>
+>content : readonly PetitDom.VNode[]
+>length : number
+>1 : 1
+}
+
+/**
+ * Create a function component, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponent() {
+>testFunctionComponent : () => void
+
+    function FunctionComponent(): JSX.Element {
+>FunctionComponent : () => JSX.Element
+>JSX : any
+
+        return <div>Hello World</div>;
+><div>Hello World</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>div : any
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponent, { key: "1" });
+>node : PetitDom.FunctionComponentNode<any>
+>h(FunctionComponent, { key: "1" }) : PetitDom.FunctionComponentNode<any>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>FunctionComponent : () => JSX.Element
+>{ key: "1" } : { key: string; }
+>key : string
+>"1" : "1"
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.FunctionComponentNode<any>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, FunctionComponent);
+>assertEqual(node.type, FunctionComponent) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.FunctionComponent<any>
+>node : PetitDom.FunctionComponentNode<any>
+>type : PetitDom.FunctionComponent<any>
+>FunctionComponent : () => JSX.Element
+
+    assertEqual(node.key, "1");
+>assertEqual(node.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.FunctionComponentNode<any>
+>key : string | number | null
+>"1" : "1"
+
+    assertEqual(node.props.key, "1");
+>assertEqual(node.props.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.key : any
+>node.props : any
+>node : PetitDom.FunctionComponentNode<any>
+>props : any
+>key : any
+>"1" : "1"
+
+    assertEqual(node.content.length, 0);
+>assertEqual(node.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.FunctionComponentNode<any>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponent key="1" />;
+>jsxNode : PetitDom.FunctionComponentNode<any>
+><FunctionComponent key="1" /> : PetitDom.FunctionComponentNode<any>
+>FunctionComponent : () => JSX.Element
+>key : string
+
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<{}>;
+>jsxNodeType : PetitDom.FunctionComponent<{}>
+>jsxNode.type as PetitDom.FunctionComponent<{}> : PetitDom.FunctionComponent<{}>
+>jsxNode.type : PetitDom.FunctionComponent<any>
+>jsxNode : PetitDom.FunctionComponentNode<any>
+>type : PetitDom.FunctionComponent<any>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+>jsxNodeProps : PetitDom.IntrinsicProps
+>jsxNode.props as PetitDom.IntrinsicProps : PetitDom.IntrinsicProps
+>jsxNode.props : any
+>jsxNode : PetitDom.FunctionComponentNode<any>
+>props : any
+>PetitDom : any
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.FunctionComponentNode<any>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, FunctionComponent);
+>assertEqual(jsxNodeType, FunctionComponent) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.FunctionComponent<{}>
+>FunctionComponent : () => JSX.Element
+
+    assertEqual(jsxNode.key, "1");
+>assertEqual(jsxNode.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.FunctionComponentNode<any>
+>key : string | number | null
+>"1" : "1"
+
+    assertEqual(jsxNodeProps.key, "1");
+>assertEqual(jsxNodeProps.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.key : string | number | undefined
+>jsxNodeProps : PetitDom.IntrinsicProps
+>key : string | number | undefined
+>"1" : "1"
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual(jsxNode.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.FunctionComponentNode<any>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+}
+
+/**
+ * Create a function component with props, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithProps() {
+>testFunctionComponentWithProps : () => void
+
+    function FunctionComponentWithProps(props: CustomProps): JSX.Element {
+>FunctionComponentWithProps : (props: CustomProps) => JSX.Element
+>props : CustomProps
+>JSX : any
+
+        const { name, count, onSomeEvent } = props;
+>name : string
+>count : number
+>onSomeEvent : (event: Event) => void
+>props : CustomProps
+
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}></div>;
+><div className={name} tabIndex={count} onclick={onSomeEvent}></div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>className : string
+>name : string
+>tabIndex : number
+>count : number
+>onclick : (event: Event) => void
+>onSomeEvent : (event: Event) => void
+>div : any
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler }) : PetitDom.FunctionComponentNode<CustomProps>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>FunctionComponentWithProps : (props: CustomProps) => JSX.Element
+>{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
+>name : string
+>"xyz" : "xyz"
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, FunctionComponentWithProps);
+>assertEqual(node.type, FunctionComponentWithProps) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.FunctionComponent<CustomProps>
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>type : PetitDom.FunctionComponent<CustomProps>
+>FunctionComponentWithProps : (props: CustomProps) => JSX.Element
+
+    assertEqual(node.key, null);
+>assertEqual(node.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual(node.props.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.name : string
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(node.props.count, 123);
+>assertEqual(node.props.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.count : number
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>count : number
+>123 : 123
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual(node.props.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.onSomeEvent : (event: Event) => void
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.content.length, 0);
+>assertEqual(node.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+><FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} /> : PetitDom.FunctionComponentNode<CustomProps>
+>FunctionComponentWithProps : (props: CustomProps) => JSX.Element
+>name : string
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+>jsxNodeType : PetitDom.FunctionComponent<CustomProps>
+>jsxNode.type as PetitDom.FunctionComponent<CustomProps> : PetitDom.FunctionComponent<CustomProps>
+>jsxNode.type : PetitDom.FunctionComponent<CustomProps>
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>type : PetitDom.FunctionComponent<CustomProps>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : CustomProps
+>jsxNode.props as CustomProps : CustomProps
+>jsxNode.props : CustomProps & PetitDom.IntrinsicProps
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, FunctionComponentWithProps);
+>assertEqual(jsxNodeType, FunctionComponentWithProps) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.FunctionComponent<CustomProps>
+>FunctionComponentWithProps : (props: CustomProps) => JSX.Element
+
+    assertEqual(jsxNode.key, null);
+>assertEqual(jsxNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual(jsxNodeProps.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.name : string
+>jsxNodeProps : CustomProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual(jsxNodeProps.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.count : number
+>jsxNodeProps : CustomProps
+>count : number
+>123 : 123
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual(jsxNodeProps.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onSomeEvent : (event: Event) => void
+>jsxNodeProps : CustomProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual(jsxNode.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+}
+
+/**
+ * Create a function component with child content, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithChildren() {
+>testFunctionComponentWithChildren : () => void
+
+    function FunctionComponentWithChildren(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): JSX.Element {
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+>props : CustomProps
+>content : readonly PetitDom.Content[]
+>PetitDom : any
+>JSX : any
+
+        const { name, count, onSomeEvent } = props;
+>name : string
+>count : number
+>onSomeEvent : (event: Event) => void
+>props : CustomProps
+
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>;
+><div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>className : string
+>name : string
+>tabIndex : number
+>count : number
+>onclick : (event: Event) => void
+>onSomeEvent : (event: Event) => void
+>content : readonly PetitDom.Content[]
+>div : any
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>h(        FunctionComponentWithChildren,        { name: "xyz", count: 123, onSomeEvent: eventHandler },        "Hello",        h("span", null, "World")    ) : PetitDom.FunctionComponentNode<CustomProps>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+
+        FunctionComponentWithChildren,
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+>{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
+>name : string
+>"xyz" : "xyz"
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+        "Hello",
+>"Hello" : "Hello"
+
+        h("span", null, "World")
+>h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"span" : "span"
+>null : null
+>"World" : "World"
+
+    );
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, FunctionComponentWithChildren);
+>assertEqual(node.type, FunctionComponentWithChildren) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.FunctionComponent<CustomProps>
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>type : PetitDom.FunctionComponent<CustomProps>
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+
+    assertEqual(node.key, null);
+>assertEqual(node.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual(node.props.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.name : string
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(node.props.count, 123);
+>assertEqual(node.props.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.count : number
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>count : number
+>123 : 123
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual(node.props.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.onSomeEvent : (event: Event) => void
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.content.length, 2);
+>assertEqual(node.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.FunctionComponentNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>(        <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>            Hello <span>World</span>        </FunctionComponentWithChildren>    ) : PetitDom.FunctionComponentNode<CustomProps>
+
+        <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+><FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>            Hello <span>World</span>        </FunctionComponentWithChildren> : PetitDom.FunctionComponentNode<CustomProps>
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+>name : string
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+            Hello <span>World</span>
+><span>World</span> : PetitDom.ElementNode<"span", HTMLSpanElement>
+>span : any
+>span : any
+
+        </FunctionComponentWithChildren>
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+>jsxNodeType : PetitDom.FunctionComponent<CustomProps>
+>jsxNode.type as PetitDom.FunctionComponent<CustomProps> : PetitDom.FunctionComponent<CustomProps>
+>jsxNode.type : PetitDom.FunctionComponent<CustomProps>
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>type : PetitDom.FunctionComponent<CustomProps>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : CustomProps
+>jsxNode.props as CustomProps : CustomProps
+>jsxNode.props : CustomProps & PetitDom.IntrinsicProps
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, FunctionComponentWithChildren);
+>assertEqual(jsxNodeType, FunctionComponentWithChildren) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.FunctionComponent<CustomProps>
+>FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
+
+    assertEqual(jsxNode.key, null);
+>assertEqual(jsxNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual(jsxNodeProps.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.name : string
+>jsxNodeProps : CustomProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual(jsxNodeProps.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.count : number
+>jsxNodeProps : CustomProps
+>count : number
+>123 : 123
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual(jsxNodeProps.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onSomeEvent : (event: Event) => void
+>jsxNodeProps : CustomProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual(jsxNode.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.FunctionComponentNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+}
+
+/**
+ * Create a component class, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClass() {
+>testComponentClass : () => void
+
+    class ComponentClass {
+>ComponentClass : ComponentClass
+
+        props = {};
+>props : {}
+>{} : {}
+
+        mount(): Element {
+>mount : () => Element
+
+            return mount(<div className="some-class"></div>);
+>mount(<div className="some-class"></div>) : Element
+>mount : (vnode: PetitDom.VNode) => Element
+><div className="some-class"></div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>className : string
+>div : any
+        }
+
+        patch(element: Element, newProps: object, oldProps: object, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : (element: Element, newProps: object, oldProps: object, newContent: readonly PetitDom.VNode[], oldContent: readonly PetitDom.VNode[]) => Element
+>element : Element
+>newProps : object
+>oldProps : object
+>newContent : readonly PetitDom.VNode[]
+>PetitDom : any
+>oldContent : readonly PetitDom.VNode[]
+>PetitDom : any
+
+            patch(
+>patch(                <div {...oldProps}>{oldContent}</div>,                <div {...newProps}>{newContent}</div>            ) : Element
+>patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
+
+                <div {...oldProps}>{oldContent}</div>,
+><div {...oldProps}>{oldContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>oldProps : object
+>oldContent : readonly PetitDom.VNode[]
+>div : any
+
+                <div {...newProps}>{newContent}</div>
+><div {...newProps}>{newContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>newProps : object
+>newContent : readonly PetitDom.VNode[]
+>div : any
+
+            );
+            return element;
+>element : Element
+        }
+
+        unmount(element: Element): void {
+>unmount : (element: Element) => void
+>element : Element
+
+            unmount(<div>Hello World</div>);
+>unmount(<div>Hello World</div>) : void
+>unmount : (vnode: PetitDom.VNode) => void
+><div>Hello World</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>div : any
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClass, { key: "1" });
+>node : PetitDom.ComponentClassNode<object>
+>h(ComponentClass, { key: "1" }) : PetitDom.ComponentClassNode<object>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>ComponentClass : typeof ComponentClass
+>{ key: "1" } : { key: string; }
+>key : string
+>"1" : "1"
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.ComponentClassNode<object>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, ComponentClass);
+>assertEqual(node.type, ComponentClass) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.ComponentClass<object>
+>node : PetitDom.ComponentClassNode<object>
+>type : PetitDom.ComponentClass<object>
+>ComponentClass : typeof ComponentClass
+
+    assertEqual(node.key, "1");
+>assertEqual(node.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.ComponentClassNode<object>
+>key : string | number | null
+>"1" : "1"
+
+    assertEqual(node.props.key, "1");
+>assertEqual(node.props.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.key : string | number | undefined
+>node.props : object & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<object>
+>props : object & PetitDom.IntrinsicProps
+>key : string | number | undefined
+>"1" : "1"
+
+    assertEqual(node.content.length, 0);
+>assertEqual(node.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.ComponentClassNode<object>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClass key="1" />;
+>jsxNode : PetitDom.ComponentClassNode<object>
+><ComponentClass key="1" /> : PetitDom.ComponentClassNode<object>
+>ComponentClass : typeof ComponentClass
+>key : string
+
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<{}>;
+>jsxNodeType : PetitDom.ComponentClass<{}>
+>jsxNode.type as PetitDom.ComponentClass<{}> : PetitDom.ComponentClass<{}>
+>jsxNode.type : PetitDom.ComponentClass<object>
+>jsxNode : PetitDom.ComponentClassNode<object>
+>type : PetitDom.ComponentClass<object>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+>jsxNodeProps : PetitDom.IntrinsicProps
+>jsxNode.props as PetitDom.IntrinsicProps : PetitDom.IntrinsicProps
+>jsxNode.props : object & PetitDom.IntrinsicProps
+>jsxNode : PetitDom.ComponentClassNode<object>
+>props : object & PetitDom.IntrinsicProps
+>PetitDom : any
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ComponentClassNode<object>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, ComponentClass);
+>assertEqual(jsxNodeType, ComponentClass) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.ComponentClass<{}>
+>ComponentClass : typeof ComponentClass
+
+    assertEqual(jsxNode.key, "1");
+>assertEqual(jsxNode.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ComponentClassNode<object>
+>key : string | number | null
+>"1" : "1"
+
+    assertEqual(jsxNodeProps.key, "1");
+>assertEqual(jsxNodeProps.key, "1") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.key : string | number | undefined
+>jsxNodeProps : PetitDom.IntrinsicProps
+>key : string | number | undefined
+>"1" : "1"
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual(jsxNode.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ComponentClassNode<object>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+}
+
+/**
+ * Create a component class with props, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithProps() {
+>testComponentClassWithProps : () => void
+
+    class ComponentClassWithProps {
+>ComponentClassWithProps : ComponentClassWithProps
+
+        props: CustomProps;
+>props : CustomProps
+
+        constructor(props: CustomProps) {
+>props : CustomProps
+
+            this.props = props;
+>this.props = props : CustomProps
+>this.props : CustomProps
+>this : this
+>props : CustomProps
+>props : CustomProps
+        }
+
+        mount(props: CustomProps): Element {
+>mount : (props: CustomProps) => Element
+>props : CustomProps
+
+            const { name, count, onSomeEvent } = props;
+>name : string
+>count : number
+>onSomeEvent : (event: Event) => void
+>props : CustomProps
+
+            return mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />);
+>mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />) : Element
+>mount : (vnode: PetitDom.VNode) => Element
+><div className={name} tabIndex={count} onclick={onSomeEvent} /> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>className : string
+>name : string
+>tabIndex : number
+>count : number
+>onclick : (event: Event) => void
+>onSomeEvent : (event: Event) => void
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : (element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: readonly PetitDom.VNode[], oldContent: readonly PetitDom.VNode[]) => Element
+>element : Element
+>newProps : CustomProps
+>oldProps : CustomProps
+>newContent : readonly PetitDom.VNode[]
+>PetitDom : any
+>oldContent : readonly PetitDom.VNode[]
+>PetitDom : any
+
+            patch(
+>patch(                <div {...oldProps}>{oldContent}</div>,                <div {...newProps}>{newContent}</div>            ) : Element
+>patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
+
+                <div {...oldProps}>{oldContent}</div>,
+><div {...oldProps}>{oldContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>oldProps : CustomProps
+>oldContent : readonly PetitDom.VNode[]
+>div : any
+
+                <div {...newProps}>{newContent}</div>
+><div {...newProps}>{newContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>newProps : CustomProps
+>newContent : readonly PetitDom.VNode[]
+>div : any
+
+            );
+            return element;
+>element : Element
+        }
+
+        unmount(element: Element): void {
+>unmount : (element: Element) => void
+>element : Element
+
+            unmount(<div> Hello World</div >);
+>unmount(<div> Hello World</div >) : void
+>unmount : (vnode: PetitDom.VNode) => void
+><div> Hello World</div > : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>div : any
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+>node : PetitDom.ComponentClassNode<CustomProps>
+>h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler }) : PetitDom.ComponentClassNode<CustomProps>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>ComponentClassWithProps : typeof ComponentClassWithProps
+>{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
+>name : string
+>"xyz" : "xyz"
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.ComponentClassNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, ComponentClassWithProps);
+>assertEqual(node.type, ComponentClassWithProps) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.ComponentClass<CustomProps>
+>node : PetitDom.ComponentClassNode<CustomProps>
+>type : PetitDom.ComponentClass<CustomProps>
+>ComponentClassWithProps : typeof ComponentClassWithProps
+
+    assertEqual(node.key, null);
+>assertEqual(node.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.ComponentClassNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual(node.props.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.name : string
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(node.props.count, 123);
+>assertEqual(node.props.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.count : number
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>count : number
+>123 : 123
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual(node.props.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.onSomeEvent : (event: Event) => void
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.content.length, 0);
+>assertEqual(node.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.ComponentClassNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+><ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} /> : PetitDom.ComponentClassNode<CustomProps>
+>ComponentClassWithProps : typeof ComponentClassWithProps
+>name : string
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+>jsxNodeType : PetitDom.ComponentClass<CustomProps>
+>jsxNode.type as PetitDom.ComponentClass<CustomProps> : PetitDom.ComponentClass<CustomProps>
+>jsxNode.type : PetitDom.ComponentClass<CustomProps>
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>type : PetitDom.ComponentClass<CustomProps>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : CustomProps
+>jsxNode.props as CustomProps : CustomProps
+>jsxNode.props : CustomProps & PetitDom.IntrinsicProps
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, ComponentClassWithProps);
+>assertEqual(jsxNodeType, ComponentClassWithProps) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.ComponentClass<CustomProps>
+>ComponentClassWithProps : typeof ComponentClassWithProps
+
+    assertEqual(jsxNode.key, null);
+>assertEqual(jsxNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual(jsxNodeProps.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.name : string
+>jsxNodeProps : CustomProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual(jsxNodeProps.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.count : number
+>jsxNodeProps : CustomProps
+>count : number
+>123 : 123
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual(jsxNodeProps.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onSomeEvent : (event: Event) => void
+>jsxNodeProps : CustomProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 0);
+>assertEqual(jsxNode.content.length, 0) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>0 : 0
+}
+
+/**
+ * Create a component class with child content, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithChildren() {
+>testComponentClassWithChildren : () => void
+
+    class ComponentClassWithChildren {
+>ComponentClassWithChildren : ComponentClassWithChildren
+
+        props: CustomProps;
+>props : CustomProps
+
+        constructor(props: CustomProps) {
+>props : CustomProps
+
+            this.props = props;
+>this.props = props : CustomProps
+>this.props : CustomProps
+>this : this
+>props : CustomProps
+>props : CustomProps
+        }
+
+        mount(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): Element {
+>mount : (props: CustomProps, content: readonly PetitDom.Content[]) => Element
+>props : CustomProps
+>content : readonly PetitDom.Content[]
+>PetitDom : any
+
+            const { name, count, onSomeEvent } = props;
+>name : string
+>count : number
+>onSomeEvent : (event: Event) => void
+>props : CustomProps
+
+            return mount(
+>mount(                <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>            ) : Element
+>mount : (vnode: PetitDom.VNode) => Element
+
+                <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>
+><div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>className : string
+>name : string
+>tabIndex : number
+>count : number
+>onclick : (event: Event) => void
+>onSomeEvent : (event: Event) => void
+>content : readonly PetitDom.Content[]
+>div : any
+
+            );
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+>patch : (element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: readonly PetitDom.VNode[], oldContent: readonly PetitDom.VNode[]) => Element
+>element : Element
+>newProps : CustomProps
+>oldProps : CustomProps
+>newContent : readonly PetitDom.VNode[]
+>PetitDom : any
+>oldContent : readonly PetitDom.VNode[]
+>PetitDom : any
+
+            patch(
+>patch(                <div {...oldProps}>{oldContent}</div>,                <div {...newProps}>{newContent}</div>            ) : Element
+>patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
+
+                <div {...oldProps}>{oldContent}</div>,
+><div {...oldProps}>{oldContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>oldProps : CustomProps
+>oldContent : readonly PetitDom.VNode[]
+>div : any
+
+                <div {...newProps}>{newContent}</div>
+><div {...newProps}>{newContent}</div> : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>newProps : CustomProps
+>newContent : readonly PetitDom.VNode[]
+>div : any
+
+            );
+            return element;
+>element : Element
+        }
+
+        unmount(element: Element): void {
+>unmount : (element: Element) => void
+>element : Element
+
+            unmount(<div> Hello World</div >);
+>unmount(<div> Hello World</div >) : void
+>unmount : (vnode: PetitDom.VNode) => void
+><div> Hello World</div > : PetitDom.ElementNode<"div", HTMLDivElement>
+>div : any
+>div : any
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(
+>node : PetitDom.ComponentClassNode<CustomProps>
+>h(        ComponentClassWithChildren,        { name: "xyz", count: 123, onSomeEvent: eventHandler },        "Hello",        h("span", null, "World")    ) : PetitDom.ComponentClassNode<CustomProps>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+
+        ComponentClassWithChildren,
+>ComponentClassWithChildren : typeof ComponentClassWithChildren
+
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+>{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
+>name : string
+>"xyz" : "xyz"
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+        "Hello",
+>"Hello" : "Hello"
+
+        h("span", null, "World")
+>h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
+>h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>"span" : "span"
+>null : null
+>"World" : "World"
+
+    );
+
+    assertEqual(node.isSVG, false);
+>assertEqual(node.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.isSVG : boolean
+>node : PetitDom.ComponentClassNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(node.type, ComponentClassWithChildren);
+>assertEqual(node.type, ComponentClassWithChildren) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.type : PetitDom.ComponentClass<CustomProps>
+>node : PetitDom.ComponentClassNode<CustomProps>
+>type : PetitDom.ComponentClass<CustomProps>
+>ComponentClassWithChildren : typeof ComponentClassWithChildren
+
+    assertEqual(node.key, null);
+>assertEqual(node.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.key : string | number | null
+>node : PetitDom.ComponentClassNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(node.props.name, "xyz");
+>assertEqual(node.props.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.name : string
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(node.props.count, 123);
+>assertEqual(node.props.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.count : number
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>count : number
+>123 : 123
+
+    assertEqual(node.props.onSomeEvent, eventHandler);
+>assertEqual(node.props.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.props.onSomeEvent : (event: Event) => void
+>node.props : CustomProps & PetitDom.IntrinsicProps
+>node : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(node.content.length, 2);
+>assertEqual(node.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>node.content.length : number
+>node.content : readonly PetitDom.VNode[]
+>node : PetitDom.ComponentClassNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>(        <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>            Hello <span>World</span>        </ComponentClassWithChildren>    ) : PetitDom.ComponentClassNode<CustomProps>
+
+        <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+><ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>            Hello <span>World</span>        </ComponentClassWithChildren> : PetitDom.ComponentClassNode<CustomProps>
+>ComponentClassWithChildren : typeof ComponentClassWithChildren
+>name : string
+>count : number
+>123 : 123
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+            Hello <span>World</span>
+><span>World</span> : PetitDom.ElementNode<"span", HTMLSpanElement>
+>span : any
+>span : any
+
+        </ComponentClassWithChildren>
+>ComponentClassWithChildren : typeof ComponentClassWithChildren
+
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+>jsxNodeType : PetitDom.ComponentClass<CustomProps>
+>jsxNode.type as PetitDom.ComponentClass<CustomProps> : PetitDom.ComponentClass<CustomProps>
+>jsxNode.type : PetitDom.ComponentClass<CustomProps>
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>type : PetitDom.ComponentClass<CustomProps>
+>PetitDom : any
+
+    const jsxNodeProps = jsxNode.props as CustomProps;
+>jsxNodeProps : CustomProps
+>jsxNode.props as CustomProps : CustomProps
+>jsxNode.props : CustomProps & PetitDom.IntrinsicProps
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>props : CustomProps & PetitDom.IntrinsicProps
+
+    assertEqual(jsxNode.isSVG, false);
+>assertEqual(jsxNode.isSVG, false) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.isSVG : boolean
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>isSVG : boolean
+>false : false
+
+    assertEqual(jsxNodeType, ComponentClassWithChildren);
+>assertEqual(jsxNodeType, ComponentClassWithChildren) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeType : PetitDom.ComponentClass<CustomProps>
+>ComponentClassWithChildren : typeof ComponentClassWithChildren
+
+    assertEqual(jsxNode.key, null);
+>assertEqual(jsxNode.key, null) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.key : string | number | null
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>key : string | number | null
+>null : null
+
+    assertEqual(jsxNodeProps.name, "xyz");
+>assertEqual(jsxNodeProps.name, "xyz") : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.name : string
+>jsxNodeProps : CustomProps
+>name : string
+>"xyz" : "xyz"
+
+    assertEqual(jsxNodeProps.count, 123);
+>assertEqual(jsxNodeProps.count, 123) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.count : number
+>jsxNodeProps : CustomProps
+>count : number
+>123 : 123
+
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+>assertEqual(jsxNodeProps.onSomeEvent, eventHandler) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNodeProps.onSomeEvent : (event: Event) => void
+>jsxNodeProps : CustomProps
+>onSomeEvent : (event: Event) => void
+>eventHandler : (event: Event) => void
+
+    assertEqual(jsxNode.content.length, 2);
+>assertEqual(jsxNode.content.length, 2) : void
+>assertEqual : <T>(a: T, b: T) => void
+>jsxNode.content.length : number
+>jsxNode.content : readonly PetitDom.VNode[]
+>jsxNode : PetitDom.ComponentClassNode<CustomProps>
+>content : readonly PetitDom.VNode[]
+>length : number
+>2 : 2
+}
+
diff --git a/tests/cases/compiler/petitDomSimpleJsx.tsx b/tests/cases/compiler/petitDomSimpleJsx.tsx
new file mode 100644
index 0000000000000..e94747a100430
--- /dev/null
+++ b/tests/cases/compiler/petitDomSimpleJsx.tsx
@@ -0,0 +1,563 @@
+// @jsx: react
+// @strict: true
+// @lib: dom, es6
+// @filename: node_modules/petit-dom/index.d.ts
+// Modified type definitions for Petit-Dom 0.2
+// Project: https://github.com/yelouafi/petit-dom
+// Definitions by: James Messinger <https://github.com/JamesMessinger>, modified by @weswigham for testing
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.4
+
+/**
+ * Creates a VNode of the specified HTML Element type and with the
+ * specified properties and contents.
+ *
+ * @param type - The tag name of element to create
+ * @param props - Properties to set on the element
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
+    type: T,
+    props?: PetitDom.Props<E> | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ElementNode<T, E>;
+
+/**
+ * Creates a VNode using a PetitDom component object.
+ *
+ * @param type - A PetitDom component object
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.Component<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ComponentNode<P>;
+
+/**
+ * Creates a VNode using a PetitDom component class.
+ *
+ * @param type - A PetitDom component class
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.ComponentClass<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.ComponentClassNode<P>;
+
+/**
+ * Creates a VNode using a PetitDom function component.
+ *
+ * This function is compatible with both JSX and HyperScript syntax.
+ *
+ * @param type - A PetitDom function component
+ * @param props - Properties to set on the component
+ * @param ...children - Child nodes
+ * @returns A new VNode object
+ */
+export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+    type: PetitDom.FunctionComponent<P>,
+    props?: (P & PetitDom.IntrinsicProps) | null,
+    ...children: ReadonlyArray<PetitDom.Content>
+): PetitDom.FunctionComponentNode<P>;
+
+/**
+ * Creates actual DOM Elements for the given VNode and its children.
+ *
+ * @param vnode - The VNode object to mount
+ * @returns The newly-created DOM element
+ */
+export function mount(vnode: PetitDom.VNode): Element;
+
+/**
+ * Diffs two VNodes and applies the necessary DOM changes
+ *
+ * @param newVNode - The new VNode object, which will be mounted to the DOM element of oldVNode
+ * @param oldVNode - The old VNode object to diff against
+ * @param parent - The parent DOM element. Used internally by PetitDom to recursively patch child nodes
+ * @returns The updated DOM element. This element is also moved from oldVNode to newVNode
+ */
+export function patch(newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element): Element;
+
+/**
+ * Removes the given VNode from the actual DOM
+ *
+ * @param vnode - The VNode object to unmount
+ */
+export function unmount(vnode: PetitDom.VNode): void;
+
+export namespace PetitDom {
+    type Key = string | number;
+    type ComponentProps = object;
+    interface ContentArray extends ReadonlyArray<Content> {}
+    type Content = string | VNode | ContentArray;
+
+    type DOMElementProps<E extends Element> = {
+        [P in keyof E]?: E[P];
+    };
+
+    interface IntrinsicProps {
+        content?: Content | ReadonlyArray<Content>;
+        key?: Key;
+    }
+
+    type Props<E extends Element = Element> = IntrinsicProps & DOMElementProps<E>;
+
+    type ShouldUpdate<P extends ComponentProps> = (
+        newProps: P,
+        oldProps: P,
+        newContent: ReadonlyArray<VNode>,
+        oldContent: ReadonlyArray<VNode>
+    ) => boolean;
+
+    interface FunctionComponent<P extends ComponentProps> {
+        (props: P, content: ReadonlyArray<Content>): FunctionComponentNode<P>;
+        shouldUpdate?: ShouldUpdate<P>;
+    }
+
+    interface ComponentClass<P extends ComponentProps> {
+        new(props: P, content: ReadonlyArray<Content>): Component<P>;
+    }
+
+    interface Component<P extends ComponentProps> {
+        mount(props: P, content: ReadonlyArray<VNode>): Element;
+        patch(element: Element, newProps: P, oldProps: P, newContent: ReadonlyArray<VNode>, oldContent: ReadonlyArray<VNode>): Element;
+        unmount(element: Element): void;
+    }
+
+    interface VNode {
+        readonly isSVG: boolean;
+        readonly type: any;
+        readonly key: Key | null;
+        readonly props: any;
+        readonly content: ReadonlyArray<VNode>;
+    }
+
+    interface ElementNode<T extends keyof DomElements, E extends DomElements[T]> extends VNode {
+        readonly type: T;
+        readonly props: Props<E>;
+    }
+
+    interface ComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: Component<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface ComponentClassNode<P extends ComponentProps> extends VNode {
+        readonly type: ComponentClass<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface FunctionComponentNode<P extends ComponentProps> extends VNode {
+        readonly type: FunctionComponent<P>;
+        readonly props: P & IntrinsicProps;
+    }
+
+    interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
+        "main": HTMLMainElement;
+    }
+}
+
+declare global {
+    namespace JSX {
+        // tslint:disable-next-line:no-empty-interface
+        interface Element extends PetitDom.VNode { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface ElementClass extends PetitDom.Component<PetitDom.ComponentProps> { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicClassAttributes<T> extends PetitDom.Props { }
+
+        // tslint:disable-next-line:no-empty-interface
+        interface IntrinsicAttributes extends PetitDom.IntrinsicProps { }
+
+        interface ElementAttributesProperty { props: PetitDom.Props; }
+
+        interface ElementChildrenAttribute { content: PetitDom.VNode[]; }
+
+        type IntrinsicElements = {
+            [P in keyof PetitDom.DomElements]:
+            PetitDom.Props<PetitDom.DomElements[P]> &
+            {
+                content?: PetitDom.Content | ReadonlyArray<PetitDom.Content>;
+            };
+        };
+    }
+}
+
+// @filename: petit-dom-tests.tsx
+/* @jsx h */
+// tslint:disable:no-empty
+// tslint:disable:no-null-keyword
+
+import { h, mount, patch, PetitDom, unmount } from "petit-dom";
+
+function assertEqual<T>(a: T, b: T) { }
+
+function eventHandler(event: Event): void { }
+
+interface CustomProps {
+    name: string;
+    count: number;
+    onSomeEvent(event: Event): void;
+}
+
+/**
+ * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithTextContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
+
+    assertEqual(aNode.isSVG, false);
+    assertEqual(aNode.type, "a");
+    assertEqual(aNode.key, null);
+    assertEqual(aNode.props.href, "link");
+    assertEqual(aNode.props.onclick, eventHandler);
+    assertEqual(aNode.content.length, 1);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <a href="link" onclick={eventHandler}>click here</a>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLAnchorElement>;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "a");
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.href, "link");
+    assertEqual(jsxNodeProps.onclick, eventHandler);
+    assertEqual(jsxNode.content.length, 1);
+}
+
+/**
+ * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+ */
+export function testHtmlElementWithMixedContent() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const formNode = h(
+        "form",
+        { key: 1, method: "POST", onsubmit: eventHandler },
+        "Hello ", h("span", null, "World")
+    );
+
+    assertEqual(formNode.isSVG, false);
+    assertEqual(formNode.type, "form");
+    assertEqual(formNode.key, 1);
+    assertEqual(formNode.props.method, "POST");
+    assertEqual(formNode.props.onsubmit, eventHandler);
+    assertEqual(formNode.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLFormElement>;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, "form");
+    assertEqual(jsxNode.key, 1);
+    assertEqual(jsxNodeProps.method, "POST");
+    assertEqual(jsxNodeProps.onsubmit, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+
+/**
+ * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+ */
+export function testSvgElementWithChild() {
+    // HyperScript syntax returns an ElementNode<T> object, with typed properties
+    const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
+
+    assertEqual(svgNode.isSVG, true);
+    assertEqual(svgNode.type, "svg");
+    assertEqual(svgNode.key, 2);
+    assertEqual(svgNode.props.currentScale, 1);
+    assertEqual(svgNode.content.length, 1);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <svg key={2} currentScale={1}><path /></svg>;
+    const jsxNodeType = jsxNode.type as string;
+    const jsxNodeProps = jsxNode.props as PetitDom.Props<SVGSVGElement>;
+
+    assertEqual(jsxNode.isSVG, true);
+    assertEqual(jsxNodeType, "svg");
+    assertEqual(jsxNode.key, 2);
+    assertEqual(jsxNodeProps.currentScale, 1);
+    assertEqual(jsxNode.content.length, 1);
+}
+
+/**
+ * Create a function component, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponent() {
+    function FunctionComponent(): JSX.Element {
+        return <div>Hello World</div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponent, { key: "1" });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponent);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponent key="1" />;
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<{}>;
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponent);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a function component with props, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithProps() {
+    function FunctionComponentWithProps(props: CustomProps): JSX.Element {
+        const { name, count, onSomeEvent } = props;
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}></div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a function component with child content, using HyperScript syntax and JSX syntax
+ */
+export function testFunctionComponentWithChildren() {
+    function FunctionComponentWithChildren(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): JSX.Element {
+        const { name, count, onSomeEvent } = props;
+        return <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>;
+    }
+
+    // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+    const node = h(
+        FunctionComponentWithChildren,
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello",
+        h("span", null, "World")
+    );
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, FunctionComponentWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+        <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+            Hello <span>World</span>
+        </FunctionComponentWithChildren>
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, FunctionComponentWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}
+
+/**
+ * Create a component class, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClass() {
+    class ComponentClass {
+        props = {};
+
+        mount(): Element {
+            return mount(<div className="some-class"></div>);
+        }
+
+        patch(element: Element, newProps: object, oldProps: object, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div>Hello World</div>);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClass, { key: "1" });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClass);
+    assertEqual(node.key, "1");
+    assertEqual(node.props.key, "1");
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClass key="1" />;
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<{}>;
+    const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClass);
+    assertEqual(jsxNode.key, "1");
+    assertEqual(jsxNodeProps.key, "1");
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a component class with props, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithProps() {
+    class ComponentClassWithProps {
+        props: CustomProps;
+
+        constructor(props: CustomProps) {
+            this.props = props;
+        }
+
+        mount(props: CustomProps): Element {
+            const { name, count, onSomeEvent } = props;
+            return mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />);
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div> Hello World</div >);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithProps);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 0);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = <ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithProps);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 0);
+}
+
+/**
+ * Create a component class with child content, using HyperScript syntax and JSX syntax
+ */
+export function testComponentClassWithChildren() {
+    class ComponentClassWithChildren {
+        props: CustomProps;
+
+        constructor(props: CustomProps) {
+            this.props = props;
+        }
+
+        mount(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): Element {
+            const { name, count, onSomeEvent } = props;
+            return mount(
+                <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>
+            );
+        }
+
+        patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+            patch(
+                <div {...oldProps}>{oldContent}</div>,
+                <div {...newProps}>{newContent}</div>
+            );
+            return element;
+        }
+
+        unmount(element: Element): void {
+            unmount(<div> Hello World</div >);
+        }
+    }
+
+    // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+    const node = h(
+        ComponentClassWithChildren,
+        { name: "xyz", count: 123, onSomeEvent: eventHandler },
+        "Hello",
+        h("span", null, "World")
+    );
+
+    assertEqual(node.isSVG, false);
+    assertEqual(node.type, ComponentClassWithChildren);
+    assertEqual(node.key, null);
+    assertEqual(node.props.name, "xyz");
+    assertEqual(node.props.count, 123);
+    assertEqual(node.props.onSomeEvent, eventHandler);
+    assertEqual(node.content.length, 2);
+
+    // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+    const jsxNode = (
+        <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+            Hello <span>World</span>
+        </ComponentClassWithChildren>
+    );
+    const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+    const jsxNodeProps = jsxNode.props as CustomProps;
+
+    assertEqual(jsxNode.isSVG, false);
+    assertEqual(jsxNodeType, ComponentClassWithChildren);
+    assertEqual(jsxNode.key, null);
+    assertEqual(jsxNodeProps.name, "xyz");
+    assertEqual(jsxNodeProps.count, 123);
+    assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+    assertEqual(jsxNode.content.length, 2);
+}

From 84c18d1d3fce457e9e493d0ed60d1595c582195f Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Mon, 18 Mar 2019 13:47:41 -0700
Subject: [PATCH 4/7] Accept baseline diffs in newer tests

---
 .../reference/doubleUnderscoreReactNamespace.errors.txt       | 4 ++--
 tests/baselines/reference/jsxNamespaceReexports.types         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt b/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
index 17da36096ef22..5d7eaf1319d10 100644
--- a/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
+++ b/tests/baselines/reference/doubleUnderscoreReactNamespace.errors.txt
@@ -1,4 +1,4 @@
-tests/cases/compiler/index.tsx(7,15): error TS2554: Expected 1 arguments, but got 2.
+tests/cases/compiler/index.tsx(7,23): error TS2554: Expected 1 arguments, but got 2.
 
 
 ==== tests/cases/compiler/index.tsx (1 errors) ====
@@ -9,7 +9,7 @@ tests/cases/compiler/index.tsx(7,15): error TS2554: Expected 1 arguments, but go
     declare var __foot: any;
     
     const thing = <__foot />;
-                  ~~~~~~~~~~
+                          
 !!! error TS2554: Expected 1 arguments, but got 2.
     
     export {}
diff --git a/tests/baselines/reference/jsxNamespaceReexports.types b/tests/baselines/reference/jsxNamespaceReexports.types
index 857915efe39a1..3815da6fbeaad 100644
--- a/tests/baselines/reference/jsxNamespaceReexports.types
+++ b/tests/baselines/reference/jsxNamespaceReexports.types
@@ -21,7 +21,7 @@ import * as MyLib from "./library";
 >MyLib : typeof MyLib
 
 const content = <my-element/>;
->content : error
-><my-element/> : error
+>content : any
+><my-element/> : any
 >my-element : any
 

From f2e5eb5a07ffe8f9413ffda0b737bde32a85b84b Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Tue, 16 Apr 2019 17:00:44 -0700
Subject: [PATCH 5/7] Just accept DOM-lib based break

---
 .../reference/petitDomSimpleJsx.errors.txt    | 586 ++++++++++++++++++
 .../reference/petitDomSimpleJsx.symbols       |   1 -
 .../reference/petitDomSimpleJsx.types         |  40 +-
 3 files changed, 606 insertions(+), 21 deletions(-)
 create mode 100644 tests/baselines/reference/petitDomSimpleJsx.errors.txt

diff --git a/tests/baselines/reference/petitDomSimpleJsx.errors.txt b/tests/baselines/reference/petitDomSimpleJsx.errors.txt
new file mode 100644
index 0000000000000..f323d9336f1ac
--- /dev/null
+++ b/tests/baselines/reference/petitDomSimpleJsx.errors.txt
@@ -0,0 +1,586 @@
+tests/cases/compiler/node_modules/petit-dom/index.d.ts(158,15): error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+  Named property '"a"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+tests/cases/compiler/node_modules/petit-dom/index.d.ts(158,15): error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+  Named property '"script"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+tests/cases/compiler/node_modules/petit-dom/index.d.ts(158,15): error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+  Named property '"style"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+tests/cases/compiler/node_modules/petit-dom/index.d.ts(158,15): error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+  Named property '"title"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+tests/cases/compiler/node_modules/petit-dom/index.d.ts(159,17): error TS2304: Cannot find name 'HTMLMainElement'.
+
+
+==== tests/cases/compiler/node_modules/petit-dom/index.d.ts (5 errors) ====
+    // Modified type definitions for Petit-Dom 0.2
+    // Project: https://github.com/yelouafi/petit-dom
+    // Definitions by: James Messinger <https://github.com/JamesMessinger>, modified by @weswigham for testing
+    // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+    // TypeScript Version: 3.4
+    
+    /**
+     * Creates a VNode of the specified HTML Element type and with the
+     * specified properties and contents.
+     *
+     * @param type - The tag name of element to create
+     * @param props - Properties to set on the element
+     * @param ...children - Child nodes
+     * @returns A new VNode object
+     */
+    export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
+        type: T,
+        props?: PetitDom.Props<E> | null,
+        ...children: ReadonlyArray<PetitDom.Content>
+    ): PetitDom.ElementNode<T, E>;
+    
+    /**
+     * Creates a VNode using a PetitDom component object.
+     *
+     * @param type - A PetitDom component object
+     * @param props - Properties to set on the component
+     * @param ...children - Child nodes
+     * @returns A new VNode object
+     */
+    export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+        type: PetitDom.Component<P>,
+        props?: (P & PetitDom.IntrinsicProps) | null,
+        ...children: ReadonlyArray<PetitDom.Content>
+    ): PetitDom.ComponentNode<P>;
+    
+    /**
+     * Creates a VNode using a PetitDom component class.
+     *
+     * @param type - A PetitDom component class
+     * @param props - Properties to set on the component
+     * @param ...children - Child nodes
+     * @returns A new VNode object
+     */
+    export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+        type: PetitDom.ComponentClass<P>,
+        props?: (P & PetitDom.IntrinsicProps) | null,
+        ...children: ReadonlyArray<PetitDom.Content>
+    ): PetitDom.ComponentClassNode<P>;
+    
+    /**
+     * Creates a VNode using a PetitDom function component.
+     *
+     * This function is compatible with both JSX and HyperScript syntax.
+     *
+     * @param type - A PetitDom function component
+     * @param props - Properties to set on the component
+     * @param ...children - Child nodes
+     * @returns A new VNode object
+     */
+    export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
+        type: PetitDom.FunctionComponent<P>,
+        props?: (P & PetitDom.IntrinsicProps) | null,
+        ...children: ReadonlyArray<PetitDom.Content>
+    ): PetitDom.FunctionComponentNode<P>;
+    
+    /**
+     * Creates actual DOM Elements for the given VNode and its children.
+     *
+     * @param vnode - The VNode object to mount
+     * @returns The newly-created DOM element
+     */
+    export function mount(vnode: PetitDom.VNode): Element;
+    
+    /**
+     * Diffs two VNodes and applies the necessary DOM changes
+     *
+     * @param newVNode - The new VNode object, which will be mounted to the DOM element of oldVNode
+     * @param oldVNode - The old VNode object to diff against
+     * @param parent - The parent DOM element. Used internally by PetitDom to recursively patch child nodes
+     * @returns The updated DOM element. This element is also moved from oldVNode to newVNode
+     */
+    export function patch(newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element): Element;
+    
+    /**
+     * Removes the given VNode from the actual DOM
+     *
+     * @param vnode - The VNode object to unmount
+     */
+    export function unmount(vnode: PetitDom.VNode): void;
+    
+    export namespace PetitDom {
+        type Key = string | number;
+        type ComponentProps = object;
+        interface ContentArray extends ReadonlyArray<Content> {}
+        type Content = string | VNode | ContentArray;
+    
+        type DOMElementProps<E extends Element> = {
+            [P in keyof E]?: E[P];
+        };
+    
+        interface IntrinsicProps {
+            content?: Content | ReadonlyArray<Content>;
+            key?: Key;
+        }
+    
+        type Props<E extends Element = Element> = IntrinsicProps & DOMElementProps<E>;
+    
+        type ShouldUpdate<P extends ComponentProps> = (
+            newProps: P,
+            oldProps: P,
+            newContent: ReadonlyArray<VNode>,
+            oldContent: ReadonlyArray<VNode>
+        ) => boolean;
+    
+        interface FunctionComponent<P extends ComponentProps> {
+            (props: P, content: ReadonlyArray<Content>): FunctionComponentNode<P>;
+            shouldUpdate?: ShouldUpdate<P>;
+        }
+    
+        interface ComponentClass<P extends ComponentProps> {
+            new(props: P, content: ReadonlyArray<Content>): Component<P>;
+        }
+    
+        interface Component<P extends ComponentProps> {
+            mount(props: P, content: ReadonlyArray<VNode>): Element;
+            patch(element: Element, newProps: P, oldProps: P, newContent: ReadonlyArray<VNode>, oldContent: ReadonlyArray<VNode>): Element;
+            unmount(element: Element): void;
+        }
+    
+        interface VNode {
+            readonly isSVG: boolean;
+            readonly type: any;
+            readonly key: Key | null;
+            readonly props: any;
+            readonly content: ReadonlyArray<VNode>;
+        }
+    
+        interface ElementNode<T extends keyof DomElements, E extends DomElements[T]> extends VNode {
+            readonly type: T;
+            readonly props: Props<E>;
+        }
+    
+        interface ComponentNode<P extends ComponentProps> extends VNode {
+            readonly type: Component<P>;
+            readonly props: P & IntrinsicProps;
+        }
+    
+        interface ComponentClassNode<P extends ComponentProps> extends VNode {
+            readonly type: ComponentClass<P>;
+            readonly props: P & IntrinsicProps;
+        }
+    
+        interface FunctionComponentNode<P extends ComponentProps> extends VNode {
+            readonly type: FunctionComponent<P>;
+            readonly props: P & IntrinsicProps;
+        }
+    
+        interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
+                  ~~~~~~~~~~~
+!!! error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+!!! error TS2320:   Named property '"a"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+                  ~~~~~~~~~~~
+!!! error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+!!! error TS2320:   Named property '"script"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+                  ~~~~~~~~~~~
+!!! error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+!!! error TS2320:   Named property '"style"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+                  ~~~~~~~~~~~
+!!! error TS2320: Interface 'DomElements' cannot simultaneously extend types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap'.
+!!! error TS2320:   Named property '"title"' of types 'HTMLElementTagNameMap' and 'SVGElementTagNameMap' are not identical.
+            "main": HTMLMainElement;
+                    ~~~~~~~~~~~~~~~
+!!! error TS2304: Cannot find name 'HTMLMainElement'.
+        }
+    }
+    
+    declare global {
+        namespace JSX {
+            // tslint:disable-next-line:no-empty-interface
+            interface Element extends PetitDom.VNode { }
+    
+            // tslint:disable-next-line:no-empty-interface
+            interface ElementClass extends PetitDom.Component<PetitDom.ComponentProps> { }
+    
+            // tslint:disable-next-line:no-empty-interface
+            interface IntrinsicClassAttributes<T> extends PetitDom.Props { }
+    
+            // tslint:disable-next-line:no-empty-interface
+            interface IntrinsicAttributes extends PetitDom.IntrinsicProps { }
+    
+            interface ElementAttributesProperty { props: PetitDom.Props; }
+    
+            interface ElementChildrenAttribute { content: PetitDom.VNode[]; }
+    
+            type IntrinsicElements = {
+                [P in keyof PetitDom.DomElements]:
+                PetitDom.Props<PetitDom.DomElements[P]> &
+                {
+                    content?: PetitDom.Content | ReadonlyArray<PetitDom.Content>;
+                };
+            };
+        }
+    }
+    
+==== tests/cases/compiler/petit-dom-tests.tsx (0 errors) ====
+    /* @jsx h */
+    // tslint:disable:no-empty
+    // tslint:disable:no-null-keyword
+    
+    import { h, mount, patch, PetitDom, unmount } from "petit-dom";
+    
+    function assertEqual<T>(a: T, b: T) { }
+    
+    function eventHandler(event: Event): void { }
+    
+    interface CustomProps {
+        name: string;
+        count: number;
+        onSomeEvent(event: Event): void;
+    }
+    
+    /**
+     * Create an <a> element with text content, using HyperScript syntax and JSX syntax
+     */
+    export function testHtmlElementWithTextContent() {
+        // HyperScript syntax returns an ElementNode<T> object, with typed properties
+        const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
+    
+        assertEqual(aNode.isSVG, false);
+        assertEqual(aNode.type, "a");
+        assertEqual(aNode.key, null);
+        assertEqual(aNode.props.href, "link");
+        assertEqual(aNode.props.onclick, eventHandler);
+        assertEqual(aNode.content.length, 1);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <a href="link" onclick={eventHandler}>click here</a>;
+        const jsxNodeType = jsxNode.type as string;
+        const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLAnchorElement>;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, "a");
+        assertEqual(jsxNode.key, null);
+        assertEqual(jsxNodeProps.href, "link");
+        assertEqual(jsxNodeProps.onclick, eventHandler);
+        assertEqual(jsxNode.content.length, 1);
+    }
+    
+    /**
+     * Create a <form> element with both text content and child elements, using HyperScript syntax and JSX syntax
+     */
+    export function testHtmlElementWithMixedContent() {
+        // HyperScript syntax returns an ElementNode<T> object, with typed properties
+        const formNode = h(
+            "form",
+            { key: 1, method: "POST", onsubmit: eventHandler },
+            "Hello ", h("span", null, "World")
+        );
+    
+        assertEqual(formNode.isSVG, false);
+        assertEqual(formNode.type, "form");
+        assertEqual(formNode.key, 1);
+        assertEqual(formNode.props.method, "POST");
+        assertEqual(formNode.props.onsubmit, eventHandler);
+        assertEqual(formNode.content.length, 2);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <form key={1} method="POST" onsubmit={eventHandler}>Hello <span>World</span></form>;
+        const jsxNodeType = jsxNode.type as string;
+        const jsxNodeProps = jsxNode.props as PetitDom.Props<HTMLFormElement>;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, "form");
+        assertEqual(jsxNode.key, 1);
+        assertEqual(jsxNodeProps.method, "POST");
+        assertEqual(jsxNodeProps.onsubmit, eventHandler);
+        assertEqual(jsxNode.content.length, 2);
+    }
+    
+    /**
+     * Create an <svg> element with a child element, using HyperScript syntax and JSX syntax
+     */
+    export function testSvgElementWithChild() {
+        // HyperScript syntax returns an ElementNode<T> object, with typed properties
+        const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
+    
+        assertEqual(svgNode.isSVG, true);
+        assertEqual(svgNode.type, "svg");
+        assertEqual(svgNode.key, 2);
+        assertEqual(svgNode.props.currentScale, 1);
+        assertEqual(svgNode.content.length, 1);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <svg key={2} currentScale={1}><path /></svg>;
+        const jsxNodeType = jsxNode.type as string;
+        const jsxNodeProps = jsxNode.props as PetitDom.Props<SVGSVGElement>;
+    
+        assertEqual(jsxNode.isSVG, true);
+        assertEqual(jsxNodeType, "svg");
+        assertEqual(jsxNode.key, 2);
+        assertEqual(jsxNodeProps.currentScale, 1);
+        assertEqual(jsxNode.content.length, 1);
+    }
+    
+    /**
+     * Create a function component, using HyperScript syntax and JSX syntax
+     */
+    export function testFunctionComponent() {
+        function FunctionComponent(): JSX.Element {
+            return <div>Hello World</div>;
+        }
+    
+        // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+        const node = h(FunctionComponent, { key: "1" });
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, FunctionComponent);
+        assertEqual(node.key, "1");
+        assertEqual(node.props.key, "1");
+        assertEqual(node.content.length, 0);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <FunctionComponent key="1" />;
+        const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<{}>;
+        const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, FunctionComponent);
+        assertEqual(jsxNode.key, "1");
+        assertEqual(jsxNodeProps.key, "1");
+        assertEqual(jsxNode.content.length, 0);
+    }
+    
+    /**
+     * Create a function component with props, using HyperScript syntax and JSX syntax
+     */
+    export function testFunctionComponentWithProps() {
+        function FunctionComponentWithProps(props: CustomProps): JSX.Element {
+            const { name, count, onSomeEvent } = props;
+            return <div className={name} tabIndex={count} onclick={onSomeEvent}></div>;
+        }
+    
+        // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+        const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, FunctionComponentWithProps);
+        assertEqual(node.key, null);
+        assertEqual(node.props.name, "xyz");
+        assertEqual(node.props.count, 123);
+        assertEqual(node.props.onSomeEvent, eventHandler);
+        assertEqual(node.content.length, 0);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <FunctionComponentWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+        const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+        const jsxNodeProps = jsxNode.props as CustomProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, FunctionComponentWithProps);
+        assertEqual(jsxNode.key, null);
+        assertEqual(jsxNodeProps.name, "xyz");
+        assertEqual(jsxNodeProps.count, 123);
+        assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+        assertEqual(jsxNode.content.length, 0);
+    }
+    
+    /**
+     * Create a function component with child content, using HyperScript syntax and JSX syntax
+     */
+    export function testFunctionComponentWithChildren() {
+        function FunctionComponentWithChildren(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): JSX.Element {
+            const { name, count, onSomeEvent } = props;
+            return <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>;
+        }
+    
+        // HyperScript syntax returns a FunctionComponentNode<T> object, with typed properties
+        const node = h(
+            FunctionComponentWithChildren,
+            { name: "xyz", count: 123, onSomeEvent: eventHandler },
+            "Hello",
+            h("span", null, "World")
+        );
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, FunctionComponentWithChildren);
+        assertEqual(node.key, null);
+        assertEqual(node.props.name, "xyz");
+        assertEqual(node.props.count, 123);
+        assertEqual(node.props.onSomeEvent, eventHandler);
+        assertEqual(node.content.length, 2);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = (
+            <FunctionComponentWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+                Hello <span>World</span>
+            </FunctionComponentWithChildren>
+        );
+        const jsxNodeType = jsxNode.type as PetitDom.FunctionComponent<CustomProps>;
+        const jsxNodeProps = jsxNode.props as CustomProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, FunctionComponentWithChildren);
+        assertEqual(jsxNode.key, null);
+        assertEqual(jsxNodeProps.name, "xyz");
+        assertEqual(jsxNodeProps.count, 123);
+        assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+        assertEqual(jsxNode.content.length, 2);
+    }
+    
+    /**
+     * Create a component class, using HyperScript syntax and JSX syntax
+     */
+    export function testComponentClass() {
+        class ComponentClass {
+            props = {};
+    
+            mount(): Element {
+                return mount(<div className="some-class"></div>);
+            }
+    
+            patch(element: Element, newProps: object, oldProps: object, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+                patch(
+                    <div {...oldProps}>{oldContent}</div>,
+                    <div {...newProps}>{newContent}</div>
+                );
+                return element;
+            }
+    
+            unmount(element: Element): void {
+                unmount(<div>Hello World</div>);
+            }
+        }
+    
+        // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+        const node = h(ComponentClass, { key: "1" });
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, ComponentClass);
+        assertEqual(node.key, "1");
+        assertEqual(node.props.key, "1");
+        assertEqual(node.content.length, 0);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <ComponentClass key="1" />;
+        const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<{}>;
+        const jsxNodeProps = jsxNode.props as PetitDom.IntrinsicProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, ComponentClass);
+        assertEqual(jsxNode.key, "1");
+        assertEqual(jsxNodeProps.key, "1");
+        assertEqual(jsxNode.content.length, 0);
+    }
+    
+    /**
+     * Create a component class with props, using HyperScript syntax and JSX syntax
+     */
+    export function testComponentClassWithProps() {
+        class ComponentClassWithProps {
+            props: CustomProps;
+    
+            constructor(props: CustomProps) {
+                this.props = props;
+            }
+    
+            mount(props: CustomProps): Element {
+                const { name, count, onSomeEvent } = props;
+                return mount(<div className={name} tabIndex={count} onclick={onSomeEvent} />);
+            }
+    
+            patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+                patch(
+                    <div {...oldProps}>{oldContent}</div>,
+                    <div {...newProps}>{newContent}</div>
+                );
+                return element;
+            }
+    
+            unmount(element: Element): void {
+                unmount(<div> Hello World</div >);
+            }
+        }
+    
+        // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+        const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, ComponentClassWithProps);
+        assertEqual(node.key, null);
+        assertEqual(node.props.name, "xyz");
+        assertEqual(node.props.count, 123);
+        assertEqual(node.props.onSomeEvent, eventHandler);
+        assertEqual(node.content.length, 0);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = <ComponentClassWithProps name="xyz" count={123} onSomeEvent={eventHandler} />;
+        const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+        const jsxNodeProps = jsxNode.props as CustomProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, ComponentClassWithProps);
+        assertEqual(jsxNode.key, null);
+        assertEqual(jsxNodeProps.name, "xyz");
+        assertEqual(jsxNodeProps.count, 123);
+        assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+        assertEqual(jsxNode.content.length, 0);
+    }
+    
+    /**
+     * Create a component class with child content, using HyperScript syntax and JSX syntax
+     */
+    export function testComponentClassWithChildren() {
+        class ComponentClassWithChildren {
+            props: CustomProps;
+    
+            constructor(props: CustomProps) {
+                this.props = props;
+            }
+    
+            mount(props: CustomProps, content: ReadonlyArray<PetitDom.Content>): Element {
+                const { name, count, onSomeEvent } = props;
+                return mount(
+                    <div className={name} tabIndex={count} onclick={onSomeEvent}>{content}</div>
+                );
+            }
+    
+            patch(element: Element, newProps: CustomProps, oldProps: CustomProps, newContent: ReadonlyArray<PetitDom.VNode>, oldContent: ReadonlyArray<PetitDom.VNode>): Element {
+                patch(
+                    <div {...oldProps}>{oldContent}</div>,
+                    <div {...newProps}>{newContent}</div>
+                );
+                return element;
+            }
+    
+            unmount(element: Element): void {
+                unmount(<div> Hello World</div >);
+            }
+        }
+    
+        // HyperScript syntax returns a ComponentClassNode<T> object, with typed properties
+        const node = h(
+            ComponentClassWithChildren,
+            { name: "xyz", count: 123, onSomeEvent: eventHandler },
+            "Hello",
+            h("span", null, "World")
+        );
+    
+        assertEqual(node.isSVG, false);
+        assertEqual(node.type, ComponentClassWithChildren);
+        assertEqual(node.key, null);
+        assertEqual(node.props.name, "xyz");
+        assertEqual(node.props.count, 123);
+        assertEqual(node.props.onSomeEvent, eventHandler);
+        assertEqual(node.content.length, 2);
+    
+        // JSX syntax returns a VNode object, so the "type" and "props" properties are "any"
+        const jsxNode = (
+            <ComponentClassWithChildren name="xyz" count={123} onSomeEvent={eventHandler}>
+                Hello <span>World</span>
+            </ComponentClassWithChildren>
+        );
+        const jsxNodeType = jsxNode.type as PetitDom.ComponentClass<CustomProps>;
+        const jsxNodeProps = jsxNode.props as CustomProps;
+    
+        assertEqual(jsxNode.isSVG, false);
+        assertEqual(jsxNodeType, ComponentClassWithChildren);
+        assertEqual(jsxNode.key, null);
+        assertEqual(jsxNodeProps.name, "xyz");
+        assertEqual(jsxNodeProps.count, 123);
+        assertEqual(jsxNodeProps.onSomeEvent, eventHandler);
+        assertEqual(jsxNode.content.length, 2);
+    }
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/petitDomSimpleJsx.symbols b/tests/baselines/reference/petitDomSimpleJsx.symbols
index 48bf5e5d8893e..a57327029c6fd 100644
--- a/tests/baselines/reference/petitDomSimpleJsx.symbols
+++ b/tests/baselines/reference/petitDomSimpleJsx.symbols
@@ -457,7 +457,6 @@ export namespace PetitDom {
 
         "main": HTMLMainElement;
 >"main" : Symbol(DomElements["main"], Decl(index.d.ts, 157, 79))
->HTMLMainElement : Symbol(HTMLMainElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
     }
 }
 
diff --git a/tests/baselines/reference/petitDomSimpleJsx.types b/tests/baselines/reference/petitDomSimpleJsx.types
index 081daec9e9015..fd1b50a9a4195 100644
--- a/tests/baselines/reference/petitDomSimpleJsx.types
+++ b/tests/baselines/reference/petitDomSimpleJsx.types
@@ -15,7 +15,7 @@
  * @returns A new VNode object
  */
 export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap[T]>(
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 
     type: T,
 >type : T
@@ -41,7 +41,7 @@ export function h<T extends keyof ElementTagNameMap, E extends ElementTagNameMap
  * @returns A new VNode object
  */
 export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >PetitDom : any
 >PetitDom : any
 
@@ -70,7 +70,7 @@ export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
  * @returns A new VNode object
  */
 export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >PetitDom : any
 >PetitDom : any
 
@@ -101,7 +101,7 @@ export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
  * @returns A new VNode object
  */
 export function h<P extends PetitDom.ComponentProps = PetitDom.ComponentProps>(
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >PetitDom : any
 >PetitDom : any
 
@@ -160,7 +160,7 @@ export function unmount(vnode: PetitDom.VNode): void;
 
 export namespace PetitDom {
     type Key = string | number;
->Key : string | number
+>Key : Key
 
     type ComponentProps = object;
 >ComponentProps : object
@@ -289,7 +289,7 @@ export namespace PetitDom {
 
     interface DomElements extends HTMLElementTagNameMap, SVGElementTagNameMap {
         "main": HTMLMainElement;
->"main" : HTMLMainElement
+>"main" : any
     }
 }
 
@@ -348,7 +348,7 @@ declare global {
 // tslint:disable:no-null-keyword
 
 import { h, mount, patch, PetitDom, unmount } from "petit-dom";
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >mount : (vnode: PetitDom.VNode) => Element
 >patch : (newVNode: PetitDom.VNode, oldVNode: PetitDom.VNode, parent?: Element | undefined) => Element
 >PetitDom : any
@@ -385,7 +385,7 @@ export function testHtmlElementWithTextContent() {
     const aNode = h("a", { href: "link", onclick: eventHandler }, "click here");
 >aNode : PetitDom.ElementNode<"a", HTMLAnchorElement>
 >h("a", { href: "link", onclick: eventHandler }, "click here") : PetitDom.ElementNode<"a", HTMLAnchorElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"a" : "a"
 >{ href: "link", onclick: eventHandler } : { href: string; onclick: (event: Event) => void; }
 >href : string
@@ -532,7 +532,7 @@ export function testHtmlElementWithMixedContent() {
     const formNode = h(
 >formNode : PetitDom.ElementNode<"form", HTMLFormElement>
 >h(        "form",        { key: 1, method: "POST", onsubmit: eventHandler },        "Hello ", h("span", null, "World")    ) : PetitDom.ElementNode<"form", HTMLFormElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 
         "form",
 >"form" : "form"
@@ -549,7 +549,7 @@ export function testHtmlElementWithMixedContent() {
         "Hello ", h("span", null, "World")
 >"Hello " : "Hello "
 >h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"span" : "span"
 >null : null
 >"World" : "World"
@@ -699,7 +699,7 @@ export function testSvgElementWithChild() {
     const svgNode = h("svg", { key: 2, currentScale: 1 }, h("path"));
 >svgNode : PetitDom.ElementNode<"svg", SVGSVGElement>
 >h("svg", { key: 2, currentScale: 1 }, h("path")) : PetitDom.ElementNode<"svg", SVGSVGElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"svg" : "svg"
 >{ key: 2, currentScale: 1 } : { key: number; currentScale: number; }
 >key : number
@@ -707,7 +707,7 @@ export function testSvgElementWithChild() {
 >currentScale : number
 >1 : 1
 >h("path") : PetitDom.ElementNode<"path", SVGPathElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"path" : "path"
 
     assertEqual(svgNode.isSVG, true);
@@ -843,7 +843,7 @@ export function testFunctionComponent() {
     const node = h(FunctionComponent, { key: "1" });
 >node : PetitDom.FunctionComponentNode<any>
 >h(FunctionComponent, { key: "1" }) : PetitDom.FunctionComponentNode<any>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >FunctionComponent : () => JSX.Element
 >{ key: "1" } : { key: string; }
 >key : string
@@ -990,7 +990,7 @@ export function testFunctionComponentWithProps() {
     const node = h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
 >node : PetitDom.FunctionComponentNode<CustomProps>
 >h(FunctionComponentWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler }) : PetitDom.FunctionComponentNode<CustomProps>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >FunctionComponentWithProps : (props: CustomProps) => JSX.Element
 >{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
 >name : string
@@ -1183,7 +1183,7 @@ export function testFunctionComponentWithChildren() {
     const node = h(
 >node : PetitDom.FunctionComponentNode<CustomProps>
 >h(        FunctionComponentWithChildren,        { name: "xyz", count: 123, onSomeEvent: eventHandler },        "Hello",        h("span", null, "World")    ) : PetitDom.FunctionComponentNode<CustomProps>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 
         FunctionComponentWithChildren,
 >FunctionComponentWithChildren : (props: CustomProps, content: readonly PetitDom.Content[]) => JSX.Element
@@ -1202,7 +1202,7 @@ export function testFunctionComponentWithChildren() {
 
         h("span", null, "World")
 >h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"span" : "span"
 >null : null
 >"World" : "World"
@@ -1443,7 +1443,7 @@ export function testComponentClass() {
     const node = h(ComponentClass, { key: "1" });
 >node : PetitDom.ComponentClassNode<object>
 >h(ComponentClass, { key: "1" }) : PetitDom.ComponentClassNode<object>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >ComponentClass : typeof ComponentClass
 >{ key: "1" } : { key: string; }
 >key : string
@@ -1653,7 +1653,7 @@ export function testComponentClassWithProps() {
     const node = h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler });
 >node : PetitDom.ComponentClassNode<CustomProps>
 >h(ComponentClassWithProps, { name: "xyz", count: 123, onSomeEvent: eventHandler }) : PetitDom.ComponentClassNode<CustomProps>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >ComponentClassWithProps : typeof ComponentClassWithProps
 >{ name: "xyz", count: 123, onSomeEvent: eventHandler } : { name: string; count: number; onSomeEvent: (event: Event) => void; }
 >name : string
@@ -1914,7 +1914,7 @@ export function testComponentClassWithChildren() {
     const node = h(
 >node : PetitDom.ComponentClassNode<CustomProps>
 >h(        ComponentClassWithChildren,        { name: "xyz", count: 123, onSomeEvent: eventHandler },        "Hello",        h("span", null, "World")    ) : PetitDom.ComponentClassNode<CustomProps>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 
         ComponentClassWithChildren,
 >ComponentClassWithChildren : typeof ComponentClassWithChildren
@@ -1933,7 +1933,7 @@ export function testComponentClassWithChildren() {
 
         h("span", null, "World")
 >h("span", null, "World") : PetitDom.ElementNode<"span", HTMLSpanElement>
->h : { <T extends "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
+>h : { <T extends "symbol" | "object" | "a" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "script" | "stop" | "style" | "svg" | "switch" | "text" | "textPath" | "title" | "tspan" | "use" | "view" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr", E extends ElementTagNameMap[T]>(type: T, props?: PetitDom.Props<E> | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ElementNode<T, E>; <P extends object = object>(type: PetitDom.Component<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentNode<P>; <P extends object = object>(type: PetitDom.ComponentClass<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.ComponentClassNode<P>; <P extends object = object>(type: PetitDom.FunctionComponent<P>, props?: (P & PetitDom.IntrinsicProps) | null | undefined, ...children: readonly PetitDom.Content[]): PetitDom.FunctionComponentNode<P>; }
 >"span" : "span"
 >null : null
 >"World" : "World"

From 4be0cfcc738d258f039b25497548d99307416a52 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Tue, 10 Sep 2019 15:18:36 -0700
Subject: [PATCH 6/7] Fixup with latest rebase

---
 src/compiler/checker.ts                                    | 7 ++++---
 .../user/TypeScript-Node-Starter/TypeScript-Node-Starter   | 2 +-
 .../user/TypeScript-React-Starter/TypeScript-React-Starter | 2 +-
 tests/cases/user/axios-src/axios-src                       | 2 +-
 tests/cases/user/create-react-app/create-react-app         | 2 +-
 tests/cases/user/prettier/prettier                         | 2 +-
 tests/cases/user/puppeteer/puppeteer                       | 2 +-
 tests/cases/user/webpack/webpack                           | 2 +-
 8 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 96439c9568561..6644a75ec6884 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -2465,7 +2465,7 @@ namespace ts {
             let symbol: Symbol | undefined;
             if (name.kind === SyntaxKind.Identifier) {
                 const message = meaning === namespaceMeaning ? Diagnostics.Cannot_find_namespace_0 : getCannotFindNameDiagnosticForName(getFirstIdentifier(name));
-                const symbolFromJSPrototype = isInJSFile(name) ? resolveEntityNameFromAssignmentDeclaration(name, meaning) : undefined;
+                const symbolFromJSPrototype = isInJSFile(name) && !nodeIsSynthesized(name) ? resolveEntityNameFromAssignmentDeclaration(name, meaning) : undefined;
                 symbol = resolveName(location || name, name.escapedText, meaning, ignoreErrors || symbolFromJSPrototype ? undefined : message, name, /*isUse*/ true);
                 if (!symbol) {
                     return symbolFromJSPrototype;
@@ -16268,7 +16268,8 @@ namespace ts {
                 case "AsyncIterator":
                     return Diagnostics.Cannot_find_name_0_Do_you_need_to_change_your_target_library_Try_changing_the_lib_compiler_option_to_es2015_or_later;
                 default:
-                    if (node.parent.kind === SyntaxKind.ShorthandPropertyAssignment) {
+                    // Check for `parent` to handle synthetic nodes (like this jsx namespace from the jsxFactory compiler option)
+                    if (node.parent && node.parent.kind === SyntaxKind.ShorthandPropertyAssignment) {
                         return Diagnostics.No_value_exists_in_scope_for_the_shorthand_property_0_Either_declare_one_or_provide_an_initializer;
                     }
                     else {
@@ -20466,7 +20467,7 @@ namespace ts {
                             ? createSyntheticExpression(node, reactSym.exports ? getTypeOfSymbol(getSymbol(getExportsOfSymbol(reactSym), "Fragment" as __String, SymbolFlags.Value) || unknownSymbol) : emptyObjectType)
                             : isJsxIntrinsicIdentifier(node.tagName) ? createSyntheticExpression(node.tagName, getLiteralType(idText((node.tagName as Identifier)))) : node.tagName,
                         isJsxOpeningFragment(node) ? createSyntheticExpression(node, nullType) : createSyntheticExpression(node.attributes, checkMode => checkExpression(node.attributes, checkMode)),
-                        ...mapDefined(children, c => isJsxText(c) && c.containsOnlyWhiteSpaces ? undefined : createSyntheticExpression(c, isJsxText(c) ? stringType : (checkMode => checkExpression(c, checkMode))))
+                        ...mapDefined(children, c => isJsxText(c) && c.containsOnlyTriviaWhiteSpaces ? undefined : createSyntheticExpression(c, isJsxText(c) ? stringType : (checkMode => checkExpression(c, checkMode))))
                     ]);
                     links.jsxFactoryCall.pos = node.pos;
                     links.jsxFactoryCall.end = node.end;
diff --git a/tests/cases/user/TypeScript-Node-Starter/TypeScript-Node-Starter b/tests/cases/user/TypeScript-Node-Starter/TypeScript-Node-Starter
index ca14e7ccbca8a..1bf5836cae524 160000
--- a/tests/cases/user/TypeScript-Node-Starter/TypeScript-Node-Starter
+++ b/tests/cases/user/TypeScript-Node-Starter/TypeScript-Node-Starter
@@ -1 +1 @@
-Subproject commit ca14e7ccbca8a821d3b860ebb6f3c81c68ccbd06
+Subproject commit 1bf5836cae5246b89bbf7063c3e84e110222fcdf
diff --git a/tests/cases/user/TypeScript-React-Starter/TypeScript-React-Starter b/tests/cases/user/TypeScript-React-Starter/TypeScript-React-Starter
index 19c71f2c6a2b8..bfc20b2f17c02 160000
--- a/tests/cases/user/TypeScript-React-Starter/TypeScript-React-Starter
+++ b/tests/cases/user/TypeScript-React-Starter/TypeScript-React-Starter
@@ -1 +1 @@
-Subproject commit 19c71f2c6a2b874b1b2bb28a8526b19185b8eece
+Subproject commit bfc20b2f17c0206105e2cdd42cd35d79dd03a884
diff --git a/tests/cases/user/axios-src/axios-src b/tests/cases/user/axios-src/axios-src
index 6a4a85c57fcab..2ee3b482456cd 160000
--- a/tests/cases/user/axios-src/axios-src
+++ b/tests/cases/user/axios-src/axios-src
@@ -1 +1 @@
-Subproject commit 6a4a85c57fcaba912eee61b87ba34d07323bc60c
+Subproject commit 2ee3b482456cd2a09ccbd3a4b0c20f3d0c5a5644
diff --git a/tests/cases/user/create-react-app/create-react-app b/tests/cases/user/create-react-app/create-react-app
index c9b95047b979b..437b83f0337a5 160000
--- a/tests/cases/user/create-react-app/create-react-app
+++ b/tests/cases/user/create-react-app/create-react-app
@@ -1 +1 @@
-Subproject commit c9b95047b979bebe89ee70590b2a32ab67ef68af
+Subproject commit 437b83f0337a5d57ce7dd976d2c3b44cb2037e45
diff --git a/tests/cases/user/prettier/prettier b/tests/cases/user/prettier/prettier
index 9f5bd298db26f..2314640485001 160000
--- a/tests/cases/user/prettier/prettier
+++ b/tests/cases/user/prettier/prettier
@@ -1 +1 @@
-Subproject commit 9f5bd298db26f76e95ad17f8406edd7ebefacc5a
+Subproject commit 23146404850011972f695fb6bc2b8113c3cffbfc
diff --git a/tests/cases/user/puppeteer/puppeteer b/tests/cases/user/puppeteer/puppeteer
index c2651c2b5cc88..b6b29502eb6a7 160000
--- a/tests/cases/user/puppeteer/puppeteer
+++ b/tests/cases/user/puppeteer/puppeteer
@@ -1 +1 @@
-Subproject commit c2651c2b5cc888ebd0ca6be87063d9f98b9eb59c
+Subproject commit b6b29502eb6a75fe3869806f0e7b27195fe51b0d
diff --git a/tests/cases/user/webpack/webpack b/tests/cases/user/webpack/webpack
index 77cd3d0cff39d..743ae6da9a6fc 160000
--- a/tests/cases/user/webpack/webpack
+++ b/tests/cases/user/webpack/webpack
@@ -1 +1 @@
-Subproject commit 77cd3d0cff39def2f8bd6355dcd270dd80bc5da2
+Subproject commit 743ae6da9a6fc3b459a7ab3bb250fb07d14f9c5d

From d99dedee15f40744c45fc48407c06539614eb477 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wewigham@microsoft.com>
Date: Tue, 10 Sep 2019 17:17:16 -0700
Subject: [PATCH 7/7] Small fix and example using react

---
 src/compiler/checker.ts                       |   3 +
 .../jsxTabTabGroupStrongChildren.errors.txt   | 204 ++++++++++++++++++
 .../reference/jsxTabTabGroupStrongChildren.js | 147 +++++++++++++
 .../jsxTabTabGroupStrongChildren.symbols      | 200 +++++++++++++++++
 .../jsxTabTabGroupStrongChildren.types        | 199 +++++++++++++++++
 .../compiler/jsxTabTabGroupStrongChildren.tsx |  76 +++++++
 tests/lib/react16.d.ts                        |   8 +-
 7 files changed, 835 insertions(+), 2 deletions(-)
 create mode 100644 tests/baselines/reference/jsxTabTabGroupStrongChildren.errors.txt
 create mode 100644 tests/baselines/reference/jsxTabTabGroupStrongChildren.js
 create mode 100644 tests/baselines/reference/jsxTabTabGroupStrongChildren.symbols
 create mode 100644 tests/baselines/reference/jsxTabTabGroupStrongChildren.types
 create mode 100644 tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 6644a75ec6884..b72f5eae1559b 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -907,6 +907,9 @@ namespace ts {
                 else if (compilerOptions.reactNamespace) {
                     _jsxNamespace = escapeLeadingUnderscores(compilerOptions.reactNamespace);
                 }
+                if (!_jsxFactoryEntity) {
+                    _jsxFactoryEntity = createQualifiedName(createIdentifier(unescapeLeadingUnderscores(_jsxNamespace)), "createElement");
+                }
             }
             return _jsxNamespace;
 
diff --git a/tests/baselines/reference/jsxTabTabGroupStrongChildren.errors.txt b/tests/baselines/reference/jsxTabTabGroupStrongChildren.errors.txt
new file mode 100644
index 0000000000000..c24cbdd338f12
--- /dev/null
+++ b/tests/baselines/reference/jsxTabTabGroupStrongChildren.errors.txt
@@ -0,0 +1,204 @@
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(36,21): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(props: Readonly<TabGroupProps>): TabGroup', gave the following error.
+    Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'Readonly<TabGroupProps>'.
+      Types of property 'children' are incompatible.
+        Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+          Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+            Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+              Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+                Types of property 'type' are incompatible.
+                  Type '"object" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview"' is not assignable to type 'ComponentClass<TabProps, any>'.
+                    Type '"object"' is not assignable to type 'ComponentClass<TabProps, any>'.
+  Overload 2 of 2, '(props: TabGroupProps, context?: any): TabGroup', gave the following error.
+    Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'Readonly<TabGroupProps>'.
+      Types of property 'children' are incompatible.
+        Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+          Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(36,29): error TS2769: No overload matches this call.
+  The last overload gave the following error.
+    Argument of type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to parameter of type 'Attributes & TabGroupProps'.
+      Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'TabGroupProps'.
+        Types of property 'children' are incompatible.
+          Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+            Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(41,28): error TS2769: No overload matches this call.
+  The last overload gave the following error.
+    Argument of type '{ children: ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>; }' is not assignable to parameter of type 'Attributes & TabGroupProps'.
+      Type '{ children: ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>; }' is not assignable to type 'TabGroupProps'.
+        Types of property 'children' are incompatible.
+          Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+            Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(42,5): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(props: Readonly<TabGroupProps>): TabGroup', gave the following error.
+    Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[] | (string & ComponentElement<TabProps, Tab>) | (string & ComponentElement<TabProps, Tab>[]) | (number & ComponentElement<TabProps, Tab>) | (number & ComponentElement<TabProps, Tab>[]) | (false & ComponentElement<TabProps, Tab>) | (false & ComponentElement<TabProps, Tab>[]) | (true & ComponentElement<TabProps, Tab>) | (true & ComponentElement<TabProps, Tab>[]) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>[]) | (ReactNodeArray & ComponentElement<TabProps, Tab>) | (ReactNodeArray & ComponentElement<TabProps, Tab>[]) | (ReactPortal & ComponentElement<TabProps, Tab>) | (ReactPortal & ComponentElement<TabProps, Tab>[])'.
+      Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+        Types of property 'ref' are incompatible.
+          Type 'string | ((instance: NotTab | null) => any) | RefObject<NotTab> | undefined' is not assignable to type 'string | ((instance: Tab | null) => any) | RefObject<Tab> | undefined'.
+            Type '(instance: NotTab | null) => any' is not assignable to type 'string | ((instance: Tab | null) => any) | RefObject<Tab> | undefined'.
+              Type '(instance: NotTab | null) => any' is not assignable to type '(instance: Tab | null) => any'.
+                Types of parameters 'instance' and 'instance' are incompatible.
+                  Type 'Tab | null' is not assignable to type 'NotTab | null'.
+                    Type 'Tab' is not assignable to type 'NotTab'.
+                      Types have separate declarations of a private property 'a'.
+  Overload 2 of 2, '(props: TabGroupProps, context?: any): TabGroup', gave the following error.
+    Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[] | (string & ComponentElement<TabProps, Tab>) | (string & ComponentElement<TabProps, Tab>[]) | (number & ComponentElement<TabProps, Tab>) | (number & ComponentElement<TabProps, Tab>[]) | (false & ComponentElement<TabProps, Tab>) | (false & ComponentElement<TabProps, Tab>[]) | (true & ComponentElement<TabProps, Tab>) | (true & ComponentElement<TabProps, Tab>[]) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>[]) | (ReactNodeArray & ComponentElement<TabProps, Tab>) | (ReactNodeArray & ComponentElement<TabProps, Tab>[]) | (ReactPortal & ComponentElement<TabProps, Tab>) | (ReactPortal & ComponentElement<TabProps, Tab>[])'.
+      Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(64,28): error TS2769: No overload matches this call.
+  The last overload gave the following error.
+    Argument of type '{ children: DetailedReactHTMLElement<{}, HTMLElement>; }' is not assignable to parameter of type 'Attributes & FCTabGroupProps'.
+      Type '{ children: DetailedReactHTMLElement<{}, HTMLElement>; }' is not assignable to type 'FCTabGroupProps'.
+        Types of property 'children' are incompatible.
+          Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps> | SFCElement<FCTabProps>[]'.
+            Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps>'.
+              Types of property 'type' are incompatible.
+                Type '"object" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview"' is not assignable to type 'StatelessComponent<FCTabProps>'.
+                  Type '"object"' is not assignable to type 'StatelessComponent<FCTabProps>'.
+tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx(65,5): error TS2322: Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps> | SFCElement<FCTabProps>[] | (SFCElement<FCTabProps> & string) | (SFCElement<FCTabProps> & number) | (SFCElement<FCTabProps> & false) | (SFCElement<FCTabProps> & true) | (SFCElement<FCTabProps> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>) | (SFCElement<FCTabProps> & ReactNodeArray) | (SFCElement<FCTabProps> & ReactPortal) | (SFCElement<FCTabProps>[] & string) | (SFCElement<FCTabProps>[] & number) | (SFCElement<FCTabProps>[] & false) | (SFCElement<FCTabProps>[] & true) | (SFCElement<FCTabProps>[] & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>) | (SFCElement<FCTabProps>[] & ReactNodeArray) | (SFCElement<FCTabProps>[] & ReactPortal)'.
+  Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps>[] & ReactPortal'.
+    Type 'DetailedReactHTMLElement<{}, HTMLElement>' is missing the following properties from type 'SFCElement<FCTabProps>[]': length, pop, push, concat, and 16 more.
+
+
+==== tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx (6 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    import React from "react";
+    
+    export interface TabGroupProps {
+        // Has to be a union of a single type and an array type for ~legacy reasons~
+        // It's just how jsx children are checked, as they predate tuple types
+        children: React.ComponentElement<TabProps, Tab>[] | React.ComponentElement<TabProps, Tab>;
+    }
+    
+    export interface TabProps {}
+    
+    export class Tab extends React.Component<TabProps> {
+        private a!: void; // nominally tag `Tab`
+        render(): JSX.Element {
+            return <div></div>;
+        }
+    }
+    export class NotTab extends React.Component<TabProps> {
+        private a!: void; // nominally tag `NotTab` (which is now distinct from `Tab`)
+        render(): JSX.Element {
+            return <div></div>;
+        }
+    }
+    export class TabGroup extends React.Component<TabGroupProps> {
+        render() {
+            return <div>{this.props.children}</div>
+        }
+    }
+    
+    const elem = <div/>; // sanity check DetailedHtmlElement
+    
+    const output = <TabGroup>
+        <Tab/>
+    </TabGroup>;
+    
+    const shouldFail = <TabGroup>
+                        ~~~~~~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 1 of 2, '(props: Readonly<TabGroupProps>): TabGroup', gave the following error.
+!!! error TS2769:     Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'Readonly<TabGroupProps>'.
+!!! error TS2769:       Types of property 'children' are incompatible.
+!!! error TS2769:         Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+!!! error TS2769:           Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+!!! error TS2769:             Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+!!! error TS2769:               Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+!!! error TS2769:                 Types of property 'type' are incompatible.
+!!! error TS2769:                   Type '"object" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview"' is not assignable to type 'ComponentClass<TabProps, any>'.
+!!! error TS2769:                     Type '"object"' is not assignable to type 'ComponentClass<TabProps, any>'.
+!!! error TS2769:   Overload 2 of 2, '(props: TabGroupProps, context?: any): TabGroup', gave the following error.
+!!! error TS2769:     Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'Readonly<TabGroupProps>'.
+!!! error TS2769:       Types of property 'children' are incompatible.
+!!! error TS2769:         Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+!!! error TS2769:           Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+                                
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   The last overload gave the following error.
+!!! error TS2769:     Argument of type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to parameter of type 'Attributes & TabGroupProps'.
+!!! error TS2769:       Type '{ children: (ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]; }' is not assignable to type 'TabGroupProps'.
+!!! error TS2769:         Types of property 'children' are incompatible.
+!!! error TS2769:           Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+!!! error TS2769:             Type '(ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, Tab> | DetailedReactHTMLElement<{}, HTMLElement>)[]' is not assignable to type 'ComponentElement<TabProps, Tab>[]'.
+!!! related TS2771 /.lib/react16.d.ts:276:18: The last overload is declared here.
+        <Tab/>
+        <div/>
+    </TabGroup>;
+    
+    const alsoFails = <TabGroup>
+                               
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   The last overload gave the following error.
+!!! error TS2769:     Argument of type '{ children: ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>; }' is not assignable to parameter of type 'Attributes & TabGroupProps'.
+!!! error TS2769:       Type '{ children: ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>; }' is not assignable to type 'TabGroupProps'.
+!!! error TS2769:         Types of property 'children' are incompatible.
+!!! error TS2769:           Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[]'.
+!!! error TS2769:             Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+!!! related TS2771 /.lib/react16.d.ts:276:18: The last overload is declared here.
+        <NotTab/>
+        ~~~~~~~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 1 of 2, '(props: Readonly<TabGroupProps>): TabGroup', gave the following error.
+!!! error TS2769:     Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[] | (string & ComponentElement<TabProps, Tab>) | (string & ComponentElement<TabProps, Tab>[]) | (number & ComponentElement<TabProps, Tab>) | (number & ComponentElement<TabProps, Tab>[]) | (false & ComponentElement<TabProps, Tab>) | (false & ComponentElement<TabProps, Tab>[]) | (true & ComponentElement<TabProps, Tab>) | (true & ComponentElement<TabProps, Tab>[]) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>[]) | (ReactNodeArray & ComponentElement<TabProps, Tab>) | (ReactNodeArray & ComponentElement<TabProps, Tab>[]) | (ReactPortal & ComponentElement<TabProps, Tab>) | (ReactPortal & ComponentElement<TabProps, Tab>[])'.
+!!! error TS2769:       Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+!!! error TS2769:         Types of property 'ref' are incompatible.
+!!! error TS2769:           Type 'string | ((instance: NotTab | null) => any) | RefObject<NotTab> | undefined' is not assignable to type 'string | ((instance: Tab | null) => any) | RefObject<Tab> | undefined'.
+!!! error TS2769:             Type '(instance: NotTab | null) => any' is not assignable to type 'string | ((instance: Tab | null) => any) | RefObject<Tab> | undefined'.
+!!! error TS2769:               Type '(instance: NotTab | null) => any' is not assignable to type '(instance: Tab | null) => any'.
+!!! error TS2769:                 Types of parameters 'instance' and 'instance' are incompatible.
+!!! error TS2769:                   Type 'Tab | null' is not assignable to type 'NotTab | null'.
+!!! error TS2769:                     Type 'Tab' is not assignable to type 'NotTab'.
+!!! error TS2769:                       Types have separate declarations of a private property 'a'.
+!!! error TS2769:   Overload 2 of 2, '(props: TabGroupProps, context?: any): TabGroup', gave the following error.
+!!! error TS2769:     Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab> | ComponentElement<TabProps, Tab>[] | (string & ComponentElement<TabProps, Tab>) | (string & ComponentElement<TabProps, Tab>[]) | (number & ComponentElement<TabProps, Tab>) | (number & ComponentElement<TabProps, Tab>[]) | (false & ComponentElement<TabProps, Tab>) | (false & ComponentElement<TabProps, Tab>[]) | (true & ComponentElement<TabProps, Tab>) | (true & ComponentElement<TabProps, Tab>[]) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ComponentElement<TabProps, Tab>[]) | (ReactNodeArray & ComponentElement<TabProps, Tab>) | (ReactNodeArray & ComponentElement<TabProps, Tab>[]) | (ReactPortal & ComponentElement<TabProps, Tab>) | (ReactPortal & ComponentElement<TabProps, Tab>[])'.
+!!! error TS2769:       Type 'ComponentElement<Readonly<{ children?: ReactNode; }> & Readonly<TabProps>, NotTab>' is not assignable to type 'ComponentElement<TabProps, Tab>'.
+!!! related TS6500 /.lib/react16.d.ts:379:40: The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TabGroup> & Readonly<{ children?: ReactNode; }> & Readonly<TabGroupProps>'
+!!! related TS6500 /.lib/react16.d.ts:379:40: The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TabGroup> & Readonly<{ children?: ReactNode; }> & Readonly<TabGroupProps>'
+    </TabGroup>;
+    
+    
+    // Function component ver:
+    
+    // This uses `SFCElement` and `SFC` - nowadays those are called `FunctionComponentElement` and `FunctionComponent`
+    
+    export interface FCTabGroupProps {
+        children: React.SFCElement<FCTabProps>[] | React.SFCElement<FCTabProps>;
+    }
+    
+    export interface FCTabProps {}
+    
+    const FCTabGroup: React.SFC<FCTabGroupProps> = props => <div>{props.children}</div>;
+    
+    const FCTab = (props: FCTabProps) => <div></div>;
+    
+    const fctab = <FCTabGroup>
+        <FCTab/>
+    </FCTabGroup>;
+    
+    const notATab = <FCTabGroup>
+                               
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   The last overload gave the following error.
+!!! error TS2769:     Argument of type '{ children: DetailedReactHTMLElement<{}, HTMLElement>; }' is not assignable to parameter of type 'Attributes & FCTabGroupProps'.
+!!! error TS2769:       Type '{ children: DetailedReactHTMLElement<{}, HTMLElement>; }' is not assignable to type 'FCTabGroupProps'.
+!!! error TS2769:         Types of property 'children' are incompatible.
+!!! error TS2769:           Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps> | SFCElement<FCTabProps>[]'.
+!!! error TS2769:             Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps>'.
+!!! error TS2769:               Types of property 'type' are incompatible.
+!!! error TS2769:                 Type '"object" | "time" | "link" | "menu" | "dialog" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview"' is not assignable to type 'StatelessComponent<FCTabProps>'.
+!!! error TS2769:                   Type '"object"' is not assignable to type 'StatelessComponent<FCTabProps>'.
+!!! related TS2771 /.lib/react16.d.ts:276:18: The last overload is declared here.
+        <div/>
+        ~~~~~~
+!!! error TS2322: Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps> | SFCElement<FCTabProps>[] | (SFCElement<FCTabProps> & string) | (SFCElement<FCTabProps> & number) | (SFCElement<FCTabProps> & false) | (SFCElement<FCTabProps> & true) | (SFCElement<FCTabProps> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>) | (SFCElement<FCTabProps> & ReactNodeArray) | (SFCElement<FCTabProps> & ReactPortal) | (SFCElement<FCTabProps>[] & string) | (SFCElement<FCTabProps>[] & number) | (SFCElement<FCTabProps>[] & false) | (SFCElement<FCTabProps>[] & true) | (SFCElement<FCTabProps>[] & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>) | (SFCElement<FCTabProps>[] & ReactNodeArray) | (SFCElement<FCTabProps>[] & ReactPortal)'.
+!!! error TS2322:   Type 'DetailedReactHTMLElement<{}, HTMLElement>' is not assignable to type 'SFCElement<FCTabProps>[] & ReactPortal'.
+!!! error TS2322:     Type 'DetailedReactHTMLElement<{}, HTMLElement>' is missing the following properties from type 'SFCElement<FCTabProps>[]': length, pop, push, concat, and 16 more.
+!!! related TS6500 tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx:51:5: The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & FCTabGroupProps & { children?: ReactNode; }'
+    </FCTabGroup>;
+    
+    const NotFCTab = (props: {}) => <div></div>;
+    
+    // No way to error on this, is (structurally) indistinguishable from the above
+    const alsoNotATab = <FCTabGroup>
+        <NotFCTab/>
+    </FCTabGroup>;
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxTabTabGroupStrongChildren.js b/tests/baselines/reference/jsxTabTabGroupStrongChildren.js
new file mode 100644
index 0000000000000..521e4dfc54341
--- /dev/null
+++ b/tests/baselines/reference/jsxTabTabGroupStrongChildren.js
@@ -0,0 +1,147 @@
+//// [jsxTabTabGroupStrongChildren.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import React from "react";
+
+export interface TabGroupProps {
+    // Has to be a union of a single type and an array type for ~legacy reasons~
+    // It's just how jsx children are checked, as they predate tuple types
+    children: React.ComponentElement<TabProps, Tab>[] | React.ComponentElement<TabProps, Tab>;
+}
+
+export interface TabProps {}
+
+export class Tab extends React.Component<TabProps> {
+    private a!: void; // nominally tag `Tab`
+    render(): JSX.Element {
+        return <div></div>;
+    }
+}
+export class NotTab extends React.Component<TabProps> {
+    private a!: void; // nominally tag `NotTab` (which is now distinct from `Tab`)
+    render(): JSX.Element {
+        return <div></div>;
+    }
+}
+export class TabGroup extends React.Component<TabGroupProps> {
+    render() {
+        return <div>{this.props.children}</div>
+    }
+}
+
+const elem = <div/>; // sanity check DetailedHtmlElement
+
+const output = <TabGroup>
+    <Tab/>
+</TabGroup>;
+
+const shouldFail = <TabGroup>
+    <Tab/>
+    <div/>
+</TabGroup>;
+
+const alsoFails = <TabGroup>
+    <NotTab/>
+</TabGroup>;
+
+
+// Function component ver:
+
+// This uses `SFCElement` and `SFC` - nowadays those are called `FunctionComponentElement` and `FunctionComponent`
+
+export interface FCTabGroupProps {
+    children: React.SFCElement<FCTabProps>[] | React.SFCElement<FCTabProps>;
+}
+
+export interface FCTabProps {}
+
+const FCTabGroup: React.SFC<FCTabGroupProps> = props => <div>{props.children}</div>;
+
+const FCTab = (props: FCTabProps) => <div></div>;
+
+const fctab = <FCTabGroup>
+    <FCTab/>
+</FCTabGroup>;
+
+const notATab = <FCTabGroup>
+    <div/>
+</FCTabGroup>;
+
+const NotFCTab = (props: {}) => <div></div>;
+
+// No way to error on this, is (structurally) indistinguishable from the above
+const alsoNotATab = <FCTabGroup>
+    <NotFCTab/>
+</FCTabGroup>;
+
+//// [jsxTabTabGroupStrongChildren.js]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var react_1 = __importDefault(require("react"));
+var Tab = /** @class */ (function (_super) {
+    __extends(Tab, _super);
+    function Tab() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Tab.prototype.render = function () {
+        return react_1["default"].createElement("div", null);
+    };
+    return Tab;
+}(react_1["default"].Component));
+exports.Tab = Tab;
+var NotTab = /** @class */ (function (_super) {
+    __extends(NotTab, _super);
+    function NotTab() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    NotTab.prototype.render = function () {
+        return react_1["default"].createElement("div", null);
+    };
+    return NotTab;
+}(react_1["default"].Component));
+exports.NotTab = NotTab;
+var TabGroup = /** @class */ (function (_super) {
+    __extends(TabGroup, _super);
+    function TabGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TabGroup.prototype.render = function () {
+        return react_1["default"].createElement("div", null, this.props.children);
+    };
+    return TabGroup;
+}(react_1["default"].Component));
+exports.TabGroup = TabGroup;
+var elem = react_1["default"].createElement("div", null); // sanity check DetailedHtmlElement
+var output = react_1["default"].createElement(TabGroup, null,
+    react_1["default"].createElement(Tab, null));
+var shouldFail = react_1["default"].createElement(TabGroup, null,
+    react_1["default"].createElement(Tab, null),
+    react_1["default"].createElement("div", null));
+var alsoFails = react_1["default"].createElement(TabGroup, null,
+    react_1["default"].createElement(NotTab, null));
+var FCTabGroup = function (props) { return react_1["default"].createElement("div", null, props.children); };
+var FCTab = function (props) { return react_1["default"].createElement("div", null); };
+var fctab = react_1["default"].createElement(FCTabGroup, null,
+    react_1["default"].createElement(FCTab, null));
+var notATab = react_1["default"].createElement(FCTabGroup, null,
+    react_1["default"].createElement("div", null));
+var NotFCTab = function (props) { return react_1["default"].createElement("div", null); };
+// No way to error on this, is (structurally) indistinguishable from the above
+var alsoNotATab = react_1["default"].createElement(FCTabGroup, null,
+    react_1["default"].createElement(NotFCTab, null));
diff --git a/tests/baselines/reference/jsxTabTabGroupStrongChildren.symbols b/tests/baselines/reference/jsxTabTabGroupStrongChildren.symbols
new file mode 100644
index 0000000000000..1e455ebb36f84
--- /dev/null
+++ b/tests/baselines/reference/jsxTabTabGroupStrongChildren.symbols
@@ -0,0 +1,200 @@
+=== tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx ===
+/// <reference path="react16.d.ts" />
+import React from "react";
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+
+export interface TabGroupProps {
+>TabGroupProps : Symbol(TabGroupProps, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 26))
+
+    // Has to be a union of a single type and an array type for ~legacy reasons~
+    // It's just how jsx children are checked, as they predate tuple types
+    children: React.ComponentElement<TabProps, Tab>[] | React.ComponentElement<TabProps, Tab>;
+>children : Symbol(TabGroupProps.children, Decl(jsxTabTabGroupStrongChildren.tsx, 3, 32))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>ComponentElement : Symbol(React.ComponentElement, Decl(react16.d.ts, 151, 90))
+>TabProps : Symbol(TabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 7, 1))
+>Tab : Symbol(Tab, Decl(jsxTabTabGroupStrongChildren.tsx, 9, 28))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>ComponentElement : Symbol(React.ComponentElement, Decl(react16.d.ts, 151, 90))
+>TabProps : Symbol(TabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 7, 1))
+>Tab : Symbol(Tab, Decl(jsxTabTabGroupStrongChildren.tsx, 9, 28))
+}
+
+export interface TabProps {}
+>TabProps : Symbol(TabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 7, 1))
+
+export class Tab extends React.Component<TabProps> {
+>Tab : Symbol(Tab, Decl(jsxTabTabGroupStrongChildren.tsx, 9, 28))
+>React.Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>TabProps : Symbol(TabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 7, 1))
+
+    private a!: void; // nominally tag `Tab`
+>a : Symbol(Tab.a, Decl(jsxTabTabGroupStrongChildren.tsx, 11, 52))
+
+    render(): JSX.Element {
+>render : Symbol(Tab.render, Decl(jsxTabTabGroupStrongChildren.tsx, 12, 21))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2371, 12))
+>Element : Symbol(JSX.Element, Decl(react16.d.ts, 2372, 23))
+
+        return <div></div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+    }
+}
+export class NotTab extends React.Component<TabProps> {
+>NotTab : Symbol(NotTab, Decl(jsxTabTabGroupStrongChildren.tsx, 16, 1))
+>React.Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>TabProps : Symbol(TabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 7, 1))
+
+    private a!: void; // nominally tag `NotTab` (which is now distinct from `Tab`)
+>a : Symbol(NotTab.a, Decl(jsxTabTabGroupStrongChildren.tsx, 17, 55))
+
+    render(): JSX.Element {
+>render : Symbol(NotTab.render, Decl(jsxTabTabGroupStrongChildren.tsx, 18, 21))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2371, 12))
+>Element : Symbol(JSX.Element, Decl(react16.d.ts, 2372, 23))
+
+        return <div></div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+    }
+}
+export class TabGroup extends React.Component<TabGroupProps> {
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+>React.Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>Component : Symbol(React.Component, Decl(react16.d.ts, 349, 54), Decl(react16.d.ts, 353, 94))
+>TabGroupProps : Symbol(TabGroupProps, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 26))
+
+    render() {
+>render : Symbol(TabGroup.render, Decl(jsxTabTabGroupStrongChildren.tsx, 23, 62))
+
+        return <div>{this.props.children}</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>this.props.children : Symbol(children, Decl(react16.d.ts, 378, 38), Decl(jsxTabTabGroupStrongChildren.tsx, 3, 32))
+>this.props : Symbol(React.Component.props, Decl(react16.d.ts, 371, 32))
+>this : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+>props : Symbol(React.Component.props, Decl(react16.d.ts, 371, 32))
+>children : Symbol(children, Decl(react16.d.ts, 378, 38), Decl(jsxTabTabGroupStrongChildren.tsx, 3, 32))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+    }
+}
+
+const elem = <div/>; // sanity check DetailedHtmlElement
+>elem : Symbol(elem, Decl(jsxTabTabGroupStrongChildren.tsx, 29, 5))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+const output = <TabGroup>
+>output : Symbol(output, Decl(jsxTabTabGroupStrongChildren.tsx, 31, 5))
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+    <Tab/>
+>Tab : Symbol(Tab, Decl(jsxTabTabGroupStrongChildren.tsx, 9, 28))
+
+</TabGroup>;
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+const shouldFail = <TabGroup>
+>shouldFail : Symbol(shouldFail, Decl(jsxTabTabGroupStrongChildren.tsx, 35, 5))
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+    <Tab/>
+>Tab : Symbol(Tab, Decl(jsxTabTabGroupStrongChildren.tsx, 9, 28))
+
+    <div/>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+</TabGroup>;
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+const alsoFails = <TabGroup>
+>alsoFails : Symbol(alsoFails, Decl(jsxTabTabGroupStrongChildren.tsx, 40, 5))
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+    <NotTab/>
+>NotTab : Symbol(NotTab, Decl(jsxTabTabGroupStrongChildren.tsx, 16, 1))
+
+</TabGroup>;
+>TabGroup : Symbol(TabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 22, 1))
+
+
+// Function component ver:
+
+// This uses `SFCElement` and `SFC` - nowadays those are called `FunctionComponentElement` and `FunctionComponent`
+
+export interface FCTabGroupProps {
+>FCTabGroupProps : Symbol(FCTabGroupProps, Decl(jsxTabTabGroupStrongChildren.tsx, 42, 12))
+
+    children: React.SFCElement<FCTabProps>[] | React.SFCElement<FCTabProps>;
+>children : Symbol(FCTabGroupProps.children, Decl(jsxTabTabGroupStrongChildren.tsx, 49, 34))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>SFCElement : Symbol(React.SFCElement, Decl(react16.d.ts, 145, 9))
+>FCTabProps : Symbol(FCTabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 51, 1))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>SFCElement : Symbol(React.SFCElement, Decl(react16.d.ts, 145, 9))
+>FCTabProps : Symbol(FCTabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 51, 1))
+}
+
+export interface FCTabProps {}
+>FCTabProps : Symbol(FCTabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 51, 1))
+
+const FCTabGroup: React.SFC<FCTabGroupProps> = props => <div>{props.children}</div>;
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+>React : Symbol(React, Decl(jsxTabTabGroupStrongChildren.tsx, 1, 6))
+>SFC : Symbol(React.SFC, Decl(react16.d.ts, 404, 9))
+>FCTabGroupProps : Symbol(FCTabGroupProps, Decl(jsxTabTabGroupStrongChildren.tsx, 42, 12))
+>props : Symbol(props, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 46))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>props.children : Symbol(children, Decl(jsxTabTabGroupStrongChildren.tsx, 49, 34), Decl(react16.d.ts, 412, 25))
+>props : Symbol(props, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 46))
+>children : Symbol(children, Decl(jsxTabTabGroupStrongChildren.tsx, 49, 34), Decl(react16.d.ts, 412, 25))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+const FCTab = (props: FCTabProps) => <div></div>;
+>FCTab : Symbol(FCTab, Decl(jsxTabTabGroupStrongChildren.tsx, 57, 5))
+>props : Symbol(props, Decl(jsxTabTabGroupStrongChildren.tsx, 57, 15))
+>FCTabProps : Symbol(FCTabProps, Decl(jsxTabTabGroupStrongChildren.tsx, 51, 1))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+const fctab = <FCTabGroup>
+>fctab : Symbol(fctab, Decl(jsxTabTabGroupStrongChildren.tsx, 59, 5))
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
+    <FCTab/>
+>FCTab : Symbol(FCTab, Decl(jsxTabTabGroupStrongChildren.tsx, 57, 5))
+
+</FCTabGroup>;
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
+const notATab = <FCTabGroup>
+>notATab : Symbol(notATab, Decl(jsxTabTabGroupStrongChildren.tsx, 63, 5))
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
+    <div/>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+</FCTabGroup>;
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
+const NotFCTab = (props: {}) => <div></div>;
+>NotFCTab : Symbol(NotFCTab, Decl(jsxTabTabGroupStrongChildren.tsx, 67, 5))
+>props : Symbol(props, Decl(jsxTabTabGroupStrongChildren.tsx, 67, 18))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2424, 114))
+
+// No way to error on this, is (structurally) indistinguishable from the above
+const alsoNotATab = <FCTabGroup>
+>alsoNotATab : Symbol(alsoNotATab, Decl(jsxTabTabGroupStrongChildren.tsx, 70, 5))
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
+    <NotFCTab/>
+>NotFCTab : Symbol(NotFCTab, Decl(jsxTabTabGroupStrongChildren.tsx, 67, 5))
+
+</FCTabGroup>;
+>FCTabGroup : Symbol(FCTabGroup, Decl(jsxTabTabGroupStrongChildren.tsx, 55, 5))
+
diff --git a/tests/baselines/reference/jsxTabTabGroupStrongChildren.types b/tests/baselines/reference/jsxTabTabGroupStrongChildren.types
new file mode 100644
index 0000000000000..abe2a97651240
--- /dev/null
+++ b/tests/baselines/reference/jsxTabTabGroupStrongChildren.types
@@ -0,0 +1,199 @@
+=== tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx ===
+/// <reference path="react16.d.ts" />
+import React from "react";
+>React : typeof React
+
+export interface TabGroupProps {
+    // Has to be a union of a single type and an array type for ~legacy reasons~
+    // It's just how jsx children are checked, as they predate tuple types
+    children: React.ComponentElement<TabProps, Tab>[] | React.ComponentElement<TabProps, Tab>;
+>children : React.ComponentElement<TabProps, Tab> | React.ComponentElement<TabProps, Tab>[]
+>React : any
+>React : any
+}
+
+export interface TabProps {}
+
+export class Tab extends React.Component<TabProps> {
+>Tab : Tab
+>React.Component : React.Component<TabProps, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    private a!: void; // nominally tag `Tab`
+>a : void
+
+    render(): JSX.Element {
+>render : () => JSX.Element
+>JSX : any
+
+        return <div></div>;
+><div></div> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+>div : any
+    }
+}
+export class NotTab extends React.Component<TabProps> {
+>NotTab : NotTab
+>React.Component : React.Component<TabProps, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    private a!: void; // nominally tag `NotTab` (which is now distinct from `Tab`)
+>a : void
+
+    render(): JSX.Element {
+>render : () => JSX.Element
+>JSX : any
+
+        return <div></div>;
+><div></div> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+>div : any
+    }
+}
+export class TabGroup extends React.Component<TabGroupProps> {
+>TabGroup : TabGroup
+>React.Component : React.Component<TabGroupProps, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    render() {
+>render : () => React.DetailedReactHTMLElement<{ children: React.ComponentElement<TabProps, Tab> | React.ComponentElement<TabProps, Tab>[] | (string & React.ComponentElement<TabProps, Tab>) | (string & React.ComponentElement<TabProps, Tab>[]) | (number & React.ComponentElement<TabProps, Tab>) | (number & React.ComponentElement<TabProps, Tab>[]) | (false & React.ComponentElement<TabProps, Tab>) | (false & React.ComponentElement<TabProps, Tab>[]) | (true & React.ComponentElement<TabProps, Tab>) | (true & React.ComponentElement<TabProps, Tab>[]) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>[]) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>[]) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>[]); }, HTMLElement>
+
+        return <div>{this.props.children}</div>
+><div>{this.props.children}</div> : React.DetailedReactHTMLElement<{ children: React.ComponentElement<TabProps, Tab> | React.ComponentElement<TabProps, Tab>[] | (string & React.ComponentElement<TabProps, Tab>) | (string & React.ComponentElement<TabProps, Tab>[]) | (number & React.ComponentElement<TabProps, Tab>) | (number & React.ComponentElement<TabProps, Tab>[]) | (false & React.ComponentElement<TabProps, Tab>) | (false & React.ComponentElement<TabProps, Tab>[]) | (true & React.ComponentElement<TabProps, Tab>) | (true & React.ComponentElement<TabProps, Tab>[]) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>[]) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>[]) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>[]); }, HTMLElement>
+>div : any
+>this.props.children : React.ComponentElement<TabProps, Tab> | React.ComponentElement<TabProps, Tab>[] | (string & React.ComponentElement<TabProps, Tab>) | (string & React.ComponentElement<TabProps, Tab>[]) | (number & React.ComponentElement<TabProps, Tab>) | (number & React.ComponentElement<TabProps, Tab>[]) | (false & React.ComponentElement<TabProps, Tab>) | (false & React.ComponentElement<TabProps, Tab>[]) | (true & React.ComponentElement<TabProps, Tab>) | (true & React.ComponentElement<TabProps, Tab>[]) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>[]) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>[]) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>[])
+>this.props : Readonly<{ children?: React.ReactNode; }> & Readonly<TabGroupProps>
+>this : this
+>props : Readonly<{ children?: React.ReactNode; }> & Readonly<TabGroupProps>
+>children : React.ComponentElement<TabProps, Tab> | React.ComponentElement<TabProps, Tab>[] | (string & React.ComponentElement<TabProps, Tab>) | (string & React.ComponentElement<TabProps, Tab>[]) | (number & React.ComponentElement<TabProps, Tab>) | (number & React.ComponentElement<TabProps, Tab>[]) | (false & React.ComponentElement<TabProps, Tab>) | (false & React.ComponentElement<TabProps, Tab>[]) | (true & React.ComponentElement<TabProps, Tab>) | (true & React.ComponentElement<TabProps, Tab>[]) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>) | (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> & React.ComponentElement<TabProps, Tab>[]) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>) | (React.ReactNodeArray & React.ComponentElement<TabProps, Tab>[]) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>) | (React.ReactPortal & React.ComponentElement<TabProps, Tab>[])
+>div : any
+    }
+}
+
+const elem = <div/>; // sanity check DetailedHtmlElement
+>elem : React.DetailedReactHTMLElement<{}, HTMLElement>
+><div/> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+
+const output = <TabGroup>
+>output : React.ComponentElement<Readonly<{ children?: React.ReactNode; }> & Readonly<TabGroupProps>, TabGroup>
+><TabGroup>    <Tab/></TabGroup> : React.ComponentElement<Readonly<{ children?: React.ReactNode; }> & Readonly<TabGroupProps>, TabGroup>
+>TabGroup : typeof TabGroup
+
+    <Tab/>
+><Tab/> : React.ComponentElement<Readonly<{ children?: React.ReactNode; }> & Readonly<TabProps>, Tab>
+>Tab : typeof Tab
+
+</TabGroup>;
+>TabGroup : typeof TabGroup
+
+const shouldFail = <TabGroup>
+>shouldFail : JSX.Element
+><TabGroup>    <Tab/>    <div/></TabGroup> : JSX.Element
+>TabGroup : typeof TabGroup
+
+    <Tab/>
+><Tab/> : React.ComponentElement<Readonly<{ children?: React.ReactNode; }> & Readonly<TabProps>, Tab>
+>Tab : typeof Tab
+
+    <div/>
+><div/> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+
+</TabGroup>;
+>TabGroup : typeof TabGroup
+
+const alsoFails = <TabGroup>
+>alsoFails : JSX.Element
+><TabGroup>    <NotTab/></TabGroup> : JSX.Element
+>TabGroup : typeof TabGroup
+
+    <NotTab/>
+><NotTab/> : React.ComponentElement<Readonly<{ children?: React.ReactNode; }> & Readonly<TabProps>, NotTab>
+>NotTab : typeof NotTab
+
+</TabGroup>;
+>TabGroup : typeof TabGroup
+
+
+// Function component ver:
+
+// This uses `SFCElement` and `SFC` - nowadays those are called `FunctionComponentElement` and `FunctionComponent`
+
+export interface FCTabGroupProps {
+    children: React.SFCElement<FCTabProps>[] | React.SFCElement<FCTabProps>;
+>children : React.SFCElement<FCTabProps> | React.SFCElement<FCTabProps>[]
+>React : any
+>React : any
+}
+
+export interface FCTabProps {}
+
+const FCTabGroup: React.SFC<FCTabGroupProps> = props => <div>{props.children}</div>;
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+>React : any
+>props => <div>{props.children}</div> : (props: FCTabGroupProps & { children?: React.ReactNode; }) => React.DetailedReactHTMLElement<{ children: React.SFCElement<FCTabProps> | React.SFCElement<FCTabProps>[] | (React.SFCElement<FCTabProps> & string) | (React.SFCElement<FCTabProps> & number) | (React.SFCElement<FCTabProps> & false) | (React.SFCElement<FCTabProps> & true) | (React.SFCElement<FCTabProps> & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps> & React.ReactNodeArray) | (React.SFCElement<FCTabProps> & React.ReactPortal) | (React.SFCElement<FCTabProps>[] & string) | (React.SFCElement<FCTabProps>[] & number) | (React.SFCElement<FCTabProps>[] & false) | (React.SFCElement<FCTabProps>[] & true) | (React.SFCElement<FCTabProps>[] & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps>[] & React.ReactNodeArray) | (React.SFCElement<FCTabProps>[] & React.ReactPortal); }, HTMLElement>
+>props : FCTabGroupProps & { children?: React.ReactNode; }
+><div>{props.children}</div> : React.DetailedReactHTMLElement<{ children: React.SFCElement<FCTabProps> | React.SFCElement<FCTabProps>[] | (React.SFCElement<FCTabProps> & string) | (React.SFCElement<FCTabProps> & number) | (React.SFCElement<FCTabProps> & false) | (React.SFCElement<FCTabProps> & true) | (React.SFCElement<FCTabProps> & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps> & React.ReactNodeArray) | (React.SFCElement<FCTabProps> & React.ReactPortal) | (React.SFCElement<FCTabProps>[] & string) | (React.SFCElement<FCTabProps>[] & number) | (React.SFCElement<FCTabProps>[] & false) | (React.SFCElement<FCTabProps>[] & true) | (React.SFCElement<FCTabProps>[] & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps>[] & React.ReactNodeArray) | (React.SFCElement<FCTabProps>[] & React.ReactPortal); }, HTMLElement>
+>div : any
+>props.children : React.SFCElement<FCTabProps> | React.SFCElement<FCTabProps>[] | (React.SFCElement<FCTabProps> & string) | (React.SFCElement<FCTabProps> & number) | (React.SFCElement<FCTabProps> & false) | (React.SFCElement<FCTabProps> & true) | (React.SFCElement<FCTabProps> & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps> & React.ReactNodeArray) | (React.SFCElement<FCTabProps> & React.ReactPortal) | (React.SFCElement<FCTabProps>[] & string) | (React.SFCElement<FCTabProps>[] & number) | (React.SFCElement<FCTabProps>[] & false) | (React.SFCElement<FCTabProps>[] & true) | (React.SFCElement<FCTabProps>[] & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps>[] & React.ReactNodeArray) | (React.SFCElement<FCTabProps>[] & React.ReactPortal)
+>props : FCTabGroupProps & { children?: React.ReactNode; }
+>children : React.SFCElement<FCTabProps> | React.SFCElement<FCTabProps>[] | (React.SFCElement<FCTabProps> & string) | (React.SFCElement<FCTabProps> & number) | (React.SFCElement<FCTabProps> & false) | (React.SFCElement<FCTabProps> & true) | (React.SFCElement<FCTabProps> & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps> & React.ReactNodeArray) | (React.SFCElement<FCTabProps> & React.ReactPortal) | (React.SFCElement<FCTabProps>[] & string) | (React.SFCElement<FCTabProps>[] & number) | (React.SFCElement<FCTabProps>[] & false) | (React.SFCElement<FCTabProps>[] & true) | (React.SFCElement<FCTabProps>[] & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (React.SFCElement<FCTabProps>[] & React.ReactNodeArray) | (React.SFCElement<FCTabProps>[] & React.ReactPortal)
+>div : any
+
+const FCTab = (props: FCTabProps) => <div></div>;
+>FCTab : (props: FCTabProps) => React.DetailedReactHTMLElement<{}, HTMLElement>
+>(props: FCTabProps) => <div></div> : (props: FCTabProps) => React.DetailedReactHTMLElement<{}, HTMLElement>
+>props : FCTabProps
+><div></div> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+>div : any
+
+const fctab = <FCTabGroup>
+>fctab : React.SFCElement<FCTabGroupProps>
+><FCTabGroup>    <FCTab/></FCTabGroup> : React.SFCElement<FCTabGroupProps>
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
+    <FCTab/>
+><FCTab/> : React.SFCElement<{}>
+>FCTab : (props: FCTabProps) => React.DetailedReactHTMLElement<{}, HTMLElement>
+
+</FCTabGroup>;
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
+const notATab = <FCTabGroup>
+>notATab : JSX.Element
+><FCTabGroup>    <div/></FCTabGroup> : JSX.Element
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
+    <div/>
+><div/> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+
+</FCTabGroup>;
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
+const NotFCTab = (props: {}) => <div></div>;
+>NotFCTab : (props: {}) => React.DetailedReactHTMLElement<{}, HTMLElement>
+>(props: {}) => <div></div> : (props: {}) => React.DetailedReactHTMLElement<{}, HTMLElement>
+>props : {}
+><div></div> : React.DetailedReactHTMLElement<{}, HTMLElement>
+>div : any
+>div : any
+
+// No way to error on this, is (structurally) indistinguishable from the above
+const alsoNotATab = <FCTabGroup>
+>alsoNotATab : React.SFCElement<FCTabGroupProps>
+><FCTabGroup>    <NotFCTab/></FCTabGroup> : React.SFCElement<FCTabGroupProps>
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
+    <NotFCTab/>
+><NotFCTab/> : React.SFCElement<{}>
+>NotFCTab : (props: {}) => React.DetailedReactHTMLElement<{}, HTMLElement>
+
+</FCTabGroup>;
+>FCTabGroup : React.StatelessComponent<FCTabGroupProps>
+
diff --git a/tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx b/tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx
new file mode 100644
index 0000000000000..142b6846ecacf
--- /dev/null
+++ b/tests/cases/compiler/jsxTabTabGroupStrongChildren.tsx
@@ -0,0 +1,76 @@
+// @jsx: react
+// @esModuleInterop: true
+// @strict: true
+/// <reference path="/.lib/react16.d.ts" />
+import React from "react";
+
+export interface TabGroupProps {
+    // Has to be a union of a single type and an array type for ~legacy reasons~
+    // It's just how jsx children are checked, as they predate tuple types
+    children: React.ComponentElement<TabProps, Tab>[] | React.ComponentElement<TabProps, Tab>;
+}
+
+export interface TabProps {}
+
+export class Tab extends React.Component<TabProps> {
+    private a!: void; // nominally tag `Tab`
+    render(): JSX.Element {
+        return <div></div>;
+    }
+}
+export class NotTab extends React.Component<TabProps> {
+    private a!: void; // nominally tag `NotTab` (which is now distinct from `Tab`)
+    render(): JSX.Element {
+        return <div></div>;
+    }
+}
+export class TabGroup extends React.Component<TabGroupProps> {
+    render() {
+        return <div>{this.props.children}</div>
+    }
+}
+
+const elem = <div/>; // sanity check DetailedHtmlElement
+
+const output = <TabGroup>
+    <Tab/>
+</TabGroup>;
+
+const shouldFail = <TabGroup>
+    <Tab/>
+    <div/>
+</TabGroup>;
+
+const alsoFails = <TabGroup>
+    <NotTab/>
+</TabGroup>;
+
+
+// Function component ver:
+
+// This uses `SFCElement` and `SFC` - nowadays those are called `FunctionComponentElement` and `FunctionComponent`
+
+export interface FCTabGroupProps {
+    children: React.SFCElement<FCTabProps>[] | React.SFCElement<FCTabProps>;
+}
+
+export interface FCTabProps {}
+
+const FCTabGroup: React.SFC<FCTabGroupProps> = props => <div>{props.children}</div>;
+
+const FCTab = (props: FCTabProps) => <div></div>;
+
+const fctab = <FCTabGroup>
+    <FCTab/>
+</FCTabGroup>;
+
+const notATab = <FCTabGroup>
+    <div/>
+</FCTabGroup>;
+
+const NotFCTab = (props: {}) => <div></div>;
+
+// No way to error on this, is (structurally) indistinguishable from the above
+const alsoNotATab = <FCTabGroup>
+    <NotFCTab/>
+</FCTabGroup>;
\ No newline at end of file
diff --git a/tests/lib/react16.d.ts b/tests/lib/react16.d.ts
index 4b91fb0c6fed9..08acde9e2b0f1 100644
--- a/tests/lib/react16.d.ts
+++ b/tests/lib/react16.d.ts
@@ -135,8 +135,12 @@ declare module "react" {
             ref?: Ref<T>;
         }
 
-        interface ReactElement<P> {
-            type: string | ComponentClass<P> | SFC<P>;
+        type JSXElementConstructor<P> =
+            | ((props: P) => ReactElement | null)
+            | (new (props: P) => Component<P, any>);
+
+        interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
+            type: T;
             props: P;
             key: Key | null;
         }