Remove head from shadow doms

OutSystems · Feb 16, 2024 · 7e0bce8 · 7e0bce8
1 parent 35b04c6
commit 7e0bce8
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 33 deletions.
diff --git a/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx b/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx
@@ -5,12 +5,12 @@ export interface IComponentWithMountCallbackProps {
     mounted?(): void;
 }
 
-export function ComponentWithMountCallback({ mounted, children }: PropsWithChildren<IComponentWithMountCallbackProps>): JSX.Element {
+export function ComponentWithMountCallback({ mounted, children }: PropsWithChildren<IComponentWithMountCallbackProps>): JSX.Element | null {
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         setIsMounted(true);
         mounted?.();
     }, []);
 
-    return isMounted ? <>{children}</> : <></>;
+    return isMounted ? <>{children}</> : null;
 }
diff --git a/ReactViewResources/Loader/Internal/ComponentsRenderCache.ts b/ReactViewResources/Loader/Internal/ComponentsRenderCache.ts
@@ -34,7 +34,7 @@ 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>(() => {

diff --git a/ReactViewResources/Loader/Internal/ResourcesLoader.ts b/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);
     });
 }
 

diff --git a/ReactViewResources/Loader/Internal/ViewPortal.tsx b/ReactViewResources/Loader/Internal/ViewPortal.tsx
@@ -28,8 +28,6 @@ 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) {
@@ -57,16 +55,14 @@ export class ViewPortal extends React.Component<IViewPortalProps, IViewPortalSta
     }
 
     public componentDidMount() {
-        this.props.view.head = this.head;
-
         const styleResets = document.createElement("style");
         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);
     }
@@ -82,15 +78,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} ref={e => this.props.view.root = e!}>
+                {this.state.component ? this.state.component : null}
+            </div>,
             this.shadowRoot);
     }
-}
+}
diff --git a/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx b/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx
@@ -36,7 +36,12 @@ export class ViewPortalsCollection extends React.Component<IViewPortalsCollectio
         );
     }
 
-    public render(): React.ReactNode {
-        return this.props.views.items.sort((a, b) => a.name.localeCompare(b.name)).map(view => this.renderViewPortal(view));
+    public render(): JSX.Element | null {
+        return (
+            <>
+                {this.props.views.items.sort((a, b) => a.name.localeCompare(b.name))
+                    .map(view => this.renderViewPortal(view))}
+            </>
+        );
     }
 }
diff --git a/ReactViewResources/Loader/Loader.ts b/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

diff --git a/Sample.Avalonia/TaskListView/TaskListView.tsx b/Sample.Avalonia/TaskListView/TaskListView.tsx
@@ -97,12 +97,10 @@ export default class TaskListView extends React.Component<ITaskListViewPropertie
     }
 
     public render(): JSX.Element {
-        return <>hello</>;
-
-        // return (
-        //     <div className="wrapper">
-        //         {this.renderItems()}
-        //     </div>
-        // );
+        return (
+            <div className="wrapper">
+                {this.renderItems()}
+            </div>
+        );
     }
 }