Loading Patterns (WIP)

Eureka is enhanced by Masonry, but only if you load it. To enable to Masonry view mode load Masonry before Eureka:

Externals Usage

We recommend using Webpack excludes to load common dependencies from content delivery networks.

yarn add lazyload-script

const promises = [
  // try to load Masonry from a CDN, fallback to a local copy
  lazyLoadScript("//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js", "masonry.3.1.5.pkgd.min.js").catch((err => (
    lazyLoadScript(`./js/vendor/masonry.3.1.5.pkgd.min.js`, "masonry.3.1.5.pkgd.min.js")
  ))),
  // try to load React from a CDN, fallback to a local copy
  lazyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js", "react.15.4.2.min.js").catch((err => (
    lazyLoadScript(`./js/vendor/react.15.4.2.min.js`, "react.15.4.2.min.js")
  ))),
  // try to load React DOM from a CDN, fallback to a local copy
  lazyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js", "react-dom.15.4.2.min.js").catch((err => {
    lazyLoadScript(`./js/vendor/react-dom.15.4.2.min.js`, "react-dom.15.4.2.min.js")
  })),
  // try to load Redux from a CDN, fallback to a local copy
  lazyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js", "redux.3.6.0.min.js").catch((err => {
    lazyLoadScript(`./js/vendor/redux.3.6.0.min.js`, "redux.3.6.0.min.js")
  })),
  // try to load React Redux from a CDN, fallback to a local copy
  lazyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js", "react-redux.5.0.3.min.js").catch((err => {
    lazyLoadScript(`./js/vendor/react-redux.5.0.3.min.js`, "react-redux.5.0.3.min.js")
  })),
  lazyLoadScript("./js/vendor/eureka/eureka-browser.min.js")
];

Promise.all(promises).then(() => {
  //Masonry, React, React DOM, Redux, and React Redux are ready. woohoo! now load your app bundle
  lazyLoadScript('app.js').then(() => {
    console.log('everything is loaded!');
  })
});

Bundled Usage

But you don't have to use Excludes if you'd rather bundle everything together. You will still have to load Masonry first though, as we do not bundle it with the UMD modules we distribute.

lazyLoadScript("//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js", "masonry.3.1.5.pkgd.min.js").catch((err => (
  lazyLoadScript(`./js/vendor/masonry.3.1.5.pkgd.min.js`, "masonry.3.1.5.pkgd.min.js")
))).then(() => {
  //Masonry is ready. woohoo! now load your app bundle
  lazyLoadScript('app.js').then(() => {
    console.log('everything is loaded!');
  })
});