How to Use Third-Party Libraries

With that in mind, let's install a module from NPM. I'd like to use a simple helper method from lodash to help shuffle items in a collection around:

$ npm install lodash.shuffle

Now if we look in our /package.json file, we should see lodash.shuffle listed in the dependencies.

Now we can use this module in our Feature Pack. Remember our movies.jsx component? Let's see if we can find a place to use our new shuffle helper method:

/components/features/movies/movie-list.jsx

import Consumer from 'fusion:consumer'
import React, { Fragment, Component } from 'react'

// We import our shuffle method here...
import shuffle from 'lodash.shuffle'

@Consumer
class MovieList extends Component {
  ...

  fetch () {
    const { page } = this.state;

    // Increment the page at each call
    this.state.page += 1;

    this.fetchContent({
      movies: {
        source: 'movie-search',
        query: {
          movieQuery: 'Jurassic',
          page: page + 1
        },
        filter: '{ totalResults Search { Title Year Poster } }',
        transform: (data) => {
          // Check if data is being returned
          if(data && data.Search) {
            // ...then we can use it here to shuffle new movies fetched from our content source.
            this.state.movies.pages[page] = shuffle(data.Search);
            return this.state.movies;
          }

          // Otherwise just keep the current list of movies
          else{
            return this.state.movies;
          }
        }
      }
    })
  }
  ...
}

export default MovieList

You can see in the snippet above (the contructor and render methods have been removed for brevity) that we can import our module by its name, just like we would any other module, and use it right in our component.

Modules can be used in any code in your Feature Pack that gets bundled by Webpack - in components, content sources, even in environment.js and site property definitions.

Starting with Engine version 3.2, you will now be able to specify which node modules should be ignored by Fusion's built-in Babel implementation. To do so, simply include the name of the node modules and/or associated files in the bundle's package.json under the fusionIgnore key like so:

{
  "name": "",
    ...
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  },
  "fusionIgnore": ["<Name of Module 1>", "<Name of Module 2>" ...]
}

All the strings inside the fusionIgnore array will be mapped as an individual Regex and passed onto Babel loader's ignore property (for instance, ignore: [new RegExp(module1), new RegExp(module2)]) to be matched. This will allow you to bypass babel trying to process (and subsequently error out) on modules that are already bundled and should not be processed, and thus expanding the choices you have in modules you can bring into Fusion.

It's important to remember that while you can import nearly any code available on NPM into your Feature Pack, that doesn't mean you always should.

One consideration when evaluating whether to install a module is its size - you have to remember that PageBuilder Engine uses isomorphic rendering, so any modules that get included in a component get included both server-side and client-side unless you tell PageBuilder Engine differently. It may be tempting to install a module like moment.js for its ease of use, but do you really want to include a 227.5kb Module into your client side code just for a single function invocation? The decision is yours alone.

Another consideration is simply whether the module you are including is intended for client-side use at all. Many modules on NPM are intended for node, server-side use only, and wouldn't make sense to install into a client-side component.

Finally, security and reliability are always concerns when using third-party code. It's common for third-party libraries to have Security Vulnerabilities, or even for the packages To Be Removed Entirely From NPM. When installing third-party libraries, make sure the code is from a reputable source, check it as thoroughly as possible, and keep your versions up-to-date.

▶ Next: Messaging Between Components