add debugging comments

pull/853/head
Rich Harris 7 years ago
parent fbbaff5404
commit 6e57fa3ced

@ -56,6 +56,8 @@ export default class Generator {
expectedProperties: Set<string>; expectedProperties: Set<string>;
usesRefs: boolean; usesRefs: boolean;
locate: (c: number) => { line: number, column: number };
stylesheet: Stylesheet; stylesheet: Stylesheet;
importedNames: Set<string>; importedNames: Set<string>;
@ -86,6 +88,8 @@ export default class Generator {
this.bindingGroups = []; this.bindingGroups = [];
this.indirectDependencies = new Map(); this.indirectDependencies = new Map();
this.locate = getLocator(this.source);
// track which properties are needed, so we can provide useful info // track which properties are needed, so we can provide useful info
// in dev mode // in dev mode
this.expectedProperties = new Set(); this.expectedProperties = new Set();

@ -1,5 +1,6 @@
import CodeBuilder from '../../utils/CodeBuilder'; import CodeBuilder from '../../utils/CodeBuilder';
import deindent from '../../utils/deindent'; import deindent from '../../utils/deindent';
import { escape } from '../../utils/stringify';
import { DomGenerator } from './index'; import { DomGenerator } from './index';
import { Node } from '../../interfaces'; import { Node } from '../../interfaces';
import shared from './shared'; import shared from './shared';
@ -9,6 +10,7 @@ export interface BlockOptions {
generator?: DomGenerator; generator?: DomGenerator;
expression?: Node; expression?: Node;
context?: string; context?: string;
comment?: string;
key?: string; key?: string;
contexts?: Map<string, string>; contexts?: Map<string, string>;
indexes?: Map<string, string>; indexes?: Map<string, string>;
@ -27,6 +29,7 @@ export default class Block {
name: string; name: string;
expression: Node; expression: Node;
context: string; context: string;
comment?: string;
key: string; key: string;
first: string; first: string;
@ -72,6 +75,7 @@ export default class Block {
this.name = options.name; this.name = options.name;
this.expression = options.expression; this.expression = options.expression;
this.context = options.context; this.context = options.context;
this.comment = options.comment;
// for keyed each blocks // for keyed each blocks
this.key = options.key; this.key = options.key;
@ -340,6 +344,7 @@ export default class Block {
} }
return deindent` return deindent`
${this.comment && `// ${escape(this.comment)}`}
function ${this.name}(${this.params.join(', ')}, #component${this.key ? `, ${localKey}` : ''}) { function ${this.name}(${this.params.join(', ')}, #component${this.key ? `, ${localKey}` : ''}) {
${this.variables.size > 0 && ${this.variables.size > 0 &&
`var ${Array.from(this.variables.keys()) `var ${Array.from(this.variables.keys())

@ -12,6 +12,7 @@ import Generator from '../Generator';
import Stylesheet from '../../css/Stylesheet'; import Stylesheet from '../../css/Stylesheet';
import preprocess from './preprocess'; import preprocess from './preprocess';
import Block from './Block'; import Block from './Block';
import { version } from '../../../package.json';
import { Parsed, CompileOptions, Node } from '../../interfaces'; import { Parsed, CompileOptions, Node } from '../../interfaces';
export class DomGenerator extends Generator { export class DomGenerator extends Generator {
@ -76,6 +77,7 @@ export default function dom(
}); });
const builder = new CodeBuilder(); const builder = new CodeBuilder();
builder.addBlock(`// ${options.filename ? `${options.filename} ` : ``}generated by Svelte v${version}`);
const computationBuilder = new CodeBuilder(); const computationBuilder = new CodeBuilder();
if (computations.length) { if (computations.length) {

@ -22,6 +22,25 @@ function getChildState(parent: State, child = {}) {
); );
} }
function createDebuggingComment(node: Node, generator: DomGenerator) {
const { locate, source } = generator;
let c = node.start;
if (node.type === 'ElseBlock') {
while (source[c] !== '{') c -= 1;
c -= 1;
}
let d = node.expression ? node.expression.end : c;
while (source[d] !== '}') d += 1;
d += 2;
const start = locate(c);
const loc = `(${start.line + 1}:${start.column})`;
return `${loc} ${source.slice(c, d)}`.replace(/\n/g, ' ');
}
// Whitespace inside one of these elements will not result in // Whitespace inside one of these elements will not result in
// a whitespace node being created in any circumstances. (This // a whitespace node being created in any circumstances. (This
// list is almost certainly very incomplete) // list is almost certainly very incomplete)
@ -107,6 +126,7 @@ const preprocessors = {
block.addDependencies(dependencies); block.addDependencies(dependencies);
node._block = block.child({ node._block = block.child({
comment: createDebuggingComment(node, generator),
name: generator.getUniqueName(`create_if_block`), name: generator.getUniqueName(`create_if_block`),
}); });
@ -127,6 +147,7 @@ const preprocessors = {
attachBlocks(node.else.children[0]); attachBlocks(node.else.children[0]);
} else if (node.else) { } else if (node.else) {
node.else._block = block.child({ node.else._block = block.child({
comment: createDebuggingComment(node.else, generator),
name: generator.getUniqueName(`create_if_block`), name: generator.getUniqueName(`create_if_block`),
}); });
@ -202,6 +223,7 @@ const preprocessors = {
contextDependencies.set(node.context, dependencies); contextDependencies.set(node.context, dependencies);
node._block = block.child({ node._block = block.child({
comment: createDebuggingComment(node, generator),
name: generator.getUniqueName('create_each_block'), name: generator.getUniqueName('create_each_block'),
expression: node.expression, expression: node.expression,
context: node.context, context: node.context,
@ -231,6 +253,7 @@ const preprocessors = {
if (node.else) { if (node.else) {
node.else._block = block.child({ node.else._block = block.child({
comment: createDebuggingComment(node.else, generator),
name: generator.getUniqueName(`${node._block.name}_else`), name: generator.getUniqueName(`${node._block.name}_else`),
}); });

@ -103,7 +103,7 @@ export default function ssr(
var ${name} = {}; var ${name} = {};
${name}.filename = ${stringify(options.filename)}; ${options.filename && `${name}.filename = ${stringify(options.filename)}`};
${name}.data = function() { ${name}.data = function() {
return ${templateProperties.data ? `@template.data()` : `{}`}; return ${templateProperties.data ? `@template.data()` : `{}`};

@ -12,9 +12,6 @@ function normalizeOptions(options: CompileOptions): CompileOptions {
{ {
generate: 'dom', generate: 'dom',
// a filename is necessary for sourcemap generation
filename: 'SvelteComponent.html',
onwarn: (warning: Warning) => { onwarn: (warning: Warning) => {
if (warning.loc) { if (warning.loc) {
console.warn( console.warn(

@ -71,7 +71,7 @@ describe("js", () => {
expectedBundle.trim().replace(/^\s+$/gm, "") expectedBundle.trim().replace(/^\s+$/gm, "")
); );
}).catch(err => { }).catch(err => {
console.error(err.loc); if (err.loc) console.error(err.loc);
throw err; throw err;
}); });
}); });

@ -175,6 +175,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
data: function () { data: function () {

@ -1,5 +1,7 @@
import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js"; import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
data: function () { data: function () {

@ -151,6 +151,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
computed: { computed: {

@ -1,5 +1,7 @@
import { assign, differs, noop, proto } from "svelte/shared.js"; import { assign, differs, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
computed: { computed: {

@ -171,6 +171,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function encapsulateStyles(node) { function encapsulateStyles(node) {
setAttribute(node, "svelte-2363328337", ""); setAttribute(node, "svelte-2363328337", "");
} }

@ -1,5 +1,7 @@
import { appendNode, assign, createElement, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js"; import { appendNode, assign, createElement, detachNode, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
// generated by Svelte v1.39.2
function encapsulateStyles(node) { function encapsulateStyles(node) {
setAttribute(node, "svelte-2363328337", ""); setAttribute(node, "svelte-2363328337", "");
} }

@ -171,6 +171,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text; var div, text;

@ -1,5 +1,7 @@
import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text; var div, text;

@ -184,6 +184,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var text, p, text_1; var text, p, text_1;
@ -257,6 +259,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#each comments as comment, i}}
function create_each_block(state, each_block_value, comment, i, component) { function create_each_block(state, each_block_value, comment, i, component) {
var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before; var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;

@ -1,5 +1,7 @@
import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var text, p, text_1; var text, p, text_1;
@ -73,6 +75,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#each comments as comment, i}}
function create_each_block(state, each_block_value, comment, i, component) { function create_each_block(state, each_block_value, comment, i, component) {
var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before; var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;

@ -171,6 +171,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
methods: { methods: {

@ -1,5 +1,7 @@
import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
methods: { methods: {

@ -175,6 +175,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var if_block_anchor; var if_block_anchor;
@ -213,6 +215,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#if foo}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;
@ -235,6 +238,7 @@ function create_if_block(state, component) {
}; };
} }
// (3:0) {{else}}
function create_if_block_1(state, component) { function create_if_block_1(state, component) {
var p, text; var p, text;

@ -1,5 +1,7 @@
import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var if_block_anchor; var if_block_anchor;
@ -38,6 +40,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#if foo}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;
@ -60,6 +63,7 @@ function create_if_block(state, component) {
}; };
} }
// (3:0) {{else}}
function create_if_block_1(state, component) { function create_if_block_1(state, component) {
var p, text; var p, text;

@ -175,6 +175,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var if_block_anchor; var if_block_anchor;
@ -216,6 +218,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#if foo}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;

@ -1,5 +1,7 @@
import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var if_block_anchor; var if_block_anchor;
@ -41,6 +43,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (1:0) {{#if foo}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;

@ -167,6 +167,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -1,5 +1,7 @@
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js"; import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -167,6 +167,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -1,5 +1,7 @@
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js"; import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -167,6 +167,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -1,5 +1,7 @@
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js"; import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -167,6 +167,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text, div_1, div_1_style_value; var div, text, div_1, div_1_style_value;

@ -1,5 +1,7 @@
import { assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text, div_1, div_1_style_value; var div, text, div_1, div_1_style_value;

@ -171,6 +171,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var input; var input;

@ -1,5 +1,7 @@
import { addListener, assign, createElement, detachNode, insertNode, proto, removeListener } from "svelte/shared.js"; import { addListener, assign, createElement, detachNode, insertNode, proto, removeListener } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var input; var input;

@ -169,6 +169,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var input; var input;

@ -1,5 +1,7 @@
import { assign, createElement, detachNode, insertNode, noop, proto, setInputType } from "svelte/shared.js"; import { assign, createElement, detachNode, insertNode, noop, proto, setInputType } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var input; var input;

@ -186,6 +186,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -1,5 +1,7 @@
import { assign, children, claimElement, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { assign, children, claimElement, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div; var div;

@ -179,6 +179,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var audio, audio_updating = false, audio_animationframe, audio_paused_value = true; var audio, audio_updating = false, audio_animationframe, audio_paused_value = true;

@ -1,5 +1,7 @@
import { addListener, assign, callAll, createElement, detachNode, insertNode, proto, removeListener, timeRangesToArray } from "svelte/shared.js"; import { addListener, assign, callAll, createElement, detachNode, insertNode, proto, removeListener, timeRangesToArray } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var audio, audio_updating = false, audio_animationframe, audio_paused_value = true; var audio, audio_updating = false, audio_animationframe, audio_paused_value = true;

@ -165,6 +165,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
components: { components: {

@ -2,6 +2,8 @@ import Imported from 'Imported.html';
import { assign, callAll, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { assign, callAll, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
components: { components: {

@ -151,6 +151,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
// this test should be removed in v2 // this test should be removed in v2

@ -1,5 +1,7 @@
import { assign, callAll, noop, proto } from "svelte/shared.js"; import { assign, callAll, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
// this test should be removed in v2 // this test should be removed in v2

@ -151,6 +151,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
methods: { methods: {

@ -1,5 +1,7 @@
import { assign, noop, proto } from "svelte/shared.js"; import { assign, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
var template = (function() { var template = (function() {
return { return {
methods: { methods: {

@ -175,6 +175,8 @@ var proto = {
_unmount: _unmount _unmount: _unmount
}; };
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text, p, text_1, text_2, text_3, text_4, p_1, text_5, text_6, text_8, if_block_4_anchor; var div, text, p, text_1, text_2, text_3, text_4, p_1, text_5, text_6, text_8, if_block_4_anchor;
@ -312,6 +314,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (2:1) {{#if a}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;
@ -334,6 +337,7 @@ function create_if_block(state, component) {
}; };
} }
// (8:1) {{#if b}}
function create_if_block_1(state, component) { function create_if_block_1(state, component) {
var p, text; var p, text;
@ -356,6 +360,7 @@ function create_if_block_1(state, component) {
}; };
} }
// (12:1) {{#if c}}
function create_if_block_2(state, component) { function create_if_block_2(state, component) {
var p, text; var p, text;
@ -378,6 +383,7 @@ function create_if_block_2(state, component) {
}; };
} }
// (18:1) {{#if d}}
function create_if_block_3(state, component) { function create_if_block_3(state, component) {
var p, text; var p, text;
@ -400,6 +406,7 @@ function create_if_block_3(state, component) {
}; };
} }
// (25:0) {{#if e}}
function create_if_block_4(state, component) { function create_if_block_4(state, component) {
var p, text; var p, text;

@ -1,5 +1,7 @@
import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; import { appendNode, assign, createComment, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js";
// generated by Svelte v1.39.2
function create_main_fragment(state, component) { function create_main_fragment(state, component) {
var div, text, p, text_1, text_2, text_3, text_4, p_1, text_5, text_6, text_8, if_block_4_anchor; var div, text, p, text_1, text_2, text_3, text_4, p_1, text_5, text_6, text_8, if_block_4_anchor;
@ -137,6 +139,7 @@ function create_main_fragment(state, component) {
}; };
} }
// (2:1) {{#if a}}
function create_if_block(state, component) { function create_if_block(state, component) {
var p, text; var p, text;
@ -159,6 +162,7 @@ function create_if_block(state, component) {
}; };
} }
// (8:1) {{#if b}}
function create_if_block_1(state, component) { function create_if_block_1(state, component) {
var p, text; var p, text;
@ -181,6 +185,7 @@ function create_if_block_1(state, component) {
}; };
} }
// (12:1) {{#if c}}
function create_if_block_2(state, component) { function create_if_block_2(state, component) {
var p, text; var p, text;
@ -203,6 +208,7 @@ function create_if_block_2(state, component) {
}; };
} }
// (18:1) {{#if d}}
function create_if_block_3(state, component) { function create_if_block_3(state, component) {
var p, text; var p, text;
@ -225,6 +231,7 @@ function create_if_block_3(state, component) {
}; };
} }
// (25:0) {{#if e}}
function create_if_block_4(state, component) { function create_if_block_4(state, component) {
var p, text; var p, text;

Loading…
Cancel
Save