Example for loading different multiple modules on a single node

[Victor Tanudjaja]

Hi

Can anyone point me an example how to set up conditioner to load multiple modules on a single node?

current conditioner setup (using webpack)

conditioner.addPlugin({
    // converts module aliases to paths
    moduleSetName: name => `${name}`,

    // use default exports as constructor
    moduleGetConstructor: module => module,

    moduleImport: name => import(/* webpackMode: "lazy"*/ /* webpackChunkName: "[request]"*/ `./modules/${name}`)
});

conditioner.hydrate(document.documentElement);

I would like to use it like:

button.u-lh1.u-btn-unstyled.c-nav-main__item-search-btn(type="button" aria-label="Show Search" data-module='["vtoggle", "focuson"]' data-module-options='[{ target: "html", class: "is-search-active", removeClass:"is-offbackdrop-active is-menu-active" }, { target: "#header-search-input", on: "click"}]')

Cheers

[Rik]

Hi!

There's currently no method to load multiple modules on a single node ( conditioner v1 had this feature, which resulted in very difficult to read HTML ).

Suppose you want to create a date picker that can also be toggled on and off.

You either have to create a nested structured.

<div data-module="ui/toggle">
    <div data-module="ui/datepicker"></div>
</div>

Or create a wrapper component that listens for events and controls its children

<div data-module="ui/datepicker-toggle">
    <div data-module="ui/toggle"></div>
    <div data-module="ui/datepicker"></div>
</div>

A third option would be to create a single module that has ui/toggle and ui/datepicker as dependencies and loads them automatically.

<div data-module="ui/datepicker-toggle"></div>

[Victor Tanudjaja]

I see. I was searching this in the search page and found an old code.

I think the nested structure would be the most ideal for me.

Thanks