Upgrade to react 18

Directory.Build.props

@@ -4,7 +4,7 @@
     <Platforms>x64;ARM64</Platforms>
     <AssemblyVersion>2.0.0.0</AssemblyVersion>
     <FileVersion>2.0.0.0</FileVersion>
-    <Version>2.120.2</Version>
+    <Version>2.124.0</Version>
     <Authors>OutSystems</Authors>
     <Product>ReactView</Product>
     <Copyright>Copyright © OutSystems 2023</Copyright>

ReactViewControl/ReactViewControl.csproj

@@ -10,6 +10,7 @@
     <UseWpf>true</UseWpf>
     <TargetsForTfmSpecificBuildOutput>$(TargetsForTfmSpecificBuildOutput);CopyProjectReferencesToPackage</TargetsForTfmSpecificBuildOutput>
     <Configurations>Debug;Release;ReleaseAvalonia;ReleaseWPF</Configurations>
+    <EnableWindowsTargeting>true</EnableWindowsTargeting>
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(Configuration)' == 'ReleaseWPF'">

ReactViewResources/Loader/Bootstrap.ts

@@ -29,11 +29,12 @@ async function loadFramework(view: ViewMetadata): Promise<void> {
     const externalLibsPath = libsPath + "node_modules/";
 
     await loadScript(externalLibsPath + "prop-types/prop-types.min.js", view); /* Prop-Types */
-    await loadScript(externalLibsPath + "react/umd/react.production.min.js", view); /* React */
-    await loadScript(externalLibsPath + "react-dom/umd/react-dom.production.min.js", view); /* ReactDOM */
-
+    await loadScript(externalLibsPath + "react/umd/react.development.js", view); /* React */
+    await loadScript(externalLibsPath + "react-dom/umd/react-dom.development.js", view); /* ReactDOM */
+    
     define("react", [], () => window[reactLib]);
     define("react-dom", [], () => window[reactDOMLib]);
+    define("react-dom/client", [], () => window[reactDOMLib]);
 }
 
 bootstrap();

ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { PropsWithChildren, useState, useEffect } from "react";
+
+export interface IComponentWithMountCallbackProps {
+    mounted?(): void;
+}
+
+export function ComponentWithMountCallback({ mounted, children }: PropsWithChildren<IComponentWithMountCallbackProps>): JSX.Element | null {
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+        mounted?.();
+    }, []);
+
+    return isMounted ? <React.Fragment key={"asd"}>{children}</React.Fragment> : null;
+}

ReactViewResources/Loader/Internal/ComponentsRenderCache.ts

@@ -34,8 +34,9 @@ export function storeViewRenderInCache(view: ViewMetadata, cacheEntry: IRenderCa
     // cache view html for further use
     const elementHtml = view.root!.innerHTML;
     // get all stylesheets except the sticky ones (which will be loaded by the time the html gets rendered) otherwise we could be loading them twice
-    const stylesheets = getStylesheets(view.head!).filter(l => l.dataset.sticky !== "true").map(l => l.outerHTML).join("");
-
+
+    const stylesheets = getStylesheets(view.root!).filter(l => l.dataset.sticky !== "true").map(l => l.outerHTML).join("");
+
     // the remaining code can be executed afterwards
     return new Promise<void>(() => {
         // insert rendered html into the cache

ReactViewResources/Loader/Internal/Loader.View.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
 import { ViewMetadataContext } from "../Internal/ViewMetadataContext";
 import { PluginsContext, PluginsContextHolder } from "../Public/PluginsContext";
 import { formatUrl, ResourceLoader } from "../Public/ResourceLoader";
@@ -8,6 +8,7 @@ import { notifyViewDestroyed, notifyViewInitialized } from "./NativeAPI";
 import { ViewMetadata } from "./ViewMetadata";
 import { ViewPortalsCollection } from "./ViewPortalsCollection";
 import { addView, deleteView } from "./ViewsCollection";
+import { ComponentWithMountCallback } from "./ComponentWithMountCallback";
 
 export function createView(componentClass: any, properties: {}, view: ViewMetadata, componentName: string) {
     componentClass.contextType = PluginsContext;
@@ -30,7 +31,15 @@ export function createView(componentClass: any, properties: {}, view: ViewMetada
 }
 
 export function renderMainView(children: React.ReactElement, container: Element) {
-    return new Promise<void>(resolve => ReactDOM.hydrate(children, container, resolve));
+    return new Promise<void>(resolve => {
+        const childrenWithRenderCallback = (
+            <ComponentWithMountCallback key={"ooodd"} mounted={resolve}>
+                {children}
+            </ComponentWithMountCallback>
+        );
+
+        ReactDOMClient.hydrateRoot(container, childrenWithRenderCallback);
+    });
 }
 
 function onChildViewAdded(childView: ViewMetadata) {

ReactViewResources/Loader/Internal/ResourcesLoader.ts

@@ -29,10 +29,10 @@ export function loadScript(scriptSrc: string, view: ViewMetadata): Promise<void>
                 resolve();
             });
 
-        if (!view.head) {
+        if (!view.root) {
             throw new Error(`View ${view.name} head is not set`);
         }
-        view.head.appendChild(script);
+        view.root.appendChild(script);
     });
 }
 

ReactViewResources/Loader/Internal/ViewPortal.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { webViewRootId } from "../Internal/Environment";
 import { getStylesheets } from "./Common";
 import { ViewMetadata } from "./ViewMetadata";
@@ -8,7 +9,7 @@ export type ViewLifecycleEventHandler = (view: ViewMetadata) => void;
 export type ViewErrorHandler = (view: ViewMetadata, error: Error) => void;
 
 export interface IViewPortalProps {
-    view: ViewMetadata
+    view: ViewMetadata;
     viewMounted: ViewLifecycleEventHandler;
     viewUnmounted: ViewLifecycleEventHandler;
     viewErrorRaised: ViewErrorHandler;
@@ -27,12 +28,10 @@ interface IViewPortalState {
  * A view portal is persisted until its View Frame counterpart disappears.
  * */
 export class ViewPortal extends React.Component<IViewPortalProps, IViewPortalState> {
-
-    private head: Element;
     private shadowRoot: HTMLElement;
 
-    constructor(props: IViewPortalProps, context: any) {
-        super(props, context);
+    constructor(props: IViewPortalProps) {
+        super(props);
 
         this.state = { component: null! };
 
@@ -56,16 +55,15 @@ export class ViewPortal extends React.Component<IViewPortalProps, IViewPortalSta
     }
 
     public componentDidMount() {
-        this.props.view.head = this.head;
-
         const styleResets = document.createElement("style");
+        styleResets.media = "text/css";
         styleResets.innerHTML = ":host { all: initial; display: block; }";
 
-        this.head.appendChild(styleResets);
+        this.shadowRoot.appendChild(styleResets);
 
         // get sticky stylesheets
         const stylesheets = getStylesheets(document.head).filter(s => s.dataset.sticky === "true");
-        stylesheets.forEach(s => this.head.appendChild(document.importNode(s, true)));
+        stylesheets.forEach(s => this.shadowRoot.appendChild(document.importNode(s, true)));
 
         this.props.viewMounted(this.props.view);
     }
@@ -81,15 +79,9 @@ export class ViewPortal extends React.Component<IViewPortalProps, IViewPortalSta
 
     public render(): React.ReactNode {
         return ReactDOM.createPortal(
-            <>
-                <head ref={e => this.head = e!}>
-                </head>
-                <body>
-                    <div id={webViewRootId} ref={e => this.props.view.root = e!}>
-                        {this.state.component ? this.state.component : null}
-                    </div>
-                </body>
-            </>,
+            <div id={webViewRootId} key={"fdsdfsdf"} ref={e => this.props.view.root = e!}>
+                {this.state.component ? this.state.component : null}
+            </div>,
             this.shadowRoot);
     }
-}
+}

ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx

@@ -17,8 +17,8 @@ interface IViewPortalsCollectionProps {
  * */
 export class ViewPortalsCollection extends React.Component<IViewPortalsCollectionProps> {
 
-    constructor(props: IViewPortalsCollectionProps, context: any) {
-        super(props, context);
+    constructor(props: IViewPortalsCollectionProps) {
+        super(props);
         props.views.addChangedListener(() => this.forceUpdate());
     }
 
@@ -28,7 +28,8 @@ export class ViewPortalsCollection extends React.Component<IViewPortalsCollectio
 
     private renderViewPortal(view: ViewMetadata) {
         return (
-            <ViewPortal key={view.name}
+            <ViewPortal
+                key={view.name}
                 view={view}
                 viewMounted={this.props.viewAdded}
                 viewUnmounted={this.props.viewRemoved}

ReactViewResources/Loader/Loader.ts

@@ -141,10 +141,9 @@ export function loadComponent(
                 return; // view was probably unloaded
             }
 
-            const head = view.head;
             const rootElement = view.root;
 
-            if (!rootElement || !head) {
+            if (!rootElement) {
                 throw new Error(`View ${view.name} head or root is not set`);
             }
 
@@ -158,7 +157,7 @@ export function loadComponent(
 
             // load component dependencies js sources and css sources
             const dependencyLoadPromises = dependencySources.map(s => loadScript(s, view) as Promise<any>)
-                .concat(cssSources.map(s => loadStyleSheet(s, head, false)));
+                .concat(cssSources.map(s => loadStyleSheet(s, rootElement, false)));
             await Promise.all(dependencyLoadPromises);
 
             // main component script should be the last to be loaded, otherwise errors might occur

ReactViewResources/ReactViewResources.csproj

@@ -5,6 +5,7 @@
     <AssemblyVersion>2.0.0.0</AssemblyVersion>
     <FileVersion>2.0.0.0</FileVersion>
     <Configurations>Debug;Release;ReleaseAvalonia;ReleaseWPF</Configurations>
+    <EnableWindowsTargeting>true</EnableWindowsTargeting>
   </PropertyGroup>
 
   <ItemGroup>
@@ -102,10 +103,12 @@
 
   <ItemGroup>
     <EmbeddedResource Include="node_modules\react\umd\react.production.min.js" />
+    <EmbeddedResource Include="node_modules\react\umd\react.development.js" />
   </ItemGroup>
 
   <ItemGroup>
     <EmbeddedResource Include="node_modules\react-dom\umd\react-dom.production.min.js" />
+    <EmbeddedResource Include="node_modules\react-dom\umd\react-dom.development.js" />
   </ItemGroup>
 
   <ItemGroup>