rigging-app.js

// RiggingApp.js

class RiggingApp {
  constructor({ componentClass, mountSites }) { /*...*/ }
  setStore(store) { 
    // scope a reference of the store to pass to app instances
    this.store = store; 
  }
  
  init() { /* forEach mountsite: _initMountSite */ }
  _initMountSite({ domId, props }) { 
    // Init each individual mountsite, creating an instance of the component, 
    // assigning a store reference, and mounting it to the configured DOM id
    const ComponentClass = this.ComponentClass;
    const store = this.store;

    ReactDOM.render(
      <ComponentClass store={store} {...props} />,
      document.getElementById(domId)
    );
  }
  destroy() { /* forEach mountsite: _destroyMountSite */ }
  _destroyMountSite({ domId }) {
    // ... 
    ReactDOM.unmountComponentAtNode(document.getElementById(domId));
  }
}


// Rigging.js

class Rigging {
  constructor() {
    // create the store, and scope a reference to it as well as the `dispatch` function
    this.store = createStore(/* ... */);
    this.dispatch = this.store.dispatch;
  }
  
  init(appConfig) { 
    /* Init and cache an instance of each configured app */
    this.riggingApps = {};
    Object.keys(appConfig).forEach((id) => {
      const app = appConfig[id];
      app.setStore(this.store);
      this.riggingApps[id] = app;
    });
    
    /* ... */
    this._initApps();
  }
  _initApps() { 
    Object.values(this.riggingApps).forEach((app) => {
      app.init();
    });
  }
  
  destroyApp(appName) { /* ... */ }
  resetApp(appNme){ /* ... */ }
}


// appConfig.js

const appConfig = {
  // single mount-site RiggingApp
  dynamicCart: new RiggingApp({
    componentClass: CartController,
    mountSites: { domId: 'cart-mountsite' }
  }),
  // single multiple mount-site RiggingApp
  staticCartUpsellProgress: new RiggingApp({
    componentClass: UpsellProgressController,
    mountSites: [
      { domId: 'static-cart-upsell-mountsite__mobile' },
      { 
        domId: 'static-cart-upsell-mountsite__desktop',
        props: { initialAnimate: true }
      }
    ]
  })
};


// main.js

// Create a Rigging instance, and stash it as a global singleton
window.Rigging = new Rigging();

$(document).ready(() => {
  Rigging.init(appConfig);
});