@teambit/ui 0.0.800 → 0.0.803

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/index.d.ts +12 -5
  2. package/dist/index.js.map +1 -1
  3. package/dist/ssr-middleware/ssr-middleware.d.ts +2 -2
  4. package/dist/ssr-middleware/ssr-middleware.js +19 -17
  5. package/dist/ssr-middleware/ssr-middleware.js.map +1 -1
  6. package/dist/ui-root.d.ts +3 -3
  7. package/dist/ui-root.js.map +1 -1
  8. package/dist/ui.main.runtime.js +1 -1
  9. package/dist/ui.main.runtime.js.map +1 -1
  10. package/dist/ui.ui.runtime.d.ts +4 -5
  11. package/dist/ui.ui.runtime.js +27 -17
  12. package/dist/ui.ui.runtime.js.map +1 -1
  13. package/package-tar/teambit-ui-0.0.803.tgz +0 -0
  14. package/package.json +19 -22
  15. package/{preview-1658978882481.js → preview-1659271062546.js} +2 -2
  16. package/ssr-middleware/ssr-middleware.ts +14 -15
  17. package/ui-root.tsx +7 -3
  18. package/ui.ui.runtime.tsx +21 -18
  19. package/dist/react-ssr/index.d.ts +0 -5
  20. package/dist/react-ssr/index.js +0 -23
  21. package/dist/react-ssr/index.js.map +0 -1
  22. package/dist/react-ssr/react-ssr.d.ts +0 -21
  23. package/dist/react-ssr/react-ssr.js +0 -285
  24. package/dist/react-ssr/react-ssr.js.map +0 -1
  25. package/dist/react-ssr/render-lifecycle.d.ts +0 -56
  26. package/dist/react-ssr/render-lifecycle.js +0 -3
  27. package/dist/react-ssr/render-lifecycle.js.map +0 -1
  28. package/dist/react-ssr/request-browser.d.ts +0 -56
  29. package/dist/react-ssr/request-browser.js +0 -3
  30. package/dist/react-ssr/request-browser.js.map +0 -1
  31. package/dist/react-ssr/request-server.d.ts +0 -9
  32. package/dist/react-ssr/request-server.js +0 -3
  33. package/dist/react-ssr/request-server.js.map +0 -1
  34. package/dist/react-ssr/ssr-content.d.ts +0 -8
  35. package/dist/react-ssr/ssr-content.js +0 -3
  36. package/dist/react-ssr/ssr-content.js.map +0 -1
  37. package/dist/ssr-middleware/extract-browser-data.d.ts +0 -6
  38. package/dist/ssr-middleware/extract-browser-data.js +0 -35
  39. package/dist/ssr-middleware/extract-browser-data.js.map +0 -1
  40. package/package-tar/teambit-ui-0.0.800.tgz +0 -0
  41. package/react-ssr/index.ts +0 -6
  42. package/react-ssr/react-ssr.tsx +0 -183
  43. package/react-ssr/render-lifecycle.tsx +0 -58
  44. package/react-ssr/request-browser.ts +0 -55
  45. package/react-ssr/request-server.ts +0 -10
  46. package/react-ssr/ssr-content.ts +0 -9
  47. package/ssr-middleware/extract-browser-data.ts +0 -31
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/ui",
3
- "version": "0.0.800",
3
+ "version": "0.0.803",
4
4
  "homepage": "https://bit.dev/teambit/ui-foundation/ui",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.ui-foundation",
8
8
  "name": "ui",
9
- "version": "0.0.800"
9
+ "version": "0.0.803"
10
10
  },
11
11
  "dependencies": {
12
12
  "lodash": "4.17.21",
@@ -18,8 +18,6 @@
18
18
  "webpack": "5.51.1",
19
19
  "chalk": "2.4.2",
20
20
  "fs-extra": "10.0.0",
21
- "lodash.compact": "3.0.1",
22
- "webpack-merge": "5.8.0",
23
21
  "postcss-preset-env": "6.7.0",
24
22
  "mini-css-extract-plugin": "2.2.2",
25
23
  "webpack-manifest-plugin": "4.0.2",
@@ -27,6 +25,7 @@
27
25
  "css-minimizer-webpack-plugin": "3.0.2",
28
26
  "html-webpack-plugin": "5.3.2",
29
27
  "terser-webpack-plugin": "5.2.0",
28
+ "webpack-merge": "5.8.0",
30
29
  "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
31
30
  "path-browserify": "1.0.1",
32
31
  "less-loader": "8.0.0",
@@ -46,34 +45,33 @@
46
45
  "source-map-loader": "3.0.0",
47
46
  "@babel/runtime": "7.12.18",
48
47
  "core-js": "^3.0.0",
48
+ "@teambit/react.rendering.ssr": "0.0.3",
49
49
  "@teambit/harmony": "0.3.3",
50
- "@teambit/base-ui.utils.composer": "1.0.0",
51
50
  "@teambit/base-ui.loaders.loader-ribbon": "1.0.0",
52
51
  "@teambit/base-ui.theme.fonts.roboto": "1.0.0",
53
52
  "@teambit/base-ui.theme.theme-provider": "1.0.1",
54
- "@teambit/aspect-loader": "0.0.800",
53
+ "@teambit/aspect-loader": "0.0.803",
55
54
  "@teambit/toolbox.path.to-windows-compatible-path": "0.0.483",
56
55
  "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.488",
57
56
  "@teambit/bit-error": "0.0.394",
58
- "@teambit/cli": "0.0.532",
59
- "@teambit/logger": "0.0.625",
57
+ "@teambit/cli": "0.0.535",
58
+ "@teambit/logger": "0.0.628",
60
59
  "@teambit/ui-foundation.cli.ui-server-console": "0.0.491",
61
- "@teambit/bundler": "0.0.800",
62
- "@teambit/component": "0.0.800",
63
- "@teambit/express": "0.0.630",
64
- "@teambit/graphql": "0.0.800",
60
+ "@teambit/bundler": "0.0.803",
61
+ "@teambit/component": "0.0.803",
62
+ "@teambit/express": "0.0.633",
63
+ "@teambit/graphql": "0.0.803",
65
64
  "@teambit/toolbox.network.get-port": "0.0.113",
66
- "@teambit/aspect": "0.0.800",
67
- "@teambit/cache": "0.0.625",
68
- "@teambit/pubsub": "0.0.800",
69
- "@teambit/react-router": "0.0.800",
70
- "@teambit/ui-foundation.ui.rendering.html": "0.0.69",
65
+ "@teambit/aspect": "0.0.803",
66
+ "@teambit/cache": "0.0.628",
67
+ "@teambit/pubsub": "0.0.803",
68
+ "@teambit/react-router": "0.0.803",
71
69
  "@teambit/design.theme.icons-font": "2.0.8",
72
70
  "@teambit/design.ui.tooltip": "0.0.352",
73
71
  "@teambit/ui-foundation.ui.global-loader": "0.0.487",
74
72
  "@teambit/webpack.modules.generate-style-loaders": "0.0.103",
75
73
  "@teambit/webpack.modules.style-regexps": "0.0.132",
76
- "@teambit/webpack": "0.0.800"
74
+ "@teambit/webpack": "0.0.803"
77
75
  },
78
76
  "devDependencies": {
79
77
  "@types/lodash": "4.14.165",
@@ -83,19 +81,18 @@
83
81
  "@types/express": "4.17.13",
84
82
  "@types/webpack": "5.28.0",
85
83
  "@types/fs-extra": "9.0.7",
86
- "@types/lodash.compact": "3.0.6",
87
- "@types/react-dom": "^17.0.5",
88
84
  "@types/mini-css-extract-plugin": "2.2.0",
89
85
  "@types/postcss-normalize": "9.0.1",
90
86
  "@types/node": "12.20.4",
91
87
  "@types/mocha": "9.1.0",
92
88
  "@types/testing-library__jest-dom": "5.9.5",
93
- "@types/jest": "^26.0.0"
89
+ "@types/jest": "^26.0.0",
90
+ "@types/react-dom": "^17.0.5"
94
91
  },
95
92
  "peerDependencies": {
96
93
  "@apollo/client": "^3.0.0",
97
94
  "react-router-dom": "^6.0.0",
98
- "@teambit/legacy": "1.0.314",
95
+ "@teambit/legacy": "1.0.317",
99
96
  "react-dom": "^16.8.0 || ^17.0.0",
100
97
  "react": "^16.8.0 || ^17.0.0"
101
98
  },
@@ -1,5 +1,5 @@
1
- import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.800/dist/ui.composition.js';
2
- import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.800/dist/ui.docs.mdx';
1
+ import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.803/dist/ui.composition.js';
2
+ import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.803/dist/ui.docs.mdx';
3
3
 
4
4
  export const compositions = [compositions_0];
5
5
  export const overview = [overview_0];
@@ -1,10 +1,9 @@
1
- import type { Assets } from '@teambit/ui-foundation.ui.rendering.html';
2
- import { Request, Response, NextFunction } from 'express';
1
+ import { browserFromExpress } from '@teambit/react.rendering.ssr';
2
+ import type { HtmlAssets, SsrSession } from '@teambit/react.rendering.ssr';
3
+ import type { Logger } from '@teambit/logger';
4
+ import type { Request, Response, NextFunction } from 'express';
3
5
  import path from 'path';
4
6
  import * as fs from 'fs-extra';
5
- import type { Logger } from '@teambit/logger';
6
- import type { SsrContent } from '../react-ssr';
7
- import { extractBrowserData } from './extract-browser-data';
8
7
 
9
8
  const denyList = /^\/favicon.ico$/;
10
9
 
@@ -27,10 +26,10 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
27
26
  const { render } = runtime;
28
27
  const assets = { ...runtime.assets, title };
29
28
 
30
- return async function serverRenderMiddleware(req: Request, res: Response, next: NextFunction) {
31
- const { query, url } = req;
29
+ return async function serverRenderMiddleware(request: Request, response: Response, next: NextFunction) {
30
+ const { query, url } = request;
32
31
 
33
- const browser = extractBrowserData(req, port);
32
+ const browser = browserFromExpress(request, port);
34
33
 
35
34
  if (denyList.test(url)) {
36
35
  logger.debug(`[ssr] skipping static denyList file ${url}`);
@@ -44,14 +43,14 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
44
43
  return;
45
44
  }
46
45
 
47
- logger.debug(`[ssr] ${req.method} ${url}`);
48
- const server = { port, request: req, response: res };
49
- const props: SsrContent = { assets, browser, server };
46
+ logger.debug(`[ssr] ${request.method} ${url}`);
47
+ const server = { port, request, response };
48
+ const props: SsrSession = { assets, browser, request, response, server };
50
49
 
51
50
  try {
52
51
  const rendered = await render(props);
53
- res.set('Cache-Control', 'no-cache');
54
- res.send(rendered);
52
+ response.set('Cache-Control', 'no-cache');
53
+ response.send(rendered);
55
54
  logger.debug(`[ssr] success '${url}'`);
56
55
  } catch (e: any) {
57
56
  logger.error(`[ssr] failed at '${url}'`, e);
@@ -62,7 +61,7 @@ export async function createSsrMiddleware({ root, port, title, logger }: ssrRend
62
61
 
63
62
  async function loadRuntime(root: string, { logger }: { logger: Logger }) {
64
63
  let render: (...arg: any[]) => any;
65
- let assets: Assets | undefined;
64
+ let assets: HtmlAssets | undefined;
66
65
 
67
66
  try {
68
67
  const entryFilepath = path.join(root, 'ssr', 'index.js');
@@ -120,7 +119,7 @@ async function parseManifest(filepath: string, logger?: Logger) {
120
119
  }
121
120
 
122
121
  function getAssets(manifest: ManifestFile) {
123
- const assets: Assets = { css: [], js: [] };
122
+ const assets: HtmlAssets = { css: [], js: [] };
124
123
 
125
124
  assets.css = manifest.entrypoints?.filter((x) => x.endsWith('css')).map((x) => path.join('/', x));
126
125
  assets.js = manifest.entrypoints?.filter((x) => x.endsWith('js')).map((x) => path.join('/', x));
package/ui-root.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { AspectDefinition } from '@teambit/aspect-loader';
2
2
  import { ComponentDir } from '@teambit/bundler';
3
- import { Component } from '@teambit/component';
3
+ import { Component, ComponentID, ResolveAspectsOptions } from '@teambit/component';
4
4
  import { ProxyConfigArrayItem } from 'webpack-dev-server';
5
5
 
6
6
  // TODO: remove this extends "ComponentDir", this should be part of the workspace alone since scope
@@ -27,9 +27,13 @@ export interface UIRoot extends ComponentDir {
27
27
  };
28
28
 
29
29
  /**
30
- * resolve all aspects in the UI root.
30
+ * resolve aspects in the UI root. (resolve all if componentIds not provided)
31
31
  */
32
- resolveAspects(runtimeName: string): Promise<AspectDefinition[]>;
32
+ resolveAspects(
33
+ runtimeName: string,
34
+ componentIds?: ComponentID[],
35
+ opts?: ResolveAspectsOptions
36
+ ): Promise<AspectDefinition[]>;
33
37
 
34
38
  /**
35
39
  * resolve components from a given pattern.
package/ui.ui.runtime.tsx CHANGED
@@ -3,18 +3,17 @@ import { GraphqlAspect } from '@teambit/graphql';
3
3
  import { Slot, SlotRegistry } from '@teambit/harmony';
4
4
  import type { ReactRouterUI } from '@teambit/react-router';
5
5
  import { ReactRouterAspect } from '@teambit/react-router';
6
+ import { ServerRenderer, BrowserRenderer } from '@teambit/react.rendering.ssr';
7
+ import type { SsrSession, RenderPlugin, ContextProps } from '@teambit/react.rendering.ssr';
6
8
 
7
9
  import React, { ReactNode, ComponentType } from 'react';
8
10
 
9
11
  import { UIRootFactory } from './ui-root.ui';
10
12
  import { UIAspect, UIRuntime } from './ui.aspect';
11
13
  import { ClientContext } from './ui/client-context';
12
- import type { SsrContent } from './react-ssr/ssr-content';
13
- import { ContextProps, RenderPlugins } from './react-ssr/render-lifecycle';
14
- import { ReactSSR } from './react-ssr/react-ssr';
15
14
 
16
15
  type HudSlot = SlotRegistry<ReactNode>;
17
- type RenderPluginsSlot = SlotRegistry<RenderPlugins>;
16
+ type RenderPluginsSlot = SlotRegistry<RenderPlugin<any, any>>;
18
17
  type UIRootRegistry = SlotRegistry<UIRootFactory>;
19
18
 
20
19
  /**
@@ -45,8 +44,8 @@ export class UiUI {
45
44
  const hudItems = this.hudSlot.values();
46
45
  const lifecyclePlugins = this.getLifecyclePlugins();
47
46
 
48
- const reactSsr = new ReactSSR(lifecyclePlugins);
49
- await reactSsr.renderBrowser(
47
+ const reactSsr = new BrowserRenderer(lifecyclePlugins);
48
+ await reactSsr.render(
50
49
  <ClientContext>
51
50
  {hudItems}
52
51
  {routes}
@@ -55,7 +54,7 @@ export class UiUI {
55
54
  }
56
55
 
57
56
  /** render dehydrated server-side */
58
- async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {
57
+ async renderSsr(rootExtension: string, ssrContent: SsrSession): Promise<string> {
59
58
  const rootFactory = this.getRoot(rootExtension);
60
59
  if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
61
60
 
@@ -64,8 +63,8 @@ export class UiUI {
64
63
  const hudItems = this.hudSlot.values();
65
64
  const lifecyclePlugins = this.getLifecyclePlugins();
66
65
 
67
- const reactSsr = new ReactSSR(lifecyclePlugins);
68
- const fullHtml = await reactSsr.renderServer(
66
+ const reactSsr = new ServerRenderer(lifecyclePlugins);
67
+ const fullHtml = await reactSsr.render(
69
68
  <ClientContext>
70
69
  {hudItems}
71
70
  {routes}
@@ -86,23 +85,27 @@ export class UiUI {
86
85
  * @deprecated replace with `.registerRenderHooks({ reactContext })`.
87
86
  */
88
87
  registerContext<T>(context: ComponentType<ContextProps<T>>) {
89
- this.renderPluginsSlot.register({
90
- reactContext: context,
91
- });
88
+ this.renderPluginsSlot.register({ reactContext: context });
92
89
  }
93
90
 
94
91
  registerRoot(uiRoot: UIRootFactory) {
95
92
  return this.uiRootSlot.register(uiRoot);
96
93
  }
97
94
 
98
- registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>) {
99
- return this.renderPluginsSlot.register(plugins);
95
+ registerRenderHooks<T, Y>(plugin: RenderPlugin<T, Y>) {
96
+ return this.renderPluginsSlot.register(plugin);
100
97
  }
101
98
 
102
99
  private getLifecyclePlugins() {
103
- const lifecyclePlugins = this.renderPluginsSlot.toArray();
100
+ const lifecyclePlugins = this.renderPluginsSlot.toArray().map(([key, plugin]) => {
101
+ if (plugin.key) return plugin;
102
+
103
+ // for backward compatibility
104
+ return { ...plugin, key };
105
+ });
106
+
104
107
  // react-router should register its plugin, when we can reverse it's dependency to depend on Ui
105
- lifecyclePlugins.unshift([ReactRouterAspect.id, this.router.renderPlugin]);
108
+ lifecyclePlugins.unshift(this.router.renderPlugin);
106
109
 
107
110
  return lifecyclePlugins;
108
111
  }
@@ -111,7 +114,7 @@ export class UiUI {
111
114
  return this.uiRootSlot.get(rootExtension);
112
115
  }
113
116
 
114
- static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];
117
+ static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugin>()];
115
118
 
116
119
  static dependencies = [GraphqlAspect, ReactRouterAspect];
117
120
 
@@ -124,7 +127,7 @@ export class UiUI {
124
127
  ) {
125
128
  const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);
126
129
 
127
- uiUi.registerRenderHooks(GraphqlUi.renderPlugins);
130
+ if (GraphqlUi) uiUi.registerRenderHooks(GraphqlUi.renderPlugins);
128
131
 
129
132
  return uiUi;
130
133
  }
@@ -1,5 +0,0 @@
1
- export { ReactSSR } from './react-ssr';
2
- export type { ContextProps, RenderPlugins } from './render-lifecycle';
3
- export type { BrowserData, ParsedQuery } from './request-browser';
4
- export type { RequestServer } from './request-server';
5
- export type { SsrContent } from './ssr-content';
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "ReactSSR", {
7
- enumerable: true,
8
- get: function () {
9
- return _reactSsr().ReactSSR;
10
- }
11
- });
12
-
13
- function _reactSsr() {
14
- const data = require("./react-ssr");
15
-
16
- _reactSsr = function () {
17
- return data;
18
- };
19
-
20
- return data;
21
- }
22
-
23
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,21 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import type { RenderPlugins } from './render-lifecycle';
3
- import type { SsrContent } from './ssr-content';
4
- declare type RenderPluginsWithId = [key: string, hooks: RenderPlugins];
5
- export declare class ReactSSR {
6
- private lifecycleHooks;
7
- constructor(lifecycleHooks: RenderPluginsWithId[]);
8
- /** render and rehydrate client-side */
9
- renderBrowser(children: ReactNode): Promise<void>;
10
- /** render dehydrated server-side */
11
- renderServer(children: ReactNode, { assets, browser, server }?: SsrContent): Promise<string>;
12
- private triggerBrowserInit;
13
- private triggerServerInit;
14
- private triggerBeforeHydrateHook;
15
- private triggerHydrateHook;
16
- private triggerBeforeRender;
17
- private getReactContexts;
18
- private deserialize;
19
- private serialize;
20
- }
21
- export {};
@@ -1,285 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- require("core-js/modules/es.array.iterator.js");
6
-
7
- require("core-js/modules/es.promise.js");
8
-
9
- Object.defineProperty(exports, "__esModule", {
10
- value: true
11
- });
12
- exports.ReactSSR = void 0;
13
-
14
- function _react() {
15
- const data = _interopRequireDefault(require("react"));
16
-
17
- _react = function () {
18
- return data;
19
- };
20
-
21
- return data;
22
- }
23
-
24
- function _webpackMerge() {
25
- const data = require("webpack-merge");
26
-
27
- _webpackMerge = function () {
28
- return data;
29
- };
30
-
31
- return data;
32
- }
33
-
34
- function _lodash() {
35
- const data = _interopRequireDefault(require("lodash.compact"));
36
-
37
- _lodash = function () {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _reactDom() {
45
- const data = _interopRequireDefault(require("react-dom"));
46
-
47
- _reactDom = function () {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _server() {
55
- const data = _interopRequireDefault(require("react-dom/server"));
56
-
57
- _server = function () {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- function _uiFoundationUiRendering() {
65
- const data = require("@teambit/ui-foundation.ui.rendering.html");
66
-
67
- _uiFoundationUiRendering = function () {
68
- return data;
69
- };
70
-
71
- return data;
72
- }
73
-
74
- function _baseUiUtils() {
75
- const data = require("@teambit/base-ui.utils.composer");
76
-
77
- _baseUiUtils = function () {
78
- return data;
79
- };
80
-
81
- return data;
82
- }
83
-
84
- class ReactSSR {
85
- constructor( // create array once to keep consistent indexes
86
- lifecycleHooks) {
87
- this.lifecycleHooks = lifecycleHooks;
88
- }
89
- /** render and rehydrate client-side */
90
-
91
-
92
- async renderBrowser(children) {
93
- // (*) load state from the dom
94
- const deserializedState = await this.deserialize(); // (1) init setup client plugins
95
-
96
- let renderContexts = await this.triggerBrowserInit(deserializedState); // (2) make react dom
97
-
98
- const reactContexts = this.getReactContexts(renderContexts);
99
-
100
- const app = /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
101
- components: reactContexts
102
- }, children);
103
-
104
- renderContexts = await this.triggerBeforeHydrateHook(renderContexts, app); // (3) render / rehydrate
105
-
106
- const mountPoint = document.getElementById(_uiFoundationUiRendering().mountPointId); // .render() already runs `.hydrate()` behind the scenes.
107
- // in the future, we may want to replace it with .hydrate()
108
-
109
- _reactDom().default.render(app, mountPoint);
110
-
111
- await this.triggerHydrateHook(renderContexts, mountPoint); // (3.1) remove ssr only styles
112
-
113
- (0, _uiFoundationUiRendering().ssrCleanup)();
114
- }
115
- /** render dehydrated server-side */
116
-
117
-
118
- async renderServer(children, {
119
- assets,
120
- browser,
121
- server
122
- } = {}) {
123
- // (1) init
124
- let renderContexts = await this.triggerServerInit(browser, server); // (2) make React dom
125
-
126
- const reactContexts = this.getReactContexts(renderContexts);
127
-
128
- const app = /*#__PURE__*/_react().default.createElement(_uiFoundationUiRendering().MountPoint, null, /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
129
- components: reactContexts
130
- }, children));
131
-
132
- renderContexts = await this.triggerBeforeRender(renderContexts, app); // (3) render (to string)
133
-
134
- const renderedApp = _server().default.renderToString(app); // (*) serialize state
135
-
136
-
137
- const realtimeAssets = await this.serialize(renderContexts, app); // @ts-ignore // TODO upgrade 'webpack-merge'
138
-
139
- const totalAssets = (0, _webpackMerge().merge)(assets, realtimeAssets); // (4) render html-template (to string)
140
-
141
- const html = /*#__PURE__*/_react().default.createElement(_uiFoundationUiRendering().Html, {
142
- assets: totalAssets,
143
- withDevTools: true,
144
- fullHeight: true,
145
- ssr: true
146
- });
147
-
148
- const renderedHtml = `<!DOCTYPE html>${_server().default.renderToStaticMarkup(html)}`;
149
-
150
- const fullHtml = _uiFoundationUiRendering().Html.fillContent(renderedHtml, renderedApp); // (5) serve
151
-
152
-
153
- return fullHtml;
154
- }
155
-
156
- triggerBrowserInit(deserializedState) {
157
- const {
158
- lifecycleHooks
159
- } = this;
160
- const initPromises = lifecycleHooks.map(([, hooks], idx) => {
161
- var _hooks$browserInit;
162
-
163
- const state = deserializedState[idx];
164
- return (_hooks$browserInit = hooks.browserInit) === null || _hooks$browserInit === void 0 ? void 0 : _hooks$browserInit.call(hooks, state);
165
- });
166
- return Promise.all(initPromises);
167
- }
168
-
169
- triggerServerInit(browser, server) {
170
- const {
171
- lifecycleHooks
172
- } = this;
173
- const promises = lifecycleHooks.map(([, hooks]) => {
174
- var _hooks$serverInit;
175
-
176
- return (_hooks$serverInit = hooks.serverInit) === null || _hooks$serverInit === void 0 ? void 0 : _hooks$serverInit.call(hooks, {
177
- browser,
178
- server
179
- });
180
- });
181
- return Promise.all(promises);
182
- }
183
-
184
- triggerBeforeHydrateHook(renderContexts, app) {
185
- const {
186
- lifecycleHooks
187
- } = this;
188
- const promises = lifecycleHooks.map(async ([, hooks], idx) => {
189
- var _hooks$onBeforeHydrat;
190
-
191
- const ctx = renderContexts[idx];
192
- const nextCtx = await ((_hooks$onBeforeHydrat = hooks.onBeforeHydrate) === null || _hooks$onBeforeHydrat === void 0 ? void 0 : _hooks$onBeforeHydrat.call(hooks, ctx, app));
193
- return nextCtx || ctx;
194
- });
195
- return Promise.all(promises);
196
- }
197
-
198
- async triggerHydrateHook(renderContexts, mountPoint) {
199
- const {
200
- lifecycleHooks
201
- } = this;
202
- const promises = lifecycleHooks.map(([, hooks], idx) => {
203
- var _hooks$onHydrate;
204
-
205
- const renderCtx = renderContexts[idx];
206
- return (_hooks$onHydrate = hooks.onHydrate) === null || _hooks$onHydrate === void 0 ? void 0 : _hooks$onHydrate.call(hooks, renderCtx, mountPoint);
207
- });
208
- await Promise.all(promises);
209
- }
210
-
211
- async triggerBeforeRender(renderContexts, app) {
212
- const {
213
- lifecycleHooks
214
- } = this;
215
- const promises = lifecycleHooks.map(async ([, hooks], idx) => {
216
- var _hooks$onBeforeRender;
217
-
218
- const ctx = renderContexts[idx];
219
- const nextCtx = await ((_hooks$onBeforeRender = hooks.onBeforeRender) === null || _hooks$onBeforeRender === void 0 ? void 0 : _hooks$onBeforeRender.call(hooks, ctx, app));
220
- return nextCtx || ctx;
221
- });
222
- await Promise.all(promises);
223
- return renderContexts;
224
- }
225
-
226
- getReactContexts(renderContexts) {
227
- const {
228
- lifecycleHooks
229
- } = this;
230
- return (0, _lodash().default)(lifecycleHooks.map(([, hooks], idx) => {
231
- const renderCtx = renderContexts[idx];
232
- const props = {
233
- renderCtx
234
- };
235
- return hooks.reactContext ? [hooks.reactContext, props] : undefined;
236
- }));
237
- }
238
-
239
- async deserialize() {
240
- const {
241
- lifecycleHooks
242
- } = this;
243
-
244
- const rawAssets = _uiFoundationUiRendering().Html.popAssets();
245
-
246
- const deserialized = await Promise.all(lifecycleHooks.map(async ([key, hooks]) => {
247
- try {
248
- var _hooks$deserialize;
249
-
250
- const raw = rawAssets.get(key);
251
- return (_hooks$deserialize = hooks.deserialize) === null || _hooks$deserialize === void 0 ? void 0 : _hooks$deserialize.call(hooks, raw);
252
- } catch (e) {
253
- // eslint-disable-next-line no-console
254
- console.error(`failed deserializing server state for aspect ${key}`, e);
255
- return undefined;
256
- }
257
- }));
258
- return deserialized;
259
- }
260
-
261
- async serialize(renderContexts, app) {
262
- const {
263
- lifecycleHooks
264
- } = this;
265
- const json = {};
266
- const promises = lifecycleHooks.map(async ([key, hooks], idx) => {
267
- var _hooks$serialize;
268
-
269
- const renderCtx = renderContexts[idx];
270
- const result = await ((_hooks$serialize = hooks.serialize) === null || _hooks$serialize === void 0 ? void 0 : _hooks$serialize.call(hooks, renderCtx, app));
271
- if (!result) return;
272
- if (result.json) json[key] = result.json;
273
- });
274
- await Promise.all(promises); // more assets will be available in the future
275
-
276
- return {
277
- json
278
- };
279
- }
280
-
281
- }
282
-
283
- exports.ReactSSR = ReactSSR;
284
-
285
- //# sourceMappingURL=react-ssr.js.map