@tramvai/module-render 2.70.1 → 2.72.0

package/lib/server/blocks/utils/fetchWebpackStats.es.js

@@ -0,0 +1,88 @@
+import * as path from 'path';
+import fetch from 'node-fetch';
+import { requireFunc } from './requireFunc.es.js';
+
+let appConfig;
+try {
+    appConfig = require('@tramvai/cli/lib/external/config').appConfig;
+}
+catch (e) { }
+let fetchStats = async () => {
+    throw new Error(`Unknown environment`);
+};
+if (process.env.NODE_ENV === 'development') {
+    fetchStats = async () => {
+        const { modern: configModern, staticHost, staticPort, output } = appConfig;
+        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${output.client}/${filename}`;
+        const request = await fetch(getUrl(configModern ? 'stats.modern.json' : 'stats.json'));
+        const stats = await request.json();
+        // static - популярная заглушка в env.development.js файлах, надо игнорировать, как было раньше
+        const hasAssetsPrefix = process.env.ASSETS_PREFIX && process.env.ASSETS_PREFIX !== 'static';
+        const publicPath = hasAssetsPrefix ? process.env.ASSETS_PREFIX : stats.publicPath;
+        return {
+            ...stats,
+            publicPath,
+        };
+    };
+}
+if (process.env.NODE_ENV === 'test') {
+    fetchStats = () => {
+        // mock for unit-testing as there is no real static return something just to make server render work
+        return Promise.resolve({ publicPath: 'http://localhost:4000/', assetsByChunkName: {} });
+    };
+}
+if (process.env.NODE_ENV === 'production') {
+    const SEARCH_PATHS = [process.cwd(), __dirname];
+    const webpackStats = (fileName) => {
+        let stats;
+        for (const dir of SEARCH_PATHS) {
+            try {
+                const statsPath = path.resolve(dir, fileName);
+                stats = requireFunc(statsPath);
+                break;
+            }
+            catch (e) {
+                // ignore errors as this function is used to load stats for several optional destinations
+                // and these destinations may not have stats file
+            }
+        }
+        if (!stats) {
+            return;
+        }
+        if (!process.env.ASSETS_PREFIX) {
+            if (process.env.STATIC_PREFIX) {
+                throw new Error('Required env variable "ASSETS_PREFIX" is not set. Instead of using "STATIC_PREFIX" env please define "ASSETS_PREFIX: STATIC_PREFIX + /compiled"');
+            }
+            throw new Error('Required env variable "ASSETS_PREFIX" is not set');
+        }
+        return {
+            ...stats,
+            publicPath: process.env.ASSETS_PREFIX,
+        };
+    };
+    const statsLegacy = webpackStats('stats.json');
+    const statsModern = webpackStats('stats.modern.json') || statsLegacy;
+    if (!statsLegacy) {
+        throw new Error(`Cannot find stats.json.
+  It should be placed in one of the next places:
+    ${SEARCH_PATHS.join('\n\t')}
+  In case it happens on deployment:
+    - In case you are using two independent jobs for building app
+      - Either do not split build command by two independent jobs and use one common job with "tramvai build" command without --buildType
+      - Or copy stats.json (and stats.modern.json if present) file from client build output to server output by yourself in your CI
+    - Otherwise report issue to tramvai team
+  In case it happens locally:
+    - prefer to use command "tramvai start-prod" to test prod-build locally
+    - copy stats.json next to built server.js file
+`);
+    }
+    fetchStats = (modern) => {
+        const stats = modern ? statsModern : statsLegacy;
+        return Promise.resolve(stats);
+    };
+}
+const fetchWebpackStats = async ({ modern, } = {}) => {
+    return fetchStats(modern);
+};
+
+export { fetchWebpackStats };

package/lib/server/blocks/utils/fetchWebpackStats.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var path = require('path');
+var fetch = require('node-fetch');
+var requireFunc = require('./requireFunc.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+var fetch__default = /*#__PURE__*/_interopDefaultLegacy(fetch);
+
+let appConfig;
+try {
+    appConfig = require('@tramvai/cli/lib/external/config').appConfig;
+}
+catch (e) { }
+let fetchStats = async () => {
+    throw new Error(`Unknown environment`);
+};
+if (process.env.NODE_ENV === 'development') {
+    fetchStats = async () => {
+        const { modern: configModern, staticHost, staticPort, output } = appConfig;
+        const getUrl = (filename) => `http://${staticHost}:${staticPort}/${output.client}/${filename}`;
+        const request = await fetch__default["default"](getUrl(configModern ? 'stats.modern.json' : 'stats.json'));
+        const stats = await request.json();
+        // static - популярная заглушка в env.development.js файлах, надо игнорировать, как было раньше
+        const hasAssetsPrefix = process.env.ASSETS_PREFIX && process.env.ASSETS_PREFIX !== 'static';
+        const publicPath = hasAssetsPrefix ? process.env.ASSETS_PREFIX : stats.publicPath;
+        return {
+            ...stats,
+            publicPath,
+        };
+    };
+}
+if (process.env.NODE_ENV === 'test') {
+    fetchStats = () => {
+        // mock for unit-testing as there is no real static return something just to make server render work
+        return Promise.resolve({ publicPath: 'http://localhost:4000/', assetsByChunkName: {} });
+    };
+}
+if (process.env.NODE_ENV === 'production') {
+    const SEARCH_PATHS = [process.cwd(), __dirname];
+    const webpackStats = (fileName) => {
+        let stats;
+        for (const dir of SEARCH_PATHS) {
+            try {
+                const statsPath = path__namespace.resolve(dir, fileName);
+                stats = requireFunc.requireFunc(statsPath);
+                break;
+            }
+            catch (e) {
+                // ignore errors as this function is used to load stats for several optional destinations
+                // and these destinations may not have stats file
+            }
+        }
+        if (!stats) {
+            return;
+        }
+        if (!process.env.ASSETS_PREFIX) {
+            if (process.env.STATIC_PREFIX) {
+                throw new Error('Required env variable "ASSETS_PREFIX" is not set. Instead of using "STATIC_PREFIX" env please define "ASSETS_PREFIX: STATIC_PREFIX + /compiled"');
+            }
+            throw new Error('Required env variable "ASSETS_PREFIX" is not set');
+        }
+        return {
+            ...stats,
+            publicPath: process.env.ASSETS_PREFIX,
+        };
+    };
+    const statsLegacy = webpackStats('stats.json');
+    const statsModern = webpackStats('stats.modern.json') || statsLegacy;
+    if (!statsLegacy) {
+        throw new Error(`Cannot find stats.json.
+  It should be placed in one of the next places:
+    ${SEARCH_PATHS.join('\n\t')}
+  In case it happens on deployment:
+    - In case you are using two independent jobs for building app
+      - Either do not split build command by two independent jobs and use one common job with "tramvai build" command without --buildType
+      - Or copy stats.json (and stats.modern.json if present) file from client build output to server output by yourself in your CI
+    - Otherwise report issue to tramvai team
+  In case it happens locally:
+    - prefer to use command "tramvai start-prod" to test prod-build locally
+    - copy stats.json next to built server.js file
+`);
+    }
+    fetchStats = (modern) => {
+        const stats = modern ? statsModern : statsLegacy;
+        return Promise.resolve(stats);
+    };
+}
+const fetchWebpackStats = async ({ modern, } = {}) => {
+    return fetchStats(modern);
+};
+
+exports.fetchWebpackStats = fetchWebpackStats;

package/lib/server/blocks/utils/flushFiles.es.js

@@ -0,0 +1,33 @@
+import uniq from '@tinkoff/utils/array/uniq';
+import flatten from '@tinkoff/utils/array/flatten';
+
+const isJs = (file) => /\.js$/.test(file) && !/\.hot-update\.js$/.test(file);
+const isCss = (file) => /\.css$/.test(file);
+const getFilesByType = (files) => {
+    const scripts = files.filter(isJs);
+    const styles = files.filter(isCss);
+    return {
+        scripts,
+        styles,
+    };
+};
+const flushFiles = (chunks, webpackStats, { ignoreDependencies = false, } = {}) => {
+    // при использовании namedChunkGroups во все entry-файлы как зависимость попадает runtimeChunk
+    // что при повторных вызовах flushChunks вызовет дублирование подключения manifest.js
+    // из-за чего приложение может запускаться несколько раз
+    // без поля namedChunkGroups flushChunks вернет только сами ассеты для чанков, без зависимостей
+    const { assetsByChunkName, namedChunkGroups } = webpackStats;
+    const resolvedChunks = [];
+    for (const chunk of chunks) {
+        if (!ignoreDependencies && (namedChunkGroups === null || namedChunkGroups === void 0 ? void 0 : namedChunkGroups[chunk])) {
+            resolvedChunks.push(...namedChunkGroups[chunk].chunks);
+        }
+        else {
+            resolvedChunks.push(chunk);
+        }
+    }
+    const files = flatten(uniq(resolvedChunks).map((chunk) => assetsByChunkName[chunk]));
+    return getFilesByType(files);
+};
+
+export { flushFiles, isCss, isJs };

package/lib/server/blocks/utils/flushFiles.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var uniq = require('@tinkoff/utils/array/uniq');
+var flatten = require('@tinkoff/utils/array/flatten');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+const isJs = (file) => /\.js$/.test(file) && !/\.hot-update\.js$/.test(file);
+const isCss = (file) => /\.css$/.test(file);
+const getFilesByType = (files) => {
+    const scripts = files.filter(isJs);
+    const styles = files.filter(isCss);
+    return {
+        scripts,
+        styles,
+    };
+};
+const flushFiles = (chunks, webpackStats, { ignoreDependencies = false, } = {}) => {
+    // при использовании namedChunkGroups во все entry-файлы как зависимость попадает runtimeChunk
+    // что при повторных вызовах flushChunks вызовет дублирование подключения manifest.js
+    // из-за чего приложение может запускаться несколько раз
+    // без поля namedChunkGroups flushChunks вернет только сами ассеты для чанков, без зависимостей
+    const { assetsByChunkName, namedChunkGroups } = webpackStats;
+    const resolvedChunks = [];
+    for (const chunk of chunks) {
+        if (!ignoreDependencies && (namedChunkGroups === null || namedChunkGroups === void 0 ? void 0 : namedChunkGroups[chunk])) {
+            resolvedChunks.push(...namedChunkGroups[chunk].chunks);
+        }
+        else {
+            resolvedChunks.push(chunk);
+        }
+    }
+    const files = flatten__default["default"](uniq__default["default"](resolvedChunks).map((chunk) => assetsByChunkName[chunk]));
+    return getFilesByType(files);
+};
+
+exports.flushFiles = flushFiles;
+exports.isCss = isCss;
+exports.isJs = isJs;

package/lib/server/blocks/utils/requireFunc.es.js

@@ -0,0 +1,5 @@
+const requireFunc = 
+// @ts-ignore
+typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require;
+
+export { requireFunc };

package/lib/server/blocks/utils/requireFunc.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const requireFunc = 
+// @ts-ignore
+typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require;
+
+exports.requireFunc = requireFunc;

package/lib/server/constants/performance.es.js

@@ -0,0 +1,3 @@
+const PRELOAD_JS = '__preloadJS';
+
+export { PRELOAD_JS };

package/lib/server/constants/performance.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const PRELOAD_JS = '__preloadJS';
+
+exports.PRELOAD_JS = PRELOAD_JS;

package/lib/server/htmlPageSchema.es.js

@@ -0,0 +1,33 @@
+import { staticRender, dynamicRender } from '@tinkoff/htmlpagebuilder';
+import { ResourceSlot } from '@tramvai/tokens-render';
+import { formatAttributes } from './utils.es.js';
+
+const { REACT_RENDER, HEAD_CORE_SCRIPTS, HEAD_DYNAMIC_SCRIPTS, HEAD_META, HEAD_POLYFILLS, HEAD_CORE_STYLES, HEAD_PERFORMANCE, HEAD_ANALYTICS, BODY_START, BODY_END, HEAD_ICONS, BODY_TAIL_ANALYTICS, BODY_TAIL, } = ResourceSlot;
+const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
+    return [
+        staticRender('<!DOCTYPE html>'),
+        staticRender(`<html ${formatAttributes(htmlAttrs, 'html')}>`),
+        staticRender('<head>'),
+        staticRender('<meta charset="UTF-8">'),
+        dynamicRender(HEAD_META),
+        dynamicRender(HEAD_PERFORMANCE),
+        dynamicRender(HEAD_CORE_STYLES),
+        dynamicRender(HEAD_POLYFILLS),
+        dynamicRender(HEAD_DYNAMIC_SCRIPTS),
+        dynamicRender(HEAD_CORE_SCRIPTS),
+        dynamicRender(HEAD_ANALYTICS),
+        dynamicRender(HEAD_ICONS),
+        staticRender('</head>'),
+        staticRender(`<body ${formatAttributes(htmlAttrs, 'body')}>`),
+        dynamicRender(BODY_START),
+        // react app
+        dynamicRender(REACT_RENDER),
+        dynamicRender(BODY_END),
+        dynamicRender(BODY_TAIL_ANALYTICS),
+        dynamicRender(BODY_TAIL),
+        staticRender('</body>'),
+        staticRender('</html>'),
+    ];
+};
+
+export { htmlPageSchemaFactory };

package/lib/server/htmlPageSchema.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var htmlpagebuilder = require('@tinkoff/htmlpagebuilder');
+var tokensRender = require('@tramvai/tokens-render');
+var utils = require('./utils.js');
+
+const { REACT_RENDER, HEAD_CORE_SCRIPTS, HEAD_DYNAMIC_SCRIPTS, HEAD_META, HEAD_POLYFILLS, HEAD_CORE_STYLES, HEAD_PERFORMANCE, HEAD_ANALYTICS, BODY_START, BODY_END, HEAD_ICONS, BODY_TAIL_ANALYTICS, BODY_TAIL, } = tokensRender.ResourceSlot;
+const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
+    return [
+        htmlpagebuilder.staticRender('<!DOCTYPE html>'),
+        htmlpagebuilder.staticRender(`<html ${utils.formatAttributes(htmlAttrs, 'html')}>`),
+        htmlpagebuilder.staticRender('<head>'),
+        htmlpagebuilder.staticRender('<meta charset="UTF-8">'),
+        htmlpagebuilder.dynamicRender(HEAD_META),
+        htmlpagebuilder.dynamicRender(HEAD_PERFORMANCE),
+        htmlpagebuilder.dynamicRender(HEAD_CORE_STYLES),
+        htmlpagebuilder.dynamicRender(HEAD_POLYFILLS),
+        htmlpagebuilder.dynamicRender(HEAD_DYNAMIC_SCRIPTS),
+        htmlpagebuilder.dynamicRender(HEAD_CORE_SCRIPTS),
+        htmlpagebuilder.dynamicRender(HEAD_ANALYTICS),
+        htmlpagebuilder.dynamicRender(HEAD_ICONS),
+        htmlpagebuilder.staticRender('</head>'),
+        htmlpagebuilder.staticRender(`<body ${utils.formatAttributes(htmlAttrs, 'body')}>`),
+        htmlpagebuilder.dynamicRender(BODY_START),
+        // react app
+        htmlpagebuilder.dynamicRender(REACT_RENDER),
+        htmlpagebuilder.dynamicRender(BODY_END),
+        htmlpagebuilder.dynamicRender(BODY_TAIL_ANALYTICS),
+        htmlpagebuilder.dynamicRender(BODY_TAIL),
+        htmlpagebuilder.staticRender('</body>'),
+        htmlpagebuilder.staticRender('</html>'),
+    ];
+};
+
+exports.htmlPageSchemaFactory = htmlPageSchemaFactory;

package/lib/server/utils.es.js

@@ -0,0 +1,16 @@
+const formatAttributes = (htmlAttrs, target) => {
+    if (!htmlAttrs) {
+        return '';
+    }
+    const targetAttrs = htmlAttrs.filter((item) => item.target === target);
+    const collectedAttrs = targetAttrs.reduce((acc, item) => ({ ...acc, ...item.attrs }), {});
+    const attrsString = Object.keys(collectedAttrs).reduce((acc, name) => {
+        if (collectedAttrs[name] === true) {
+            return `${acc} ${name}`;
+        }
+        return `${acc} ${name}="${collectedAttrs[name]}"`;
+    }, '');
+    return attrsString.trim();
+};
+
+export { formatAttributes };

package/lib/server/utils.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const formatAttributes = (htmlAttrs, target) => {
+    if (!htmlAttrs) {
+        return '';
+    }
+    const targetAttrs = htmlAttrs.filter((item) => item.target === target);
+    const collectedAttrs = targetAttrs.reduce((acc, item) => ({ ...acc, ...item.attrs }), {});
+    const attrsString = Object.keys(collectedAttrs).reduce((acc, name) => {
+        if (collectedAttrs[name] === true) {
+            return `${acc} ${name}`;
+        }
+        return `${acc} ${name}="${collectedAttrs[name]}"`;
+    }, '');
+    return attrsString.trim();
+};
+
+exports.formatAttributes = formatAttributes;