Welcome to the "Restaurant of Mistaken Orders", where our Chef serves up the finest code snippets for developers. Today, the Chef is proud to present a new creation that's been a lifesaver for many developers, and it's called waitForElm.

Let's take a closer look at the waitForElm recipe created by our Chef and see how it works under the hood.

The function starts by returning a Promise, which is a key ingredient in handling asynchronous operations in JavaScript. Promises are used to represent the eventual completion or failure of an asynchronous operation. In this case, the Promise represents the completion of finding the element we're looking for.

The Promise constructor takes in a function as an argument, which will be executed immediately. This function is called a resolver, and its purpose is to determine when the Promise should resolve. In our case, the resolver checks if the element we're looking for is already present in the document. If it is, the Promise resolves immediately with the element.

If the element is not found, we create a MutationObserver, which is an object that can be used to observe changes in the DOM (Document Object Model). The observer is passed a callback function that will be called whenever a mutation occurs in the document. In our case, the callback function checks if the element we're looking for is present in the document. If it is, the Promise resolves with the element, and the observer is disconnected.

A breakdown of the code:

// Use the function to wait for the external component to load

waitForElm('.component-container').then(elm => {
        console.log('Cook up some delicious code with the component');
});

//waitForElem function

function waitForElm(selector) {

    return new Promise(resolve => {

        // Check if the element is already present in the document

        if (document.querySelector(selector)) {

            return resolve(document.querySelector(selector));

        }

        // Create a MutationObserver to continuously monitor the document

        const observer = new MutationObserver(mutations => {

            // Check if the element is present in the document

            if (document.querySelector(selector)) {

                // Resolve the Promise with the element

                resolve(document.querySelector(selector));

                // Disconnect the observer

                observer.disconnect();

            }

        });

        // Start observing the document
        observer.observe(document.body, {
            childList: true,
            subtree: true

        });
    });
}

The observe method takes in two arguments: the target node to observe and an options object. In this case, we're observing the document.body node and setting the childList and subtree options to true. This means that the observer will be notified of changes to the body of the document, including changes to its children and descendants.

So, now you have a better understanding of how the waitForElm recipe works. It's a simple but powerful tool that can help you write more efficient and reliable code when working with dynamic web pages and external components.

In conclusion, the waitForElm function is a must-have recipe in every developer's kitchen. Whether you're working with Sitecore Content Hub or any other dynamic web platform, this function can save you time and effort by ensuring that you can interact with elements only when they are ready. So, next time you're working on a project that requires waiting for elements to load, remember the waitForElm function created by our Chef, and avoid the frustration of mistaken orders!