From ebdf5852284e60ee2df8474032682ad07cec2bc1 Mon Sep 17 00:00:00 2001 From: Bradley Momberger Date: Thu, 14 Sep 2017 19:17:57 -0400 Subject: [PATCH 1/2] Warn when rendering stache tokens at the top level instead of contained in HTML tags (#202) --- can-stache.js | 6 ++++++ test/stache-test.js | 13 +++++++++++++ 2 files changed, 19 insertions(+) diff --git a/can-stache.js b/can-stache.js index 240ee3ae..22f955df 100644 --- a/can-stache.js +++ b/can-stache.js @@ -395,6 +395,12 @@ function stache (template) { } } else { + //!steal-remove-start + if(mode !== "/" && state.sectionElementStack.length === 0) { + dev.warn("Stache tokens at the top level reduce rendering performance; {{" + text + "}} should be contained in an HTML element."); + } + //!steal-remove-end + makeRendererAndUpdateSection( state.textContentOnly || section, mode, expression ); } }, diff --git a/test/stache-test.js b/test/stache-test.js index c9c19c52..2037a211 100644 --- a/test/stache-test.js +++ b/test/stache-test.js @@ -6173,6 +6173,19 @@ function makeTest(name, doc, mutation) { }); + devHelpers.devOnlyTest("Warn when the top level element is a Stache section without enclosing HTML (#202)", function() { + var regex = /top level.*performance/; + var teardown = devHelpers.willWarn(regex); + + stache("

{{#if foo}}

{{bar}}

{{/if}}

"); // from here down should not warn + stache("

{{baz}}

"); + QUnit.equal(teardown(), 0, "Top-level warning was not called in inappropriate cases"); + + teardown = devHelpers.willWarn(regex); + stache("{{#if foo}}

{{bar}}

{{/if}}"); // this one should warn + QUnit.equal(teardown(), 1, "Top-level warning was called in appropriate case"); + }) + // PUT NEW TESTS RIGHT BEFORE THIS! } From af277468a547c1685e158f224c6f7bd02b9c24c0 Mon Sep 17 00:00:00 2001 From: Bradley Momberger Date: Thu, 14 Sep 2017 19:29:12 -0400 Subject: [PATCH 2/2] Fix errors in tests from extra warnings --- test/stache-test.js | 50 ++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/test/stache-test.js b/test/stache-test.js index 2037a211..70fb059b 100644 --- a/test/stache-test.js +++ b/test/stache-test.js @@ -5506,37 +5506,35 @@ function makeTest(name, doc, mutation) { } }); - devHelpers.devOnlyTest("warn on missmatched tag (canjs/canjs#1476)", function() { - var makeWarnChecks = function(input, texts) { - var count = 0; - var _warn = canDev.warn; - canDev.warn = function(text) { - equal(text, texts[count++]); - }; - - stache(input); - - equal(count, texts.length); + devHelpers.devOnlyTest("warn on mismatched tag (canjs/canjs#1476)", function() { + + var expectedMessages = [ + "unexpected closing tag {{/foo}} expected {{/if}}", + "unexpected closing tag {{/foo}} expected {{/if}}", + "unexpected closing tag {{/foo}} expected {{/call}}" + ]; - canDev.warn = _warn; - }; + var teardown = devHelpers.willWarn(/unexpected closing tag/, function(message, matches) { + if(matches) { + if(expectedMessages.length < 1) { + QUnit.ok(false, "Unexpected warning trigger: " + message); + } + QUnit.equal(message, expectedMessages.shift(), message); + } + }); // Fails - makeWarnChecks("{{#if someCondition}}...{{/foo}}", [ - "unexpected closing tag {{/foo}} expected {{/if}}" - ]); - makeWarnChecks("{{^if someCondition}}...{{/foo}}", [ - "unexpected closing tag {{/foo}} expected {{/if}}" - ]); - makeWarnChecks("{{#call()}}...{{/foo}}", [ - "unexpected closing tag {{/foo}} expected {{/call}}" - ]); + stache("{{#if someCondition}}...{{/foo}});"); + stache("{{^if someCondition}}...{{/foo}}"); + stache("{{#call()}}...{{/foo}}"); // Successes - makeWarnChecks("{{#if}}...{{/}}", []); - makeWarnChecks("{{#if someCondition}}...{{/if}}", []); - makeWarnChecks("{{^if someCondition}}...{{/if}}", []); - makeWarnChecks("{{#call()}}...{{/call}}", []); + stache("{{#if}}...{{/}}"); + stache("{{#if someCondition}}...{{/if}}"); + stache("{{^if someCondition}}...{{/if}}"); + stache("{{#call()}}...{{/call}}"); + + QUnit.equal(teardown(), 3, "Three warning messages generated"); }); devHelpers.devOnlyTest("warn on unknown attributes (canjs/can-stache#139)", function(assert) {