@teambit/ui 0.0.636 → 0.0.640

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.636",
+  "version": "0.0.640",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.636"
+    "version": "0.0.640"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -50,36 +50,37 @@
     "source-map-loader": "3.0.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
+    "@teambit/base-ui.utils.composer": "1.0.0",
     "@teambit/base-ui.loaders.loader-ribbon": "1.0.0",
     "@teambit/base-ui.theme.fonts.roboto": "1.0.0",
     "@teambit/base-ui.theme.theme-provider": "1.0.1",
-    "@teambit/aspect-loader": "0.0.636",
+    "@teambit/aspect-loader": "0.0.640",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.482",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.486",
-    "@teambit/logger": "0.0.524",
-    "@teambit/cli": "0.0.434",
+    "@teambit/logger": "0.0.527",
+    "@teambit/cli": "0.0.437",
     "@teambit/ui-foundation.cli.ui-server-console": "0.0.489",
-    "@teambit/bundler": "0.0.636",
-    "@teambit/component": "0.0.636",
-    "@teambit/express": "0.0.528",
-    "@teambit/graphql": "0.0.636",
+    "@teambit/bundler": "0.0.640",
+    "@teambit/component": "0.0.640",
+    "@teambit/express": "0.0.531",
+    "@teambit/graphql": "0.0.640",
     "@teambit/toolbox.network.get-port": "0.0.112",
-    "@teambit/aspect": "0.0.636",
-    "@teambit/cache": "0.0.524",
-    "@teambit/pubsub": "0.0.636",
-    "@teambit/react-router": "0.0.636",
+    "@teambit/aspect": "0.0.640",
+    "@teambit/cache": "0.0.527",
+    "@teambit/pubsub": "0.0.640",
+    "@teambit/react-router": "0.0.640",
     "@teambit/ui-foundation.ui.rendering.html": "0.0.68",
     "@teambit/design.theme.icons-font": "1.0.8",
     "@teambit/design.ui.tooltip": "0.0.352",
     "@teambit/ui-foundation.ui.global-loader": "0.0.485",
     "@teambit/webpack.modules.generate-style-loaders": "0.0.102",
     "@teambit/webpack.modules.style-regexps": "0.0.131",
-    "@teambit/webpack": "0.0.636"
+    "@teambit/webpack": "0.0.640"
   },
   "devDependencies": {
-    "@types/react": "^17.0.8",
     "@types/lodash": "4.14.165",
     "@types/cross-spawn": "6.0.2",
+    "@types/react": "^17.0.8",
     "@types/webpack-dev-server": "4.0.3",
     "@types/react-router-dom": "5.1.7",
     "@types/express": "4.17.9",
@@ -96,7 +97,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.210",
+    "@teambit/legacy": "1.0.213",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -141,7 +142,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.210",
+        "@teambit/legacy": "1.0.213",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/react-ssr/index.ts

@@ -0,0 +1,6 @@
+export { ReactSSR } from './react-ssr';
+
+export type { ContextProps, RenderPlugins } from './render-lifecycle';
+export type { BrowserData, ParsedQuery } from './request-browser';
+export type { RequestServer } from './request-server';
+export type { SsrContent } from './ssr-content';

package/react-ssr/react-ssr.tsx

@@ -0,0 +1,183 @@
+import React, { ReactNode } from 'react';
+import { merge } from 'webpack-merge';
+import compact from 'lodash.compact';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+
+import { Html, MountPoint, mountPointId, ssrCleanup, Assets } from '@teambit/ui-foundation.ui.rendering.html';
+import { Composer, Wrapper } from '@teambit/base-ui.utils.composer';
+
+import type { RenderPlugins } from './render-lifecycle';
+import type { SsrContent } from './ssr-content';
+import type { RequestServer } from './request-server';
+import type { BrowserData } from './request-browser';
+
+type RenderPluginsWithId = [key: string, hooks: RenderPlugins];
+
+export class ReactSSR {
+  constructor(
+    // create array once to keep consistent indexes
+    private lifecycleHooks: RenderPluginsWithId[]
+  ) {}
+
+  /** render and rehydrate client-side */
+  async renderBrowser(children: ReactNode) {
+    // (*) load state from the dom
+    const deserializedState = await this.deserialize();
+
+    // (1) init setup client plugins
+    let renderContexts = await this.triggerBrowserInit(deserializedState);
+
+    // (2) make react dom
+    const reactContexts = this.getReactContexts(renderContexts);
+    const app = <Composer components={reactContexts}>{children}</Composer>;
+
+    renderContexts = await this.triggerBeforeHydrateHook(renderContexts, app);
+
+    // (3) render / rehydrate
+    const mountPoint = document.getElementById(mountPointId);
+    // .render() already runs `.hydrate()` behind the scenes.
+    // in the future, we may want to replace it with .hydrate()
+    ReactDOM.render(app, mountPoint);
+
+    await this.triggerHydrateHook(renderContexts, mountPoint);
+
+    // (3.1) remove ssr only styles
+    ssrCleanup();
+  }
+
+  /** render dehydrated server-side */
+  async renderServer(children: ReactNode, { assets, browser, server }: SsrContent = {}): Promise<string> {
+    // (1) init
+    let renderContexts = await this.triggerServerInit(browser, server);
+
+    // (2) make React dom
+    const reactContexts = this.getReactContexts(renderContexts);
+    const app = (
+      <MountPoint>
+        <Composer components={reactContexts}>{children}</Composer>
+      </MountPoint>
+    );
+
+    renderContexts = await this.triggerBeforeRender(renderContexts, app);
+
+    // (3) render (to string)
+    const renderedApp = ReactDOMServer.renderToString(app);
+
+    // (*) serialize state
+    const realtimeAssets = await this.serialize(renderContexts, app);
+    // @ts-ignore // TODO upgrade 'webpack-merge'
+    const totalAssets = merge(assets, realtimeAssets) as Assets;
+
+    // (4) render html-template (to string)
+    const html = <Html assets={totalAssets} withDevTools fullHeight ssr />;
+    const renderedHtml = `<!DOCTYPE html>${ReactDOMServer.renderToStaticMarkup(html)}`;
+    const fullHtml = Html.fillContent(renderedHtml, renderedApp);
+
+    // (5) serve
+    return fullHtml;
+  }
+
+  private triggerBrowserInit(deserializedState: any[]) {
+    const { lifecycleHooks } = this;
+
+    const initPromises = lifecycleHooks.map(([, hooks], idx) => {
+      const state = deserializedState[idx];
+      return hooks.browserInit?.(state);
+    });
+    return Promise.all(initPromises);
+  }
+
+  private triggerServerInit(browser?: BrowserData, server?: RequestServer) {
+    const { lifecycleHooks } = this;
+    const promises = lifecycleHooks.map(([, hooks]) => hooks.serverInit?.({ browser, server }));
+    return Promise.all(promises);
+  }
+
+  private triggerBeforeHydrateHook(renderContexts: any[], app: JSX.Element) {
+    const { lifecycleHooks } = this;
+
+    const promises = lifecycleHooks.map(async ([, hooks], idx) => {
+      const ctx = renderContexts[idx];
+      const nextCtx = await hooks.onBeforeHydrate?.(ctx, app);
+      return nextCtx || ctx;
+    });
+
+    return Promise.all(promises);
+  }
+
+  private async triggerHydrateHook(renderContexts: any[], mountPoint: HTMLElement | null) {
+    const { lifecycleHooks } = this;
+
+    const promises = lifecycleHooks.map(([, hooks], idx) => {
+      const renderCtx = renderContexts[idx];
+      return hooks.onHydrate?.(renderCtx, mountPoint);
+    });
+
+    await Promise.all(promises);
+  }
+
+  private async triggerBeforeRender(renderContexts: any[], app: JSX.Element) {
+    const { lifecycleHooks } = this;
+
+    const promises = lifecycleHooks.map(async ([, hooks], idx) => {
+      const ctx = renderContexts[idx];
+      const nextCtx = await hooks.onBeforeRender?.(ctx, app);
+      return nextCtx || ctx;
+    });
+
+    await Promise.all(promises);
+
+    return renderContexts;
+  }
+
+  private getReactContexts(renderContexts: any[]): Wrapper[] {
+    const { lifecycleHooks } = this;
+
+    return compact(
+      lifecycleHooks.map(([, hooks], idx) => {
+        const renderCtx = renderContexts[idx];
+        const props = { renderCtx };
+        return hooks.reactContext ? [hooks.reactContext, props] : undefined;
+      })
+    );
+  }
+
+  private async deserialize() {
+    const { lifecycleHooks } = this;
+    const rawAssets = Html.popAssets();
+
+    const deserialized = await Promise.all(
+      lifecycleHooks.map(async ([key, hooks]) => {
+        try {
+          const raw = rawAssets.get(key);
+          return hooks.deserialize?.(raw);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(`failed deserializing server state for aspect ${key}`, e);
+          return undefined;
+        }
+      })
+    );
+
+    return deserialized;
+  }
+
+  private async serialize(renderContexts: any[], app: ReactNode): Promise<Assets> {
+    const { lifecycleHooks } = this;
+    const json = {};
+
+    const promises = lifecycleHooks.map(async ([key, hooks], idx) => {
+      const renderCtx = renderContexts[idx];
+      const result = await hooks.serialize?.(renderCtx, app);
+
+      if (!result) return;
+      if (result.json) json[key] = result.json;
+    });
+
+    await Promise.all(promises);
+
+    // more assets will be available in the future
+    return { json };
+  }
+}

package/{render-lifecycle.tsx → react-ssr/render-lifecycle.tsx}

@@ -1,9 +1,11 @@
 import { ReactNode, ComponentType } from 'react';
-import { BrowserData } from './ssr/request-browser';
-import { RequestServer } from './ssr/request-server';
-import { ContextProps } from './ui.ui.runtime';
+import { BrowserData } from './request-browser';
+import { RequestServer } from './request-server';
 
-export type RenderLifecycle<RenderCtx = any, Serialized = any> = {
+export type ContextProps<T = any> = { renderCtx?: T; children: ReactNode };
+
+/** Plugins for each step of the SSR and regular rendering lifecycle */
+export type RenderPlugins<RenderCtx = any, Serialized = any> = {
   /**
    * Initialize a context state for this specific rendering.
    * Context state will only be available to the current Aspect, in the other hooks, as well as a prop to the react context component.

package/{ssr → react-ssr}/request-browser.ts

@@ -1,5 +1,4 @@
 import type { IncomingHttpHeaders } from 'http';
-import type { Request } from 'express';
 
 export type ParsedQuery = { [key: string]: undefined | string | string[] | ParsedQuery | ParsedQuery[] };
 
@@ -54,33 +53,3 @@ export type BrowserData = {
   };
   cookie?: string;
 };
-
-/**
- * extract relevant information from Express request.
- */
-export function requestToObj(req: Request, port: number) {
-  // apparently port is not readily available in request.
-
-  const browser: BrowserData = {
-    connection: {
-      secure: req.secure,
-      headers: req.headers,
-      body: req.body,
-    },
-    // trying to match to browser.location
-    location: {
-      host: `${req.hostname}:${port}`,
-      hostname: req.hostname,
-      href: `${req.protocol}://${req.hostname}:${port}${req.url}`,
-      origin: `${req.protocol}://${req.hostname}:${port}`,
-      pathname: req.path,
-      port,
-      protocol: `${req.protocol}:`,
-      query: req.query,
-      url: req.url,
-    },
-    cookie: req.header('Cookie'),
-  };
-
-  return browser;
-}

package/ssr-middleware/extract-browser-data.ts

@@ -0,0 +1,31 @@
+import { Request } from 'express';
+import { BrowserData } from '../react-ssr';
+
+/**
+ * extract relevant information from Express request.
+ */
+
+export function extractBrowserData(req: Request, port: number) {
+  const browser: BrowserData = {
+    connection: {
+      secure: req.secure,
+      headers: req.headers,
+      body: req.body,
+    },
+    // rebuild browser location from request, +port
+    location: {
+      host: `${req.hostname}:${port}`,
+      hostname: req.hostname,
+      href: `${req.protocol}://${req.hostname}:${port}${req.url}`,
+      origin: `${req.protocol}://${req.hostname}:${port}`,
+      pathname: req.path,
+      port,
+      protocol: `${req.protocol}:`,
+      query: req.query,
+      url: req.url,
+    },
+    cookie: req.header('Cookie'),
+  };
+
+  return browser;
+}

package/ssr-middleware/index.ts

@@ -0,0 +1 @@
+export { createSsrMiddleware } from './ssr-middleware';

package/{ssr/render-middleware.ts → ssr-middleware/ssr-middleware.ts}

@@ -3,8 +3,8 @@ import { Request, Response, NextFunction } from 'express';
 import path from 'path';
 import * as fs from 'fs-extra';
 import type { Logger } from '@teambit/logger';
-import { requestToObj } from './request-browser';
-import { SsrContent } from './ssr-content';
+import type { SsrContent } from '../react-ssr';
+import { extractBrowserData } from './extract-browser-data';
 
 const denyList = /^\/favicon.ico$/;
 
@@ -30,7 +30,7 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
   return async function serverRenderMiddleware(req: Request, res: Response, next: NextFunction) {
     const { query, url } = req;
 
-    const browser = requestToObj(req, port);
+    const browser = extractBrowserData(req, port);
 
     if (denyList.test(url)) {
       logger.debug(`[ssr] skipping static denyList file ${url}`);

package/ui.ui.runtime.tsx

@@ -3,27 +3,18 @@ import { GraphqlAspect } from '@teambit/graphql';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import type { ReactRouterUI } from '@teambit/react-router';
 import { ReactRouterAspect } from '@teambit/react-router';
-import { Html, MountPoint, mountPointId, ssrCleanup, Assets } from '@teambit/ui-foundation.ui.rendering.html';
 
-import { merge } from 'webpack-merge';
 import React, { ReactNode, ComponentType } from 'react';
-import ReactDOM from 'react-dom';
-import ReactDOMServer from 'react-dom/server';
-import compact from 'lodash.compact';
 
-import { Compose, Wrapper } from './compose';
 import { UIRootFactory } from './ui-root.ui';
 import { UIAspect, UIRuntime } from './ui.aspect';
 import { ClientContext } from './ui/client-context';
-import type { SsrContent } from './ssr/ssr-content';
-import type { RequestServer } from './ssr/request-server';
-import type { BrowserData } from './ssr/request-browser';
-import { RenderLifecycle } from './render-lifecycle';
-
-export type ContextProps<T = any> = { renderCtx?: T; children: ReactNode };
+import type { SsrContent } from './react-ssr/ssr-content';
+import { ContextProps, RenderPlugins } from './react-ssr/render-lifecycle';
+import { ReactSSR } from './react-ssr/react-ssr';
 
 type HudSlot = SlotRegistry<ReactNode>;
-type renderLifecycleSlot = SlotRegistry<RenderLifecycle>;
+type RenderPluginsSlot = SlotRegistry<RenderPlugins>;
 type UIRootRegistry = SlotRegistry<UIRootFactory>;
 
 /**
@@ -42,7 +33,7 @@ export class UiUI {
     /** slot for overlay ui elements */
     private hudSlot: HudSlot,
     /** hooks into the ssr render process */
-    private lifecycleSlot: renderLifecycleSlot
+    private renderPluginsSlot: RenderPluginsSlot
   ) {}
 
   /** render and rehydrate client-side */
@@ -53,79 +44,37 @@ export class UiUI {
     const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;
     const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation });
     const hudItems = this.hudSlot.values();
-    const lifecycleHooks = this.lifecycleSlot.toArray();
-
-    // TODO - extract the logic from here down as reusable ssr machine
-    const deserializedState = await this.deserialize(lifecycleHooks);
-    let renderContexts = await this.triggerBrowserInit(lifecycleHooks, deserializedState);
-    const reactContexts = this.getReactContexts(lifecycleHooks, renderContexts);
-
-    const app = (
-      <Compose components={reactContexts}>
-        <ClientContext>
-          {hudItems}
-          {routes}
-        </ClientContext>
-      </Compose>
+    const lifecycleHooks = this.renderPluginsSlot.toArray();
+
+    const reactSsr = new ReactSSR(lifecycleHooks);
+    await reactSsr.renderBrowser(
+      <ClientContext>
+        {hudItems}
+        {routes}
+      </ClientContext>
     );
-
-    renderContexts = await this.triggerBeforeHydrateHook(renderContexts, lifecycleHooks, app);
-
-    const mountPoint = document.getElementById(mountPointId);
-    // .render() already runs `.hydrate()` behind the scenes.
-    // in the future, we may want to replace it with .hydrate()
-    ReactDOM.render(app, mountPoint);
-
-    await this.triggerHydrateHook(renderContexts, lifecycleHooks, mountPoint);
-
-    // remove ssr only styles
-    ssrCleanup();
   }
 
   /** render dehydrated server-side */
-  async renderSsr(rootExtension: string, { assets, browser, server }: SsrContent = {}): Promise<string> {
+  async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {
     const rootFactory = this.getRoot(rootExtension);
     if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
 
     const uiRoot = rootFactory();
-    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation: browser?.location.url });
+    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation: ssrContent?.browser?.location.url });
     const hudItems = this.hudSlot.values();
 
-    // create array once to keep consistent indexes
-    const lifecycleHooks = this.lifecycleSlot.toArray();
-
-    // TODO - extract the logic from here down as reusable ssr machine
-    // (1) init
-    let renderContexts = await this.triggerServerInit(lifecycleHooks, browser, server);
-    const reactContexts = this.getReactContexts(lifecycleHooks, renderContexts);
+    const lifecycleHooks = this.renderPluginsSlot.toArray();
 
-    // (2) make (virtual) dom
-    const app = (
-      <MountPoint>
-        <Compose components={reactContexts}>
-          <ClientContext>
-            {hudItems}
-            {routes}
-          </ClientContext>
-        </Compose>
-      </MountPoint>
+    const reactSsr = new ReactSSR(lifecycleHooks);
+    const fullHtml = await reactSsr.renderServer(
+      <ClientContext>
+        {hudItems}
+        {routes}
+      </ClientContext>,
+      ssrContent
     );
 
-    // (3) render
-    renderContexts = await this.onBeforeRender(renderContexts, lifecycleHooks, app);
-
-    const renderedApp = ReactDOMServer.renderToString(app);
-
-    // (3) render html-template
-    const realtimeAssets = await this.serialize(lifecycleHooks, renderContexts, app);
-    // @ts-ignore // TODO upgrade 'webpack-merge'
-    const totalAssets = merge(assets, realtimeAssets) as Assets;
-
-    const html = <Html assets={totalAssets} withDevTools fullHeight ssr />;
-    const renderedHtml = `<!DOCTYPE html>${ReactDOMServer.renderToStaticMarkup(html)}`;
-    const fullHtml = Html.fillContent(renderedHtml, renderedApp);
-
-    // (4) serve
     return fullHtml;
   }
 
@@ -139,7 +88,7 @@ export class UiUI {
    * @deprecated replace with `.registerRenderHooks({ reactContext })`.
    */
   registerContext<T>(context: ComponentType<ContextProps<T>>) {
-    this.lifecycleSlot.register({
+    this.renderPluginsSlot.register({
       reactContext: context,
     });
   }
@@ -148,114 +97,15 @@ export class UiUI {
     return this.uiRootSlot.register(uiRoot);
   }
 
-  registerRenderHooks<T, Y>(hooks: RenderLifecycle<T, Y>) {
-    return this.lifecycleSlot.register(hooks);
-  }
-
-  private triggerBrowserInit(lifecycleHooks: [string, RenderLifecycle<any, any>][], deserializedState: any[]) {
-    return Promise.all(lifecycleHooks.map(([, hooks], idx) => hooks.browserInit?.(deserializedState[idx])));
-  }
-
-  private triggerServerInit(
-    lifecycleHooks: [string, RenderLifecycle<any, any>][],
-    browser?: BrowserData,
-    server?: RequestServer
-  ) {
-    return Promise.all(lifecycleHooks.map(([, hooks]) => hooks.serverInit?.({ browser, server })));
-  }
-
-  private getReactContexts(lifecycleHooks: [string, RenderLifecycle<any>][], renderContexts: any[]): Wrapper[] {
-    return compact(
-      lifecycleHooks.map(([, hooks], idx) => {
-        const renderCtx = renderContexts[idx];
-        const props = { renderCtx };
-        return hooks.reactContext ? [hooks.reactContext, props] : undefined;
-      })
-    );
-  }
-
-  private async onBeforeRender(
-    renderContexts: any[],
-    lifecycleHooks: [string, RenderLifecycle<any>][],
-    app: JSX.Element
-  ) {
-    await Promise.all(
-      lifecycleHooks.map(async ([, hooks], idx) => {
-        const ctx = renderContexts[idx];
-        const nextCtx = await hooks.onBeforeRender?.(ctx, app);
-        return nextCtx || ctx;
-      })
-    );
-    return renderContexts;
-  }
-
-  private triggerBeforeHydrateHook(
-    renderContexts: any[],
-    lifecycleHooks: [string, RenderLifecycle<any>][],
-    app: JSX.Element
-  ) {
-    return Promise.all(
-      lifecycleHooks.map(async ([, hooks], idx) => {
-        const ctx = renderContexts[idx];
-        const nextCtx = await hooks.onBeforeHydrate?.(ctx, app);
-        return nextCtx || ctx;
-      })
-    );
-  }
-
-  private async triggerHydrateHook(
-    renderContexts: any[],
-    lifecycleHooks: [string, RenderLifecycle<any, any>][],
-    mountPoint: HTMLElement | null
-  ) {
-    await Promise.all(lifecycleHooks.map(([, hooks], idx) => hooks.onHydrate?.(renderContexts[idx], mountPoint)));
-  }
-
-  private async serialize(
-    lifecycleHooks: [string, RenderLifecycle][],
-    renderContexts: any[],
-    app: ReactNode
-  ): Promise<Assets> {
-    const json = {};
-
-    await Promise.all(
-      lifecycleHooks.map(async ([key, hooks], idx) => {
-        const renderCtx = renderContexts[idx];
-        const result = await hooks.serialize?.(renderCtx, app);
-
-        if (!result) return;
-        if (result.json) json[key] = result.json;
-      })
-    );
-
-    // more assets will be available in the future
-    return { json };
-  }
-
-  private async deserialize(lifecycleHooks: [string, RenderLifecycle][]) {
-    const rawAssets = Html.popAssets();
-
-    const deserialized = await Promise.all(
-      lifecycleHooks.map(async ([key, hooks]) => {
-        try {
-          const raw = rawAssets.get(key);
-          return hooks.deserialize?.(raw);
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(`failed deserializing server state for aspect ${key}`, e);
-          return undefined;
-        }
-      })
-    );
-
-    return deserialized;
+  registerRenderHooks<T, Y>(hooks: RenderPlugins<T, Y>) {
+    return this.renderPluginsSlot.register(hooks);
   }
 
   private getRoot(rootExtension: string) {
     return this.uiRootSlot.get(rootExtension);
   }
 
-  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderLifecycle>()];
+  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];
 
   static dependencies = [GraphqlAspect, ReactRouterAspect];
 
@@ -264,11 +114,11 @@ export class UiUI {
   static async provider(
     [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],
     config,
-    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, renderLifecycleSlot]
+    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, RenderPluginsSlot]
   ) {
     const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);
 
-    uiUi.registerRenderHooks(GraphqlUi.renderHooks);
+    uiUi.registerRenderHooks(GraphqlUi.renderPlugins);
 
     return uiUi;
   }