Stache templates leak for various reasons

[akagomez]

While searching for the source of a memory leak in my app I found several ways to influence the leak by manipulating my templates.

I extrapolated my findings into a few tests and committed them here in the stache-leaks branch.

The basis of the test involves adding/removing 1000 items to the DOM several times. Each test renders the items in a slightly different way (i.e. with the <content /> tag, without, with/without parent nodes, using the {{@key}} helper, etc)

The tests can also be run on JSBin: http://output.jsbin.com/yowaru

/cc @justinbmeyer @daffl @imjoshdean

[justinbmeyer]

The examples seem to be using mustache templates. Remember that if template is a string, it's assumed to be mustache.

Sent from my iPhone

On Nov 18, 2015, at 1:14 PM, Chris Gomez notifications@github.com wrote:

While searching for the source of a memory leak in my app I found several ways to influence the leak by manipulating my templates.

I extrapolated my findings into a few tests and committed them here in the stache-leaks branch.

The test involves adding/removing 1000 items to DOM several times. Each test renders the items in a slightly different way (i.e. with the tag, without, with/without parent nodes, using the {{@key}} helper, etc)

The tests can also be run on JSBin: http://output.jsbin.com/yowaru

/cc @justinbmeyer @daffl @imjoshdean

—
Reply to this email directly or view it on GitHub.

[akagomez]

Darn. @imjoshdean and I thought we covered that base here:

var template = can.stache(
    '<list-toggler-1></list-toggler-1>\n' +
    '<list-toggler-2></list-toggler-2>\n' +
    '<list-toggler-3></list-toggler-3>\n');
var frag = template();
$(document.body).append(frag);

I didn't realize stache/mustache could work together.

Okay. So. I've updated the tests to use stache explicitly. As a result 2 of the 3 test turned out to be false alarms. Then I tried a few more test cases, and found another. Test _#_1 is a doozy. Test _#_2 may not even be a leak.

(I updated the branch and the JSBin)

[justinbmeyer]

There's a <content> within an {{#each}}. This is not officially supported.

[akagomez]

From the can.Component.prototype.template documentation:

Use

The template specified by the template property works similar to the W3C Shadow DOM proposal. It represents the contents of a custom element, while being able to reposition the user provided source elements with the <content> tag.

There are three things to understand about a can.Component's template:

• It is inserted into the component's tag.
• It is rendered with access to the component instance's viewModel.
• <content> tags within the template act as insertion points for the source elements.

Additionally it says:

Use the <content> element to place the source content in the component's element within the component's template.

Source: http://canjs.com/docs/can.Component.prototype.template.html

While the documentation doesn't explicitly state that a <content> tag can reside within an {{#each}} block, I can't see how it could have been interpreted that it wasn't. Especially since it uses the terminology "insertion points".

[justinbmeyer]

<content> is based off the W3C <content> tag. This type of use will be impossible with that standard.

[justinbmeyer]

It says "insertion points" for the "source elements" which mimics the spec language. It doesn't say a "re-rendering of the light/user subtemplate".

[gsmeets]

I would like you to seriously consider officially supporting this, or support it in some other way. Repeatable templates is a very important feature.

[justinbmeyer]

Please propose an alternate API. Something like .

Sent from my iPhone

On Dec 26, 2015, at 9:09 AM, Guido Smeets notifications@github.com wrote:

I would like you to seriously consider officially supporting this, or support it in some other way. Repeatable templates is a very important feature.

—
Reply to this email directly or view it on GitHub.

[akagomez]

@justinbmeyer How would <user-template> differ from <content>?

[justinbmeyer]

@akagomez <user-template> would behave how our current <content> tag works, leaving <content> to work like how the spec <content> tag works.