REFACTOR ui state + production build

package.json

@@ -5,38 +5,12 @@
   "description": "Minimalistic browser-based Solidity IDE",
   "devDependencies": {
     "async": "^2.1.2",
-
-    "babel-cli": "^6.16.0",
-
     "babel-eslint": "^7.1.1",
-
-    "babel-plugin-check-es2015-constants": "^6.8.0",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
-    "babel-plugin-transform-es2015-block-scoped-functions": "^6.8.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.18.0",
-    "babel-plugin-transform-es2015-classes": "^6.18.0",
-    "babel-plugin-transform-es2015-computed-properties": "^6.8.0",
-    "babel-plugin-transform-es2015-destructuring": "^6.18.0",
-    "babel-plugin-transform-es2015-duplicate-keys": "^6.8.0",
-    "babel-plugin-transform-es2015-for-of": "^6.18.0",
-    "babel-plugin-transform-es2015-function-name": "^6.9.0",
-    "babel-plugin-transform-es2015-literals": "^6.8.0",
-    "babel-plugin-transform-es2015-object-super": "^6.8.0",
-    "babel-plugin-transform-es2015-parameters": "^6.18.0",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.18.0",
-    "babel-plugin-transform-es2015-spread": "^6.8.0",
-    "babel-plugin-transform-es2015-sticky-regex": "^6.8.0",
-    "babel-plugin-transform-es2015-template-literals": "^6.8.0",
-    "babel-plugin-transform-es2015-unicode-regex": "^6.11.0",
-    "babel-plugin-transform-regenerator": "^6.16.1",
-    "babel-polyfill": "^6.22.0",
-
     "babel-plugin-yo-yoify": "^0.3.3",
+    "babel-polyfill": "^6.22.0",
     "babel-preset-es2015": "^6.24.0",
-
     "babelify": "^7.3.0",
     "brace": "^0.8.0",
-    "browserify": "^13.0.0",
     "browserify-reload": "^1.0.3",
     "csjs-inject": "^1.0.1",
     "csslint": "^1.0.2",
@@ -161,6 +135,6 @@
     "start": "npm-run-all -lpr serve watch onchange",
     "test": "standard; npm run csslint; node test/index.js",
     "test-browser": "npm-run-all -lpr selenium downloadsolc make-mock-compiler serve browsertest",
-    "watch": "watchify src/index.js -dv --delay 0 -p browserify-reload -o '| npm run sourcemap'"
+    "watch": "watchify src/index.js --transform-key=development -dv -p browserify-reload -o build/app.js"
   }
 }

src/app.js

@@ -46,10 +46,13 @@ window.addEventListener('message', function (ev) {
 var run = function () {
   var self = this
   this.event = new EventManager()
-  var storage = new Storage()
-  var files = new Files(storage)
-  var config = new Config(storage)
-  var currentFile
+  var fileStorage = new Storage('sol:')
+  var files = new Files(fileStorage)
+  var config = new Config(fileStorage)
+  var uiStorage = new Storage('sol-ui:')
+  var ui = new Files(uiStorage)
+
+  ui.set('currentFile', '')
 
   // return all the files, except the temporary/readonly ones
   function packageFiles () {
@@ -183,7 +186,8 @@ var run = function () {
   filepanel.className = css.filepanel
   var FilePanelAPI = {
     createName: createNonClashingName,
-    switchToFile: switchToFile
+    switchToFile: switchToFile,
+    ui: ui.event
   }
   var el = new FilePanel(FilePanelAPI, files)
   filepanel.appendChild(el)
@@ -220,7 +224,7 @@ var run = function () {
     })
   })
   files.event.register('fileRemoved', function (path) {
-    if (path === currentFile) currentFile = null
+    if (path === ui.get('currentFile')) ui.set('currentFile', '')
   })
   // ------------------ gist publish --------------
 
@@ -318,7 +322,7 @@ var run = function () {
         if (!files.rename(originalName, newName)) {
           alert('Error while renaming file')
         } else {
-          currentFile = null
+          ui.set('currentFile', '')
           switchToFile(newName)
           editor.discard(originalName)
         }
@@ -339,7 +343,7 @@ var run = function () {
       if (!files.remove(name)) {
         alert('Error while removing file')
       } else {
-        currentFile = null
+        ui.set('currentFile', '')
         switchToNextFile()
         editor.discard(name)
       }
@@ -352,9 +356,7 @@ var run = function () {
   function switchToFile (file) {
     editorSyncFile()
 
-    currentFile = file
-
-    files.event.trigger('fileFocus', [file])
+    ui.set('currentFile', file)
 
     if (files.isReadOnly(file)) {
       editor.openReadOnly(file, files.get(file))
@@ -385,10 +387,10 @@ var run = function () {
       $filesEl.append($('<li class="file"><span class="name">' + name + '</span><span class="remove"><i class="fa fa-close"></i></span></li>'))
     }
 
-    var currentFileOpen = !!currentFile
+    var currentFileOpen = !!ui.get('currentFile')
 
     if (currentFileOpen) {
-      var active = $('#files .file').filter(function () { return $(this).find('.name').text() === currentFile })
+      var active = $('#files .file').filter(function () { return $(this).find('.name').text() === ui.get('currentFile') })
       active.addClass('active')
     }
     $('#input').toggle(currentFileOpen)
@@ -636,7 +638,7 @@ var run = function () {
       this.fullLineMarker = null
       if (lineColumnPos) {
         var source = compiler.lastCompilationResult.data.sourceList[location.file] // auto switch to that tab
-        if (currentFile !== source) {
+        if (ui.get('currentFile') !== source) {
           switchToFile(source)
         }
         this.statementMarker = editor.addMarker(lineColumnPos, 'highlightcode')
@@ -760,12 +762,12 @@ var run = function () {
 
   var rendererAPI = {
     error: (file, error) => {
-      if (file === currentFile) {
+      if (file === ui.get('currentFile')) {
         editor.addAnnotation(error)
       }
     },
     errorClick: (errFile, errLine, errCol) => {
-      if (errFile !== currentFile && files.exists(errFile)) {
+      if (errFile !== ui.get('currentFile') && files.exists(errFile)) {
         switchToFile(errFile)
       }
       editor.gotoLine(errLine, errCol)
@@ -814,6 +816,7 @@ var run = function () {
 
   function runCompiler () {
     editorSyncFile()
+    var currentFile = ui.get('currentFile')
     if (currentFile) {
       var target = currentFile
       var sources = {}
@@ -823,6 +826,7 @@ var run = function () {
   }
 
   function editorSyncFile () {
+    var currentFile = ui.get('currentFile')
     if (currentFile) {
       var input = editor.get(currentFile)
       files.set(currentFile, input)
@@ -834,6 +838,7 @@ var run = function () {
   var saveTimeout = null
 
   function editorOnChange () {
+    var currentFile = ui.get('currentFile')
     if (!currentFile) {
       return
     }

src/app/file-explorer.js

@@ -37,6 +37,7 @@ module.exports = fileExplorer
 
 function fileExplorer (appAPI, files) {
   var fileEvents = files.event
+  var appUI = appAPI.ui
   var tv = new Treeview({
     extractData: function (value, tree, key) {
       var newValue = {}
@@ -75,7 +76,7 @@ function fileExplorer (appAPI, files) {
     </span>
   `
 
-  fileEvents.register('fileFocus', fileFocus)
+  appUI.register('currentFile', fileFocus)
   fileEvents.register('fileRemoved', fileRemoved)
   fileEvents.register('fileRenamed', fileRenamed)
   fileEvents.register('fileAdded', fileAdded)
@@ -182,7 +183,7 @@ function fileExplorer (appAPI, files) {
       var allPaths = Object.keys(files.list())
       for (var i = 0, len = allPaths.length, path, err; i < len; i++) {
         path = allPaths[i]
-        if (files.IsReadOnly(path)) {
+        if (files.isReadOnly(path)) {
           err = 'path contains readonly elements'
           break
         } else if (path.indexOf(newPath) === 0) {

src/app/storage.js

 'use strict'
 
-function Storage () {
+function Storage (prefix) {
   this.exists = function (name) {
     return this.get(name) !== null
   }
 
   this.get = function (name) {
-    return window.localStorage.getItem('sol:' + name)
+    return window.localStorage.getItem(prefix + name)
   }
 
   this.set = function (name, content) {
     try {
-      window.localStorage.setItem('sol:' + name, content)
+      window.localStorage.setItem(prefix + name, content)
     } catch (exception) {
       return false
     }
@@ -19,7 +19,7 @@ function Storage () {
   }
 
   this.remove = function (name) {
-    window.localStorage.removeItem('sol:' + name)
+    window.localStorage.removeItem(prefix + name)
     return true
   }
 
@@ -40,7 +40,7 @@ function Storage () {
   this.keys = function () {
     return safeKeys()
       // filter any names not including sol:
-      .filter(function (item) { return item.indexOf('sol:', 0) === 0 })
+      .filter(function (item) { return item.indexOf(prefix, 0) === 0 })
       // remove sol: from filename
       .map(function (item) { return item.replace(/^sol:/, '') })
   }
@@ -49,7 +49,7 @@ function Storage () {
   safeKeys().forEach(function (name) {
     if (name.indexOf('sol-cache-file-', 0) === 0) {
       var content = window.localStorage.getItem(name)
-      window.localStorage.setItem(name.replace(/^sol-cache-file-/, 'sol:'), content)
+      window.localStorage.setItem(name.replace(/^sol-cache-file-/, prefix), content)
       window.localStorage.removeItem(name)
     }
   })