Lookup JSX namespace within factory function (#22207)

* Lookup JSX namespace within factory function

* Rename functions
This commit is contained in:
Wesley Wigham
2018-02-28 15:48:33 -08:00
committed by GitHub
parent 62185673fd
commit 1a43ad01a7
16 changed files with 1561 additions and 115 deletions
+64 -107
View File
@@ -260,7 +260,7 @@ namespace ts {
node = getParseTreeNode(node, isJsxOpeningLikeElement);
return node ? getAllAttributesTypeFromJsxOpeningLikeElement(node) : undefined;
},
getJsxIntrinsicTagNames,
getJsxIntrinsicTagNamesAt,
isOptionalParameter: node => {
node = getParseTreeNode(node, isParameter);
return node ? isOptionalParameter(node) : false;
@@ -417,9 +417,6 @@ namespace ts {
let deferredGlobalAsyncIteratorType: GenericType;
let deferredGlobalAsyncIterableIteratorType: GenericType;
let deferredGlobalTemplateStringsArrayType: ObjectType;
let deferredJsxElementClassType: Type;
let deferredJsxElementType: Type;
let deferredJsxStatelessElementType: Type;
let deferredNodes: Node[];
let deferredUnusedIdentifierNodes: Node[];
@@ -545,13 +542,6 @@ namespace ts {
let _jsxNamespace: __String;
let _jsxFactoryEntity: EntityName;
let _jsxElementPropertiesName: __String;
let _hasComputedJsxElementPropertiesName = false;
let _jsxElementChildrenPropertyName: __String;
let _hasComputedJsxElementChildrenPropertyName = false;
/** Things we lazy load from the JSX namespace */
const jsxTypes = createUnderscoreEscapedMap<Type>();
const subtypeRelation = createMap<RelationComparisonResult>();
const assignableRelation = createMap<RelationComparisonResult>();
@@ -7524,16 +7514,6 @@ namespace ts {
return symbol && <GenericType>getTypeOfGlobalSymbol(symbol, arity);
}
/**
* Returns a type that is inside a namespace at the global scope, e.g.
* getExportedTypeFromNamespace('JSX', 'Element') returns the JSX.Element type
*/
function getExportedTypeFromNamespace(namespace: __String, name: __String): Type {
const namespaceSymbol = getGlobalSymbol(namespace, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
const typeSymbol = namespaceSymbol && getSymbol(namespaceSymbol.exports, name, SymbolFlags.Type);
return typeSymbol && getDeclaredTypeOfSymbol(typeSymbol);
}
/**
* Instantiates a global type that is generic with some element type, and returns that instantiation.
*/
@@ -14348,7 +14328,7 @@ namespace ts {
function getContextualTypeForChildJsxExpression(node: JsxElement) {
const attributesType = getApparentTypeOfContextualType(node.openingElement.tagName);
// JSX expression is in children of JSX Element, we will look for an "children" atttribute (we get the name from JSX.ElementAttributesProperty)
const jsxChildrenPropertyName = getJsxElementChildrenPropertyName();
const jsxChildrenPropertyName = getJsxElementChildrenPropertyName(getJsxNamespaceAt(node));
return attributesType && !isTypeAny(attributesType) && jsxChildrenPropertyName && jsxChildrenPropertyName !== "" ? getTypeOfPropertyOfContextualType(attributesType, jsxChildrenPropertyName) : undefined;
}
@@ -14502,18 +14482,10 @@ namespace ts {
}
const isJs = isInJavaScriptFile(node);
return mapType(valueType, isJs ? getJsxSignaturesParameterTypesJs : getJsxSignaturesParameterTypes);
return mapType(valueType, t => getJsxSignaturesParameterTypes(t, isJs, node));
}
function getJsxSignaturesParameterTypes(valueType: Type) {
return getJsxSignaturesParameterTypesInternal(valueType, /*isJs*/ false);
}
function getJsxSignaturesParameterTypesJs(valueType: Type) {
return getJsxSignaturesParameterTypesInternal(valueType, /*isJs*/ true);
}
function getJsxSignaturesParameterTypesInternal(valueType: Type, isJs: boolean) {
function getJsxSignaturesParameterTypes(valueType: Type, isJs: boolean, context: Node) {
// If the elemType is a string type, we have to return anyType to prevent an error downstream as we will try to find construct or call signature of the type
if (valueType.flags & TypeFlags.String) {
return anyType;
@@ -14523,7 +14495,7 @@ namespace ts {
// For example:
// var CustomTag: "h1" = "h1";
// <CustomTag> Hello World </CustomTag>
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements);
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements, context);
if (intrinsicElementsType !== unknownType) {
const stringLiteralTypeName = (<StringLiteralType>valueType).value;
const intrinsicProp = getPropertyOfType(intrinsicElementsType, escapeLeadingUnderscores(stringLiteralTypeName));
@@ -14551,24 +14523,24 @@ namespace ts {
}
}
return getUnionType(map(signatures, ctor ? isJs ? getJsxPropsTypeFromConstructSignatureJs : getJsxPropsTypeFromConstructSignature : getJsxPropsTypeFromCallSignature), UnionReduction.None);
return getUnionType(map(signatures, ctor ? t => getJsxPropsTypeFromConstructSignature(t, isJs, context) : t => getJsxPropsTypeFromCallSignature(t, context)), UnionReduction.None);
}
function getJsxPropsTypeFromCallSignature(sig: Signature) {
function getJsxPropsTypeFromCallSignature(sig: Signature, context: Node) {
let propsType = getTypeOfFirstParameterOfSignature(sig);
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes);
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes, context);
if (intrinsicAttribs !== unknownType) {
propsType = intersectTypes(intrinsicAttribs, propsType);
}
return propsType;
}
function getJsxPropsTypeFromClassType(hostClassType: Type, isJs: boolean) {
function getJsxPropsTypeFromClassType(hostClassType: Type, isJs: boolean, context: Node) {
if (isTypeAny(hostClassType)) {
return hostClassType;
}
const propsName = getJsxElementPropertiesName();
const propsName = getJsxElementPropertiesName(getJsxNamespaceAt(context));
if (propsName === undefined) {
// There is no type ElementAttributesProperty, return 'any'
return anyType;
@@ -14591,7 +14563,7 @@ namespace ts {
else {
// Normal case -- add in IntrinsicClassElements<T> and IntrinsicElements
let apparentAttributesType = attributesType;
const intrinsicClassAttribs = getJsxType(JsxNames.IntrinsicClassAttributes);
const intrinsicClassAttribs = getJsxType(JsxNames.IntrinsicClassAttributes, context);
if (intrinsicClassAttribs !== unknownType) {
const typeParams = getLocalTypeParametersOfClassOrInterfaceOrTypeAlias(intrinsicClassAttribs.symbol);
apparentAttributesType = intersectTypes(
@@ -14602,7 +14574,7 @@ namespace ts {
);
}
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes);
const intrinsicAttribs = getJsxType(JsxNames.IntrinsicAttributes, context);
if (intrinsicAttribs !== unknownType) {
apparentAttributesType = intersectTypes(intrinsicAttribs, apparentAttributesType);
}
@@ -14612,20 +14584,12 @@ namespace ts {
}
}
function getJsxPropsTypeFromConstructSignatureJs(sig: Signature) {
return getJsxPropsTypeFromConstructSignatureInternal(sig, /*isJs*/ true);
}
function getJsxPropsTypeFromConstructSignature(sig: Signature) {
return getJsxPropsTypeFromConstructSignatureInternal(sig, /*isJs*/ false);
}
function getJsxPropsTypeFromConstructSignatureInternal(sig: Signature, isJs: boolean) {
function getJsxPropsTypeFromConstructSignature(sig: Signature, isJs: boolean, context: Node) {
const hostClassType = getReturnTypeOfSignature(sig);
if (hostClassType) {
return getJsxPropsTypeFromClassType(hostClassType, isJs);
return getJsxPropsTypeFromClassType(hostClassType, isJs, context);
}
return getJsxPropsTypeFromCallSignature(sig);
return getJsxPropsTypeFromCallSignature(sig, context);
}
@@ -15080,7 +15044,7 @@ namespace ts {
function checkJsxSelfClosingElement(node: JsxSelfClosingElement, checkMode: CheckMode): Type {
checkJsxOpeningLikeElementOrOpeningFragment(node, checkMode);
return getJsxGlobalElementType() || anyType;
return getJsxElementTypeAt(node) || anyType;
}
function checkJsxElement(node: JsxElement, checkMode: CheckMode): Type {
@@ -15095,7 +15059,7 @@ namespace ts {
checkExpression(node.closingElement.tagName);
}
return getJsxGlobalElementType() || anyType;
return getJsxElementTypeAt(node) || anyType;
}
function checkJsxFragment(node: JsxFragment, checkMode: CheckMode): Type {
@@ -15107,7 +15071,7 @@ namespace ts {
: Diagnostics.JSX_fragment_is_not_supported_when_using_an_inline_JSX_factory_pragma);
}
return getJsxGlobalElementType() || anyType;
return getJsxElementTypeAt(node) || anyType;
}
/**
@@ -15156,7 +15120,7 @@ namespace ts {
let hasSpreadAnyType = false;
let typeToIntersect: Type;
let explicitlySpecifyChildrenAttribute = false;
const jsxChildrenPropertyName = getJsxElementChildrenPropertyName();
const jsxChildrenPropertyName = getJsxElementChildrenPropertyName(getJsxNamespaceAt(openingLikeElement));
for (const attributeDecl of attributes.properties) {
const member = attributeDecl.symbol;
@@ -15272,12 +15236,11 @@ namespace ts {
return createJsxAttributesTypeFromAttributesProperty(node.parent, checkMode);
}
function getJsxType(name: __String) {
let jsxType = jsxTypes.get(name);
if (jsxType === undefined) {
jsxTypes.set(name, jsxType = getExportedTypeFromNamespace(JsxNames.JSX, name) || unknownType);
}
return jsxType;
function getJsxType(name: __String, location: Node) {
const namespace = getJsxNamespaceAt(location);
const exports = namespace && getExportsOfSymbol(namespace);
const typeSymbol = exports && getSymbol(exports, name, SymbolFlags.Type);
return typeSymbol ? getDeclaredTypeOfSymbol(typeSymbol) : unknownType;
}
/**
@@ -15289,7 +15252,7 @@ namespace ts {
function getIntrinsicTagSymbol(node: JsxOpeningLikeElement | JsxClosingElement): Symbol {
const links = getNodeLinks(node);
if (!links.resolvedSymbol) {
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements);
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements, node);
if (intrinsicElementsType !== unknownType) {
// Property case
if (!isIdentifier(node.tagName)) throw Debug.fail();
@@ -15361,6 +15324,19 @@ namespace ts {
return getUnionType(map(instantiatedSignatures, getReturnTypeOfSignature), UnionReduction.Subtype);
}
function getJsxNamespaceAt(location: Node) {
const namespaceName = getJsxNamespace(location);
const resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
if (resolvedNamespace) {
const candidate = getSymbol(getExportsOfSymbol(resolveSymbol(resolvedNamespace)), JsxNames.JSX, SymbolFlags.Namespace);
if (candidate) {
return candidate;
}
}
// JSX global fallback
return getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
}
/**
* Look into JSX namespace and then look for container with matching name as nameOfAttribPropContainer.
* Get a single property from that container if existed. Report an error if there are more than one property.
@@ -15368,9 +15344,7 @@ namespace ts {
* @param nameOfAttribPropContainer a string of value JsxNames.ElementAttributesPropertyNameContainer or JsxNames.ElementChildrenAttributeNameContainer
* if other string is given or the container doesn't exist, return undefined.
*/
function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: __String): __String {
// JSX
const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: __String, jsxNamespace: Symbol): __String {
// JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [symbol]
const jsxElementAttribPropInterfaceSym = jsxNamespace && getSymbol(jsxNamespace.exports, nameOfAttribPropContainer, SymbolFlags.Type);
// JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [type]
@@ -15400,22 +15374,12 @@ namespace ts {
/// non-intrinsic elements' attributes type is 'any'),
/// or '' if it has 0 properties (which means every
/// non-intrinsic elements' attributes type is the element instance type)
function getJsxElementPropertiesName() {
if (!_hasComputedJsxElementPropertiesName) {
_hasComputedJsxElementPropertiesName = true;
_jsxElementPropertiesName = getNameFromJsxElementAttributesContainer(JsxNames.ElementAttributesPropertyNameContainer);
}
return _jsxElementPropertiesName;
function getJsxElementPropertiesName(jsxNamespace: Symbol) {
return getNameFromJsxElementAttributesContainer(JsxNames.ElementAttributesPropertyNameContainer, jsxNamespace);
}
function getJsxElementChildrenPropertyName(): __String {
if (!_hasComputedJsxElementChildrenPropertyName) {
_hasComputedJsxElementChildrenPropertyName = true;
_jsxElementChildrenPropertyName = getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer);
}
return _jsxElementChildrenPropertyName;
function getJsxElementChildrenPropertyName(jsxNamespace: Symbol): __String {
return getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer, jsxNamespace);
}
function getApparentTypeOfJsxPropsType(propsType: Type): Type {
@@ -15445,7 +15409,7 @@ namespace ts {
function defaultTryGetJsxStatelessFunctionAttributesType(openingLikeElement: JsxOpeningLikeElement, elementType: Type, elemInstanceType: Type, elementClassType?: Type): Type {
Debug.assert(!(elementType.flags & TypeFlags.Union));
if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) {
const jsxStatelessElementType = getJsxGlobalStatelessElementType();
const jsxStatelessElementType = getJsxStatelessElementTypeAt(openingLikeElement);
if (jsxStatelessElementType) {
// We don't call getResolvedSignature here because we have already resolve the type of JSX Element.
const callSignature = getResolvedJsxStatelessFunctionSignature(openingLikeElement, elementType, /*candidatesOutArray*/ undefined);
@@ -15455,7 +15419,7 @@ namespace ts {
paramType = getApparentTypeOfJsxPropsType(paramType);
if (callReturnType && isTypeAssignableTo(callReturnType, jsxStatelessElementType)) {
// Intersect in JSX.IntrinsicAttributes if it exists
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes);
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes, openingLikeElement);
if (intrinsicAttributes !== unknownType) {
paramType = intersectTypes(intrinsicAttributes, paramType);
}
@@ -15481,7 +15445,7 @@ namespace ts {
Debug.assert(!(elementType.flags & TypeFlags.Union));
if (!elementClassType || !isTypeAssignableTo(elemInstanceType, elementClassType)) {
// Is this is a stateless function component? See if its single signature's return type is assignable to the JSX Element Type
const jsxStatelessElementType = getJsxGlobalStatelessElementType();
const jsxStatelessElementType = getJsxStatelessElementTypeAt(openingLikeElement);
if (jsxStatelessElementType) {
// We don't call getResolvedSignature because here we have already resolve the type of JSX Element.
const candidatesOutArray: Signature[] = [];
@@ -15514,7 +15478,7 @@ namespace ts {
result = allMatchingAttributesType;
}
// Intersect in JSX.IntrinsicAttributes if it exists
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes);
const intrinsicAttributes = getJsxType(JsxNames.IntrinsicAttributes, openingLikeElement);
if (intrinsicAttributes !== unknownType) {
result = intersectTypes(intrinsicAttributes, result);
}
@@ -15563,7 +15527,7 @@ namespace ts {
// For example:
// var CustomTag: "h1" = "h1";
// <CustomTag> Hello World </CustomTag>
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements);
const intrinsicElementsType = getJsxType(JsxNames.IntrinsicElements, openingLikeElement);
if (intrinsicElementsType !== unknownType) {
const stringLiteralTypeName = (<StringLiteralType>elementType).value;
const intrinsicProp = getPropertyOfType(intrinsicElementsType, escapeLeadingUnderscores(stringLiteralTypeName));
@@ -15598,7 +15562,7 @@ namespace ts {
checkTypeRelatedTo(elemInstanceType, elementClassType, assignableRelation, openingLikeElement, Diagnostics.JSX_element_type_0_is_not_a_constructor_function_for_JSX_elements);
}
return getJsxPropsTypeFromClassType(elemInstanceType, isInJavaScriptFile(openingLikeElement));
return getJsxPropsTypeFromClassType(elemInstanceType, isInJavaScriptFile(openingLikeElement), openingLikeElement);
}
/**
@@ -15631,7 +15595,7 @@ namespace ts {
* @param shouldIncludeAllStatelessAttributesType a boolean value used by language service to get all possible attributes type from an overload stateless function component
*/
function getCustomJsxElementAttributesType(node: JsxOpeningLikeElement, shouldIncludeAllStatelessAttributesType: boolean): Type {
return resolveCustomJsxElementAttributesType(node, shouldIncludeAllStatelessAttributesType, checkExpression(node.tagName), getJsxGlobalElementClassType());
return resolveCustomJsxElementAttributesType(node, shouldIncludeAllStatelessAttributesType, checkExpression(node.tagName), getJsxElementClassTypeAt(node));
}
/**
@@ -15675,35 +15639,28 @@ namespace ts {
return prop || unknownSymbol;
}
function getJsxGlobalElementClassType(): Type {
if (!deferredJsxElementClassType) {
deferredJsxElementClassType = getExportedTypeFromNamespace(JsxNames.JSX, JsxNames.ElementClass);
}
return deferredJsxElementClassType;
function getJsxElementClassTypeAt(location: Node): Type {
const type = getJsxType(JsxNames.ElementClass, location);
if (type === unknownType) return undefined;
return type;
}
function getJsxGlobalElementType(): Type {
if (!deferredJsxElementType) {
deferredJsxElementType = getExportedTypeFromNamespace(JsxNames.JSX, JsxNames.Element);
}
return deferredJsxElementType;
function getJsxElementTypeAt(location: Node): Type {
return getJsxType(JsxNames.Element, location);
}
function getJsxGlobalStatelessElementType(): Type {
if (!deferredJsxStatelessElementType) {
const jsxElementType = getJsxGlobalElementType();
if (jsxElementType) {
deferredJsxStatelessElementType = getUnionType([jsxElementType, nullType]);
}
function getJsxStatelessElementTypeAt(location: Node): Type {
const jsxElementType = getJsxElementTypeAt(location);
if (jsxElementType) {
return getUnionType([jsxElementType, nullType]);
}
return deferredJsxStatelessElementType;
}
/**
* Returns all the properties of the Jsx.IntrinsicElements interface
*/
function getJsxIntrinsicTagNames(): Symbol[] {
const intrinsics = getJsxType(JsxNames.IntrinsicElements);
function getJsxIntrinsicTagNamesAt(location: Node): Symbol[] {
const intrinsics = getJsxType(JsxNames.IntrinsicElements, location);
return intrinsics ? getPropertiesOfType(intrinsics) : emptyArray;
}
@@ -15713,7 +15670,7 @@ namespace ts {
error(errorNode, Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided);
}
if (getJsxGlobalElementType() === undefined) {
if (getJsxElementTypeAt(errorNode) === undefined) {
if (noImplicitAny) {
error(errorNode, Diagnostics.JSX_element_implicitly_has_type_any_because_the_global_type_JSX_Element_does_not_exist);
}
@@ -15813,7 +15770,7 @@ namespace ts {
// If the targetAttributesType is an emptyObjectType, indicating that there is no property named 'props' on this instance type.
// but there exists a sourceAttributesType, we need to explicitly give an error as normal assignability check allow excess properties and will pass.
if (targetAttributesType === emptyObjectType && (isTypeAny(sourceAttributesType) || getPropertiesOfType(<ResolvedType>sourceAttributesType).length > 0)) {
error(openingLikeElement, Diagnostics.JSX_element_class_does_not_support_attributes_because_it_does_not_have_a_0_property, unescapeLeadingUnderscores(getJsxElementPropertiesName()));
error(openingLikeElement, Diagnostics.JSX_element_class_does_not_support_attributes_because_it_does_not_have_a_0_property, unescapeLeadingUnderscores(getJsxElementPropertiesName(getJsxNamespaceAt(openingLikeElement))));
}
else {
// Check if sourceAttributesType assignable to targetAttributesType though this check will allow excess properties
+1 -1
View File
@@ -2871,7 +2871,7 @@ namespace ts {
/* @internal */ getExportsAndPropertiesOfModule(moduleSymbol: Symbol): Symbol[];
getAllAttributesTypeFromJsxOpeningLikeElement(elementNode: JsxOpeningLikeElement): Type | undefined;
getJsxIntrinsicTagNames(): Symbol[];
getJsxIntrinsicTagNamesAt(location: Node): Symbol[];
isOptionalParameter(node: ParameterDeclaration): boolean;
getAmbientModules(): Symbol[];
+1 -1
View File
@@ -943,7 +943,7 @@ namespace ts.Completions {
getTypeScriptMemberSymbols();
}
else if (isRightOfOpenTag) {
const tagSymbols = Debug.assertEachDefined(typeChecker.getJsxIntrinsicTagNames(), "getJsxIntrinsicTagNames() should all be defined");
const tagSymbols = Debug.assertEachDefined(typeChecker.getJsxIntrinsicTagNamesAt(location), "getJsxIntrinsicTagNames() should all be defined");
if (tryGetGlobalSymbols()) {
symbols = tagSymbols.concat(symbols.filter(s => !!(s.flags & (SymbolFlags.Value | SymbolFlags.Alias))));
}
+1 -1
View File
@@ -1811,7 +1811,7 @@ declare namespace ts {
getAliasedSymbol(symbol: Symbol): Symbol;
getExportsOfModule(moduleSymbol: Symbol): Symbol[];
getAllAttributesTypeFromJsxOpeningLikeElement(elementNode: JsxOpeningLikeElement): Type | undefined;
getJsxIntrinsicTagNames(): Symbol[];
getJsxIntrinsicTagNamesAt(location: Node): Symbol[];
isOptionalParameter(node: ParameterDeclaration): boolean;
getAmbientModules(): Symbol[];
tryGetMemberInModuleExports(memberName: string, moduleSymbol: Symbol): Symbol | undefined;
+1 -1
View File
@@ -1811,7 +1811,7 @@ declare namespace ts {
getAliasedSymbol(symbol: Symbol): Symbol;
getExportsOfModule(moduleSymbol: Symbol): Symbol[];
getAllAttributesTypeFromJsxOpeningLikeElement(elementNode: JsxOpeningLikeElement): Type | undefined;
getJsxIntrinsicTagNames(): Symbol[];
getJsxIntrinsicTagNamesAt(location: Node): Symbol[];
isOptionalParameter(node: ParameterDeclaration): boolean;
getAmbientModules(): Symbol[];
tryGetMemberInModuleExports(memberName: string, moduleSymbol: Symbol): Symbol | undefined;
@@ -0,0 +1,129 @@
tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2322: Type 'dom.JSX.Element' is not assignable to type 'predom.JSX.Element'.
Property '__predomBrand' is missing in type 'Element'.
tests/cases/conformance/jsx/inline/index.tsx(21,21): error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Element'.
tests/cases/conformance/jsx/inline/index.tsx(21,28): error TS2322: Type '{ children: Element[]; x: number; y: number; }' is not assignable to type '{ children?: Element[]; }'.
Types of property 'children' are incompatible.
Type 'dom.JSX.Element[]' is not assignable to type 'predom.JSX.Element[]'.
Type 'dom.JSX.Element' is not assignable to type 'predom.JSX.Element'.
tests/cases/conformance/jsx/inline/index.tsx(21,40): error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
tests/cases/conformance/jsx/inline/index.tsx(21,40): error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
Property '__domBrand' is missing in type 'MyClass'.
tests/cases/conformance/jsx/inline/index.tsx(21,63): error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
tests/cases/conformance/jsx/inline/index.tsx(24,30): error TS2322: Type '{ children: Element[]; x: number; y: number; }' is not assignable to type '{ x: number; y: number; children?: Element[]; }'.
Types of property 'children' are incompatible.
Type 'predom.JSX.Element[]' is not assignable to type 'dom.JSX.Element[]'.
Type 'predom.JSX.Element' is not assignable to type 'dom.JSX.Element'.
Property '__domBrand' is missing in type 'Element'.
==== tests/cases/conformance/jsx/inline/renderer.d.ts (0 errors) ====
export namespace dom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): dom.JSX.Element;
==== tests/cases/conformance/jsx/inline/renderer2.d.ts (0 errors) ====
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
==== tests/cases/conformance/jsx/inline/component.tsx (0 errors) ====
/** @jsx predom */
import { predom } from "./renderer2"
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>;
export class MyClass implements predom.JSX.Element {
__predomBrand!: void;
constructor(public props: {x: number, y: number, children?: predom.JSX.Element[]}) {}
render() {
return <p>
{this.props.x} + {this.props.y} = {this.props.x + this.props.y}
{...this.props.children}
</p>;
}
}
export const tree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
export default <h></h>
==== tests/cases/conformance/jsx/inline/index.tsx (7 errors) ====
/** @jsx dom */
import { dom } from "./renderer"
import prerendered, {MySFC, MyClass, tree} from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here
~~~~
!!! error TS2322: Type 'dom.JSX.Element' is not assignable to type 'predom.JSX.Element'.
!!! error TS2322: Property '__predomBrand' is missing in type 'Element'.
const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p>;
class DOMClass implements dom.JSX.Element {
__domBrand!: void;
constructor(public props: {x: number, y: number, children?: dom.JSX.Element[]}) {}
render() {
return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
}
}
// Should work, everything is a DOM element
const _tree = <DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC>
// Should fail, no dom elements
const _brokenTree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
~~~~~~~~~~~~~~~~~~~
!!! error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
!!! error TS2605: Property 'render' is missing in type 'Element'.
~~~~~~~~~~~
!!! error TS2322: Type '{ children: Element[]; x: number; y: number; }' is not assignable to type '{ children?: Element[]; }'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type 'dom.JSX.Element[]' is not assignable to type 'predom.JSX.Element[]'.
!!! error TS2322: Type 'dom.JSX.Element' is not assignable to type 'predom.JSX.Element'.
~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
!!! error TS2605: Property '__domBrand' is missing in type 'MyClass'.
~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2605: JSX element type 'MyClass' is not a constructor function for JSX elements.
// Should fail, nondom isn't allowed as children of dom
const _brokenTree2 = <DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC>
~~~~~~~~~~~
!!! error TS2322: Type '{ children: Element[]; x: number; y: number; }' is not assignable to type '{ x: number; y: number; children?: Element[]; }'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type 'predom.JSX.Element[]' is not assignable to type 'dom.JSX.Element[]'.
!!! error TS2322: Type 'predom.JSX.Element' is not assignable to type 'dom.JSX.Element'.
!!! error TS2322: Property '__domBrand' is missing in type 'Element'.
@@ -0,0 +1,164 @@
//// [tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarationsLocalTypes.tsx] ////
//// [renderer.d.ts]
export namespace dom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): dom.JSX.Element;
//// [renderer2.d.ts]
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
//// [component.tsx]
/** @jsx predom */
import { predom } from "./renderer2"
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>;
export class MyClass implements predom.JSX.Element {
__predomBrand!: void;
constructor(public props: {x: number, y: number, children?: predom.JSX.Element[]}) {}
render() {
return <p>
{this.props.x} + {this.props.y} = {this.props.x + this.props.y}
{...this.props.children}
</p>;
}
}
export const tree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
export default <h></h>
//// [index.tsx]
/** @jsx dom */
import { dom } from "./renderer"
import prerendered, {MySFC, MyClass, tree} from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here
const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p>;
class DOMClass implements dom.JSX.Element {
__domBrand!: void;
constructor(public props: {x: number, y: number, children?: dom.JSX.Element[]}) {}
render() {
return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
}
}
// Should work, everything is a DOM element
const _tree = <DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC>
// Should fail, no dom elements
const _brokenTree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
// Should fail, nondom isn't allowed as children of dom
const _brokenTree2 = <DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC>
//// [component.js]
"use strict";
var _this = this;
exports.__esModule = true;
/** @jsx predom */
var renderer2_1 = require("./renderer2");
exports.MySFC = function (props) { return renderer2_1.predom("p", null,
props.x,
" + ",
props.y,
" = ",
props.x + props.y,
_this.props.children); };
var MyClass = /** @class */ (function () {
function MyClass(props) {
this.props = props;
}
MyClass.prototype.render = function () {
return renderer2_1.predom("p", null,
this.props.x,
" + ",
this.props.y,
" = ",
this.props.x + this.props.y,
this.props.children);
};
return MyClass;
}());
exports.MyClass = MyClass;
exports.tree = renderer2_1.predom(exports.MySFC, { x: 1, y: 2 },
renderer2_1.predom(MyClass, { x: 3, y: 4 }),
renderer2_1.predom(MyClass, { x: 5, y: 6 }));
exports["default"] = renderer2_1.predom("h", null);
//// [index.js]
"use strict";
exports.__esModule = true;
/** @jsx dom */
var renderer_1 = require("./renderer");
var component_1 = require("./component");
var elem = component_1["default"];
elem = renderer_1.dom("h", null); // Expect assignability error here
var DOMSFC = function (props) { return renderer_1.dom("p", null,
props.x,
" + ",
props.y,
" = ",
props.x + props.y,
props.children); };
var DOMClass = /** @class */ (function () {
function DOMClass(props) {
this.props = props;
}
DOMClass.prototype.render = function () {
return renderer_1.dom("p", null,
this.props.x,
" + ",
this.props.y,
" = ",
this.props.x + this.props.y,
this.props.children);
};
return DOMClass;
}());
// Should work, everything is a DOM element
var _tree = renderer_1.dom(DOMSFC, { x: 1, y: 2 },
renderer_1.dom(DOMClass, { x: 3, y: 4 }),
renderer_1.dom(DOMClass, { x: 5, y: 6 }));
// Should fail, no dom elements
var _brokenTree = renderer_1.dom(component_1.MySFC, { x: 1, y: 2 },
renderer_1.dom(component_1.MyClass, { x: 3, y: 4 }),
renderer_1.dom(component_1.MyClass, { x: 5, y: 6 }));
// Should fail, nondom isn't allowed as children of dom
var _brokenTree2 = renderer_1.dom(DOMSFC, { x: 1, y: 2 },
component_1.tree,
component_1.tree);
@@ -0,0 +1,346 @@
=== tests/cases/conformance/jsx/inline/renderer.d.ts ===
export namespace dom {
>dom : Symbol(dom, Decl(renderer.d.ts, 0, 0), Decl(renderer.d.ts, 17, 1))
namespace JSX {
>JSX : Symbol(JSX, Decl(renderer.d.ts, 0, 22))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(renderer.d.ts, 1, 19))
[e: string]: {};
>e : Symbol(e, Decl(renderer.d.ts, 3, 13))
}
interface Element {
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
__domBrand: void;
>__domBrand : Symbol(Element.__domBrand, Decl(renderer.d.ts, 5, 27))
props: {
>props : Symbol(Element.props, Decl(renderer.d.ts, 6, 29))
children?: Element[];
>children : Symbol(children, Decl(renderer.d.ts, 7, 20))
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
};
}
interface ElementClass extends Element {
>ElementClass : Symbol(ElementClass, Decl(renderer.d.ts, 10, 9))
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
render(): Element;
>render : Symbol(ElementClass.render, Decl(renderer.d.ts, 11, 48))
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(renderer.d.ts, 13, 9))
>props : Symbol(ElementAttributesProperty.props, Decl(renderer.d.ts, 14, 45))
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(renderer.d.ts, 14, 59))
>children : Symbol(ElementChildrenAttribute.children, Decl(renderer.d.ts, 15, 44))
}
}
export function dom(): dom.JSX.Element;
>dom : Symbol(dom, Decl(renderer.d.ts, 0, 0), Decl(renderer.d.ts, 17, 1))
>dom : Symbol(dom, Decl(renderer.d.ts, 0, 0), Decl(renderer.d.ts, 17, 1))
>JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
>Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
=== tests/cases/conformance/jsx/inline/renderer2.d.ts ===
export namespace predom {
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 17, 1))
namespace JSX {
>JSX : Symbol(JSX, Decl(renderer2.d.ts, 0, 25))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
[e: string]: {};
>e : Symbol(e, Decl(renderer2.d.ts, 3, 13))
}
interface Element {
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
__predomBrand: void;
>__predomBrand : Symbol(Element.__predomBrand, Decl(renderer2.d.ts, 5, 27))
props: {
>props : Symbol(Element.props, Decl(renderer2.d.ts, 6, 32))
children?: Element[];
>children : Symbol(children, Decl(renderer2.d.ts, 7, 20))
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
};
}
interface ElementClass extends Element {
>ElementClass : Symbol(ElementClass, Decl(renderer2.d.ts, 10, 9))
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
render(): Element;
>render : Symbol(ElementClass.render, Decl(renderer2.d.ts, 11, 48))
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(renderer2.d.ts, 13, 9))
>props : Symbol(ElementAttributesProperty.props, Decl(renderer2.d.ts, 14, 45))
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(renderer2.d.ts, 14, 59))
>children : Symbol(ElementChildrenAttribute.children, Decl(renderer2.d.ts, 15, 44))
}
}
export function predom(): predom.JSX.Element;
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 17, 1))
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 17, 1))
>JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
=== tests/cases/conformance/jsx/inline/component.tsx ===
/** @jsx predom */
import { predom } from "./renderer2"
>predom : Symbol(predom, Decl(component.tsx, 1, 8))
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 : Symbol(MySFC, Decl(component.tsx, 3, 12))
>props : Symbol(props, Decl(component.tsx, 3, 22))
>x : Symbol(x, Decl(component.tsx, 3, 30))
>y : Symbol(y, Decl(component.tsx, 3, 40))
>children : Symbol(children, Decl(component.tsx, 3, 51))
>predom : Symbol(predom, Decl(component.tsx, 1, 8))
>JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
>p : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
>props.x : Symbol(x, Decl(component.tsx, 3, 30))
>props : Symbol(props, Decl(component.tsx, 3, 22))
>x : Symbol(x, Decl(component.tsx, 3, 30))
>props.y : Symbol(y, Decl(component.tsx, 3, 40))
>props : Symbol(props, Decl(component.tsx, 3, 22))
>y : Symbol(y, Decl(component.tsx, 3, 40))
>props.x : Symbol(x, Decl(component.tsx, 3, 30))
>props : Symbol(props, Decl(component.tsx, 3, 22))
>x : Symbol(x, Decl(component.tsx, 3, 30))
>props.y : Symbol(y, Decl(component.tsx, 3, 40))
>props : Symbol(props, Decl(component.tsx, 3, 22))
>y : Symbol(y, Decl(component.tsx, 3, 40))
>p : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
export class MyClass implements predom.JSX.Element {
>MyClass : Symbol(MyClass, Decl(component.tsx, 3, 164))
>predom.JSX.Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
>predom.JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>predom : Symbol(predom, Decl(component.tsx, 1, 8))
>JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
__predomBrand!: void;
>__predomBrand : Symbol(MyClass.__predomBrand, Decl(component.tsx, 5, 52))
constructor(public props: {x: number, y: number, children?: predom.JSX.Element[]}) {}
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>x : Symbol(x, Decl(component.tsx, 7, 31))
>y : Symbol(y, Decl(component.tsx, 7, 41))
>children : Symbol(children, Decl(component.tsx, 7, 52))
>predom : Symbol(predom, Decl(component.tsx, 1, 8))
>JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
render() {
>render : Symbol(MyClass.render, Decl(component.tsx, 7, 89))
return <p>
>p : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
{this.props.x} + {this.props.y} = {this.props.x + this.props.y}
>this.props.x : Symbol(x, Decl(component.tsx, 7, 31))
>this.props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>this : Symbol(MyClass, Decl(component.tsx, 3, 164))
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>x : Symbol(x, Decl(component.tsx, 7, 31))
>this.props.y : Symbol(y, Decl(component.tsx, 7, 41))
>this.props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>this : Symbol(MyClass, Decl(component.tsx, 3, 164))
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>y : Symbol(y, Decl(component.tsx, 7, 41))
>this.props.x : Symbol(x, Decl(component.tsx, 7, 31))
>this.props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>this : Symbol(MyClass, Decl(component.tsx, 3, 164))
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>x : Symbol(x, Decl(component.tsx, 7, 31))
>this.props.y : Symbol(y, Decl(component.tsx, 7, 41))
>this.props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>this : Symbol(MyClass, Decl(component.tsx, 3, 164))
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>y : Symbol(y, Decl(component.tsx, 7, 41))
{...this.props.children}
>this.props.children : Symbol(children, Decl(component.tsx, 7, 52))
>this.props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>this : Symbol(MyClass, Decl(component.tsx, 3, 164))
>props : Symbol(MyClass.props, Decl(component.tsx, 7, 16))
>children : Symbol(children, Decl(component.tsx, 7, 52))
</p>;
>p : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
}
}
export const tree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
>tree : Symbol(tree, Decl(component.tsx, 15, 12))
>MySFC : Symbol(MySFC, Decl(component.tsx, 3, 12))
>x : Symbol(x, Decl(component.tsx, 15, 26))
>y : Symbol(y, Decl(component.tsx, 15, 32))
>MyClass : Symbol(MyClass, Decl(component.tsx, 3, 164))
>x : Symbol(x, Decl(component.tsx, 15, 47))
>y : Symbol(y, Decl(component.tsx, 15, 53))
>MyClass : Symbol(MyClass, Decl(component.tsx, 3, 164))
>x : Symbol(x, Decl(component.tsx, 15, 70))
>y : Symbol(y, Decl(component.tsx, 15, 76))
>MySFC : Symbol(MySFC, Decl(component.tsx, 3, 12))
export default <h></h>
>h : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
>h : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
=== tests/cases/conformance/jsx/inline/index.tsx ===
/** @jsx dom */
import { dom } from "./renderer"
>dom : Symbol(dom, Decl(index.tsx, 1, 8))
import prerendered, {MySFC, MyClass, tree} from "./component";
>prerendered : Symbol(prerendered, Decl(index.tsx, 2, 6))
>MySFC : Symbol(MySFC, Decl(index.tsx, 2, 21))
>MyClass : Symbol(MyClass, Decl(index.tsx, 2, 27))
>tree : Symbol(tree, Decl(index.tsx, 2, 36))
let elem = prerendered;
>elem : Symbol(elem, Decl(index.tsx, 3, 3))
>prerendered : Symbol(prerendered, Decl(index.tsx, 2, 6))
elem = <h></h>; // Expect assignability error here
>elem : Symbol(elem, Decl(index.tsx, 3, 3))
>h : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
>h : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p>;
>DOMSFC : Symbol(DOMSFC, Decl(index.tsx, 6, 5))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>x : Symbol(x, Decl(index.tsx, 6, 24))
>y : Symbol(y, Decl(index.tsx, 6, 34))
>children : Symbol(children, Decl(index.tsx, 6, 45))
>dom : Symbol(dom, Decl(index.tsx, 1, 8))
>JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
>Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
>p : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
>props.x : Symbol(x, Decl(index.tsx, 6, 24))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>x : Symbol(x, Decl(index.tsx, 6, 24))
>props.y : Symbol(y, Decl(index.tsx, 6, 34))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>y : Symbol(y, Decl(index.tsx, 6, 34))
>props.x : Symbol(x, Decl(index.tsx, 6, 24))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>x : Symbol(x, Decl(index.tsx, 6, 24))
>props.y : Symbol(y, Decl(index.tsx, 6, 34))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>y : Symbol(y, Decl(index.tsx, 6, 34))
>props.children : Symbol(children, Decl(index.tsx, 6, 45))
>props : Symbol(props, Decl(index.tsx, 6, 16))
>children : Symbol(children, Decl(index.tsx, 6, 45))
>p : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
class DOMClass implements dom.JSX.Element {
>DOMClass : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>dom.JSX.Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
>dom.JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
>dom : Symbol(dom, Decl(index.tsx, 1, 8))
>JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
>Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
__domBrand!: void;
>__domBrand : Symbol(DOMClass.__domBrand, Decl(index.tsx, 8, 43))
constructor(public props: {x: number, y: number, children?: dom.JSX.Element[]}) {}
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>x : Symbol(x, Decl(index.tsx, 10, 31))
>y : Symbol(y, Decl(index.tsx, 10, 41))
>children : Symbol(children, Decl(index.tsx, 10, 52))
>dom : Symbol(dom, Decl(index.tsx, 1, 8))
>JSX : Symbol(dom.JSX, Decl(renderer.d.ts, 0, 22))
>Element : Symbol(dom.JSX.Element, Decl(renderer.d.ts, 4, 9))
render() {
>render : Symbol(DOMClass.render, Decl(index.tsx, 10, 86))
return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
>p : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
>this.props.x : Symbol(x, Decl(index.tsx, 10, 31))
>this.props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>this : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>x : Symbol(x, Decl(index.tsx, 10, 31))
>this.props.y : Symbol(y, Decl(index.tsx, 10, 41))
>this.props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>this : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>y : Symbol(y, Decl(index.tsx, 10, 41))
>this.props.x : Symbol(x, Decl(index.tsx, 10, 31))
>this.props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>this : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>x : Symbol(x, Decl(index.tsx, 10, 31))
>this.props.y : Symbol(y, Decl(index.tsx, 10, 41))
>this.props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>this : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>y : Symbol(y, Decl(index.tsx, 10, 41))
>this.props.children : Symbol(children, Decl(index.tsx, 10, 52))
>this.props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>this : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>props : Symbol(DOMClass.props, Decl(index.tsx, 10, 16))
>children : Symbol(children, Decl(index.tsx, 10, 52))
>p : Symbol(dom.JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
}
}
// Should work, everything is a DOM element
const _tree = <DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC>
>_tree : Symbol(_tree, Decl(index.tsx, 17, 5))
>DOMSFC : Symbol(DOMSFC, Decl(index.tsx, 6, 5))
>x : Symbol(x, Decl(index.tsx, 17, 21))
>y : Symbol(y, Decl(index.tsx, 17, 27))
>DOMClass : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>x : Symbol(x, Decl(index.tsx, 17, 43))
>y : Symbol(y, Decl(index.tsx, 17, 49))
>DOMClass : Symbol(DOMClass, Decl(index.tsx, 6, 147))
>x : Symbol(x, Decl(index.tsx, 17, 67))
>y : Symbol(y, Decl(index.tsx, 17, 73))
>DOMSFC : Symbol(DOMSFC, Decl(index.tsx, 6, 5))
// Should fail, no dom elements
const _brokenTree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
>_brokenTree : Symbol(_brokenTree, Decl(index.tsx, 20, 5))
>MySFC : Symbol(MySFC, Decl(index.tsx, 2, 21))
>x : Symbol(x, Decl(index.tsx, 20, 26))
>y : Symbol(y, Decl(index.tsx, 20, 32))
>MyClass : Symbol(MyClass, Decl(index.tsx, 2, 27))
>x : Symbol(x, Decl(index.tsx, 20, 47))
>y : Symbol(y, Decl(index.tsx, 20, 53))
>MyClass : Symbol(MyClass, Decl(index.tsx, 2, 27))
>x : Symbol(x, Decl(index.tsx, 20, 70))
>y : Symbol(y, Decl(index.tsx, 20, 76))
>MySFC : Symbol(MySFC, Decl(index.tsx, 2, 21))
// Should fail, nondom isn't allowed as children of dom
const _brokenTree2 = <DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC>
>_brokenTree2 : Symbol(_brokenTree2, Decl(index.tsx, 23, 5))
>DOMSFC : Symbol(DOMSFC, Decl(index.tsx, 6, 5))
>x : Symbol(x, Decl(index.tsx, 23, 28))
>y : Symbol(y, Decl(index.tsx, 23, 34))
>tree : Symbol(tree, Decl(index.tsx, 2, 36))
>tree : Symbol(tree, Decl(index.tsx, 2, 36))
>DOMSFC : Symbol(DOMSFC, Decl(index.tsx, 6, 5))
@@ -0,0 +1,394 @@
=== tests/cases/conformance/jsx/inline/renderer.d.ts ===
export namespace dom {
>dom : () => JSX.Element
namespace JSX {
>JSX : any
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
[e: string]: {};
>e : string
}
interface Element {
>Element : Element
__domBrand: void;
>__domBrand : void
props: {
>props : { children?: Element[]; }
children?: Element[];
>children : Element[]
>Element : Element
};
}
interface ElementClass extends Element {
>ElementClass : ElementClass
>Element : Element
render(): Element;
>render : () => Element
>Element : Element
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : ElementAttributesProperty
>props : any
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : ElementChildrenAttribute
>children : any
}
}
export function dom(): dom.JSX.Element;
>dom : () => dom.JSX.Element
>dom : any
>JSX : any
>Element : dom.JSX.Element
=== tests/cases/conformance/jsx/inline/renderer2.d.ts ===
export namespace predom {
>predom : () => JSX.Element
namespace JSX {
>JSX : any
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
[e: string]: {};
>e : string
}
interface Element {
>Element : Element
__predomBrand: void;
>__predomBrand : void
props: {
>props : { children?: Element[]; }
children?: Element[];
>children : Element[]
>Element : Element
};
}
interface ElementClass extends Element {
>ElementClass : ElementClass
>Element : Element
render(): Element;
>render : () => Element
>Element : Element
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : ElementAttributesProperty
>props : any
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : ElementChildrenAttribute
>children : any
}
}
export function predom(): predom.JSX.Element;
>predom : () => predom.JSX.Element
>predom : any
>JSX : any
>Element : predom.JSX.Element
=== tests/cases/conformance/jsx/inline/component.tsx ===
/** @jsx predom */
import { predom } from "./renderer2"
>predom : () => 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
>(props: {x: number, y: number, children?: predom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{...this.props.children}</p> : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>y : number
>children : predom.JSX.Element[]
>predom : any
>JSX : any
>Element : predom.JSX.Element
><p>{props.x} + {props.y} = {props.x + props.y}{...this.props.children}</p> : predom.JSX.Element
>p : any
>props.x : number
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>props.y : number
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>y : number
>props.x + props.y : number
>props.x : number
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>props.y : number
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>y : number
>this.props.children : any
>this.props : any
>this : any
>props : any
>children : any
>p : any
export class MyClass implements predom.JSX.Element {
>MyClass : MyClass
>predom.JSX.Element : any
>predom.JSX : any
>predom : () => predom.JSX.Element
>JSX : any
>Element : predom.JSX.Element
__predomBrand!: void;
>__predomBrand : void
constructor(public props: {x: number, y: number, children?: predom.JSX.Element[]}) {}
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>y : number
>children : predom.JSX.Element[]
>predom : any
>JSX : any
>Element : predom.JSX.Element
render() {
>render : () => predom.JSX.Element
return <p>
><p> {this.props.x} + {this.props.y} = {this.props.x + this.props.y} {...this.props.children} </p> : predom.JSX.Element
>p : any
{this.props.x} + {this.props.y} = {this.props.x + this.props.y}
>this.props.x : number
>this.props : { x: number; y: number; children?: predom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>this.props.y : number
>this.props : { x: number; y: number; children?: predom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>y : number
>this.props.x + this.props.y : number
>this.props.x : number
>this.props : { x: number; y: number; children?: predom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>x : number
>this.props.y : number
>this.props : { x: number; y: number; children?: predom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>y : number
{...this.props.children}
>this.props.children : predom.JSX.Element[]
>this.props : { x: number; y: number; children?: predom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: predom.JSX.Element[]; }
>children : predom.JSX.Element[]
</p>;
>p : any
}
}
export const tree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
>tree : predom.JSX.Element
><MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC> : predom.JSX.Element
>MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
>x : number
>1 : 1
>y : number
>2 : 2
><MyClass x={3} y={4} /> : predom.JSX.Element
>MyClass : typeof MyClass
>x : number
>3 : 3
>y : number
>4 : 4
><MyClass x={5} y={6} /> : predom.JSX.Element
>MyClass : typeof MyClass
>x : number
>5 : 5
>y : number
>6 : 6
>MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
export default <h></h>
><h></h> : predom.JSX.Element
>h : any
>h : any
=== tests/cases/conformance/jsx/inline/index.tsx ===
/** @jsx dom */
import { dom } from "./renderer"
>dom : () => dom.JSX.Element
import prerendered, {MySFC, MyClass, tree} from "./component";
>prerendered : predom.JSX.Element
>MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
>MyClass : typeof MyClass
>tree : predom.JSX.Element
let elem = prerendered;
>elem : predom.JSX.Element
>prerendered : predom.JSX.Element
elem = <h></h>; // Expect assignability error here
>elem = <h></h> : dom.JSX.Element
>elem : predom.JSX.Element
><h></h> : dom.JSX.Element
>h : any
>h : any
const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p>;
>DOMSFC : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
>(props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p> : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>y : number
>children : dom.JSX.Element[]
>dom : any
>JSX : any
>Element : dom.JSX.Element
><p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p> : dom.JSX.Element
>p : any
>props.x : number
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>props.y : number
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>y : number
>props.x + props.y : number
>props.x : number
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>props.y : number
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>y : number
>props.children : dom.JSX.Element[]
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>children : dom.JSX.Element[]
>p : any
class DOMClass implements dom.JSX.Element {
>DOMClass : DOMClass
>dom.JSX.Element : any
>dom.JSX : any
>dom : () => dom.JSX.Element
>JSX : any
>Element : dom.JSX.Element
__domBrand!: void;
>__domBrand : void
constructor(public props: {x: number, y: number, children?: dom.JSX.Element[]}) {}
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>y : number
>children : dom.JSX.Element[]
>dom : any
>JSX : any
>Element : dom.JSX.Element
render() {
>render : () => dom.JSX.Element
return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
><p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p> : dom.JSX.Element
>p : any
>this.props.x : number
>this.props : { x: number; y: number; children?: dom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>this.props.y : number
>this.props : { x: number; y: number; children?: dom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>y : number
>this.props.x + this.props.y : number
>this.props.x : number
>this.props : { x: number; y: number; children?: dom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>x : number
>this.props.y : number
>this.props : { x: number; y: number; children?: dom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>y : number
>this.props.children : dom.JSX.Element[]
>this.props : { x: number; y: number; children?: dom.JSX.Element[]; }
>this : this
>props : { x: number; y: number; children?: dom.JSX.Element[]; }
>children : dom.JSX.Element[]
>p : any
}
}
// Should work, everything is a DOM element
const _tree = <DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC>
>_tree : dom.JSX.Element
><DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC> : dom.JSX.Element
>DOMSFC : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
>x : number
>1 : 1
>y : number
>2 : 2
><DOMClass x={3} y={4} /> : dom.JSX.Element
>DOMClass : typeof DOMClass
>x : number
>3 : 3
>y : number
>4 : 4
><DOMClass x={5} y={6} /> : dom.JSX.Element
>DOMClass : typeof DOMClass
>x : number
>5 : 5
>y : number
>6 : 6
>DOMSFC : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
// Should fail, no dom elements
const _brokenTree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
>_brokenTree : dom.JSX.Element
><MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC> : dom.JSX.Element
>MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
>x : number
>1 : 1
>y : number
>2 : 2
><MyClass x={3} y={4} /> : dom.JSX.Element
>MyClass : typeof MyClass
>x : number
>3 : 3
>y : number
>4 : 4
><MyClass x={5} y={6} /> : dom.JSX.Element
>MyClass : typeof MyClass
>x : number
>5 : 5
>y : number
>6 : 6
>MySFC : (props: { x: number; y: number; children?: predom.JSX.Element[]; }) => predom.JSX.Element
// Should fail, nondom isn't allowed as children of dom
const _brokenTree2 = <DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC>
>_brokenTree2 : dom.JSX.Element
><DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC> : dom.JSX.Element
>DOMSFC : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
>x : number
>1 : 1
>y : number
>2 : 2
>tree : predom.JSX.Element
>tree : predom.JSX.Element
>DOMSFC : (props: { x: number; y: number; children?: dom.JSX.Element[]; }) => dom.JSX.Element
@@ -0,0 +1,51 @@
tests/cases/conformance/jsx/inline/index.tsx(5,1): error TS2322: Type 'JSX.Element' is not assignable to type 'predom.JSX.Element'.
Property '__predomBrand' is missing in type 'Element'.
==== tests/cases/conformance/jsx/inline/renderer.d.ts (0 errors) ====
declare global {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): JSX.Element;
==== tests/cases/conformance/jsx/inline/renderer2.d.ts (0 errors) ====
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
==== tests/cases/conformance/jsx/inline/component.tsx (0 errors) ====
/** @jsx predom */
import { predom } from "./renderer2"
export default <h></h>
==== tests/cases/conformance/jsx/inline/index.tsx (1 errors) ====
/** @jsx dom */
import { dom } from "./renderer"
import prerendered from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here
~~~~
!!! error TS2322: Type 'JSX.Element' is not assignable to type 'predom.JSX.Element'.
!!! error TS2322: Property '__predomBrand' is missing in type 'Element'.
@@ -0,0 +1,61 @@
//// [tests/cases/conformance/jsx/inline/inlineJsxFactoryLocalTypeGlobalFallback.tsx] ////
//// [renderer.d.ts]
declare global {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): JSX.Element;
//// [renderer2.d.ts]
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
//// [component.tsx]
/** @jsx predom */
import { predom } from "./renderer2"
export default <h></h>
//// [index.tsx]
/** @jsx dom */
import { dom } from "./renderer"
import prerendered from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here
//// [component.js]
"use strict";
exports.__esModule = true;
/** @jsx predom */
var renderer2_1 = require("./renderer2");
exports["default"] = renderer2_1.predom("h", null);
//// [index.js]
"use strict";
exports.__esModule = true;
/** @jsx dom */
var renderer_1 = require("./renderer");
var component_1 = require("./component");
var elem = component_1["default"];
elem = renderer_1.dom("h", null); // Expect assignability error here
@@ -0,0 +1,107 @@
=== tests/cases/conformance/jsx/inline/renderer.d.ts ===
declare global {
>global : Symbol(global, Decl(renderer.d.ts, 0, 0))
namespace JSX {
>JSX : Symbol(JSX, Decl(renderer.d.ts, 0, 16))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(renderer.d.ts, 1, 19))
[e: string]: {};
>e : Symbol(e, Decl(renderer.d.ts, 3, 13))
}
interface Element {
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
__domBrand: void;
>__domBrand : Symbol(Element.__domBrand, Decl(renderer.d.ts, 5, 27))
children: Element[];
>children : Symbol(Element.children, Decl(renderer.d.ts, 6, 29))
>Element : Symbol(Element, Decl(renderer.d.ts, 4, 9))
props: {};
>props : Symbol(Element.props, Decl(renderer.d.ts, 7, 32))
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(renderer.d.ts, 9, 9))
>props : Symbol(ElementAttributesProperty.props, Decl(renderer.d.ts, 10, 45))
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(renderer.d.ts, 10, 59))
>children : Symbol(ElementChildrenAttribute.children, Decl(renderer.d.ts, 11, 44))
}
}
export function dom(): JSX.Element;
>dom : Symbol(dom, Decl(renderer.d.ts, 13, 1))
>JSX : Symbol(JSX, Decl(renderer.d.ts, 0, 16))
>Element : Symbol(JSX.Element, Decl(renderer.d.ts, 4, 9))
=== tests/cases/conformance/jsx/inline/renderer2.d.ts ===
export namespace predom {
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 13, 1))
namespace JSX {
>JSX : Symbol(JSX, Decl(renderer2.d.ts, 0, 25))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
[e: string]: {};
>e : Symbol(e, Decl(renderer2.d.ts, 3, 13))
}
interface Element {
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
__predomBrand: void;
>__predomBrand : Symbol(Element.__predomBrand, Decl(renderer2.d.ts, 5, 27))
children: Element[];
>children : Symbol(Element.children, Decl(renderer2.d.ts, 6, 32))
>Element : Symbol(Element, Decl(renderer2.d.ts, 4, 9))
props: {};
>props : Symbol(Element.props, Decl(renderer2.d.ts, 7, 32))
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(renderer2.d.ts, 9, 9))
>props : Symbol(ElementAttributesProperty.props, Decl(renderer2.d.ts, 10, 45))
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(renderer2.d.ts, 10, 59))
>children : Symbol(ElementChildrenAttribute.children, Decl(renderer2.d.ts, 11, 44))
}
}
export function predom(): predom.JSX.Element;
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 13, 1))
>predom : Symbol(predom, Decl(renderer2.d.ts, 0, 0), Decl(renderer2.d.ts, 13, 1))
>JSX : Symbol(predom.JSX, Decl(renderer2.d.ts, 0, 25))
>Element : Symbol(predom.JSX.Element, Decl(renderer2.d.ts, 4, 9))
=== tests/cases/conformance/jsx/inline/component.tsx ===
/** @jsx predom */
import { predom } from "./renderer2"
>predom : Symbol(predom, Decl(component.tsx, 1, 8))
export default <h></h>
>h : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
>h : Symbol(predom.JSX.IntrinsicElements, Decl(renderer2.d.ts, 1, 19))
=== tests/cases/conformance/jsx/inline/index.tsx ===
/** @jsx dom */
import { dom } from "./renderer"
>dom : Symbol(dom, Decl(index.tsx, 1, 8))
import prerendered from "./component";
>prerendered : Symbol(prerendered, Decl(index.tsx, 2, 6))
let elem = prerendered;
>elem : Symbol(elem, Decl(index.tsx, 3, 3))
>prerendered : Symbol(prerendered, Decl(index.tsx, 2, 6))
elem = <h></h>; // Expect assignability error here
>elem : Symbol(elem, Decl(index.tsx, 3, 3))
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19))
@@ -0,0 +1,110 @@
=== tests/cases/conformance/jsx/inline/renderer.d.ts ===
declare global {
>global : any
namespace JSX {
>JSX : any
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
[e: string]: {};
>e : string
}
interface Element {
>Element : Element
__domBrand: void;
>__domBrand : void
children: Element[];
>children : Element[]
>Element : Element
props: {};
>props : {}
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : ElementAttributesProperty
>props : any
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : ElementChildrenAttribute
>children : any
}
}
export function dom(): JSX.Element;
>dom : () => JSX.Element
>JSX : any
>Element : JSX.Element
=== tests/cases/conformance/jsx/inline/renderer2.d.ts ===
export namespace predom {
>predom : () => JSX.Element
namespace JSX {
>JSX : any
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
[e: string]: {};
>e : string
}
interface Element {
>Element : Element
__predomBrand: void;
>__predomBrand : void
children: Element[];
>children : Element[]
>Element : Element
props: {};
>props : {}
}
interface ElementAttributesProperty { props: any; }
>ElementAttributesProperty : ElementAttributesProperty
>props : any
interface ElementChildrenAttribute { children: any; }
>ElementChildrenAttribute : ElementChildrenAttribute
>children : any
}
}
export function predom(): predom.JSX.Element;
>predom : () => predom.JSX.Element
>predom : any
>JSX : any
>Element : predom.JSX.Element
=== tests/cases/conformance/jsx/inline/component.tsx ===
/** @jsx predom */
import { predom } from "./renderer2"
>predom : () => predom.JSX.Element
export default <h></h>
><h></h> : predom.JSX.Element
>h : any
>h : any
=== tests/cases/conformance/jsx/inline/index.tsx ===
/** @jsx dom */
import { dom } from "./renderer"
>dom : () => JSX.Element
import prerendered from "./component";
>prerendered : predom.JSX.Element
let elem = prerendered;
>elem : predom.JSX.Element
>prerendered : predom.JSX.Element
elem = <h></h>; // Expect assignability error here
>elem = <h></h> : JSX.Element
>elem : predom.JSX.Element
><h></h> : JSX.Element
>h : any
>h : any
@@ -1,8 +1,7 @@
tests/cases/conformance/jsx/file.tsx(8,1): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.
tests/cases/conformance/jsx/file.tsx(8,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
declare module JSX {
}
@@ -12,7 +11,5 @@ tests/cases/conformance/jsx/file.tsx(8,1): error TS7026: JSX element implicitly
var obj1: Obj1;
<obj1 x={10} />; // Error (JSX.Element is implicit any)
~~~~~~~~~~~~~~~
!!! error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.
~~~~~~~~~~~~~~~
!!! error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
@@ -0,0 +1,86 @@
// @jsx: react
// @filename: renderer.d.ts
export namespace dom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): dom.JSX.Element;
// @filename: renderer2.d.ts
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
props: {
children?: Element[];
};
}
interface ElementClass extends Element {
render(): Element;
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
// @filename: component.tsx
/** @jsx predom */
import { predom } from "./renderer2"
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>;
export class MyClass implements predom.JSX.Element {
__predomBrand!: void;
constructor(public props: {x: number, y: number, children?: predom.JSX.Element[]}) {}
render() {
return <p>
{this.props.x} + {this.props.y} = {this.props.x + this.props.y}
{...this.props.children}
</p>;
}
}
export const tree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
export default <h></h>
// @filename: index.tsx
/** @jsx dom */
import { dom } from "./renderer"
import prerendered, {MySFC, MyClass, tree} from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here
const DOMSFC = (props: {x: number, y: number, children?: dom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{props.children}</p>;
class DOMClass implements dom.JSX.Element {
__domBrand!: void;
constructor(public props: {x: number, y: number, children?: dom.JSX.Element[]}) {}
render() {
return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
}
}
// Should work, everything is a DOM element
const _tree = <DOMSFC x={1} y={2}><DOMClass x={3} y={4} /><DOMClass x={5} y={6} /></DOMSFC>
// Should fail, no dom elements
const _brokenTree = <MySFC x={1} y={2}><MyClass x={3} y={4} /><MyClass x={5} y={6} /></MySFC>
// Should fail, nondom isn't allowed as children of dom
const _brokenTree2 = <DOMSFC x={1} y={2}>{tree}{tree}</DOMSFC>
@@ -0,0 +1,44 @@
// @jsx: react
// @filename: renderer.d.ts
declare global {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__domBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function dom(): JSX.Element;
// @filename: renderer2.d.ts
export namespace predom {
namespace JSX {
interface IntrinsicElements {
[e: string]: {};
}
interface Element {
__predomBrand: void;
children: Element[];
props: {};
}
interface ElementAttributesProperty { props: any; }
interface ElementChildrenAttribute { children: any; }
}
}
export function predom(): predom.JSX.Element;
// @filename: component.tsx
/** @jsx predom */
import { predom } from "./renderer2"
export default <h></h>
// @filename: index.tsx
/** @jsx dom */
import { dom } from "./renderer"
import prerendered from "./component";
let elem = prerendered;
elem = <h></h>; // Expect assignability error here