msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

handle single identifiers in {@debug} tags

Browse Source
pull/1646/head
Rich Harris 6 years ago
parent a1264f583d
commit 401a6fea5d
6 changed files with 472 additions and 26 deletions
Show Stats Download Patch File Download Diff File

24
src/compile/nodes/DebugTag.ts
Unescape View File

@ -3,18 +3,17 @@ import Tag from './shared/Tag';
import Block from '../dom/Block';
import Expression from './shared/Expression';
import deindent from '../../utils/deindent';
import addToSet from '../../utils/addToSet';
export default class DebugTag extends Node {
expression: Expression;
expressions: Expression[];
constructor(compiler, parent, scope, info) {
super(compiler, parent, scope, info);
if (info.expression !== null)
// Debug when expression nodes change
this.expression = new Expression(compiler, parent, scope, info.expression);
else
// "Debug all"
this.expression = info.expression
this.expressions = info.identifiers.map(node => {
return new Expression(compiler, parent, scope, node);
});
}
build(
@ -23,15 +22,18 @@ export default class DebugTag extends Node {
parentNodes: string,
) {
// Debug all
if (this.expression === null) {
if (this.expressions.length === 0) {
block.builders.create.addLine('debugger;');
block.builders.update.addLine('debugger;');
} else {
const { dependencies } = this.expression;
const dependencies = new Set();
this.expressions.forEach(expression => {
addToSet(dependencies, expression.dependencies);
});
const condition = [...dependencies].map(d => `changed.${d}`).join(' || ');
const identifiers = this.expression.node.expressions.map(e => e.name).join(', ');
const identifiers = this.expressions.map(e => e.node.name).join(', ');
block.builders.update.addBlock(deindent`
if (${condition}) {

36
src/parse/state/mustache.ts
Unescape View File

@ -314,28 +314,36 @@ export default function mustache(parser: Parser) {
expression,
});
} else if (parser.eat('@debug')) {
let expression;
let identifiers;
// Implies {@debug} which indicates "debug all"
if (/\s*}/.test(parser.template[parser.index]))
expression = null;
else
expression = readExpression(parser);
if (expression !== null && expression.type !== 'SequenceExpression')
parser.error({
code: 'invalid-debug-args',
message: '{@debug ...} arguments must be identifers, not arbitrary expressions'
}, expression.start);
if (parser.read(/\s*}/)) {
identifiers = [];
} else {
const expression = readExpression(parser);
identifiers = expression.type === 'SequenceExpression'
? expression.expressions
: [expression];
identifiers.forEach(node => {
if (node.type !== 'Identifier') {
parser.error({
code: 'invalid-debug-args',
message: '{@debug ...} arguments must be identifiers, not arbitrary expressions'
}, node.start);
}
});
parser.allowWhitespace();
parser.eat('}', true);
parser.allowWhitespace();
parser.eat('}', true);
}
parser.current().children.push({
start,
end: parser.index,
type: 'DebugTag',
expression,
identifiers
});
} else {
const expression = readExpression(parser);

290
test/js/samples/debug-foo/expected-bundle.js
Unescape View File

@ -0,0 +1,290 @@
function noop() {}
function assign(tar, src) {
for (var k in src) tar[k] = src[k];
return tar;
}
function append(target, node) {
target.appendChild(node);
}
function insert(target, node, anchor) {
target.insertBefore(node, anchor);
}
function detachNode(node) {
node.parentNode.removeChild(node);
}
function destroyEach(iterations, detach) {
for (var i = 0; i < iterations.length; i += 1) {
if (iterations[i]) iterations[i].d(detach);
}
}
function createElement(name) {
return document.createElement(name);
}
function createText(data) {
return document.createTextNode(data);
}
function setData(text, data) {
text.data = '' + data;
}
function blankObject() {
return Object.create(null);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
this.set = noop;
this._fragment.d(detach !== false);
this._fragment = null;
this._state = {};
}
function _differs(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
function fire(eventName, data) {
var handlers =
eventName in this._handlers && this._handlers[eventName].slice();
if (!handlers) return;
for (var i = 0; i < handlers.length; i += 1) {
var handler = handlers[i];
if (!handler.__calling) {
try {
handler.__calling = true;
handler.call(this, data);
} finally {
handler.__calling = false;
}
}
}
}
function get() {
return this._state;
}
function init(component, options) {
component._handlers = blankObject();
component._bind = options._bind;
component.options = options;
component.root = options.root || component;
component.store = options.store || component.root.store;
}
function on(eventName, handler) {
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
handlers.push(handler);
return {
cancel: function() {
var index = handlers.indexOf(handler);
if (~index) handlers.splice(index, 1);
}
};
}
function set(newState) {
this._set(assign({}, newState));
if (this.root._lock) return;
this.root._lock = true;
callAll(this.root._beforecreate);
callAll(this.root._oncreate);
callAll(this.root._aftercreate);
this.root._lock = false;
}
function _set(newState) {
var oldState = this._state,
changed = {},
dirty = false;
for (var key in newState) {
if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
}
if (!dirty) return;
this._state = assign(assign({}, oldState), newState);
this._recompute(changed, this._state);
if (this._bind) this._bind(changed, this._state);
if (this._fragment) {
this.fire("state", { changed: changed, current: this._state, previous: oldState });
this._fragment.p(changed, this._state);
this.fire("update", { changed: changed, current: this._state, previous: oldState });
}
}
function callAll(fns) {
while (fns && fns.length) fns.shift()();
}
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}
var proto = {
destroy,
get,
fire,
on,
set,
_recompute: noop,
_set,
_mount,
_differs
};
/* generated by Svelte vX.Y.Z */
function create_main_fragment(component, ctx) {
var text, p, text_1, text_2;
var each_value = ctx.things;
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
}
return {
c() {
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
text = createText("\n\n");
p = createElement("p");
text_1 = createText("foo: ");
text_2 = createText(ctx.foo);
},
m(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}
insert(target, text, anchor);
insert(target, p, anchor);
append(p, text_1);
append(p, text_2);
},
p(changed, ctx) {
if (changed.things) {
each_value = ctx.things;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block(component, child_ctx);
each_blocks[i].c();
each_blocks[i].m(text.parentNode, text);
}
}
for (; i < each_blocks.length; i += 1) {
each_blocks[i].d(1);
}
each_blocks.length = each_value.length;
}
if (changed.foo) {
setData(text_2, ctx.foo);
}
},
d(detach) {
destroyEach(each_blocks, detach);
if (detach) {
detachNode(text);
detachNode(p);
}
}
};
}
// (1:0) {#each things as thing}
function create_each_block(component, ctx) {
var span, text_value = ctx.thing.name, text, text_1;
return {
c() {
span = createElement("span");
text = createText(text_value);
text_1 = createText("\n\t");
const { foo } = ctx;
console.log({ foo });
debugger;
},
m(target, anchor) {
insert(target, span, anchor);
append(span, text);
insert(target, text_1, anchor);
},
p(changed, ctx) {
if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
setData(text, text_value);
}
if (changed.foo) {
const { foo } = ctx;
console.log({ foo });
debugger;
}
},
d(detach) {
if (detach) {
detachNode(span);
detachNode(text_1);
}
}
};
}
function get_each_context(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.thing = list[i];
child_ctx.each_value = list;
child_ctx.thing_index = i;
return child_ctx;
}
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(SvelteComponent.prototype, proto);
export default SvelteComponent;

140
test/js/samples/debug-foo/expected.js
Unescape View File

@ -0,0 +1,140 @@
/* generated by Svelte vX.Y.Z */
import { append, assign, createElement, createText, destroyEach, detachNode, init, insert, proto, setData } from "svelte/shared.js";
function create_main_fragment(component, ctx) {
var text, p, text_1, text_2;
var each_value = ctx.things;
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
}
return {
c() {
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
text = createText("\n\n");
p = createElement("p");
text_1 = createText("foo: ");
text_2 = createText(ctx.foo);
},
m(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}
insert(target, text, anchor);
insert(target, p, anchor);
append(p, text_1);
append(p, text_2);
},
p(changed, ctx) {
if (changed.things) {
each_value = ctx.things;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block(component, child_ctx);
each_blocks[i].c();
each_blocks[i].m(text.parentNode, text);
}
}
for (; i < each_blocks.length; i += 1) {
each_blocks[i].d(1);
}
each_blocks.length = each_value.length;
}
if (changed.foo) {
setData(text_2, ctx.foo);
}
},
d(detach) {
destroyEach(each_blocks, detach);
if (detach) {
detachNode(text);
detachNode(p);
}
}
};
}
// (1:0) {#each things as thing}
function create_each_block(component, ctx) {
var span, text_value = ctx.thing.name, text, text_1;
return {
c() {
span = createElement("span");
text = createText(text_value);
text_1 = createText("\n\t");
const { foo } = ctx;
console.log({ foo });
debugger;
},
m(target, anchor) {
insert(target, span, anchor);
append(span, text);
insert(target, text_1, anchor);
},
p(changed, ctx) {
if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
setData(text, text_value);
}
if (changed.foo) {
const { foo } = ctx;
console.log({ foo });
debugger;
}
},
d(detach) {
if (detach) {
detachNode(span);
detachNode(text_1);
}
}
};
}
function get_each_context(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.thing = list[i];
child_ctx.each_value = list;
child_ctx.thing_index = i;
return child_ctx;
}
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);
if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor);
}
}
assign(SvelteComponent.prototype, proto);
export default SvelteComponent;

6
test/js/samples/debug-foo/input.html
Unescape View File

@ -0,0 +1,6 @@
{#each things as thing}
<span>{thing.name}</span>
{@debug foo}
{/each}
<p>foo: {foo}</p>

2
test/validator/samples/debug-invalid-args/errors.json
Unescape View File

@ -1,6 +1,6 @@
[{
"code": "invalid-debug-args",
"message": "{@debug ...} arguments must be identifers, not arbitrary expressions",
"message": "{@debug ...} arguments must be identifiers, not arbitrary expressions",
"start": {
"line": 2,
"column": 9,

Write Preview
Loading…
Cancel
Save