mirror of https://github.com/sveltejs/svelte
Parse attached sourcemap from preprocessor (#5854)
parent
dbd184c38c
commit
0d19f67ec4
@ -0,0 +1,44 @@
|
||||
import MagicString from 'magic-string';
|
||||
|
||||
let indent_size = 4;
|
||||
let comment_multi = true;
|
||||
function get_processor(tag_name, search, replace) {
|
||||
return {
|
||||
[tag_name]: ({ content, filename }) => {
|
||||
let code = content.slice();
|
||||
const ms = new MagicString(code);
|
||||
|
||||
const idx = ms.original.indexOf(search);
|
||||
if (idx == -1) throw new Error('search not found in src');
|
||||
ms.overwrite(idx, idx + search.length, replace, { storeName: true });
|
||||
|
||||
// change line + column
|
||||
const indent = Array.from({ length: indent_size }).join(' ');
|
||||
ms.prependLeft(idx, '\n'+indent);
|
||||
|
||||
const map_opts = { source: filename, hires: true, includeContent: false };
|
||||
const map = ms.generateMap(map_opts);
|
||||
const attach_line = (tag_name == 'style' || comment_multi)
|
||||
? `\n/*# sourceMappingURL=${map.toUrl()} */`
|
||||
: `\n//# sourceMappingURL=${map.toUrl()}` // only in script
|
||||
;
|
||||
code = ms.toString() + attach_line;
|
||||
|
||||
indent_size += 2;
|
||||
if (tag_name == 'script') comment_multi = !comment_multi;
|
||||
return { code };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
preprocess: [
|
||||
|
||||
get_processor('script', 'replace_me_script', 'done_replace_script_1'),
|
||||
get_processor('script', 'done_replace_script_1', 'done_replace_script_2'),
|
||||
|
||||
get_processor('style', '.replace_me_style', '.done_replace_style_1'),
|
||||
get_processor('style', '.done_replace_style_1', '.done_replace_style_2')
|
||||
|
||||
]
|
||||
};
|
@ -0,0 +1,11 @@
|
||||
<style>
|
||||
.replace_me_style {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let
|
||||
replace_me_script = 'hello'
|
||||
;
|
||||
</script>
|
||||
<h1 class="done_replace_style_2">{done_replace_script_2}</h1>
|
@ -0,0 +1,45 @@
|
||||
import * as assert from 'assert';
|
||||
|
||||
const get_line_column = obj => ({ line: obj.line, column: obj.column });
|
||||
|
||||
export function test({ input, css, js }) {
|
||||
|
||||
let out_obj, loc_output, actual, loc_input, expected;
|
||||
|
||||
out_obj = js;
|
||||
// we need the second occurence of 'done_replace_script_2' in output.js
|
||||
// the first occurence is mapped back to markup '{done_replace_script_2}'
|
||||
loc_output = out_obj.locate_1('done_replace_script_2');
|
||||
loc_output = out_obj.locate_1('done_replace_script_2', loc_output.character + 1);
|
||||
actual = out_obj.mapConsumer.originalPositionFor(loc_output);
|
||||
loc_input = input.locate_1('replace_me_script');
|
||||
expected = {
|
||||
source: 'input.svelte',
|
||||
name: 'replace_me_script',
|
||||
...get_line_column(loc_input)
|
||||
};
|
||||
assert.deepEqual(actual, expected);
|
||||
|
||||
out_obj = css;
|
||||
loc_output = out_obj.locate_1('.done_replace_style_2');
|
||||
actual = out_obj.mapConsumer.originalPositionFor(loc_output);
|
||||
loc_input = input.locate_1('.replace_me_style');
|
||||
expected = {
|
||||
source: 'input.svelte',
|
||||
name: '.replace_me_style',
|
||||
...get_line_column(loc_input)
|
||||
};
|
||||
assert.deepEqual(actual, expected);
|
||||
|
||||
assert.equal(
|
||||
js.code.indexOf('\n/*# sourceMappingURL=data:application/json;base64,'),
|
||||
-1,
|
||||
'magic-comment attachments were NOT removed'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
css.code.indexOf('\n/*# sourceMappingURL=data:application/json;base64,'),
|
||||
-1,
|
||||
'magic-comment attachments were NOT removed'
|
||||
);
|
||||
}
|
Loading…
Reference in new issue