;
3 | export declare function sanitizeValueDisplay(valueDisplay: ValueDisplay, event: AppEvent): ValueDisplay;
4 |
--------------------------------------------------------------------------------
/dist/src/view.d.ts:
--------------------------------------------------------------------------------
1 | import { State, Actions } from "./api";
2 | export declare function view(state: State, actions: Actions): JSX.Element;
3 |
--------------------------------------------------------------------------------
/examples/circular-state.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Circular references in state
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/examples/counter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Counter example with debugger
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/examples/debug-function.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Counter example debug function
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/examples/error-in-action.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Error in an action
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/examples/error-in-function.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Error in a function
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/examples/hyperapp.js:
--------------------------------------------------------------------------------
1 | ;(function(global, factory) {
2 | typeof exports === "object" && typeof module !== "undefined"
3 | ? factory(exports)
4 | : typeof define === "function" && define.amd
5 | ? define(["exports"], factory)
6 | : factory((global.hyperapp = {}))
7 | })(this, function(exports) {
8 | "use strict"
9 |
10 | function h(name, attributes) {
11 | var rest = []
12 | var children = []
13 | var length = arguments.length
14 |
15 | while (length-- > 2) rest.push(arguments[length])
16 |
17 | while (rest.length) {
18 | var node = rest.pop()
19 | if (node && node.pop) {
20 | for (length = node.length; length--; ) {
21 | rest.push(node[length])
22 | }
23 | } else if (node != null && node !== true && node !== false) {
24 | children.push(node)
25 | }
26 | }
27 |
28 | return typeof name === "function"
29 | ? name(attributes || {}, children)
30 | : {
31 | nodeName: name,
32 | attributes: attributes || {},
33 | children: children,
34 | key: attributes && attributes.key
35 | }
36 | }
37 |
38 | function app(state, actions, view, container) {
39 | var map = [].map
40 | var rootElement = (container && container.children[0]) || null
41 | var oldNode = rootElement && recycleElement(rootElement)
42 | var lifecycle = []
43 | var skipRender
44 | var isRecycling = true
45 | var globalState = clone(state)
46 | var wiredActions = wireStateToActions([], globalState, clone(actions))
47 |
48 | scheduleRender()
49 |
50 | return wiredActions
51 |
52 | function recycleElement(element) {
53 | return {
54 | nodeName: element.nodeName.toLowerCase(),
55 | attributes: {},
56 | children: map.call(element.childNodes, function(element) {
57 | return element.nodeType === 3 // Node.TEXT_NODE
58 | ? element.nodeValue
59 | : recycleElement(element)
60 | })
61 | }
62 | }
63 |
64 | function resolveNode(node) {
65 | return typeof node === "function"
66 | ? resolveNode(node(globalState, wiredActions))
67 | : node != null
68 | ? node
69 | : ""
70 | }
71 |
72 | function render() {
73 | skipRender = !skipRender
74 |
75 | var node = resolveNode(view)
76 |
77 | if (container && !skipRender) {
78 | rootElement = patch(container, rootElement, oldNode, (oldNode = node))
79 | }
80 |
81 | isRecycling = false
82 |
83 | while (lifecycle.length) lifecycle.pop()()
84 | }
85 |
86 | function scheduleRender() {
87 | if (!skipRender) {
88 | skipRender = true
89 | setTimeout(render)
90 | }
91 | }
92 |
93 | function clone(target, source) {
94 | var out = {}
95 |
96 | for (var i in target) out[i] = target[i]
97 | for (var i in source) out[i] = source[i]
98 |
99 | return out
100 | }
101 |
102 | function setPartialState(path, value, source) {
103 | var target = {}
104 | if (path.length) {
105 | target[path[0]] =
106 | path.length > 1
107 | ? setPartialState(path.slice(1), value, source[path[0]])
108 | : value
109 | return clone(source, target)
110 | }
111 | return value
112 | }
113 |
114 | function getPartialState(path, source) {
115 | var i = 0
116 | while (i < path.length) {
117 | source = source[path[i++]]
118 | }
119 | return source
120 | }
121 |
122 | function wireStateToActions(path, state, actions) {
123 | for (var key in actions) {
124 | typeof actions[key] === "function"
125 | ? (function(key, action) {
126 | actions[key] = function(data) {
127 | var result = action(data)
128 |
129 | if (typeof result === "function") {
130 | result = result(getPartialState(path, globalState), actions)
131 | }
132 |
133 | if (
134 | result &&
135 | result !== (state = getPartialState(path, globalState)) &&
136 | !result.then // !isPromise
137 | ) {
138 | scheduleRender(
139 | (globalState = setPartialState(
140 | path,
141 | clone(state, result),
142 | globalState
143 | ))
144 | )
145 | }
146 |
147 | return result
148 | }
149 | })(key, actions[key])
150 | : wireStateToActions(
151 | path.concat(key),
152 | (state[key] = clone(state[key])),
153 | (actions[key] = clone(actions[key]))
154 | )
155 | }
156 |
157 | return actions
158 | }
159 |
160 | function getKey(node) {
161 | return node ? node.key : null
162 | }
163 |
164 | function eventListener(event) {
165 | return event.currentTarget.events[event.type](event)
166 | }
167 |
168 | function updateAttribute(element, name, value, oldValue, isSvg) {
169 | if (name === "key") {
170 | } else if (name === "style") {
171 | for (var i in clone(oldValue, value)) {
172 | var style = value == null || value[i] == null ? "" : value[i]
173 | if (i[0] === "-") {
174 | element[name].setProperty(i, style)
175 | } else {
176 | element[name][i] = style
177 | }
178 | }
179 | } else {
180 | if (name[0] === "o" && name[1] === "n") {
181 | name = name.slice(2)
182 |
183 | if (element.events) {
184 | if (!oldValue) oldValue = element.events[name]
185 | } else {
186 | element.events = {}
187 | }
188 |
189 | element.events[name] = value
190 |
191 | if (value) {
192 | if (!oldValue) {
193 | element.addEventListener(name, eventListener)
194 | }
195 | } else {
196 | element.removeEventListener(name, eventListener)
197 | }
198 | } else if (name in element && name !== "list" && !isSvg) {
199 | element[name] = value == null ? "" : value
200 | } else if (value != null && value !== false) {
201 | element.setAttribute(name, value)
202 | }
203 |
204 | if (value == null || value === false) {
205 | element.removeAttribute(name)
206 | }
207 | }
208 | }
209 |
210 | function createElement(node, isSvg) {
211 | var element =
212 | typeof node === "string" || typeof node === "number"
213 | ? document.createTextNode(node)
214 | : (isSvg = isSvg || node.nodeName === "svg")
215 | ? document.createElementNS(
216 | "http://www.w3.org/2000/svg",
217 | node.nodeName
218 | )
219 | : document.createElement(node.nodeName)
220 |
221 | var attributes = node.attributes
222 | if (attributes) {
223 | if (attributes.oncreate) {
224 | lifecycle.push(function() {
225 | attributes.oncreate(element)
226 | })
227 | }
228 |
229 | for (var i = 0; i < node.children.length; i++) {
230 | element.appendChild(
231 | createElement(
232 | (node.children[i] = resolveNode(node.children[i])),
233 | isSvg
234 | )
235 | )
236 | }
237 |
238 | for (var name in attributes) {
239 | updateAttribute(element, name, attributes[name], null, isSvg)
240 | }
241 | }
242 |
243 | return element
244 | }
245 |
246 | function updateElement(element, oldAttributes, attributes, isSvg) {
247 | for (var name in clone(oldAttributes, attributes)) {
248 | if (
249 | attributes[name] !==
250 | (name === "value" || name === "checked"
251 | ? element[name]
252 | : oldAttributes[name])
253 | ) {
254 | updateAttribute(
255 | element,
256 | name,
257 | attributes[name],
258 | oldAttributes[name],
259 | isSvg
260 | )
261 | }
262 | }
263 |
264 | var cb = isRecycling ? attributes.oncreate : attributes.onupdate
265 | if (cb) {
266 | lifecycle.push(function() {
267 | cb(element, oldAttributes)
268 | })
269 | }
270 | }
271 |
272 | function removeChildren(element, node) {
273 | var attributes = node.attributes
274 | if (attributes) {
275 | for (var i = 0; i < node.children.length; i++) {
276 | removeChildren(element.childNodes[i], node.children[i])
277 | }
278 |
279 | if (attributes.ondestroy) {
280 | attributes.ondestroy(element)
281 | }
282 | }
283 | return element
284 | }
285 |
286 | function removeElement(parent, element, node) {
287 | function done() {
288 | parent.removeChild(removeChildren(element, node))
289 | }
290 |
291 | var cb = node.attributes && node.attributes.onremove
292 | if (cb) {
293 | cb(element, done)
294 | } else {
295 | done()
296 | }
297 | }
298 |
299 | function patch(parent, element, oldNode, node, isSvg) {
300 | if (node === oldNode) {
301 | } else if (oldNode == null || oldNode.nodeName !== node.nodeName) {
302 | var newElement = createElement(node, isSvg)
303 | parent.insertBefore(newElement, element)
304 |
305 | if (oldNode != null) {
306 | removeElement(parent, element, oldNode)
307 | }
308 |
309 | element = newElement
310 | } else if (oldNode.nodeName == null) {
311 | element.nodeValue = node
312 | } else {
313 | updateElement(
314 | element,
315 | oldNode.attributes,
316 | node.attributes,
317 | (isSvg = isSvg || node.nodeName === "svg")
318 | )
319 |
320 | var oldKeyed = {}
321 | var newKeyed = {}
322 | var oldElements = []
323 | var oldChildren = oldNode.children
324 | var children = node.children
325 |
326 | for (var i = 0; i < oldChildren.length; i++) {
327 | oldElements[i] = element.childNodes[i]
328 |
329 | var oldKey = getKey(oldChildren[i])
330 | if (oldKey != null) {
331 | oldKeyed[oldKey] = [oldElements[i], oldChildren[i]]
332 | }
333 | }
334 |
335 | var i = 0
336 | var k = 0
337 |
338 | while (k < children.length) {
339 | var oldKey = getKey(oldChildren[i])
340 | var newKey = getKey((children[k] = resolveNode(children[k])))
341 |
342 | if (newKeyed[oldKey]) {
343 | i++
344 | continue
345 | }
346 |
347 | if (newKey != null && newKey === getKey(oldChildren[i + 1])) {
348 | if (oldKey == null) {
349 | removeElement(element, oldElements[i], oldChildren[i])
350 | }
351 | i++
352 | continue
353 | }
354 |
355 | if (newKey == null || isRecycling) {
356 | if (oldKey == null) {
357 | patch(element, oldElements[i], oldChildren[i], children[k], isSvg)
358 | k++
359 | }
360 | i++
361 | } else {
362 | var keyedNode = oldKeyed[newKey] || []
363 |
364 | if (oldKey === newKey) {
365 | patch(element, keyedNode[0], keyedNode[1], children[k], isSvg)
366 | i++
367 | } else if (keyedNode[0]) {
368 | patch(
369 | element,
370 | element.insertBefore(keyedNode[0], oldElements[i]),
371 | keyedNode[1],
372 | children[k],
373 | isSvg
374 | )
375 | } else {
376 | patch(element, oldElements[i], null, children[k], isSvg)
377 | }
378 |
379 | newKeyed[newKey] = children[k]
380 | k++
381 | }
382 | }
383 |
384 | while (i < oldChildren.length) {
385 | if (getKey(oldChildren[i]) == null) {
386 | removeElement(element, oldElements[i], oldChildren[i])
387 | }
388 | i++
389 | }
390 |
391 | for (var i in oldKeyed) {
392 | if (!newKeyed[i]) {
393 | removeElement(element, oldKeyed[i][0], oldKeyed[i][1])
394 | }
395 | }
396 | }
397 | return element
398 | }
399 | }
400 |
401 | exports.h = h
402 | exports.app = app
403 |
404 | Object.defineProperty(exports, "__esModule", { value: true })
405 | })
406 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Devtools Examples
8 |
9 |
10 |
11 |
12 | Devtools examples
13 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/examples/long-names.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Counter example with debugger
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Note: this is example is meant to show how the devtools handles overflow, it is not meant to represent a functional/usefull
16 | app.
17 |
18 |
19 |
20 |
21 | Back to index
22 |
23 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/examples/nested-state.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Counter example with debugger
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Back to index
19 |
20 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/examples/todos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Counter example with debugger
8 |
9 |
10 |
11 |
12 |
13 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | Back to index
52 |
53 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hyperapp-devtools",
3 | "version": "0.3.0",
4 | "description": "Developer tools for Hyperapp projects",
5 | "keywords": [
6 | "hyperapp",
7 | "devtools",
8 | "debug"
9 | ],
10 | "author": "Anthony Ferrando ",
11 | "license": "MIT",
12 | "main": "dist/hyperapp-devtools.js",
13 | "minified:main": "dist/hyperapp-devtools.min.js",
14 | "jsnext:main": "dist/hyperapp-devtools.es.js",
15 | "module": "dist/hyperapp-devtools.es.js",
16 | "typings": "dist/src/index.d.ts",
17 | "scripts": {
18 | "clean": "rimraf dist .rpt2_cache",
19 | "start": "rollup -c -w --serve",
20 | "build": "npm run clean && npm run build:main && npm run build:min && npm run build:es",
21 | "build:main": "rollup -c && rimraf .rpt2_cache",
22 | "build:min": "rollup -c --min && rimraf .rpt2_cache",
23 | "build:es": "rollup -c --es && rimraf .rpt2_cache",
24 | "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
25 | },
26 | "dependencies": {
27 | "codemirror": "^5.37.0",
28 | "hyperapp": "^1.2.5"
29 | },
30 | "devDependencies": {
31 | "minimist": "^1.2.0",
32 | "node-sass": "4.9.0",
33 | "rimraf": "2.6.2",
34 | "rollup": "0.50.0",
35 | "rollup-plugin-commonjs": "8.2.6",
36 | "rollup-plugin-node-resolve": "3.0.0",
37 | "rollup-plugin-postcss": "^1.4.0",
38 | "rollup-plugin-serve": "0.4.2",
39 | "rollup-plugin-typescript2": "0.8.0",
40 | "rollup-plugin-uglify": "2.0.1",
41 | "typescript": "^2.7.2"
42 | },
43 | "repository": {
44 | "type": "git",
45 | "url": "git+https://github.com/hyperstart/hyperapp-devtools.git"
46 | },
47 | "bugs": {
48 | "url": "https://github.com/hyperstart/hyperapp-devtools/issues"
49 | },
50 | "homepage": "https://github.com/hyperstart/hyperapp-devtools#readme",
51 | "prettier": {
52 | "semi": false
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | const minimist = require("minimist")
2 |
3 | const commonjs = require("rollup-plugin-commonjs")
4 | const nodeResolve = require("rollup-plugin-node-resolve")
5 | const typescript = require("rollup-plugin-typescript2")
6 | const uglify = require("rollup-plugin-uglify")
7 | const postcss = require("rollup-plugin-postcss")
8 | const serve = require("rollup-plugin-serve")
9 |
10 | const options = minimist(process.argv.slice(2), {
11 | boolean: ["min", "es", "serve"]
12 | })
13 |
14 | const plugins = [
15 | nodeResolve({
16 | extensions: [".ts", ".js", ".json"],
17 | jsnext: true
18 | }),
19 | commonjs(),
20 | typescript({
21 | clean: true,
22 | exclude: ["*.d.ts", "**/*.d.ts", "*.test.*", "**/*.test.*"]
23 | }),
24 | postcss({
25 | plugins: []
26 | })
27 | ]
28 | if (options.min) {
29 | plugins.push(uglify())
30 | }
31 | if (options.serve) {
32 | plugins.push(
33 | serve({
34 | open: true,
35 | contentBase: ["examples", "dist"]
36 | })
37 | )
38 | }
39 |
40 | export default {
41 | input: "src/index.ts",
42 | output: {
43 | file: options.min
44 | ? "dist/hyperapp-devtools.min.js"
45 | : options.es
46 | ? "dist/hyperapp-devtools.es.js"
47 | : "dist/hyperapp-devtools.js",
48 | format: options.es ? "es" : "umd",
49 | name: "devtools",
50 | sourcemap: true
51 | },
52 | plugins
53 | }
54 |
--------------------------------------------------------------------------------
/src/actions/deleteRun.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const deleteRun = (id: string) => (
4 | state: api.State
5 | ): Partial => {
6 | const runsById = { ...state.runsById }
7 | delete runsById[id]
8 | const runs = state.runs.filter(s => s !== id)
9 | return { runs, runsById }
10 | }
11 |
--------------------------------------------------------------------------------
/src/actions/execute.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { get } from "../immutable"
3 | import { getRun } from "../selectors"
4 | import { getRegistered } from "../debuggedFunctions"
5 |
6 | function executeAction(payload: api.ExecutePayload, state: api.State) {
7 | const { runId, name, args } = payload
8 |
9 | const run = getRun(state, runId)
10 | const action = get(run.interop, name.split("."))
11 |
12 | if (!action) throw new Error(`No action found with name "${name}".`)
13 |
14 | action(args[0])
15 | }
16 |
17 | function executeFunction(payload: api.ExecutePayload, state: api.State) {
18 | const { name, args } = payload
19 |
20 | const fn = getRegistered(name)
21 | fn(...args)
22 | }
23 |
24 | export const execute = (payload: api.ExecutePayload) => (state: api.State) => {
25 | const { type } = payload
26 |
27 | if (type === "action") {
28 | executeAction(payload, state)
29 | } else {
30 | executeFunction(payload, state)
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/actions/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./deleteRun"
2 | export * from "./execute"
3 | export * from "./logCallEnd"
4 | export * from "./logCallStart"
5 | export * from "./logInit"
6 | export * from "./logMessage"
7 | export * from "./select"
8 | export * from "./setCallOverviewText"
9 | export * from "./setDetailsPaneExpanded"
10 | export * from "./setPaneDisplay"
11 | export * from "./setValueDisplay"
12 | export * from "./showPane"
13 | export * from "./timeTravel"
14 | export * from "./toggleCollapseRepeatingEvents"
15 | export * from "./toggleEvent"
16 | export * from "./toggleRun"
17 |
--------------------------------------------------------------------------------
/src/actions/logCallEnd.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { merge } from "../immutable"
3 | import { getLatestRunId, getCallText } from "../selectors"
4 | import { sanitizeValueDisplay } from "../valueDisplay"
5 |
6 | export const logCallEnd = (payload: api.LogCallEndPayload) => (
7 | state: api.State
8 | ): Partial => {
9 | const { runId = getLatestRunId(state), eventId, result, error } = payload
10 |
11 | const runsById = { ...state.runsById }
12 | const run = { ...runsById[runId] }
13 | runsById[runId] = run
14 |
15 | run.eventsById = { ...run.eventsById }
16 | const event = { ...run.eventsById[eventId] }
17 | run.eventsById[eventId] = event
18 | let valueDisplay = state.valueDisplay
19 | // update the event
20 | if (event.type === "action" || event.type === "function") {
21 | if (result) {
22 | event.result = result
23 |
24 | if (event.type === "action" && !result.then) {
25 | // update the run's current state
26 | const path = event.name.split(".")
27 | path.pop()
28 | const stateAfter = merge(event.stateBefore, path, event.result)
29 | event.stateAfter = stateAfter
30 | run.currentState = stateAfter
31 | }
32 | }
33 | if (error) {
34 | event.error = error
35 | }
36 | }
37 |
38 | // update the current event of the run
39 | run.currentEvent =
40 | eventId === run.currentEvent ? event.parent : run.currentEvent
41 |
42 | const selectedEvent: api.SelectedEvent = {
43 | runId: run.id,
44 | eventId
45 | }
46 |
47 | valueDisplay = sanitizeValueDisplay(valueDisplay, event)
48 | const callOverviewText = getCallText(event as any)
49 |
50 | return { runsById, selectedEvent, valueDisplay, callOverviewText }
51 | }
52 |
--------------------------------------------------------------------------------
/src/actions/logCallStart.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { getLatestRunId } from "../selectors"
3 |
4 | function getEvent(
5 | state: api.State,
6 | run: api.Run,
7 | payload: api.LogCallStartPayload
8 | ): api.AppEvent {
9 | const { args, eventId, name, runId, type } = payload
10 | if (type === "action") {
11 | return {
12 | type: "action",
13 | id: eventId,
14 | name,
15 | data: args && args.length > 0 ? args[0] : undefined,
16 | parent: run.currentEvent,
17 | children: [],
18 | collapsed: false,
19 | stateBefore: run.currentState
20 | }
21 | }
22 |
23 | return {
24 | type: "function",
25 | id: eventId,
26 | name,
27 | args,
28 | children: [],
29 | collapsed: false,
30 | parent: run.currentEvent
31 | }
32 | }
33 |
34 | export const logCallStart = (payload: api.LogCallStartPayload) => (
35 | state: api.State
36 | ): Partial => {
37 | const { runId = getLatestRunId(state), eventId } = payload
38 | const runsById = { ...state.runsById }
39 | const run = { ...runsById[runId] }
40 | runsById[runId] = run
41 | run.eventsById[eventId] = getEvent(state, run, payload)
42 | const parentId = run.currentEvent
43 | if (parentId) {
44 | // append the event to the parent
45 | const parent = { ...run.eventsById[parentId] }
46 | run.eventsById[parentId] = parent
47 | parent.children = parent.children.concat(eventId)
48 | } else {
49 | // append the event to the run
50 | run.events = run.events.concat(eventId)
51 | }
52 | run.currentEvent = eventId
53 |
54 | return { runsById }
55 | }
56 |
--------------------------------------------------------------------------------
/src/actions/logInit.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const logInit = (payload: api.LogInitPayload) => (
4 | state: api.State
5 | ): Partial => {
6 | const { runId, interop, timestamp } = payload
7 | const runs = state.runs.concat(runId)
8 | const runsById = { ...state.runsById }
9 | const initEvent: api.InitEvent = {
10 | id: runId,
11 | type: "init",
12 | name: "Initial State",
13 | state: payload.state
14 | }
15 | runsById[runId] = {
16 | id: runId,
17 | events: [runId],
18 | eventsById: { [runId]: initEvent },
19 | currentState: payload.state,
20 | timestamp,
21 | interop,
22 | collapsed: false
23 | }
24 | return {
25 | runs,
26 | runsById,
27 | selectedEvent: {
28 | runId,
29 | eventId: runId
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/actions/logMessage.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const logMessage = (payload: api.LogMessagePayload) => (
4 | state: api.State
5 | ): Partial => {
6 | const { runId, eventId, level, message } = payload
7 |
8 | const runsById = { ...state.runsById }
9 | const run = { ...runsById[runId] }
10 | runsById[runId] = run
11 | run.events = run.events.concat(eventId)
12 | run.eventsById = {
13 | ...run.eventsById,
14 | [eventId]: {
15 | type: "message",
16 | level,
17 | message,
18 | name: level,
19 | id: eventId,
20 | parent: run.currentEvent
21 | }
22 | }
23 |
24 | return {
25 | runsById,
26 | selectedEvent: {
27 | runId,
28 | eventId
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/actions/select.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { getSelectedEvent, getCallText } from "../selectors"
3 | import { sanitizeValueDisplay } from "../valueDisplay"
4 |
5 | function getCallOverviewText(state: api.State, event: api.AppEvent): string {
6 | if (event.type === "action" || event.type === "function") {
7 | return getCallText(event)
8 | }
9 | return state.callOverviewText
10 | }
11 |
12 | export const select = (selectedEvent: api.SelectedEvent | null) => (
13 | state: api.State
14 | ): Partial => {
15 | const event = getSelectedEvent(state, selectedEvent)
16 |
17 | return {
18 | selectedEvent,
19 | valueDisplay: sanitizeValueDisplay(state.valueDisplay, event),
20 | callOverviewText: getCallOverviewText(state, event)
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/actions/setCallOverviewText.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const setCallOverviewText = (callOverviewText: string) => (
4 | state: api.State
5 | ): Partial => {
6 | return { callOverviewText }
7 | }
8 |
--------------------------------------------------------------------------------
/src/actions/setDetailsPaneExpanded.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { set } from "../immutable"
3 |
4 | export const setDetailsPaneExpanded = (
5 | payload: api.SetDetailsPaneExpandedPayload
6 | ) => (state: api.State): Partial => {
7 | const { path, expanded } = payload
8 | return {
9 | detailsPaneExpandedPaths: {
10 | ...state.detailsPaneExpandedPaths,
11 | [path]: expanded
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/actions/setPaneDisplay.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const setPaneDisplay = (paneDisplay: api.PaneDisplay) => (
4 | state: api.State
5 | ): Partial => ({
6 | paneDisplay
7 | })
8 |
--------------------------------------------------------------------------------
/src/actions/setValueDisplay.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const setValueDisplay = (valueDisplay: api.ValueDisplay) => (
4 | state: api.State
5 | ): Partial => ({
6 | valueDisplay
7 | })
8 |
--------------------------------------------------------------------------------
/src/actions/showPane.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const showPane = (paneShown: boolean) => (
4 | state: api.State
5 | ): Partial => ({
6 | paneShown
7 | })
8 |
--------------------------------------------------------------------------------
/src/actions/timeTravel.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { getSelectedEvent, getRun } from "../selectors"
3 |
4 | export const timeTravel = (selectedEvent: api.SelectedEvent) => (
5 | state: api.State
6 | ) => {
7 | const run = getRun(state, selectedEvent.runId)
8 | if (!run) {
9 | return
10 | }
11 |
12 | const event = getSelectedEvent(state, selectedEvent)
13 | if (event) {
14 | if (event.type === "action" && event.stateAfter) {
15 | run.interop[api.injectedSetState](event.stateAfter)
16 | return
17 | }
18 | if (event.type === "init") {
19 | run.interop[api.injectedSetState](event.state)
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/actions/toggleCollapseRepeatingEvents.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const toggleCollapseRepeatingEvents = () => (
4 | state: api.State
5 | ): Partial => ({
6 | collapseRepeatingEvents: !state.collapseRepeatingEvents
7 | })
8 |
--------------------------------------------------------------------------------
/src/actions/toggleEvent.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 | import { get, set } from "../immutable"
3 |
4 | export const toggleEvent = (payload: api.ToggleEventPayload) => (
5 | state: api.State
6 | ): Partial => {
7 | const { runId, eventId } = payload
8 |
9 | // const collapsed = state.runsById[runId].eventsById[eventId].collapsed
10 | const collapsed = get(state.runsById, [
11 | runId,
12 | "eventsById",
13 | eventId,
14 | "collapsed"
15 | ])
16 | // state.runsById[runId].eventsById[eventId].collapsed = !collapsed
17 | return {
18 | runsById: set(
19 | state.runsById,
20 | [runId, "eventsById", eventId, "collapsed"],
21 | !collapsed
22 | )
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/actions/toggleRun.ts:
--------------------------------------------------------------------------------
1 | import * as api from "../api"
2 |
3 | export const toggleRun = (id: string) => (state: api.State) => {
4 | const runsById = { ...state.runsById }
5 | runsById[id] = { ...runsById[id], collapsed: !runsById[id].collapsed }
6 | return { runsById }
7 | }
8 |
--------------------------------------------------------------------------------
/src/api.ts:
--------------------------------------------------------------------------------
1 | export interface StringMap {
2 | [key: string]: V
3 | }
4 |
5 | export type EventType = "function" | "action" | "init" | "message"
6 |
7 | export type AppEvent = InitEvent | ActionEvent | FunctionEvent | MessageEvent
8 |
9 | export interface BaseEvent {
10 | id: string
11 | type: EventType
12 | name: string
13 | children?: string[]
14 | collapsed?: boolean
15 | parent?: string
16 | }
17 |
18 | export interface InitEvent extends BaseEvent {
19 | type: "init"
20 | state: any
21 | }
22 |
23 | export interface ActionEvent extends BaseEvent {
24 | type: "action"
25 | data: any
26 | result?: any
27 | error?: any
28 | stateBefore: any
29 | stateAfter?: any
30 | }
31 |
32 | export interface FunctionEvent extends BaseEvent {
33 | type: "function"
34 | args: any[]
35 | result?: any
36 | error?: any
37 | returnedBy?: string
38 | }
39 |
40 | export type LogLevel = "info" | "warn" | "error"
41 |
42 | export interface MessageEvent extends BaseEvent {
43 | type: "message"
44 | level: LogLevel
45 | message: any
46 | }
47 |
48 | export interface Run {
49 | id: string
50 | events: string[]
51 | eventsById: StringMap
52 | timestamp: number
53 | collapsed: boolean
54 | currentEvent?: string
55 | currentState?: any
56 | interop: any
57 | }
58 |
59 | export interface SelectedEvent {
60 | runId: string
61 | eventId: string
62 | }
63 |
64 | export type PaneDisplay = "fullscreen" | "right" | "bottom"
65 |
66 | export type ValueDisplay =
67 | | "state"
68 | | "result"
69 | | "args"
70 | | "message"
71 | | "data"
72 | | "call-overview"
73 | | "debugger-state"
74 |
75 | export interface State {
76 | runs: string[]
77 | runsById: StringMap
78 | selectedEvent: SelectedEvent | null
79 | collapseRepeatingEvents: boolean
80 | valueDisplay: ValueDisplay
81 | detailsPaneExpandedPaths: StringMap
82 | paneDisplay: PaneDisplay
83 | paneShown: boolean
84 | callOverviewText?: string
85 | }
86 |
87 | // # Actions
88 |
89 | export interface LogInitPayload {
90 | runId: string
91 | timestamp: number
92 | state: any
93 | interop: any
94 | }
95 |
96 | export interface LogMessagePayload {
97 | runId: string
98 | eventId: string
99 | level: LogLevel
100 | message: any
101 | }
102 |
103 | export interface LogCallStartPayload {
104 | // use latest if not set.
105 | runId?: string
106 | eventId: string
107 | type: "function" | "action"
108 | name: string
109 | args: any[]
110 | }
111 |
112 | export interface LogCallEndPayload {
113 | runId?: string
114 | eventId: string
115 | result?: any
116 | error?: any
117 | }
118 |
119 | export interface ToggleEventPayload {
120 | runId: string
121 | eventId: string
122 | }
123 |
124 | export interface SetDetailsPaneExpandedPayload {
125 | path: string
126 | expanded: boolean
127 | }
128 |
129 | export interface ExecutePayload {
130 | type: "function" | "action"
131 | runId?: string
132 | name: string
133 | args: any[]
134 | }
135 |
136 | export interface Actions {
137 | logInit(payload: LogInitPayload)
138 | logMessage(payload: LogMessagePayload)
139 | logCallStart(payload: LogCallStartPayload)
140 | logCallEnd(payload: LogCallEndPayload)
141 | toggleRun(run: string)
142 | toggleEvent(payload: ToggleEventPayload)
143 | toggleCollapseRepeatingEvents()
144 | setDetailsPaneExpanded(payload: SetDetailsPaneExpandedPayload)
145 | showPane(shown: boolean)
146 | setPaneDisplay(paneDisplay: PaneDisplay)
147 | setValueDisplay(valueDisplay: ValueDisplay)
148 | select(action: SelectedEvent | null)
149 | timeTravel(action: SelectedEvent)
150 | execute(payload: ExecutePayload)
151 | deleteRun(id: string)
152 | setCallOverviewText(text: string)
153 | }
154 |
155 | export const injectedSetState = "$__SET_STATE"
156 |
--------------------------------------------------------------------------------
/src/components/CallOverviewDetailsPane.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .call-overview-details-pane {
4 | display: flex;
5 | flex-direction: column;
6 | padding: 0.3rem;
7 | min-height: 0;
8 |
9 | h3 {
10 | margin: 0.3rem 0rem;
11 | }
12 |
13 | .call-section {
14 | display: flex;
15 | flex-direction: column;
16 | flex: 0 0 11rem;
17 | padding: 0.3rem;
18 |
19 | .call-text-area {
20 | flex: 0 0 7rem;
21 | }
22 |
23 | .call-text-action {
24 | display: flex;
25 | justify-content: space-between;
26 |
27 | .call-text-error {
28 | font-size: 0.8rem;
29 | color: $text-error-color;
30 | }
31 | }
32 | }
33 |
34 | .response-section {
35 | display: flex;
36 | flex-direction: column;
37 | flex: 1 1 100%;
38 | min-height: 0;
39 |
40 | .result-pane {
41 | display: flex;
42 | flex-direction: column;
43 | border: 1px solid $border-color;
44 | flex: 1 1 100%;
45 | min-height: 0;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/CallOverviewDetailsPane.tsx:
--------------------------------------------------------------------------------
1 | import { h } from "hyperapp"
2 |
3 | import { State, Actions, ActionEvent, FunctionEvent } from "../api"
4 | import {
5 | isValueDisplayExpanded,
6 | getCallText,
7 | getArgsFromCallText
8 | } from "../selectors"
9 | import { ObjectView } from "./ObjectView"
10 |
11 | import "./CallOverviewDetailsPane.scss"
12 | import { getErrorMessage } from "../utils"
13 |
14 | interface CallProps extends CallOverviewDetailsPaneProps {
15 | args?: any[]
16 | error?: string
17 | }
18 |
19 | // # getCallProps
20 |
21 | function getCallProps(props: CallOverviewDetailsPaneProps): CallProps {
22 | const { state, actions, event } = props
23 | try {
24 | const args = getArgsFromCallText(event, state.callOverviewText)
25 | return { state, actions, event, args }
26 | } catch (e) {
27 | const error = getErrorMessage(e)
28 | return { state, actions, event, error }
29 | }
30 | }
31 |
32 | // # CallTextArea
33 |
34 | function CallTextArea(props: CallProps) {
35 | const { state, actions, event } = props
36 | return (
37 |