fix: snabbdom callsites

The `attrs` parameter doesn't seem to work anymore, `props` does.
Also using the return type of patch is generally not needed, since patch
mutates the node itself

Author: Jeidnx

lib/config_default.ts

@@ -42,16 +42,17 @@ export interface Domain {
   domain: string;
 }
 
-export interface LinkInfo {
+interface Info {
   name: string;
   title: string;
   href: string;
-  image: string;
-  width: string;
-  height: string;
+  image?: string;
+  width?: string;
+  height?: string;
 }
 
-export type NodeInfo = LinkInfo;
+export type LinkInfo = Info;
+export type NodeInfo = Info;
 
 export interface Link {
   title: string;

lib/infobox/link.ts

@@ -44,7 +44,7 @@ export const Link = function (el: HTMLElement, linkData: LinkData[], linkScale:
     let img = [];
     let time = linkData[0].target.lastseen.format("DDMMYYYYHmmss");
 
-    header = patch(
+    patch(
       header,
       h(
         "div",
@@ -66,7 +66,7 @@ export const Link = function (el: HTMLElement, linkData: LinkData[], linkScale:
           ),
         ]),
       ),
-    ) as unknown as HTMLDivElement;
+    );
 
     helper.attributeEntry(
       children,
@@ -104,9 +104,9 @@ export const Link = function (el: HTMLElement, linkData: LinkData[], linkScale:
     }
 
     let elNew = h("table", children);
-    let pTable = patch(table, elNew);
-    (pTable.elm as unknown as HTMLElement).classList.add("attributes");
-    images = patch(images, h("div", img)) as unknown as HTMLDivElement;
+    patch(table, elNew);
+    table.classList.add("attributes");
+    patch(images, h("div", img));
   };
 
   self.setData = function setData(data: { links: LinkData[] }) {

lib/infobox/node.ts

@@ -8,7 +8,7 @@ import { NodeInfo } from "../config_default.js";
 
 const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
 
-function showStatImg(nodeInfo: NodeInfo, node: NodeData) {
+function showStatImg(nodeInfo: NodeInfo, node: NodeData): HTMLDivElement {
   let config = window.config;
   let subst = {
     "{NODE_ID}": node.node_id,
@@ -199,14 +199,11 @@ export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any
 
     let devicePictures = showDevicePictures(config.devicePictures, node);
     let devicePicturesContainerData = {
-      attrs: {
+      props: {
         class: "hw-img-container",
       },
     };
-    devicePicture = patch(
-      devicePicture,
-      devicePictures ? h("div", devicePicturesContainerData, devicePictures) : h("div"),
-    ) as unknown as HTMLDivElement;
+    patch(devicePicture, devicePictures ? h("div", devicePicturesContainerData, devicePictures) : h("div"));
 
     let children = [];
 
@@ -237,9 +234,8 @@ export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any
     children.push(h("tr", [h("th", _.t("node.gateway")), showGateway(node)]));
 
     let elNew = h("table", children);
-    table = patch(table, elNew) as unknown as HTMLTableElement;
-    // @ts-ignore
-    table.elm.classList.add("attributes");
+    patch(table, elNew);
+    table.classList.add("attributes");
 
     patch(neighbours, h("h3", _.t("node.link", node.neighbours.length) + " (" + node.neighbours.length + ")"));
     if (node.neighbours.length > 0) {
@@ -253,7 +249,7 @@ export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any
         img.push(h("h4", nodeInfo.name) as unknown as HTMLElement);
         img.push(showStatImg(nodeInfo, node));
       });
-      images = patch(images, h("div", img)) as unknown as HTMLDivElement;
+      patch(images, h("div", img));
     }
   };
 

lib/linklist.ts

@@ -92,8 +92,8 @@ export const Linklist = function (linkScale: (t: any) => any): CanRender & CanSe
     let h2 = document.createElement("h2");
     h2.textContent = _.t("node.links");
     d.appendChild(h2);
-    table.el.elm.classList.add("link-list");
-    d.appendChild(table.el.elm);
+    table.el.classList.add("link-list");
+    d.appendChild(table.el);
   };
 
   self.setData = function setData(d: ObjectsLinksAndNodes) {

lib/nodelist.ts

@@ -101,8 +101,8 @@ export const Nodelist = function (): CanSetData & CanRender {
     let h2 = document.createElement("h2");
     h2.textContent = _.t("node.all");
     d.appendChild(h2);
-    table.el.elm.classList.add("node-list");
-    d.appendChild(table.el.elm);
+    table.el.classList.add("node-list");
+    d.appendChild(table.el);
   };
 
   self.setData = function setData(nodesData: ObjectsLinksAndNodes) {

lib/proportions.ts

@@ -1,4 +1,4 @@
-import { classModule, eventListenersModule, h, init, propsModule, styleModule } from "snabbdom";
+import { classModule, eventListenersModule, h, init, propsModule, styleModule, toVNode } from "snabbdom";
 import * as d3Interpolate from "d3-interpolate";
 import { _ } from "./utils/language.js";
 import { DataDistributor, Filter, ObjectsLinksAndNodes } from "./datadistributor.js";
@@ -97,7 +97,8 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
       return h("tr", [th, td]);
     });
     let tableNew = h("table", { props: { className: "proportion" } }, items);
-    return patch(table, tableNew) as unknown as HTMLTableElement;
+    patch(table, tableNew);
+    return table;
   }
 
   self.setData = function setData(data: ObjectsLinksAndNodes) {
@@ -243,12 +244,10 @@ export const Proportions = function (filterManager: ReturnType<typeof DataDistri
       h2.classList.add("proportion-header");
       h2.textContent = _.t(heading);
       h2.onclick = function onclick() {
-        // @ts-ignore
-        table.elm.classList.toggle("hide");
+        table.classList.toggle("hide");
       };
       el.appendChild(h2);
-      // @ts-ignore
-      el.appendChild(table.elm);
+      el.appendChild(table);
     }
   };
   return self;

lib/simplenodelist.ts

@@ -70,7 +70,7 @@ export const SimpleNodelist = function (nodesState: string, field: string, title
     });
 
     let tbodyNew = h("tbody", items);
-    tbody = patch(tbody, tbodyNew) as unknown as HTMLTableSectionElement;
+    patch(tbody, tbodyNew);
   };
 
   return self;

lib/sorttable.ts

@@ -15,7 +15,10 @@ export const SortTable = function (
   sortIndex: number,
   renderRow: (element: any, i: number, all: []) => any,
 ) {
-  const self = { el: undefined, setData: undefined };
+  const self: {
+    el: HTMLElement;
+    setData: (data: any[]) => void;
+  } = { el: undefined, setData: undefined };
   let data: any[];
   let sortReverse = false;
   self.el = document.createElement("table");

lib/utils/helper.ts

@@ -133,9 +133,9 @@ export function attributeEntry(children: VNode[], label: string, value: string |
   }
 }
 
-export function showStat(linkInfo: LinkInfo | NodeInfo, subst: ReplaceMapping): HTMLElement {
+export function showStat(linkInfo: LinkInfo, subst: ReplaceMapping): HTMLDivElement {
   let content = h("img", {
-    attrs: {
+    props: {
       src: listReplace(linkInfo.image, subst),
       width: linkInfo.width,
       height: linkInfo.height,
@@ -149,17 +149,17 @@ export function showStat(linkInfo: LinkInfo | NodeInfo, subst: ReplaceMapping):
       h(
         "a",
         {
-          attrs: {
+          props: {
             href: listReplace(linkInfo.href, subst),
             target: "_blank",
             title: listReplace(linkInfo.title, subst),
           },
         },
         content,
       ),
-    ) as unknown as HTMLElement;
+    ) as unknown as HTMLDivElement;
   }
-  return h("div", content) as unknown as HTMLElement;
+  return h("div", content) as unknown as HTMLDivElement;
 }
 
 export const showDevicePicture = function showDevicePicture(pictures: string, subst: ReplaceMapping) {
@@ -168,7 +168,7 @@ export const showDevicePicture = function showDevicePicture(pictures: string, su
   }
 
   return h("img", {
-    attrs: { src: listReplace(pictures, subst), class: "hw-img" },
+    props: { src: listReplace(pictures, subst), class: "hw-img" },
     on: {
       // hide non-existent images
       error: function (e: any) {