Don't rely on actual typenames

src/App.tsx

@@ -70,7 +70,7 @@ function WidgetCard(props: { widget: Widget, ctl: WidgetControl, focusHook: any
   }, [elem, props.focusHook])
 
   return <article
-    className={"WidgetCard " + props.widget.constructor.name}
+    className={"WidgetCard " + props.widget.typename()}
     ref={elem}
   >
     <h1>

src/components/CalendarWidget.tsx

@@ -1,7 +1,7 @@
+import "./CalendarWidget.css"
 import { useState } from "react"
 import { FacadeExtern } from "../backend"
 import { useExtern, useExternOr } from "../extern"
-import "./CalendarWidget.css"
 import { WidgetControl, Widget } from "./Widget"
 import { dateRange, shortdate, today } from "../util/calendar"
 import { FileWidget } from "./FileWidget"
@@ -76,4 +76,8 @@ export class CalendarWidget implements Widget {
       </>
     ]
   }
+
+  typename(): string {
+      return "CalendarWidget"
+  }
 }

src/components/ConfigWidget.tsx

@@ -14,4 +14,8 @@ export class ConfigWidget implements Widget {
       </>,
     ]
   }
+
+  typename(): string {
+      return "ConfigWidget"
+  }
 }

src/components/FileWidget.tsx

@@ -66,4 +66,8 @@ export class FileWidget implements Widget {
       </>,
     ]
   }
+
+  typename(): string {
+      return "FileWidget"
+  }
 }

src/components/Widget.tsx

@@ -18,10 +18,11 @@ export interface WidgetControl extends SiteControl {
 }
 
 export interface Widget {
+  typename(): string
   show(ctl: WidgetControl): [JSX.Element, JSX.Element]
 }
 
 // Get a string that fully represents the contents of the widget
 export function widgetToString(w: Widget) {
-  return w.constructor.name + ":" + JSON.stringify(w)
+  return w.typename() + ":" + JSON.stringify(w)
 }