Add option to output .js files while preserving jsx

lib/protocol.d.ts

@@ -1798,9 +1798,10 @@ declare namespace ts.server.protocol {
     namespace JsxEmit {
         type None = "None";
         type Preserve = "Preserve";
+        type ReactNative = "ReactNative";
         type React = "React";
     }
-    type JsxEmit = JsxEmit.None | JsxEmit.Preserve | JsxEmit.React;
+    type JsxEmit = JsxEmit.None | JsxEmit.Preserve | JsxEmit.React | JsxEmit.ReactNative;
     namespace ModuleKind {
         type None = "None";
         type CommonJS = "CommonJS";
@@ -1880,4 +1881,4 @@ declare namespace ts {
 }
 import protocol = ts.server.protocol;
 export = protocol;
-export as namespace protocol;
+export as namespace protocol;

src/compiler/commandLineParser.ts

@@ -67,10 +67,11 @@ namespace ts {
             name: "jsx",
             type: createMapFromTemplate({
                 "preserve": JsxEmit.Preserve,
+                "react-native": JsxEmit.ReactNative,
                 "react": JsxEmit.React
             }),
             paramType: Diagnostics.KIND,
-            description: Diagnostics.Specify_JSX_code_generation_Colon_preserve_or_react,
+            description: Diagnostics.Specify_JSX_code_generation_Colon_preserve_react_native_or_react,
         },
         {
             name: "reactNamespace",

src/compiler/diagnosticMessages.json

@@ -2713,7 +2713,7 @@
         "category": "Message",
         "code": 6079
     },
-    "Specify JSX code generation: 'preserve' or 'react'": {
+    "Specify JSX code generation: 'preserve', 'react-native', or 'react'": {
         "category": "Message",
         "code": 6080
     },

src/compiler/transformers/es5.ts

@@ -11,10 +11,10 @@ namespace ts {
     export function transformES5(context: TransformationContext) {
         const compilerOptions = context.getCompilerOptions();
 
-        // enable emit notification only if using --jsx preserve
+        // enable emit notification only if using --jsx preserve or react-native
         let previousOnEmitNode: (emitContext: EmitContext, node: Node, emitCallback: (emitContext: EmitContext, node: Node) => void) => void;
         let noSubstitution: boolean[];
-        if (compilerOptions.jsx === JsxEmit.Preserve) {
+        if (compilerOptions.jsx === JsxEmit.Preserve || compilerOptions.jsx === JsxEmit.ReactNative) {
             previousOnEmitNode = context.onEmitNode;
             context.onEmitNode = onEmitNode;
             context.enableEmitNotification(SyntaxKind.JsxOpeningElement);
@@ -116,4 +116,4 @@ namespace ts {
             return undefined;
         }
     }
-}
+}

src/compiler/types.ts

@@ -3298,7 +3298,8 @@
     export const enum JsxEmit {
         None = 0,
         Preserve = 1,
-        React = 2
+        React = 2,
+        ReactNative = 3
     }
 
     export const enum NewLineKind {

src/harness/unittests/commandLineParsing.ts

@@ -87,7 +87,7 @@ namespace ts {
                         start: undefined,
                         length: undefined,
                     }, {
-                            messageText: "Argument for '--jsx' option must be: 'preserve', 'react'",
+                            messageText: "Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'",
                             category: ts.Diagnostics.Argument_for_0_option_must_be_Colon_1.category,
                             code: ts.Diagnostics.Argument_for_0_option_must_be_Colon_1.code,
 

src/harness/unittests/convertCompilerOptionsFromJson.ts

@@ -94,7 +94,7 @@ namespace ts {
                         file: undefined,
                         start: 0,
                         length: 0,
-                        messageText: "Argument for '--jsx' option must be: 'preserve', 'react'",
+                        messageText: "Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'",
                         code: Diagnostics.Argument_for_0_option_must_be_Colon_1.code,
                         category: Diagnostics.Argument_for_0_option_must_be_Colon_1.category
                     }]

src/harness/unittests/matchFiles.ts

@@ -909,6 +909,31 @@ namespace ts {
                 const actual = ts.parseJsonConfigFileContent(json, caseInsensitiveMixedExtensionHost, caseInsensitiveBasePath);
                 assertParsed(actual, expected);
             });
+            it("with jsx=react-native, allowJs=false", () => {
+                const json = {
+                    compilerOptions: {
+                        jsx: "react-native",
+                        allowJs: false
+                    }
+                };
+                const expected: ts.ParsedCommandLine = {
+                    options: {
+                        jsx: ts.JsxEmit.ReactNative,
+                        allowJs: false
+                    },
+                    errors: [],
+                    fileNames: [
+                        "c:/dev/a.ts",
+                        "c:/dev/b.tsx",
+                        "c:/dev/c.tsx",
+                    ],
+                    wildcardDirectories: {
+                        "c:/dev": ts.WatchDirectoryFlags.Recursive
+                    }
+                };
+                const actual = ts.parseJsonConfigFileContent(json, caseInsensitiveMixedExtensionHost, caseInsensitiveBasePath);
+                assertParsed(actual, expected);
+            });
             it("with jsx=none, allowJs=true", () => {
                 const json = {
                     compilerOptions: {
@@ -961,6 +986,33 @@ namespace ts {
                 const actual = ts.parseJsonConfigFileContent(json, caseInsensitiveMixedExtensionHost, caseInsensitiveBasePath);
                 assertParsed(actual, expected);
             });
+            it("with jsx=react-native, allowJs=true", () => {
+                const json = {
+                    compilerOptions: {
+                        jsx: "react-native",
+                        allowJs: true
+                    }
+                };
+                const expected: ts.ParsedCommandLine = {
+                    options: {
+                        jsx: ts.JsxEmit.ReactNative,
+                        allowJs: true
+                    },
+                    errors: [],
+                    fileNames: [
+                        "c:/dev/a.ts",
+                        "c:/dev/b.tsx",
+                        "c:/dev/c.tsx",
+                        "c:/dev/d.js",
+                        "c:/dev/e.jsx",
+                    ],
+                    wildcardDirectories: {
+                        "c:/dev": ts.WatchDirectoryFlags.Recursive
+                    }
+                };
+                const actual = ts.parseJsonConfigFileContent(json, caseInsensitiveMixedExtensionHost, caseInsensitiveBasePath);
+                assertParsed(actual, expected);
+            });
             it("exclude .min.js files using wildcards", () => {
                 const json = {
                     compilerOptions: {
@@ -1306,4 +1358,4 @@ namespace ts {
             });
         });
     });
-}
+}

src/server/protocol.ts

@@ -417,7 +417,7 @@ namespace ts.server.protocol {
         startOffset: number;
 
         /**
-         * Position (can be specified instead of line/offset pair) 
+         * Position (can be specified instead of line/offset pair)
          */
         /* @internal */
         startPosition?: number;
@@ -433,7 +433,7 @@ namespace ts.server.protocol {
         endOffset: number;
 
         /**
-         * Position (can be specified instead of line/offset pair) 
+         * Position (can be specified instead of line/offset pair)
          */
         /* @internal */
         endPosition?: number;
@@ -445,7 +445,7 @@ namespace ts.server.protocol {
     }
 
     /**
-     * Response for GetCodeFixes request. 
+     * Response for GetCodeFixes request.
      */
     export interface GetCodeFixesResponse extends Response {
         body?: CodeAction[];
@@ -2272,10 +2272,11 @@ namespace ts.server.protocol {
     export namespace JsxEmit {
         export type None = "None";
         export type Preserve = "Preserve";
+        export type ReactNative = "ReactNative";
         export type React = "React";
     }
 
-    export type JsxEmit = JsxEmit.None | JsxEmit.Preserve | JsxEmit.React;
+    export type JsxEmit = JsxEmit.None | JsxEmit.Preserve | JsxEmit.React | JsxEmit.ReactNative;
 
     export namespace ModuleKind {
         export type None = "None";

tests/baselines/reference/es3-jsx-preserve.js

@@ -0,0 +1,11 @@
+//// [es3-jsx-preserve.tsx]
+
+const React: any = null;
+
+const elem = <div></div>;
+
+
+
+//// [es3-jsx-preserve.jsx]
+var React = null;
+var elem = <div></div>;

tests/baselines/reference/es3-jsx-preserve.symbols

@@ -0,0 +1,11 @@
+=== tests/cases/compiler/es3-jsx-preserve.tsx ===
+
+const React: any = null;
+>React : Symbol(React, Decl(es3-jsx-preserve.tsx, 1, 5))
+
+const elem = <div></div>;
+>elem : Symbol(elem, Decl(es3-jsx-preserve.tsx, 3, 5))
+>div : Symbol(unknown)
+>div : Symbol(unknown)
+
+

tests/baselines/reference/es3-jsx-preserve.types

@@ -0,0 +1,13 @@
+=== tests/cases/compiler/es3-jsx-preserve.tsx ===
+
+const React: any = null;
+>React : any
+>null : null
+
+const elem = <div></div>;
+>elem : any
+><div></div> : any
+>div : any
+>div : any
+
+

tests/baselines/reference/es3-jsx-react-native.js

@@ -0,0 +1,11 @@
+//// [es3-jsx-react-native.tsx]
+
+const React: any = null;
+
+const elem = <div></div>;
+
+
+
+//// [es3-jsx-react-native.js]
+var React = null;
+var elem = <div></div>;

tests/baselines/reference/es3-jsx-react-native.symbols

@@ -0,0 +1,11 @@
+=== tests/cases/compiler/es3-jsx-react-native.tsx ===
+
+const React: any = null;
+>React : Symbol(React, Decl(es3-jsx-react-native.tsx, 1, 5))
+
+const elem = <div></div>;
+>elem : Symbol(elem, Decl(es3-jsx-react-native.tsx, 3, 5))
+>div : Symbol(unknown)
+>div : Symbol(unknown)
+
+

tests/baselines/reference/es3-jsx-react-native.types

@@ -0,0 +1,13 @@
+=== tests/cases/compiler/es3-jsx-react-native.tsx ===
+
+const React: any = null;
+>React : any
+>null : null
+
+const elem = <div></div>;
+>elem : any
+><div></div> : any
+>div : any
+>div : any
+
+

tests/baselines/reference/es3-jsx-react.js

@@ -0,0 +1,11 @@
+//// [es3-jsx-react.tsx]
+
+const React: any = null;
+
+const elem = <div></div>;
+
+
+
+//// [es3-jsx-react.js]
+var React = null;
+var elem = React.createElement("div", null);

tests/baselines/reference/es3-jsx-react.symbols

@@ -0,0 +1,11 @@
+=== tests/cases/compiler/es3-jsx-react.tsx ===
+
+const React: any = null;
+>React : Symbol(React, Decl(es3-jsx-react.tsx, 1, 5))
+
+const elem = <div></div>;
+>elem : Symbol(elem, Decl(es3-jsx-react.tsx, 3, 5))
+>div : Symbol(unknown)
+>div : Symbol(unknown)
+
+

tests/baselines/reference/es3-jsx-react.types

@@ -0,0 +1,13 @@
+=== tests/cases/compiler/es3-jsx-react.tsx ===
+
+const React: any = null;
+>React : any
+>null : null
+
+const elem = <div></div>;
+>elem : any
+><div></div> : any
+>div : any
+>div : any
+
+

tests/baselines/reference/getEmitOutputTsxFile_ReactNative.baseline

@@ -0,0 +1,26 @@
+EmitSkipped: false
+FileName : /tests/cases/fourslash/inputFile1.js.map
+{"version":3,"file":"inputFile1.js","sourceRoot":"","sources":["inputFile1.ts"],"names":[],"mappings":"AAAA,kBAAkB;AACjB,IAAI,CAAC,GAAW,CAAC,CAAC;AAClB;IAAA;IAGA,CAAC;IAAD,UAAC;AAAD,CAAC,AAHD,IAGC"}FileName : /tests/cases/fourslash/inputFile1.js
+// regular ts file
+var t = 5;
+var Bar = (function () {
+    function Bar() {
+    }
+    return Bar;
+}());
+//# sourceMappingURL=inputFile1.js.mapFileName : /tests/cases/fourslash/inputFile1.d.ts
+declare var t: number;
+declare class Bar {
+    x: string;
+    y: number;
+}
+
+EmitSkipped: false
+FileName : /tests/cases/fourslash/inputFile2.js.map
+{"version":3,"file":"inputFile2.js","sourceRoot":"","sources":["inputFile2.tsx"],"names":[],"mappings":"AAAA,IAAI,CAAC,GAAG,QAAQ,CAAC;AACjB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,EAAG,CAAA"}FileName : /tests/cases/fourslash/inputFile2.js
+var y = "my div";
+var x = <div name={y}/>;
+//# sourceMappingURL=inputFile2.js.mapFileName : /tests/cases/fourslash/inputFile2.d.ts
+declare var y: string;
+declare var x: any;
+

tests/cases/compiler/es3-jsx-preserve.tsx

@@ -0,0 +1,9 @@
+// @target: ES3
+// @sourcemap: false
+// @declaration: false
+// @jsx: preserve
+
+const React: any = null;
+
+const elem = <div></div>;
+

tests/cases/compiler/es3-jsx-react-native.tsx

@@ -0,0 +1,9 @@
+// @target: ES3
+// @sourcemap: false
+// @declaration: false
+// @jsx: react-native
+
+const React: any = null;
+
+const elem = <div></div>;
+

tests/cases/compiler/es3-jsx-react.tsx

@@ -0,0 +1,9 @@
+// @target: ES3
+// @sourcemap: false
+// @declaration: false
+// @jsx: react
+
+const React: any = null;
+
+const elem = <div></div>;
+

tests/cases/fourslash/getEmitOutputTsxFile_ReactNative.ts

@@ -0,0 +1,22 @@
+/// <reference path="fourslash.ts" />
+
+// @BaselineFile: getEmitOutputTsxFile_ReactNative.baseline
+// @declaration: true
+// @sourceMap: true
+// @jsx: react-native
+
+// @Filename: inputFile1.ts
+// @emitThisFile: true
+////// regular ts file
+//// var t: number = 5;
+//// class Bar {
+////    x : string;
+////    y : number
+//// }
+
+// @Filename: inputFile2.tsx
+// @emitThisFile: true
+//// var y = "my div";
+//// var x = <div name= {y} />
+
+verify.baselineGetEmitOutput();