refactor sourcemap and preprocessor tests (sveltejs#5583)

Co-authored-by: Milan Hauth <milahu@gmail.com>

.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

@@ -37,7 +37,7 @@
     "posttest": "agadoo internal/index.mjs",
     "prepublishOnly": "npm run lint && PUBLISH=true npm test",
     "tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
-    "lint": "eslint '{src,test}/**/*.{ts,js}'"
+    "lint": "eslint \"{src,test}/**/*.{ts,js}\""
   },
   "repository": {
     "type": "git",

test/preprocess/index.ts

@@ -8,16 +8,21 @@ describe('preprocess', () => {
 
 		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
 		const solo = config.solo || /\.solo/.test(dir);
+		const skip = config.skip || /\.skip/.test(dir);
 
 		if (solo && process.env.CI) {
 			throw new Error('Forgot to remove `solo: true` from test');
 		}
 
-		(config.skip ? it.skip : solo ? it.only : it)(dir, async () => {
+		(skip ? it.skip : solo ? it.only : it)(dir, async () => {
 			const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8');
 			const expected = fs.readFileSync(`${__dirname}/samples/${dir}/output.svelte`, 'utf-8');
 
-			const result = await svelte.preprocess(input, config.preprocess);
+			const result = await svelte.preprocess(
+				input,
+				config.preprocess || {},
+				config.options || { filename: 'input.svelte' }
+			);
 			fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, result.code);
 
 			assert.equal(result.code, expected);

test/preprocess/samples/filename/_config.js

@@ -1,6 +1,5 @@
 export default {
 	preprocess: {
-		filename: 'file.svelte',
 		markup: ({ content, filename }) => {
 			return {
 				code: content.replace('__MARKUP_FILENAME__', filename)
@@ -16,5 +15,8 @@ export default {
 				code: content.replace('__SCRIPT_FILENAME__', filename)
 			};
 		}
+	},
+	options: {
+		filename: 'file.svelte'
 	}
 };

test/sourcemaps/index.ts

@@ -1,73 +1,113 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as assert from 'assert';
-import { svelte } from '../helpers';
-import { SourceMapConsumer } from 'source-map';
+import { loadConfig, svelte } from '../helpers';
+// keep source-map at version 0.7.x
+// https://github.com/mozilla/source-map/issues/400
 import { getLocator } from 'locate-character';
+import { SourceMapConsumer } from 'source-map';
+
 
 describe('sourcemaps', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
 		if (dir[0] === '.') return;
 
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+
 		// add .solo to a sample directory name to only run that test
-		const solo = /\.solo/.test(dir);
-		const skip = /\.skip/.test(dir);
+		const solo = config.solo || /\.solo/.test(dir);
+		const skip = config.skip || /\.skip/.test(dir);
 
 		if (solo && process.env.CI) {
 			throw new Error('Forgot to remove `solo: true` from test');
 		}
 
 		(solo ? it.only : skip ? it.skip : it)(dir, async () => {
-			const filename = path.resolve(
-				`${__dirname}/samples/${dir}/input.svelte`
-			);
-			const outputFilename = path.resolve(
-				`${__dirname}/samples/${dir}/output`
-			);
+			const { test } = require(`./samples/${dir}/test.js`);
+			const inputFile = path.resolve(`${__dirname}/samples/${dir}/input.svelte`);
+			const outputName = '_actual';
+			const outputBase = path.resolve(`${__dirname}/samples/${dir}/${outputName}`);
+
+			const inputCode = fs.readFileSync(inputFile, 'utf-8');
+			const input = {
+				code: inputCode,
+				locate: getLocator(inputCode)
+			};
 
-			const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
-			const { js, css } = svelte.compile(input, {
-				filename,
-				outputFilename: `${outputFilename}.js`,
-				cssOutputFilename: `${outputFilename}.css`
+			const preprocessed = await svelte.preprocess(
+				input.code,
+				config.preprocess || {},
+				{
+					filename: 'input.svelte'
+				}
+			);
+
+			const { js, css } = svelte.compile(
+				preprocessed.code, {
+				filename: 'input.svelte',
+				// filenames for sourcemaps
+				outputFilename: `${outputName}.js`,
+				cssOutputFilename: `${outputName}.css`
 			});
 
-			const _code = js.code.replace(/Svelte v\d+\.\d+\.\d+/, match => match.replace(/\d/g, 'x'));
+			js.code = js.code.replace(
+				/generated by Svelte v\d+\.\d+\.\d+/,
+				match => match.replace(/\d/g, 'x')
+			);
 
+			fs.writeFileSync(`${outputBase}.svelte`, preprocessed.code);
+			if (preprocessed.map) {
+				fs.writeFileSync(
+					`${outputBase}.svelte.map`,
+					// TODO encode mappings for output - svelte.preprocess returns decoded mappings
+					JSON.stringify(preprocessed.map, null, 2)
+				);
+			}
 			fs.writeFileSync(
-				`${outputFilename}.js`,
-				`${_code}\n//# sourceMappingURL=output.js.map`
+				`${outputBase}.js`,
+				`${js.code}\n//# sourceMappingURL=${outputName}.js.map`
 			);
 			fs.writeFileSync(
-				`${outputFilename}.js.map`,
-				JSON.stringify(js.map, null, '  ')
+				`${outputBase}.js.map`,
+				JSON.stringify(js.map, null, 2)
 			);
-
 			if (css.code) {
 				fs.writeFileSync(
-					`${outputFilename}.css`,
-					`${css.code}\n/*# sourceMappingURL=output.css.map */`
+					`${outputBase}.css`,
+					`${css.code}\n/*# sourceMappingURL=${outputName}.css.map */`
 				);
 				fs.writeFileSync(
-					`${outputFilename}.css.map`,
+					`${outputBase}.css.map`,
 					JSON.stringify(css.map, null, '  ')
 				);
 			}
 
-			assert.deepEqual(js.map.sources, ['input.svelte']);
-			if (css.map) assert.deepEqual(css.map.sources, ['input.svelte']);
-
-			const { test } = require(`./samples/${dir}/test.js`);
+			assert.deepEqual(
+				js.map.sources.slice().sort(),
+				(config.js_map_sources || ['input.svelte']).sort()
+			);
+			if (css.map) {
+				assert.deepEqual(
+					css.map.sources.slice().sort(),
+					(config.css_map_sources || ['input.svelte']).sort()
+				);
+			}
 
-			const locateInSource = getLocator(input);
+			// use locate_1 with mapConsumer:
+			// lines are one-based, columns are zero-based
 
-			const smc = await new SourceMapConsumer(js.map);
-			const locateInGenerated = getLocator(_code);
+			preprocessed.mapConsumer = preprocessed.map && await new SourceMapConsumer(preprocessed.map);
+			preprocessed.locate = getLocator(preprocessed.code);
+			preprocessed.locate_1 = getLocator(preprocessed.code, { offsetLine: 1 });
 
-			const smcCss = css.map && await new SourceMapConsumer(css.map);
-			const locateInGeneratedCss = getLocator(css.code || '');
+			js.mapConsumer = js.map && await new SourceMapConsumer(js.map);
+			js.locate = getLocator(js.code);
+			js.locate_1 = getLocator(js.code, { offsetLine: 1 });
 
-			test({ assert, code: _code, map: js.map, smc, smcCss, locateInSource, locateInGenerated, locateInGeneratedCss });
+			css.mapConsumer = css.map && await new SourceMapConsumer(css.map);
+			css.locate = getLocator(css.code || '');
+			css.locate_1 = getLocator(css.code || '', { offsetLine: 1 });
+			test({ assert, input, preprocessed, js, css });
 		});
 	});
 });

test/sourcemaps/samples/basic/test.js

@@ -1,12 +1,12 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource('foo.bar.baz');
+export function test({ assert, input, js }) {
+	const expected = input.locate('foo.bar.baz');
 
 	let start;
 	let actual;
 
-	start = locateInGenerated('ctx[0].bar.baz');
+	start = js.locate('ctx[0].bar.baz');
 
-	actual = smc.originalPositionFor({
+	actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});
@@ -18,9 +18,9 @@ export function test({ assert, smc, locateInSource, locateInGenerated }) {
 		column: expected.column
 	});
 
-	start = locateInGenerated('ctx[0].bar.baz', start.character + 1);
+	start = js.locate('ctx[0].bar.baz', start.character + 1);
 
-	actual = smc.originalPositionFor({
+	actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});

test/sourcemaps/samples/binding-shorthand.skip/test.js

@@ -1,13 +1,14 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource('potato');
+export function test({ assert, input, js }) {
+	const expected = input.locate('potato');
 
 	let start;
 
-	start = locateInGenerated('potato');
-	start = locateInGenerated('potato', start.character + 1);
-	start = locateInGenerated('potato', start.character + 1); // we need the third instance of 'potato'
+	start = js.locate('potato');
+	start = js.locate('potato', start.character + 1);
+	start = js.locate('potato', start.character + 1);
+	// we need the third instance of 'potato'
 
-	const actual = smc.originalPositionFor({
+	const actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});

test/sourcemaps/samples/binding/test.js

@@ -1,12 +1,12 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource('bar.baz');
+export function test({ assert, input, js }) {
+	const expected = input.locate('bar.baz');
 
 	let start;
 	let actual;
 
-	start = locateInGenerated('bar.baz');
+	start = js.locate('bar.baz');
 
-	actual = smc.originalPositionFor({
+	actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});
@@ -18,9 +18,9 @@ export function test({ assert, smc, locateInSource, locateInGenerated }) {
 		column: expected.column
 	});
 
-	start = locateInGenerated('bar.baz', start.character + 1);
+	start = js.locate('bar.baz', start.character + 1);
 
-	actual = smc.originalPositionFor({
+	actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});

test/sourcemaps/samples/css/test.js

@@ -1,14 +1,14 @@
-export function test({ assert, smcCss, locateInSource, locateInGeneratedCss }) {
-	const expected = locateInSource( '.foo' );
+export function test({ assert, input, css }) {
+	const expected = input.locate('.foo');
 
-	const start = locateInGeneratedCss( '.foo' );
+	const start = css.locate('.foo');
 
-	const actual = smcCss.originalPositionFor({
+	const actual = css.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});
 
-	assert.deepEqual( actual, {
+	assert.deepEqual(actual, {
 		source: 'input.svelte',
 		name: null,
 		line: expected.line + 1,

test/sourcemaps/samples/each-block/test.js

@@ -1,10 +1,10 @@
-export function test({ assert, code, smc, map, locateInSource, locateInGenerated }) {
-	const startIndex = code.indexOf('create_main_fragment');
+export function test({ assert, input, js }) {
+	const startIndex = js.code.indexOf('create_main_fragment');
 
-	const expected = locateInSource('each');
-	const start = locateInGenerated('length', startIndex);
+	const expected = input.locate('each');
+	const start = js.locate('length', startIndex);
 
-	const actual = smc.originalPositionFor({
+	const actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});

test/sourcemaps/samples/script-after-comment/test.js

@@ -1,13 +1,13 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource( 'assertThisLine' );
-	const start = locateInGenerated( 'assertThisLine' );
+export function test({ assert, input, js }) {
+	const expected = input.locate('assertThisLine');
+	const start = js.locate('assertThisLine');
 
-	const actual = smc.originalPositionFor({
+	const actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});
 
-	assert.deepEqual( actual, {
+	assert.deepEqual(actual, {
 		source: 'input.svelte',
 		name: null,
 		line: expected.line + 1,

test/sourcemaps/samples/script/test.js

@@ -1,8 +1,8 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource( '42' );
-	const start = locateInGenerated( '42' );
+export function test({ assert, input, js }) {
+	const expected = input.locate('42');
+	const start = js.locate('42');
 
-	const actual = smc.originalPositionFor({
+	const actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});

test/sourcemaps/samples/static-no-script/test.js

@@ -1,9 +1,9 @@
-const fs = require( 'fs' );
-const path = require( 'path' );
+const fs = require('fs');
+const path = require('path');
 
-export function test({ assert, map }) {
-	assert.deepEqual( map.sources, [ 'input.svelte' ]);
-	assert.deepEqual( map.sourcesContent, [
-		fs.readFileSync( path.join( __dirname, 'input.svelte' ), 'utf-8' )
+export function test({ assert, js }) {
+	assert.deepEqual(js.map.sources, ['input.svelte']);
+	assert.deepEqual(js.map.sourcesContent, [
+		fs.readFileSync(path.join(__dirname, 'input.svelte'), 'utf-8')
 	]);
 }

test/sourcemaps/samples/two-scripts/test.js

@@ -1,8 +1,8 @@
-export function test({ assert, smc, locateInSource, locateInGenerated }) {
-	const expected = locateInSource( 'assertThisLine' );
-	const start = locateInGenerated( 'assertThisLine' );
+export function test({ assert, input, js }) {
+	const expected = input.locate( 'assertThisLine' );
+	const start = js.locate( 'assertThisLine' );
 
-	const actual = smc.originalPositionFor({
+	const actual = js.mapConsumer.originalPositionFor({
 		line: start.line + 1,
 		column: start.column
 	});