Skip to content

Commit 754575e

Browse files
BraunTomBraunTom
committed
demo ready
SQUASHED: AUTO-COMMIT-demos-tom-defect-demo-plugin.js,AUTO-COMMIT-demos-tom-playground.js,AUTO-COMMIT-demos-tom-plugin-explorer-worker.js,AUTO-COMMIT-demos-tom-trace.js,AUTO-COMMIT-demos-tom-wrapAST.js,AUTO-COMMIT-src-components-tools-lively-plugin-explorer-playground.workspace,AUTO-COMMIT-src-components-tools-trace-visualization.html,AUTO-COMMIT-src-components-tools-trace-visualization.js,
1 parent 9f8cda5 commit 754575e

File tree

7 files changed

+230
-65
lines changed

7 files changed

+230
-65
lines changed

‎demos/tom/defect-demo-plugin.js‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,55 @@ export default function({ types: t }) {
22
return {
33
name: 'demo-plugin',
44
visitor: {
5+
56
Conditional(path) {
6-
const startNode = t.stringLiteral('start');
77
const endNode = t.stringLiteral('after');
8-
path.get('test').insertBefore(startNode);
98
path.get('test').insertAfter(endNode);
109
},
10+
1111
AssignmentExpression(path) {
12-
console.log(path.node.left.name)
12+
const position = t.numericLiteral(path.node.loc.start.line);
13+
path.insertBefore(position);
1314
}
15+
1416
}
1517
}
16-
}
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+
if(path.isGenerated()) {
53+
return;
54+
}
55+
*/
56+

‎demos/tom/playground.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function({types: t}) {
99
}
1010
path.node.modified = true;
1111

12-
path.node.callee.name = 'test_' + path.node.callee.name;
12+
path.node.callee.name = [...path.node.callee.name].reverse().join('');
1313
}
1414
}
1515
}

‎demos/tom/plugin-explorer-worker.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,18 +111,19 @@ self.onmessage = function(msg) {
111111

112112
wrapAST(ast, trace);
113113
let result
114-
//try {
114+
try {
115115
result = babel.transformFromAst(ast, undefined, config);
116-
/*} catch (e) {
116+
} catch (e) {
117+
result = null;
117118
trace.error(e);
118-
}*/
119+
}
119120

120121

121122
// const result = babel.transform(msg.data.source, config);
122123
postMessage({
123124
oldAST: oldASTAsString,
124-
transformedAST: JSON.stringify(result.ast),
125-
transformedCode: result.code,
125+
transformedAST: JSON.stringify(result && result.ast),
126+
transformedCode: result && result.code,
126127
trace: JSON.stringify(trace),
127128
locations: Trace.locations
128129
});

‎demos/tom/trace.js‎

Lines changed: 108 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11
import * as _ from 'src/external/lodash/lodash.js';
22
import loadPlugin from 'demos/tom/plugin-load-promise.js'
33

4+
const excludedProperties = ['end', 'loc', 'start', 'traceID', 'type'];
5+
46
class Event {
57
constructor(type, data, position) {
68
this.type = type;
79
this.position = position;
810
this.data = data;
9-
11+
1012
this.changes = [];
1113
this.hasChanges = false;
12-
14+
1315
this.__type__ = 'Event';
1416
}
15-
17+
1618
addChange(changeEvent) {
1719
this.hasChanges = true;
1820
this.changes.push(changeEvent);
1921
}
20-
22+
23+
apply(ast) {
24+
for (const change of this.changes) {
25+
change.apply(ast);
26+
}
27+
}
28+
2129
visit(object) {
2230
object.visitEvent(this);
2331
}
@@ -29,18 +37,70 @@ class ASTChangeEvent {
2937
this.propertyName = propertyName;
3038
this.oldValue = oldValue;
3139
this.newValue = newValue;
32-
40+
3341
this.__type__ = 'ASTChangeEvent';
3442
}
35-
36-
apply(ast) {
43+
44+
getNode(id, astNode) {
3745

46+
47+
if (astNode.type) {
48+
const isSearchedNode = value => value && value.traceID !== undefined && value.traceID.nodeID === id.nodeID;
49+
50+
if(isSearchedNode(astNode)) {
51+
return astNode;
52+
}
53+
54+
const keys = Object.keys(astNode).filter(key => !excludedProperties.includes(key));
55+
for (const key of keys) {
56+
const value = astNode[key];
57+
58+
59+
if (Array.isArray(value)) {
60+
for (const entry of value) {
61+
const node = this.getNode(id, entry)
62+
if(isSearchedNode(node)) {
63+
return node;
64+
}
65+
}
66+
67+
continue;
68+
}
69+
70+
if (!value) {
71+
continue;
72+
}
73+
74+
switch (typeof value) {
75+
case 'function':
76+
// ignore functions
77+
break;
78+
case 'object':
79+
// assume it is an astNode
80+
const node = this.getNode(id, value)
81+
if(isSearchedNode(node)) {
82+
return node;
83+
}
84+
// fallthrough as we want to know if a node is replaced
85+
default:
86+
// ignore value
87+
}
88+
}
89+
}
3890
}
39-
91+
92+
apply(ast) {
93+
let astNode = this.getNode(this.objectID, ast);
94+
if (this.arrayProperty) {
95+
astNode = astNode[this.arrayProperty];
96+
}
97+
astNode[this.propertyName] = this.newValue;
98+
}
99+
40100
revert(ast) {
41-
101+
42102
}
43-
103+
44104
visit(object) {
45105
object.visitASTChangeEvent(this);
46106
}
@@ -63,30 +123,44 @@ class TraceSection {
63123
constructor(name, entries = []) {
64124
this.name = name;
65125
this.entries = entries;
66-
126+
67127
this.nodes = new Map();
68-
128+
69129
this.changes = [];
70130
this.hasChanges = false;
71131
}
72132

73133
addEntry(entry) {
74134
this.entries.push(entry);
75135
}
76-
136+
77137
addChange(changeEvent) {
78138
this.hasChanges = true;
79-
if(this.entries.last) {
139+
if (this.entries.last) {
80140
this.entries.last.addChange(changeEvent);
141+
} else {
142+
const stub = new Event('stub');
143+
this.entries.push(stub);
144+
stub.addChange(changeEvent);
81145
}
82146
this.changes.push(changeEvent);
83-
147+
84148
}
85-
149+
86150
somethingHappened() {
87151
return this.hasChanges || this.entries.length > 0;
88152
}
89-
153+
154+
apply(ast) {
155+
for (const change of this.changes) {
156+
change.apply(ast);
157+
}
158+
}
159+
160+
revert(ast) {
161+
162+
}
163+
90164
visit(object) {
91165
object.visitTraceSection(this);
92166
}
@@ -109,18 +183,20 @@ class Trace {
109183
startTraversion() {
110184
this.log(new Event('startTraversion'));
111185
}
112-
186+
113187
createTraceID() {
114188
return {
115-
sectionId: 0,
116-
nodeId: this.counter++
189+
sectionID: 0,
190+
nodeID: this.counter++
117191
}
118192
}
119193

120194
/* AST changes */
121195

122-
notify(objectID, key, oldValue, newValue) {
123-
this.log(new ASTChangeEvent(objectID, key, clone(oldValue), clone(newValue)));
196+
notify(objectID, key, oldValue, newValue, arrayProperty) {
197+
const event = new ASTChangeEvent(objectID, key, clone(oldValue), clone(newValue));
198+
this.log(event);
199+
event.arrayProperty = arrayProperty;
124200
}
125201

126202
/* Plugins */
@@ -188,13 +264,13 @@ class Trace {
188264
this.log(new Event('assignment', [clone(left), clone(right)], position));
189265
return right;
190266
}
191-
267+
192268
/* Error */
193-
269+
194270
error(error) {
195271
this.log(new Event('error', [error.stack]));
196272
}
197-
273+
198274
/* Analyzation */
199275

200276
analyze() {
@@ -223,8 +299,8 @@ class Trace {
223299
break;
224300
case 'error':
225301
section = stack.pop();
226-
section.addEntry(entry);
227-
stack.last.addEntry(section)
302+
section.addEntry(Object.assign(new Event(), entry));
303+
this.sections.push(section);
228304
break;
229305
default:
230306
if (stack[stack.length - 1]) {
@@ -233,16 +309,16 @@ class Trace {
233309
event.visit({
234310
visitEvent(event) {
235311
stack.last.addEntry(event);
236-
},
312+
},
237313
visitASTChangeEvent(changeEvent) {
238314
stack.last.addChange(changeEvent);
239315
}
240316
});
241-
317+
242318
}
243319
}
244320
}
245-
321+
246322
this.sections.push(...stack);
247323
this.sections = this.sections.filter(section => section.somethingHappened());
248324
}
@@ -262,7 +338,7 @@ Trace.on = async function(source, pluginsUrls) {
262338
trace: Object.assign(new Trace(), JSON.parse(data.trace)),
263339
transformedCode: data.transformedCode
264340
};
265-
341+
266342
const trace = obj.trace;
267343

268344
for (const entry of trace._log) {
@@ -274,7 +350,7 @@ Trace.on = async function(source, pluginsUrls) {
274350
trace.transformedAST = obj.transformedAST;
275351

276352
trace.analyze();
277-
return trace;
353+
return trace;
278354
}
279355

280356
export default Trace;

‎demos/tom/wrapAST.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ function createObservingAccessorsOn(object, propertyName, observer) {
1919
})
2020
}
2121

22-
const handler = (observer) => {
22+
const handler = (observer, key) => {
2323
return {
2424
set: function(obj, prop, value) {
2525
// Todo: Reflect.set()
2626
if (Number.isInteger(Number.parseInt(prop))) {
27-
observer.notify(prop, copy(obj[prop]), copy(value));
27+
observer.notify(prop, copy(obj[prop]), copy(value), key);
2828
wrapAST(value, observer, true);
2929
}
3030
obj[prop] = value;
@@ -33,8 +33,8 @@ const handler = (observer) => {
3333
}
3434
};
3535

36-
function wrappedArray(array, observer) {
37-
return new Proxy(array, handler(observer));
36+
function wrappedArray(array, observer, key) {
37+
return new Proxy(array, handler(observer, key));
3838
}
3939

4040
export default function wrapAST(astNode, observer, onlyUnknownNodes) {
@@ -59,13 +59,13 @@ export default function wrapAST(astNode, observer, onlyUnknownNodes) {
5959
}
6060

6161
const arrayObserver = {
62-
notify(key, oldValue, newValue) {
63-
observer.notify(astNode.traceID, key, oldValue, newValue)
62+
notify(prop, oldValue, newValue) {
63+
observer.notify(astNode.traceID, prop, oldValue, newValue, key)
6464
}
6565
};
6666

6767
// Todo: do better handling
68-
astNode[key] = wrappedArray(value, arrayObserver);
68+
astNode[key] = wrappedArray(value, arrayObserver, key);
6969

7070
// notify if the array is replaced
7171
createObservingAccessorsOn(astNode, key, observer);

0 commit comments

Comments
 (0)