Mounting class declarations

Hello, I love your library but I am having trouble getting some thing working.

I am using Barba.js as the PJAX library and ideally I would like to import modules that are on the page, call the init() method and on pageLeave call the detroy() method on the module.

Here is what I have so far:

// This is loaded by Barba.js
export class Components {
    constructor() {
        conditioner.addPlugin({
            moduleSetName: name => `./${name}/index.js`,
            moduleGetConstructor: module => module.default,
            moduleImport: name => import(/* webpackMode: "lazy" */ `${name}`)
        });
    }

   onPageEnter(DOM) {        
        // lets go!
        this.hydrate = conditioner.hydrate(DOM);
    }

    onPageLeave() {
      // Need to destroy the loaded components, unless the are on the new page, in which case I need to reinit them with the new el
    }
}

Is there a way to call a Class because when I do it gives me an error saying I can’t call it as a function?

export default ExampleModule {
    constructor() { }

    init(slider) {
        // Init Slider
    }

    destroy() {
        // Destroy Slider
    }
}

Some help on this would be amazing!!

[knynkwl]

Nice, I had to update moduleGetConstructor to include .default(element) to get it working.

thanks for the help! I think it’s working now 🎉

moduleGetConstructor: (module) => {
   return (element) => {
       return new module.default(element);
   };
}

[acstll]

Sorry I’m late to the party.

I wanted to share how I’ve been handling a similar situation with a “pjax” library of my own.

I have all my modules in a modules folder. There is an index.js file that configures conditioner and exports a hydrate and an unmount function that I call on every page transition. I looks a bit like this:

import * as conditioner from 'conditioner-core'

let boundModules = []

// Webpack
conditioner.addPlugin({
  moduleSetName: name => name,
  moduleGetConstructor: module => module.default,
  moduleImport: name => import(`./${name}`)
})

// other plugins here, removed for brevity

export function hydrate () {
  boundModules = conditioner.hydrate(document.documentElement)
}

export function unmount () {
  boundModules.forEach(x => x.unmount())
}

Thank you @rikschennink for such an amazing library.