Do umd stuff with babel/webpack for readable code

Writing a es2015 module is so easy :)

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["es2015"],
+  "plugins": [
+    "add-module-exports"
+  ]
+}

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
 npm-debug.log
+/coverage

.travis.yml

@@ -0,0 +1,17 @@
+# faster builds on new travis setup not using sudo
+sudo: false
+
+language: node_js
+
+node_js:
+  - "5.8"
+
+before_script:
+  - 'export CHROME_BIN=chromium-browser'
+  - 'export DISPLAY=:99.0'
+  - 'sh -e /etc/init.d/xvfb start'
+  - npm install
+
+cache:
+  directories:
+    - node_modules

README.md

@@ -1,7 +1,25 @@
+[![Build Status](https://travis-ci.org/dazorni/medium-editor-autofocus.svg?branch=master)](https://travis-ci.org/dazorni/medium-editor-autofocus)
 # medium-editor-autofocus
 
 Autofocus for the medium editor
 
 ## Description
 
 This is an extension for the [medium-editor](https://github.com/yabwe/medium-editor). For better user experience it will autofocus the medium-editor at start.
+
+## Build dist files
+
+Compile the es2015 module
+
+```
+npm run build
+
+// npm run build:dev
+// npm run build:prod
+```
+
+## Run tests
+
+```
+npm run test
+```

demo/autofocus.html

@@ -16,7 +16,7 @@ <h2>Gangsta Ispum</h2>
       </div>
     </div>
     <script src="https://cdn.jsdelivr.net/medium-editor/5.21.0/js/medium-editor.min.js"></script>
-    <script src="../src/autofocus.js"></script>
+    <script src="../dist/medium-editor-autofocus.js"></script>
     <script>
       var editor = new MediumEditor('.editable', {
           extensions: {

dist/medium-editor-autofocus.js

@@ -0,0 +1,80 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["MediumEditorAutofocus"] = factory();
+	else
+		root["MediumEditorAutofocus"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	var MediumEditorAutofocus = MediumEditor.Extension.extend({
+	  name: 'autofocus',
+
+	  init: function init() {
+	    if (this.getEditorElements().length < 1) {
+	      return;
+	    }
+
+	    this.getEditorElements()[0].focus();
+	  }
+	});
+
+	exports.default = MediumEditorAutofocus;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ])
+});
+;

karma.conf.js

@@ -0,0 +1,114 @@
+// Karma configuration
+// Generated on Thu Aug 18 2016 14:36:57 GMT+0200 (CEST)
+var path = require('path');
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'node_modules/medium-editor/dist/js/medium-editor.js',
+      'tests.webpack.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+      '**/*.swp'
+    ],
+
+    // webpack configuration
+		webpack: {
+			cache: true,
+			devtool: 'inline-source-map',
+			module: {
+				preLoaders: [
+					{
+						test: /-test\.js$/,
+						include: /test/,
+						exclude: /(node_modules)/,
+						loader: 'babel',
+						query: {
+								cacheDirectory: true,
+						},
+					},
+				],
+				loaders: [
+					{
+						test: /\.js$/,
+						include: /src/,
+						exclude: /(node_modules)/,
+						loader: 'babel',
+						query: {
+								cacheDirectory: true,
+						},
+					},
+				],
+			},
+		},
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'tests.webpack.js': ['webpack', 'sourcemap']
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress', 'coverage'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+		// custom launcher for travis
+		customLaunchers: {
+			Chrome_travis_ci: {
+				base: 'Chrome',
+				flags: ['--no-sandbox']
+			}
+		},
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  });
+
+  if (process.env.TRAVIS) {
+    config.browsers = ['Chrome_travis_ci'];
+  }
+}

package.json

@@ -1,11 +1,37 @@
 {
   "name": "medium-editor-autofocus",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Autofocus plugin for medium-editor",
-  "main": "src/autofocus.js",
+  "main": "dist/autofocus.js",
   "license": "GPL-3.0",
+  "scripts": {
+    "build": "npm run build:dev && npm run build:prod",
+    "build:dev": "webpack src/Plugin.js dist/medium-editor-autofocus.js --config ./webpack.config.dev.js --progress --colors",
+    "build:prod": "webpack src/Plugin.js dist/medium-editor-autofocus.min.js --config ./webpack.config.prod.js --progress --colors",
+    "test": "karma start --single-run --not-auto-watch karma.config.js"
+  },
   "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.13.2",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
+    "babel-preset-es2015": "^6.13.2",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.2.0",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.8.0",
+    "loader-utils": "^0.2.15",
+    "medium-editor": "^5.21.1",
+    "webpack": "^1.13.2"
+  },
+  "peerDependencies": {
+    "medium-editor": "^5.21.1"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dazorni/medium-editor-autofocus.git"

src/Plugin.js

@@ -0,0 +1,13 @@
+const MediumEditorAutofocus = MediumEditor.Extension.extend({
+  name: 'autofocus',
+
+  init() {
+    if (this.getEditorElements().length < 1) {
+      return;
+    }
+
+    this.getEditorElements()[0].focus();
+  }
+});
+
+export default MediumEditorAutofocus;

test/Plugin-test.js

@@ -0,0 +1,29 @@
+import MediumEditorAutofocus from '../src/Plugin';
+
+describe('Plugin', () => {
+	let container, editor, plugin;
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		container.classList.add('editable');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		editor.destroy();
+	});
+
+	it('Simple init should not fail', () => {
+    expect(document.activeElement.classList.contains('editable')).toBe(false);
+
+		plugin = new MediumEditorAutofocus();
+		editor = new MediumEditor('.editable', {
+			extensions: {
+				insert: plugin
+			}
+		 });
+
+    expect(document.activeElement.classList.contains('editable')).toBe(true);
+	});
+});
+

tests.webpack.js

@@ -0,0 +1,5 @@
+var testsContext = require.context('./test', true, /-test\.js$/);
+testsContext.keys().forEach(testsContext);
+
+var srcContext = require.context('./src', true, /^((?!__tests__).)*.js$/);
+srcContext.keys().forEach(srcContext);