From 7573af88a6a7f4b782c793391374ecd5346e330a Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Wed, 18 Aug 2021 21:47:28 +0700 Subject: [PATCH 1/4] Reduce async console logger --- .../view/frontend/web/js/page-cache.js | 29 ++++++------- .../view/base/web/js/core/renderer/layout.js | 41 ++----------------- .../web/js/lib/knockout/bindings/scope.js | 22 ++-------- .../web/js/lib/knockout/template/engine.js | 30 +------------- 4 files changed, 21 insertions(+), 101 deletions(-) diff --git a/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js b/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js index 2509891d02256..28a2cdb0e75df 100644 --- a/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js +++ b/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js @@ -6,11 +6,10 @@ define([ 'jquery', 'domReady', - 'consoleLogger', 'Magento_PageCache/js/form-key-provider', 'jquery-ui-modules/widget', 'mage/cookies' -], function ($, domReady, consoleLogger, formKeyInit) { +], function ($, domReady, formKeyInit) { 'use strict'; /** @@ -45,18 +44,6 @@ define([ * @param {jQuery} element - Comment holder */ (function lookup(element) { - var iframeHostName; - - // prevent cross origin iframe content reading - if ($(element).prop('tagName') === 'IFRAME') { - iframeHostName = $('').prop('href', $(element).prop('src')) - .prop('hostname'); - - if (window.location.hostname !== iframeHostName) { - return []; - } - } - /** * Rewrite jQuery contents(). * @@ -64,13 +51,23 @@ define([ */ contents = function (elem) { return $.map(elem, function (el) { + var iframeHostName; + + // prevent cross origin iframe content reading + if ($(element).prop('tagName') === 'IFRAME') { + iframeHostName = $('').prop('href', $(element).prop('src')) + .prop('hostname'); + + if (window.location.hostname !== iframeHostName) { + return []; + } + } + try { return el.nodeName.toLowerCase() === 'iframe' ? el.contentDocument || (el.contentWindow ? el.contentWindow.document : []) : $.merge([], el.childNodes); } catch (e) { - consoleLogger.error(e); - return []; } }); diff --git a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js index 5240fe55f6a74..6fad25e07ab28 100644 --- a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js +++ b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js @@ -8,9 +8,8 @@ define([ 'jquery', 'mageUtils', 'uiRegistry', - './types', - '../../lib/logger/console-logger' -], function (_, $, utils, registry, types, consoleLogger) { + './types' +], function (_, $, utils, registry, types) { 'use strict'; var templates = registry.create(), @@ -71,25 +70,7 @@ define([ * @returns {jQueryPromise} */ function loadDeps(node) { - var loaded = $.Deferred(), - loggerUtils = consoleLogger.utils; - - if (node.deps) { - consoleLogger.utils.asyncLog( - loaded, - { - data: { - component: node.name, - deps: node.deps - }, - messages: loggerUtils.createMessages( - 'depsStartRequesting', - 'depsFinishRequesting', - 'depsLoadingFail' - ) - } - ); - } + var loaded = $.Deferred(); registry.get(node.deps, function (deps) { node.provider = node.extendProvider ? deps && deps.name : node.provider; @@ -109,19 +90,8 @@ define([ var loaded = $.Deferred(), source = node.component; - consoleLogger.info('componentStartLoading', { - component: node.component - }); - require([source], function (constr) { - consoleLogger.info('componentFinishLoading', { - component: node.component - }); loaded.resolve(node, constr); - }, function () { - consoleLogger.error('componentLoadingFail', { - component: node.component - }); }); return loaded.promise(); @@ -136,11 +106,6 @@ define([ function initComponent(node, Constr) { var component = new Constr(_.omit(node, 'children')); - consoleLogger.info('componentStartInitialization', { - component: node.component, - componentName: node.name - }); - registry.set(node.name, component); } diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js index 59e82eb88a299..bc47e45d94ee1 100644 --- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js +++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/scope.js @@ -8,9 +8,8 @@ define([ 'uiRegistry', 'mage/translate', '../template/renderer', - 'jquery', - '../../logger/console-logger' -], function (ko, registry, $t, renderer, $, consoleLogger) { + 'jquery' +], function (ko, registry, $t, renderer, $) { 'use strict'; /** @@ -58,24 +57,9 @@ define([ update: function (el, valueAccessor, allBindings, viewModel, bindingContext) { var component = valueAccessor(), promise = $.Deferred(), - apply = applyComponents.bind(this, el, bindingContext, promise), - loggerUtils = consoleLogger.utils; + apply = applyComponents.bind(this, el, bindingContext, promise); if (typeof component === 'string') { - loggerUtils.asyncLog( - promise, - { - data: { - component: component - }, - messages: loggerUtils.createMessages( - 'requestingComponent', - 'requestingComponentIsLoaded', - 'requestingComponentIsFailed' - ) - } - ); - registry.get(component, apply); } else if (typeof component === 'function') { component(apply); diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js index 3575225c74602..db33a67932369 100644 --- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js +++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js @@ -7,9 +7,8 @@ define([ 'ko', 'underscore', './observable_source', - './renderer', - '../../logger/console-logger' -], function ($, ko, _, Source, renderer, consoleLogger) { + './renderer' +], function ($, ko, _, Source, renderer) { 'use strict'; var RemoteTemplateEngine, @@ -69,14 +68,9 @@ define([ return origUpdate.apply(this, arguments); } - if (!options.name) { - consoleLogger.error('Could not find template name', options); - } templateName = options.name; } else if (typeof options === 'string') { templateName = options; - } else { - consoleLogger.error('Could not build a template binding', options); } engine._trackRender(templateName); isSync = engine._hasTemplateLoaded(templateName); @@ -184,30 +178,10 @@ define([ source.requestedBy = bindingContext.$data.name; sources[templateId] = source; - consoleLogger.info('templateStartLoading', { - template: templateId, - component: bindingContext.$data.name - }); - renderer.render(template).then(function (rendered) { - consoleLogger.info('templateLoadedFromServer', { - template: templateId, - component: bindingContext.$data.name - }); source.nodes(rendered); engine._releaseRender(templateId, 'async'); }).fail(function () { - consoleLogger.error('templateLoadingFail', { - template: templateId, - component: bindingContext.$data.name - }); - }); - } - - if (source.requestedBy !== bindingContext.$data.name) { - consoleLogger.info('templateLoadedFromCache', { - template: templateId, - component: bindingContext.$data.name }); } From 8e36ee1f8f3205e6a5fdd58216f24b939fc34604 Mon Sep 17 00:00:00 2001 From: Tu Nguyen Anh Date: Sun, 6 Feb 2022 16:12:58 +0700 Subject: [PATCH 2/4] Update log console native usages --- .../view/frontend/web/js/page-cache.js | 2 ++ .../view/base/web/js/core/renderer/layout.js | 16 +++++++++++ .../web/js/lib/knockout/template/engine.js | 27 +++++++++++++++++++ 3 files changed, 45 insertions(+) diff --git a/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js b/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js index 28a2cdb0e75df..d34b73997bf1b 100644 --- a/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js +++ b/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js @@ -68,6 +68,8 @@ define([ el.contentDocument || (el.contentWindow ? el.contentWindow.document : []) : $.merge([], el.childNodes); } catch (e) { + console.error(e); + return []; } }); diff --git a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js index 6fad25e07ab28..a124066ff3989 100644 --- a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js +++ b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js @@ -90,8 +90,19 @@ define([ var loaded = $.Deferred(), source = node.component; + console.info('componentStartLoading', { + component: node.component + }); + require([source], function (constr) { + console.info('componentFinishLoading', { + component: node.component + }); loaded.resolve(node, constr); + }, function () { + console.error('componentLoadingFail', { + component: node.component + }); }); return loaded.promise(); @@ -106,6 +117,11 @@ define([ function initComponent(node, Constr) { var component = new Constr(_.omit(node, 'children')); + console.info('componentStartInitialization', { + component: node.component, + componentName: node.name + }); + registry.set(node.name, component); } diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js index db33a67932369..a7fed653e3a17 100644 --- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js +++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js @@ -68,9 +68,15 @@ define([ return origUpdate.apply(this, arguments); } + if (!options.name) { + console.error('Could not find template name', options); + } + templateName = options.name; } else if (typeof options === 'string') { templateName = options; + } else { + console.error('Could not build a template binding', options); } engine._trackRender(templateName); isSync = engine._hasTemplateLoaded(templateName); @@ -178,10 +184,31 @@ define([ source.requestedBy = bindingContext.$data.name; sources[templateId] = source; + console.info('templateStartLoading', { + template: templateId, + component: bindingContext.$data.name + }); + renderer.render(template).then(function (rendered) { + console.info('templateLoadedFromServer', { + template: templateId, + component: bindingContext.$data.name + }); + source.nodes(rendered); engine._releaseRender(templateId, 'async'); }).fail(function () { + console.error('templateLoadingFail', { + template: templateId, + component: bindingContext.$data.name + }); + }); + } + + if (source.requestedBy !== bindingContext.$data.name) { + console.info('templateLoadedFromCache', { + template: templateId, + component: bindingContext.$data.name }); } From 1385431ae9d730c5d04dbf151746a5841e2a87d0 Mon Sep 17 00:00:00 2001 From: Tu Nguyen Anh Date: Sun, 30 Oct 2022 19:08:36 +0700 Subject: [PATCH 3/4] Check iframe test --- .../app/code/Magento/PageCache/frontend/js/page-cache.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js index 2fc3a737ba38c..a2a367c3573dc 100644 --- a/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js +++ b/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js @@ -39,7 +39,7 @@ define([ it('on empty node comments() returns empty Array', function () { expect($(element).comments()).toEqual([]); - expect($(iframe).insertAfter('body').comments()).toEqual([]); + expect($(iframe).comments()).toEqual([]); }); it('on non-empty node comments() returns empty Array with nodes', function () { From a31939941c11db8587da63757404a8c442e1328d Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Wed, 1 Feb 2023 20:28:54 +0700 Subject: [PATCH 4/4] Update layout.js --- app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js index a124066ff3989..f55a4bc838d7d 100644 --- a/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js +++ b/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js @@ -99,7 +99,8 @@ define([ component: node.component }); loaded.resolve(node, constr); - }, function () { + }, function (e) { + console.log(e); console.error('componentLoadingFail', { component: node.component });