[CodeHealth] Apply modern standards to LGraphCanvas (#650)

- Prefer template string - Prefer explicit throw to undefined TypeError - Remove unnecessary `this` assignment
2026-02-02 14:27:40 +00:00 · 2025-03-01 09:08:23 +11:00
parent c4faaf4210
commit b36bf3d4a2
10 changed files with 102 additions and 127 deletions
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -124,6 +124,8 @@ export default tseslint.config(
  // Base, TypeScript, and Stylistic
  {
    rules: {
+      "prefer-template": "error",
+
      // TODO: Update when TypeScript has been cleaned
      "prefer-spread": "off",
      "no-empty": "off",
--- a/src/ContextMenu.ts
+++ b/src/ContextMenu.ts
@@ -63,7 +63,7 @@ export class ContextMenu<TValue = unknown> {

    const root: ContextMenuDivElement<TValue> = document.createElement("div")
    let classes = "litegraph litecontextmenu litemenubar-panel"
-    if (options.className) classes += " " + options.className
+    if (options.className) classes += ` ${options.className}`
    root.className = classes
    root.style.minWidth = "100"
    root.style.minHeight = "100"
@@ -172,8 +172,8 @@ export class ContextMenu<TValue = unknown> {
        top = body_rect.height - root_rect.height - 10
    }

-    root.style.left = left + "px"
-    root.style.top = top + "px"
+    root.style.left = `${left}px`
+    root.style.top = `${top}px`

    if (LiteGraph.context_menu_scaling && options.scale) {
      root.style.transform = `scale(${Math.round(options.scale * 4) * 0.25})`
@@ -211,7 +211,7 @@ export class ContextMenu<TValue = unknown> {
          element.setAttribute("aria-haspopup", "true")
          element.setAttribute("aria-expanded", "false")
        }
-        if (value.className) element.className += " " + value.className
+        if (value.className) element.className += ` ${value.className}`
      }
      element.value = value
      element.setAttribute("role", "menuitem")
@@ -325,7 +325,7 @@ export class ContextMenu<TValue = unknown> {
      } else if (e && !ContextMenu.isCursorOverElement(e, this.parentMenu.root)) {
        ContextMenu.trigger(
          this.parentMenu.root,
-          LiteGraph.pointerevents_method + "leave",
+          `${LiteGraph.pointerevents_method}leave`,
          e,
        )
      }
--- a/src/LGraph.ts
+++ b/src/LGraph.ts
@@ -469,7 +469,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
        this.errors_in_execution = true
        if (LiteGraph.throw_errors) throw error

-        if (LiteGraph.debug) console.log("Error during execution: " + error)
+        if (LiteGraph.debug) console.log("Error during execution:", error)
        this.stop()
      }
    }
@@ -1116,7 +1116,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
      const ctor = LiteGraph.registered_node_types[node.type]
      if (node.constructor == ctor) continue

-      console.log("node being replaced by newer version: " + node.type)
+      console.log("node being replaced by newer version:", node.type)
      // @ts-ignore deprecated
      const newnode = LiteGraph.createNode(node.type)
      if (!newnode) continue
@@ -1638,7 +1638,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
        // stored info
        let node = LiteGraph.createNode(String(n_info.type), n_info.title)
        if (!node) {
-          if (LiteGraph.debug) console.log("Node not found or has errors: " + n_info.type)
+          if (LiteGraph.debug) console.log("Node not found or has errors:", n_info.type)

          // in case of error we create a replacement node to avoid losing info
          node = new LGraphNode("")
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -58,7 +58,7 @@ import {
 } from "./measure"
 import { type ConnectionColorContext } from "./NodeSlot"
 import { Reroute, type RerouteId } from "./Reroute"
-import { stringOrEmpty, stringOrNull } from "./strings"
+import { stringOrEmpty } from "./strings"
 import {
  CanvasItem,
  EaseFunction,
@@ -888,6 +888,7 @@ export class LGraphCanvas implements ConnectionColorContext {
            canvas.graph.beforeChange()
            const node = LiteGraph.createNode(value.value)
            if (node) {
+              if (!first_event) throw new TypeError("Context menu event was null. This should not occure in normal usage.")
              node.pos = canvas.convertEventToCanvasOffset(first_event)
              canvas.graph.add(node)
            }
@@ -919,8 +920,6 @@ export class LGraphCanvas implements ConnectionColorContext {
  ): boolean | undefined {
    if (!node) return

-    // FIXME: Static function this
-    const that = this
    const canvas = LGraphCanvas.active_canvas
    const ref_window = canvas.getCanvasWindow()

@@ -971,10 +970,10 @@ export class LGraphCanvas implements ConnectionColorContext {
      ref_window,
    )

-    function inner_clicked(v: IContextMenuValue<INodeSlotContextItem>, e: MouseEvent, prev: ContextMenu<INodeSlotContextItem>) {
+    function inner_clicked(this: ContextMenuDivElement<INodeSlotContextItem>, v: IContextMenuValue<INodeSlotContextItem>, e: MouseEvent, prev: ContextMenu<INodeSlotContextItem>) {
      if (!node) return

-      v.callback?.call(that, node, v, e, prev)
+      v.callback?.call(this, node, v, e, prev)

      if (!v.value) return
      if (!node.graph) throw new NullGraphError()
@@ -1109,7 +1108,7 @@ export class LGraphCanvas implements ConnectionColorContext {

  /** @param value Parameter is never used */
  static onShowMenuNodeProperties(
-    value: unknown,
+    value: string | number | boolean | object,
    options: unknown,
    e: MouseEvent,
    prev_menu: ContextMenu<string>,
@@ -1130,14 +1129,11 @@ export class LGraphCanvas implements ConnectionColorContext {
        value = LGraphCanvas.getPropertyPrintableValue(value, info.values)

      // value could contain invalid html characters, clean that
-      value = LGraphCanvas.decodeHTML(stringOrNull(value))
+      value = LGraphCanvas.decodeHTML(stringOrEmpty(value))
      entries.push({
-        content: "<span class='property_name'>" +
-          (info.label || i) +
-          "</span>" +
-          "<span class='property_value'>" +
-          value +
-          "</span>",
+        content:
+         `<span class='property_name'>${info.label || i}</span>` +
+         `<span class='property_value'>${value}</span>`,
        value: i,
      })
    }
@@ -1170,6 +1166,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    return false
  }

+  /** @deprecated */
  static decodeHTML(str: string): string {
    const e = document.createElement("div")
    e.textContent = str
@@ -1259,11 +1256,11 @@ export class LGraphCanvas implements ConnectionColorContext {
    }

    if (e) {
-      dialog.style.left = e.clientX + offsetx + "px"
-      dialog.style.top = e.clientY + offsety + "px"
+      dialog.style.left = `${e.clientX + offsetx}px`
+      dialog.style.top = `${e.clientY + offsety}px`
    } else {
-      dialog.style.left = canvasEl.width * 0.5 + offsetx + "px"
-      dialog.style.top = canvasEl.height * 0.5 + offsety + "px"
+      dialog.style.left = `${canvasEl.width * 0.5 + offsetx}px`
+      dialog.style.top = `${canvasEl.height * 0.5 + offsety}px`
    }

    const button = dialog.querySelector("button")
@@ -1321,7 +1318,7 @@ export class LGraphCanvas implements ConnectionColorContext {
        desc_value = k
        break
      }
-      return String(value) + " (" + desc_value + ")"
+      return `${String(value)} (${desc_value})`
    }
  }

@@ -1399,7 +1396,7 @@ export class LGraphCanvas implements ConnectionColorContext {
        if (kV !== -1 && LiteGraph.NODE_MODES[kV]) {
          node.changeMode(kV)
        } else {
-          console.warn("unexpected mode: " + v)
+          console.warn(`unexpected mode: ${v}`)
          node.changeMode(LGraphEventMode.ALWAYS)
        }
      }
@@ -1437,13 +1434,8 @@ export class LGraphCanvas implements ConnectionColorContext {
      const color = LGraphCanvas.node_colors[i]
      value = {
        value: i,
-        content: "<span style='display: block; color: #999; padding-left: 4px; border-left: 8px solid " +
-          color.color +
-          "; background-color:" +
-          color.bgcolor +
-          "'>" +
-          i +
-          "</span>",
+        content: `<span style='display: block; color: #999; padding-left: 4px;` +
+          ` border-left: 8px solid ${color.color}; background-color:${color.bgcolor}'>${i}</span>`,
      }
      values.push(value)
    }
@@ -1682,8 +1674,7 @@ export class LGraphCanvas implements ConnectionColorContext {

    if (element.getContext == null) {
      if (element.localName != "canvas") {
-        throw "Element supplied for LGraphCanvas must be a <canvas> element, you passed a " +
-          element.localName
+        throw `Element supplied for LGraphCanvas must be a <canvas> element, you passed a ${element.localName}`
      }
      throw "This browser doesn't support Canvas"
    }
@@ -4476,11 +4467,11 @@ export class LGraphCanvas implements ConnectionColorContext {
    ctx.fillStyle = "#888"
    ctx.textAlign = "left"
    if (this.graph) {
-      ctx.fillText("T: " + this.graph.globaltime.toFixed(2) + "s", 5, 13 * 1)
-      ctx.fillText("I: " + this.graph.iteration, 5, 13 * 2)
-      ctx.fillText("N: " + this.graph._nodes.length + " [" + this.visible_nodes.length + "]", 5, 13 * 3)
-      ctx.fillText("V: " + this.graph._version, 5, 13 * 4)
-      ctx.fillText("FPS:" + this.fps.toFixed(2), 5, 13 * 5)
+      ctx.fillText(`T: ${this.graph.globaltime.toFixed(2)}s`, 5, 13 * 1)
+      ctx.fillText(`I: ${this.graph.iteration}`, 5, 13 * 2)
+      ctx.fillText(`N: ${this.graph._nodes.length} [${this.visible_nodes.length}]`, 5, 13 * 3)
+      ctx.fillText(`V: ${this.graph._version}`, 5, 13 * 4)
+      ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, 13 * 5)
    } else {
      ctx.fillText("No graph selected", 5, 13 * 1)
    }
@@ -4774,13 +4765,13 @@ export class LGraphCanvas implements ConnectionColorContext {
    if (typeof data === "number")
      text = data.toFixed(2)
    else if (typeof data === "string")
-      text = "\"" + data + "\""
+      text = `"${data}"`
    else if (typeof data === "boolean")
      text = String(data)
    else if (data.toToolTip)
      text = data.toToolTip()
    else
-      text = "[" + data.constructor.name + "]"
+      text = `[${data.constructor.name}]`

    if (text == null) return

@@ -5709,7 +5700,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    const isTo = !isFrom && opts.nodeTo && opts.slotTo !== null

    if (!isFrom && !isTo) {
-      console.warn("No data passed to createDefaultNodeForSlot " + opts.nodeFrom + " " + opts.slotFrom + " " + opts.nodeTo + " " + opts.slotTo)
+      console.warn(`No data passed to createDefaultNodeForSlot`, opts.nodeFrom, opts.slotFrom, opts.nodeTo, opts.slotTo)
      return false
    }
    if (!opts.nodeType) {
@@ -5736,7 +5727,7 @@ export class LGraphCanvas implements ConnectionColorContext {
      break
    case "undefined":
    default:
-      console.warn("Cant get slot information " + slotX)
+      console.warn("Cant get slot information", slotX)
      return false
    }

@@ -5831,7 +5822,7 @@ export class LGraphCanvas implements ConnectionColorContext {

          return true
        }
-        console.log("failed creating " + nodeNewType)
+        console.log(`failed creating ${nodeNewType}`)
      }
    }
    return false
@@ -5880,7 +5871,7 @@ export class LGraphCanvas implements ConnectionColorContext {
      slotX = isFrom ? nodeX.outputs[slotX] : nodeX.inputs[slotX]
      break
    default:
-      console.warn("Cant get slot information " + slotX)
+      console.warn("Cant get slot information", slotX)
      return
    }

@@ -5977,7 +5968,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    const canvas = graphcanvas.canvas
    canvas.parentNode.append(dialog)

-    if (this.ds.scale > 1) dialog.style.transform = "scale(" + this.ds.scale + ")"
+    if (this.ds.scale > 1) dialog.style.transform = `scale(${this.ds.scale})`

    let dialogCloseTimer = null
    let prevent_timeout = 0
@@ -6058,11 +6049,11 @@ export class LGraphCanvas implements ConnectionColorContext {
    }

    if (event) {
-      dialog.style.left = event.clientX + offsetx + "px"
-      dialog.style.top = event.clientY + offsety + "px"
+      dialog.style.left = `${event.clientX + offsetx}px`
+      dialog.style.top = `${event.clientY + offsety}px`
    } else {
-      dialog.style.left = canvas.width * 0.5 + offsetx + "px"
-      dialog.style.top = canvas.height * 0.5 + offsety + "px"
+      dialog.style.left = `${canvas.width * 0.5 + offsetx}px`
+      dialog.style.top = `${canvas.height * 0.5 + offsety}px`
    }

    setTimeout(function () {
@@ -6153,7 +6144,7 @@ export class LGraphCanvas implements ConnectionColorContext {
    }

    if (this.ds.scale > 1) {
-      dialog.style.transform = "scale(" + this.ds.scale + ")"
+      dialog.style.transform = `scale(${this.ds.scale})`
    }

    // hide on mouse leave
@@ -6271,8 +6262,8 @@ export class LGraphCanvas implements ConnectionColorContext {
          if (
            // @ts-expect-error
            options.type_filter_in !== false &&
-            (options.type_filter_in + "").toLowerCase() ==
-            (aSlots[iK] + "").toLowerCase()
+            String(options.type_filter_in).toLowerCase() ==
+            String(aSlots[iK]).toLowerCase()
          ) {
            // selIn.selectedIndex ..
            opt.selected = true
@@ -6306,8 +6297,8 @@ export class LGraphCanvas implements ConnectionColorContext {
          selOut.append(opt)
          if (
            options.type_filter_out !== false &&
-            (options.type_filter_out + "").toLowerCase() ==
-            (aSlots[iK] + "").toLowerCase()
+            String(options.type_filter_out).toLowerCase() ==
+            String(aSlots[iK]).toLowerCase()
          ) {
            opt.selected = true
          }
@@ -6323,13 +6314,13 @@ export class LGraphCanvas implements ConnectionColorContext {

    const left = (event ? event.clientX : rect.left + rect.width * 0.5) - 80
    const top = (event ? event.clientY : rect.top + rect.height * 0.5) - 20
-    dialog.style.left = left + "px"
-    dialog.style.top = top + "px"
+    dialog.style.left = `${left}px`
+    dialog.style.top = `${top}px`

    // To avoid out of screen problems
    if (event.layerY > rect.height - 200)
      // @ts-expect-error
-      helper.style.maxHeight = rect.height - event.layerY - 20 + "px"
+      helper.style.maxHeight = `${rect.height - event.layerY - 20}px`

    requestAnimationFrame(function () {
      input.focus()
@@ -6603,7 +6594,7 @@ export class LGraphCanvas implements ConnectionColorContext {
        help.dataset["type"] = escape(type)
        help.className = "litegraph lite-search-item"
        if (className) {
-          help.className += " " + className
+          help.className += ` ${className}`
        }
        help.addEventListener("click", function () {
          select(unescape(this.dataset["type"]))
@@ -6641,32 +6632,20 @@ export class LGraphCanvas implements ConnectionColorContext {
      for (const i in info.values) {
        const v = Array.isArray(info.values) ? info.values[i] : i

-        input_html +=
-          "<option value='" +
-          v +
-          "' " +
-          (v == node.properties[property] ? "selected" : "") +
-          ">" +
-          info.values[i] +
-          "</option>"
+        const selected = v == node.properties[property] ? "selected" : ""
+        input_html += `<option value='${v}' ${selected}>${info.values[i]}</option>`
      }
      input_html += "</select>"
    } else if (type == "boolean" || type == "toggle") {
-      input_html =
-        "<input autofocus type='checkbox' class='value' " +
-        (node.properties[property] ? "checked" : "") +
-        "/>"
+      const checked = node.properties[property] ? "checked" : ""
+      input_html = `<input autofocus type='checkbox' class='value' ${checked}/>`
    } else {
-      console.warn("unknown type: " + type)
+      console.warn(`unknown type: ${type}`)
      return
    }

    const dialog = this.createDialog(
-      "<span class='name'>" +
-      (info.label || property) +
-      "</span>" +
-      input_html +
-      "<button>OK</button>",
+      `<span class='name'>${info.label || property}</span>${input_html}<button>OK</button>`,
      options,
    )

@@ -6788,8 +6767,8 @@ export class LGraphCanvas implements ConnectionColorContext {
      offsety += this.canvas.height * 0.5
    }

-    dialog.style.left = offsetx + "px"
-    dialog.style.top = offsety + "px"
+    dialog.style.left = `${offsetx}px`
+    dialog.style.top = `${offsety}px`

    this.canvas.parentNode.append(dialog)

@@ -7085,7 +7064,7 @@ export class LGraphCanvas implements ConnectionColorContext {
          if (kV !== -1 && LiteGraph.NODE_MODES[kV]) {
            node.changeMode(kV)
          } else {
-            console.warn("unexpected mode: " + value)
+            console.warn(`unexpected mode: ${value}`)
          }
          break
        }
@@ -7094,7 +7073,7 @@ export class LGraphCanvas implements ConnectionColorContext {
            node.color = LGraphCanvas.node_colors[value].color
            node.bgcolor = LGraphCanvas.node_colors[value].bgcolor
          } else {
-            console.warn("unexpected color: " + value)
+            console.warn(`unexpected color: ${value}`)
          }
          break
        default:
--- a/src/LGraphGroup.ts
+++ b/src/LGraphGroup.ts
@@ -200,7 +200,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
    ctx.fill()

    // Title
-    ctx.font = font_size + "px Arial"
+    ctx.font = `${font_size}px Arial`
    ctx.textAlign = "left"
    ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size)

--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -46,14 +46,14 @@ import { WIDGET_TYPE_MAP } from "./widgets/widgetMap"

 export type NodeId = number | string

+export type NodeProperty = string | number | boolean | object
+
 export interface INodePropertyInfo {
  name: string
  type?: string
-  default_value: unknown
+  default_value: NodeProperty | undefined
 }

-export type INodeProperties = Dictionary<unknown>
-
 export interface IMouseOverData {
  inputId: number | null
  outputId: number | null
@@ -177,7 +177,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
  outputs: INodeOutputSlot[] = []
  // Not used
  connections: unknown[] = []
-  properties: INodeProperties = {}
+  properties: Dictionary<NodeProperty | undefined> = {}
  properties_info: INodePropertyInfo[] = []
  flags: INodeFlags = {}
  widgets?: IWidget[]
@@ -1139,7 +1139,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    options = options || {}
    if (this.onExecute) {
      // enable this to give the event an ID
-      options.action_call ||= this.id + "_exec_" + Math.floor(Math.random() * 9999)
+      options.action_call ||= `${this.id}_exec_${Math.floor(Math.random() * 9999)}`
      if (!this.graph) throw new NullGraphError()

      // @ts-ignore Technically it works when id is a string. Array gets props.
@@ -1173,7 +1173,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    options = options || {}
    if (this.onAction) {
      // enable this to give the event an ID
-      options.action_call ||= this.id + "_" + (action || "action") + "_" + Math.floor(Math.random() * 9999)
+      options.action_call ||= `${this.id}_${action || "action"}_${Math.floor(Math.random() * 9999)}`
      if (!this.graph) throw new NullGraphError()

      // @ts-ignore deprecated
@@ -1270,13 +1270,13 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
      if (node.mode === LGraphEventMode.ON_TRIGGER) {
        // generate unique trigger ID if not present
        if (!options.action_call)
-          options.action_call = this.id + "_trigg_" + Math.floor(Math.random() * 9999)
+          options.action_call = `${this.id}_trigg_${Math.floor(Math.random() * 9999)}`
        // -- wrapping node.onExecute(param); --
        node.doExecute?.(param, options)
      } else if (node.onAction) {
        // generate unique action ID if not present
        if (!options.action_call)
-          options.action_call = this.id + "_act_" + Math.floor(Math.random() * 9999)
+          options.action_call = `${this.id}_act_${Math.floor(Math.random() * 9999)}`
        // pass the action name
        const target_connection = node.inputs[link_info.target_slot]
        node.actionDo(target_connection.name, param, options)
@@ -1339,7 +1339,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   */
  addProperty(
    name: string,
-    default_value: unknown,
+    default_value: NodeProperty | undefined,
    type?: string,
    extra_info?: Partial<INodePropertyInfo>,
  ): INodePropertyInfo {
@@ -1631,7 +1631,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    }
    // litescene mode using the constructor
    // @ts-ignore deprecated https://github.com/Comfy-Org/litegraph.js/issues/639
-    if (this.constructor["@" + property]) info = this.constructor["@" + property]
+    if (this.constructor[`@${property}`]) info = this.constructor[`@${property}`]

    if (this.constructor.widgets_info?.[property])
      info = this.constructor.widgets_info[property]
@@ -2307,7 +2307,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    if (typeof slot === "string") {
      slot = this.findOutputSlot(slot)
      if (slot == -1) {
-        if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot)
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
        return null
      }
    } else if (!this.outputs || slot >= this.outputs.length) {
@@ -2330,7 +2330,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    if (typeof target_slot === "string") {
      targetIndex = target_node.findInputSlot(target_slot)
      if (targetIndex == -1) {
-        if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + targetIndex)
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${targetIndex}`)
        return null
      }
    } else if (target_slot === LiteGraph.EVENT) {
@@ -2480,7 +2480,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    if (typeof slot === "string") {
      slot = this.findOutputSlot(slot)
      if (slot == -1) {
-        if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot)
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
        return false
      }
    } else if (!this.outputs || slot >= this.outputs.length) {
@@ -2595,7 +2595,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    if (typeof slot === "string") {
      slot = this.findInputSlot(slot)
      if (slot == -1) {
-        if (LiteGraph.debug) console.log("Connect: Error, no slot of name " + slot)
+        if (LiteGraph.debug) console.log(`Connect: Error, no slot of name ${slot}`)
        return false
      }
    } else if (!this.inputs || slot >= this.inputs.length) {
--- a/src/LiteGraphGlobal.ts
+++ b/src/LiteGraphGlobal.ts
@@ -312,7 +312,7 @@ export class LiteGraphGlobal {
      throw "Cannot register a simple object, it must be a class with a prototype"
    base_class.type = type

-    if (this.debug) console.log("Node registered: " + type)
+    if (this.debug) console.log("Node registered:", type)

    const classname = base_class.name

@@ -329,7 +329,7 @@ export class LiteGraphGlobal {

    const prev = this.registered_node_types[type]
    if (prev) {
-      console.log("replacing node type: " + type)
+      console.log("replacing node type:", type)
    }

    this.registered_node_types[type] = base_class
@@ -354,7 +354,7 @@ export class LiteGraphGlobal {
    const base_class = typeof type === "string"
      ? this.registered_node_types[type]
      : type
-    if (!base_class) throw "node type not found: " + type
+    if (!base_class) throw `node type not found: ${String(type)}`

    delete this.registered_node_types[String(base_class.type)]

@@ -548,7 +548,7 @@ export class LiteGraphGlobal {
        continue

      try {
-        if (this.debug) console.log("Reloading: " + src)
+        if (this.debug) console.log("Reloading:", src)
        const dynamicScript = document.createElement("script")
        dynamicScript.type = "text/javascript"
        dynamicScript.src = src
@@ -556,7 +556,7 @@ export class LiteGraphGlobal {
        script_file.remove()
      } catch (error) {
        if (this.throw_errors) throw error
-        if (this.debug) console.log("Error while reloading " + src)
+        if (this.debug) console.log("Error while reloading", src)
      }
    }

@@ -631,7 +631,7 @@ export class LiteGraphGlobal {

  // used to create nodes from wrapping functions
  getParameterNames(func: (...args: any) => any): string[] {
-    return (func + "")
+    return String(func)
      .replaceAll(/\/\/.*$/gm, "") // strip single-line comments
      .replaceAll(/\s+/g, "") // strip white space
      .replaceAll(/\/\*[^*/]*\*\//g, "") // strip multi-line comments  /**/
@@ -654,7 +654,7 @@ export class LiteGraphGlobal {
    // convert pointerevents to touch event when not available
    if (sMethod == "pointer" && !window.PointerEvent) {
      console.warn("sMethod=='pointer' && !window.PointerEvent")
-      console.log("Converting pointer[" + sEvent + "] : down move up cancel enter TO touchstart touchmove touchend, etc ..")
+      console.log(`Converting pointer[${sEvent}] : down move up cancel enter TO touchstart touchmove touchend, etc ..`)
      switch (sEvent) {
      case "down": {
        sMethod = "touch"
@@ -682,7 +682,7 @@ export class LiteGraphGlobal {
      }
      // case "over": case "out": not used at now
      default: {
-        console.warn("PointerEvent not available in this browser ? The event " + sEvent + " would not be called")
+        console.warn(`PointerEvent not available in this browser ? The event ${sEvent} would not be called`)
      }
      }
    }
@@ -740,15 +740,15 @@ export class LiteGraphGlobal {

  colorToString(c: [number, number, number, number]): string {
    return (
-      "rgba(" +
-      Math.round(c[0] * 255).toFixed() +
-      "," +
-      Math.round(c[1] * 255).toFixed() +
-      "," +
-      Math.round(c[2] * 255).toFixed() +
-      "," +
-      (c.length == 4 ? c[3].toFixed(2) : "1.0") +
-      ")"
+      `rgba(${
+        Math.round(c[0] * 255).toFixed()
+      },${
+        Math.round(c[1] * 255).toFixed()
+      },${
+        Math.round(c[2] * 255).toFixed()
+      },${
+        c.length == 4 ? c[3].toFixed(2) : "1.0"
+      })`
    )
  }

--- a/src/types/serialisation.ts
+++ b/src/types/serialisation.ts
@@ -9,7 +9,7 @@ import type {
 } from "../interfaces"
 import type { LGraph, LGraphState } from "../LGraph"
 import type { IGraphGroupFlags, LGraphGroup } from "../LGraphGroup"
-import type { LGraphNode, NodeId } from "../LGraphNode"
+import type { LGraphNode, NodeId, NodeProperty } from "../LGraphNode"
 import type { LiteGraph } from "../litegraph"
 import type { LinkId, LLink } from "../LLink"
 import type { RerouteId } from "../Reroute"
@@ -57,7 +57,7 @@ export interface ISerialisedNode {
  mode?: number
  outputs?: ISerialisedNodeOutputSlot[]
  inputs?: ISerialisedNodeInputSlot[]
-  properties?: Dictionary<unknown>
+  properties?: Dictionary<NodeProperty | undefined>
  shape?: RenderShape
  boxcolor?: string
  color?: string
--- a/src/widgets/KnobWidget.ts
+++ b/src/widgets/KnobWidget.ts
@@ -186,12 +186,9 @@ export class KnobWidget extends BaseWidget implements IKnobWidget {
    if (show_text) {
      ctx.textAlign = "center"
      ctx.fillStyle = this.text_color
+      const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3)
      ctx.fillText(
-        (this.label || this.name) +
-        "\n" +
-        Number(this.value).toFixed(
-          this.options.precision != null ? this.options.precision : 3,
-        ),
+        `${this.label || this.name}\n${fixedValue}`,
        widget_width * 0.5,
        y + effective_height * 0.5,
      )
--- a/src/widgets/SliderWidget.ts
+++ b/src/widgets/SliderWidget.ts
@@ -77,12 +77,9 @@ export class SliderWidget extends BaseWidget implements ISliderWidget {
    if (show_text) {
      ctx.textAlign = "center"
      ctx.fillStyle = this.text_color
+      const fixedValue = Number(this.value).toFixed(this.options.precision ?? 3)
      ctx.fillText(
-        (this.label || this.name) +
-        "  " +
-        Number(this.value).toFixed(
-          this.options.precision != null ? this.options.precision : 3,
-        ),
+        `${this.label || this.name}  ${fixedValue}`,
        widget_width * 0.5,
        y + H * 0.7,
      )