Skip to content
This repository was archived by the owner on May 1, 2020. It is now read-only.

Commit 5407ec3

Browse files
mlynchmlynch
committed
Dev serv JS and CSS
1 parent 2cac273 commit 5407ec3

File tree

2 files changed

+227
-32
lines changed

2 files changed

+227
-32
lines changed

‎bin/ion-dev.css

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,80 @@
1-
/*
2-
Ionic Dev Server: Styles
3-
*/
1+
._ionic-error-view {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
z-index: 99999;
6+
width: 100%;
7+
height: 100%;
8+
background-color: white;
9+
transform: translate3d(0, 100%, 0);
10+
transition: transform 500ms cubic-bezier(0.36,0.66,0.04,1);
11+
font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
12+
white-space: pre-wrap;
13+
}
14+
._ionic-error-in-cordova ._ionic-error-navbar {
15+
height: 64px;
16+
padding: 10px 0;
17+
}
18+
._ionic-error-in-cordova ._ionic-error-navbar ._title {
19+
margin-top: 18px;
20+
}
21+
._ionic-error-in-cordova ._ionic-error-navbar ._close {
22+
top: 28px;
23+
}
24+
25+
._ionic-error-navbar {
26+
padding: 4px 0;
27+
text-align: center;
28+
background-color: #e74c3c;
29+
height: 44px;
30+
}
31+
._ionic-error-navbar ._title {
32+
margin-top: 8px;
33+
font-weight: bold;
34+
color: #fff;
35+
font-size: 16px;
36+
}
37+
._ionic-error-navbar ._close {
38+
position: absolute;
39+
right: 8px;
40+
top: 13px;
41+
cursor: pointer;
42+
font-size: 16px;
43+
color: #fff;
44+
}
45+
46+
47+
._ionic-error-view .message {
48+
color: rgb(200, 0, 0);
49+
font-weight: bold;
50+
font-size: 16px;
51+
margin-bottom: 30px;
52+
}
53+
._ionic-error-view .stack {
54+
color: #000;
55+
width: 100%;
56+
height: 300px;
57+
font-size: 12px;
58+
max-height: 300px;
59+
}
60+
._ionic-error-view.show {
61+
transform: translate3d(0, 0, 0);
62+
}
63+
._ionic-error-buttons {
64+
position: absolute;
65+
bottom: 20px;
66+
left: 20px;
67+
width: 100%;
68+
display: flex;
69+
flex-direction: row;
70+
}
71+
._ionic-error-buttons ._button {
72+
width: 100px;
73+
}
74+
._ionic-error-title {
75+
color: #111;
76+
}
77+
78+
._ionic-error-content {
79+
padding: 16px;
80+
}

‎bin/ion-dev.js

Lines changed: 147 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,187 @@
1-
// Ionic Dev Server: Client Side Logger
2-
31
window.IonicDevServer = {
4-
52
start: function() {
6-
IonicDevServer.msgQueue = [];
3+
this.msgQueue = [];
4+
5+
this.consoleLog = console.log;
6+
this.consoleError = console.error;
7+
this.consoleWarn = console.warn;
8+
9+
if (IonicDevServerConfig && IonicDevServerConfig.sendConsoleLogs) {
10+
this.patchConsole();
11+
}
12+
13+
console.log('dev server enabled');
714

8-
IonicDevServer.consoleLog = console.log;
9-
IonicDevServer.consoleError = console.error;
15+
this.openConnection();
1016

11-
if (IonicDevServerConfig.sendConsoleLogs) {
12-
IonicDevServer.patchConsole();
17+
this.bindKeyboardEvents();
18+
},
19+
20+
handleError: function(err) {
21+
var self = this;
22+
23+
console.error('Handling error', err);
24+
25+
var existing = document.querySelector('._ionic-error-view');
26+
if(existing) {
27+
document.body.removeChild(existing);
1328
}
1429

15-
IonicDevServer.openConnection();
30+
this._errorWindow = this._makeErrorWindow(err);
31+
document.body.appendChild(this._errorWindow);
32+
33+
setTimeout(function() {
34+
window.requestAnimationFrame(function() {
35+
self._errorWindow.classList.add('show');
36+
});
37+
}, 500);
38+
39+
},
40+
41+
_closeErrorWindow: function() {
42+
var self = this;
43+
window.requestAnimationFrame(function() {
44+
self._errorWindow.classList.remove('show');
45+
setTimeout(function() {
46+
document.body.removeChild(self._errorWindow);
47+
self._errorWindow = null;
48+
}, 500);
49+
});
50+
},
51+
52+
_makeErrorWindow: function(err) {
53+
var self = this;
54+
55+
var isInCordova = !!window.cordova;
56+
57+
var d = document.createElement('div');
58+
d.className = '_ionic-error-view';
59+
60+
if(isInCordova) {
61+
d.classList.add('_ionic-error-in-cordova');
62+
}
63+
64+
d.innerHTML = '<div style="position: relative"><div class="_ionic-error-navbar"><h1 class="_title">App Runtime Error</h1><div class="_close">Close</div></div><div class="_ionic-error-content"><div class="message">' + err.message + '</div><h4>Stacktrace</h4><textarea class="stack">' + err.stack + '</textarea><!--<div class="_button" action="copy">Copy</div>-->' + this._makeErrorButtonsHtml() + '</div></div>';
65+
66+
d.querySelector('._close').addEventListener('click', function(e) {
67+
closeWindow(d);
68+
});
69+
/*
70+
d.querySelector('[action="copy"]').addEventListener('click', function(e) {
71+
if(window.IonicDevtools) {
72+
window.IonicDevtools.copyErrorToClipboard(err);
73+
}
74+
});
75+
*/
1676

77+
return d;
78+
},
79+
_makeErrorButtonsHtml: function() {
80+
var d = document.createElement('div');
81+
d.className = '_ion-error-buttons';
82+
83+
var b1 = document.createElement('button');
84+
b1.innerHTML = 'Close (ESC)';
85+
b1.className = '_button';
86+
87+
var b2 = document.createElement('button');
88+
b2.innerHTML = 'Reload (&#8984;)';
89+
b2.className = '_button';
90+
91+
//d.appendChild(b1);
92+
//d.appendChild(b2);
93+
94+
return d.innerHTML;
95+
},
96+
reloadApp: function() {
97+
if(window.cordova) {
98+
window.location.reload(true);
99+
}
100+
},
101+
showDebugMenu: function() {
102+
if(window.IonicDevtools) {
103+
window.IonicDevtools.showDebugMenu();
104+
}
105+
},
106+
bindKeyboardEvents: function() {
107+
var self = this;
108+
109+
document.addEventListener('keyup', function(event) {
110+
var key = event.keyCode || event.charCode || 0;
111+
112+
if(key == 27 && self._errorWindow) {
113+
self._closeErrorWindow();
114+
}
115+
});
116+
document.addEventListener('keydown', function(event) {
117+
var key = event.keyCode || event.charCode || 0;
118+
119+
// Check for reload command (cmd/ctrl+R)
120+
if(key == 82 && (event.metaKey || event.ctrlKey)) {
121+
self.reloadApp();
122+
}
123+
124+
// Check for debugger command (cmd/ctrl+D)
125+
/*
126+
if(key == 68 && (event.metaKey || event.ctrlKey)) {
127+
self.showDebugMenu();
128+
}
129+
*/
130+
});
17131
},
18132

19133
openConnection: function() {
20-
IonicDevServer.socket = new WebSocket('ws://' + window.location.hostname + ':' + IonicDevServerConfig.wsPort);
134+
var self = this;
135+
this.socket = new WebSocket('ws://' + window.location.hostname + ':' + IonicDevServerConfig.wsPort);
21136

22-
IonicDevServer.socket.onopen = function(ev) {
23-
IonicDevServer.socketReady = true;
137+
this.socket.onopen = function(ev) {
138+
self.socketReady = true;
24139

25-
IonicDevServer.socket.onmessage = function(ev) {
140+
self.socket.onmessage = function(ev) {
26141
try {
27142
var msg = JSON.parse(ev.data);
28143
switch (msg.category) {
29144
case 'taskEvent':
30-
IonicDevServer.receiveTaskEvent(msg);
145+
self.receiveTaskEvent(msg);
31146
break;
32147
}
33148
} catch (e) {
34-
IonicDevServer.consoleError('error receiving ws message', e);
149+
self.consoleError('error receiving ws message', e);
35150
}
36151
};
37152

38-
IonicDevServer.socket.onclose = () => {
39-
IonicDevServer.consoleLog('Dev server logger closed');
153+
self.socket.onclose = () => {
154+
self.consoleLog('Dev server logger closed');
40155
};
41156

42-
IonicDevServer.drainMessageQueue();
157+
self.drainMessageQueue();
43158
};
44159
},
45160

46161
queueMessageSend: function(msg) {
47-
IonicDevServer.msgQueue.push(msg);
48-
IonicDevServer.drainMessageQueue();
162+
this.msgQueue.push(msg);
163+
this.drainMessageQueue();
49164
},
50165

51166
drainMessageQueue: function() {
52-
if (IonicDevServer.socketReady) {
167+
if (this.socketReady) {
53168
var msg;
54-
while (msg = IonicDevServer.msgQueue.shift()) {
169+
while (msg = this.msgQueue.shift()) {
55170
try {
56-
IonicDevServer.socket.send(JSON.stringify(msg));
57-
} catch (e) {
58-
IonicDevServer.consoleError('ws error: ' + e);
171+
this.socket.send(JSON.stringify(msg));
172+
} catch(e) {
173+
if(e instanceof TypeError) {
174+
175+
} else {
176+
this.consoleError('ws error: ' + e);
177+
}
59178
}
60179
}
61180
}
62181
},
63182

64183
patchConsole: function() {
184+
var self = this;
65185
function patchConsole(consoleType) {
66186
console[consoleType] = (function() {
67187
var orgConsole = console[consoleType];
@@ -76,7 +196,7 @@ window.IonicDevServer = {
76196
msg.data.push(arguments[i]);
77197
}
78198
if (msg.data.length) {
79-
IonicDevServer.queueMessageSend(msg);
199+
self.queueMessageSend(msg);
80200
}
81201
};
82202
})();
@@ -88,13 +208,11 @@ window.IonicDevServer = {
88208
}
89209
}
90210
},
91-
92211
receiveTaskEvent: function(taskEvent) {
93212
if (taskEvent.data && ['bundle', 'sass', 'transpile', 'template'].indexOf(taskEvent.data.scope) > -1) {
94-
IonicDevServer.consoleLog(taskEvent.data.msg);
213+
this.consoleLog(taskEvent.data.msg);
95214
}
96215
}
97-
98216
};
99217

100218
IonicDevServer.start();

0 commit comments

Comments
 (0)