diff --git a/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx b/ReactViewResources/Loader/Internal/ComponentWithMountCallback.tsx index 3e3ac68f..40b4a74f 100644 --- 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): JSX.Element { +export function ComponentWithMountCallback({ mounted, children }: PropsWithChildren): 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 index 19dc2c35..f3932ae2 100644 --- 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(() => { diff --git a/ReactViewResources/Loader/Internal/ResourcesLoader.ts b/ReactViewResources/Loader/Internal/ResourcesLoader.ts index a97e4de1..4d36e34e 100644 --- a/ReactViewResources/Loader/Internal/ResourcesLoader.ts +++ b/ReactViewResources/Loader/Internal/ResourcesLoader.ts @@ -29,10 +29,10 @@ export function loadScript(scriptSrc: string, view: ViewMetadata): Promise 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 index 006cd493..0e9f1757 100644 --- 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 { - - private head: Element; private shadowRoot: HTMLElement; constructor(props: IViewPortalProps) { @@ -57,16 +55,14 @@ export class ViewPortal extends React.Component 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 - this.head = e!}> - - -
this.props.view.root = e!}> - {this.state.component ? this.state.component : null} -
- - , +
this.props.view.root = e!}> + {this.state.component ? this.state.component : null} +
, this.shadowRoot); } -} \ No newline at end of file +} diff --git a/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx b/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx index 6a027f34..92ad1b04 100644 --- a/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx +++ b/ReactViewResources/Loader/Internal/ViewPortalsCollection.tsx @@ -36,7 +36,12 @@ export class ViewPortalsCollection extends React.Component 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))} + + ); } } \ No newline at end of file diff --git a/ReactViewResources/Loader/Loader.ts b/ReactViewResources/Loader/Loader.ts index 0e4ff86d..e0fa9354 100644 --- 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) - .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 index 178ba385..341f602c 100644 --- a/Sample.Avalonia/TaskListView/TaskListView.tsx +++ b/Sample.Avalonia/TaskListView/TaskListView.tsx @@ -97,12 +97,10 @@ export default class TaskListView extends React.Componenthello; - - // return ( - //
- // {this.renderItems()} - //
- // ); + return ( +
+ {this.renderItems()} +
+ ); } }