Adds DebugTag

src/compile/nodes/DebugTag.ts

@@ -0,0 +1,25 @@
+import Node from './shared/Node';
+import Tag from './shared/Tag';
+import Block from '../dom/Block';
+import deindent from '../../utils/deindent';
+
+export default class DebugTag extends Tag {
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+	) {
+		const { dependencies } = this.expression;
+
+		const condition = [...dependencies].map(d => `changed.${d}`).join(' || ');
+
+		const identifiers = [...dependencies].join(', ');
+
+		block.builders.update.addBlock(deindent`
+			if (${condition}) {
+				const { ${identifiers} } = ctx;
+				debugger;
+			}
+		`);
+	}
+}

src/compile/nodes/Element.ts

@@ -21,7 +21,44 @@ import mapChildren from './shared/mapChildren';
 import { dimensions } from '../../utils/patterns';
 
 // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
-const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' '));
+const booleanAttributes = new Set(['async',
+	'autocomplete',
+	'autofocus',
+	'autoplay',
+	'border',
+	'challenge',
+	'checked',
+	'compact',
+	'contenteditable',
+	'controls',
+	'default',
+	'defer',
+	'disabled',
+	'formnovalidate',
+	'frameborder',
+	'hidden',
+	'indeterminate',
+	'ismap',
+	'loop',
+	'multiple',
+	'muted',
+	'nohref',
+	'noresize',
+	'noshade',
+	'novalidate',
+	'nowrap',
+	'open',
+	'readonly',
+	'required',
+	'reversed',
+	'scoped',
+	'scrolling',
+	'seamless',
+	'selected',
+	'sortable',
+	'spellcheck',
+	'translate'
+]);
 
 export default class Element extends Node {
 	type: 'Element';

src/compile/nodes/shared/mapChildren.ts

@@ -7,6 +7,7 @@ import Head from '../Head';
 import IfBlock from '../IfBlock';
 import MustacheTag from '../MustacheTag';
 import RawMustacheTag from '../RawMustacheTag';
+import DebugTag from '../DebugTag';
 import Slot from '../Slot';
 import Text from '../Text';
 import Title from '../Title';
@@ -24,6 +25,7 @@ function getConstructor(type): typeof Node {
 		case 'IfBlock': return IfBlock;
 		case 'MustacheTag': return MustacheTag;
 		case 'RawMustacheTag': return RawMustacheTag;
+		case 'DebugTag': return DebugTag;
 		case 'Slot': return Slot;
 		case 'Text': return Text;
 		case 'Title': return Title;

src/parse/state/mustache.ts

@@ -313,6 +313,20 @@ export default function mustache(parser: Parser) {
 			type: 'RawMustacheTag',
 			expression,
 		});
+	} else if (parser.eat('@debug')) {
+		const expression = readExpression(parser);
+		
+		parser.allowWhitespace();
+		parser.eat('}', true);
+
+		// console.error(expression);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'DebugTag',
+			expression
+		});
 	} else {
 		const expression = readExpression(parser);