@opensumi/ide-core-browser 3.2.6-next-1725007925.0 → 3.3.0

package/src/components/resize/resize.tsx

@@ -1,6 +1,10 @@
 import cls from 'classnames';
 import React from 'react';
 
+import { IDisposable } from '@opensumi/ide-core-common';
+
+import { fastdom } from '../../dom';
+
 import styles from './resize.module.less';
 
 export const RESIZE_LOCK = 'resize-lock';
@@ -45,6 +49,8 @@ export interface IResizeHandleDelegate {
 export function preventWebviewCatchMouseEvents() {
   const iframes = document.getElementsByTagName('iframe');
   const webviews = document.getElementsByTagName('webview');
+  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
+
   for (const webview of webviews as unknown as HTMLElement[]) {
     webview.classList.add('none-pointer-event');
   }
@@ -52,7 +58,6 @@ export function preventWebviewCatchMouseEvents() {
     iframe.classList.add('none-pointer-event');
   }
 
-  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
   for (const host of shadowRootHost as unknown as HTMLElement[]) {
     host?.classList.add('none-pointer-event');
   }
@@ -61,6 +66,8 @@ export function preventWebviewCatchMouseEvents() {
 export function allowWebviewCatchMouseEvents() {
   const iframes = document.getElementsByTagName('iframe');
   const webviews = document.getElementsByTagName('webview');
+  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
+
   for (const webview of webviews as unknown as HTMLElement[]) {
     webview.classList.remove('none-pointer-event');
   }
@@ -68,7 +75,6 @@ export function allowWebviewCatchMouseEvents() {
     iframe.classList.remove('none-pointer-event');
   }
 
-  const shadowRootHost = document.getElementsByClassName('shadow-root-host');
   for (const host of shadowRootHost as unknown as HTMLElement[]) {
     host?.classList.remove('none-pointer-event');
   }
@@ -82,16 +88,18 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
   const startNextWidth = React.useRef<number>(0);
   const prevElement = React.useRef<HTMLElement | null>();
   const nextElement = React.useRef<HTMLElement | null>();
-  const requestFrame = React.useRef<number>();
+  const requestFrameToDispose = React.useRef<IDisposable>();
 
   const setSize = (prev: number, next: number) => {
-    const parentWidth = ref.current!.parentElement!.offsetWidth;
     const prevEle = props.findPrevElement ? props.findPrevElement() : prevElement.current!;
     const nextEle = props.findNextElement ? props.findNextElement() : nextElement.current!;
 
     if ((prevEle && prevEle.classList.contains(RESIZE_LOCK)) || (nextEle && nextEle.classList.contains(RESIZE_LOCK))) {
       return;
     }
+
+    const parentWidth = ref.current!.parentElement!.offsetWidth;
+
     const prevMinResize = Number(prevEle?.dataset.minResize || 0);
     const nextMinResize = Number(nextEle?.dataset.minResize || 0);
 
@@ -107,6 +115,7 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
         return;
       }
     }
+
     if (nextEle) {
       nextEle.style.width = next * 100 + '%';
     }
@@ -245,32 +254,39 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
   };
 
   const setAbsoluteSize = (size: number, isLatter?: boolean) => {
-    const currentPrev = prevElement.current!.clientWidth;
-    const currentNext = nextElement.current!.clientWidth;
-    const totalSize = currentPrev + currentNext;
-    if (props.flexMode) {
-      const prevWidth = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
-      const nextWidth = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
-      flexModeSetSize(prevWidth, nextWidth, true);
-    } else {
-      const currentTotalWidth =
-        +nextElement.current!.style.width!.replace('%', '') + +prevElement.current!.style.width!.replace('%', '');
-      if (isLatter) {
-        nextElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
-        prevElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
-      } else {
-        prevElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
-        nextElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
-      }
-    }
-    if (isLatter) {
-      handleZeroSize(totalSize - size, size);
-    } else {
-      handleZeroSize(size, totalSize - size);
-    }
-    if (props.onResize) {
-      props.onResize(prevElement.current!, nextElement.current!);
-    }
+    fastdom.measure(() => {
+      const currentPrev = prevElement.current!.clientWidth;
+      const currentNext = nextElement.current!.clientWidth;
+
+      const nextTotolWidth = +nextElement.current!.style.width!.replace('%', '');
+      const prevTotalWidth = +prevElement.current!.style.width!.replace('%', '');
+      fastdom.mutate(() => {
+        const totalSize = currentPrev + currentNext;
+        if (props.flexMode) {
+          const prevWidth = props.flexMode === ResizeFlexMode.Prev ? size : totalSize - size;
+          const nextWidth = props.flexMode === ResizeFlexMode.Next ? size : totalSize - size;
+          flexModeSetSize(prevWidth, nextWidth, true);
+        } else {
+          const currentTotalWidth = nextTotolWidth + prevTotalWidth;
+
+          if (isLatter) {
+            nextElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
+            prevElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
+          } else {
+            prevElement.current!.style.width = currentTotalWidth * (size / totalSize) + '%';
+            nextElement.current!.style.width = currentTotalWidth * (1 - size / totalSize) + '%';
+          }
+        }
+        if (isLatter) {
+          handleZeroSize(totalSize - size, size);
+        } else {
+          handleZeroSize(size, totalSize - size);
+        }
+        if (props.onResize) {
+          props.onResize(prevElement.current!, nextElement.current!);
+        }
+      });
+    });
   };
 
   const getAbsoluteSize = (isLatter?: boolean) => {
@@ -303,43 +319,57 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
     }
     const prevWidth = startPrevWidth.current + e.pageX - startX.current;
     const nextWidth = startNextWidth.current - (e.pageX - startX.current);
-    if (requestFrame.current) {
-      window.cancelAnimationFrame(requestFrame.current);
+    if (requestFrameToDispose.current) {
+      requestFrameToDispose.current.dispose();
     }
-    const parentWidth = ref.current!.parentElement!.offsetWidth;
-    requestFrame.current = window.requestAnimationFrame(() => {
+
+    requestFrameToDispose.current = fastdom.mutate(() => {
       if (props.flexMode) {
         flexModeSetSize(prevWidth, nextWidth);
       } else {
+        const parentWidth = ref.current!.parentElement!.offsetWidth;
         setSize(prevWidth / parentWidth, nextWidth / parentWidth);
       }
     });
   };
-  const onMouseUp = (e) => {
+  const onMouseUp = () => {
     resizing.current = false;
-    ref.current?.classList.remove(styles.active);
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
-    // 结束拖拽时恢复拖拽区域滚动条
-    restoreScrollBar(prevElement.current!);
-    restoreScrollBar(nextElement.current!);
+
     if (props.onFinished) {
       props.onFinished();
     }
-    allowWebviewCatchMouseEvents();
+
+    fastdom.mutate(() => {
+      ref.current?.classList.remove(styles.active);
+
+      // 结束拖拽时恢复拖拽区域滚动条
+      restoreScrollBar(prevElement.current!);
+      restoreScrollBar(nextElement.current!);
+
+      allowWebviewCatchMouseEvents();
+    });
   };
   const onMouseDown = (e) => {
     resizing.current = true;
-    ref.current?.classList.add(styles.active);
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
     startX.current = e.pageX;
-    startPrevWidth.current = prevElement.current!.offsetWidth;
-    startNextWidth.current = nextElement.current!.offsetWidth;
-    // 开始拖拽时隐藏拖拽区域滚动条
-    hideScrollBar(prevElement.current!);
-    hideScrollBar(nextElement.current!);
-    preventWebviewCatchMouseEvents();
+
+    fastdom.measure(() => {
+      startPrevWidth.current = prevElement.current!.offsetWidth;
+      startNextWidth.current = nextElement.current!.offsetWidth;
+
+      fastdom.mutate(() => {
+        ref.current?.classList.add(styles.active);
+
+        // 开始拖拽时隐藏拖拽区域滚动条
+        hideScrollBar(prevElement.current!);
+        hideScrollBar(nextElement.current!);
+        preventWebviewCatchMouseEvents();
+      });
+    });
   };
 
   React.useEffect(() => {
@@ -395,7 +425,6 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
   const cachedPrevElement = React.useRef<HTMLElement>();
   const cachedNextElement = React.useRef<HTMLElement>();
 
-  const requestFrame = React.useRef<number>();
   // direction: true 为向下，false 为向上
   const setSize = (prev: number, next: number, direction?: boolean) => {
     const prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current!;
@@ -465,7 +494,6 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
     let currentTotalHeight;
     if (props.flexMode) {
       currentTotalHeight = ((prevEle.offsetHeight + nextEle.offsetHeight) / prevEle.parentElement!.offsetHeight) * 100;
-      // flexModeSetSize(prev / (prev + next) * totalHeight, next / (prev + next) * totalHeight, true);
     } else {
       currentTotalHeight = +nextEle.style.height!.replace('%', '') + +prevEle.style.height!.replace('%', '');
     }
@@ -584,15 +612,21 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
 
   const onMouseDown = (e) => {
     resizing.current = true;
-    ref.current?.classList.add(styles.active);
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
     startY.current = e.pageY;
     cachedNextElement.current = nextElement.current;
     cachedPrevElement.current = prevElement.current;
-    startPrevHeight.current = prevElement.current!.offsetHeight;
-    startNextHeight.current = nextElement.current!.offsetHeight;
-    preventWebviewCatchMouseEvents();
+
+    fastdom.measure(() => {
+      startPrevHeight.current = prevElement.current!.offsetHeight;
+      startNextHeight.current = nextElement.current!.offsetHeight;
+
+      fastdom.mutate(() => {
+        ref.current?.classList.add(styles.active);
+        preventWebviewCatchMouseEvents();
+      });
+    });
   };
 
   const onMouseMove = (e: MouseEvent) => {
@@ -600,32 +634,30 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
     if (ref.current && ref.current.classList.contains('no-resize')) {
       return;
     }
-    const direction = e.pageY > startY.current;
-    // 若上层未传入findNextElement，dynamicNext为null，否则找不到符合要求的panel时返回undefined
-    const dynamicNext = props.findNextElement ? props.findNextElement(direction) : null;
-    const dynamicPrev = props.findPrevElement ? props.findPrevElement(direction) : null;
-    // 作用元素变化重新初始化当前位置，传入findNextElement时默认已传入findPrevElement
-    if (
-      (dynamicNext !== null && cachedNextElement.current !== dynamicNext) ||
-      (dynamicPrev !== null && cachedPrevElement.current !== dynamicPrev)
-    ) {
-      if (!dynamicNext || !dynamicPrev) {
-        return;
+
+    fastdom.measure(() => {
+      const direction = e.pageY > startY.current;
+      // 若上层未传入findNextElement，dynamicNext为null，否则找不到符合要求的panel时返回undefined
+      const dynamicNext = props.findNextElement ? props.findNextElement(direction) : null;
+      const dynamicPrev = props.findPrevElement ? props.findPrevElement(direction) : null;
+      // 作用元素变化重新初始化当前位置，传入findNextElement时默认已传入findPrevElement
+      if (
+        (dynamicNext !== null && cachedNextElement.current !== dynamicNext) ||
+        (dynamicPrev !== null && cachedPrevElement.current !== dynamicPrev)
+      ) {
+        if (!dynamicNext || !dynamicPrev) {
+          return;
+        }
+        cachedNextElement.current = dynamicNext!;
+        cachedPrevElement.current = dynamicPrev!;
+        startY.current = e.pageY;
+        startPrevHeight.current = cachedPrevElement.current!.offsetHeight;
+        startNextHeight.current = cachedNextElement.current!.offsetHeight;
       }
-      cachedNextElement.current = dynamicNext!;
-      cachedPrevElement.current = dynamicPrev!;
-      startY.current = e.pageY;
-      startPrevHeight.current = cachedPrevElement.current!.offsetHeight;
-      startNextHeight.current = cachedNextElement.current!.offsetHeight;
-    }
 
-    const prevHeight = startPrevHeight.current + e.pageY - startY.current;
-    const nextHeight = startNextHeight.current - (e.pageY - startY.current);
-    if (requestFrame.current) {
-      window.cancelAnimationFrame(requestFrame.current);
-    }
+      const prevHeight = startPrevHeight.current + e.pageY - startY.current;
+      const nextHeight = startNextHeight.current - (e.pageY - startY.current);
 
-    requestFrame.current = window.requestAnimationFrame(() => {
       const prevMinResize = Number(cachedPrevElement.current!.dataset.minResize || 0);
       const nextMinResize = Number(cachedNextElement.current!.dataset.minResize || 0);
       if (prevMinResize || nextMinResize) {
@@ -633,26 +665,32 @@ export const ResizeHandleVertical = (props: ResizeHandleProps) => {
           return;
         }
       }
-      if (props.flexMode === ResizeFlexMode.Prev || props.flexMode === ResizeFlexMode.Next) {
-        flexModeSetSize(prevHeight, nextHeight);
-      } else if (props.flexMode === ResizeFlexMode.Percentage) {
-        const parentHeight = ref.current!.parentElement!.offsetHeight;
-        setSize(prevHeight / parentHeight, nextHeight / parentHeight);
-      } else {
-        setDomSize(prevHeight, nextHeight, cachedPrevElement.current!, cachedNextElement.current!);
-      }
+
+      fastdom.mutate(() => {
+        if (props.flexMode === ResizeFlexMode.Prev || props.flexMode === ResizeFlexMode.Next) {
+          flexModeSetSize(prevHeight, nextHeight);
+        } else if (props.flexMode === ResizeFlexMode.Percentage) {
+          const parentHeight = ref.current!.parentElement!.offsetHeight;
+          setSize(prevHeight / parentHeight, nextHeight / parentHeight);
+        } else {
+          setDomSize(prevHeight, nextHeight, cachedPrevElement.current!, cachedNextElement.current!);
+        }
+      });
     });
   };
 
   const onMouseUp = (e) => {
     resizing.current = false;
-    ref.current?.classList.remove(styles.active);
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
-    if (props.onFinished) {
-      props.onFinished();
-    }
-    allowWebviewCatchMouseEvents();
+
+    fastdom.mutate(() => {
+      ref.current?.classList.remove(styles.active);
+      if (props.onFinished) {
+        props.onFinished();
+      }
+      allowWebviewCatchMouseEvents();
+    });
   };
 
   React.useEffect(() => {

package/src/dom/fastdom.ts

@@ -0,0 +1,110 @@
+import { Heap, IDisposable, onUnexpectedError } from '@opensumi/ide-utils';
+
+class DomOperation {
+  private _disposed = false;
+
+  constructor(protected _runner: () => void, public priority: number) {}
+
+  run() {
+    if (this._disposed) {
+      return;
+    }
+
+    try {
+      this._runner();
+    } catch (error) {
+      onUnexpectedError(error);
+    }
+  }
+
+  dispose() {
+    this._disposed = true;
+  }
+}
+
+const aQueue = new Heap<DomOperation>({
+  comparator: (a, b) => b.priority - a.priority,
+});
+
+const bQueue = new Heap<DomOperation>({
+  comparator: (a, b) => b.priority - a.priority,
+});
+
+let runningQueue = aQueue;
+let nextQueue = bQueue;
+
+function swapQueue() {
+  if (runningQueue === aQueue) {
+    runningQueue = bQueue;
+    nextQueue = aQueue;
+  } else {
+    runningQueue = aQueue;
+    nextQueue = bQueue;
+  }
+}
+
+let currentFlushHandle: number | undefined;
+let inAnimationFrame = false;
+
+function flush() {
+  currentFlushHandle = undefined;
+
+  inAnimationFrame = true;
+
+  swapQueue();
+
+  while (runningQueue.size > 0) {
+    const op = runningQueue.pop()!;
+    op.run();
+  }
+
+  inAnimationFrame = false;
+}
+
+function schedule() {
+  if (currentFlushHandle) {
+    return;
+  }
+
+  currentFlushHandle = requestAnimationFrame(flush);
+}
+
+/**
+ * 如果当前在动画帧中，将操作加入当前队列，否则加入下一帧队列
+ */
+function runAtThisOrScheduleAtNext(op: DomOperation) {
+  if (inAnimationFrame) {
+    runningQueue.add(op);
+  } else {
+    nextQueue.add(op);
+  }
+}
+
+function measure(fn: () => void): IDisposable {
+  const op = new DomOperation(fn, 10000);
+  runAtThisOrScheduleAtNext(op);
+  schedule();
+  return op;
+}
+
+function mutate(fn: () => void): IDisposable {
+  const op = new DomOperation(fn, -10000);
+  runAtThisOrScheduleAtNext(op);
+  schedule();
+  return op;
+}
+
+function measureAtNextFrame(fn: () => void): IDisposable {
+  const op = new DomOperation(fn, 10000);
+  nextQueue.add(op);
+  schedule();
+  return op;
+}
+
+const fastdom = {
+  measure,
+  measureAtNextFrame,
+  mutate,
+};
+
+export default fastdom;

package/src/dom/index.ts

@@ -1,6 +1,8 @@
 import { Event as BaseEvent, Disposable, Emitter, IDisposable, isWebKit } from '@opensumi/ide-core-common';
 import { space } from '@opensumi/ide-utils/lib/strings';
 
+import fastdom from './fastdom';
+
 export * from './event';
 
 export const EventType = {
@@ -177,6 +179,7 @@ export function trackFocus(element: HTMLElement | Window): IFocusTracker {
   return new FocusTracker(element);
 }
 
+export { fastdom };
 /**
  * https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button
  */

package/src/dom/resize-observer.ts

@@ -0,0 +1,52 @@
+import { DisposableStore, Emitter, IDisposable } from '@opensumi/ide-core-common';
+
+import fastdom from './fastdom';
+
+export interface IDimension {
+  width: number;
+  height: number;
+}
+
+export class ResizeObserverWrapper implements IDisposable {
+  private _disposables = new DisposableStore();
+
+  private _onDidChange = this._disposables.add(new Emitter<IDimension>());
+  public onDidChange = this._onDidChange.event;
+
+  private _resizeObserver: ResizeObserver;
+
+  constructor(private _container: HTMLElement) {
+    this._resizeObserver = new ResizeObserver(this._callback);
+  }
+
+  private _callback = (entries: ResizeObserverEntry[]) => {
+    if (entries[0] && entries[0].contentRect) {
+      const width = entries[0].contentRect.width;
+      const height = entries[0].contentRect.height;
+
+      this._onDidChange.fire({ width, height });
+    }
+  };
+
+  private _observed = false;
+  observe() {
+    if (this._observed) {
+      return;
+    }
+    this._observed = true;
+
+    this._resizeObserver.observe(this._container);
+    fastdom.measure(() => {
+      this._onDidChange.fire({
+        width: this._container.clientWidth,
+        height: this._container.clientHeight,
+      });
+    });
+  }
+
+  dispose() {
+    this._observed = false;
+    this._disposables.dispose();
+    this._resizeObserver.disconnect();
+  }
+}

package/src/layout/layout-hooks.ts

@@ -1,7 +1,9 @@
+import throttle from 'lodash/throttle';
 import React from 'react';
 
 import { IEventBus } from '@opensumi/ide-core-common';
 
+import { fastdom } from '../dom';
 import { useInjectable } from '../react-hooks';
 
 import { ResizeEvent } from './layout.interface';
@@ -20,16 +22,35 @@ export const useViewState = (
   const [viewState, setViewState] = React.useState({ width: 0, height: 0 });
   const viewStateRef = React.useRef<ViewState>(viewState);
 
+  const updateViewState = throttle(
+    (height: number, width: number) => {
+      // 当视图被隐藏 (display: none) 时不更新 viewState
+      // 避免视图切换时触发无效的渲染
+      // 真正的 resize 操作不会出现 width/height 为 0 的情况
+      if (
+        (width !== viewStateRef.current.width || height !== viewStateRef.current.height) &&
+        (width !== 0 || height !== 0)
+      ) {
+        setViewState({ width, height });
+        viewStateRef.current = { width, height };
+      }
+    },
+    16 * 3,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
   React.useEffect(() => {
-    let lastFrame: number | null;
-    const disposer = eventBus.on(ResizeEvent, (e) => {
-      if (!manualObserve && e.payload.slotLocation === location) {
-        if (lastFrame) {
-          window.cancelAnimationFrame(lastFrame);
-        }
-        lastFrame = window.requestAnimationFrame(() => {
-          if (containerRef.current && containerRef.current.clientHeight && containerRef.current.clientWidth) {
-            setViewState({ height: containerRef.current.clientHeight, width: containerRef.current.clientWidth });
+    const disposer = eventBus.onDirective(ResizeEvent.createDirective(location), () => {
+      if (!manualObserve) {
+        fastdom.measureAtNextFrame(() => {
+          if (containerRef.current) {
+            const height = containerRef.current.clientHeight;
+            const width = containerRef.current.clientWidth;
+
+            updateViewState(height, width);
           }
         });
       }
@@ -37,27 +58,17 @@ export const useViewState = (
     return () => {
       disposer.dispose();
     };
-  }, [containerRef.current]);
+  }, []);
 
   React.useEffect(() => {
+    const ResizeObserver = window.ResizeObserver;
     // TODO: 统一收敛到 resizeEvent 内
     if (manualObserve && containerRef.current) {
-      const ResizeObserver = (window as any).ResizeObserver;
-      const doUpdate = (entries) => {
+      const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
         const width = entries[0].contentRect.width;
         const height = entries[0].contentRect.height;
-        // 当视图被隐藏 (display: none) 时不更新 viewState
-        // 避免视图切换时触发无效的渲染
-        // 真正的 resize 操作不会出现 width/height 为 0 的情况
-        if (
-          (width !== viewStateRef.current.width || height !== viewStateRef.current.height) &&
-          (width !== 0 || height !== 0)
-        ) {
-          setViewState({ width, height });
-          viewStateRef.current = { width, height };
-        }
-      };
-      const resizeObserver = new ResizeObserver(doUpdate);
+        updateViewState(height, width);
+      });
       resizeObserver.observe(containerRef.current);
       return () => {
         if (containerRef.current) {

package/src/layout/layout.interface.ts

@@ -104,6 +104,10 @@ export class ResizePayload {
    */
   constructor(public slotLocation: SlotLocation) {}
 }
-export class ResizeEvent extends BasicEvent<ResizePayload> {}
+export class ResizeEvent extends BasicEvent<ResizePayload> {
+  static createDirective(location: SlotLocation) {
+    return `resize:${location}`;
+  }
+}
 
 export class RenderedEvent extends BasicEvent<void> {}

package/src/layout/render.tsx

@@ -6,9 +6,9 @@ import { ErrorBoundary } from '../react-providers';
 import { View } from './layout.interface';
 
 export const renderView = (view?: View) => (
-    <>
-      {view && ReactIs.isValidElementType(view.component) ? (
-        <ErrorBoundary>{view.component && React.createElement(view.component, view.initialProps)}</ErrorBoundary>
-      ) : null}
-    </>
-  );
+  <>
+    {view && ReactIs.isValidElementType(view.component) ? (
+      <ErrorBoundary>{view.component && React.createElement(view.component, view.initialProps)}</ErrorBoundary>
+    ) : null}
+  </>
+);

package/src/react-providers/slot.tsx

@@ -35,6 +35,9 @@ export const SlotLocation = {
 };
 
 export function getSlotLocation(moduleName: string, layoutConfig: LayoutConfig) {
+  if (!layoutConfig) {
+    return '';
+  }
   for (const location of Object.keys(layoutConfig)) {
     if (layoutConfig[location].modules && layoutConfig[location].modules.indexOf(moduleName) > -1) {
       return location;