Introducing libraries

We have a very specific process to follow when it comes to integrating new libraries in our sites.

We follow this process to acommodate to the files that control our framework and integrate our new libraries seamlessly in our Manager and transitions system.

The steps are as follows:

1. We need to head to Project.js to allocate space in memory for our new library.

this.Manager.allocateInstances(["MoveItem", "Collapsify", "InfiniteMarquee", "Slider"]);

For instance, here we would have memory allocated for our Collapsify, InfiniteMarquee and Slider libraries (and our MoveItem for animations on certain items).

2. We go to our extraAssets() file and import our library

The library we import can be either a class from our own project:

{
      name: "InfiniteMarquee",
      domElement: document.querySelectorAll(".js--marquee"),
      resource: async () => {
        const { default: InfiniteMarquee } = await import(
          "@js/handler/marquee/InfiniteMarquee"
        );
        return InfiniteMarquee;
      },
    },

Or an external, imported library:

{
      name: "isElementInViewport",
      domElement: "body",
      resource: async () => {
        const { isElementInViewport } = await import(
          "@terrahq/helpers/isElementInViewport"
        );
        return isElementInViewport;
      },
    },

3. We create a folder in our handler folder for our library and create a Handler.js file for the library

project-root/
├── src/
│   ├── js/
│   │   └── handler
│   │       └── collapsify
│   │            └── Handler.js
└──

4. We store all the necessary configuration for our library in that handler (explained further in our handler file).
5. We instance our handler in our Main.js file

    init() {
        super.init();

        new MarqueeHandler({ ...this.handler, name: "MarqueeHandler" });
    }

We use the name in the instantiation for debugging purposes.

And that is it!

We have implemented a modular system that does all the configuration (or most of it) for you, so you only need to follow these steps to successfully implement your new library.