Conflict with F-Twelve tool

[pgross41]

Description of Issue

F-Twelve adds a JS console to the DOM i.e. whenever console.log is called, it writes that message to the DOM. However, when the DOM mutates, XFC writes to console.log so F-Twelve writes the message to the DOM and the cycle repeats. This causes an endless loop, freezing the browser.

System Configuration

Project Version

1.8.1

Additional Details (optional)

I would fix this on the F-Twelve side if I could but I don't think I can. The whole tool is designed around outputing console.log messages to the DOM.

Steps to Reproduce the Issue

1. Install XFC
2. Save the f-twelve js and css files to \example\embedded_app_lifecycle
3. Add the following to the head tag in 2_c_provider_embedded_app.html

   <link rel="stylesheet" href="f-twelve.css"/>
   <script src="f-twelve.umd.js"></script>

4. Add FTwelve.show(); in the body's script tag after XFC.Provider.init in 2_c_provider_embedded_app.html
5. Navigate to http://localconsumer.com:8080/example/embedded_app_lifecycle/2_c_index.html
6. Open your browser's console
7. Click "Console" in the bottom left of the DOM to open the f-twelve console
8. Everything freezes and the below message gets written to the console forever. In Chrome the only way to close the window is kill the process.

Adding a breakpoint to the console.log in logger.js shows the self.requestResize() in application.js at the bottom of the stack.

It seems like this is meant to be called only on a resize, so maybe it needs to be smarter about detecting if the event is actually a resize or not. Another idea is add a special exception class (xfc-exclude-mutation-observer for example) which I would add to the root element of f-twelve:

if(!Array.from(mutations).some((mutation) => parentHasClass(mutation.target, 'xfc-exclude-mutation-observer'))){
    return self.requestResize()
}

The parentHasClass helper function used above would be like:

const parentHasClass = function(element, className) {
    if (element.classList && Array.from(element.classList).some((pClassName) => pClassName === className)){
        return true;
    } else {
        return element.parentNode && parentHasClass(element.parentNode, className);
    }
}

Expected Outcomes

It is common for an MPage developer to use F-Twelve as well as cerner-smart-embeddable-lib, they should able to use them both at the same time.

[pgross41]

XFC should provide a way to disable logging at run-time instead of build-time. Apps that don't use webpack have no way to disable the logging. Theoretically they could add process.env.NODE_ENV = 'production' to their source code but setting a global isn't good practice.

You also can't assume all users are importing XFC as an ES6 module. Another lib such as cerner-smart-embeddable-lib is pre-building itself with XFC and providing a .min.js version which does not get updated by the DefinePlugin.