First working version

Author: Mytrill

dist/hyperapp-devtools.js

@@ -34,7 +34,7 @@ export interface RuntimeEvent {
     level: "info" | "warn" | "error";
 }
 export declare type PaneDisplay = "fullscreen" | "right" | "bottom";
-export declare type ValueDisplay = "state" | "result" | "data";
+export declare type ValueDisplay = "state" | "result" | "data" | "debugger-state";
 export interface State {
     runs: Runs;
     logs: RuntimeEvent[];
@@ -52,7 +52,7 @@ export interface Actions {
     log(event: RuntimeEvent): any;
     logInit(event: InitEvent): any;
     logAction(event: ActionEvent): any;
-    select(state: AppAction | null): any;
+    select(action: AppAction | null): any;
     showPane(shown: boolean): any;
     setPaneDisplay(paneDisplay: PaneDisplay): any;
     setValueDisplay(valueDisplay: ValueDisplay): any;

dist/hyperapp-devtools.js.map

@@ -0,0 +1,10 @@
+import "./RunActionItem.scss";
+import { State, Actions, AppAction } from "../api";
+export interface RunActionItemProps {
+    state: State;
+    actions: Actions;
+    array: AppAction[];
+    index: number;
+    action: AppAction;
+}
+export declare function RunActionItem(props: RunActionItemProps): any;

dist/src/api.d.ts

@@ -25,15 +25,17 @@
     }
 
     const actions = {
-      down: value => state => ({ count: state.count - value }),
-      up: value => state => ({ count: state.count + value })
+      // let's have a nested action here, for the sake of the example
+      add: value => state => ({ count: state.count + value }),
+      down: () => (_, actions) => actions.add(-1),
+      up: () => (_, actions) => actions.add(1),
     }
 
     function view(state, actions) {
       return h("div", { style: { margin: "2rem" } },
         h("h1", { style: { margin: "0.5rem" } }, state.count),
-        h("button", { onclick: () => actions.down(1) }, "-"),
-        h("button", { onclick: () => actions.up(1) }, "+"),
+        h("button", { onclick: actions.down }, "-"),
+        h("button", { onclick: actions.up }, "+"),
       )
     }
 

dist/src/components/RunActionItem.d.ts

@@ -12,9 +12,9 @@
   "typings": "dist/src/index.d.ts",
   "scripts": {
     "clean": "rimraf dist .rpt2_cache",
-    "start": "rollup -c -w --serve | cpx dist/hyperapp-devtools.js examples -w",
+    "start": "rollup -c -w --serve",
     "build":
-      "npm run clean && npm run build:module && npm run build:main && npm run build:min && cpx dist/hyperapp-devtools.js examples",
+      "npm run clean && npm run build:module && npm run build:main && npm run build:min",
     "build:main": "rollup -c && rimraf .rpt2_cache",
     "build:min": "rollup -c --min && rimraf .rpt2_cache",
     "build:module": "rollup -c --es && rimraf .rpt2_cache"

examples/counter.html

@@ -32,7 +32,7 @@ if (options.serve) {
   plugins.push(
     serve({
       open: true,
-      contentBase: "examples"
+      contentBase: ["examples", "dist"]
     })
   )
 }

examples/hyperapp-devtools.js

@@ -12,20 +12,28 @@ function mergeResult(state: any, event: api.ActionEvent): any {
   return state
 }
 
+function isCurrentAction(action: api.AppAction): boolean {
+  if (action.done) {
+    return false
+  }
+
+  const length = action.nestedActions.length
+  return length === 0 || action.nestedActions[length - 1].done
+}
+
 /**
  * Recursively goes down the tree of actions and append the given event to the last non-done action.
- *
  */
-function appendAction(
-  previousAction: api.AppAction,
+function appendActionEvent(
+  action: api.AppAction,
   event: api.ActionEvent
 ): api.AppAction {
-  if (previousAction.done) {
-    return previousAction
+  if (action.done) {
+    return action
   }
 
   // no nested action yet
-  if (previousAction.nestedActions.length === 0) {
+  if (isCurrentAction(action)) {
     if (!event.callDone) {
       // the action calls to a nested action
       const nestedAction: api.AppAction = {
@@ -34,41 +42,37 @@ function appendAction(
         collapsed: false,
         actionData: event.data,
         nestedActions: [],
-        previousState: previousAction.previousState
+        previousState: action.previousState
       }
 
       return {
-        ...previousAction,
+        ...action,
         nestedActions: [nestedAction]
       }
-    } else if (previousAction.name === event.action) {
+    } else if (action.name === event.action) {
       // the previous call is now complete: set to done and compute the result
       return {
-        ...previousAction,
+        ...action,
         done: true,
         actionResult: event.result,
-        nextState: mergeResult(previousAction.previousState, event)
+        nextState: mergeResult(action.previousState, event)
       }
     } else {
       // error case
-      console.log(
-        "Previous action is done and event.callDone",
-        previousAction,
-        event
-      )
+      console.log("Previous action is done and event.callDone", action, event)
       // TODO what to return?!
-      return previousAction
+      return action
     }
   } else {
     // there are already some nested actions: call recursivelly
-    const nested = previousAction.nestedActions
+    const nested = action.nestedActions
     const nestedAction = nested[nested.length - 1]
-    const newNestedAction = appendAction(nestedAction, event)
+    const newNestedAction = appendActionEvent(nestedAction, event)
     if (nestedAction === newNestedAction) {
-      return previousAction
+      return action
     }
     return {
-      ...previousAction,
+      ...action,
       nestedActions: nested.slice(0, nested.length - 1).concat(newNestedAction)
     }
   }
@@ -125,7 +129,7 @@ export const actions: ActionsType<api.State, api.Actions> = {
       }
     } else {
       // previous action not done: find parent action, create and append
-      selectedAction = appendAction(prevAction, event)
+      selectedAction = appendActionEvent(prevAction, event)
       actions.push(selectedAction)
     }
 

package.json

@@ -15,6 +15,9 @@ export interface Run {
   id: string
   timestamp: number
   actions: AppAction[]
+  // // used internally when loging actions
+  // // each number is the
+  // currentActionPath: number[]
   collapsed: boolean
 }
 
@@ -42,7 +45,7 @@ export interface RuntimeEvent {
 
 export type PaneDisplay = "fullscreen" | "right" | "bottom"
 
-export type ValueDisplay = "state" | "result" | "data"
+export type ValueDisplay = "state" | "result" | "data" | "debugger-state"
 
 export interface State {
   runs: Runs
@@ -65,7 +68,7 @@ export interface Actions {
   log(event: RuntimeEvent)
   logInit(event: InitEvent)
   logAction(event: ActionEvent)
-  select(state: AppAction | null)
+  select(action: AppAction | null)
   showPane(shown: boolean)
   setPaneDisplay(paneDisplay: PaneDisplay)
   setValueDisplay(valueDisplay: ValueDisplay)