mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00
Code Issues Releases Wiki Activity

Merge pull request #97 from sveltejs/sourcemaps

Browse Source 
Sourcemaps
This commit is contained in:
Rich Harris 2016-12-02 11:33:46 -05:00 committed by GitHub
commit 399db5d08a
10 changed files with 112 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -4,3 +4,5 @@ dist
.nyc_output
coverage
coverage.lcov
test/sourcemaps/*/output.js
test/sourcemaps/*/output.js.map

33
compiler/generate/index.js
View File

@ -86,7 +86,7 @@ export default function generate ( parsed, source, options ) {
const { name } = flattenReference( node );
if ( parent && parent.type === 'CallExpression' && node === parent.callee ) {
if ( generator.helpers[ name ] ) generator.code.insertRight( node.start, `template.helpers.` );
if ( generator.helpers[ name ] ) generator.code.prependRight( node.start, `template.helpers.` );
return;
}
@ -102,7 +102,7 @@ export default function generate ( parsed, source, options ) {
if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
} else {
dependencies.push( node.name );
generator.code.insertRight( node.start, `root.` );
generator.code.prependRight( node.start, `root.` );
if ( !~usedContexts.indexOf( 'root' ) ) usedContexts.push( 'root' );
}
@ -204,19 +204,19 @@ export default function generate ( parsed, source, options ) {
while ( /\s/.test( source[ i - 1 ] ) ) i--;
const indentation = source.slice( i, defaultExport.start );
generator.code.insertLeft( finalNode.end, `\n\n${indentation}return template;` );
generator.code.appendLeft( finalNode.end, `\n\n${indentation}return template;` );
}
defaultExport.declaration.properties.forEach( prop => {
templateProperties[ prop.key.name ] = prop.value;
});
generator.code.insertRight( parsed.js.content.start, 'var template = (function () {' );
generator.code.prependRight( parsed.js.content.start, 'var template = (function () {' );
} else {
generator.code.insertRight( parsed.js.content.start, '(function () {' );
generator.code.prependRight( parsed.js.content.start, '(function () {' );
}
generator.code.insertLeft( parsed.js.content.end, '}());' );
generator.code.appendLeft( parsed.js.content.end, '}());' );
[ 'helpers', 'events', 'components' ].forEach( key => {
if ( templateProperties[ key ] ) {
@ -508,30 +508,35 @@ export default function generate ( parsed, source, options ) {
function addString ( str ) {
compiled.addSource({
filename: options.filename,
content: new MagicString( str )
});
}
addString( getIntro( format, options, imports ) );
const intro = getIntro( format, options, imports );
if ( intro ) addString( intro );
// a filename is necessary for sourcemap generation
const filename = options.filename || 'SvelteComponent.html';
parts.forEach( str => {
const chunk = str.replace( pattern, '' );
if ( chunk ) addString( chunk );
const match = pattern.exec( str );
addString( str.replace( pattern, '' ) );
const snippet = generator.code.snip( +match[1], +match[2] );
compiled.addSource({
filename: options.filename,
content: generator.code.snip( +match[1], +match[2] )
filename,
content: snippet
});
});
compiled.append( finalChunk );
addString( finalChunk );
addString( '\n\n' + getOutro( format, constructorName, options, imports ) );
return {
code: compiled.toString(),
map: compiled.generateMap()
map: compiled.generateMap({ includeContent: true })
};
}

2
compiler/generate/visitors/attributes/addComponentAttributes.js
View File

@ -80,7 +80,7 @@ export default function addComponentAttributes ( generator, node, local ) {
else if ( attribute.type === 'EventHandler' ) {
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.addSourcemapLocations( attribute.expression );
generator.code.insertRight( attribute.expression.start, 'component.' );
generator.code.prependRight( attribute.expression.start, 'component.' );
const usedContexts = new Set();
attribute.expression.arguments.forEach( arg => {

2
compiler/generate/visitors/attributes/addElementAttributes.js
View File

@ -116,7 +116,7 @@ export default function addElementAttributes ( generator, node, local ) {
else if ( attribute.type === 'EventHandler' ) {
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.addSourcemapLocations( attribute.expression );
generator.code.insertRight( attribute.expression.start, 'component.' );
generator.code.prependRight( attribute.expression.start, 'component.' );
const usedContexts = new Set();
attribute.expression.arguments.forEach( arg => {

3
package.json
View File

@ -47,7 +47,7 @@
"fuzzyset.js": "0.0.1",
"jsdom": "^9.8.3",
"locate-character": "^2.0.0",
"magic-string": "^0.16.0",
"magic-string": "^0.19.0",
"mocha": "^3.1.2",
"node-resolve": "^1.3.3",
"nyc": "^9.0.1",
@ -56,6 +56,7 @@
"rollup-plugin-buble": "^0.14.0",
"rollup-plugin-commonjs": "^5.0.5",
"rollup-plugin-node-resolve": "^2.0.0",
"source-map": "^0.5.6",
"source-map-support": "^0.4.6"
},
"nyc": {

1
test/sourcemaps/basic/input.html Normal file
View File

@ -0,0 +1 @@
{{foo.bar.baz}}

34
test/sourcemaps/basic/test.js Normal file
View File

@ -0,0 +1,34 @@
export function test ({ assert, smc, locateInSource, locateInGenerated }) {
const expected = locateInSource( 'foo.bar.baz' );
let loc;
let actual;
loc = locateInGenerated( 'foo.bar.baz' );
actual = smc.originalPositionFor({
line: loc.line + 1,
column: loc.column
});
assert.deepEqual( actual, {
source: 'SvelteComponent.html',
name: null,
line: expected.line + 1,
column: expected.column
});
loc = locateInGenerated( 'foo.bar.baz', loc.character + 1 );
actual = smc.originalPositionFor({
line: loc.line + 1,
column: loc.column
});
assert.deepEqual( actual, {
source: 'SvelteComponent.html',
name: null,
line: expected.line + 1,
column: expected.column
});
}

9
test/sourcemaps/script/input.html Normal file
View File

@ -0,0 +1,9 @@
<div></div>
<script>
export default {
onrender () {
console.log( 42 );
}
}
</script>

16
test/sourcemaps/script/test.js Normal file
View File

@ -0,0 +1,16 @@
export function test ({ assert, smc, locateInSource, locateInGenerated }) {
const expected = locateInSource( '42' );
const loc = locateInGenerated( '42' );
const actual = smc.originalPositionFor({
line: loc.line + 1,
column: loc.column
});
assert.deepEqual( actual, {
source: 'SvelteComponent.html',
name: null,
line: expected.line + 1,
column: expected.column
});
}

27
test/test.js
View File

@ -5,6 +5,8 @@ import * as path from 'path';
import * as fs from 'fs';
import jsdom from 'jsdom';
import * as acorn from 'acorn';
import { SourceMapConsumer } from 'source-map';
import { getLocator } from 'locate-character';
import * as consoleGroup from 'console-group';
consoleGroup.install();
@ -468,4 +470,29 @@ describe( 'svelte', () => {
});
});
});
describe( 'sourcemaps', () => {
fs.readdirSync( 'test/sourcemaps' ).forEach( dir => {
if ( dir[0] === '.' ) return;
const solo = exists( `test/sourcemaps/${dir}/solo` );
( solo ? it.only : it )( dir, () => {
const input = fs.readFileSync( `test/sourcemaps/${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' );
const { code, map } = svelte.compile( input );
fs.writeFileSync( `test/sourcemaps/${dir}/output.js`, `${code}\n//# sourceMappingURL=output.js.map` );
fs.writeFileSync( `test/sourcemaps/${dir}/output.js.map`, JSON.stringify( map, null, ' ' ) );
const { test } = require( `./sourcemaps/${dir}/test.js` );
const smc = new SourceMapConsumer( map );
const locateInSource = getLocator( input );
const locateInGenerated = getLocator( code );
test({ assert, code, map, smc, locateInSource, locateInGenerated });
});
});
});
});