| 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211 |
1x
1x
1x
1x
1x
1x
1x
7x
11x
11x
15x
11x
11x
12x
12x
3x
9x
9x
14x
14x
14x
4x
4x
10x
10x
10x
14x
14x
11x
11x
14x
14x
14x
14x
14x
14x
14x
14x
14x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
14x
14x
14x
14x
14x
14x
14x
14x
4x
9x
1x
1x
1x
| /**
* Copyright 2016, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = devToolsPlugin;
var _debug = require('debug');
var _debug2 = _interopRequireDefault(_debug);
var _CONSTANTS = require('./CONSTANTS');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var debug = (0, _debug2.default)('Fluxible:DevToolsPlugin');
/**
* Creates a new devtools plugin instance
* @returns {DevToolsPlugin}
*/
function devToolsPlugin() {
/**
* @class DevToolsPlugin
*/
return {
/**
* @property {String} name Name of the plugin
*/
name: 'DevToolsPlugin',
/**
* Called to plug the FluxContext
* @method plugContext
* @param {Object} contextOptions options passed to the createContext method
* @param {Object} contextOptions.debug if true, will enable debug mode and allow fluxible to collect metadata for debugging
* @returns {Object}
*/
plugContext: function plugContext(contextOptions, context) {
var enableDebug = typeof contextOptions.debug !== 'undefined' ? contextOptions.debug : false;
var actionHistory = [];
/**
* extends the input object with a `devtools` namespace which has
* debugging methods available to it.
* @method provideDevTools
* @param {Object} obj arbitrary input object
* @return {void}
*/
function provideDevTools(obj) {
obj.devtools = {
/**
* Action history is preserved in a tree structure which maintains parent->child relationships.
* Top level actions are actions that kick off the app (i.e. navigateAction) or actions executed by components.
* All other actions will be under the `actionCalls` property of other actions.
* This action history tree allows us to trace and even visualize actions for debugging.
* @method getActionHistory
* @return {Object} Array of top level actions.
*/
getActionHistory: function getActionHistory() {
return actionHistory;
}
};
}
provideDevTools(context);
/**
* If the debug flag was set to true, this funcion will override some functions
* within fluxible and collect metadata that is useful for debugging.
* @method overridectx
* @return {void}
*/
function overrideCtx() {
debug('devtools plugin %s', enableDebug ? 'enabled' : 'disabled');
if (!enableDebug) {
return;
}
/**
* Override the _createSubActionContext method so we can track "parent" actions
* for each executed action. We can later use this to graph our the dependencies.
*/
var createSubActionContext = context._createSubActionContext.bind(context);
context._createSubActionContext = function createDevSubActionContext(parentActionContext, action) {
var subActionContext = createSubActionContext(parentActionContext, action);
var actionReference = {
rootId: subActionContext.rootId,
name: subActionContext.displayName,
type: _CONSTANTS.ACTION
};
if (!parentActionContext.__actionReference) {
// new top level action
actionReference.context = typeof window === 'undefined' ? 'server' : 'client';
actionHistory.push(actionReference);
} else {
// append child action
var parentActionReference = parentActionContext.__actionReference;
parentActionReference.actionCalls = parentActionReference.actionCalls || [];
parentActionReference.actionCalls.push(actionReference);
// TODO: perhaps also push to an parentActionReference.actions reference array.
// This way we can still correctly detect leaf nodes. Actually are leaf nodes even useful?
// If not, just color code the bars based on action vs dispatch calls.
// Later, service calls.
// Even later, arbitrary custom children.
// No paths for dispatches? Or just show/hide dispatches
}
// for extablishing parent->child relationships
// and updating start/end times of the actionReference
subActionContext.__actionReference = actionReference;
return subActionContext;
};
}
overrideCtx();
return {
/**
* Modyfy and return new arguments to `callAction` in FluxibleContext
* @method plugExecuteAction
* @param {Object} actionContext the current action context
* @param {Function} action action An action creator function that receives actionContext, payload,
* and done as parameters
* @param {Object} payload The action payload
* @param {Function} done Method to be called once action execution has completed
*/
plugExecuteAction: function plugExecuteAction(options) {
Iif (!enableDebug) {
// unchanged
return options;
}
var action = options.action;
var actionContext = options.actionContext;
var actionReference = actionContext.__actionReference;
var done = options.done;
function timedAction(ctx, payload, cb) {
actionReference.startTime = Date.now();
actionReference.payload = JSON.stringify(payload);
var dispatch = ctx.dispatch;
ctx.dispatch = function (actionName, payload) {
var dispatchRef = {
name: actionName,
payload: JSON.stringify(payload),
type: _CONSTANTS.DISPATCH
};
actionReference.dispatchCalls = actionReference.dispatchCalls || [];
actionReference.dispatchCalls.push(dispatchRef);
var startTime = Date.now();
dispatchRef.startTime = startTime;
dispatch(actionName, payload);
var endTime = Date.now();
var dur = endTime - startTime;
dispatchRef.endTime = endTime;
dispatchRef.duration = dur;
};
return action(ctx, payload, cb);
}
function timedActionNoCallback(ctx, payload) {
return timedAction(ctx, payload);
}
function timedCallback(err, data) {
var endTime = Date.now();
var dur = endTime - actionReference.startTime;
actionReference.endTime = endTime;
actionReference.duration = dur;
actionReference.failed = !!err;
done && done(err, data);
}
return {
actionContext: actionContext,
action: action.length < 3 ? timedActionNoCallback : timedAction,
payload: options.payload,
done: timedCallback
};
},
/**
* Adds devtools methods to the component context
* @method @plugComponentContext
* @param componentContext
*/
plugComponentContext: function plugComponentContext(componentContext) {
provideDevTools(componentContext);
},
/**
* Called to dehydrate plugin options
* @method dehydrate
* @returns {Object}
*/
dehydrate: function dehydrate() {
return {
actionHistory: actionHistory,
enableDebug: enableDebug
};
},
/**
* Called to rehydrate plugin options
* @method rehydrate
* @returns {Object}
*/
rehydrate: function rehydrate(state) {
actionHistory = state.actionHistory;
enableDebug = state.enableDebug;
overrideCtx();
}
};
}
};
} |