Import XFC as ES6 module

README.md

@@ -4,9 +4,38 @@ In order to run any SMART app in Cerner's MPage view (iframe), the following pro
 
 This library uses [xfc](https://github.com/cerner/xfc) to solve [Clickjacking](https://www.owasp.org/index.php/Clickjacking) problem for all browsers.
 
-## Availability
+## Installation
+
+This is an npm project and can be installed with the following: 
+```shell
+npm install cerner-smart-embeddable-lib
+```
+
+Include it to your project with the following: 
+```js
+import 'cerner-smart-embeddable-lib';
+```
+
+The minified & transpiled files are also available in the `dist/` directory and can be used with a `<script>` tag. 
+
+It is suggested to import the module (as opposed to including the pre-minified file from `dist/`) as it will allow Webpack to define `process.env.NODE_ENV` which will enable or disable XFC logging. Per the [XFC Readme](https://github.com/cerner/xfc#usage), logging is only enabled in non-production environments. The environment can be set in webpack using the DefinePlugin:
+
+```js
+// webpack.config.js
+const webpack = require('webpack');
+
+module.exports = {
+  /*...*/
+  plugins:[
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+};
+```
+
+Warning: Disable XFC logging if using [F-Twelve](https://github.com/cerner/f-twelve/). F-Twelve writes to the DOM every time `console.log` is called and (when logging is enabled) XFC calls `console.log` every time the DOM is written to. This causes the browser to endlessly loop and freeze. It is safe to use both concurrently if XFC logging is disabled. 
 
-This project is an npm project.  The minified & transpiled files are also available in the `dist/` directory.
 
 ## Dependency
 

lib/js/cerner-smart-embeddable-lib.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _provider = require('xfc/src/provider');
-
-var _provider2 = _interopRequireDefault(_provider);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _xfc = require('xfc');
 
 /**
 * Wrapper object to initialize the provider's content
@@ -20,7 +16,7 @@ var CernerSmartEmbeddableLib = {
   * Initializes the provider wrapper object with ACLs.
   */
   init: function init() {
-    _provider2.default.init({
+    _xfc.Provider.init({
       acls: ['https://embedded.cerner.com', 'https://embedded.sandboxcerner.com', 'https://embedded.devcerner.com']
     });
   },
@@ -36,14 +32,14 @@ var CernerSmartEmbeddableLib = {
   * message with the height detail.
   */
   setFrameHeight: function setFrameHeight(h) {
-    _provider2.default.trigger('iframeCustomResizer', { height: h });
+    _xfc.Provider.trigger('iframeCustomResizer', { height: h });
   },
   /**
   * Listen for iframeCustomResizer message.
   * Calculate the frame height in px and set the height.
   */
   listenForCustomFrameHeight: function listenForCustomFrameHeight() {
-    _provider2.default.on('iframeCustomResizer', function () {
+    _xfc.Provider.on('iframeCustomResizer', function () {
       var height = window.CernerSmartEmbeddableLib.calcFrameHeight() + 'px';
       CernerSmartEmbeddableLib.setFrameHeight(height);
     });

src/js/cerner-smart-embeddable-lib.js

@@ -1,6 +1,6 @@
 /* global window */
 
-import Provider from 'xfc/src/provider';
+import { Provider } from 'xfc';
 
 /**
 * Wrapper object to initialize the provider's content

test/spec/smart-embedded-content_spec.js

@@ -1,5 +1,5 @@
 import SmartEmbeddedContent from 'js/cerner-smart-embeddable-lib'
-import Provider from 'xfc/src/provider';
+import { Provider } from 'xfc';
 
 describe('CernerSmartEmbeddableLib', () => {
   describe('init', () => {