forked from rangle/augury
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbackend.ts
More file actions
116 lines (97 loc) · 3.97 KB
/
backend.ts
File metadata and controls
116 lines (97 loc) · 3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import {DomController} from './controllers/dom';
import {Angular2Adapter} from './adapters/angular2';
import Highlighter from './utils/highlighter';
import ParseData from '../frontend/utils/parse-data';
declare var ng: { probe: Function, coreTokens: any };
let channel = {
sendMessage: (message) => {
return window.postMessage(JSON.parse(JSON.stringify({
type: 'AUGURY_INSPECTED_APP',
message
})), '*');
}
};
let adapter = new Angular2Adapter();
let dom = new DomController(adapter, channel);
dom.hookIntoBackend();
adapter.setup();
window.addEventListener('message', function(event) {
// We only accept messages from ourselves
if (event.source !== window) {
return;
}
if (event.data.type && (event.data.type === 'AUGURY_CONTENT_SCRIPT')) {
if (event.data.message.message.actionType ===
'START_COMPONENT_TREE_INSPECTION') {
adapter.renderTree();
} else if (event.data.message.message.actionType === 'HIGHLIGHT_NODE') {
const highlightStr = '[augury-id=\"' +
event.data.message.message.node.id + '\"]';
Highlighter.clear();
Highlighter.highlight(document.querySelector(highlightStr),
event.data.message.message.node.name);
} else if (event.data.message.message.actionType === 'CLEAR_HIGHLIGHT') {
Highlighter.clear();
} else if (event.data.message.message.actionType === 'SELECT_NODE') {
const highlightStr = '[augury-id=\"' +
event.data.message.message.node.id + '\"]';
const element: HTMLElement =
<HTMLElement>document.querySelector(highlightStr);
if (element) {
element.scrollIntoView();
Object.defineProperty(window, '$a', {
configurable: true,
value: ng.probe(document.querySelector(highlightStr))
});
}
} else if (event.data.message.message.actionType === 'UPDATE_PROPERTY') {
const highlightStr = '[augury-id=\"' +
event.data.message.message.property.id + '\"]';
const dE = ng.probe(document.querySelector(highlightStr));
const propertyTree: Array<string> =
event.data.message.message.property.propertyTree.split(',');
let property = propertyTree.pop();
// replace with existing property as we normalized data initally
if (dE.componentInstance.constructor.name === 'NgStyle') {
propertyTree[0] = '_rawStyle';
} else if (dE.componentInstance.constructor.name === 'NgSwitch') {
property = '_' + property;
} else if (dE.componentInstance.constructor.name === 'NgClass') {
propertyTree[0] = '_' + propertyTree[0];
}
const value = propertyTree.reduce((previousValue, currentValue) =>
previousValue[currentValue], dE.componentInstance);
if (value !== undefined) {
const type: string = event.data.message.message.property.type;
let newValue: any;
if (type === 'number') {
newValue =
ParseData.parseNumber(event.data.message.message.property.value);
} else if (type === 'boolean') {
newValue =
ParseData.parseBoolean(event.data.message.message.property.value);
} else {
newValue = event.data.message.message.property.value;
}
value[property] = newValue;
const appRef = dE.inject(ng.coreTokens.ApplicationRef);
appRef.tick();
adapter.renderTree();
}
} else if (event.data.message.message.actionType === 'RENDER_ROUTER_TREE') {
adapter.showAppRoutes();
} else if (event.data.message.message.actionType === 'FIRE_EVENT') {
const highlightStr = '[augury-id=\"' +
event.data.message.message.data.id + '\"]';
const dE = ng.probe(document.querySelector(highlightStr));
dE.componentInstance[event.data.message.message.data.output]
.emit(event.data.message.message.data.data);
setTimeout(() => {
const appRef = dE.inject(ng.coreTokens.ApplicationRef);
appRef.tick();
adapter.renderTree();
});
}
return true;
}
}, false);