Merge branch 'dev' into main

cmd/toolgui-demo/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	_ "embed"
+	"errors"
 	"fmt"
 	"log"
 
@@ -282,6 +283,25 @@ func MiscPage(p *framework.Params) error {
 		tcmisc.ProgressBar(prgbarCompCol, 30, "progress_bar")
 	})
 
+	tccontent.Divider(p.Main)
+
+	errorCompCol, errorCodeCol := tclayout.Column2(p.Main, "show_error")
+	if tcinput.Button(p.State, errorCompCol, "Show error") {
+		return errors.New("new error")
+	}
+	tccontent.Code(errorCodeCol, `if tcinput.Button(p.State, errorCompCol, "Show error") {
+	return errors.New("New error")
+}`, "go")
+
+	tccontent.Divider(p.Main)
+
+	panicCompCol, panicCodeCol := tclayout.Column2(p.Main, "show_panic")
+	tcmisc.Echo(panicCodeCol, code, func() {
+		if tcinput.Button(p.State, panicCompCol, "Show panic") {
+			panic("show panic")
+		}
+	})
+
 	return nil
 }
 

toolgui-e2e/cypress.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
   e2e: {
+    projectId: "rtf9hd",
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
       // implement node event listeners here

toolgui-e2e/cypress/e2e/misc.cy.js

@@ -0,0 +1,13 @@
+describe('template spec', () => {
+  it('Error handling', () => {
+    cy.visit('/misc')
+    cy.contains('Show error').click()
+    cy.contains('new error').should('exist')
+  })
+
+  it('Panic handling', () => {
+    cy.visit('/misc')
+    cy.contains('Show panic').click()
+    cy.contains('show panic').should('exist')
+  })
+})

toolgui-web/lib/src/app/App.tsx

@@ -7,6 +7,7 @@ import { AppConf } from './AppConf';
 import { AppNavbar } from './AppNavbar';
 import { AppBody } from './AppBody';
 import { setIcon } from '../util/seticon';
+import { AppError, Error } from './AppError';
 
 const NOTIFY_TYPE_CREATE = 1
 const NOTIFY_TYPE_UPDATE = 2
@@ -28,6 +29,7 @@ interface AppState {
   running: boolean
   pageFound: boolean
   pageName: string
+  error: Error | null
 }
 
 export class App extends Component<AppProps, AppState> {
@@ -61,27 +63,29 @@ export class App extends Component<AppProps, AppState> {
 
     this.state = {
       forest: new Forest([
-        props.appConf.root_container_id,
+        props.appConf.main_container_id,
         props.appConf.sidebar_container_id,
       ]),
       running: false,
       pageFound: pageFound,
       pageName: pageName,
+      error: null,
     }
   }
 
   componentDidMount() {
     this.update({})
   }
 
-  startUpdating() {
+  startUpdate() {
     this.setState((prevState) => {
       const newForest = prevState.forest.swallowCopy()
       newForest.setToRemoving()
 
       return {
         running: true,
         forest: newForest,
+        error: null,
       }
     })
   }
@@ -126,24 +130,31 @@ export class App extends Component<AppProps, AppState> {
     }
   }
 
-  finishUpdating() {
+  finishUpdate(pack: any) {
     this.setState((prevState) => {
       const newForest = prevState.forest.swallowCopy()
       newForest.removeNodeWithRemovingTag()
+      var err: Error | null = null
+      if (!pack.success) {
+        err = {
+          msg: pack.error
+        }
+      }
 
       return {
         running: false,
         forest: newForest,
+        error: err,
       }
     })
   }
 
   update(event: UpdateEvent) {
     this.props.updater(event,
-      () => { this.startUpdating() },
+      () => { this.startUpdate() },
       clearState,
       (pack) => { this.receiveNotifyPack(pack) },
-      () => { this.finishUpdating() })
+      (pack) => { this.finishUpdate(pack) })
   }
 
   render() {
@@ -161,6 +172,8 @@ export class App extends Component<AppProps, AppState> {
           pageFound={this.state.pageFound}
           forest={this.state.forest}
           update={(e) => { this.update(e) }} />
+
+        <AppError error={this.state.error} />
       </div >
     )
   }

toolgui-web/lib/src/app/AppBody.tsx

@@ -18,7 +18,7 @@ export class AppBody extends Component<AppBodyProps> {
   }
 
   rootNode() {
-    return this.props.forest.nodes[this.props.appConf.root_container_id]
+    return this.props.forest.nodes[this.props.appConf.main_container_id]
   }
 
   sidebarNode() {

toolgui-web/lib/src/app/AppConf.ts

@@ -2,7 +2,7 @@ export interface AppConf {
   page_names: string[]
   page_confs: { [page_name: string]: any }
 
-  root_container_id: string,
+  main_container_id: string,
   sidebar_container_id: string,
 
   hash_page_name_mode: boolean,

toolgui-web/lib/src/app/AppError.tsx

@@ -0,0 +1,27 @@
+import React, { Component, ReactNode } from "react";
+
+export interface Error {
+  msg: string
+}
+
+interface AppErrorProps {
+  error: Error | null
+}
+
+export class AppError extends Component<AppErrorProps> {
+  render(): ReactNode {
+    if (!this.props.error) {
+      return <></>
+    }
+
+    return (
+      <div className="container" style={{ paddingTop: '10px' }}>
+        <article className="message is-danger">
+          <div className="message-body">
+            {this.props.error.msg}
+          </div>
+        </article>
+      </div>
+    )
+  }
+}

toolgui-web/lib/src/app/Nodes.ts

@@ -56,7 +56,10 @@ export class Forest {
     if (nodeID in this.nodes) {
       const parentID = this.nodes[nodeID].parentID
       const idx = this.nodes[parentID].children.findIndex(n => n.props.id === nodeID)
-      this.nodes[parentID].children.splice(idx, 1)
+      // TBD: Why we need check here?
+      if (idx != -1) {
+        this.nodes[parentID].children.splice(idx, 1)
+      }
     }
 
     // create or modify node in node pool

toolgui/executor/web.go

@@ -146,7 +146,7 @@ func (e *WebExecutor) handleUpdate(ws *websocket.Conn) {
 		}
 	}
 
-	err = e.app.Run(pageName, state, sendNotifyPack)
+	err = e.app.RunWithHandlingPanic(pageName, state, sendNotifyPack)
 	if err != nil {
 		websocket.JSON.Send(ws, &resultPack{
 			Error:   err.Error(),

toolgui/framework/app.go

@@ -2,17 +2,19 @@ package framework
 
 import (
 	"errors"
+	"log"
 
 	"github.com/mudream4869/toolgui/toolgui/tgutil"
 )
 
 var ErrPageNotFound = errors.New("page not found")
+var ErrPanic = errors.New("panic")
 
 // MainContainerID is the id of root container.
 // The creation of root container won't trigger SendNotifyPackFunc.
 const MainContainerID string = "container_main"
 
-func realRootContainerID() string {
+func realMainContainerID() string {
 	return NewContainer(MainContainerID, nil).ID
 }
 
@@ -61,7 +63,7 @@ type AppConf struct {
 
 	HashPageNameMode bool `json:"hash_page_name_mode"`
 
-	RootContainerID    string `json:"root_container_id"`
+	MainContainerID    string `json:"main_container_id"`
 	SidebarContainerID string `json:"sidebar_container_id"`
 }
 
@@ -132,13 +134,28 @@ func (app *App) AppConf() *AppConf {
 		PageNames: app.pageNames,
 		PageConfs: app.pageConfs,
 
-		RootContainerID:    realRootContainerID(),
+		MainContainerID:    realMainContainerID(),
 		SidebarContainerID: realSidebarContainerID(),
 
 		HashPageNameMode: app.hashPageNameMode,
 	}
 }
 
+func (app *App) RunWithHandlingPanic(
+	name string, state *State, notifyFunc SendNotifyPackFunc) (err error) {
+
+	defer func() {
+		r := recover()
+		if r != nil {
+			log.Println("Panic", r)
+			err = tgutil.Errorf("%w: %v", ErrPanic, r)
+		}
+	}()
+
+	err = app.Run(name, state, notifyFunc)
+	return
+}
+
 // Run run a page which named `name` with state
 func (app *App) Run(name string, state *State, notifyFunc SendNotifyPackFunc) error {
 	pageFunc, ok := app.pageFuncs[name]