Libraries import in block scripts

sage
1

I’ve implemented CSS and JS loading based on this comment: Bud config for outputting multiple css files (from scss for ACF Blocks) - #20 by kellymears by @kellymears

My question is: how should I handle importing libraries?

For example, here is the JS file for my block (located at resources/blocks/posts-slider/index.js):

import { isInViewport } from '@scripts/utils/helpers.js'
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import Swiper from 'swiper';
import 'swiper/css';

window.Swiper = Swiper;

let sliders = document.querySelectorAll('.acf-posts-slider');

sliders.forEach((slider) => {
  if(!isInViewport(slider)) {
    gsap.fromTo(
      slider,
      {opacity: 0, y: 100},
      {
        opacity: 1, y: 0,
        duration: 1,
        ease: "none",
        scrollTrigger: {
          trigger: slider,
          start: "top 80%",
          end: "top 50%",
          scrub: false,
          toggleActions: "play none none none"
        }
      }
    )
  }
})

As you can see, this file imports Swiper and configures a plugin for GSAP.

This block is a rotator and has a fade-up animation when it comes into the viewport.

My question is: Is it correct to make these kinds of imports in each new block? For instance, if I add another block that also uses GSAP and registers a different GSAP plugin, would I do the same thing there?

Or should these libraries be imported in app.js and managed from there, to be used across all block files? If so, could someone explain how I would do that?

I’ve tried moving the imports from index.js to app.js and even placing them in the window object so I can access them from index.js, but it seems they are not available in the window object when the block is loaded. I’m not sure if this is the right direction.

2

I resolved the issue by moving the imports to app.js like that:

import Helpers from "@scripts/utils/helpers.js";

import Swiper from 'swiper';
import 'swiper/css';

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
window.gsap = gsap;
window.Swiper = Swiper;
window.helpers = new Helpers();

and wrapping the code in resources/blocks/posts-slider/index.js within event listener:

document.addEventListener("DOMContentLoaded", function(){
  let sliders = document.querySelectorAll('.acf-posts-slider');
  sliders.forEach((slider) => {
    if(!helpers.isFullyInViewport(slider)) {
      gsap.fromTo(
        slider,
        {opacity: 0, y: 100},
        {
          opacity: 1, y: 0,
          duration: 1,
          ease: "none",
          scrollTrigger: {
            trigger: slider,
            start: "top 80%",
            end: "top 50%",
            scrub: false,
            toggleActions: "play none none none"
          }
        }
      )
    }
  })
})
1 Like