Wijmo DOMNodeInserted Deprecation

Wijmo customers using older versions of Wijmo might see a console warning about deprecated mutation events.

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated () and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

The w3c deprecated a list of DOM Mutation Events, and browsers plan to drop support for this soon. For example, Chrome will remove these events in July 2024.

These events were promptly removed from Wijmo when these warnings appeared in Chrome. Wijmo switched to a better method called MutationObserver. This change was released in version 5.20232.939 of Wijmo.

What Were These Events Used for in Wijmo?

These events were used for a rare case. In fact, we have never heard of a customer with this use case. They are used in our Angular, AngularJS, React, and Vue interop. They listen for changes in child component collections in MARKUP. For example, you have the following Angular FlexGrid:

<wj-flex-grid #grid [itemsSource]="data">
    <wj-flex-grid-column [binding]="'id'"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'country'"></wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'amount'"></wj-flex-grid-column>
</wj-flex-grid>

and you used JavaScript to reorder the <wj-flex-grid-column> child nodes by manipulating the DOM directly, we have never recommended this usage and do not know of any customers who use it. 

Here is an example of code that would no longer work:

  handleShuffleColumns(e: any) {
    console.log("Shuffling columns\nCurrent columns order: ");
    console.table(this.grid.columns.map(column => column.binding));
    // Get the directive host element for this grid.
    if (this.grid.columns.length) {
      let columnsContainer = this.grid.columns[0]._wjBehaviour.elementRef.nativeElement.parentElement;
      let columnsHostElementsList = columnsContainer.children;
      // If there are at least columns present in FlexGrid.
      if(columnsHostElementsList.length > 3)
      {
        let firstColumnHostElement = columnsHostElementsList[0], thirdColumnHostElement = columnsHostElementsList[2];
        columnsContainer.insertBefore(thirdColumnHostElement, firstColumnHostElement);
        //
        console.log("Shifted Columns\nColumns order: ");
        console.table(this.grid.columns.map(column => column.binding));
      }
    }
  }

As you can see, this is very strange code. The correct code for this would be to use the columns API directly to rearrange the order of the columns in the column collection (not moving the columns in the DOM).

IMPORTANT: Most customers would rearrange these using the FlexGrid.columns collection in JS (or using some Angular ngFor or ngIf markup). Those standard cases are NOT impacted.

Impact on Wijmo Customers

As outlined above, the use case for these event listeners is very rare, so most Wijmo customers will not be impacted. You might be affected if your app meets the following:

• You use Angular, AngularJS, React, or Vue Interop
• You have (non-standard) code that modifies child component collections via DOM (see the above section for example)

What We Recommend

We recommend that our customers upgrade to the latest version of Wijmo if they think they will be impacted. You can use Wijmo version 5.20232.939 or later so that these events will no longer be used.

If you are, in fact, modifying child component collections using the DOM, we ALSO recommend that you use Wijmo APIs for this instead.

How can I test if I am impacted?

If you see the console warning in your application, it does not mean you will be impacted. The best way to verify is to remove the events in your browser while testing your application.

You can use flags to disable these events in your browser to test impacts.

For example, Chrome and Edge provide the following flags:

chrome://flags/#mutation-events
edge://flags/#mutation-events

Test your application with these events disabled and verify that Wijmo components function as expected. We expect very few or no customers to be impacted.

What if I can’t upgrade?

Some customers might not be able to upgrade Wijmo versions. If this is the case, you will continue to see warnings, but that doesn’t mean you will be impacted. To verify whether or not you are affected, you should test with the events disabled using flags (reference the above section). Again, we expect almost all customers will NOT be impacted, even if you can’t upgrade versions.

Use Wijmo APIs instead of DOM

If you are impacted, then you must be manipulating child component collections via the DOM. You should simply change your code to use Wijmo APIs (for example, FlexGrid.columns API to rearrange columns) or use standard framework markup like ngFor or ngIf in Angular.

Use Polyfill

If you can’t change your code, then you could try a Mutation Events polyfill. Simply import this module BEFORE loading any Wijmo components, and it will polyfill the deprecated events.

Questions or Concerns?

Please don’t hesitate to contact Wijmo Experts at wijmoexperts@mescius.com if you have issues or any further questions. We are happy to help.

Summary

We expect very few customers to be impacted by this change. The use of these events in Wijmo was for an edge case, and we don’t know of any customers who use this case. We removed the events from modern versions, so you will no longer see the warning after upgrading.

Ready to Get Started? Download Wijmo Today!