fix(source-maps): use detailed source-map as default, fix windows path issue

danbucholtz · danbucholtz · commit 19464b3a82ce · 2016-12-09T21:12:44.000-06:00
diff --git a/src/util/config.ts b/src/util/config.ts
@@ -3,6 +3,8 @@ import { BuildContext, TaskInfo } from './interfaces';
 import { join, resolve } from 'path';
 import { objectAssign } from './helpers';
 import { FileCache } from './file-cache';
+import { SOURCE_MAP_TYPE_EXPENSIVE } from './constants';
+
 /**
  * Create a context object which is used by all the build tasks.
  * Filling the config data uses the following hierarchy, which will
@@ -23,6 +25,36 @@ export function generateContext(context?: BuildContext): BuildContext {
     context.fileCache = new FileCache();
   }
 
+  context.isProd = [
+    context.isProd,
+    hasArg('--prod')
+  ].find(val => typeof val === 'boolean');
+
+  // If context is prod then the following flags must be set to true
+  context.runAot = [
+    context.runAot,
+    context.isProd || hasArg('--aot'),
+  ].find(val => typeof val === 'boolean');
+
+  context.runMinifyJs = [
+    context.runMinifyJs,
+    context.isProd || hasArg('--minifyJs')
+  ].find(val => typeof val === 'boolean');
+
+  context.runMinifyCss = [
+    context.runMinifyCss,
+    context.isProd || hasArg('--minifyCss')
+  ].find(val => typeof val === 'boolean');
+
+  context.optimizeJs = [
+    context.optimizeJs,
+    context.isProd || hasArg('--optimizeJs')
+  ].find(val => typeof val === 'boolean');
+
+  if (typeof context.isWatch !== 'boolean') {
+    context.isWatch = hasArg('--watch');
+  }
+
   context.rootDir = resolve(context.rootDir || getConfigValue(context, '--rootDir', null, ENV_VAR_ROOT_DIR, ENV_VAR_ROOT_DIR.toLowerCase(), processCwd));
   setProcessEnvVar(ENV_VAR_ROOT_DIR, context.rootDir);
 
@@ -42,53 +74,47 @@ export function generateContext(context?: BuildContext): BuildContext {
 
   setProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR, join(__dirname, '..', '..'));
 
-  const sourceMapValue = getConfigValue(context, '--sourceMap', null, ENV_VAR_SOURCE_MAP, ENV_VAR_SOURCE_MAP.toLowerCase(), 'eval');
-  setProcessEnvVar(ENV_VAR_SOURCE_MAP, sourceMapValue);
+  const generateSourceMap = getConfigValue(context, '--generateSourceMap', null, ENV_VAR_GENERATE_SOURCE_MAP, ENV_VAR_GENERATE_SOURCE_MAP.toLowerCase(), context.isProd || context.runMinifyJs ? null : 'true');
+  setProcessEnvVar(ENV_VAR_GENERATE_SOURCE_MAP, generateSourceMap);
 
-  const tsConfigPathValue = getConfigValue(context, '--tsconfigPath', null, ENV_TS_CONFIG_PATH, ENV_TS_CONFIG_PATH.toLowerCase(), join(context.rootDir, 'tsconfig.json'));
-  setProcessEnvVar(ENV_TS_CONFIG_PATH, tsConfigPathValue);
+  const sourceMapTypeValue = getConfigValue(context, '--sourceMapType', null, ENV_VAR_SOURCE_MAP_TYPE, ENV_VAR_SOURCE_MAP_TYPE.toLowerCase(), SOURCE_MAP_TYPE_EXPENSIVE);
+  setProcessEnvVar(ENV_VAR_SOURCE_MAP_TYPE, sourceMapTypeValue);
 
-  const appEntryPointPathValue = getConfigValue(context, '--appEntryPointPath', null, ENV_APP_ENTRY_POINT_PATH, ENV_APP_ENTRY_POINT_PATH.toLowerCase(), join(context.srcDir, 'app', 'main.ts'));
-  setProcessEnvVar(ENV_APP_ENTRY_POINT_PATH, appEntryPointPathValue);
+  const tsConfigPathValue = getConfigValue(context, '--tsconfig', null, ENV_TS_CONFIG, ENV_TS_CONFIG.toLowerCase(), join(context.rootDir, 'tsconfig.json'));
+  setProcessEnvVar(ENV_TS_CONFIG, tsConfigPathValue);
 
-  const pathToGlobUtils = getConfigValue(context, '--pathToGlobUtils', null, ENV_PATH_TO_GLOB_UTILS, ENV_PATH_TO_GLOB_UTILS.toLowerCase(), join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'dist', 'util', 'glob-util.js'));
-  setProcessEnvVar(ENV_PATH_TO_GLOB_UTILS, pathToGlobUtils);
+  const appEntryPointPathValue = getConfigValue(context, '--appEntryPoint', null, ENV_APP_ENTRY_POINT, ENV_APP_ENTRY_POINT.toLowerCase(), join(context.srcDir, 'app', 'main.ts'));
+  setProcessEnvVar(ENV_APP_ENTRY_POINT, appEntryPointPathValue);
+
+  const pathToGlobUtils = getConfigValue(context, '--pathToGlobUtils', null, ENV_GLOB_UTIL, ENV_GLOB_UTIL.toLowerCase(), join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'dist', 'util', 'glob-util.js'));
+  setProcessEnvVar(ENV_GLOB_UTIL, pathToGlobUtils);
 
   const cleanBeforeCopy = getConfigValue(context, '--cleanBeforeCopy', null, ENV_CLEAN_BEFORE_COPY, ENV_CLEAN_BEFORE_COPY.toLowerCase(), null);
   setProcessEnvVar(ENV_CLEAN_BEFORE_COPY, cleanBeforeCopy);
 
-  if (!isValidBundler(context.bundler)) {
-    context.bundler = bundlerStrategy(context);
-  }
+  const pathToClosureJar = getConfigValue(context, '--pathToClosureJar', null, ENV_CLOSURE_JAR, ENV_CLOSURE_JAR.toLowerCase(), join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'bin', 'closure-compiler.jar'));
+  setProcessEnvVar(ENV_CLOSURE_JAR, pathToClosureJar);
 
-  context.isProd = [
-    context.isProd,
-    hasArg('--prod')
-  ].find(val => typeof val === 'boolean');
+  const outputJsFileName = getConfigValue(context, '--outputJsFileName', null, ENV_OUTPUT_JS_FILE_NAME, ENV_OUTPUT_JS_FILE_NAME.toLowerCase(), 'main.js');
+  setProcessEnvVar(ENV_OUTPUT_JS_FILE_NAME, outputJsFileName);
 
-  // If context is prod then the following flags must be set to true
-  context.runAot = [
-    context.runAot,
-    context.isProd || hasArg('--aot'),
-  ].find(val => typeof val === 'boolean');
+  const outputJsMapFileName = getConfigValue(context, '--outputJsMapFileName', null, ENV_OUTPUT_JS_MAP_FILE_NAME, ENV_OUTPUT_JS_MAP_FILE_NAME.toLowerCase(), 'main.js.map');
+  setProcessEnvVar(ENV_OUTPUT_JS_MAP_FILE_NAME, outputJsMapFileName);
 
-  context.runMinifyJs = [
-    context.runMinifyJs,
-    context.isProd || hasArg('--minifyJs')
-  ].find(val => typeof val === 'boolean');
+  const outputCssFileName = getConfigValue(context, '--outputCssFileName', null, ENV_OUTPUT_CSS_FILE_NAME, ENV_OUTPUT_CSS_FILE_NAME.toLowerCase(), 'main.css');
+  setProcessEnvVar(ENV_OUTPUT_CSS_FILE_NAME, outputCssFileName);
 
-  context.runMinifyCss = [
-    context.runMinifyCss,
-    context.isProd || hasArg('--minifyCss')
-  ].find(val => typeof val === 'boolean');
+  const outputCssMapFileName = getConfigValue(context, '--outputCssMapFileName', null, ENV_OUTPUT_CSS_MAP_FILE_NAME, ENV_OUTPUT_CSS_MAP_FILE_NAME.toLowerCase(), 'main.css.map');
+  setProcessEnvVar(ENV_OUTPUT_CSS_MAP_FILE_NAME, outputCssMapFileName);
 
-  context.optimizeJs = [
-    context.optimizeJs,
-    context.isProd || hasArg('--optimizeJs')
-  ].find(val => typeof val === 'boolean');
+  const webpackFactoryPath = getConfigValue(context, '--webpackFactoryPath', null, ENV_WEBPACK_FACTORY, ENV_WEBPACK_FACTORY.toLowerCase(), join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'dist', 'webpack', 'ionic-webpack-factory.js'));
+  setProcessEnvVar(ENV_WEBPACK_FACTORY, webpackFactoryPath);
 
-  if (typeof context.isWatch !== 'boolean') {
-    context.isWatch = hasArg('--watch');
+  const ionicTypescriptLoaderPath = getConfigValue(context, '--ionicTypescriptLoaderPath', null, ENV_WEBPACK_LOADER, ENV_WEBPACK_LOADER.toLowerCase(), join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'dist', 'webpack', 'typescript-sourcemap-loader-memory.js'));
+  setProcessEnvVar(ENV_WEBPACK_LOADER, ionicTypescriptLoaderPath);
+
+  if (!isValidBundler(context.bundler)) {
+    context.bundler = bundlerStrategy(context);
   }
 
   context.inlineTemplates = true;
@@ -399,11 +425,19 @@ const ENV_VAR_SRC_DIR = 'IONIC_SRC_DIR';
 const ENV_VAR_WWW_DIR = 'IONIC_WWW_DIR';
 const ENV_VAR_BUILD_DIR = 'IONIC_BUILD_DIR';
 const ENV_VAR_APP_SCRIPTS_DIR = 'IONIC_APP_SCRIPTS_DIR';
-const ENV_VAR_SOURCE_MAP = 'IONIC_SOURCE_MAP';
-const ENV_TS_CONFIG_PATH = 'IONIC_TS_CONFIG_PATH';
-const ENV_APP_ENTRY_POINT_PATH = 'IONIC_APP_ENTRY_POINT_PATH';
-const ENV_PATH_TO_GLOB_UTILS = 'IONIC_PATH_TO_GLOB_UTILS';
+const ENV_VAR_GENERATE_SOURCE_MAP = 'IONIC_GENERATE_SOURCE_MAP';
+const ENV_VAR_SOURCE_MAP_TYPE = 'IONIC_SOURCE_MAP_TYPE';
+const ENV_TS_CONFIG = 'IONIC_TS_CONFIG';
+const ENV_APP_ENTRY_POINT = 'IONIC_APP_ENTRY_POINT';
+const ENV_GLOB_UTIL = 'IONIC_GLOB_UTIL';
 const ENV_CLEAN_BEFORE_COPY = 'IONIC_CLEAN_BEFORE_COPY';
+const ENV_CLOSURE_JAR = 'IONIC_CLOSURE_JAR';
+const ENV_OUTPUT_JS_FILE_NAME = 'IONIC_OUTPUT_JS_FILE_NAME';
+const ENV_OUTPUT_JS_MAP_FILE_NAME = 'IONIC_OUTPUT_JS_MAP_FILE_NAME';
+const ENV_OUTPUT_CSS_FILE_NAME = 'IONIC_OUTPUT_CSS_FILE_NAME';
+const ENV_OUTPUT_CSS_MAP_FILE_NAME = 'IONIC_OUTPUT_CSS_MAP_FILE_NAME';
+const ENV_WEBPACK_FACTORY = 'IONIC_WEBPACK_FACTORY';
+const ENV_WEBPACK_LOADER = 'IONIC_WEBPACK_LOADER';
 
 export const BUNDLER_ROLLUP = 'rollup';
 export const BUNDLER_WEBPACK = 'webpack';
diff --git a/src/util/constants.ts b/src/util/constants.ts
@@ -4,3 +4,5 @@ export const FILE_DELETE_EVENT = 'unlink';
 export const DIRECTORY_ADD_EVENT = 'addDir';
 export const DIRECTORY_DELETE_EVENT = 'unlinkDir';
 
+export const SOURCE_MAP_TYPE_CHEAP = 'eval';
+export const SOURCE_MAP_TYPE_EXPENSIVE = 'source-map';
diff --git a/src/util/glob-util.ts b/src/util/glob-util.ts
@@ -1,5 +1,7 @@
-import * as globFunction from 'glob';
 import { dirname, isAbsolute, join, normalize, resolve as pathResolve, sep } from 'path';
+import * as globFunction from 'glob';
+import { toUnixPath } from './helpers';
+
 
 function isNegative(pattern: string) {
   return pattern[0] === '!';
@@ -114,7 +116,7 @@ function isNegatedGlob(pattern: string) {
 
 // https://github.com/jonschlinkert/to-absolute-glob/blob/master/index.js
 function toAbsoluteGlob(pattern: string) {
-  const cwd = unixify(process.cwd());
+  const cwd = toUnixPath(process.cwd());
 
   // trim starting ./ from glob patterns
   if (pattern.slice(0, 2) === './') {
@@ -146,10 +148,6 @@ function toAbsoluteGlob(pattern: string) {
   return ing.negated ? '!' + pattern : pattern;
 }
 
-function unixify(filePath: string) {
-  return filePath.replace(/\\/g, '/');
-}
-
 // https://github.com/es128/glob-parent/blob/master/index.js
 function globParent(pattern: string) {
 	// special case for strings ending in enclosure containing path separator
@@ -160,7 +158,7 @@ function globParent(pattern: string) {
 
 	// remove path parts that are globby
   do {
-    pattern = unixify(dirname(pattern));
+    pattern = toUnixPath(dirname(pattern));
   }
 
   while (isGlob(pattern) || /(^|[^\\])([\{\[]|\([^\)]+$)/.test(pattern));
diff --git a/src/util/helpers.ts b/src/util/helpers.ts
@@ -203,3 +203,7 @@ export function rangeReplace(source: string, startIndex: number, endIndex: numbe
 export function stringSplice(source: string, startIndex: number, numToDelete: number, newContent: string) {
   return source.slice(0, startIndex) + newContent + source.slice(startIndex + Math.abs(numToDelete));
 }
+
+export function toUnixPath(filePath: string) {
+  return filePath.replace(/\\/g, '/');
+}
diff --git a/src/webpack/source-mapper.ts b/src/webpack/source-mapper.ts
@@ -1,6 +1,7 @@
 import { BuildContext } from '../util/interfaces';
-import { getContext} from '../util/helpers';
-import { normalize, resolve, sep } from 'path';
+import { getContext, toUnixPath} from '../util/helpers';
+import { join, normalize, relative, resolve, sep } from 'path';
+import { SOURCE_MAP_TYPE_CHEAP } from '../util/constants';
 
 export function provideCorrectSourcePath(webpackObj: any) {
   const context = getContext();
@@ -11,9 +12,13 @@ function provideCorrectSourcePathInternal(webpackObj: any, context: BuildContext
   const webpackResourcePath = webpackObj.resourcePath;
   const noTilde = webpackResourcePath.replace(/~/g, 'node_modules');
   const absolutePath = resolve(normalize(noTilde));
-  if (process.env.IONIC_SOURCE_MAP === 'eval') {
-    // add another path.sep to the front to account for weird webpack behavior
-    return sep + absolutePath;
+  if (process.env.IONIC_SOURCE_MAP_TYPE === SOURCE_MAP_TYPE_CHEAP) {
+    const mapPath = sep + absolutePath;
+    return toUnixPath(mapPath);
   }
-  return absolutePath;
-}
+  // does the full map
+  const backPath = relative(context.buildDir, context.rootDir);
+  const relativePath = relative(context.rootDir, absolutePath);
+  const relativeToBuildDir = join(backPath, relativePath);
+  return toUnixPath(relativeToBuildDir);
+}

Original file line number	Diff line number	Diff line change
`@@ -203,3 +203,7 @@ export function rangeReplace(source: string, startIndex: number, endIndex: numbe`
`203`	`203`	`export function stringSplice(source: string, startIndex: number, numToDelete: number, newContent: string) {`
`204`	`204`	`return source.slice(0, startIndex) + newContent + source.slice(startIndex + Math.abs(numToDelete));`
`205`	`205`	`}`
	`206`	`+`
	`207`	`+export function toUnixPath(filePath: string) {`
	`208`	`+ return filePath.replace(/\\/g, '/');`
	`209`	`+}`