fix(react): usage of mui.Tooltip caused an exception

There was this unnecessary GenericComponent wrapper around each component that weren't creating any
own elements, but just returning the element created by the wrapped component.

Author: slisson

react-ssr-client/src/components/Base.tsx

@@ -1,4 +1,4 @@
-import React, {Attributes} from 'react'
+import React from 'react'
 import {IViewModel} from "../ViewModel.ts";
 
 export interface IComponent extends IComponentContainer {
@@ -21,21 +21,6 @@ export interface IComponentWrapper {
     component: IComponent
 }
 
-export abstract class ComponentBase<S = {}, SS = any> extends React.Component<IComponentWrapper, S, SS>  {
-    protected renderChildComponents(): (JSX.Element | string)[] {
-        return renderChildComponents(this.props.component)
-    }
-}
-
-function convertComponent(component: IComponent): IComponent {
-    const convertedProps = jsonToProps(component.properties)
-    if (convertedProps === component.properties) return component
-    return {
-        ...component,
-        properties: convertedProps
-    }
-}
-
 function jsonToProps(json: Record<string, any> | undefined): Record<string, any> | undefined {
     if (json === undefined) return json;
 
@@ -63,20 +48,21 @@ function jsonToProps(json: Record<string, any> | undefined): Record<string, any>
     return result
 }
 
-export function createComponentFromJson(component: IComponent | string) {
+export function createComponentFromJson(component: IComponent | string): React.ReactNode {
     if (typeof component == "string") {
         return component
     } else {
         const renderer = componentConstructors.get(component.type);
         if (renderer) {
-            return React.createElement(renderer, { component: convertComponent(component), key: component.key } as IComponentWrapper & Attributes)
+            let convertedProps = jsonToProps(component.properties) ?? {}
+            return React.createElement(renderer, { ...convertedProps, key: component.key }, ...renderChildComponents(component))
         } else {
             return (<span>Unknown component type: "{component.type}"</span>);
         }
     }
 }
 
-function renderChildComponents(parent: IComponentContainer) {
+function renderChildComponents(parent: IComponentContainer): React.ReactNode[] {
     if (parent.children) {
         return parent.children.map(componentData => createComponentFromJson(componentData.component ?? componentData.text!!));
     } else {
@@ -88,13 +74,6 @@ export function renderViewModel(model: IViewModel) {
     return <div>{renderChildComponents(model)}</div>
 }
 
-export class ViewModelRenderer extends React.Component<{ model: IViewModel }> {
-
-    render() {
-        return <>{renderChildComponents(this.props.model)}</>;
-    }
-}
-
 export const componentConstructors: Map<string, any> = new Map();
 
 export function registerComponentConstructor(type: string, ctor: any) {

react-ssr-client/src/components/DefaultComponents.ts

@@ -1,7 +1,6 @@
-import {componentConstructors, IComponentWrapper, registerComponentConstructor} from "./Base.tsx";
+import {componentConstructors, registerComponentConstructor} from "./Base.tsx";
 import * as mui from "@mui/material";
 import * as icons from "@mui/icons-material";
-import {GenericComponent} from "./GenericComponent.tsx";
 import { DataGrid } from '@mui/x-data-grid';
 import Grid2 from "@mui/material/Unstable_Grid2"
 import { SimpleTreeView, RichTreeView, TreeItem, TreeItem2 } from '@mui/x-tree-view';
@@ -58,45 +57,37 @@ const svgTagList = [
     "view",
 ]
 
-export function registerGenericComponent(id: string, elementType: any) {
-    registerComponentConstructor(id, class extends GenericComponent {
-        constructor(props: IComponentWrapper) {
-            super(elementType, props);
-        }
-    });
-}
-
 export function registerDefaultComponents() {
     for (const tagName of htmlTagList) {
-        registerGenericComponent("html." + tagName, tagName)
+        registerComponentConstructor("html." + tagName, tagName)
     }
 
     for (const tagName of svgTagList) {
-        registerGenericComponent("svg." + tagName, tagName)
+        registerComponentConstructor("svg." + tagName, tagName)
     }
 
     for (const id in mui) {
         if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerGenericComponent("mui." + id, (mui as any)[id])
+        registerComponentConstructor("mui." + id, (mui as any)[id])
     }
 
     for (const id in icons) {
         if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerGenericComponent("mui.icons." + id, (icons as any)[id])
+        registerComponentConstructor("mui.icons." + id, (icons as any)[id])
     }
 
-    registerGenericComponent("mui.DataGrid", DataGrid)
-    registerGenericComponent("mui.Grid2", Grid2)
-    registerGenericComponent("mui.SimpleTreeView", SimpleTreeView)
-    registerGenericComponent("mui.RichTreeView", RichTreeView)
-    registerGenericComponent("mui.TreeItem", TreeItem)
-    registerGenericComponent("mui.TreeItem2", TreeItem2)
-    registerGenericComponent("modelix.Dropdown", Dropdown)
-    registerGenericComponent("modelix.ReferenceTargetChooser", ReferenceTargetChooser)
-    registerGenericComponent("modelix.TextField", ModelixTextField)
-    registerGenericComponent("modelix.Spreadsheet", ModelixSpreadsheet)
-    registerGenericComponent("modelix.TextEditor", ModelixTextEditor)
-    registerGenericComponent("modelix.ImageBasedEditor", ModelixImageBasedEditor)
+    registerComponentConstructor("mui.DataGrid", DataGrid)
+    registerComponentConstructor("mui.Grid2", Grid2)
+    registerComponentConstructor("mui.SimpleTreeView", SimpleTreeView)
+    registerComponentConstructor("mui.RichTreeView", RichTreeView)
+    registerComponentConstructor("mui.TreeItem", TreeItem)
+    registerComponentConstructor("mui.TreeItem2", TreeItem2)
+    registerComponentConstructor("modelix.Dropdown", Dropdown)
+    registerComponentConstructor("modelix.ReferenceTargetChooser", ReferenceTargetChooser)
+    registerComponentConstructor("modelix.TextField", ModelixTextField)
+    registerComponentConstructor("modelix.Spreadsheet", ModelixSpreadsheet)
+    registerComponentConstructor("modelix.TextEditor", ModelixTextEditor)
+    registerComponentConstructor("modelix.ImageBasedEditor", ModelixImageBasedEditor)
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", window.location + "../../../known-components", true);