@tramvai/module-page-render-mode 1.72.2

package/README.md

@@ -0,0 +1,169 @@
+# @tramvai/module-page-render-mode
+
+Enable different rendering modes for specific pages:
+
+- `ssr`
+
+  SSR mode - provides default `tramvai` behaviour, render full page on server-side.
+
+- `client`
+
+  Client mode - render only fallback for page component, then render full page on browser, after hydration.
+  This mode can significally improve server rendering performance, but not recommended for pages with high SEO impact.
+  Header and Footer will be rendered as usual.
+
+## Installation
+
+You need to install `@tramvai/module-page-render-mode`
+
+```bash npm2yarn
+yarn add @tramvai/module-page-render-mode
+```
+
+And connect in the project
+
+```tsx
+import { createApp } from '@tramvai/core';
+import { PageRenderModeModule } from '@tramvai/module-page-render-mode';
+
+createApp({
+  name: 'tincoin',
+  modules: [ PageRenderModeModule ],
+});
+```
+
+## Usage
+
+### Rendering mode
+
+By default, this module connection has no changes, because default rendering mode is `ssr`.
+You can change this mode for all pages or for specific pages only.
+
+#### Default mode
+
+For global rendering mode changing, use token `PAGE_RENDER_DEFAULT_MODE`:
+
+```ts
+import { PAGE_RENDER_DEFAULT_MODE } from '@tramvai/module-page-render-mode';
+
+const provider = {
+  provide: PAGE_RENDER_DEFAULT_MODE,
+  useValue: 'client',
+};
+```
+
+#### Mode for specifig pages
+
+For specific pages available two options:
+
+- setting mode in route config:
+
+  ```ts
+  const routes = [
+    {
+      name: 'main',
+      path: '/',
+      config: {
+        bundle: 'mainDefault',
+        pageComponent: 'pageDefault',
+        pageRenderMode: 'client',
+      },
+    },
+  ]
+  ```
+
+- setting mode in page component static property:
+
+  ```tsx
+  const PageComponent = () => <div>Page</div>;
+
+  PageComponent.renderMode = 'client';
+
+  export default PageComponent;
+  ```
+
+### Fallback
+
+Standard behaviour for SPA applications - render some fallback with spinner or page skeleton before application was rendered.
+You can set default fallback for all pages with `client` render mode, or only for specific pages.
+
+#### Default fallback
+
+For setting default fallback, use token `PAGE_RENDER_DEFAULT_MODE`:
+
+```tsx
+import { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT } from '@tramvai/module-page-render-mode';
+
+const DefaultFallback = () => <div>Loading...</div>;
+
+const provider = {
+  provide: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
+  useValue: DefaultFallback,
+};
+```
+
+
+#### Fallback for specific pages
+
+For specific pages available few options:
+
+- add fallback to page component static property, use name `pageRenderFallbackDefault`:
+
+  ```tsx
+  const PageComponent = () => <div>Page</div>;
+
+  const PageFallback = () => <div>Loading...</div>;
+
+  PageComponent.components = {
+    'pageRenderFallbackDefault': PageFallback,
+  };
+
+  export default PageComponent;
+  ```
+
+- add default fallback to bundle, use name `pageRenderFallbackDefault`:
+
+  ```tsx
+  const DefaultFallback = () => <div>Loading...</div>;
+
+  const mainDefaultBundle = createBundle({
+    name: 'mainDefault',
+    components: {
+      'pageRenderFallbackDefault': DefaultFallback,
+    },
+  });
+
+  export default mainDefaultBundle;
+  ```
+
+- and you can add fallback in route config, use key `pageRenderFallbackComponent` with any fallback name you provided in bundle or page component:
+
+  ```ts
+  const routes = [
+    {
+      name: 'main',
+      path: '/',
+      config: {
+        bundle: 'mainDefault',
+        pageComponent: 'pageDefault',
+        pageRenderFallbackComponent: 'myOwnFallbackComponent',
+      },
+    },
+  ]
+  ```
+
+## Troubleshooting
+
+### Fallback name conflicts
+
+You might have a potential issue with conflict existing components and render fallback component names - `pageRenderFallbackComponent` and `pageRenderFallbackDefault`.
+For avoiding this issues, just change fallback name prefix using token `PAGE_RENDER_FALLBACK_COMPONENT_PREFIX`:
+
+```ts
+import { PAGE_RENDER_FALLBACK_COMPONENT_PREFIX } from '@tramvai/module-page-render-mode';
+
+const provider = {
+  provide: PAGE_RENDER_FALLBACK_COMPONENT_PREFIX,
+  useValue: 'myOwnRenderFallback',
+};
+```

package/lib/PageRenderWrapper.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const PageRenderWrapper: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export declare const pageRenderHOC: (WrapperPage: any) => (props: any) => JSX.Element;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './tokens';
+export declare class PageRenderModeModule {
+}

package/lib/index.es.js

@@ -0,0 +1,73 @@
+import { __decorate } from 'tslib';
+import { Module } from '@tramvai/core';
+import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
+import React, { useState, useEffect } from 'react';
+import { useDi } from '@tramvai/react';
+import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+import { useRoute } from '@tramvai/module-router';
+import { createToken } from '@tinkoff/dippy';
+
+const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = createToken('pageRenderFallbackComponentName');
+const PAGE_RENDER_DEFAULT_MODE = createToken('pageRenderDefaultMode');
+const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = createToken('pageRenderDefaultFallbackComponent');
+
+const PageRenderWrapper = ({ children }) => {
+    const [mounted, setMounted] = useState(false);
+    const { config } = useRoute();
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
+    const fallbackKey = useDi(PAGE_RENDER_FALLBACK_COMPONENT_PREFIX);
+    const defaultRenderMode = useDi(PAGE_RENDER_DEFAULT_MODE);
+    const DefaultFallbackComponent = useDi({
+        token: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
+        optional: true,
+    });
+    const { pageComponent, pageRenderMode } = config;
+    const { renderMode } = pageService.getComponent(pageComponent);
+    const FallbackComponent = pageService.resolveComponentFromConfig(fallbackKey) || DefaultFallbackComponent;
+    const mode = renderMode || pageRenderMode || defaultRenderMode;
+    useEffect(() => {
+        if (mode === 'client') {
+            setMounted(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (mode === 'client' && !mounted) {
+        if (FallbackComponent) {
+            return React.createElement(FallbackComponent, null);
+        }
+        return null;
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+const pageRenderHOC = (WrapperPage) => (props) => {
+    return (React.createElement(PageRenderWrapper, null,
+        React.createElement(WrapperPage, Object.assign({}, props))));
+};
+
+let PageRenderModeModule = class PageRenderModeModule {
+};
+PageRenderModeModule = __decorate([
+    Module({
+        providers: [
+            {
+                provide: LAYOUT_OPTIONS,
+                multi: true,
+                useValue: {
+                    wrappers: {
+                        page: pageRenderHOC,
+                    },
+                },
+            },
+            {
+                provide: PAGE_RENDER_FALLBACK_COMPONENT_PREFIX,
+                useValue: 'pageRenderFallback',
+            },
+            {
+                provide: PAGE_RENDER_DEFAULT_MODE,
+                useValue: 'ssr',
+            },
+        ],
+    })
+], PageRenderModeModule);
+
+export { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT, PAGE_RENDER_DEFAULT_MODE, PAGE_RENDER_FALLBACK_COMPONENT_PREFIX, PageRenderModeModule };

package/lib/index.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var core = require('@tramvai/core');
+var tokensRender = require('@tramvai/tokens-render');
+var React = require('react');
+var react = require('@tramvai/react');
+var tokensRouter = require('@tramvai/tokens-router');
+var moduleRouter = require('@tramvai/module-router');
+var dippy = require('@tinkoff/dippy');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = dippy.createToken('pageRenderFallbackComponentName');
+const PAGE_RENDER_DEFAULT_MODE = dippy.createToken('pageRenderDefaultMode');
+const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = dippy.createToken('pageRenderDefaultFallbackComponent');
+
+const PageRenderWrapper = ({ children }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const { config } = moduleRouter.useRoute();
+    const pageService = react.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
+    const fallbackKey = react.useDi(PAGE_RENDER_FALLBACK_COMPONENT_PREFIX);
+    const defaultRenderMode = react.useDi(PAGE_RENDER_DEFAULT_MODE);
+    const DefaultFallbackComponent = react.useDi({
+        token: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
+        optional: true,
+    });
+    const { pageComponent, pageRenderMode } = config;
+    const { renderMode } = pageService.getComponent(pageComponent);
+    const FallbackComponent = pageService.resolveComponentFromConfig(fallbackKey) || DefaultFallbackComponent;
+    const mode = renderMode || pageRenderMode || defaultRenderMode;
+    React.useEffect(() => {
+        if (mode === 'client') {
+            setMounted(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (mode === 'client' && !mounted) {
+        if (FallbackComponent) {
+            return React__default["default"].createElement(FallbackComponent, null);
+        }
+        return null;
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+const pageRenderHOC = (WrapperPage) => (props) => {
+    return (React__default["default"].createElement(PageRenderWrapper, null,
+        React__default["default"].createElement(WrapperPage, Object.assign({}, props))));
+};
+
+exports.PageRenderModeModule = class PageRenderModeModule {
+};
+exports.PageRenderModeModule = tslib.__decorate([
+    core.Module({
+        providers: [
+            {
+                provide: tokensRender.LAYOUT_OPTIONS,
+                multi: true,
+                useValue: {
+                    wrappers: {
+                        page: pageRenderHOC,
+                    },
+                },
+            },
+            {
+                provide: PAGE_RENDER_FALLBACK_COMPONENT_PREFIX,
+                useValue: 'pageRenderFallback',
+            },
+            {
+                provide: PAGE_RENDER_DEFAULT_MODE,
+                useValue: 'ssr',
+            },
+        ],
+    })
+], exports.PageRenderModeModule);
+
+exports.PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT;
+exports.PAGE_RENDER_DEFAULT_MODE = PAGE_RENDER_DEFAULT_MODE;
+exports.PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = PAGE_RENDER_FALLBACK_COMPONENT_PREFIX;

package/lib/tokens.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+import type { PageRenderMode } from '.';
+export declare const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX: string;
+export declare const PAGE_RENDER_DEFAULT_MODE: PageRenderMode;
+export declare const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT: ComponentType<any>;

package/lib/types.d.ts

@@ -0,0 +1 @@
+export declare type PageRenderMode = 'ssr' | 'client';

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tramvai/module-page-render-mode",
+  "version": "1.72.2",
+  "description": "Enable different rendering modes for pages",
+  "main": "lib/index.js",
+  "module": "lib/index.es.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Tinkoff/tramvai.git"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tramvai-build --for-publish",
+    "watch": "tsc -w",
+    "build-for-publish": "true"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@tinkoff/dippy": "0.7.38",
+    "@tramvai/core": "1.72.2",
+    "@tramvai/react": "1.72.2",
+    "@tramvai/module-router": "1.72.2",
+    "@tramvai/tokens-render": "1.72.2",
+    "@tramvai/tokens-router": "1.72.2",
+    "react": ">=16.8.0",
+    "tslib": "^2.0.3"
+  }
+}