Feature/preprocessor sourcemaps

.gitignore

@@ -18,10 +18,6 @@ node_modules
 /coverage/
 /coverage.lcov
 /test/*/samples/_
-/test/sourcemaps/samples/*/output.js
-/test/sourcemaps/samples/*/output.js.map
-/test/sourcemaps/samples/*/output.css
-/test/sourcemaps/samples/*/output.css.map
 /yarn-error.log
 _actual*.*
 _output

package.json

@@ -56,6 +56,7 @@
   },
   "homepage": "https://github.com/sveltejs/svelte#README",
   "devDependencies": {
+    "@ampproject/remapping": "^0.3.0",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^4.0.1",
     "@rollup/plugin-node-resolve": "^6.0.0",
@@ -89,6 +90,7 @@
     "rollup": "^1.27.14",
     "source-map": "^0.7.3",
     "source-map-support": "^0.5.13",
+    "sourcemap-codec": "^1.4.8",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",
     "typescript": "^3.5.3"

src/compiler/compile/Component.ts

@@ -29,7 +29,11 @@ import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, x, b } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
+import { combine_sourcemaps, sourcemap_add_tostring_tourl, combine_sourcemaps_map_stats } from '../utils/string_with_sourcemap';
 import Element from './nodes/Element';
+import { RawSourceMap } from '@ampproject/remapping/dist/types/types';
+import { encode as encode_mappings, decode as decode_mappings } from 'sourcemap-codec';
+
 
 interface ComponentOptions {
 	namespace?: string;
@@ -317,19 +321,80 @@ export default class Component {
 
 			css = compile_options.customElement
 				? { code: null, map: null }
-				: result.css;
+				: result.css; // css.map.mappings are decoded
 
 			js = print(program, {
 				sourceMapSource: compile_options.filename
 			});
 
+			// TODO remove workaround
+			// js.map.mappings should be decoded
+			// https://github.com/Rich-Harris/code-red/issues/50
+			if (js.map && typeof (js.map as any).mappings == 'string') {
+				(js.map as any).mappings = decode_mappings((js.map as any).mappings);
+			}
+
 			js.map.sources = [
 				compile_options.filename ? get_relative_path(compile_options.outputFilename || '', compile_options.filename) : null
 			];
 
 			js.map.sourcesContent = [
 				this.source
 			];
+
+			// combine sourcemaps
+			const map_stats: combine_sourcemaps_map_stats = {
+				sourcemapWarnLoss: 0, // segment loss is usually high, so we ignore
+				sourcemapEncodedWarn: true // TODO config
+				// property `result` is set by combine_sourcemaps
+			};
+
+			if (compile_options.sourcemap) {
+				if (js.map) {
+					js.map = combine_sourcemaps(
+						this.file,
+						[
+							js.map, // idx 1: internal
+							compile_options.sourcemap // idx 0: external: svelte.preprocess, etc
+						],
+						map_stats
+					) as RawSourceMap;
+					sourcemap_add_tostring_tourl(js.map);
+					if (map_stats.result && map_stats.result.maps_encoded && map_stats.result.maps_encoded.length > 0) {
+						console.log('warning. svelte.compile received encoded script sourcemaps (index '+
+							map_stats.result.maps_encoded.join(', ')+'). '+
+							'this is slow. make your sourcemap-generators return decoded mappings '+
+							'or disable this warning with svelte.compile(_, _, { sourcemapEncodedWarn: false })'
+						);
+					}
+				}
+				if (css.map) {
+					css.map = combine_sourcemaps(
+						this.file,
+						[
+							css.map, // idx 1: internal
+							compile_options.sourcemap // idx 0: external: svelte.preprocess, etc
+						]
+					) as RawSourceMap;
+					sourcemap_add_tostring_tourl(css.map);
+					if (map_stats.result && map_stats.result.maps_encoded && map_stats.result.maps_encoded.length > 0) {
+						console.log('warning. svelte.compile received encoded style sourcemaps (index '+
+							map_stats.result.maps_encoded.join(', ')+'). '+
+							'this is slow. make your sourcemap-generators return decoded mappings '+
+							'or disable this warning with svelte.compile(_, _, { sourcemapEncodedWarn: false })'
+						);
+					}
+				}
+			}
+
+			// encode mappings only once, after all sourcemaps are combined
+			if (js.map && typeof(js.map.mappings) == 'object') {
+				(js.map as RawSourceMap).mappings = encode_mappings(js.map.mappings);
+			}
+			if (css.map && typeof(css.map.mappings) == 'object') {
+				(css.map as RawSourceMap).mappings = encode_mappings(css.map.mappings);
+			}
+
 		}
 
 		return {

src/compiler/compile/css/Stylesheet.ts

@@ -410,7 +410,7 @@ export default class Stylesheet {
 
 		return {
 			code: code.toString(),
-			map: code.generateMap({
+			map: code.generateDecodedMap({
 				includeContent: true,
 				source: this.filename,
 				file

src/compiler/compile/index.ts

@@ -12,6 +12,7 @@ const valid_options = [
 	'format',
 	'name',
 	'filename',
+	'sourcemap',
 	'generate',
 	'outputFilename',
 	'cssOutputFilename',

src/compiler/compile/render_dom/index.ts

@@ -30,8 +30,12 @@ export default function dom(
 	}
 
 	const css = component.stylesheet.render(options.filename, !options.customElement);
+
+	// TODO fix css.map.toUrl - stylesheet.render returns decoded mappings, map.toUrl needs encoded mappings
+	// TODO use combined css.map? see compile/Component.ts
 	const styles = component.stylesheet.has_styles && options.dev
-		? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */`
+		//? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */`
+		? `${css.code}\n/*# sourceMappingURL=TODO_FIXME */`
 		: css.code;
 
 	const add_css = component.get_unique_name('add_css');
@@ -467,12 +471,15 @@ export default function dom(
 	}
 
 	if (options.customElement) {
+		// TODO use combined css.map? see compile/Component.ts
+		// TODO css.map.toUrl needs encoded mappings
+		//			${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 		const declaration = b`
 			class ${name} extends @SvelteElement {
 				constructor(options) {
 					super();
 
-					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=TODO_FIXME */` : ''}</style>\`;`}
 
 					@init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 

src/compiler/compile/render_ssr/index.ts

@@ -137,6 +137,7 @@ export default function ssr(
 		main
 	].filter(Boolean);
 
+	// TODO use combined css.map? see compile/Component.ts
 	const js = b`
 		${css.code ? b`
 		const #css = {

src/compiler/interfaces.ts

@@ -1,5 +1,7 @@
 import { Node, Program } from "estree";
-import { SourceMap } from 'magic-string';
+
+// eslint-disable-next-line import/named
+import { DecodedSourceMap } from 'magic-string';
 
 interface BaseNode {
 	start: number;
@@ -110,6 +112,7 @@ export interface CompileOptions {
 	filename?: string;
 	generate?: 'dom' | 'ssr' | false;
 
+	sourcemap?: object | string;
 	outputFilename?: string;
 	cssOutputFilename?: string;
 	sveltePath?: string;
@@ -165,5 +168,5 @@ export interface Var {
 
 export interface CssResult { 
 	code: string;
-	map: SourceMap;
+	map: DecodedSourceMap;
 }