Ignoring certain attributes

[sgammon]

Hi esteemed idom authors,

We are using a UI framework which, when upgrading components to a decorated state, adds an attribute to the element being upgraded.

Sometimes, when we render over these upgraded components with idom, the upgraded components get trampled, presumably because the attribute signaling its upgrade is removed, having been added after idom’s initial render.

So, my question: is there a mechanism to skip certain named attributes in the DOM, if they are found during idom render, but aren’t present in the template?

We are driving idom from Soy, so, for us, some JSAPI change or addition might solve this (I.e. a config object passed to ‘IncrementalDOM.patch’).

We can’t use the skip calls, for instance, because those would have to be generated by Soy.

Thank you in advance for your time and help

[iteriani]

I think you can intercept changes to attributes

https://github.com/google/incremental-dom/blob/master/src/attributes.ts

[sgammon]

@iteriani i see, so i could register an attribute mutator, and then just return the value i'm given to maintain what's there? i'll give this a try, thank you.

[iteriani]

Yeah so somewhere in bootstrap you just do

incrementaldom.attributes['someAttribute'] = (el:Element, name: string, newAttribute: unknown) => {...}

[sgammon]

@iteriani this was fantastic and worked for our case, thank you

however, i was wondering if there is a way to skip subtrees for a given node, when there is an attribute present?

coming back to this issue, it solves the trampling of the attribute, but not the trampling of sub-dom which would now be managed by JavaScript.

basically, what i'm looking for here, is a similar way to filter render calls - but to innerHTML rather than a regular attribute. is this supported? the intention would be, ignore innerHTML attribute changes for any element with a given attribute set, for instance, data-upgraded="...".

[iteriani]

We have something like this. There's an API for elements that's just element/applyAttribute/close where you can do something like open(...) if(!currentElement.hasAttribute(...)) {} else { skip()}

…

On Tue, Oct 29, 2019, 12:35 PM Sam Gammon ***@***.***> wrote: @iteriani <https://github.com/iteriani> this was fantastic and worked for our case, thank you however, i was wondering if there is a way to skip subtrees for a given node, when there is an attribute present? coming back to this issue, it solves the trampling of the attribute, but not the trampling of sub-dom which would now be managed by JavaScript. basically, what i'm looking for here, is a similar way to filter render calls - but to innerHTML rather than a regular attribute. is this supported? the intention would be, ignore innerHTML attribute changes for any element with a given attribute set, for instance, data-upgraded="...". — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#412?email_source=notifications&email_token=AA2MCG7YTDSA2HUI3SXD75TQRCGBXA5CNFSM4IEI72IKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECRZ6CI#issuecomment-547593993>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2MCGZHZRHTCSJPCWKQ4IDQRCGBXANCNFSM4IEI72IA> .

[sparhami]

You can also use elementOpen / elementClose, no need to use open/close directly (unless you want to). Just make sure to call the close call in both flows:

const el = elementOpen('div');
// Check for some attribute or DOM property
if(!el._rendered) {
  // Render some DOM, set `innerHTML` or whatever
  el._rendered = true;
} else {
  skip();
}
elementClose('div');