@teambit/ui 0.0.802 → 0.0.805

package/dist/ui.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["UiUI","constructor","router","uiRootSlot","hudSlot","renderPluginsSlot","element","register","render","rootExtension","rootFactory","getRoot","Error","uiRoot","routes","renderRoutes","hudItems","values","lifecyclePlugins","getLifecyclePlugins","reactSsr","ReactSSR","renderBrowser","renderSsr","ssrContent","fullHtml","renderServer","registerContext","context","reactContext","registerRoot","registerRenderHooks","plugins","toArray","unshift","ReactRouterAspect","id","renderPlugin","get","provider","GraphqlUi","config","renderLifecycleSlot","uiUi","renderPlugins","Slot","withType","GraphqlAspect","UIRuntime","UIAspect","addRuntime"],"sources":["ui.ui.runtime.tsx"],"sourcesContent":["import type { GraphqlUI } from '@teambit/graphql';\nimport { GraphqlAspect } from '@teambit/graphql';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { ReactRouterUI } from '@teambit/react-router';\nimport { ReactRouterAspect } from '@teambit/react-router';\n\nimport React, { ReactNode, ComponentType } from 'react';\n\nimport { UIRootFactory } from './ui-root.ui';\nimport { UIAspect, UIRuntime } from './ui.aspect';\nimport { ClientContext } from './ui/client-context';\nimport type { SsrContent } from './react-ssr/ssr-content';\nimport { ContextProps, RenderPlugins } from './react-ssr/render-lifecycle';\nimport { ReactSSR } from './react-ssr/react-ssr';\n\ntype HudSlot = SlotRegistry<ReactNode>;\ntype RenderPluginsSlot = SlotRegistry<RenderPlugins>;\ntype UIRootRegistry = SlotRegistry<UIRootFactory>;\n\n/**\n * extension\n */\nexport class UiUI {\n  constructor(\n    /**\n     * react-router extension.\n     */\n    private router: ReactRouterUI,\n    /**\n     * ui root registry.\n     */\n    private uiRootSlot: UIRootRegistry,\n    /** slot for overlay ui elements */\n    private hudSlot: HudSlot,\n    /** hooks into the ssr render process */\n    private renderPluginsSlot: RenderPluginsSlot\n  ) {}\n\n  /** render and rehydrate client-side */\n  async render(rootExtension: string): Promise<void> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new ReactSSR(lifecyclePlugins);\n    await reactSsr.renderBrowser(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>\n    );\n  }\n\n  /** render dehydrated server-side */\n  async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new ReactSSR(lifecyclePlugins);\n    const fullHtml = await reactSsr.renderServer(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>,\n      ssrContent\n    );\n\n    return fullHtml;\n  }\n\n  /** adds elements to the Heads Up Display */\n  registerHudItem = (element: ReactNode) => {\n    this.hudSlot.register(element);\n  };\n\n  /**\n   * adds global context at the ui root\n   * @deprecated replace with `.registerRenderHooks({ reactContext })`.\n   */\n  registerContext<T>(context: ComponentType<ContextProps<T>>) {\n    this.renderPluginsSlot.register({\n      reactContext: context,\n    });\n  }\n\n  registerRoot(uiRoot: UIRootFactory) {\n    return this.uiRootSlot.register(uiRoot);\n  }\n\n  registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>) {\n    return this.renderPluginsSlot.register(plugins);\n  }\n\n  private getLifecyclePlugins() {\n    const lifecyclePlugins = this.renderPluginsSlot.toArray();\n    // react-router should register its plugin, when we can reverse it's dependency to depend on Ui\n    lifecyclePlugins.unshift([ReactRouterAspect.id, this.router.renderPlugin]);\n\n    return lifecyclePlugins;\n  }\n\n  private getRoot(rootExtension: string) {\n    return this.uiRootSlot.get(rootExtension);\n  }\n\n  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];\n\n  static dependencies = [GraphqlAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider(\n    [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],\n    config,\n    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, RenderPluginsSlot]\n  ) {\n    const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);\n\n    uiUi.registerRenderHooks(GraphqlUi.renderPlugins);\n\n    return uiUi;\n  }\n}\n\nUIAspect.addRuntime(UiUI);\n"],"mappings":"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"}
+{"version":3,"names":["UiUI","constructor","router","uiRootSlot","hudSlot","renderPluginsSlot","element","register","render","rootExtension","rootFactory","getRoot","Error","uiRoot","routes","renderRoutes","hudItems","values","lifecyclePlugins","getLifecyclePlugins","reactSsr","BrowserRenderer","renderSsr","ssrContent","ServerRenderer","fullHtml","registerContext","context","reactContext","registerRoot","registerRenderHooks","plugin","toArray","map","key","unshift","renderPlugin","get","provider","GraphqlUi","config","renderLifecycleSlot","uiUi","renderPlugins","Slot","withType","GraphqlAspect","ReactRouterAspect","UIRuntime","UIAspect","addRuntime"],"sources":["ui.ui.runtime.tsx"],"sourcesContent":["import type { GraphqlUI } from '@teambit/graphql';\nimport { GraphqlAspect } from '@teambit/graphql';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { ReactRouterUI } from '@teambit/react-router';\nimport { ReactRouterAspect } from '@teambit/react-router';\nimport { ServerRenderer, BrowserRenderer } from '@teambit/react.rendering.ssr';\nimport type { SsrSession, RenderPlugin, ContextProps } from '@teambit/react.rendering.ssr';\n\nimport React, { ReactNode, ComponentType } from 'react';\n\nimport { UIRootFactory } from './ui-root.ui';\nimport { UIAspect, UIRuntime } from './ui.aspect';\nimport { ClientContext } from './ui/client-context';\n\ntype HudSlot = SlotRegistry<ReactNode>;\ntype RenderPluginsSlot = SlotRegistry<RenderPlugin<any, any>>;\ntype UIRootRegistry = SlotRegistry<UIRootFactory>;\n\n/**\n * extension\n */\nexport class UiUI {\n  constructor(\n    /**\n     * react-router extension.\n     */\n    private router: ReactRouterUI,\n    /**\n     * ui root registry.\n     */\n    private uiRootSlot: UIRootRegistry,\n    /** slot for overlay ui elements */\n    private hudSlot: HudSlot,\n    /** hooks into the ssr render process */\n    private renderPluginsSlot: RenderPluginsSlot\n  ) {}\n\n  /** render and rehydrate client-side */\n  async render(rootExtension: string): Promise<void> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new BrowserRenderer(lifecyclePlugins);\n    await reactSsr.render(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>\n    );\n  }\n\n  /** render dehydrated server-side */\n  async renderSsr(rootExtension: string, ssrContent: SsrSession): Promise<string> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new ServerRenderer(lifecyclePlugins);\n    const fullHtml = await reactSsr.render(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>,\n      ssrContent\n    );\n\n    return fullHtml;\n  }\n\n  /** adds elements to the Heads Up Display */\n  registerHudItem = (element: ReactNode) => {\n    this.hudSlot.register(element);\n  };\n\n  /**\n   * adds global context at the ui root\n   * @deprecated replace with `.registerRenderHooks({ reactContext })`.\n   */\n  registerContext<T>(context: ComponentType<ContextProps<T>>) {\n    this.renderPluginsSlot.register({ reactContext: context });\n  }\n\n  registerRoot(uiRoot: UIRootFactory) {\n    return this.uiRootSlot.register(uiRoot);\n  }\n\n  registerRenderHooks<T, Y>(plugin: RenderPlugin<T, Y>) {\n    return this.renderPluginsSlot.register(plugin);\n  }\n\n  private getLifecyclePlugins() {\n    const lifecyclePlugins = this.renderPluginsSlot.toArray().map(([key, plugin]) => {\n      if (plugin.key) return plugin;\n\n      // for backward compatibility\n      return { ...plugin, key };\n    });\n\n    // react-router should register its plugin, when we can reverse it's dependency to depend on Ui\n    lifecyclePlugins.unshift(this.router.renderPlugin);\n\n    return lifecyclePlugins;\n  }\n\n  private getRoot(rootExtension: string) {\n    return this.uiRootSlot.get(rootExtension);\n  }\n\n  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugin>()];\n\n  static dependencies = [GraphqlAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider(\n    [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],\n    config,\n    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, RenderPluginsSlot]\n  ) {\n    const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);\n\n    if (GraphqlUi) uiUi.registerRenderHooks(GraphqlUi.renderPlugins);\n\n    return uiUi;\n  }\n}\n\nUIAspect.addRuntime(UiUI);\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.802",
+  "version": "0.0.805",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.802"
+    "version": "0.0.805"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -18,8 +18,6 @@
     "webpack": "5.51.1",
     "chalk": "2.4.2",
     "fs-extra": "10.0.0",
-    "lodash.compact": "3.0.1",
-    "webpack-merge": "5.8.0",
     "postcss-preset-env": "6.7.0",
     "mini-css-extract-plugin": "2.2.2",
     "webpack-manifest-plugin": "4.0.2",
@@ -27,6 +25,7 @@
     "css-minimizer-webpack-plugin": "3.0.2",
     "html-webpack-plugin": "5.3.2",
     "terser-webpack-plugin": "5.2.0",
+    "webpack-merge": "5.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "path-browserify": "1.0.1",
     "less-loader": "8.0.0",
@@ -46,34 +45,33 @@
     "source-map-loader": "3.0.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
+    "@teambit/react.rendering.ssr": "0.0.3",
     "@teambit/harmony": "0.3.3",
-    "@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.802",
+    "@teambit/aspect-loader": "0.0.805",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.483",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.488",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/cli": "0.0.534",
-    "@teambit/logger": "0.0.627",
+    "@teambit/cli": "0.0.536",
+    "@teambit/logger": "0.0.629",
     "@teambit/ui-foundation.cli.ui-server-console": "0.0.491",
-    "@teambit/bundler": "0.0.802",
-    "@teambit/component": "0.0.802",
-    "@teambit/express": "0.0.632",
-    "@teambit/graphql": "0.0.802",
+    "@teambit/bundler": "0.0.805",
+    "@teambit/component": "0.0.805",
+    "@teambit/express": "0.0.634",
+    "@teambit/graphql": "0.0.805",
     "@teambit/toolbox.network.get-port": "0.0.113",
-    "@teambit/aspect": "0.0.802",
-    "@teambit/cache": "0.0.627",
-    "@teambit/pubsub": "0.0.802",
-    "@teambit/react-router": "0.0.802",
-    "@teambit/ui-foundation.ui.rendering.html": "0.0.69",
+    "@teambit/aspect": "0.0.805",
+    "@teambit/cache": "0.0.629",
+    "@teambit/pubsub": "0.0.805",
+    "@teambit/react-router": "0.0.805",
     "@teambit/design.theme.icons-font": "2.0.8",
     "@teambit/design.ui.tooltip": "0.0.352",
     "@teambit/ui-foundation.ui.global-loader": "0.0.487",
     "@teambit/webpack.modules.generate-style-loaders": "0.0.103",
     "@teambit/webpack.modules.style-regexps": "0.0.132",
-    "@teambit/webpack": "0.0.802"
+    "@teambit/webpack": "0.0.805"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -83,19 +81,18 @@
     "@types/express": "4.17.13",
     "@types/webpack": "5.28.0",
     "@types/fs-extra": "9.0.7",
-    "@types/lodash.compact": "3.0.6",
-    "@types/react-dom": "^17.0.5",
     "@types/mini-css-extract-plugin": "2.2.0",
     "@types/postcss-normalize": "9.0.1",
     "@types/node": "12.20.4",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
-    "@types/jest": "^26.0.0"
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.316",
+    "@teambit/legacy": "1.0.319",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1659151732866.js → preview-1659456045857.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.802/dist/ui.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.802/dist/ui.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.805/dist/ui.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.805/dist/ui.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/ssr-middleware/ssr-middleware.ts

@@ -1,10 +1,9 @@
-import type { Assets } from '@teambit/ui-foundation.ui.rendering.html';
-import { Request, Response, NextFunction } from 'express';
+import { browserFromExpress } from '@teambit/react.rendering.ssr';
+import type { HtmlAssets, SsrSession } from '@teambit/react.rendering.ssr';
+import type { Logger } from '@teambit/logger';
+import type { Request, Response, NextFunction } from 'express';
 import path from 'path';
 import * as fs from 'fs-extra';
-import type { Logger } from '@teambit/logger';
-import type { SsrContent } from '../react-ssr';
-import { extractBrowserData } from './extract-browser-data';
 
 const denyList = /^\/favicon.ico$/;
 
@@ -27,10 +26,10 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
   const { render } = runtime;
   const assets = { ...runtime.assets, title };
 
-  return async function serverRenderMiddleware(req: Request, res: Response, next: NextFunction) {
-    const { query, url } = req;
+  return async function serverRenderMiddleware(request: Request, response: Response, next: NextFunction) {
+    const { query, url } = request;
 
-    const browser = extractBrowserData(req, port);
+    const browser = browserFromExpress(request, port);
 
     if (denyList.test(url)) {
       logger.debug(`[ssr] skipping static denyList file ${url}`);
@@ -44,14 +43,14 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
       return;
     }
 
-    logger.debug(`[ssr] ${req.method} ${url}`);
-    const server = { port, request: req, response: res };
-    const props: SsrContent = { assets, browser, server };
+    logger.debug(`[ssr] ${request.method} ${url}`);
+    const server = { port, request, response };
+    const props: SsrSession = { assets, browser, request, response, server };
 
     try {
       const rendered = await render(props);
-      res.set('Cache-Control', 'no-cache');
-      res.send(rendered);
+      response.set('Cache-Control', 'no-cache');
+      response.send(rendered);
       logger.debug(`[ssr] success '${url}'`);
     } catch (e: any) {
       logger.error(`[ssr] failed at '${url}'`, e);
@@ -62,7 +61,7 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
 
 async function loadRuntime(root: string, { logger }: { logger: Logger }) {
   let render: (...arg: any[]) => any;
-  let assets: Assets | undefined;
+  let assets: HtmlAssets | undefined;
 
   try {
     const entryFilepath = path.join(root, 'ssr', 'index.js');
@@ -84,7 +83,7 @@ async function loadRuntime(root: string, { logger }: { logger: Logger }) {
     }
 
     const imported = await import(entryFilepath);
-    render = imported?.render;
+    render = imported?.default || imported?.render;
 
     if (!render || typeof render !== 'function') {
       logger.warn('[ssr] - index file does not export a render() function. Skipping setup.');
@@ -120,7 +119,7 @@ async function parseManifest(filepath: string, logger?: Logger) {
 }
 
 function getAssets(manifest: ManifestFile) {
-  const assets: Assets = { css: [], js: [] };
+  const assets: HtmlAssets = { css: [], js: [] };
 
   assets.css = manifest.entrypoints?.filter((x) => x.endsWith('css')).map((x) => path.join('/', x));
   assets.js = manifest.entrypoints?.filter((x) => x.endsWith('js')).map((x) => path.join('/', x));

package/ui-root.tsx

@@ -1,6 +1,6 @@
 import { AspectDefinition } from '@teambit/aspect-loader';
 import { ComponentDir } from '@teambit/bundler';
-import { Component } from '@teambit/component';
+import { Component, ComponentID, ResolveAspectsOptions } from '@teambit/component';
 import { ProxyConfigArrayItem } from 'webpack-dev-server';
 
 // TODO: remove this extends "ComponentDir", this should be part of the workspace alone since scope
@@ -27,9 +27,13 @@ export interface UIRoot extends ComponentDir {
   };
 
   /**
-   * resolve all aspects in the UI root.
+   * resolve aspects in the UI root. (resolve all if componentIds not provided)
    */
-  resolveAspects(runtimeName: string): Promise<AspectDefinition[]>;
+  resolveAspects(
+    runtimeName: string,
+    componentIds?: ComponentID[],
+    opts?: ResolveAspectsOptions
+  ): Promise<AspectDefinition[]>;
 
   /**
    * resolve components from a given pattern.

package/ui.ui.runtime.tsx

@@ -3,18 +3,17 @@ 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 { ServerRenderer, BrowserRenderer } from '@teambit/react.rendering.ssr';
+import type { SsrSession, RenderPlugin, ContextProps } from '@teambit/react.rendering.ssr';
 
 import React, { ReactNode, ComponentType } from 'react';
 
 import { UIRootFactory } from './ui-root.ui';
 import { UIAspect, UIRuntime } from './ui.aspect';
 import { ClientContext } from './ui/client-context';
-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 RenderPluginsSlot = SlotRegistry<RenderPlugins>;
+type RenderPluginsSlot = SlotRegistry<RenderPlugin<any, any>>;
 type UIRootRegistry = SlotRegistry<UIRootFactory>;
 
 /**
@@ -45,8 +44,8 @@ export class UiUI {
     const hudItems = this.hudSlot.values();
     const lifecyclePlugins = this.getLifecyclePlugins();
 
-    const reactSsr = new ReactSSR(lifecyclePlugins);
-    await reactSsr.renderBrowser(
+    const reactSsr = new BrowserRenderer(lifecyclePlugins);
+    await reactSsr.render(
       <ClientContext>
         {hudItems}
         {routes}
@@ -55,7 +54,7 @@ export class UiUI {
   }
 
   /** render dehydrated server-side */
-  async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {
+  async renderSsr(rootExtension: string, ssrContent: SsrSession): Promise<string> {
     const rootFactory = this.getRoot(rootExtension);
     if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
 
@@ -64,8 +63,8 @@ export class UiUI {
     const hudItems = this.hudSlot.values();
     const lifecyclePlugins = this.getLifecyclePlugins();
 
-    const reactSsr = new ReactSSR(lifecyclePlugins);
-    const fullHtml = await reactSsr.renderServer(
+    const reactSsr = new ServerRenderer(lifecyclePlugins);
+    const fullHtml = await reactSsr.render(
       <ClientContext>
         {hudItems}
         {routes}
@@ -86,23 +85,27 @@ export class UiUI {
    * @deprecated replace with `.registerRenderHooks({ reactContext })`.
    */
   registerContext<T>(context: ComponentType<ContextProps<T>>) {
-    this.renderPluginsSlot.register({
-      reactContext: context,
-    });
+    this.renderPluginsSlot.register({ reactContext: context });
   }
 
   registerRoot(uiRoot: UIRootFactory) {
     return this.uiRootSlot.register(uiRoot);
   }
 
-  registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>) {
-    return this.renderPluginsSlot.register(plugins);
+  registerRenderHooks<T, Y>(plugin: RenderPlugin<T, Y>) {
+    return this.renderPluginsSlot.register(plugin);
   }
 
   private getLifecyclePlugins() {
-    const lifecyclePlugins = this.renderPluginsSlot.toArray();
+    const lifecyclePlugins = this.renderPluginsSlot.toArray().map(([key, plugin]) => {
+      if (plugin.key) return plugin;
+
+      // for backward compatibility
+      return { ...plugin, key };
+    });
+
     // react-router should register its plugin, when we can reverse it's dependency to depend on Ui
-    lifecyclePlugins.unshift([ReactRouterAspect.id, this.router.renderPlugin]);
+    lifecyclePlugins.unshift(this.router.renderPlugin);
 
     return lifecyclePlugins;
   }
@@ -111,7 +114,7 @@ export class UiUI {
     return this.uiRootSlot.get(rootExtension);
   }
 
-  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];
+  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugin>()];
 
   static dependencies = [GraphqlAspect, ReactRouterAspect];
 
@@ -124,7 +127,7 @@ export class UiUI {
   ) {
     const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);
 
-    uiUi.registerRenderHooks(GraphqlUi.renderPlugins);
+    if (GraphqlUi) uiUi.registerRenderHooks(GraphqlUi.renderPlugins);
 
     return uiUi;
   }

package/dist/react-ssr/index.d.ts

@@ -1,5 +0,0 @@
-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/dist/react-ssr/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ReactSSR", {
-  enumerable: true,
-  get: function () {
-    return _reactSsr().ReactSSR;
-  }
-});
-
-function _reactSsr() {
-  const data = require("./react-ssr");
-
-  _reactSsr = function () {
-    return data;
-  };
-
-  return data;
-}
-
-//# sourceMappingURL=index.js.map

package/dist/react-ssr/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactSSR } from './react-ssr';\n\nexport type { ContextProps, RenderPlugins } from './render-lifecycle';\nexport type { BrowserData, ParsedQuery } from './request-browser';\nexport type { RequestServer } from './request-server';\nexport type { SsrContent } from './ssr-content';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/react-ssr/react-ssr.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import type { RenderPlugins } from './render-lifecycle';
-import type { SsrContent } from './ssr-content';
-declare type RenderPluginsWithId = [key: string, hooks: RenderPlugins];
-export declare class ReactSSR {
-    private lifecycleHooks;
-    constructor(lifecycleHooks: RenderPluginsWithId[]);
-    /** render and rehydrate client-side */
-    renderBrowser(children: ReactNode): Promise<void>;
-    /** render dehydrated server-side */
-    renderServer(children: ReactNode, { assets, browser, server }?: SsrContent): Promise<string>;
-    private triggerBrowserInit;
-    private triggerServerInit;
-    private triggerBeforeHydrateHook;
-    private triggerHydrateHook;
-    private triggerBeforeRender;
-    private getReactContexts;
-    private deserialize;
-    private serialize;
-}
-export {};