webpack hot reload support

ui/build/config/gulp.js

@@ -39,7 +39,6 @@ export default function ({ watch, production, errorHandler }) {
     .pipe(gulp.dest('misc/.iconfont'))
     .pipe(offsetMtimeAtFirstBuild());
 
-
   tasks.iconfont = () => gulp
     .src('misc/icons/*.svg')
     .pipe(plumber({ errorHandler }))

ui/build/config/webpack.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import webpack from 'webpack';
-import fs from 'fs-extra';
+import fs from 'fs';
 
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';

ui/build/main.js

@@ -7,7 +7,7 @@ import runWebpack from './runWebpack';
 async function main() {
   const dir = process.cwd();
   process.chdir(root());
-  await runGulp(argv);
+  await runGulp({});
   await runWebpack(argv);
   process.chdir(dir);
 }

ui/build/runGulp.js

@@ -4,12 +4,12 @@ import log from 'fancy-log';
 import chalk from 'chalk';
 import gulpConfig from './config/gulp';
 
-export default async function ({ watch, production }) {
+export default async function () {
   function handleError(err) {
-    log(chalk.red('Error: %s'), chalk.reset(err.toString()));
-    if (err && !watch) { process.exit(1); }
+    log(chalk.red('Error: %s'), chalk.reset(err.toString() + err.stack));
+    if (err) process.exit(1);
   }
-  const gulpTasks = gulpConfig({ watch, production, errorHandler: handleError });
+  const gulpTasks = gulpConfig({ production: true, errorHandler: handleError });
   return new Promise((resolve) => {
     const taskList = {};
 
@@ -22,9 +22,6 @@ export default async function ({ watch, production }) {
       taskList[uid] = false;
 
       if (Object.values(taskList).filter((b) => b).length === 0) {
-        if (watch) {
-          gulpTasks.watch();
-        }
         resolve();
       }
     });

ui/components/autocomplete/DomainSelectAutoComplete.js

@@ -16,7 +16,7 @@ function renderItem(domain) {
   return tpl`
     <div class="media">
       <div class="media__left medium">
-        <img class="small domain-profile-avatar" src="${domain.gravatar_url}" width="30" height="30">
+        <img class="small domain-profile-avatar" src="${domain.gravatar}" width="30" height="30">
       </div>
       <div class="media__body medium">
         <div class="domain-select__name">${domain.name}</div>

ui/components/autocomplete/UserSelectAutoComplete.js

@@ -16,7 +16,7 @@ function renderItem(user) {
   return tpl`
     <div class="media">
       <div class="media__left medium">
-        <img class="small user-profile-avatar" src="${user.gravatar_url}" width="30" height="30">
+        <img class="small user-profile-avatar" src="${user.gravatar}" width="30" height="30">
       </div>
       <div class="media__body medium">
         <div class="user-select__uname">${user.uname}</div>

ui/components/notification/index.js

@@ -22,7 +22,7 @@ export default class Notification {
       .appendTo('body');
     this.$n.width(); // force reflow
     this.$n.removeClass('hide');
-    this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
+    if (duration) this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
   }
 
   handleClick() {

ui/components/scratchpad/index.js

@@ -64,6 +64,7 @@ export default class ScratchpadContainer extends React.PureComponent {
   handleChangeSize(uiElement, size) {
     this.props.changeUiSize(uiElement, size);
     $('#scratchpad').trigger('vjScratchpadRelayout');
+    this.props.ui.pretest.visible = !!this.props.ui.pretest.visible;
     this.forceUpdate();
   }
 

ui/components/socket/index.js

@@ -1,19 +1,23 @@
 import SockJS from 'sockjs-client';
-import Notification from 'vj/components/notification';
+import Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
 
 export default class Sock {
   constructor(url) {
     this.url = url;
-    this.reconnect = false;
+    this.isreconnect = false;
     this.init();
+    this.notification = null;
   }
 
   init() {
     this.sock = new SockJS(this.url);
     this.sock.onopen = () => {
-      if (this.reconnect) Notification.info(i18n('Reconnected to the server.'));
-      if (this.onopen) this.onopen(this.reconnect);
+      if (this.isreconnect) {
+        this.notification.hide();
+        Notification.info(i18n('Reconnected to the server.'));
+      }
+      if (this.onopen) this.onopen(this.isreconnect);
     };
     this.sock.onclose = (code, reason) => {
       console.warn('Connection closed, ', code, reason);
@@ -21,12 +25,29 @@ export default class Sock {
         if (this.onclose) this.onclose(code, reason);
         return;
       }
-      Notification.warn(i18n('Disconnected from the server. Reconnecting...'));
-      this.reconnect = setTimeout(() => { this.init(); }, 3000);
+      if (!this.closed) {
+        if (!this.notification) {
+          this.notification = new Notification({
+            message: i18n('Disconnected from the server. Reconnecting...'),
+            type: 'warn',
+            duration: 0,
+            action: this.init.bind(this),
+          });
+          console.log(this.notification);
+        }
+        this.isreconnect = setTimeout(() => { this.init(); }, 3000);
+      } else {
+        if (this.notification) this.notification.hide();
+        Notification.warn(i18n('Disconnected from the server.'));
+      }
       if (this.onclose) this.onclose(code, reason);
     };
     this.sock.onmessage = (message) => {
       if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
+      const msg = JSON.parse(message);
+      if (msg.error === 'PermissionError' || msg.error === 'PrivilegeError') {
+        this.closed = true;
+      }
       if (this.onmessage) this.onmessage(message);
     };
   }