NO BUG: The DOM is loading twice in the builder

[Daniele]

Bricks Version: 1.5.3
Browser: Chrome 105.0.5195.125
OS: macOS Big Sur (11.4)

I’ve noticed that the DOM seems to load twice in the builder. I asked some people in the Discord channel and they could confirm this. I attach you a screenshot with the console output. Clean install, no plugins.

[itchycode]

If I am not wrong, this seems normal because there is iframe for the preview section.
And the preview DOM has it’s scripts loaded. So you will see 2 log.
I remember was there for many versions already.

[Daniele]

Hi @itchycode, yea, that was my first tought. But then I went a little deeper to make sure. If I add a script dependency in a custom element (a JavaScript function name passed to the $scripts variable), it should only be loaded in the builder frame. But again, we get two calls.

No idea what processes are running there exactly, but normally, for my understanding, this function should be executed 1x as soon as the DOM is ready and thereafter on every change of controls of the element the function depends on.

Of course, it may be that it is deliberately called twice for some reason. That’s why I just wanted to mention that.

[itchycode]

Thanks for sharing. I am not very good in frontend stuffs. Perhaps Bricks team can give some clues on this😊

[itchycode]

Hi Daniele, just an update because I am working on custom element recently.

The JS function defined in public $scripts will be auto triggered in bricks iframe when your custom element render.

If you saw it called twice on bricks builder initial load, it might due to 2 custom elements in the builder and not because of DOM loaded twice.

I still think that the second “JQMIGRATE: Migrate is installed, version 3.3.2” coming from iframe.

======My experiment=====
My element

  public $scripts      = ['itchyLog']; // Enqueue registered scripts by their handle

  public function enqueue_scripts() {

      wp_enqueue_script( 'itchy-log' );

  }

My js handler itchy-log registered earlier in wp_enqueue_scripts hook, dependency on bricks-scripts

wp_register_script(
 'itchy-loop',
 get_stylesheet_directory_uri() . '/itchy-log.js',
 [ 'bricks-scripts' ],
 filemtime( get_stylesheet_directory() . '/itchy-log.js' )
)

This is the content of my itchy-log.js

function itchyLog() {
    const timeStamp = '[' + new Date().toUTCString() + '] ';
    console.log(`${timeStamp} itchyLog`)
}
document.addEventListener("DOMContentLoaded", ()=>{

    const bircksIsPreview = window.location.href.includes('brickspreview')

    if( bricksIsFrontend ) {
        console.log(`This is in frontend`)
    } else {
        if( bircksIsPreview ) {
            console.log(`This is in preview`)
        } else {
            console.log(`This is in main builder`)
        }
    }
})

Once I add my 2 custom element, refresh page in builder mode, dev tools console tab looks like this:

1. JQMIGRATE running in main builder
2. My JS DOMContentLoaded, detected currently in main builder
3. I assumed End in main builder.
4. JQMIGRATE running in builder iframe
5. MY JS DOMContentLoaded, detected currently in iframe preview
6. 2 elements rendered, trigger itchyLog function, console log out the time
7. I assumed End in preview iframe.

In actual frontend, it just looks like this:

1. MY JS DOMContentLoaded, detected currently in frontend
2. End

PS: $scripts only the functions to be auto running in Builder Iframe upon rendering, in actual frontend, still need to trigger your own function manually.

Hope this experiment make sense.