These are chat archives for ractivejs/ractive

30th
Oct 2017
kouts
@kouts
Oct 30 2017 08:03
Is there any way to parse a template in runtime and be reactive?
Cerem Cem ASLAN
@ceremcem
Oct 30 2017 09:17

Is there any way to parse a template in runtime and be reactive?

what do you mean by that? isn't parsing template in the runtime the default behavior of Ractive?

what do you mean by being "reactive"?
kouts
@kouts
Oct 30 2017 09:28
I'm using jquery datatables and I'm trying to pass an ractive (component?, partial?) into the render function, something like this: https://github.com/DataTables/DataTables/issues/435#issuecomment-294266648
Cerem Cem ASLAN
@ceremcem
Oct 30 2017 09:32
If I get you correcly, you want to add dom elements to ractive template in the runtime?
kouts
@kouts
Oct 30 2017 09:36
yes, I'm trying to render a component into a dom element (in this case the datatables cell)
kouts
@kouts
Oct 30 2017 09:41
I try to create the component then stick it to the ractive instance with attachChild but I get an error TypeError: t.set is not a function
I don't think what I'm trying to achieve can be done
Arnaud Dagnelies
@dagnelies
Oct 30 2017 09:46
Hi, you want to make a datatable widget, right?
instead of posting "how" you want to achieve something, it's often more helpful to describe "what" you want to achieve
kouts
@kouts
Oct 30 2017 09:47
I'm trying to "pass" reactivity into a jQuery datatables cell
Arnaud Dagnelies
@dagnelies
Oct 30 2017 09:48
nvm, I read too quickly, I just re-read what you said ...I don't think you can pass ractive managed stuff inside a the jquery datatable renderer
It's more the other way round, that you wrap the datatable as decorator or component inside ractive
...it's fairly basic compared to the jquery datatable though
kouts
@kouts
Oct 30 2017 09:51
thanks @dagnelies , yes I know, it's that jQuery datatables uses it's own renderer function so I can't bind e.g Ractive click events inside the generated DOM. That is if I generate the rows using the renderer function provided by jQuery datatables
Arnaud Dagnelies
@dagnelies
Oct 30 2017 09:52
For advanced functionality, the best way would probably be to wrap it in a component: https://ractive.js.org/plugins/#components
...it's kind of advanced and not easy but you can do all kind of stuff with such a wrapper.
kouts
@kouts
Oct 30 2017 09:57
Yeah I know, I mostly do it the way you describe but this way Ractive renders the table rows, the thing is I want to use the datatables render function in order to have deferred rendering
I just managed to do it by creating a new Ractive instance for each cell, but it's overkill I think
Cerem Cem ASLAN
@ceremcem
Oct 30 2017 09:58
wouldn't anchors help on this?
Arnaud Dagnelies
@dagnelies
Oct 30 2017 10:03
dunno, never heard of these until now. ...Isn't it basically just a way to declare an insertion point without element?
kouts
@kouts
Oct 30 2017 10:07
anchors would't play because datatable cells do not belong to an ractive instance
I will find another solution, thanks all!
Arnaud Dagnelies
@dagnelies
Oct 30 2017 10:12
welcome
Joseph
@fskreuz
Oct 30 2017 17:44
Thoughts on using jsdom to test all the things?
Chris Reeves
@evs-chris
Oct 30 2017 18:06
We've tried that before, but it was quite some time ago, and I think there was a good bit of missing functionality
Joseph
@fskreuz
Oct 30 2017 18:11
ahh
Chris Reeves
@evs-chris
Oct 30 2017 18:13
I'm certainly not opposed to it, as the test suite has quite a few 'oh yeah, phantom hates this test for some reason' comments and conditionals
I don't know whether jsdom would be better, though
would it handle transitions?
Joseph
@fskreuz
Oct 30 2017 18:14
That was what I was thinking of :D
And the various places where code directly uses window and document.
Chris Reeves
@evs-chris
Oct 30 2017 18:15
I've been hoping that electron would get an actual headless mode for quite some time, but perhaps it's time to just go ahead and require xvfb for the whole suite
would be cool to have a Firefox equivalent to electron too
Joseph
@fskreuz
Oct 30 2017 18:16
Slimer?
Not electron, more like Phantom's Gecko counterpart.
Chris Reeves
@evs-chris
Oct 30 2017 18:19
interesting... seems to be trailing a bit, though better than phantom last I checked
Martin Kolárik
@MartinKolarik
Oct 30 2017 18:20
headless chrome?
Chris Reeves
@evs-chris
Oct 30 2017 18:21
is there a convenient npm package for that now?
Joseph
@fskreuz
Oct 30 2017 18:21
Thought about headless chrome. But was thinking more of eliminating the karma+[insert headless browser here] setup and go all Node for testing.
One less moving part in the machine :D
Martin Kolárik
@MartinKolarik
Oct 30 2017 18:22
there's definitely an API package (which works pretty well), not sure about getting the actuall chrome
Chris Reeves
@evs-chris
Oct 30 2017 18:23
you mean, you don't enjoy the occasional travis failure because of the random css cleanup test that fails 1 out of every 20 times or so?
Joseph
@fskreuz
Oct 30 2017 18:23
:joy:
Chris Reeves
@evs-chris
Oct 30 2017 18:24
looks like travis has a headless chrome addon available from trusty, which is I think where our build happens
@MartinKolarik while you're here, do you have a particular page that is exhibiting leaks? I wanted to see if I could track some of those down
the model tree is a bit leaky by design, in that abandoned keypaths are never pruned, but that shouldn't be too bad
Martin Kolárik
@MartinKolarik
Oct 30 2017 18:29
yeah, I found it because I'm currently migrating a page to node.js + ractive and our server memory usage was growing by 200 MB / hour with almost no users
for #3123, I was able to reduce it to 10 LoC, let me check of it still leaks after those changes (can't share the whole project, unfortunatelly)
I know Ractive keeps references to some stuff by design, but rendering the exact same template 10x vs 10000x should result in the exact same memory usage I think
which is not the case right now
Chris Reeves
@evs-chris
Oct 30 2017 18:34
definitely
Martin Kolárik
@MartinKolarik
Oct 30 2017 18:42
const Ractive = require('../../.build/ractive');
const { iterate } = require('leakage');

const comp = Ractive.extend({
    template: `{{attr}}`,
});

const f = () => {
    const ractive = new Ractive({
        template: `{{#each items}}<div>{{this}}</div> <comp attr={{this}}></comp>{{/each}}`,
        components: {
            comp,
        },
        data: () => ({ items: [ 1, 2, 3 ] }),
    });

    ractive.teardown();
};

f();

try {
    iterate(f);
} catch (e) {
    console.error(e);
}
MemoryLeakError: Heap grew on 6 subsequent garbage collections (180 of 180 iterations) by 5.66 MB.

  Iterations between GCs: 30

  Final GC details:
  [    464 kB] [+ 5497x] [- 134x] Array
  [    152 kB] [+ 2850x] [-   0x] Object
  [     48 kB] [+ 300x] [-   0x] Fragment
  [   26.9 kB] [+ 210x] [-   0x] Model
  ... (18 more)
Chris Reeves
@evs-chris
Oct 30 2017 19:27
that seems super weird... shouldn't the entire ractive instance be eligible for gc after each call to f either way?
we're not storing refs to instances globally anywhere that I know of
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:01
not 100% sure but I know that if you don't call .teardown() it leaks considerably more
Chris Reeves
@evs-chris
Oct 30 2017 20:10
it looks like parsing is a significant contributor to leakage, cause preparsing the instance template drops the leak by ~30% for me
I also find that odd
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:11
hmm that's interesting
how have you changed it exactly?
in my case it went to 5.15 MB
Chris Reeves
@evs-chris
Oct 30 2017 20:14
I also moved the items array out of the funcitons
that might account for some too
I started off with ~12mb leaking between gcs too
nulling out the fragment during teardown seems to help some too
perhaps v8s gc is not as sophisticated as I was thinking... I never thought I could be spoiled by the jvm gc shudder
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:17
:D
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:28
but tbh I'm not sure if the leakage module can be completely trusted
#3123 was clearly visible when taking heapdumps with v8-profiler too, but in this case it doesn't show any ractive related objects
Chris Reeves
@evs-chris
Oct 30 2017 20:30
every time I've done memory profiling with ractive, it turns up a bajillion allocated arrays as the main source of memory use
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:31
yes, arrays are the only thing I can see with v8-profiler too
Chris Reeves
@evs-chris
Oct 30 2017 20:33
is there something special about arrays in v8 that causes them to do a ton of internal cloning or otherwise leave lots of garbage that's hard to clean up?
closures, sure it makes sense that they're hard to gc, but arrays?
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:35
no idea
Chris Reeves
@evs-chris
Oct 30 2017 20:36
google isn't turning much up, and I don't recall anything from previous trips down memory profile lane
Chris Reeves
@evs-chris
Oct 30 2017 20:55
ah! one issue with using leakage is that it appears to be sync, so cleanup that happens in a promise.then doesn't register
Martin Kolárik
@MartinKolarik
Oct 30 2017 20:58
:+1: that would explain the difference between results from leakage and v8-profiler
Martin Kolárik
@MartinKolarik
Oct 30 2017 21:08
seems like the leaks reported by v8-profiler were also false positives...
if the changes in #3123 make sense, I say we publish a patch release, I push it to our staging env and will see if it still leaks in a more complex setup
Chris Reeves
@evs-chris
Oct 30 2017 21:14
I think I see a leak in expression proxy too
Martin Kolárik
@MartinKolarik
Oct 30 2017 21:15
are you testing the code in #3123 or latest edge?
Chris Reeves
@evs-chris
Oct 30 2017 21:15
nvm, this.models never register, they're just called on demand
just poking through suspect bits of code at the moment
Chris Reeves
@evs-chris
Oct 30 2017 21:21
do you want a 0.9.9, or will an edge build work?
Martin Kolárik
@MartinKolarik
Oct 30 2017 21:23
yeah I just realized edge build might be enough for now
we can make a patch after I check how much this actually helped
Chris Reeves
@evs-chris
Oct 30 2017 21:30
I cherry-picked it over to the 0.9 branch if you want to use the v0.9-dev tag to stay as close to 0.9 as possible
once travis finishes building, all will be on npm
Martin Kolárik
@MartinKolarik
Oct 30 2017 21:36
now I'm not sure if we have a bug in jsDelivr or I'm missing something
Chris Reeves
@evs-chris
Oct 30 2017 21:39
maybe a bug? https://unpkg.com/ractive@v0.9-dev/, which should switch to 0.9.9-build-1 when https://travis-ci.org/ractivejs/ractive/builds/295070767 finishes
Martin Kolárik
@MartinKolarik
Oct 30 2017 21:39
yes, it's a bug
tags with leading v don't work
Martin Kolárik
@MartinKolarik
Oct 30 2017 22:24
didn't work
Chris Reeves
@evs-chris
Oct 30 2017 22:54
nice!
Martin Kolárik
@MartinKolarik
Oct 30 2017 23:03
anyway, our testing env is using v0.9-dev now so I'll see how the changes helped tomorrow
thanks for the assistance @evs-chris