How to put a static resource (including loading the same) and related code on a service component and use it on Lightning web component?

Question

I'm trying to understand how can I put javascript static resource and related code on a service component (including loading the resource) and then use it on Lightning web component.

Please note that i've already included the static resource on lwc itself and used it successfully. I want to understand if I can now do put the resource and related code on a service component so that it can be reused anywhere.

Thanks.

Answer 1

Okay so I managed to do this in this way:

Service Component (contains loading JS static resource and related code)

import CONFETTI from '@salesforce/resourceUrl/Confetti';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

function loadConfetti(object) {

    loadScript(object,CONFETTI);
}

function basicCannon() {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: {
        y: 0.6
      }
    });
}


function randomCannon() {
    confetti({
      angle: this.randomFun(55, 125),
      spread: this.randomFun(50, 70),
      particleCount: this.randomFun(50, 100),
      origin: {
        y: 0.6
      }
    });
}


function fireworks() {
    var end = Date.now() + 15 * 1000;

    let interval = setInterval(function() {
      if (Date.now() > end) {
        return clearInterval(interval);
      }

      confetti({
        startVelocity: 30,
        spread: 360,
        ticks: 60,
        origin: {
          x: Math.random(),
          y: Math.random() - 0.2
        }
      });
    }, 200);
}

export {loadConfetti,basicCannon,randomCannon,fireworks};

And this would be used on the Lightning web component using IMPORT statement like

import confetti from 'c/confettiService';

And then use any method like

confetti.loadConfetti(this);
confetti.fireworks();