[RFC] fix #270, support appendTsSuffixTo config

package.json

@@ -60,6 +60,8 @@
     "rimraf": "^2.4.2",
     "typescript": "^2.0.3",
     "typings": "^1.4.0",
+    "vue": "^2.0.3",
+    "vue-loader": "^9.7.0",
     "webpack": "^1.11.0"
   }
 }

src/index.ts

@@ -14,9 +14,9 @@ const definitionFileRegex = /\.d\.ts$/;
 function loader(this: interfaces.Webpack, contents: string) {
     this.cacheable && this.cacheable();
     const callback = this.async();
-    const filePath = path.normalize(this.resourcePath);
-
     const options = makeOptions(this);
+    const rawFilePath = path.normalize(this.resourcePath);
+    const filePath = utils.appendTsSuffixIfMatch(options.appendTsSuffixTo, rawFilePath);
 
     const { instance, error } = instances.ensureTypeScriptInstance(options, this);
 
@@ -58,6 +58,7 @@ function makeOptions(loader: interfaces.Webpack) {
         configFileName: 'tsconfig.json',
         transpileOnly: false,
         compilerOptions: {},
+        appendTsSuffixTo: [],
     }, configFileOptions, queryOptions);
     options.ignoreDiagnostics = arrify(options.ignoreDiagnostics).map(Number);
     options.logLevel = options.logLevel.toUpperCase();

src/instances.ts

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

src/interfaces.ts

@@ -85,7 +85,7 @@ export interface Resolve {
     /**
      * The directory (absolute path) that contains your modules.
      * May also be an array of directories.
-     * This setting should be used to add individual directories to the search path. 
+     * This setting should be used to add individual directories to the search path.
      */
     root?: string | string[];
     /**
@@ -153,6 +153,7 @@ export interface LoaderOptions {
     transpileOnly: boolean;
     ignoreDiagnostics: number[];
     compilerOptions: typescript.CompilerOptions;
+    appendTsSuffixTo: RegExp[];
 }
 
 export interface TSFile {

src/servicesHost.ts

@@ -13,7 +13,8 @@ function makeServicesHost(
     scriptRegex: RegExp,
     log: logger.Logger,
     loader: interfaces.Webpack,
-    instance: interfaces.TSInstance
+    instance: interfaces.TSInstance,
+    appendTsSuffixTo: RegExp[]
 ) {
     const { compiler, compilerOptions, files } = instance;
 
@@ -77,6 +78,7 @@ function makeServicesHost(
 
                 try {
                     resolvedFileName = resolver.resolveSync(path.normalize(path.dirname(containingFile)), moduleName);
+                    resolvedFileName = utils.appendTsSuffixIfMatch(appendTsSuffixTo, resolvedFileName);
 
                     if (!resolvedFileName.match(scriptRegex)) {
                         resolvedFileName = null;

src/utils.ts

@@ -71,3 +71,12 @@ export function makeError({ rawMessage, message, location, file }: MakeError): i
 
     return <interfaces.WebpackError> objectAssign(error, { location, file });
 }
+
+export function appendTsSuffixIfMatch(patterns: RegExp[], path: string): string {
+    for (let regexp of patterns) {
+      if (regexp.test(path)) {
+        return path + '.ts';
+      }
+    }
+    return path;
+}

test/comparison-tests/vue/component.vue

@@ -0,0 +1,10 @@
+<template><p>Hello from {{msg}}</p></template>
+<script>
+export default {
+  data(): Object {
+    return {
+      msg: "component"
+    }
+  }
+}
+</script>

test/comparison-tests/vue/expectedOutput-2.0/bundle.js

@@ -0,0 +1,207 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+
+	/* script */
+	__vue_exports__ = __webpack_require__(1)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(6)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/ts-loader/.test/vue/index.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+
+	/* hot reload */
+	if (false) {(function () {
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  module.hot.accept()
+	  if (!module.hot.data) {
+	    hotAPI.createRecord("data-v-1e83055b", __vue_options__)
+	  } else {
+	    hotAPI.reload("data-v-1e83055b", __vue_options__)
+	  }
+	})()}
+	if (__vue_options__.functional) {console.error("[vue-loader] index.vue: functional components are not supported and should be defined in plain js files using render functions.")}
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	//
+	"use strict";
+	var component_vue_1 = __webpack_require__(2);
+	var helper_1 = __webpack_require__(5);
+	exports.__esModule = true;
+	exports["default"] = {
+	    components: { component: component_vue_1["default"] },
+	    data: function () {
+	        return {
+	            msg: "world"
+	        };
+	    },
+	    method: {
+	        myMethod: helper_1.myMethod
+	    }
+	};
+
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+
+	/* script */
+	__vue_exports__ = __webpack_require__(3)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(4)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/ts-loader/.test/vue/component.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+
+	/* hot reload */
+	if (false) {(function () {
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  module.hot.accept()
+	  if (!module.hot.data) {
+	    hotAPI.createRecord("data-v-6043e8f4", __vue_options__)
+	  } else {
+	    hotAPI.reload("data-v-6043e8f4", __vue_options__)
+	  }
+	})()}
+	if (__vue_options__.functional) {console.error("[vue-loader] component.vue: functional components are not supported and should be defined in plain js files using render functions.")}
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	//
+	"use strict";
+	exports.__esModule = true;
+	exports["default"] = {
+	    data: function () {
+	        return {
+	            msg: "component"
+	        };
+	    }
+	};
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports={render:function (){with(this) {
+	  return _h('p', ["Hello from " + _s(msg)])
+	}},staticRenderFns: []}
+	if (false) {
+	  module.hot.accept()
+	  if (module.hot.data) {
+	     require("vue-hot-reload-api").rerender("data-v-6043e8f4", module.exports)
+	  }
+	}
+
+/***/ },
+/* 5 */
+/***/ function(module, exports) {
+
+	"use strict";
+	function myMethod() {
+	    console.log('from helper!');
+	}
+	exports.myMethod = myMethod;
+
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports={render:function (){with(this) {
+	  return _h('p', ["hallo " + _s(msg)])
+	}},staticRenderFns: []}
+	if (false) {
+	  module.hot.accept()
+	  if (module.hot.data) {
+	     require("vue-hot-reload-api").rerender("data-v-1e83055b", module.exports)
+	  }
+	}
+
+/***/ }
+/******/ ]);