@teambit/ui 0.0.636 → 0.0.640

package/{__preview-1643426469482.js → __preview-1643858579620.js}

@@ -1 +1 @@
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.636/dist/ui.docs.md')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.640/dist/ui.docs.md')]

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import { UIAspect, UIRuntime } from './ui.aspect';
+export { UIAspect, UIRuntime, UIAspect as default };
 export * from './events';
 export { UIRoot, PostStartOptions, ProxyEntry } from './ui-root';
 export type { UiMain, PreStartOpts } from './ui.main.runtime';
-export type { UiUI, ContextProps } from './ui.ui.runtime';
-export { StartPlugin, StartPluginOptions } from './start-plugin';
-export type { RenderLifecycle } from './render-lifecycle';
-export { UIRootUI, UIRootFactory } from './ui-root.ui';
+export type { UiUI } from './ui.ui.runtime';
+export type { StartPlugin, StartPluginOptions } from './start-plugin';
+export type { BrowserData, RenderPlugins, 
+/** @deprecated - legacy name, use RenderPlugins */
+RenderPlugins as RenderLifecycle, } from './react-ssr';
+export type { UIRootUI, UIRootFactory } from './ui-root.ui';
 export type { UIServer } from './ui-server';
-export { UIAspect, UIRuntime };
-export type { BrowserData } from './ssr/request-browser';
-export default UIAspect;
 export { DataQueryResult, useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
 export { useMutation } from '@apollo/client';

package/dist/index.js

@@ -9,10 +9,6 @@ var _exportNames = {
   UIRoot: true,
   PostStartOptions: true,
   ProxyEntry: true,
-  StartPlugin: true,
-  StartPluginOptions: true,
-  UIRootUI: true,
-  UIRootFactory: true,
   DataQueryResult: true,
   useDataQuery: true,
   useMutation: true
@@ -35,18 +31,6 @@ Object.defineProperty(exports, "ProxyEntry", {
     return _uiRoot().ProxyEntry;
   }
 });
-Object.defineProperty(exports, "StartPlugin", {
-  enumerable: true,
-  get: function () {
-    return _startPlugin().StartPlugin;
-  }
-});
-Object.defineProperty(exports, "StartPluginOptions", {
-  enumerable: true,
-  get: function () {
-    return _startPlugin().StartPluginOptions;
-  }
-});
 Object.defineProperty(exports, "UIAspect", {
   enumerable: true,
   get: function () {
@@ -59,25 +43,18 @@ Object.defineProperty(exports, "UIRoot", {
     return _uiRoot().UIRoot;
   }
 });
-Object.defineProperty(exports, "UIRootFactory", {
-  enumerable: true,
-  get: function () {
-    return _uiRoot2().UIRootFactory;
-  }
-});
-Object.defineProperty(exports, "UIRootUI", {
+Object.defineProperty(exports, "UIRuntime", {
   enumerable: true,
   get: function () {
-    return _uiRoot2().UIRootUI;
+    return _ui().UIRuntime;
   }
 });
-Object.defineProperty(exports, "UIRuntime", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _ui().UIRuntime;
+    return _ui().UIAspect;
   }
 });
-exports.default = void 0;
 Object.defineProperty(exports, "useDataQuery", {
   enumerable: true,
   get: function () {
@@ -125,26 +102,6 @@ function _uiRoot() {
   return data;
 }
 
-function _startPlugin() {
-  const data = require("./start-plugin");
-
-  _startPlugin = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiRoot2() {
-  const data = require("./ui-root.ui");
-
-  _uiRoot2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _uiFoundationUiHooks() {
   const data = require("@teambit/ui-foundation.ui.hooks.use-data-query");
 
@@ -165,9 +122,4 @@ function _client() {
   return data;
 }
 
-var _default = _ui().UIAspect; // using `useDataQuery` from this package is deprecated, use `@teambit/ui-foundation.ui.hooks.use-data-query` directly
-
-
-exports.default = _default;
-
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["UIAspect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAOA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;eALeA,c,EAEf","sourcesContent":["import { UIAspect, UIRuntime } from './ui.aspect';\n\nexport * from './events';\nexport { UIRoot, PostStartOptions, ProxyEntry } from './ui-root';\nexport type { UiMain, PreStartOpts } from './ui.main.runtime';\nexport type { UiUI, ContextProps } from './ui.ui.runtime';\nexport { StartPlugin, StartPluginOptions } from './start-plugin';\nexport type { RenderLifecycle } from './render-lifecycle';\nexport { UIRootUI, UIRootFactory } from './ui-root.ui';\nexport type { UIServer } from './ui-server';\nexport { UIAspect, UIRuntime };\nexport type { BrowserData } from './ssr/request-browser';\nexport default UIAspect;\n\n// using `useDataQuery` from this package is deprecated, use `@teambit/ui-foundation.ui.hooks.use-data-query` directly\nexport { DataQueryResult, useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\n// temporary. TODO: fix this\nexport { useMutation } from '@apollo/client';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAcA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["import { UIAspect, UIRuntime } from './ui.aspect';\n\nexport { UIAspect, UIRuntime, UIAspect as default };\n\nexport * from './events';\nexport { UIRoot, PostStartOptions, ProxyEntry } from './ui-root';\nexport type { UiMain, PreStartOpts } from './ui.main.runtime';\nexport type { UiUI } from './ui.ui.runtime';\nexport type { StartPlugin, StartPluginOptions } from './start-plugin';\nexport type {\n  BrowserData,\n  RenderPlugins,\n  /** @deprecated - legacy name, use RenderPlugins */\n  RenderPlugins as RenderLifecycle,\n} from './react-ssr';\nexport type { UIRootUI, UIRootFactory } from './ui-root.ui';\nexport type { UIServer } from './ui-server';\n\n// using `useDataQuery` from this package is deprecated, use `@teambit/ui-foundation.ui.hooks.use-data-query` directly\nexport { DataQueryResult, useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\n// temporary. TODO: fix this\nexport { useMutation } from '@apollo/client';\n"]}

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","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"]}

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

@@ -0,0 +1,21 @@
+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 {};

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

@@ -0,0 +1,285 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.promise.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactSSR = void 0;
+
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _webpackMerge() {
+  const data = require("webpack-merge");
+
+  _webpackMerge = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.compact"));
+
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactDom() {
+  const data = _interopRequireDefault(require("react-dom"));
+
+  _reactDom = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _server() {
+  const data = _interopRequireDefault(require("react-dom/server"));
+
+  _server = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _uiFoundationUiRendering() {
+  const data = require("@teambit/ui-foundation.ui.rendering.html");
+
+  _uiFoundationUiRendering = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseUiUtils() {
+  const data = require("@teambit/base-ui.utils.composer");
+
+  _baseUiUtils = function () {
+    return data;
+  };
+
+  return data;
+}
+
+class ReactSSR {
+  constructor( // create array once to keep consistent indexes
+  lifecycleHooks) {
+    this.lifecycleHooks = lifecycleHooks;
+  }
+  /** render and rehydrate client-side */
+
+
+  async renderBrowser(children) {
+    // (*) 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 = /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
+      components: reactContexts
+    }, children);
+
+    renderContexts = await this.triggerBeforeHydrateHook(renderContexts, app); // (3) render / rehydrate
+
+    const mountPoint = document.getElementById(_uiFoundationUiRendering().mountPointId); // .render() already runs `.hydrate()` behind the scenes.
+    // in the future, we may want to replace it with .hydrate()
+
+    _reactDom().default.render(app, mountPoint);
+
+    await this.triggerHydrateHook(renderContexts, mountPoint); // (3.1) remove ssr only styles
+
+    (0, _uiFoundationUiRendering().ssrCleanup)();
+  }
+  /** render dehydrated server-side */
+
+
+  async renderServer(children, {
+    assets,
+    browser,
+    server
+  } = {}) {
+    // (1) init
+    let renderContexts = await this.triggerServerInit(browser, server); // (2) make React dom
+
+    const reactContexts = this.getReactContexts(renderContexts);
+
+    const app = /*#__PURE__*/_react().default.createElement(_uiFoundationUiRendering().MountPoint, null, /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
+      components: reactContexts
+    }, children));
+
+    renderContexts = await this.triggerBeforeRender(renderContexts, app); // (3) render (to string)
+
+    const renderedApp = _server().default.renderToString(app); // (*) serialize state
+
+
+    const realtimeAssets = await this.serialize(renderContexts, app); // @ts-ignore // TODO upgrade 'webpack-merge'
+
+    const totalAssets = (0, _webpackMerge().merge)(assets, realtimeAssets); // (4) render html-template (to string)
+
+    const html = /*#__PURE__*/_react().default.createElement(_uiFoundationUiRendering().Html, {
+      assets: totalAssets,
+      withDevTools: true,
+      fullHeight: true,
+      ssr: true
+    });
+
+    const renderedHtml = `<!DOCTYPE html>${_server().default.renderToStaticMarkup(html)}`;
+
+    const fullHtml = _uiFoundationUiRendering().Html.fillContent(renderedHtml, renderedApp); // (5) serve
+
+
+    return fullHtml;
+  }
+
+  triggerBrowserInit(deserializedState) {
+    const {
+      lifecycleHooks
+    } = this;
+    const initPromises = lifecycleHooks.map(([, hooks], idx) => {
+      var _hooks$browserInit;
+
+      const state = deserializedState[idx];
+      return (_hooks$browserInit = hooks.browserInit) === null || _hooks$browserInit === void 0 ? void 0 : _hooks$browserInit.call(hooks, state);
+    });
+    return Promise.all(initPromises);
+  }
+
+  triggerServerInit(browser, server) {
+    const {
+      lifecycleHooks
+    } = this;
+    const promises = lifecycleHooks.map(([, hooks]) => {
+      var _hooks$serverInit;
+
+      return (_hooks$serverInit = hooks.serverInit) === null || _hooks$serverInit === void 0 ? void 0 : _hooks$serverInit.call(hooks, {
+        browser,
+        server
+      });
+    });
+    return Promise.all(promises);
+  }
+
+  triggerBeforeHydrateHook(renderContexts, app) {
+    const {
+      lifecycleHooks
+    } = this;
+    const promises = lifecycleHooks.map(async ([, hooks], idx) => {
+      var _hooks$onBeforeHydrat;
+
+      const ctx = renderContexts[idx];
+      const nextCtx = await ((_hooks$onBeforeHydrat = hooks.onBeforeHydrate) === null || _hooks$onBeforeHydrat === void 0 ? void 0 : _hooks$onBeforeHydrat.call(hooks, ctx, app));
+      return nextCtx || ctx;
+    });
+    return Promise.all(promises);
+  }
+
+  async triggerHydrateHook(renderContexts, mountPoint) {
+    const {
+      lifecycleHooks
+    } = this;
+    const promises = lifecycleHooks.map(([, hooks], idx) => {
+      var _hooks$onHydrate;
+
+      const renderCtx = renderContexts[idx];
+      return (_hooks$onHydrate = hooks.onHydrate) === null || _hooks$onHydrate === void 0 ? void 0 : _hooks$onHydrate.call(hooks, renderCtx, mountPoint);
+    });
+    await Promise.all(promises);
+  }
+
+  async triggerBeforeRender(renderContexts, app) {
+    const {
+      lifecycleHooks
+    } = this;
+    const promises = lifecycleHooks.map(async ([, hooks], idx) => {
+      var _hooks$onBeforeRender;
+
+      const ctx = renderContexts[idx];
+      const nextCtx = await ((_hooks$onBeforeRender = hooks.onBeforeRender) === null || _hooks$onBeforeRender === void 0 ? void 0 : _hooks$onBeforeRender.call(hooks, ctx, app));
+      return nextCtx || ctx;
+    });
+    await Promise.all(promises);
+    return renderContexts;
+  }
+
+  getReactContexts(renderContexts) {
+    const {
+      lifecycleHooks
+    } = this;
+    return (0, _lodash().default)(lifecycleHooks.map(([, hooks], idx) => {
+      const renderCtx = renderContexts[idx];
+      const props = {
+        renderCtx
+      };
+      return hooks.reactContext ? [hooks.reactContext, props] : undefined;
+    }));
+  }
+
+  async deserialize() {
+    const {
+      lifecycleHooks
+    } = this;
+
+    const rawAssets = _uiFoundationUiRendering().Html.popAssets();
+
+    const deserialized = await Promise.all(lifecycleHooks.map(async ([key, hooks]) => {
+      try {
+        var _hooks$deserialize;
+
+        const raw = rawAssets.get(key);
+        return (_hooks$deserialize = hooks.deserialize) === null || _hooks$deserialize === void 0 ? void 0 : _hooks$deserialize.call(hooks, raw);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`failed deserializing server state for aspect ${key}`, e);
+        return undefined;
+      }
+    }));
+    return deserialized;
+  }
+
+  async serialize(renderContexts, app) {
+    const {
+      lifecycleHooks
+    } = this;
+    const json = {};
+    const promises = lifecycleHooks.map(async ([key, hooks], idx) => {
+      var _hooks$serialize;
+
+      const renderCtx = renderContexts[idx];
+      const result = await ((_hooks$serialize = hooks.serialize) === null || _hooks$serialize === void 0 ? void 0 : _hooks$serialize.call(hooks, 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
+    };
+  }
+
+}
+
+exports.ReactSSR = ReactSSR;
+
+//# sourceMappingURL=react-ssr.js.map

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

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

package/dist/{render-lifecycle.d.ts → react-ssr/render-lifecycle.d.ts}

@@ -1,8 +1,12 @@
 import { ReactNode, ComponentType } from 'react';
-import { BrowserData } from './ssr/request-browser';
-import { RequestServer } from './ssr/request-server';
-import { ContextProps } from './ui.ui.runtime';
-export declare type RenderLifecycle<RenderCtx = any, Serialized = any> = {
+import { BrowserData } from './request-browser';
+import { RequestServer } from './request-server';
+export declare type ContextProps<T = any> = {
+    renderCtx?: T;
+    children: ReactNode;
+};
+/** Plugins for each step of the SSR and regular rendering lifecycle */
+export declare 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/dist/{ssr → react-ssr}/request-browser.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="node" />
 import type { IncomingHttpHeaders } from 'http';
-import type { Request } from 'express';
 export declare type ParsedQuery = {
     [key: string]: undefined | string | string[] | ParsedQuery | ParsedQuery[];
 };
@@ -55,7 +54,3 @@ export declare type BrowserData = {
     };
     cookie?: string;
 };
-/**
- * extract relevant information from Express request.
- */
-export declare function requestToObj(req: Request, port: number): BrowserData;

package/dist/react-ssr/request-browser.js

@@ -0,0 +1,3 @@
+"use strict";
+
+//# sourceMappingURL=request-browser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

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

@@ -0,0 +1,6 @@
+import { Request } from 'express';
+import { BrowserData } from '../react-ssr';
+/**
+ * extract relevant information from Express request.
+ */
+export declare function extractBrowserData(req: Request, port: number): BrowserData;

package/dist/{ssr/request-browser.js → ssr-middleware/extract-browser-data.js}

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.requestToObj = requestToObj;
+exports.extractBrowserData = extractBrowserData;
 
 /**
  * extract relevant information from Express request.
  */
-function requestToObj(req, port) {
-  // apparently port is not readily available in request.
+function extractBrowserData(req, port) {
   const browser = {
     connection: {
       secure: req.secure,
       headers: req.headers,
       body: req.body
     },
-    // trying to match to browser.location
+    // rebuild browser location from request, +port
     location: {
       host: `${req.hostname}:${port}`,
       hostname: req.hostname,
@@ -33,4 +32,4 @@ function requestToObj(req, port) {
   return browser;
 }
 
-//# sourceMappingURL=request-browser.js.map
+//# sourceMappingURL=extract-browser-data.js.map

package/dist/ssr-middleware/extract-browser-data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["extract-browser-data.ts"],"names":["extractBrowserData","req","port","browser","connection","secure","headers","body","location","host","hostname","href","protocol","url","origin","pathname","path","query","cookie","header"],"mappings":";;;;;;;AAGA;AACA;AACA;AAEO,SAASA,kBAAT,CAA4BC,GAA5B,EAA0CC,IAA1C,EAAwD;AAC7D,QAAMC,OAAoB,GAAG;AAC3BC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAEJ,GAAG,CAACI,MADF;AAEVC,MAAAA,OAAO,EAAEL,GAAG,CAACK,OAFH;AAGVC,MAAAA,IAAI,EAAEN,GAAG,CAACM;AAHA,KADe;AAM3B;AACAC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAG,GAAER,GAAG,CAACS,QAAS,IAAGR,IAAK,EADtB;AAERQ,MAAAA,QAAQ,EAAET,GAAG,CAACS,QAFN;AAGRC,MAAAA,IAAI,EAAG,GAAEV,GAAG,CAACW,QAAS,MAAKX,GAAG,CAACS,QAAS,IAAGR,IAAK,GAAED,GAAG,CAACY,GAAI,EAHlD;AAIRC,MAAAA,MAAM,EAAG,GAAEb,GAAG,CAACW,QAAS,MAAKX,GAAG,CAACS,QAAS,IAAGR,IAAK,EAJ1C;AAKRa,MAAAA,QAAQ,EAAEd,GAAG,CAACe,IALN;AAMRd,MAAAA,IANQ;AAORU,MAAAA,QAAQ,EAAG,GAAEX,GAAG,CAACW,QAAS,GAPlB;AAQRK,MAAAA,KAAK,EAAEhB,GAAG,CAACgB,KARH;AASRJ,MAAAA,GAAG,EAAEZ,GAAG,CAACY;AATD,KAPiB;AAkB3BK,IAAAA,MAAM,EAAEjB,GAAG,CAACkB,MAAJ,CAAW,QAAX;AAlBmB,GAA7B;AAqBA,SAAOhB,OAAP;AACD","sourcesContent":["import { Request } from 'express';\nimport { BrowserData } from '../react-ssr';\n\n/**\n * extract relevant information from Express request.\n */\n\nexport function extractBrowserData(req: Request, port: number) {\n  const browser: BrowserData = {\n    connection: {\n      secure: req.secure,\n      headers: req.headers,\n      body: req.body,\n    },\n    // rebuild browser location from request, +port\n    location: {\n      host: `${req.hostname}:${port}`,\n      hostname: req.hostname,\n      href: `${req.protocol}://${req.hostname}:${port}${req.url}`,\n      origin: `${req.protocol}://${req.hostname}:${port}`,\n      pathname: req.path,\n      port,\n      protocol: `${req.protocol}:`,\n      query: req.query,\n      url: req.url,\n    },\n    cookie: req.header('Cookie'),\n  };\n\n  return browser;\n}\n"]}

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

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

package/dist/ssr-middleware/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { createSsrMiddleware } from './ssr-middleware';\n"]}