add appendTsxSuffixTo option

README.md

@@ -235,7 +235,8 @@ of your code.
 To be used in concert with the `allowJs` compiler option. If your entry file is JS then you'll need to set this option to true.  Please note that this is rather unusual and will generally not be necessary when using `allowJs`.
 
 #### appendTsSuffixTo *(RegExp[]) (default=[])*
-A list of regular expressions to be matched against filename. If filename matches one of the regular expressions, a `.ts` suffix will be appended to that filename.
+#### appendTsxSuffixTo *(RegExp[]) (default=[])*
+A list of regular expressions to be matched against filename. If filename matches one of the regular expressions, a `.ts` or `.tsx` suffix will be appended to that filename.
 
 This is useful for `*.vue` [file format](https://vuejs.org/v2/guide/single-file-components.html) for now. (Probably will benefit from the new single file format in the future.)
 
@@ -274,6 +275,58 @@ export default {
 </script>
 ```
 
+We can use .vuex to handle tsx (set `jsx` option in `tsconfig.json` to `preserve` to let babel handle jsx):
+
+webpack.config.js:
+
+```javascript
+module.exports = {
+    entry: './index.vue',
+    output: { filename: 'bundle.js' },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.vue', '.vuex']
+    },
+    module: {
+        rules: [
+            { test: /\.vue$/, loader: 'vue-loader' },
+            { test: /\.vuex$/, loader: 'vue-loader',
+              options: {
+                loaders: {
+                  tsx: 'babel-loader!ts-loader',
+                }
+              }
+            },
+            { test: /\.ts$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/], appendTsxSuffixTo: [/\.vuex$/] } }
+            { test: /\.tsx$/, loader: 'babel-loader!ts-loader', options: { appendTsSuffixTo: [/\.vue$/], appendTsxSuffixTo: [/\.vuex$/] } }
+        ]
+    } 
+}
+```
+
+tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}
+```
+
+index.vue
+
+```vue
+<script lang="tsx">
+export default {
+  functional: true,
+  render(h, c) {
+    return (<div>Content</div>);
+  }
+}
+</script>
+```
+
+
 ### `LoaderOptionsPlugin`
 
 [There's a known "gotcha"](https://github.com/TypeStrong/ts-loader/issues/283) if you are using webpack 2 with the `LoaderOptionsPlugin`.  If you are faced with the `Cannot read property 'unsafeCache' of undefined` error then you probably need to supply a `resolve` object as below: (Thanks @jeffijoe!)

src/index.ts

@@ -26,7 +26,8 @@ function loader(this: interfaces.Webpack, contents: string) {
     }
 
     const rawFilePath = path.normalize(this.resourcePath);
-    const filePath = utils.appendTsSuffixIfMatch(options.appendTsSuffixTo, rawFilePath);
+    let filePath = utils.appendTsSuffixIfMatch(options.appendTsSuffixTo, rawFilePath);
+    filePath = utils.appendTsxSuffixIfMatch(options.appendTsxSuffixTo, filePath);
     const fileVersion = updateFileInCache(filePath, contents, instance);
 
     const { outputText, sourceMapText } = options.transpileOnly
@@ -83,6 +84,7 @@ function getLoaderOptions(loader: interfaces.Webpack) {
         visualStudioErrorFormat: false,
         compilerOptions: {},
         appendTsSuffixTo: [],
+        appendTsxSuffixTo: [],
         transformers: {},
         entryFileIsJs: false,
         happyPackMode: false,

src/instances.ts

@@ -110,7 +110,7 @@ export function getTypeScriptInstance(
         modifiedFiles: null,
     };
 
-    const servicesHost = makeServicesHost(scriptRegex, log, loader, instance, loaderOptions.appendTsSuffixTo);
+    const servicesHost = makeServicesHost(scriptRegex, log, loader, instance, loaderOptions.appendTsSuffixTo, loaderOptions.appendTsxSuffixTo);
     instance.languageService = compiler.createLanguageService(servicesHost, compiler.createDocumentRegistry());
 
     loader._compiler.plugin("after-compile", afterCompile(instance, configFilePath));

src/interfaces.ts

@@ -254,6 +254,7 @@ export interface LoaderOptions {
     visualStudioErrorFormat: boolean;
     compilerOptions: typescript.CompilerOptions;
     appendTsSuffixTo: RegExp[];
+    appendTsxSuffixTo: RegExp[];
     entryFileIsJs: boolean;
     happyPackMode: boolean;
     getCustomTransformers?(): typescript.CustomTransformers | undefined;

src/servicesHost.ts

@@ -14,7 +14,8 @@ function makeServicesHost(
     log: logger.Logger,
     loader: interfaces.Webpack,
     instance: interfaces.TSInstance,
-    appendTsSuffixTo: RegExp[]
+    appendTsSuffixTo: RegExp[],
+    appendTsxSuffixTo: RegExp[]
 ) {
     const { compiler, compilerOptions, files } = instance;
 
@@ -77,7 +78,7 @@ function makeServicesHost(
         log: log.log,
         resolveModuleNames: (moduleNames: string[], containingFile: string) =>
             resolveModuleNames(
-                resolveSync, moduleResolutionHost, appendTsSuffixTo, scriptRegex, instance,
+                resolveSync, moduleResolutionHost, appendTsSuffixTo, appendTsxSuffixTo, scriptRegex, instance,
                 moduleNames, containingFile),
         getCustomTransformers: () => instance.transformers
     };
@@ -87,13 +88,14 @@ function resolveModuleNames(
     resolveSync: interfaces.ResolveSync,
     moduleResolutionHost: interfaces.ModuleResolutionHost,
     appendTsSuffixTo: RegExp[],
+    appendTsxSuffixTo: RegExp[],
     scriptRegex: RegExp,
     instance: interfaces.TSInstance,
     moduleNames: string[],
     containingFile: string
 ) {
     const resolvedModules = moduleNames.map(moduleName =>
-        resolveModuleName(resolveSync, moduleResolutionHost, appendTsSuffixTo, scriptRegex, instance,
+        resolveModuleName(resolveSync, moduleResolutionHost, appendTsSuffixTo, appendTsxSuffixTo, scriptRegex, instance,
             moduleName, containingFile)
     );
 
@@ -106,6 +108,7 @@ function resolveModuleName(
     resolveSync: interfaces.ResolveSync,
     moduleResolutionHost: interfaces.ModuleResolutionHost,
     appendTsSuffixTo: RegExp[],
+    appendTsxSuffixTo: RegExp[],
     scriptRegex: RegExp,
     instance: interfaces.TSInstance,
 
@@ -118,7 +121,8 @@ function resolveModuleName(
 
     try {
         const originalFileName = resolveSync(undefined, path.normalize(path.dirname(containingFile)), moduleName);
-        const resolvedFileName = utils.appendTsSuffixIfMatch(appendTsSuffixTo, originalFileName);
+        let resolvedFileName = utils.appendTsSuffixIfMatch(appendTsSuffixTo, originalFileName);
+        resolvedFileName = utils.appendTsxSuffixIfMatch(appendTsxSuffixTo, resolvedFileName);
 
         if (resolvedFileName.match(scriptRegex)) {
             resolutionResult = { resolvedFileName, originalFileName };

src/utils.ts

@@ -88,6 +88,17 @@ export function appendTsSuffixIfMatch(patterns: RegExp[], path: string): string
     return path;
 }
 
+export function appendTsxSuffixIfMatch(patterns: RegExp[], path: string): string {
+    if (patterns.length > 0) {
+        for (let regexp of patterns) {
+            if (path.match(regexp)) {
+                return path + '.tsx';
+            }
+        }
+    }
+    return path;
+}
+
 /**
  * Recursively collect all possible dependants of passed file
  */

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/expectedOutput-2.0/output.txt

@@ -8,5 +8,5 @@ Module build failed: Error: Typescript emitted no output for node_modules/a/inde
 You should not need to recompile .ts files in node_modules.
 Please contact the package author to advise them to use --declaration --outDir.
 More https://github.com/Microsoft/TypeScript/issues/12358
-    at Object.loader (dist/index.js:31:15)
+    at Object.loader (dist/index.js:33:15)
  @ ./.test/nodeModulesMeaningfulErrorWhenImportingTs/app.ts 2:8-20

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/expectedOutput-2.1/output.txt

@@ -9,5 +9,5 @@ Module build failed: Error: Typescript emitted no output for node_modules/a/inde
 You should not need to recompile .ts files in node_modules.
 Please contact the package author to advise them to use --declaration --outDir.
 More https://github.com/Microsoft/TypeScript/issues/12358
-    at Object.loader (dist/index.js:31:15)
+    at Object.loader (dist/index.js:33:15)
  @ ./.test/nodeModulesMeaningfulErrorWhenImportingTs/app.ts 2:8-20

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/expectedOutput-2.2/output.txt

@@ -9,5 +9,5 @@ Module build failed: Error: Typescript emitted no output for node_modules\a\inde
 You should not need to recompile .ts files in node_modules.
 Please contact the package author to advise them to use --declaration --outDir.
 More https://github.com/Microsoft/TypeScript/issues/12358
-    at Object.loader (dist\index.js:32:15)
+    at Object.loader (dist\index.js:33:15)
  @ ./.test/nodeModulesMeaningfulErrorWhenImportingTs/app.ts 3:8-20

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/expectedOutput-2.3/output.txt

@@ -9,5 +9,5 @@ Module build failed: Error: Typescript emitted no output for node_modules\a\inde
 You should not need to recompile .ts files in node_modules.
 Please contact the package author to advise them to use --declaration --outDir.
 More https://github.com/Microsoft/TypeScript/issues/12358
-    at Object.loader (dist\index.js:32:15)
+    at Object.loader (dist\index.js:33:15)
  @ ./.test/nodeModulesMeaningfulErrorWhenImportingTs/app.ts 3:8-20

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/expectedOutput-2.4/output.txt

@@ -9,5 +9,5 @@ Module build failed: Error: Typescript emitted no output for node_modules\a\inde
 You should not need to recompile .ts files in node_modules.
 Please contact the package author to advise them to use --declaration --outDir.
 More https://github.com/Microsoft/TypeScript/issues/12358
-    at Object.loader (dist\index.js:31:15)
+    at Object.loader (dist\index.js:32:15)
  @ ./.test/nodeModulesMeaningfulErrorWhenImportingTs/app.ts 3:8-20