@tramvai/module-render 2.70.0 → 2.72.0

package/lib/server/PageBuilder.es.js

@@ -0,0 +1,93 @@
+import flatten from '@tinkoff/utils/array/flatten';
+import { buildPage } from '@tinkoff/htmlpagebuilder';
+import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { safeStringify } from '@tramvai/safe-strings';
+import { ChunkExtractor } from '@loadable/server';
+import { bundleResource } from './blocks/bundleResource/bundleResource.es.js';
+import { polyfillResources } from './blocks/polyfill.es.js';
+import { addPreloadForCriticalJS } from './blocks/preload/preloadBlock.es.js';
+import { formatAttributes } from './utils.es.js';
+import { fetchWebpackStats } from './blocks/utils/fetchWebpackStats.es.js';
+
+/* eslint-disable sort-class-members/sort-class-members */
+const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
+    const { slot } = resource;
+    if (Array.isArray(acc[slot])) {
+        acc[slot].push(resource);
+    }
+    else {
+        acc[slot] = [resource];
+    }
+    return acc;
+}, {});
+class PageBuilder {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, }) {
+        this.htmlAttrs = htmlAttrs;
+        this.renderSlots = flatten(renderSlots || []);
+        this.pageService = pageService;
+        this.context = context;
+        this.resourcesRegistry = resourcesRegistry;
+        this.reactRender = reactRender;
+        this.htmlPageSchema = htmlPageSchema;
+        this.polyfillCondition = polyfillCondition;
+        this.modern = modern;
+        this.renderFlowAfter = renderFlowAfter || [];
+        this.log = logger('page-builder');
+    }
+    async flow() {
+        const stats = await fetchWebpackStats({ modern: this.modern });
+        const extractor = new ChunkExtractor({ stats, entrypoints: [] });
+        // first we render the application, because we need to extract information about the data used by the components
+        await this.renderApp(extractor);
+        await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
+            this.log.warn({ event: 'render-flow-after-error', callback, error });
+        })));
+        this.dehydrateState();
+        // load information and dependency for the current bundle and page
+        await this.fetchChunksInfo(extractor);
+        this.preloadBlock();
+        return this.generateHtml();
+    }
+    dehydrateState() {
+        this.resourcesRegistry.register({
+            type: ResourceType.asIs,
+            slot: ResourceSlot.BODY_END,
+            // String much better than big object, source https://v8.dev/blog/cost-of-javascript-2019#json
+            payload: `<script id="__TRAMVAI_STATE__" type="application/json">${safeStringify(this.context.dehydrate().dispatcher)}</script>`,
+        });
+    }
+    async fetchChunksInfo(extractor) {
+        const { modern } = this;
+        const { bundle, pageComponent } = this.pageService.getConfig();
+        this.resourcesRegistry.register(await bundleResource({ bundle, modern, extractor, pageComponent }));
+        this.resourcesRegistry.register(await polyfillResources({
+            condition: this.polyfillCondition,
+            modern,
+        }));
+    }
+    preloadBlock() {
+        const preloadResources = addPreloadForCriticalJS(this.resourcesRegistry.getPageResources());
+        this.resourcesRegistry.register(preloadResources);
+    }
+    generateHtml() {
+        const resultSlotHandlers = mapResourcesToSlots([
+            ...this.renderSlots,
+            ...this.resourcesRegistry.getPageResources(),
+        ]);
+        return buildPage({
+            slotHandlers: resultSlotHandlers,
+            description: this.htmlPageSchema,
+        });
+    }
+    async renderApp(extractor) {
+        const html = await this.reactRender.render(extractor);
+        this.renderSlots = this.renderSlots.concat({
+            type: ResourceType.asIs,
+            slot: ResourceSlot.REACT_RENDER,
+            payload: `<div ${formatAttributes(this.htmlAttrs, 'app')}>${html}</div>`,
+        });
+    }
+}
+/* eslint-enable sort-class-members/sort-class-members */
+
+export { PageBuilder, mapResourcesToSlots };

package/lib/server/PageBuilder.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var flatten = require('@tinkoff/utils/array/flatten');
+var htmlpagebuilder = require('@tinkoff/htmlpagebuilder');
+var tokensRender = require('@tramvai/tokens-render');
+var safeStrings = require('@tramvai/safe-strings');
+var server = require('@loadable/server');
+var bundleResource = require('./blocks/bundleResource/bundleResource.js');
+var polyfill = require('./blocks/polyfill.js');
+var preloadBlock = require('./blocks/preload/preloadBlock.js');
+var utils = require('./utils.js');
+var fetchWebpackStats = require('./blocks/utils/fetchWebpackStats.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+/* eslint-disable sort-class-members/sort-class-members */
+const mapResourcesToSlots = (resources) => resources.reduce((acc, resource) => {
+    const { slot } = resource;
+    if (Array.isArray(acc[slot])) {
+        acc[slot].push(resource);
+    }
+    else {
+        acc[slot] = [resource];
+    }
+    return acc;
+}, {});
+class PageBuilder {
+    constructor({ renderSlots, pageService, resourcesRegistry, context, reactRender, htmlPageSchema, polyfillCondition, htmlAttrs, modern, renderFlowAfter, logger, }) {
+        this.htmlAttrs = htmlAttrs;
+        this.renderSlots = flatten__default["default"](renderSlots || []);
+        this.pageService = pageService;
+        this.context = context;
+        this.resourcesRegistry = resourcesRegistry;
+        this.reactRender = reactRender;
+        this.htmlPageSchema = htmlPageSchema;
+        this.polyfillCondition = polyfillCondition;
+        this.modern = modern;
+        this.renderFlowAfter = renderFlowAfter || [];
+        this.log = logger('page-builder');
+    }
+    async flow() {
+        const stats = await fetchWebpackStats.fetchWebpackStats({ modern: this.modern });
+        const extractor = new server.ChunkExtractor({ stats, entrypoints: [] });
+        // first we render the application, because we need to extract information about the data used by the components
+        await this.renderApp(extractor);
+        await Promise.all(this.renderFlowAfter.map((callback) => callback().catch((error) => {
+            this.log.warn({ event: 'render-flow-after-error', callback, error });
+        })));
+        this.dehydrateState();
+        // load information and dependency for the current bundle and page
+        await this.fetchChunksInfo(extractor);
+        this.preloadBlock();
+        return this.generateHtml();
+    }
+    dehydrateState() {
+        this.resourcesRegistry.register({
+            type: tokensRender.ResourceType.asIs,
+            slot: tokensRender.ResourceSlot.BODY_END,
+            // String much better than big object, source https://v8.dev/blog/cost-of-javascript-2019#json
+            payload: `<script id="__TRAMVAI_STATE__" type="application/json">${safeStrings.safeStringify(this.context.dehydrate().dispatcher)}</script>`,
+        });
+    }
+    async fetchChunksInfo(extractor) {
+        const { modern } = this;
+        const { bundle, pageComponent } = this.pageService.getConfig();
+        this.resourcesRegistry.register(await bundleResource.bundleResource({ bundle, modern, extractor, pageComponent }));
+        this.resourcesRegistry.register(await polyfill.polyfillResources({
+            condition: this.polyfillCondition,
+            modern,
+        }));
+    }
+    preloadBlock() {
+        const preloadResources = preloadBlock.addPreloadForCriticalJS(this.resourcesRegistry.getPageResources());
+        this.resourcesRegistry.register(preloadResources);
+    }
+    generateHtml() {
+        const resultSlotHandlers = mapResourcesToSlots([
+            ...this.renderSlots,
+            ...this.resourcesRegistry.getPageResources(),
+        ]);
+        return htmlpagebuilder.buildPage({
+            slotHandlers: resultSlotHandlers,
+            description: this.htmlPageSchema,
+        });
+    }
+    async renderApp(extractor) {
+        const html = await this.reactRender.render(extractor);
+        this.renderSlots = this.renderSlots.concat({
+            type: tokensRender.ResourceType.asIs,
+            slot: tokensRender.ResourceSlot.REACT_RENDER,
+            payload: `<div ${utils.formatAttributes(this.htmlAttrs, 'app')}>${html}</div>`,
+        });
+    }
+}
+/* eslint-enable sort-class-members/sort-class-members */
+
+exports.PageBuilder = PageBuilder;
+exports.mapResourcesToSlots = mapResourcesToSlots;

package/lib/server/ReactRenderServer.es.js

@@ -0,0 +1,90 @@
+import { Writable } from 'stream';
+import each from '@tinkoff/utils/array/each';
+import { renderReact } from '../react/index.es.js';
+
+const RENDER_TIMEOUT = 500;
+class HtmlWritable extends Writable {
+    constructor() {
+        super(...arguments);
+        this.chunks = [];
+        this.html = '';
+    }
+    getHtml() {
+        return this.html;
+    }
+    _write(chunk, encoding, callback) {
+        this.chunks.push(chunk);
+        callback();
+    }
+    _final(callback) {
+        this.html = Buffer.concat(this.chunks).toString();
+        callback();
+    }
+}
+class ReactRenderServer {
+    // eslint-disable-next-line sort-class-members/sort-class-members
+    constructor({ context, customRender, extendRender, di, renderMode, logger }) {
+        this.context = context;
+        this.customRender = customRender;
+        this.extendRender = extendRender;
+        this.di = di;
+        this.renderMode = renderMode;
+        this.log = logger('module-render');
+    }
+    render(extractor) {
+        var _a;
+        let renderResult = renderReact({ di: this.di }, this.context);
+        each((render) => {
+            renderResult = render(renderResult);
+        }, (_a = this.extendRender) !== null && _a !== void 0 ? _a : []);
+        renderResult = extractor.collectChunks(renderResult);
+        if (this.customRender) {
+            return this.customRender(renderResult);
+        }
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES && this.renderMode === 'streaming') {
+            return new Promise((resolve, reject) => {
+                const { renderToPipeableStream } = require('react-dom/server');
+                const htmlWritable = new HtmlWritable();
+                htmlWritable.on('finish', () => {
+                    resolve(htmlWritable.getHtml());
+                });
+                const start = Date.now();
+                const { log } = this;
+                log.info({
+                    event: 'streaming-render:start',
+                });
+                const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    onAllReady() {
+                        log.info({
+                            event: 'streaming-render:complete',
+                            duration: Date.now() - start,
+                        });
+                        // here `write` will be called only once
+                        pipe(htmlWritable);
+                    },
+                    onError(error) {
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering.
+                        // for criticall errors, this callback will be called with `onShellError`,
+                        // so this is a best place to error logging
+                        log.error({
+                            event: 'streaming-render:error',
+                            error,
+                        });
+                    },
+                    onShellError(error) {
+                        // always critical error, abort rendering
+                        reject(error);
+                    },
+                });
+                setTimeout(() => {
+                    abort();
+                    reject(new Error('React renderToPipeableStream timeout exceeded'));
+                }, RENDER_TIMEOUT);
+            });
+        }
+        const { renderToString } = require('react-dom/server');
+        return Promise.resolve(renderToString(renderResult));
+    }
+}
+
+export { ReactRenderServer };

package/lib/server/ReactRenderServer.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var stream = require('stream');
+var each = require('@tinkoff/utils/array/each');
+var index = require('../react/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var each__default = /*#__PURE__*/_interopDefaultLegacy(each);
+
+const RENDER_TIMEOUT = 500;
+class HtmlWritable extends stream.Writable {
+    constructor() {
+        super(...arguments);
+        this.chunks = [];
+        this.html = '';
+    }
+    getHtml() {
+        return this.html;
+    }
+    _write(chunk, encoding, callback) {
+        this.chunks.push(chunk);
+        callback();
+    }
+    _final(callback) {
+        this.html = Buffer.concat(this.chunks).toString();
+        callback();
+    }
+}
+class ReactRenderServer {
+    // eslint-disable-next-line sort-class-members/sort-class-members
+    constructor({ context, customRender, extendRender, di, renderMode, logger }) {
+        this.context = context;
+        this.customRender = customRender;
+        this.extendRender = extendRender;
+        this.di = di;
+        this.renderMode = renderMode;
+        this.log = logger('module-render');
+    }
+    render(extractor) {
+        var _a;
+        let renderResult = index.renderReact({ di: this.di }, this.context);
+        each__default["default"]((render) => {
+            renderResult = render(renderResult);
+        }, (_a = this.extendRender) !== null && _a !== void 0 ? _a : []);
+        renderResult = extractor.collectChunks(renderResult);
+        if (this.customRender) {
+            return this.customRender(renderResult);
+        }
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES && this.renderMode === 'streaming') {
+            return new Promise((resolve, reject) => {
+                const { renderToPipeableStream } = require('react-dom/server');
+                const htmlWritable = new HtmlWritable();
+                htmlWritable.on('finish', () => {
+                    resolve(htmlWritable.getHtml());
+                });
+                const start = Date.now();
+                const { log } = this;
+                log.info({
+                    event: 'streaming-render:start',
+                });
+                const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    onAllReady() {
+                        log.info({
+                            event: 'streaming-render:complete',
+                            duration: Date.now() - start,
+                        });
+                        // here `write` will be called only once
+                        pipe(htmlWritable);
+                    },
+                    onError(error) {
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering.
+                        // for criticall errors, this callback will be called with `onShellError`,
+                        // so this is a best place to error logging
+                        log.error({
+                            event: 'streaming-render:error',
+                            error,
+                        });
+                    },
+                    onShellError(error) {
+                        // always critical error, abort rendering
+                        reject(error);
+                    },
+                });
+                setTimeout(() => {
+                    abort();
+                    reject(new Error('React renderToPipeableStream timeout exceeded'));
+                }, RENDER_TIMEOUT);
+            });
+        }
+        const { renderToString } = require('react-dom/server');
+        return Promise.resolve(renderToString(renderResult));
+    }
+}
+
+exports.ReactRenderServer = ReactRenderServer;

package/lib/server/blocks/bundleResource/bundleResource.es.js

@@ -0,0 +1,62 @@
+import has from '@tinkoff/utils/object/has';
+import last from '@tinkoff/utils/array/last';
+import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { isFileSystemPageComponent, fileSystemPageToWebpackChunkName } from '@tramvai/experiments';
+import { PRELOAD_JS } from '../../constants/performance.es.js';
+import { flushFiles } from '../utils/flushFiles.es.js';
+import { fetchWebpackStats } from '../utils/fetchWebpackStats.es.js';
+
+const bundleResource = async ({ bundle, modern, extractor, pageComponent, }) => {
+    // for file-system pages preload page chunk against bundle chunk
+    const chunkNameFromBundle = isFileSystemPageComponent(pageComponent)
+        ? fileSystemPageToWebpackChunkName(pageComponent)
+        : last(bundle.split('/'));
+    const webpackStats = await fetchWebpackStats({ modern });
+    const { publicPath, assetsByChunkName } = webpackStats;
+    const bundles = has('common-chunk', assetsByChunkName)
+        ? ['common-chunk', chunkNameFromBundle]
+        : [chunkNameFromBundle];
+    const lazyChunks = extractor.getMainAssets().map((entry) => entry.chunk);
+    const { scripts: baseScripts } = flushFiles(['vendor'], webpackStats, {
+        ignoreDependencies: true,
+    });
+    const { scripts, styles } = flushFiles([...bundles, ...lazyChunks, 'platform'], webpackStats);
+    const genHref = (href) => `${publicPath}${href}`;
+    const result = [];
+    if (process.env.NODE_ENV === 'production' ||
+        (process.env.ASSETS_PREFIX && process.env.ASSETS_PREFIX !== 'static')) {
+        result.push({
+            type: ResourceType.inlineScript,
+            slot: ResourceSlot.HEAD_CORE_SCRIPTS,
+            payload: `window.ap = ${`"${process.env.ASSETS_PREFIX}"`};`,
+        });
+    }
+    styles.map((style) => result.push({
+        type: ResourceType.style,
+        slot: ResourceSlot.HEAD_CORE_STYLES,
+        payload: genHref(style),
+        attrs: {
+            'data-critical': 'true',
+            onload: `${PRELOAD_JS}()`,
+        },
+    }));
+    baseScripts.map((script) => result.push({
+        type: ResourceType.script,
+        slot: ResourceSlot.HEAD_CORE_SCRIPTS,
+        payload: genHref(script),
+        attrs: {
+            'data-critical': 'true',
+        },
+    }));
+    scripts.map((script) => result.push({
+        type: ResourceType.script,
+        slot: ResourceSlot.HEAD_CORE_SCRIPTS,
+        payload: genHref(script),
+        attrs: {
+            'data-critical': 'true',
+        },
+    }));
+    return result;
+};
+
+export { bundleResource };

package/lib/server/blocks/bundleResource/bundleResource.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var has = require('@tinkoff/utils/object/has');
+var last = require('@tinkoff/utils/array/last');
+var tokensRender = require('@tramvai/tokens-render');
+var experiments = require('@tramvai/experiments');
+var performance = require('../../constants/performance.js');
+var flushFiles = require('../utils/flushFiles.js');
+var fetchWebpackStats = require('../utils/fetchWebpackStats.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
+var last__default = /*#__PURE__*/_interopDefaultLegacy(last);
+
+const bundleResource = async ({ bundle, modern, extractor, pageComponent, }) => {
+    // for file-system pages preload page chunk against bundle chunk
+    const chunkNameFromBundle = experiments.isFileSystemPageComponent(pageComponent)
+        ? experiments.fileSystemPageToWebpackChunkName(pageComponent)
+        : last__default["default"](bundle.split('/'));
+    const webpackStats = await fetchWebpackStats.fetchWebpackStats({ modern });
+    const { publicPath, assetsByChunkName } = webpackStats;
+    const bundles = has__default["default"]('common-chunk', assetsByChunkName)
+        ? ['common-chunk', chunkNameFromBundle]
+        : [chunkNameFromBundle];
+    const lazyChunks = extractor.getMainAssets().map((entry) => entry.chunk);
+    const { scripts: baseScripts } = flushFiles.flushFiles(['vendor'], webpackStats, {
+        ignoreDependencies: true,
+    });
+    const { scripts, styles } = flushFiles.flushFiles([...bundles, ...lazyChunks, 'platform'], webpackStats);
+    const genHref = (href) => `${publicPath}${href}`;
+    const result = [];
+    if (process.env.NODE_ENV === 'production' ||
+        (process.env.ASSETS_PREFIX && process.env.ASSETS_PREFIX !== 'static')) {
+        result.push({
+            type: tokensRender.ResourceType.inlineScript,
+            slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
+            payload: `window.ap = ${`"${process.env.ASSETS_PREFIX}"`};`,
+        });
+    }
+    styles.map((style) => result.push({
+        type: tokensRender.ResourceType.style,
+        slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
+        payload: genHref(style),
+        attrs: {
+            'data-critical': 'true',
+            onload: `${performance.PRELOAD_JS}()`,
+        },
+    }));
+    baseScripts.map((script) => result.push({
+        type: tokensRender.ResourceType.script,
+        slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
+        payload: genHref(script),
+        attrs: {
+            'data-critical': 'true',
+        },
+    }));
+    scripts.map((script) => result.push({
+        type: tokensRender.ResourceType.script,
+        slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
+        payload: genHref(script),
+        attrs: {
+            'data-critical': 'true',
+        },
+    }));
+    return result;
+};
+
+exports.bundleResource = bundleResource;

package/lib/server/blocks/polyfill.es.js

@@ -0,0 +1,35 @@
+import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { fetchWebpackStats } from './utils/fetchWebpackStats.es.js';
+import { flushFiles } from './utils/flushFiles.es.js';
+
+const polyfillResources = async ({ condition, modern, }) => {
+    const webpackStats = await fetchWebpackStats({ modern });
+    const { publicPath } = webpackStats;
+    // получает файл полифилла из stats.json\stats.modern.json.
+    // В зависимости от версии браузера будет использован полифилл из legacy или modern сборки,
+    // т.к. полифиллы для них могут отличаться на основании преобразований `@babel/preset-env`
+    const { scripts: polyfillScripts } = flushFiles(['polyfill'], webpackStats, {
+        ignoreDependencies: true,
+    });
+    const genHref = (href) => `${publicPath}${href}`;
+    const result = [];
+    polyfillScripts.forEach((script) => {
+        const href = genHref(script);
+        result.push({
+            type: ResourceType.inlineScript,
+            slot: ResourceSlot.HEAD_POLYFILLS,
+            payload: `(function (){
+  var con;
+  try {
+    con = ${condition};
+  } catch (e) {
+    con = true;
+  }
+  if (con) { document.write('<script defer="defer" charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
+})()`,
+        });
+    });
+    return result;
+};
+
+export { polyfillResources };

package/lib/server/blocks/polyfill.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tokensRender = require('@tramvai/tokens-render');
+var fetchWebpackStats = require('./utils/fetchWebpackStats.js');
+var flushFiles = require('./utils/flushFiles.js');
+
+const polyfillResources = async ({ condition, modern, }) => {
+    const webpackStats = await fetchWebpackStats.fetchWebpackStats({ modern });
+    const { publicPath } = webpackStats;
+    // получает файл полифилла из stats.json\stats.modern.json.
+    // В зависимости от версии браузера будет использован полифилл из legacy или modern сборки,
+    // т.к. полифиллы для них могут отличаться на основании преобразований `@babel/preset-env`
+    const { scripts: polyfillScripts } = flushFiles.flushFiles(['polyfill'], webpackStats, {
+        ignoreDependencies: true,
+    });
+    const genHref = (href) => `${publicPath}${href}`;
+    const result = [];
+    polyfillScripts.forEach((script) => {
+        const href = genHref(script);
+        result.push({
+            type: tokensRender.ResourceType.inlineScript,
+            slot: tokensRender.ResourceSlot.HEAD_POLYFILLS,
+            payload: `(function (){
+  var con;
+  try {
+    con = ${condition};
+  } catch (e) {
+    con = true;
+  }
+  if (con) { document.write('<script defer="defer" charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
+})()`,
+        });
+    });
+    return result;
+};
+
+exports.polyfillResources = polyfillResources;

package/lib/{server_inline.inline.es.js → server/blocks/preload/onload.inline.es.js}

@@ -17,4 +17,4 @@ function onload(next) {
     };
 }
 
-export { onload as o };
+export { onload };

package/lib/{server_inline.inline.js → server/blocks/preload/onload.inline.js}

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function onload(next) {
     let called = false;
     return () => {

package/lib/server/blocks/preload/preloadBlock.es.js

@@ -0,0 +1,21 @@
+import each from '@tinkoff/utils/array/each';
+import path from '@tinkoff/utils/object/path';
+import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { PRELOAD_JS } from '../../constants/performance.es.js';
+import { onload } from './onload.inline.es.js';
+
+const addPreloadForCriticalJS = (pageResources) => {
+    const jsUrls = [];
+    each((res) => {
+        if (res.type === 'script' && path(['attrs', 'data-critical'], res)) {
+            jsUrls.push(res.payload);
+        }
+    }, pageResources);
+    return {
+        type: ResourceType.inlineScript,
+        slot: ResourceSlot.HEAD_PERFORMANCE,
+        payload: `window.${PRELOAD_JS}=(${onload})([${jsUrls.map((url) => `"${url}"`).join(',')}])`,
+    };
+};
+
+export { addPreloadForCriticalJS };

package/lib/server/blocks/preload/preloadBlock.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var each = require('@tinkoff/utils/array/each');
+var path = require('@tinkoff/utils/object/path');
+var tokensRender = require('@tramvai/tokens-render');
+var performance = require('../../constants/performance.js');
+var onload_inline = require('./onload.inline.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var each__default = /*#__PURE__*/_interopDefaultLegacy(each);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
+const addPreloadForCriticalJS = (pageResources) => {
+    const jsUrls = [];
+    each__default["default"]((res) => {
+        if (res.type === 'script' && path__default["default"](['attrs', 'data-critical'], res)) {
+            jsUrls.push(res.payload);
+        }
+    }, pageResources);
+    return {
+        type: tokensRender.ResourceType.inlineScript,
+        slot: tokensRender.ResourceSlot.HEAD_PERFORMANCE,
+        payload: `window.${performance.PRELOAD_JS}=(${onload_inline.onload})([${jsUrls.map((url) => `"${url}"`).join(',')}])`,
+    };
+};
+
+exports.addPreloadForCriticalJS = addPreloadForCriticalJS;