Proper way of instantiating a class within a Gia component?

[aerni]

I'm using Gia together with Swup and love it! The folliwing example is working, but I'm wondering if this is the correct way of instantiating a class within a Gia component?

import Component from 'gia/Component';

class ProjectSlider extends Component {

    async require() {
        this.swiper = await import('swiper');
    }

    mount() {
        const swiper = new this.swiper.default(this.element, {
            …
        });
    }
}

export default ProjectSlider;

As well, this might be totally unrelated. But assuming the above is correct, how can I access the instance variable swiper from within another Gia component?

[gmrchk]

Hi @aerni, sorry for the delay,

this is exactly correct. You could actually just import whatever you need in the mount method (if made async) but I just always liked to have a place for importing component dependencies.

Now, by accessing instance of ‘swiper’, I assume you mean not loadind the swiper twice for different components. I’m not 100% sure on this, but I believe webpack will figure that out for you.

If you mean controlling the actual instance of swiper, you will need to access the component instance directly from other component (well, and save the swiper instance in component instance in a first place). Other component can even create components manually, so like a controller or something... You could build yourself an interface for controling the swiper instance, which worked great for me.

If you’d like to avoid accessing components instance from outside, the gia eventbus is a great way to go for a smaller projects.

[aerni]

Thank you for clarifying! How would you build an interface for controlling the instance. Do you have an example for this? I'm also checking out the eventbus.

[AugustMiller]

It sounds like you might want to mount your carousel in a ref instead of the root component element, so you can manage other UI elements?

import Component from 'gia/Component';

class ProjectSlider extends Component {
    constructor () {
        this.ref = {
            $next: null,
            $previous: null,
            $swiper: null
        };
    }

    async require () {
        this.swiper = await import('swiper');
    }

    mount () {
        const swiper = new this.swiper.default(this.ref.$swiper, {
            navigation: {
                nextEl: this.ref.$next,
                prevEl: this.ref.$previous
            }
        });
    }
}

export default ProjectSlider;

…with…

<div g-component="ProjectSlider">
  <div g-ref="ProjectSlider:$swiper"></div>
  <button g-ref="ProjectSlider:$previous">Previous</button>
  <button g-ref="ProjectSlider:$next">Next</button>
</div>