feat: implement manual app reload

Author: vladyslav-polishchuk

libs/frontend/abstract/application/src/renderer/renderer.service.interface.ts

@@ -13,5 +13,7 @@ export interface IRendererService
   activeElementTree: Maybe<IElementTree>
   activeRenderer: Nullable<Ref<IRendererModel>>
   renderers: ObjectMap<IRendererModel>
+
+  reloadActiveRenderer(): void
   setActiveRenderer(renderer: Ref<IRendererModel>): void
 }

libs/frontend/abstract/types/src/model/ui-data.ts

@@ -178,6 +178,9 @@ const UiDataRecord = {
   [UiKey.BuilderToolbarItemOpenPreview]: {
     label: 'Open Preview Builder Toolbar Item',
   },
+  [UiKey.BuilderToolbarItemReload]: {
+    label: 'Reload Renderer Toolbar Item',
+  },
   /**
    * Button
    */

libs/frontend/abstract/types/src/model/ui-key.ts

@@ -74,6 +74,7 @@ export enum UiKey {
   BuilderSidebar = 'BuilderSidebar',
   BuilderToolbarItemOpenBuilder = 'BuilderToolbarItemOpenBuilder',
   BuilderToolbarItemOpenPreview = 'BuilderToolbarItemOpenPreview',
+  BuilderToolbarItemReload = 'BuilderToolbarItemReload',
   /**
    * Button
    */

libs/frontend/application/component/src/views/ComponentDetailHeader.tsx

@@ -8,6 +8,7 @@ import {
   useCurrentApp,
   useCurrentComponent,
 } from '@codelab/frontend/presentation/container'
+import { useApplicationStore } from '@codelab/frontend-infra-mobx/context'
 import { DetailHeader } from '@codelab/frontend-presentation-view/sections'
 import { observer } from 'mobx-react-lite'
 import { usePathname, useRouter } from 'next/navigation'
@@ -27,6 +28,7 @@ export const ComponentDetailHeader = observer<IComponentDetailHeaderProps>(
     const isBuilder = currentPathname.endsWith('/builder')
     const component = useCurrentComponent()
     const app = useCurrentApp()
+    const { rendererService } = useApplicationStore()
 
     const togglePreviewMode = () => {
       const url = isBuilder
@@ -59,6 +61,7 @@ export const ComponentDetailHeader = observer<IComponentDetailHeaderProps>(
         BuilderResizeMenu={BuilderResizeMenu}
         directionItems={directionItems}
         isBuilder={isBuilder}
+        reloadRenderer={rendererService.reloadActiveRenderer}
         togglePreviewMode={togglePreviewMode}
       />
     )

libs/frontend/application/page/src/views/PageDetailHeader.tsx

@@ -7,6 +7,10 @@ import {
   useCurrentApp,
   useCurrentPage,
 } from '@codelab/frontend/presentation/container'
+import {
+  useApplicationStore,
+  useDomainStore,
+} from '@codelab/frontend-infra-mobx/context'
 import { DetailHeader } from '@codelab/frontend-presentation-view/sections'
 import { Skeleton } from 'antd'
 import { observer } from 'mobx-react-lite'
@@ -27,6 +31,7 @@ export const PageDetailHeader = observer<IPageDetailHeaderProps>(
     const isBuilder = currentPathname.includes('/builder')
     const app = useCurrentApp()
     const page = useCurrentPage()
+    const { rendererService } = useApplicationStore()
 
     const togglePreviewMode = () => {
       const url = isBuilder
@@ -63,6 +68,7 @@ export const PageDetailHeader = observer<IPageDetailHeaderProps>(
         BuilderResizeMenu={BuilderResizeMenu}
         directionItems={directionItems}
         isBuilder={isBuilder}
+        reloadRenderer={rendererService.reloadActiveRenderer}
         togglePreviewMode={togglePreviewMode}
       />
     )

libs/frontend/application/renderer/src/components/ElementWrapper.tsx

@@ -31,7 +31,7 @@ export const ElementWrapper = observer<ElementWrapperProps>(
   }) => {
     useEffect(() => {
       onRendered()
-    }, [])
+    }, [onRendered])
 
     const { atomDomainService } = useDomainStore()
 

libs/frontend/application/renderer/src/services/renderer.service.ts

@@ -7,9 +7,17 @@ import type { Nullable } from '@codelab/shared/abstract/types'
 import type { Ref } from 'mobx-keystone'
 
 import {
+  getBuilderService,
   getRuntimeComponentService,
   getRuntimeElementService,
+  getRuntimePageService,
+  runtimeElementRef,
 } from '@codelab/frontend/abstract/application'
+import {
+  componentRef,
+  isComponentRef,
+  pageRef,
+} from '@codelab/frontend/abstract/domain'
 import { computed } from 'mobx'
 import { Model, model, modelAction, objectMap, prop } from 'mobx-keystone'
 
@@ -32,6 +40,11 @@ export class RendererService
     return this.activeRenderer?.current.containerNode.current
   }
 
+  @computed
+  get builderService() {
+    return getBuilderService(this)
+  }
+
   @computed
   get runtimeComponentService() {
     return getRuntimeComponentService(this)
@@ -42,6 +55,11 @@ export class RendererService
     return getRuntimeElementService(this)
   }
 
+  @computed
+  get runtimePageService() {
+    return getRuntimePageService(this)
+  }
+
   @modelAction
   hydrate = (rendererDto: IRendererDto) => {
     let renderer = this.renderers.get(rendererDto.id)
@@ -66,4 +84,29 @@ export class RendererService
 
     return renderer
   }
+
+  @modelAction
+  reloadActiveRenderer = () => {
+    if (!this.activeRenderer) {
+      return
+    }
+
+    const currentRenderer = this.activeRenderer.current
+    const { containerNode } = currentRenderer
+
+    // reset builder tree selected node
+    this.builderService.setSelectedNode(
+      runtimeElementRef(
+        currentRenderer.runtimeRootContainerNode.runtimeRootElement,
+      ),
+    )
+
+    // detach current page/components with elements and stores from root store
+    currentRenderer.runtimeRootContainerNode.detach()
+
+    // reinitialize renderer container node, this will recompute all properties and rerender
+    currentRenderer.containerNode = isComponentRef(containerNode)
+      ? componentRef(containerNode.current)
+      : pageRef(containerNode.current)
+  }
 }

libs/frontend/presentation/view/src/sections/Header/DetailHeader.tsx

@@ -1,5 +1,6 @@
 import EyeOutlined from '@ant-design/icons/EyeOutlined'
 import ToolOutlined from '@ant-design/icons/lib/icons/ToolOutlined'
+import ReloadOutlined from '@ant-design/icons/ReloadOutlined'
 import { UiKey } from '@codelab/frontend/abstract/types'
 import {
   CuiHeader,
@@ -15,16 +16,24 @@ interface DetailHeaderProps {
   BuilderResizeMenu: ReactNode
   directionItems: Array<HeaderBreadcrumbItem>
   isBuilder: boolean
+  reloadRenderer(): void
   togglePreviewMode(): void
 }
 
 export const DetailHeader = ({
   BuilderResizeMenu,
   directionItems,
   isBuilder,
+  reloadRenderer,
   togglePreviewMode,
 }: DetailHeaderProps) => {
   const toolbarItems: Array<ToolbarItem> = [
+    {
+      cuiKey: UiKey.BuilderToolbarItemReload,
+      icon: <ReloadOutlined />,
+      onClick: reloadRenderer,
+      title: 'Reload app',
+    },
     isBuilder
       ? {
           cuiKey: UiKey.BuilderToolbarItemOpenPreview,