m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Improved Ui Dev Mode

Browse Source 
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.
This commit is contained in:
Dan Finlay 2016-07-01 14:23:37 -07:00
parent c75543dac8
commit 0cd11915ce
7 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
development/fonts
View File

@ -1 +0,0 @@
../app/fonts

1
development/images
View File

@ -1 +0,0 @@
../app/images

38
development/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>MetaMask</title> <title>MetaMask</title>
</head> </head>
<body> <body>
@ -23,4 +24,41 @@ html, body, #app-content, .super-dev-container {
background: #F7F7F7; background: #F7F7F7;
} }
</style> </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> </html>

1
fonts Symbolic link
View File

@ -0,0 +1 @@
app/fonts

1
images Symbolic link
View File

@ -0,0 +1 @@
app/images

2
package.json
View File

@ -7,7 +7,7 @@
"start": "gulp dev", "start": "gulp dev",
"test": "mocha --require test/helper.js --compilers js:babel-register --recursive", "test": "mocha --require test/helper.js --compilers js:babel-register --recursive",
"watch": "mocha watch --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": { "browserify": {
"transform": [ "transform": [

10
development/mocker.js → ui-dev.js
View File

@ -1,9 +1,9 @@
const render = require('react-dom').render const render = require('react-dom').render
const h = require('react-hyperscript') const h = require('react-hyperscript')
const Root = require('../ui/app/root') const Root = require('./ui/app/root')
const configureStore = require('./mockStore') const configureStore = require('./development/mockStore')
const states = require('./states') const states = require('./development/states')
const Selector = require('./selector') const Selector = require('./development/selector')
// Query String // Query String
const qs = require('qs') const qs = require('qs')
@ -13,7 +13,7 @@ const firstState = states[selectedView]
updateQueryParams(selectedView) updateQueryParams(selectedView)
// CSS // CSS
const MetaMaskUiCss = require('../ui/css') const MetaMaskUiCss = require('./ui/css')
const injectCss = require('inject-css') const injectCss = require('inject-css')