Core.js

Is this file modifiable? — NO

This file handles the universal functionality of our site. It deals with our Swup, handles our plugins and lifecycle hooks and integrates our Google Analytics.

constructor()

constructor(payload) {
        this.terraDebug = payload.terraDebug;
        this.isBlazy = payload.blazy;
        this.boostify = payload.boostify;
        this.emitter = mitt();
        this.Manager = payload.Manager

        const commonPlugins = [
            new SwupHeadPlugin({ persistAssets: true }),
            ...(this.terraDebug  ? [new SwupDebugPlugin({ globalInstance: true })]: []),
            new SwupJsPlugin(
                createTransitionOptions({
                    boostify: this.boostify,
                    Manager: this.Manager,
                    forceScroll: payload.swup.transition.forceScrollTop,
                    terraDebug : this.terraDebug,
                })
            ),
        ];
        const virtualPlugins = [
            ...commonPlugins,
            new SwupScriptsPlugin({ head: true, body: true }),
        ];

        this.swup = new Swup({
            linkSelector:
                "a[href]:not([href$='.pdf']), area[href], svg a[*|href]",
            plugins:
                import.meta.env.VITE_TERRA_VIRTUAL != "false"
                    ? virtualPlugins
                    : commonPlugins,
        });

        this.firstLoad = true;
    }

Our Core constructor:

• gets all our external elements from our payload
• handles our plugins and applies them to Swup
• instances our Swup

init()

    async init() {
        const { hasGoogleScripts } = await import(
            "@terrahq/helpers/hasGoogleScripts"
        );
        this.detected = await hasGoogleScripts({ maxTime: 1201 });
        if (this.detected) {
            window.dataLayer.push({
                event: "VirtualPageview",
                virtualPageURL:
                    window.location.pathname + window.location.search,
                virtualPageTitle: document.title,
            });
        } else {
            // only showing this message if terrabug is enabled
            this.terraDebug && console.log("Google Scripts not detected");
        }
    }

Our init method deals with our Google Tag Manager: we use our helper to determine if the page has google scripts and make a dataLayer push to record our virtual page views into our Tag Manager.

events()

    events() {
        if (
            document.readyState === "complete" ||
            (document.readyState !== "loading" &&
                !document.documentElement.doScroll)
        ) {
            this.contentReplaced();
        } else {
            document.addEventListener("DOMContentLoaded", () => {
                this.contentReplaced();
            });
        }
        this.swup.hooks.on("content:replace", () => {
            this.contentReplaced();
        });

        this.swup.hooks.before("content:replace", () => {
            this.willReplaceContent();
        });
    }

In our events method, we create our mitt events to hook onto our swup events, so we can perform actions when the page has changed and right before it does.

Why is this important?

This is what allows us to fine-tune when the importations and destructions of libraries will be made in the lifecycle of our page.

contentReplaced()

This is when the page loads

contentReplaced() {
        if (this.isBlazy.enable) {
            var lazySelector = this.isBlazy.selector
                ? this.isBlazy.selector
                : "g--lazy-01";
            this.Manager.instances["Blazy"] = new Blazy({
                selector: "." + lazySelector,
                successClass: `${lazySelector}--is-loaded`,
                errorClass: `${lazySelector}--is-error`,
                loadInvisible: true,
            });
        }

        this.firstLoad = false;
    }

Here we can perform any actions we want to be done in every page change. In this case, we want to activate our images’ lazy loading library.

willReplaceContent()

This is when we are exiting a page

willReplaceContent() {
        if (this.isBlazy.enable) {
            if (this.Manager.instances["Blazy"]) {
                this.Manager.instances["Blazy"].destroy();
            }
            this.Manager.cleanInstances('Blazy')
        }
    }

Following a recurrent pattern you will become familiar with in this documentation, when we exit the page, we destroy the instance we created on entering it. This way we assure nothing remains behind after a transition and we can start with a blank memory slate on our new page.

Recap

Core is in charge of dealing with Swup, our SPA library, and of hooking our lifecycle events to it.