Merge pull request #33 from alleyinteractive/hotfix/NYP-13213/optimize

Adds an ES Module build to allow for reducing footprint and unused code

Author: Steven Slack

.babelrc

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "es": {
+      "plugins": ["@babel/plugin-transform-runtime"],
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": false
+          }
+        ]
+      ]
+    },
+    "cjs": {
+      "plugins": ["@babel/plugin-transform-runtime"],
+      "presets": [
+        [
+          "@babel/preset-env"
+        ]
+      ]
+    }
+  }
+}

.babelrc.json

@@ -1,4 +1,4 @@
 /lib/
-/core/
+/es/
 /node_modules/
 *.sublime-*

.gitignore

@@ -25,8 +25,8 @@ npm install js-component-framework
 Below is a basic set up for using the component framework without the included Aria plugins:
 
 ```javascript
-// Import only the core component framework library.
-import { Component } from 'js-component-framework/core';
+// Import the ES modules to be consumed by a bundler such as webpack append the '/es' to the end of the import statement.
+import { Component } from 'js-component-framework/es';
 
 /**
  * Custom component which extends the base component class.
@@ -42,12 +42,11 @@ class MyComponent extends Component {
 }
 ```
 
-If you also want to use the entire framework with the bundled Aria plugins use the default import:
+If you also want to use the entire framework using the CommonJS bundled scripts with Aria plugins use the default import:
 ```js
 import { Component, plugins } from 'js-component-framework';
 ```
 
-
 ## Best practices for creating components
 
 ### Create one directory per component
@@ -74,6 +73,11 @@ To create a component, do the following at the top of the file:
 import { Component } from 'js-component-framework';
 ```
 
+If you are compiling your code with a bundler like webpack, only import what you need for a smaller footprint:
+```js
+import { Component } from 'js-component-framework/es';
+```
+
 When writing a component class, are some rules you need to follow and some guidelines:
 
 * You _must_ provide a constructor. At minimum, the constructor should look like the following:
@@ -96,7 +100,7 @@ Generally speaking, you'll want to instantiate your component in the footer or o
 
 ```js
 
-import { ComponentManager } from `js-component-framework`;
+import { ComponentManager } from `js-component-framework/es`;
 import headerConfig from `./Components/Header`;
 
 // Instantiate manager

README.md

@@ -3,12 +3,13 @@
   "version": "2.0.2",
   "description": "This framework is a method of attaching an ES6 class to a DOM element or collection of DOM elements.",
   "main": "lib/index.js",
+  "module": "es/index.js",
   "scripts": {
-    "build-core": "npx babel src/core --out-dir core",
-    "build-main": "npx babel src --out-dir lib",
+    "build:commonjs": "NODE_ENV=cjs npx babel src --out-dir lib",
+    "build:esm": "NODE_ENV=es npx babel src --out-dir es",
     "lint": "npx eslint src/**",
     "lint:fix": "npx eslint src/** --fix",
-    "prepare": "npm run build-core && npm run build-main",
+    "prepare": "npm run build:esm && npm run build:commonjs",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Alley Interactive (alley.co)",
@@ -29,7 +30,7 @@
     "url": "https://github.com/alleyinteractive/js-component-framework/issues"
   },
   "files": [
-    "core",
+    "es",
     "lib"
   ],
   "homepage": "https://github.com/alleyinteractive/js-component-framework#readme",