mirror of https://github.com/sveltejs/svelte
Fix various issues with preprocess source maps (#5754)
dmitrage
5 years ago
committed by
GitHub
parent
91376d285e
commit
68538c61eb
@ -0,0 +1,24 @@
|
||||
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
|
||||
// - Most probably caused by bug in current magic-string version (fixed in 0.25.7)
|
||||
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 }
|
||||
]);
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<style lang="scss" src="./styles.scss"></style>
|
||||
|
||||
<div class="awesome">Divs ftw!</div>
|
||||
@ -0,0 +1,26 @@
|
||||
import { assert_mapped } from '../../helpers';
|
||||
import { COMMON, STYLES } from './_config';
|
||||
|
||||
export function test({ input, preprocessed }) {
|
||||
// Transformed script, main file
|
||||
assert_mapped({
|
||||
filename: 'input.svelte',
|
||||
code: 'Divs ftw!',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// External files
|
||||
assert_mapped({
|
||||
filename: 'common.scss',
|
||||
code: 'height: 100%;',
|
||||
input: COMMON,
|
||||
preprocessed
|
||||
});
|
||||
assert_mapped({
|
||||
filename: 'styles.scss',
|
||||
code: 'color: orange;',
|
||||
input: STYLES,
|
||||
preprocessed
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
css_map_sources: [],
|
||||
preprocess: [
|
||||
{
|
||||
style: ({ content }) => {
|
||||
// Modified without source map
|
||||
return { code: content + ' ' };
|
||||
},
|
||||
script: ({ content }) => {
|
||||
// Not modified
|
||||
return { code: content };
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export let name;
|
||||
|
||||
console.log(name);
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>{name}</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main { font-weight: bold; }
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
import { assert_mapped, assert_not_mapped } from '../../helpers';
|
||||
|
||||
export function test({ input, preprocessed }) {
|
||||
// markup (start)
|
||||
assert_mapped({
|
||||
code: '<script>',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// script content (preprocessed without map, content not changed)
|
||||
assert_mapped({
|
||||
code: 'console.log(name);',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// markup (middle)
|
||||
assert_mapped({
|
||||
code: '<div>{name}</div>',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// style content (preprocessed without map, content changed)
|
||||
assert_not_mapped({
|
||||
code: 'font-weight: bold;',
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// markup (end)
|
||||
assert_mapped({
|
||||
code: '</style>',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import { magic_string_bundle } from '../../helpers';
|
||||
|
||||
export const component_filepath = 'src/input.svelte';
|
||||
|
||||
export const component_file_basename = 'input.svelte';
|
||||
|
||||
// as output by external tool for src/external_code.css (relative to src/input.svelte)
|
||||
export const external_relative_filename = 'external_code.css';
|
||||
|
||||
const external_code = `
|
||||
span {
|
||||
--external_code-var: 1px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
css_map_sources: [external_relative_filename],
|
||||
js_map_sources: [],
|
||||
preprocess: [
|
||||
{
|
||||
style: ({ content, filename }) => {
|
||||
const external =`/* Filename from preprocess: ${filename} */` + external_code;
|
||||
return magic_string_bundle([
|
||||
{ code: external, filename: external_relative_filename },
|
||||
{ code: content, filename }
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
filename: component_filepath
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<style src="external_code.css"></style>
|
||||
|
||||
<span>Hello world</span>
|
||||
@ -0,0 +1,15 @@
|
||||
import { component_filepath, component_file_basename, external_relative_filename } from './_config';
|
||||
|
||||
export function test({ assert, preprocessed }) {
|
||||
assert.notEqual(
|
||||
preprocessed.locate(`/* Filename from preprocess: ${component_filepath} */`),
|
||||
undefined,
|
||||
'Preprocessor should receive same value for filename as passed to preprocess function'
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
preprocessed.map.sources.slice().sort(),
|
||||
[external_relative_filename, component_file_basename].sort(),
|
||||
'Preprocessed map should contain sources relative to filepath'
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import MagicString from 'magic-string';
|
||||
import { magic_string_preprocessor_result } from '../../helpers';
|
||||
|
||||
export default {
|
||||
js_map_sources: ['input.svelte'],
|
||||
preprocess: [
|
||||
{
|
||||
script: ({ content }) => {
|
||||
const src = new MagicString(content);
|
||||
src.prepend('console.log("Injected first line");\n');
|
||||
return magic_string_preprocessor_result('input.svelte', src);
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<script>console.log('Target')</script>
|
||||
|
||||
<h1>Hello</h1>
|
||||
@ -0,0 +1,9 @@
|
||||
import { assert_mapped } from '../../helpers';
|
||||
|
||||
export function test({ input, preprocessed }) {
|
||||
assert_mapped({
|
||||
code: 'Target',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import { magic_string_bundle } from '../../helpers';
|
||||
|
||||
export const EXTERNAL = 'span { --external-var: 1px; }';
|
||||
|
||||
export default {
|
||||
js_map_sources: [],
|
||||
css_map_sources: ['input.svelte', 'external.css'],
|
||||
preprocess: [
|
||||
{
|
||||
style: ({ content, filename }) => {
|
||||
return magic_string_bundle([
|
||||
{ code: EXTERNAL, filename: 'external.css' },
|
||||
{ code: content, filename }
|
||||
]);
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
// This block is here to offset style block
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div { --component-var: 2px; }
|
||||
</style>
|
||||
|
||||
<div><span>Text</span></div>
|
||||
@ -0,0 +1,19 @@
|
||||
import { assert_mapped } from '../../helpers';
|
||||
import { EXTERNAL } from './_config';
|
||||
|
||||
export function test({ input, preprocessed }) {
|
||||
// Part from component, should be with offset
|
||||
assert_mapped({
|
||||
code: '--component-var',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// Part from external file, should be without offset
|
||||
assert_mapped({
|
||||
filename: 'external.css',
|
||||
code: '--external-var',
|
||||
input: EXTERNAL,
|
||||
preprocessed
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import * as ts from 'typescript';
|
||||
|
||||
export default {
|
||||
js_map_sources: [
|
||||
'input.svelte'
|
||||
],
|
||||
preprocess: [
|
||||
{
|
||||
script: ({ content, filename }) => {
|
||||
const { outputText, sourceMapText } = ts.transpileModule(content, {
|
||||
fileName: filename,
|
||||
compilerOptions: {
|
||||
target: ts.ScriptTarget.ES2015,
|
||||
module: ts.ModuleKind.ES2015,
|
||||
sourceMap: true
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
code: outputText,
|
||||
map: sourceMapText
|
||||
};
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let count: number = 0;
|
||||
|
||||
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>
|
||||
<div>Counter value: {count}</div>
|
||||
@ -0,0 +1,21 @@
|
||||
import { assert_mapped, assert_not_located } from '../../helpers';
|
||||
|
||||
export function test({ input, preprocessed }) {
|
||||
// TS => JS code
|
||||
assert_mapped({
|
||||
code: 'let count = 0;',
|
||||
input_code: 'let count: number = 0;',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// Markup, not touched
|
||||
assert_mapped({
|
||||
code: '<h1>Hello world!</h1>',
|
||||
input: input.locate,
|
||||
preprocessed
|
||||
});
|
||||
|
||||
// TS types, removed
|
||||
assert_not_located('ITimeoutDestroyer', preprocessed.locate_1);
|
||||
}
|
||||
Loading…
Reference in new issue