diff --git a/src/compile/nodes/DebugTag.ts b/src/compile/nodes/DebugTag.ts
index bbe7d3a940..11f8812398 100644
--- a/src/compile/nodes/DebugTag.ts
+++ b/src/compile/nodes/DebugTag.ts
@@ -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}) {
diff --git a/src/parse/state/mustache.ts b/src/parse/state/mustache.ts
index 1a793b8787..fdcaad5e36 100644
--- a/src/parse/state/mustache.ts
+++ b/src/parse/state/mustache.ts
@@ -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);
diff --git a/test/js/samples/debug-foo/expected-bundle.js b/test/js/samples/debug-foo/expected-bundle.js
new file mode 100644
index 0000000000..53d68c309f
--- /dev/null
+++ b/test/js/samples/debug-foo/expected-bundle.js
@@ -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;
\ No newline at end of file
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
new file mode 100644
index 0000000000..4795565e59
--- /dev/null
+++ b/test/js/samples/debug-foo/expected.js
@@ -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;
\ No newline at end of file
diff --git a/test/js/samples/debug-foo/input.html b/test/js/samples/debug-foo/input.html
new file mode 100644
index 0000000000..6e926a4015
--- /dev/null
+++ b/test/js/samples/debug-foo/input.html
@@ -0,0 +1,6 @@
+{#each things as thing}
+ {thing.name}
+ {@debug foo}
+{/each}
+
+foo: {foo}
\ No newline at end of file
diff --git a/test/validator/samples/debug-invalid-args/errors.json b/test/validator/samples/debug-invalid-args/errors.json
index 82b7804c43..a92fb017a1 100644
--- a/test/validator/samples/debug-invalid-args/errors.json
+++ b/test/validator/samples/debug-invalid-args/errors.json
@@ -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,