These are chat archives for canjs/canjs

3rd
Jan 2019
Ivo Pinheiro
@ivospinheiro
Jan 03 00:23
Hi @phillipskevin and @justinbmeyer finally I've been able to reproduce the can-view-callbacks performance issue on Firefox older versions like FF44.0.2
I've also open an issue on can-view-callbacks with the following id canjs/can-view-callbacks#108
Justin Meyer
@justinbmeyer
Jan 03 00:26
@ivospinheiro I think we just saw this in IE. What happens if you comment out the MutationObserver code?
Ivo Pinheiro
@ivospinheiro
Jan 03 00:32
If I do this in my example the components are not mounted
@justinbmeyer I've commented out these two line:
                //enableMutationObserver();
                //renderTagsInDocument(tagName);
Ivo Pinheiro
@ivospinheiro
Jan 03 00:37
It seems that we have performance issues when multiple can components are inserted on the page at the same time
Kevin Phillips
@phillipskevin
Jan 03 02:23
Thanks @ivospinheiro. I'll take a look at this in the morning.
Julian
@pYr0x
Jan 03 09:48
hey guys.. i want to start some can router component.. any thoughts ? :)
Matthew Phillips
@matthewp
Jan 03 13:30
what's the idea?
Ivo Pinheiro
@ivospinheiro
Jan 03 14:08
Hi!
Is there any way to disable the automount for some component?
I was trying to fix issue canjs/can-react-component#23 and at the same time fix the issue I've open canjs/can-react-component#24
Matthew Phillips
@matthewp
Jan 03 14:09
I thought there was a way in can-component but I can't find it
Ivo Pinheiro
@ivospinheiro
Jan 03 14:10
There is a way setting data-can-automount="false" for the html tag
Matthew Phillips
@matthewp
Jan 03 14:10
yeah
Ivo Pinheiro
@ivospinheiro
Jan 03 14:11
But in this case I pretend to do this for some specific instance
Matthew Phillips
@matthewp
Jan 03 14:11
maybe make it possible to pass an options object as the third argument
{ autoMount: false } or something...
Ivo Pinheiro
@ivospinheiro
Jan 03 14:13
could we do it also on the tag itself? like:
<component auto-mount="false"></component>
Matthew Phillips
@matthewp
Jan 03 14:14
No, that wouldn't be possible, the decision to automount has to come well before rendering occurs
It would have to be on the can-component (or can-react-component in your case) options object
Ivo Pinheiro
@ivospinheiro
Jan 03 14:16
in the case of can-react-component could the component be rendered like:
        render: function() { // eslint-disable-line react/display-name
            return React.createElement(CanComponent.prototype.tag, {
                ref: this.createComponent,
                autoMount: false
            });
        }
Matthew Phillips
@matthewp
Jan 03 14:17
I don't think can-react-component uses can-view-callbacks at all
Ivo Pinheiro
@ivospinheiro
Jan 03 14:18
It seems that the latest version 2.0.0 uses it, that's why it create the element without an initial state, I guess
Matthew Phillips
@matthewp
Jan 03 14:18
Oh I see, it wraps a can-component
So yeah, I think the fix is to make can-component take a autoMount: false option
I thought it had something like this but i'm not seeing it...
Ivo Pinheiro
@ivospinheiro
Jan 03 14:21
Because if we disable the automount we can the change the createComponent to something like:
        createComponent: function(el) {
            if (this.canComponent) {
                this.canComponent = null;
            }

            if (el) {
                this.canComponent = new CanComponent(el, {viewModel: this.props});
                this.vm = this.canComponent.viewModel;
            }
        },
and this will fix both issues
I've digged into can-component but it seems that there is no way to disable the automount
Kevin Phillips
@phillipskevin
Jan 03 15:20
another way to do this would be to have can-view-callbacks export this map: https://github.com/canjs/can-view-callbacks/blob/50f819e03e9f6d51f46538dff0ad7f8fb1f565f9/can-view-callbacks.js#L36
so you could mark the element as already rendered
Ivo Pinheiro
@ivospinheiro
Jan 03 15:23
@phillipskevin I'm not sure if it will work because to do that we need the DOM element, right?
And in this case we don't have it already?
Kevin Phillips
@phillipskevin
Jan 03 15:23
isn't that el?
Ivo Pinheiro
@ivospinheiro
Jan 03 15:24
when createElement is called the component is already mounted on the recent browser versions
So I was trying to find a way to disable the automount for the DOM node created using
        render: function() { // eslint-disable-line react/display-name
            return React.createElement(CanComponent.prototype.tag, {
                ref: this.createComponent,
            });
        }
Kevin Phillips
@phillipskevin
Jan 03 15:28
ah, ok
Ivo Pinheiro
@ivospinheiro
Jan 03 15:31
It seems that when createComponent Ref is called the the component is already rendered on the page
Ivo Pinheiro
@ivospinheiro
Jan 03 15:54
should I create a feature request on can-view-callbacks to disable automount?
by the way @phillipskevin have you had already the opportunity to take a look to the canjs/can-view-callbacks#108 issue?
Kevin Phillips
@phillipskevin
Jan 03 15:56
I'm starting to take a look now
Kevin Phillips
@phillipskevin
Jan 03 16:45
@ivospinheiro I noticed you're using babel-polyfill, is there a specific polyfill you need?
Justin Meyer
@justinbmeyer
Jan 03 16:56
@ivospinheiro I gave you write access to : https://github.com/canjs/can-react-component/invitations
@ivospinheiro I think you can add an attribute to your HTML element
and it will disable automount
@pYr0x you are thinking of trying to do: canjs/canjs#4448 ?
Ivo Pinheiro
@ivospinheiro
Jan 03 17:18
@phillipskevin probably is not needed. I've used it while I was creating the sample code, and then forgot to remove it

@justinbmeyer how can I disable automount of a specific component?
Probably we have to do some changes on can-view-callbacks also?
Probably here:
https://github.com/canjs/can-view-callbacks/blob/50f819e03e9f6d51f46538dff0ad7f8fb1f565f9/can-view-callbacks.js#L272

Or on can-component?
Probably here:
https://github.com/canjs/can-component/blob/fd730588dac4080163321397c24e75fa16f5a563/can-component.js#L337

Ivo Pinheiro
@ivospinheiro
Jan 03 17:33
@phillipskevin regarding the canjs/can-view-callbacks#108 issue it seems that this issue happens also only using can components.
It seems to be related with the amount of custom elements that are inserted on the page.
Maybe the components should be mounted using a similar approach to react:
https://reactjs.org/docs/design-principles.html#scheduling
Kevin Phillips
@phillipskevin
Jan 03 17:34
yeah, it's not specific to can-react-component
Justin Meyer
@justinbmeyer
Jan 03 18:03
React’s mounting only plays nicely with itself. We are trying to make components work with the DOM naturally.
Kevin Phillips
@phillipskevin
Jan 03 18:05
@ivospinheiro can you try out https://github.com/canjs/can-view-callbacks/tree/no-mutation-observer in your app / firefox version?
I'm still doing some testing, but it seems to fix the issue in your sample repo
Ivo Pinheiro
@ivospinheiro
Jan 03 18:18

@justinbmeyer about this:

@justinbmeyer how can I disable automount of a specific component?
Probably we have to do some changes on can-view-callbacks also?
Probably here:
https://github.com/canjs/can-view-callbacks/blob/50f819e03e9f6d51f46538dff0ad7f8fb1f565f9/can-view-callbacks.js#L272

Or on can-component?
Probably here:
https://github.com/canjs/can-component/blob/fd730588dac4080163321397c24e75fa16f5a563/can-component.js#L337
Could you give some hint

@phillipskevin it seems to run fast and smooth
Kevin Phillips
@phillipskevin
Jan 03 19:41
Matthew Phillips
@matthewp
Jan 03 19:45
@phillipskevin are you going to do a patch on canjs/canjs as well?
Kevin Phillips
@phillipskevin
Jan 03 19:45
yeah, let me check what else has been published
Matthew Phillips
@matthewp
Jan 03 19:48
can-stache is one