Merge pull request #537 from js-cookie/es-module

Migrate package/source to ES module(s)

.gitignore

@@ -1,4 +1,4 @@
 node_modules
-build
+dist
 .sizecache.json
 *.log*

CONTRIBUTING.md

@@ -13,7 +13,7 @@
 ### Tools
 We use the following tools for development:
 
-- [Qunit](http://qunitjs.com/) for tests.
+- [QUnit](http://qunitjs.com/) for tests.
 - [NodeJS](http://nodejs.org/download/) required to run grunt.
 - [Grunt](http://gruntjs.com/getting-started) for task management.
 

Gruntfile.js

@@ -24,14 +24,12 @@ module.exports = function (grunt) {
 	}
 
 	grunt.initConfig({
-		pkg: grunt.file.readJSON('package.json'),
 		qunit: {
 			all: {
 				options: {
 					urls: [
 						'http://127.0.0.1:9998/',
-						'http://127.0.0.1:9998/amd.html',
-						'http://127.0.0.1:9998/environment-with-amd-and-umd.html',
+						'http://127.0.0.1:9998/module.html',
 						'http://127.0.0.1:9998/encoding.html?integration_baseurl=http://127.0.0.1:9998/'
 					]
 				}
@@ -42,34 +40,21 @@ module.exports = function (grunt) {
 		},
 		eslint: {
 			grunt: 'Gruntfile.js',
-			source: 'src/**/*.js',
+			source: 'src/**/*.mjs',
 			tests: 'test/**/*.js'
 		},
-		uglify: {
-			options: {
-				compress: {
-					unsafe: true
-				},
-				banner: '/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.license %> */\n'
-			},
-			build: {
-				files: {
-					'build/js.cookie.min.js': 'src/js.cookie.js',
-					'build/js.cookie-<%= pkg.version %>.min.js': 'src/js.cookie.js'
-				}
-			}
-		},
 		watch: {
 			options: {
 				livereload: true
 			},
-			files: '{src,test}/**/*.js',
+			files: ['src/**/*.mjs', 'test/**/*.js'],
 			tasks: 'default'
 		},
 		compare_size: {
 			files: [
-				'build/js.cookie-<%= pkg.version %>.min.js',
-				'src/js.cookie.js'
+				'dist/js.cookie.min.mjs',
+				'dist/js.cookie.min.js',
+				'src/js.cookie.mjs'
 			],
 			options: {
 				compress: {
@@ -105,6 +90,7 @@ module.exports = function (grunt) {
 			}
 		},
 		exec: {
+			'rollup': './node_modules/.bin/rollup -c',
 			'browserstack-runner': 'node_modules/.bin/browserstack-runner --verbose'
 		}
 	});
@@ -116,8 +102,8 @@ module.exports = function (grunt) {
 		}
 	}
 
-	grunt.registerTask('test', ['uglify', 'eslint', 'connect:build-qunit', 'qunit', 'nodeunit']);
-	grunt.registerTask('browserstack', ['uglify', 'exec:browserstack-runner']);
+	grunt.registerTask('test', ['exec:rollup', 'eslint', 'connect:build-qunit', 'qunit', 'nodeunit']);
+	grunt.registerTask('browserstack', ['exec:rollup', 'exec:browserstack-runner']);
 
 	grunt.registerTask('dev', ['test', 'compare_size']);
 

README.md

@@ -11,6 +11,7 @@ A simple, lightweight JavaScript API for handling cookies
 * [Heavily](test) tested
 * No dependency
 * [Unobtrusive](#json) JSON support
+* Supports ES modules
 * Supports AMD/CommonJS
 * [RFC 6265](https://tools.ietf.org/html/rfc6265) compliant
 * Useful [Wiki](https://github.com/js-cookie/js-cookie/wiki)
@@ -22,35 +23,61 @@ A simple, lightweight JavaScript API for handling cookies
 
 ## Installation
 
+### NPM
+
+JavaScript Cookie supports [npm](https://www.npmjs.com/package/js-cookie) under the name `js-cookie`.
+
+```
+$ npm install js-cookie --save
+```
+
 ### Direct download
 
-Download the script [here](https://github.com/js-cookie/js-cookie/blob/latest/src/js.cookie.js) and include it (unless you are packaging scripts somehow else):
+The source comes as an ES module. If you download it [here](https://github.com/js-cookie/js-cookie/blob/latest/src/js.cookie.mjs) directly, you must include it as such.
+
+Example:
 
 ```html
-<script src="/path/to/js.cookie.js"></script>
+<script type="module" src="./js.cookie.mjs"></script>
+<script type="module">
+  import Cookies from "./js.cookie.mjs";
+
+  Cookies.set('foo', 'bar');
+</script>
 ```
 
-Or include it via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/js-cookie):
+*Not all browsers support ES modules natively yet*. For this reason the npm package/release
+comes with both an ES module as well as an UMD module variant. Include the module along
+with the fallback to account for this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+<script type="module" src="/path/to/js.cookie.mjs"></script>
+<script nomodule src="/path/to/js.cookie.js"></script>
 ```
 
-**Do not include the script directly from GitHub (http://raw.github.com/...).** The file is being served as text/plain and as such being blocked
-in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.
+Note the different extensions: `.mjs` denotes an ES module.
 
-### Package Managers
+### CDN 
 
-JavaScript Cookie supports [npm](https://www.npmjs.com/package/js-cookie) and [Bower](http://bower.io/search/?q=js-cookie) under the name `js-cookie`.
+Alternatively, include it via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/js-cookie):
 
-#### NPM
-```
-  $ npm install js-cookie --save
+```html
+<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
 ```
 
-### Module Loaders
+**Never include the source directly from GitHub (http://raw.github.com/...).** The file
+is being served as text/plain and as such may be blocked because of the wrong MIME type.
+Bottom line: GitHub is not a CDN.
+
+## ES Module
 
-JavaScript Cookie can also be loaded as an AMD or CommonJS module.
+Example for how to import the ES module from another module:
+
+```javascript
+import Cookies from "./node_modules/js-cookie/dist/js.cookie.mjs";
+
+Cookies.set('foo', 'bar');
+```
 
 ## Basic Usage
 
@@ -303,7 +330,7 @@ For vulnerability reports, send an e-mail to `jscookieproject at gmail dot com`
 ## Manual release steps
 
 * Increment the "version" attribute of `package.json`
-* Increment the version number in the `src/js.cookie.js` file
+* Increment the version number in the `src/js.cookie.mjs` file
 * If `major` bump, update jsDelivr CDN major version link on README
 * Commit with the message "Release version x.x.x"
 * Create version tag in git

package.json

@@ -2,7 +2,8 @@
   "name": "js-cookie",
   "version": "2.2.1",
   "description": "A simple, lightweight JavaScript API for handling cookies",
-  "main": "src/js.cookie.js",
+  "main": "dist/js.cookie.js",
+  "module": "dist/js.cookie.mjs",
   "directories": {
     "test": "test"
   },
@@ -24,7 +25,7 @@
     "url": "git://github.com/js-cookie/js-cookie.git"
   },
   "files": [
-    "src/**/*.js",
+    "dist/**/*",
     "SERVER_SIDE.md",
     "CONTRIBUTING.md"
   ],
@@ -37,12 +38,14 @@
     "grunt-contrib-connect": "2.1.0",
     "grunt-contrib-nodeunit": "2.0.0",
     "grunt-contrib-qunit": "3.1.0",
-    "grunt-contrib-uglify": "4.0.1",
     "grunt-contrib-watch": "1.1.0",
     "grunt-eslint": "22.0.0",
     "grunt-exec": "3.0.0",
     "gzip-js": "0.3.2",
-    "qunitjs": "1.23.1",
-    "requirejs": "2.3.5"
+    "qunit": "2.9.2",
+    "rollup": "^1.20.3",
+    "rollup-plugin-filesize": "^6.2.0",
+    "rollup-plugin-license": "^0.12.1",
+    "rollup-plugin-terser": "^5.1.1"
   }
 }

rollup.config.js

@@ -0,0 +1,55 @@
+import { terser } from "rollup-plugin-terser";
+import filesize from "rollup-plugin-filesize";
+import license from "rollup-plugin-license";
+
+export default [
+  {
+    input: "src/js.cookie.mjs",
+    output: [
+      // config for <script type="module">
+      {
+        dir: "dist",
+        entryFileNames: "[name].mjs",
+        format: "esm"
+      },
+      // config for <script nomodule>
+      {
+        dir: "dist",
+        name: "Cookies",
+        entryFileNames: "[name].js",
+        format: "umd",
+        noConflict: true
+      }
+    ]
+  },
+  {
+    input: "src/js.cookie.mjs",
+    output: [
+      // config for <script type="module">
+      {
+        dir: "dist",
+        entryFileNames: "[name].min.mjs",
+        format: "esm"
+      },
+      // config for <script nomodule>
+      {
+        dir: "dist",
+        name: "Cookies",
+        entryFileNames: "[name].min.js",
+        format: "umd",
+        noConflict: true
+      }
+    ],
+    plugins: [
+      terser(),
+      license({
+        banner: {
+          content:
+            "/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.license %> */",
+          commentStyle: "none"
+        }
+      }),
+      filesize()
+    ]
+  }
+];

src/.eslintrc

@@ -4,6 +4,10 @@
     "browser": true,
     "amd": true
   },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
   "rules": {
     "camelcase": "error"
   }