aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan Finlay <dan@danfinlay.com>2016-07-02 05:23:37 +0800
committerDan Finlay <dan@danfinlay.com>2016-07-02 05:23:37 +0800
commit0cd11915cec52408472fc6424e6680b6266526dd (patch)
treefded2a6a55283444e4f0aafaf9cd7be0d3815115
parentc75543dac8f81bc922d08803aaf92866ef823ddf (diff)
downloadtangerine-wallet-browser-0cd11915cec52408472fc6424e6680b6266526dd.tar.gz
tangerine-wallet-browser-0cd11915cec52408472fc6424e6680b6266526dd.tar.zst
tangerine-wallet-browser-0cd11915cec52408472fc6424e6680b6266526dd.zip
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.
l---------development/fonts1
l---------development/images1
-rw-r--r--development/index.html38
l---------fonts1
l---------images1
-rw-r--r--package.json2
-rw-r--r--ui-dev.js (renamed from development/mocker.js)10
7 files changed, 46 insertions, 8 deletions
diff --git a/development/fonts b/development/fonts
deleted file mode 120000
index 77c7651c1..000000000
--- a/development/fonts
+++ /dev/null
@@ -1 +0,0 @@
-../app/fonts \ No newline at end of file
diff --git a/development/images b/development/images
deleted file mode 120000
index 38cd3b8d4..000000000
--- a/development/images
+++ /dev/null
@@ -1 +0,0 @@
-../app/images \ No newline at end of file
diff --git a/development/index.html b/development/index.html
index aca074f3e..00cfb96c8 100644
--- 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>
diff --git a/fonts b/fonts
new file mode 120000
index 000000000..043d139a9
--- /dev/null
+++ b/fonts
@@ -0,0 +1 @@
+app/fonts \ No newline at end of file
diff --git a/images b/images
new file mode 120000
index 000000000..2a4dbe892
--- /dev/null
+++ b/images
@@ -0,0 +1 @@
+app/images \ No newline at end of file
diff --git a/package.json b/package.json
index 00cc4c23a..413c19ca5 100644
--- 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": [
diff --git a/development/mocker.js b/ui-dev.js
index 0656e66ea..7498ff8ea 100644
--- a/development/mocker.js
+++ b/ui-dev.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')