Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix some issues with preprocess source maps #5754

Merged
merged 11 commits into from
Dec 16, 2020
24 changes: 23 additions & 1 deletion test/sourcemaps/helpers.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
import MagicString from 'magic-string';
import MagicString, { Bundle } from 'magic-string';

export function magic_string_bundle(
inputs: Array<{ code: string | MagicString, filename: string }>,
filename = 'bundle.js',
separator = '\n'
) {
const bundle = new Bundle({ separator });
inputs.forEach(({ code, filename }) => {
bundle.addSource({
filename,
content: typeof code === 'string' ? new MagicString(code) : code
});
});
return {
code: bundle.toString(),
map: bundle.generateMap({
source: filename,
hires: true,
includeContent: false
})
};
}

export function magic_string_preprocessor_result(filename: string, src: MagicString) {
return {
Expand Down
23 changes: 23 additions & 0 deletions test/sourcemaps/samples/external/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { magic_string_bundle } from '../../helpers';

export const COMMON = ':global(html) { height: 100%; }\n';

// TODO: removing '\n' breaks test
// - _actual.svelte.map looks correct
// - _actual.css.map adds reference to </style> on input.svelte
export const STYLES = '.awesome { color: orange; }\n';

export default {
css_map_sources: ['common.scss', 'styles.scss'],
js_map_sources: [],
preprocess: [
{
style: () => {
return magic_string_bundle([
{ filename: 'common.scss', code: COMMON },
{ filename: 'styles.scss', code: STYLES }
]);
}
}
]
};
3 changes: 3 additions & 0 deletions test/sourcemaps/samples/external/input.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<style lang="scss" src="./styles.scss"></style>

<div class="awesome">Divs ftw!</div>
27 changes: 27 additions & 0 deletions test/sourcemaps/samples/external/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { getLocator } from 'locate-character';
import { COMMON, STYLES } from './_config';

export function test({ assert, input, preprocessed }) {

const assertMapped = (locateInput, code, filename) => {
dummdidumm marked this conversation as resolved.
Show resolved Hide resolved
const sourceLoc = locateInput(code);
const transformedLoc = preprocessed.locate_1(code);
assert.deepEqual(
preprocessed.mapConsumer.originalPositionFor(transformedLoc),
{
source: filename,
name: null,
line: sourceLoc.line + 1,
column: sourceLoc.column
},
`failed to locate "${code}"`
);
};

// Transformed script, main file
assertMapped(input.locate, 'Divs ftw!', 'input.svelte');

// External files
assertMapped(getLocator(COMMON), 'height: 100%;', 'common.scss');
assertMapped(getLocator(STYLES), 'color: orange;', 'styles.scss');
}
19 changes: 19 additions & 0 deletions test/sourcemaps/samples/guess-source/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { magic_string_bundle } from '../../helpers';

export const PREPEND = 'console.log("COUNTER_START")';
export const APPEND = 'console.log("COUNTER_END")';

export default {
js_map_sources: ['input.svelte', 'src/prepend.js', 'src/append.js'],
preprocess: [
{
script: ({ content }) => {
return magic_string_bundle([
{ filename: 'src/prepend.js', code: PREPEND },
{ filename: 'src/input.svelte', code: content },
{ filename: 'src/append.js', code: APPEND }
]);
}
}
]
};
6 changes: 6 additions & 0 deletions test/sourcemaps/samples/guess-source/input.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<script lang="ts">
let count = 3;
</script>

<h1>Hello world!</h1>
<div>Counter value: {count}</div>
30 changes: 30 additions & 0 deletions test/sourcemaps/samples/guess-source/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { getLocator } from 'locate-character';
import { APPEND, PREPEND } from './_config';

export function test({ assert, input, preprocessed }) {

const assertMapped = (locateInput, code, filename) => {
const sourceLoc = locateInput(code);
const transformedLoc = preprocessed.locate_1(code);
assert.deepEqual(
preprocessed.mapConsumer.originalPositionFor(transformedLoc),
{
source: filename,
name: null,
line: sourceLoc.line + 1,
column: sourceLoc.column
},
`failed to locate "${code}"`
);
};

// Transformed script, main file
assertMapped(input.locate, 'let count = 3;', 'input.svelte');

// Untouched markup, main file
assertMapped(input.locate, '<h1>Hello world!</h1>', 'input.svelte');

// External files
assertMapped(getLocator(PREPEND), '"COUNTER_START"', 'src/prepend.js');
assertMapped(getLocator(APPEND), '"COUNTER_END"', 'src/append.js');
}
17 changes: 11 additions & 6 deletions test/sourcemaps/samples/typescript/input.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount } from 'svelte';

let count: number = 0;
let count: number = 0;

onMount(() => {
const id = setInterval(() => count++, 1000);
return () => clearInterval(id);
});
interface ITimeoutDestroyer {
(): void; // send timeout to the void!
}

onMount(() => {
const id = setInterval(() => count++, 1000);
const clear: ITimeoutDestroyer = () => clearInterval(id);
return clear;
});
</script>

<h1>Hello world!</h1>
Expand Down
39 changes: 26 additions & 13 deletions test/sourcemaps/samples/typescript/test.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
export function test({ assert, input, preprocessed }) {
const content = '<h1>Hello world!</h1>';
const assertMapped = (source, transformed) => {
const sourceLoc = input.locate(source);
const transformedLoc = preprocessed.locate_1(transformed);
assert.deepEqual(
preprocessed.mapConsumer.originalPositionFor(transformedLoc),
{
source: 'input.svelte',
name: null,
line: sourceLoc.line + 1,
column: sourceLoc.column
},
`failed to locate "${transformed}"`
);
};

const original = input.locate(content);
const transformed = preprocessed.locate_1('<h1>Hello world!</h1>');
const assertNotMapped = (code) => {
const transformedLoc = preprocessed.locate_1(code);
assert.strictEqual(transformedLoc, undefined, `failed to remove "${code}"`);
};

assert.deepEqual(
preprocessed.mapConsumer.originalPositionFor(transformed),
{
source: 'input.svelte',
name: null,
line: original.line + 1,
column: original.column
},
`failed to locate "${content}"`
);
// TS => JS code
assertMapped('let count: number = 0;', 'let count = 0;');

// Markup, not touched
assertMapped('<h1>Hello world!</h1>', '<h1>Hello world!</h1>');

// TS types, removed
assertNotMapped('ITimeoutDestroyer');
}