From 8e6467cdb8a4d81ab7c330f6396555831a3b4829 Mon Sep 17 00:00:00 2001 From: Sheetal Nandi Date: Tue, 18 Oct 2016 12:24:41 -0700 Subject: [PATCH 1/2] Add testcase for incorrect emit of jsx --- .../reference/jsxEmitWithAttributes.js | 81 +++++++++++ .../reference/jsxEmitWithAttributes.symbols | 119 ++++++++++++++++ .../reference/jsxEmitWithAttributes.types | 134 ++++++++++++++++++ tests/cases/compiler/jsxEmitWithAttributes.ts | 53 +++++++ 4 files changed, 387 insertions(+) create mode 100644 tests/baselines/reference/jsxEmitWithAttributes.js create mode 100644 tests/baselines/reference/jsxEmitWithAttributes.symbols create mode 100644 tests/baselines/reference/jsxEmitWithAttributes.types create mode 100644 tests/cases/compiler/jsxEmitWithAttributes.ts diff --git a/tests/baselines/reference/jsxEmitWithAttributes.js b/tests/baselines/reference/jsxEmitWithAttributes.js new file mode 100644 index 00000000000..cd50a4f3411 --- /dev/null +++ b/tests/baselines/reference/jsxEmitWithAttributes.js @@ -0,0 +1,81 @@ +//// [tests/cases/compiler/jsxEmitWithAttributes.ts] //// + +//// [Element.ts] + +declare namespace JSX { + interface Element { + name: string; + isIntrinsic: boolean; + isCustomElement: boolean; + toString(renderId?: number): string; + bindDOM(renderId?: number): number; + resetComponent(): void; + instantiateComponents(renderId?: number): number; + props: any; + } +} +export namespace Element { + export function isElement(el: any): el is JSX.Element { + return el.markAsChildOfRootElement !== undefined; + } + + export function createElement(args: any[]) { + + return { + } + } +} + +export let createElement = Element.createElement; + +function toCamelCase(text: string): string { + return text[0].toLowerCase() + text.substring(1); +} + +//// [test.tsx] +import { Element} from './Element'; + +let c: { + a?: { + b: string + } +}; + +class A { + view() { + return [ + , + + ]; + } +} + +//// [Element.js] +"use strict"; +var Element; +(function (Element) { + function isElement(el) { + return el.markAsChildOfRootElement !== undefined; + } + Element.isElement = isElement; + function createElement(args) { + return {}; + } + Element.createElement = createElement; +})(Element = exports.Element || (exports.Element = {})); +exports.createElement = Element.createElement; +function toCamelCase(text) { + return text[0].toLowerCase() + text.substring(1); +} +//// [test.js] +"use strict"; +const Element_1 = require("./Element"); +let c; +class A { + view() { + return [ + Element_1.Element.createElement("meta", { content: "helloworld" }), + Element.createElement("meta", { content: c.a.b }) + ]; + } +} diff --git a/tests/baselines/reference/jsxEmitWithAttributes.symbols b/tests/baselines/reference/jsxEmitWithAttributes.symbols new file mode 100644 index 00000000000..16cd35d1ca3 --- /dev/null +++ b/tests/baselines/reference/jsxEmitWithAttributes.symbols @@ -0,0 +1,119 @@ +=== tests/cases/compiler/Element.ts === + +declare namespace JSX { +>JSX : Symbol(JSX, Decl(Element.ts, 0, 0)) + + interface Element { +>Element : Symbol(Element, Decl(Element.ts, 1, 23)) + + name: string; +>name : Symbol(Element.name, Decl(Element.ts, 2, 23)) + + isIntrinsic: boolean; +>isIntrinsic : Symbol(Element.isIntrinsic, Decl(Element.ts, 3, 21)) + + isCustomElement: boolean; +>isCustomElement : Symbol(Element.isCustomElement, Decl(Element.ts, 4, 29)) + + toString(renderId?: number): string; +>toString : Symbol(Element.toString, Decl(Element.ts, 5, 33)) +>renderId : Symbol(renderId, Decl(Element.ts, 6, 17)) + + bindDOM(renderId?: number): number; +>bindDOM : Symbol(Element.bindDOM, Decl(Element.ts, 6, 44)) +>renderId : Symbol(renderId, Decl(Element.ts, 7, 16)) + + resetComponent(): void; +>resetComponent : Symbol(Element.resetComponent, Decl(Element.ts, 7, 43)) + + instantiateComponents(renderId?: number): number; +>instantiateComponents : Symbol(Element.instantiateComponents, Decl(Element.ts, 8, 31)) +>renderId : Symbol(renderId, Decl(Element.ts, 9, 30)) + + props: any; +>props : Symbol(Element.props, Decl(Element.ts, 9, 57)) + } +} +export namespace Element { +>Element : Symbol(Element, Decl(Element.ts, 12, 1)) + + export function isElement(el: any): el is JSX.Element { +>isElement : Symbol(isElement, Decl(Element.ts, 13, 26)) +>el : Symbol(el, Decl(Element.ts, 14, 30)) +>el : Symbol(el, Decl(Element.ts, 14, 30)) +>JSX : Symbol(JSX, Decl(Element.ts, 0, 0)) +>Element : Symbol(JSX.Element, Decl(Element.ts, 1, 23)) + + return el.markAsChildOfRootElement !== undefined; +>el : Symbol(el, Decl(Element.ts, 14, 30)) +>undefined : Symbol(undefined) + } + + export function createElement(args: any[]) { +>createElement : Symbol(createElement, Decl(Element.ts, 16, 5)) +>args : Symbol(args, Decl(Element.ts, 18, 34)) + + return { + } + } +} + +export let createElement = Element.createElement; +>createElement : Symbol(createElement, Decl(Element.ts, 25, 10)) +>Element.createElement : Symbol(Element.createElement, Decl(Element.ts, 16, 5)) +>Element : Symbol(Element, Decl(Element.ts, 12, 1)) +>createElement : Symbol(Element.createElement, Decl(Element.ts, 16, 5)) + +function toCamelCase(text: string): string { +>toCamelCase : Symbol(toCamelCase, Decl(Element.ts, 25, 49)) +>text : Symbol(text, Decl(Element.ts, 27, 21)) + + return text[0].toLowerCase() + text.substring(1); +>text[0].toLowerCase : Symbol(String.toLowerCase, Decl(lib.es5.d.ts, --, --)) +>text : Symbol(text, Decl(Element.ts, 27, 21)) +>toLowerCase : Symbol(String.toLowerCase, Decl(lib.es5.d.ts, --, --)) +>text.substring : Symbol(String.substring, Decl(lib.es5.d.ts, --, --)) +>text : Symbol(text, Decl(Element.ts, 27, 21)) +>substring : Symbol(String.substring, Decl(lib.es5.d.ts, --, --)) +} + +=== tests/cases/compiler/test.tsx === +import { Element} from './Element'; +>Element : Symbol(Element, Decl(test.tsx, 0, 8)) + +let c: { +>c : Symbol(c, Decl(test.tsx, 2, 3)) + + a?: { +>a : Symbol(a, Decl(test.tsx, 2, 8)) + + b: string +>b : Symbol(b, Decl(test.tsx, 3, 6)) + } +}; + +class A { +>A : Symbol(A, Decl(test.tsx, 6, 2)) + + view() { +>view : Symbol(A.view, Decl(test.tsx, 8, 9)) + + return [ + , +>meta : Symbol(unknown) +>content : Symbol(unknown) +>meta : Symbol(unknown) + + +>meta : Symbol(unknown) +>content : Symbol(unknown) +>c.a!.b : Symbol(b, Decl(test.tsx, 3, 6)) +>c.a : Symbol(a, Decl(test.tsx, 2, 8)) +>c : Symbol(c, Decl(test.tsx, 2, 3)) +>a : Symbol(a, Decl(test.tsx, 2, 8)) +>b : Symbol(b, Decl(test.tsx, 3, 6)) +>meta : Symbol(unknown) + + ]; + } +} diff --git a/tests/baselines/reference/jsxEmitWithAttributes.types b/tests/baselines/reference/jsxEmitWithAttributes.types new file mode 100644 index 00000000000..663ba4b5bfc --- /dev/null +++ b/tests/baselines/reference/jsxEmitWithAttributes.types @@ -0,0 +1,134 @@ +=== tests/cases/compiler/Element.ts === + +declare namespace JSX { +>JSX : any + + interface Element { +>Element : Element + + name: string; +>name : string + + isIntrinsic: boolean; +>isIntrinsic : boolean + + isCustomElement: boolean; +>isCustomElement : boolean + + toString(renderId?: number): string; +>toString : (renderId?: number) => string +>renderId : number + + bindDOM(renderId?: number): number; +>bindDOM : (renderId?: number) => number +>renderId : number + + resetComponent(): void; +>resetComponent : () => void + + instantiateComponents(renderId?: number): number; +>instantiateComponents : (renderId?: number) => number +>renderId : number + + props: any; +>props : any + } +} +export namespace Element { +>Element : typeof Element + + export function isElement(el: any): el is JSX.Element { +>isElement : (el: any) => el is JSX.Element +>el : any +>el : any +>JSX : any +>Element : JSX.Element + + return el.markAsChildOfRootElement !== undefined; +>el.markAsChildOfRootElement !== undefined : boolean +>el.markAsChildOfRootElement : any +>el : any +>markAsChildOfRootElement : any +>undefined : undefined + } + + export function createElement(args: any[]) { +>createElement : (args: any[]) => {} +>args : any[] + + return { +>{ } : {} + } + } +} + +export let createElement = Element.createElement; +>createElement : (args: any[]) => {} +>Element.createElement : (args: any[]) => {} +>Element : typeof Element +>createElement : (args: any[]) => {} + +function toCamelCase(text: string): string { +>toCamelCase : (text: string) => string +>text : string + + return text[0].toLowerCase() + text.substring(1); +>text[0].toLowerCase() + text.substring(1) : string +>text[0].toLowerCase() : string +>text[0].toLowerCase : () => string +>text[0] : string +>text : string +>0 : 0 +>toLowerCase : () => string +>text.substring(1) : string +>text.substring : (start: number, end?: number) => string +>text : string +>substring : (start: number, end?: number) => string +>1 : 1 +} + +=== tests/cases/compiler/test.tsx === +import { Element} from './Element'; +>Element : typeof Element + +let c: { +>c : { a?: { b: string; }; } + + a?: { +>a : { b: string; } + + b: string +>b : string + } +}; + +class A { +>A : A + + view() { +>view : () => any[] + + return [ +>[ , ] : any[] + + , +> : any +>meta : any +>content : any +>meta : any + + +> : any +>meta : any +>content : any +>c.a!.b : string +>c.a! : { b: string; } +>c.a : { b: string; } +>c : { a?: { b: string; }; } +>a : { b: string; } +>b : string +>meta : any + + ]; + } +} diff --git a/tests/cases/compiler/jsxEmitWithAttributes.ts b/tests/cases/compiler/jsxEmitWithAttributes.ts new file mode 100644 index 00000000000..1fb7a9ccf8d --- /dev/null +++ b/tests/cases/compiler/jsxEmitWithAttributes.ts @@ -0,0 +1,53 @@ +//@jsx: react +//@target: es6 +//@module: commonjs +//@reactNamespace: Element + +// @filename: Element.ts +declare namespace JSX { + interface Element { + name: string; + isIntrinsic: boolean; + isCustomElement: boolean; + toString(renderId?: number): string; + bindDOM(renderId?: number): number; + resetComponent(): void; + instantiateComponents(renderId?: number): number; + props: any; + } +} +export namespace Element { + export function isElement(el: any): el is JSX.Element { + return el.markAsChildOfRootElement !== undefined; + } + + export function createElement(args: any[]) { + + return { + } + } +} + +export let createElement = Element.createElement; + +function toCamelCase(text: string): string { + return text[0].toLowerCase() + text.substring(1); +} + +// @filename: test.tsx +import { Element} from './Element'; + +let c: { + a?: { + b: string + } +}; + +class A { + view() { + return [ + , + + ]; + } +} \ No newline at end of file From 202093a73059cf7d7ca07bc99675419e6a27d5ca Mon Sep 17 00:00:00 2001 From: Sheetal Nandi Date: Thu, 20 Oct 2016 15:25:26 -0700 Subject: [PATCH 2/2] When creating react namespace identifier, set its parent to jsx opening element in the parse tree This helps in resolving the react identifier correctly and Fixes #11654 --- src/compiler/factory.ts | 4 +++- tests/baselines/reference/jsxEmitWithAttributes.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/compiler/factory.ts b/src/compiler/factory.ts index 4194b7aaf5f..cd55b3099c1 100644 --- a/src/compiler/factory.ts +++ b/src/compiler/factory.ts @@ -1625,7 +1625,9 @@ namespace ts { // flag and setting a parent node. const react = createIdentifier(reactNamespace || "React"); react.flags &= ~NodeFlags.Synthesized; - react.parent = parent; + // Set the parent that is in parse tree + // this makes sure that parent chain is intact for checker to traverse complete scope tree + react.parent = getParseTreeNode(parent); return react; } diff --git a/tests/baselines/reference/jsxEmitWithAttributes.js b/tests/baselines/reference/jsxEmitWithAttributes.js index cd50a4f3411..1acead2801d 100644 --- a/tests/baselines/reference/jsxEmitWithAttributes.js +++ b/tests/baselines/reference/jsxEmitWithAttributes.js @@ -75,7 +75,7 @@ class A { view() { return [ Element_1.Element.createElement("meta", { content: "helloworld" }), - Element.createElement("meta", { content: c.a.b }) + Element_1.Element.createElement("meta", { content: c.a.b }) ]; } }