Improved Ui Dev Mode

Dev mode now reloads on file changes (although it seems to sometimes reload too soon, not getting the update... we can tune the timeout interval in development/index.html) Dev mode now reloads on all non-`node_modules` file changes, so the `ui` and `app` folders are both being watched for live reloading.
9 years ago · 0cd11915ce
parent c75543dac8
commit 0cd11915ce
7 changed files with 46 additions and 8 deletions
--- a/development/fonts
+++ b/development/fonts
@ -1 +0,0 @@
-../app/fonts
--- a/development/images
+++ b/development/images
@ -1 +0,0 @@
-../app/images
--- a/development/index.html
+++ b/development/index.html
@ -3,6 +3,7 @@
  <head>
    <meta charset="utf-8">
    <title>MetaMask</title>
+
  </head>
  <body>

@ -23,4 +24,41 @@ html, body, #app-content, .super-dev-container {
  background: #F7F7F7;
 }
 </style>
+
+<script>
+liveReloadCode(Date.now(), 300)
+function liveReloadCode(lastUpdate, updateRate) {
+  setTimeout(iter, updateRate)
+
+  function iter() {
+    var xhr = new XMLHttpRequest()
+
+    xhr.open('GET', '/-/live-reload')
+    xhr.onreadystatechange = function() {
+      if(xhr.readyState !== 4) {
+        return
+      }
+
+      try {
+        var change = JSON.parse(xhr.responseText).lastUpdate
+
+        if(lastUpdate < change) {
+          return reload()
+        }
+      } catch(err) {
+      }
+
+      xhr =
+      xhr.onreadystatechange = null
+      setTimeout(iter, updateRate)
+    }
+
+    xhr.send(null)
+  }
+}
+
+function reload() {
+  window.location.reload()
+}
+ </script>
 </html>
--- a/1
+++ b/1
@ -0,0 +1 @@
+app/fonts
--- a/1
+++ b/1
@ -0,0 +1 @@
+app/images
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
    "start": "gulp dev",
    "test": "mocha --require test/helper.js --compilers js:babel-register --recursive",
    "watch": "mocha watch --compilers js:babel-register --recursive",
-    "ui": "beefy development/mocker.js:bundle.js --live --open --cwd development --index=./development/index.html"
+    "ui": "beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./"
  },
  "browserify": {
    "transform": [
--- a/development/mocker.js
+++ b/development/mocker.js
@ -1,9 +1,9 @@
 const render = require('react-dom').render
 const h = require('react-hyperscript')
-const Root = require('../ui/app/root')
-const configureStore = require('./mockStore')
-const states = require('./states')
-const Selector = require('./selector')
+const Root = require('./ui/app/root')
+const configureStore = require('./development/mockStore')
+const states = require('./development/states')
+const Selector = require('./development/selector')

 // Query String
 const qs = require('qs')
@ -13,7 +13,7 @@ const firstState = states[selectedView]
 updateQueryParams(selectedView)

 // CSS
-const MetaMaskUiCss = require('../ui/css')
+const MetaMaskUiCss = require('./ui/css')
 const injectCss = require('inject-css')