@tramvai/module-render 2.70.1 → 2.72.0

package/lib/resourcesInliner/externalFilesHelper.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fetch = require('node-fetch');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var fetch__default = /*#__PURE__*/_interopDefaultLegacy(fetch);
+
+const thirtySeconds = 1000 * 30;
+const getFileContentLength = async (url) => {
+    const info = await fetch__default["default"](url, { method: 'HEAD', timeout: thirtySeconds });
+    return info.headers.get('content-length');
+};
+const getFile = async (url) => {
+    const fileResponse = await fetch__default["default"](url, { timeout: thirtySeconds });
+    if (fileResponse.ok) {
+        const file = await fileResponse.text();
+        return file;
+    }
+    return undefined;
+};
+
+exports.getFile = getFile;
+exports.getFileContentLength = getFileContentLength;

package/lib/resourcesInliner/fileProcessor.es.js

@@ -0,0 +1,31 @@
+import { resolve } from '@tinkoff/url';
+import startsWith from '@tinkoff/utils/string/startsWith';
+import { ResourceType } from '@tramvai/tokens-render';
+
+const URL_OCCURRENCES_RE = /(url\((['"]?))(.*?)(\2\))/gi;
+const isAbsoluteUrl = (resourceUrl) => ['http://', 'https://', '//'].some((prefix) => startsWith(prefix, resourceUrl));
+const toHttpsUrl = (resourceUrl) => {
+    if (resourceUrl.indexOf('//localhost') !== -1) {
+        return resourceUrl;
+    }
+    if (startsWith('http://', resourceUrl)) {
+        return resourceUrl.replace('http://', 'https://');
+    }
+    if (startsWith('//', resourceUrl)) {
+        return resourceUrl.replace('//', 'https://');
+    }
+    return resourceUrl;
+};
+const urlReplacerCreator = (resourceUrl) => (str, leftGroup, _, extractedUrl, rightGroup) => {
+    return isAbsoluteUrl(extractedUrl)
+        ? str
+        : `${leftGroup}${resolve(toHttpsUrl(resourceUrl), extractedUrl)}${rightGroup}`;
+};
+const processFile = (resource, file) => {
+    if (resource.type === ResourceType.style) {
+        return file.replace(URL_OCCURRENCES_RE, urlReplacerCreator(resource.payload));
+    }
+    return file;
+};
+
+export { URL_OCCURRENCES_RE, processFile };

package/lib/resourcesInliner/fileProcessor.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var url = require('@tinkoff/url');
+var startsWith = require('@tinkoff/utils/string/startsWith');
+var tokensRender = require('@tramvai/tokens-render');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var startsWith__default = /*#__PURE__*/_interopDefaultLegacy(startsWith);
+
+const URL_OCCURRENCES_RE = /(url\((['"]?))(.*?)(\2\))/gi;
+const isAbsoluteUrl = (resourceUrl) => ['http://', 'https://', '//'].some((prefix) => startsWith__default["default"](prefix, resourceUrl));
+const toHttpsUrl = (resourceUrl) => {
+    if (resourceUrl.indexOf('//localhost') !== -1) {
+        return resourceUrl;
+    }
+    if (startsWith__default["default"]('http://', resourceUrl)) {
+        return resourceUrl.replace('http://', 'https://');
+    }
+    if (startsWith__default["default"]('//', resourceUrl)) {
+        return resourceUrl.replace('//', 'https://');
+    }
+    return resourceUrl;
+};
+const urlReplacerCreator = (resourceUrl) => (str, leftGroup, _, extractedUrl, rightGroup) => {
+    return isAbsoluteUrl(extractedUrl)
+        ? str
+        : `${leftGroup}${url.resolve(toHttpsUrl(resourceUrl), extractedUrl)}${rightGroup}`;
+};
+const processFile = (resource, file) => {
+    if (resource.type === tokensRender.ResourceType.style) {
+        return file.replace(URL_OCCURRENCES_RE, urlReplacerCreator(resource.payload));
+    }
+    return file;
+};
+
+exports.URL_OCCURRENCES_RE = URL_OCCURRENCES_RE;
+exports.processFile = processFile;

package/lib/resourcesInliner/resourcesInliner.es.js

@@ -0,0 +1,204 @@
+import isUndefined from '@tinkoff/utils/is/undefined';
+import isEmpty from '@tinkoff/utils/is/empty';
+import { ResourceType } from '@tramvai/tokens-render';
+import { isAbsoluteUrl } from '@tinkoff/url';
+import { getFile, getFileContentLength } from './externalFilesHelper.es.js';
+import { processFile } from './fileProcessor.es.js';
+
+const INTERNAL_CACHE_SIZE = 50;
+const ASSETS_PREFIX = process.env.NODE_ENV === 'development' &&
+    (process.env.ASSETS_PREFIX === 'static' || !process.env.ASSETS_PREFIX)
+    ? `http://localhost:${process.env.PORT_STATIC}/dist/`
+    : process.env.ASSETS_PREFIX;
+const getInlineType = (type) => {
+    switch (type) {
+        case ResourceType.style:
+            return ResourceType.inlineStyle;
+        case ResourceType.script:
+            return ResourceType.inlineScript;
+        default:
+            return type;
+    }
+};
+const getResourceUrl = (resource) => {
+    if (isEmpty(resource.payload) || !isAbsoluteUrl(resource.payload)) {
+        return undefined;
+    }
+    return resource.payload.startsWith('//')
+        ? `https://${resource.payload.substr(2)}`
+        : resource.payload;
+};
+class ResourcesInliner {
+    constructor({ resourcesRegistryCache, resourceInlineThreshold, logger }) {
+        this.internalFilesCache = new Map();
+        this.runningRequests = new Set();
+        this.scheduleFileLoad = async (resource, resourceInlineThreshold) => {
+            const url = getResourceUrl(resource);
+            const requestKey = `file${url}`;
+            const filesCache = this.getFilesCache(url);
+            const result = filesCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(url);
+                try {
+                    const file = await getFile(url);
+                    if (file === undefined) {
+                        this.resourcesRegistryCache.disabledUrlsCache.set(url, true);
+                        return;
+                    }
+                    const size = file.length;
+                    if (size < resourceInlineThreshold) {
+                        filesCache.set(url, processFile(resource, file));
+                    }
+                    this.resourcesRegistryCache.sizeCache.set(url, size);
+                }
+                catch (error) {
+                    this.log.warn({
+                        event: 'file-load-failed',
+                        url,
+                        error,
+                    });
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
+            }
+        };
+        this.scheduleFileSizeLoad = async (resource, resourceInlineThreshold) => {
+            const url = getResourceUrl(resource);
+            const requestKey = `size${url}`;
+            const result = this.resourcesRegistryCache.sizeCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(requestKey);
+                try {
+                    const contentLength = await getFileContentLength(url);
+                    const size = isUndefined(contentLength) ? 0 : +contentLength;
+                    if (size) {
+                        this.resourcesRegistryCache.sizeCache.set(url, size);
+                    }
+                    if (size < resourceInlineThreshold) {
+                        this.scheduleFileLoad(resource, resourceInlineThreshold);
+                    }
+                }
+                catch (error) {
+                    this.log.warn({
+                        event: 'file-content-length-load-failed',
+                        url,
+                        error,
+                    });
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
+            }
+        };
+        this.resourcesRegistryCache = resourcesRegistryCache;
+        this.resourceInlineThreshold = resourceInlineThreshold;
+        this.log = logger('resources-inliner');
+    }
+    getFilesCache(url) {
+        if (url.startsWith(ASSETS_PREFIX)) {
+            // internal resources are resources generated by the current app itself
+            // these kind of resources are pretty static and won't be changed while app is running
+            // so we can cache it with bare Map and do not care about how to cleanup cache from outdated entries
+            return this.internalFilesCache;
+        }
+        return this.resourcesRegistryCache.filesCache;
+    }
+    // check that resource's preload-link should be added to render
+    shouldAddResource(resource) {
+        if (resource.type !== ResourceType.preloadLink) {
+            // only checking preload-links
+            return true;
+        }
+        const url = getResourceUrl(resource);
+        if (isUndefined(url)) {
+            // if url is undefined that file is not in cache
+            return true;
+        }
+        // if file is residing in cache that means it will be inlined in page render
+        // therefore no need to have preload-link for the inlined resource
+        return !this.getFilesCache(url).has(url);
+    }
+    // method for check is passed resource should be inlined in HTML-page
+    shouldInline(resource) {
+        var _a;
+        if (!(((_a = this.resourceInlineThreshold) === null || _a === void 0 ? void 0 : _a.types) || []).includes(resource.type)) {
+            return false;
+        }
+        const resourceInlineThreshold = this.resourceInlineThreshold.threshold;
+        if (isUndefined(resourceInlineThreshold)) {
+            return false;
+        }
+        const url = getResourceUrl(resource);
+        if (isUndefined(url) || this.resourcesRegistryCache.disabledUrlsCache.has(url)) {
+            return false;
+        }
+        const filesCache = this.getFilesCache(url);
+        if (filesCache.has(url)) {
+            return true;
+        }
+        if (filesCache === this.internalFilesCache &&
+            this.internalFilesCache.size >= INTERNAL_CACHE_SIZE) {
+            // if we've exceeded limits for the internal resources cache ignore any new entries
+            return false;
+        }
+        if (!this.resourcesRegistryCache.sizeCache.has(url)) {
+            this.scheduleFileSizeLoad(resource, resourceInlineThreshold);
+            return false;
+        }
+        const size = this.resourcesRegistryCache.sizeCache.get(url);
+        if (size > resourceInlineThreshold) {
+            return false;
+        }
+        this.scheduleFileLoad(resource, resourceInlineThreshold);
+        return false;
+    }
+    inlineResource(resource) {
+        const url = getResourceUrl(resource);
+        if (isUndefined(url)) {
+            // usually, it should not happen but anyway check it for safety
+            return [resource];
+        }
+        const text = this.getFilesCache(url).get(url);
+        if (isEmpty(text)) {
+            return [resource];
+        }
+        const result = [];
+        if (process.env.NODE_ENV === 'development') {
+            // html comment for debugging inlining in dev mode
+            result.push({
+                slot: resource.slot,
+                type: ResourceType.asIs,
+                payload: `<!-- Inlined file ${url} -->`,
+            });
+        }
+        result.push({
+            ...resource,
+            type: getInlineType(resource.type),
+            payload: text,
+        });
+        if (resource.type === ResourceType.style) {
+            // If we don't add data-href then extract-css-chunks-webpack-plugin
+            // will add link to resources to the html head (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
+            // wherein link in case of css files plugin will look for a link tag, but we add a style tag
+            // so we can't use tag from above and have to generate new one
+            result.push({
+                slot: resource.slot,
+                type: ResourceType.style,
+                payload: null,
+                attrs: {
+                    'data-href': resource.payload,
+                },
+            });
+        }
+        return result;
+    }
+}
+
+export { ResourcesInliner };

package/lib/resourcesInliner/resourcesInliner.js

@@ -0,0 +1,213 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isUndefined = require('@tinkoff/utils/is/undefined');
+var isEmpty = require('@tinkoff/utils/is/empty');
+var tokensRender = require('@tramvai/tokens-render');
+var url = require('@tinkoff/url');
+var externalFilesHelper = require('./externalFilesHelper.js');
+var fileProcessor = require('./fileProcessor.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+
+const INTERNAL_CACHE_SIZE = 50;
+const ASSETS_PREFIX = process.env.NODE_ENV === 'development' &&
+    (process.env.ASSETS_PREFIX === 'static' || !process.env.ASSETS_PREFIX)
+    ? `http://localhost:${process.env.PORT_STATIC}/dist/`
+    : process.env.ASSETS_PREFIX;
+const getInlineType = (type) => {
+    switch (type) {
+        case tokensRender.ResourceType.style:
+            return tokensRender.ResourceType.inlineStyle;
+        case tokensRender.ResourceType.script:
+            return tokensRender.ResourceType.inlineScript;
+        default:
+            return type;
+    }
+};
+const getResourceUrl = (resource) => {
+    if (isEmpty__default["default"](resource.payload) || !url.isAbsoluteUrl(resource.payload)) {
+        return undefined;
+    }
+    return resource.payload.startsWith('//')
+        ? `https://${resource.payload.substr(2)}`
+        : resource.payload;
+};
+class ResourcesInliner {
+    constructor({ resourcesRegistryCache, resourceInlineThreshold, logger }) {
+        this.internalFilesCache = new Map();
+        this.runningRequests = new Set();
+        this.scheduleFileLoad = async (resource, resourceInlineThreshold) => {
+            const url = getResourceUrl(resource);
+            const requestKey = `file${url}`;
+            const filesCache = this.getFilesCache(url);
+            const result = filesCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(url);
+                try {
+                    const file = await externalFilesHelper.getFile(url);
+                    if (file === undefined) {
+                        this.resourcesRegistryCache.disabledUrlsCache.set(url, true);
+                        return;
+                    }
+                    const size = file.length;
+                    if (size < resourceInlineThreshold) {
+                        filesCache.set(url, fileProcessor.processFile(resource, file));
+                    }
+                    this.resourcesRegistryCache.sizeCache.set(url, size);
+                }
+                catch (error) {
+                    this.log.warn({
+                        event: 'file-load-failed',
+                        url,
+                        error,
+                    });
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
+            }
+        };
+        this.scheduleFileSizeLoad = async (resource, resourceInlineThreshold) => {
+            const url = getResourceUrl(resource);
+            const requestKey = `size${url}`;
+            const result = this.resourcesRegistryCache.sizeCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(requestKey);
+                try {
+                    const contentLength = await externalFilesHelper.getFileContentLength(url);
+                    const size = isUndefined__default["default"](contentLength) ? 0 : +contentLength;
+                    if (size) {
+                        this.resourcesRegistryCache.sizeCache.set(url, size);
+                    }
+                    if (size < resourceInlineThreshold) {
+                        this.scheduleFileLoad(resource, resourceInlineThreshold);
+                    }
+                }
+                catch (error) {
+                    this.log.warn({
+                        event: 'file-content-length-load-failed',
+                        url,
+                        error,
+                    });
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
+            }
+        };
+        this.resourcesRegistryCache = resourcesRegistryCache;
+        this.resourceInlineThreshold = resourceInlineThreshold;
+        this.log = logger('resources-inliner');
+    }
+    getFilesCache(url) {
+        if (url.startsWith(ASSETS_PREFIX)) {
+            // internal resources are resources generated by the current app itself
+            // these kind of resources are pretty static and won't be changed while app is running
+            // so we can cache it with bare Map and do not care about how to cleanup cache from outdated entries
+            return this.internalFilesCache;
+        }
+        return this.resourcesRegistryCache.filesCache;
+    }
+    // check that resource's preload-link should be added to render
+    shouldAddResource(resource) {
+        if (resource.type !== tokensRender.ResourceType.preloadLink) {
+            // only checking preload-links
+            return true;
+        }
+        const url = getResourceUrl(resource);
+        if (isUndefined__default["default"](url)) {
+            // if url is undefined that file is not in cache
+            return true;
+        }
+        // if file is residing in cache that means it will be inlined in page render
+        // therefore no need to have preload-link for the inlined resource
+        return !this.getFilesCache(url).has(url);
+    }
+    // method for check is passed resource should be inlined in HTML-page
+    shouldInline(resource) {
+        var _a;
+        if (!(((_a = this.resourceInlineThreshold) === null || _a === void 0 ? void 0 : _a.types) || []).includes(resource.type)) {
+            return false;
+        }
+        const resourceInlineThreshold = this.resourceInlineThreshold.threshold;
+        if (isUndefined__default["default"](resourceInlineThreshold)) {
+            return false;
+        }
+        const url = getResourceUrl(resource);
+        if (isUndefined__default["default"](url) || this.resourcesRegistryCache.disabledUrlsCache.has(url)) {
+            return false;
+        }
+        const filesCache = this.getFilesCache(url);
+        if (filesCache.has(url)) {
+            return true;
+        }
+        if (filesCache === this.internalFilesCache &&
+            this.internalFilesCache.size >= INTERNAL_CACHE_SIZE) {
+            // if we've exceeded limits for the internal resources cache ignore any new entries
+            return false;
+        }
+        if (!this.resourcesRegistryCache.sizeCache.has(url)) {
+            this.scheduleFileSizeLoad(resource, resourceInlineThreshold);
+            return false;
+        }
+        const size = this.resourcesRegistryCache.sizeCache.get(url);
+        if (size > resourceInlineThreshold) {
+            return false;
+        }
+        this.scheduleFileLoad(resource, resourceInlineThreshold);
+        return false;
+    }
+    inlineResource(resource) {
+        const url = getResourceUrl(resource);
+        if (isUndefined__default["default"](url)) {
+            // usually, it should not happen but anyway check it for safety
+            return [resource];
+        }
+        const text = this.getFilesCache(url).get(url);
+        if (isEmpty__default["default"](text)) {
+            return [resource];
+        }
+        const result = [];
+        if (process.env.NODE_ENV === 'development') {
+            // html comment for debugging inlining in dev mode
+            result.push({
+                slot: resource.slot,
+                type: tokensRender.ResourceType.asIs,
+                payload: `<!-- Inlined file ${url} -->`,
+            });
+        }
+        result.push({
+            ...resource,
+            type: getInlineType(resource.type),
+            payload: text,
+        });
+        if (resource.type === tokensRender.ResourceType.style) {
+            // If we don't add data-href then extract-css-chunks-webpack-plugin
+            // will add link to resources to the html head (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
+            // wherein link in case of css files plugin will look for a link tag, but we add a style tag
+            // so we can't use tag from above and have to generate new one
+            result.push({
+                slot: resource.slot,
+                type: tokensRender.ResourceType.style,
+                payload: null,
+                attrs: {
+                    'data-href': resource.payload,
+                },
+            });
+        }
+        return result;
+    }
+}
+
+exports.ResourcesInliner = ResourcesInliner;

package/lib/resourcesInliner/tokens.es.js

@@ -0,0 +1,15 @@
+import { createToken } from '@tinkoff/dippy';
+
+/**
+ * @description
+ * Инлайнер ресурсов - используется на сервере для регистрации файлов, которые должны быть вставлены
+ * в итоговую html-страницу в виде ссылки на файл или заинлайнеными полностью
+ */
+const RESOURCE_INLINER = createToken('resourceInliner');
+/**
+ * @description
+ * Кэш загруженных ресурсов.
+ */
+const RESOURCES_REGISTRY_CACHE = createToken('resourcesRegistryCache');
+
+export { RESOURCES_REGISTRY_CACHE, RESOURCE_INLINER };

package/lib/resourcesInliner/tokens.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dippy = require('@tinkoff/dippy');
+
+/**
+ * @description
+ * Инлайнер ресурсов - используется на сервере для регистрации файлов, которые должны быть вставлены
+ * в итоговую html-страницу в виде ссылки на файл или заинлайнеными полностью
+ */
+const RESOURCE_INLINER = dippy.createToken('resourceInliner');
+/**
+ * @description
+ * Кэш загруженных ресурсов.
+ */
+const RESOURCES_REGISTRY_CACHE = dippy.createToken('resourcesRegistryCache');
+
+exports.RESOURCES_REGISTRY_CACHE = RESOURCES_REGISTRY_CACHE;
+exports.RESOURCE_INLINER = RESOURCE_INLINER;

package/lib/resourcesRegistry/index.es.js

@@ -0,0 +1,28 @@
+import toArray from '@tinkoff/utils/array/toArray';
+
+class ResourcesRegistry {
+    constructor({ resourceInliner }) {
+        this.resources = new Set();
+        this.resourceInliner = resourceInliner;
+    }
+    register(resourceOrResources) {
+        toArray(resourceOrResources).forEach((resource) => {
+            this.resources.add(resource);
+        });
+    }
+    getPageResources() {
+        return Array.from(this.resources.values())
+            .reduce((acc, resource) => {
+            if (this.resourceInliner.shouldInline(resource)) {
+                Array.prototype.push.apply(acc, this.resourceInliner.inlineResource(resource));
+            }
+            else {
+                acc.push(resource);
+            }
+            return acc;
+        }, [])
+            .filter((resource) => this.resourceInliner.shouldAddResource(resource));
+    }
+}
+
+export { ResourcesRegistry };

package/lib/resourcesRegistry/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var toArray = require('@tinkoff/utils/array/toArray');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var toArray__default = /*#__PURE__*/_interopDefaultLegacy(toArray);
+
+class ResourcesRegistry {
+    constructor({ resourceInliner }) {
+        this.resources = new Set();
+        this.resourceInliner = resourceInliner;
+    }
+    register(resourceOrResources) {
+        toArray__default["default"](resourceOrResources).forEach((resource) => {
+            this.resources.add(resource);
+        });
+    }
+    getPageResources() {
+        return Array.from(this.resources.values())
+            .reduce((acc, resource) => {
+            if (this.resourceInliner.shouldInline(resource)) {
+                Array.prototype.push.apply(acc, this.resourceInliner.inlineResource(resource));
+            }
+            else {
+                acc.push(resource);
+            }
+            return acc;
+        }, [])
+            .filter((resource) => this.resourceInliner.shouldAddResource(resource));
+    }
+}
+
+exports.ResourcesRegistry = ResourcesRegistry;