Chore: prepare 0.1.0 release.

itgalaxy · Apr 13, 2017 · a5d2c96 · a5d2c96
1 parent bbac06b
commit a5d2c96
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+# 0.1.0 - 2017-04-13
+
+-   Added: allow use plugin if `webpack-dev-middleware` or `webpack-hot-middleware` not installed.
+-   Changed: rename `browserSyncOptions` to `browserSync`.
+-   Changed: rename `devMiddlewareOptions` to `devMiddleware`.
+-   Changed: rename `hotMiddlewareOptions` to `hotMiddleware`.
+-   Changed: by default `ignoreInitial` is now `true`. 
+-   Fixed: problem with resolve port when `browser-sync` and `webpack-dev-middleware` works together.
+
 # 0.0.3 - 2017-03-13
 
 -   Fixed: don't crush if `urls.local`, or `urls.external`, or `urls.ui`, or `urls.ui-external` 

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![dependencies Status](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin/status.svg)](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin) 
 [![devDependencies Status](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin/dev-status.svg)](https://david-dm.org/itgalaxy/browser-sync-dev-hot-webpack-plugin?type=dev)
 
-Combines BrowserSync, webpack-dev-middleware, and webpack-hot-middleware into one plugin.
+Combines `browser-sync`, `webpack-dev-middleware`, and `webpack-hot-middleware` into one plugin.
 
 ## Install
 
@@ -27,9 +27,9 @@ const webpackConfig = {
     plugins: [
         // Other plugins...
         new BrowserSyncHotPlugin({
-            browserSyncOptions: BROWSER_SYNC_OPTIONS,
-            devMiddlewareOptions: DEV_MIDDLEWARE_OPTIONS,
-            hotMiddlewareOptions: HOT_MIDDLEWARE_OPTIONS,
+            browserSync: BROWSER_SYNC_OPTIONS,
+            devMiddleware: DEV_MIDDLEWARE_OPTIONS,
+            hotMiddleware: HOT_MIDDLEWARE_OPTIONS,
             callback() {
                 console.log('Callback')
             }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "browser-sync-dev-hot-webpack-plugin",
-    "version": "0.0.3",
+    "version": "0.1.0",
     "description": "Combines BrowserSync, webpack-dev-middleware, and webpack-hot-middleware into one plugin",
     "license": "MIT",
     "author": "itgalaxy <development@itgalaxy.company>",
@@ -29,15 +29,15 @@
         "url": "https://github.com/itgalaxy/browser-sync-dev-hot-webpack-plugin/issues"
     },
     "files": [
-        "src",
-        "!**/__tests__"
+        "src"
     ],
     "main": "src/BrowserSyncDevHotWebpackPlugin.js",
     "dependencies": {
         "deepmerge": "^1.3.2"
     },
     "devDependencies": {
         "ajv-cli": "^1.1.0",
+        "browser-sync":"^2.18.8",
         "eslint": "^3.15.0",
         "eslint-plugin-ava": "^4.0.0",
         "eslint-plugin-import": "^2.2.0",
@@ -52,7 +52,10 @@
         "npm-run-all": "^4.0.0",
         "package-schema": "^1.0.0",
         "remark-cli": "^3.0.0",
-        "remark-preset-lint-itgalaxy": "^6.0.0"
+        "remark-preset-lint-itgalaxy": "^6.0.0",
+        "webpack": "^1 || ^2 || ^2.0.0-beta || ^2.1.0-beta || ^2.2.0-rc.0",
+        "webpack-dev-middleware": "^1.0.0",
+        "webpack-hot-middleware": "^2.0.0"
     },
     "peerDependencies": {
         "browser-sync": "^2.0.0",

diff --git a/src/BrowserSyncDevHotWebpackPlugin.js b/src/BrowserSyncDevHotWebpackPlugin.js
@@ -1,110 +1,152 @@
 'use strict';
 
-/* eslint-disable node/no-missing-require */
-const webpackDevMiddleware = require('webpack-dev-middleware');
-const webpackHotMiddleware = require('webpack-hot-middleware');
+/* eslint-disable no-sync */
+const EventEmitter = require('events');
 const browserSync = require('browser-sync');
-/* eslint-enable node/no-missing-require */
 const merge = require('deepmerge');
+const { desire } = require('./utils');
 
-class BrowserSyncDevHotWebpackPlugin {
+const webpackDevMiddleware = desire('webpack-dev-middleware');
+const webpackHotMiddleware = desire('webpack-hot-middleware');
+
+class BrowserSyncDevHotWebpackPlugin extends EventEmitter {
     constructor(options) {
-        this.watcher = null;
+        super();
+
         this.compiler = null;
+        this.middleware = [];
+        this.watcher = browserSync.create();
         this.options = merge.all([
             {
-                browserSyncOptions: {},
+                browserSync: {},
                 callback() {}, // eslint-disable-line no-empty-function
-                devMiddlewareOptions: {
+                devMiddleware: {
                     noInfo: true,
                     stats: false
                 },
-                hotMiddlewareOptions: {}
+                hotMiddleware: {}
             },
             options
         ]);
     }
 
+    registerEvents() {
+        this.on('webpack.compilation', () => this.watcher.notify('Rebuilding...'));
+        this.once('webpack.done', this.start.bind(this));
+    }
+
     apply(compiler) {
         if (this.options.disable) {
             return;
         }
 
+        this.registerEvents();
         this.compiler = compiler;
 
-        compiler.plugin('done', () => {
-            if (!this.watcher) {
-                this.watcher = browserSync.create();
-                compiler.plugin('compilation', () => this.watcher.notify('Rebuilding...'));
-                this.start();
-            }
-        });
+        compiler.plugin('compilation', this.emit.bind(this, 'webpack.compilation'));
+        compiler.plugin('done', this.emit.bind(this, 'webpack.done'));
     }
 
-    start() {
-        let browserSyncURLLocal = 'initialization';
-        let browserSyncURLExternal = 'initialization';
-        let browserSyncURLUI = 'initialization';
-        let browserSyncURLUIExternal = 'initialization';
-        const watcherConfig = merge.all([
+    setupWebpackDevMiddleware() {
+        this.webpackDevMiddleware = webpackDevMiddleware(this.compiler, merge.all([
+            {
+                publicPath: this.options.publicPath || this.compiler.options.output.publicPath
+            },
+            this.compiler.options.devServer || {},
+            this.options.devMiddleware
+        ]));
+
+        this.middleware.push(this.webpackDevMiddleware);
+    }
+
+    setupWebpackHotMiddleware() {
+        this.webpackHotMiddleware = webpackHotMiddleware(this.compiler, merge.all([
+            {
+                log: this.watcher.notify.bind(this.watcher)
+            },
+            this.options.hotMiddleware
+        ]));
+
+        this.middleware.push(this.webpackHotMiddleware);
+    }
+
+    config() {
+        this.browserSyncURLLocal = null;
+        this.browserSyncURLExternal = null;
+        this.browserSyncURLUI = null;
+        this.browserSyncURLUIExternal = null;
+
+        this.options.browserSync = merge.all([
             {
                 proxy: {
-                    middleware: this.middleware(),
+                    middleware: this.middleware,
                     proxyReq: [
                         (proxyReq) => {
-                            if (browserSyncURLLocal) {
-                                proxyReq.setHeader('X-Browser-Sync-URL-Local', browserSyncURLLocal);
+                            if (this.browserSyncURLLocal) {
+                                proxyReq.setHeader('X-Browser-Sync-URL-Local', this.browserSyncURLLocal);
                             }
 
-                            if (browserSyncURLExternal) {
-                                proxyReq.setHeader('X-Browser-Sync-URL-External', browserSyncURLExternal);
+                            if (this.browserSyncURLExternal) {
+                                proxyReq.setHeader('X-Browser-Sync-URL-External', this.browserSyncURLExternal);
                             }
 
-                            if (browserSyncURLUI) {
-                                proxyReq.setHeader('X-Browser-Sync-URL-UI', browserSyncURLUI);
+                            if (this.browserSyncURLUI) {
+                                proxyReq.setHeader('X-Browser-Sync-URL-UI', this.browserSyncURLUI);
                             }
 
-                            if (browserSyncURLUIExternal) {
-                                proxyReq.setHeader('X-Browser-Sync-URL-UI-External', browserSyncURLUIExternal);
+                            if (this.browserSyncURLUIExternal) {
+                                proxyReq.setHeader('X-Browser-Sync-URL-UI-External', this.browserSyncURLUIExternal);
                             }
 
-                            proxyReq.setHeader('X-Dev-Middleware', 'On');
-                            proxyReq.setHeader('X-Hot-Middleware', 'On');
+                            if (webpackDevMiddleware) {
+                                proxyReq.setHeader('X-Dev-Middleware', 'On');
+                            }
+
+                            if (webpackHotMiddleware) {
+                                proxyReq.setHeader('X-Hot-Middleware', 'On');
+                            }
                         }
                     ]
+                },
+                watchOptions: {
+                    ignoreInitial: true
                 }
             },
-            this.options.browserSyncOptions
+            this.options.browserSync
         ]);
+    }
 
-        this.watcher.init(watcherConfig, (error, bs) => {
-            if (error) {
-                throw error;
-            }
-
-            const URLs = bs.getOption('urls');
+    setup() {
+        if (webpackDevMiddleware) {
+            this.setupWebpackDevMiddleware();
+        }
 
-            browserSyncURLLocal = URLs.get('local');
-            browserSyncURLExternal = URLs.get('external');
-            browserSyncURLUI = URLs.get('ui');
-            browserSyncURLUIExternal = URLs.get('ui-external');
+        if (webpackHotMiddleware) {
+            this.setupWebpackHotMiddleware();
+        }
 
-            this.options.callback.bind(this);
-        });
+        this.config();
     }
 
-    middleware() {
-        const hotMiddlewareOptions = merge.all([
-            {
-                log: this.watcher.notify.bind(this.watcher)
-            },
-            this.options.hotMiddlewareOptions
-        ]);
+    start() {
+        this.setup();
 
-        this.webpackDevMiddleware = webpackDevMiddleware(this.compiler, this.options.devMiddlewareOptions);
-        this.webpackHotMiddleware = webpackHotMiddleware(this.compiler, hotMiddlewareOptions);
+        process.nextTick(() => {
+            this.watcher.init(this.options.browserSync, (error, bs) => {
+                if (error) {
+                    throw error;
+                }
+
+                const URLs = bs.getOption('urls');
 
-        return [this.webpackDevMiddleware, this.webpackHotMiddleware];
+                this.browserSyncURLLocal = URLs.get('local');
+                this.browserSyncURLExternal = URLs.get('external');
+                this.browserSyncURLUI = URLs.get('ui');
+                this.browserSyncURLUIExternal = URLs.get('ui-external');
+
+                this.options.callback.bind(this);
+            });
+        });
     }
 }
 

diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports.desire = (dependency, fallback) => {
+    try {
+        require.resolve(dependency);
+    } catch (error) { // eslint-disable-line no-unused-vars
+        return fallback;
+    }
+
+    return require(dependency); // eslint-disable-line global-require, import/no-dynamic-require
+};