From 352bf316d3a55e8d5d912f8c945bd6391d3cdc00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=A1clav=20Holu=C5=A1a?= Date: Thu, 19 Nov 2020 22:29:11 +0100 Subject: [PATCH 1/2] Lazy loading technique for React style paths --- src/React.AspNet/HtmlHelperExtensions.cs | 20 +++++++++++++++++-- .../Mvc/HtmlHelperExtensionsTests.cs | 12 +++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/React.AspNet/HtmlHelperExtensions.cs b/src/React.AspNet/HtmlHelperExtensions.cs index 08336eefd..b43807d12 100644 --- a/src/React.AspNet/HtmlHelperExtensions.cs +++ b/src/React.AspNet/HtmlHelperExtensions.cs @@ -6,6 +6,7 @@ */ using System; +using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; @@ -193,13 +194,28 @@ public static IHtmlString ReactGetScriptPaths(this IHtmlHelper htmlHelper, IUrlH /// /// /// Optional IUrlHelper instance. Enables the use of tilde/relative (~/) paths inside the expose-components.js file. + /// Specifies if lazy style load technique should be used /// - public static IHtmlString ReactGetStylePaths(this IHtmlHelper htmlHelper, IUrlHelper urlHelper = null) + public static IHtmlString ReactGetStylePaths(this IHtmlHelper htmlHelper, IUrlHelper urlHelper = null, bool lazy = false) { - return new HtmlString(string.Join("", Environment.GetStylePaths() + return lazy + ? GetStylePaths(urlHelper) + : GetStylePathsLazy(urlHelper); + } + + private static IHtmlString GetStylePaths(IUrlHelper urlHelper = null) + { + return new HtmlString(string.Concat(Environment.GetStylePaths() .Select(stylePath => $""))); } + private static IHtmlString GetStylePathsLazy(IUrlHelper urlHelper = null) + { + var elements = Environment.GetStylePaths() + .Select(stylePath => $"createStyleElem('{(urlHelper == null ? stylePath : urlHelper.Content(stylePath))}');"); + return new HtmlString($""); + } + private static IHtmlString RenderToString(Action withWriter) { var stringWriter = _sharedStringWriter; diff --git a/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs b/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs index 964b26178..dbbf21ce2 100644 --- a/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs +++ b/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs @@ -315,5 +315,17 @@ public void ReactGetStylePaths() Assert.Equal("", result.ToHtmlString()); } + + [Fact] + public void ReactGetStylePathsLazy() + { + var environment = ConfigureMockEnvironment(); + + environment.Setup(x => x.GetStylePaths()).Returns(new[] { "/dist/vendor.css", "/dist/app.css" }); + + var result = HtmlHelperExtensions.ReactGetStylePaths(null, lazy: true); + + Assert.Equal("(function(){function createStyleElem(link){var e=document.createElement('link');e.href=link;e.rel='stylesheet';e.type='text/css';document.getElementsByTagName('head')[0].appendChild(e);}createStyleElem('/dist/vendor.css');createStyleElem('/dist/app.css');})()", result.ToHtmlString()); + } } } From 760f421ae50bb43d306b53d2cfd802c51f43509e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=A1clav=20Holu=C5=A1a?= Date: Thu, 19 Nov 2020 23:18:04 +0100 Subject: [PATCH 2/2] Fixed condition and test --- src/React.AspNet/HtmlHelperExtensions.cs | 4 ++-- tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/React.AspNet/HtmlHelperExtensions.cs b/src/React.AspNet/HtmlHelperExtensions.cs index b43807d12..d83088d2e 100644 --- a/src/React.AspNet/HtmlHelperExtensions.cs +++ b/src/React.AspNet/HtmlHelperExtensions.cs @@ -199,8 +199,8 @@ public static IHtmlString ReactGetScriptPaths(this IHtmlHelper htmlHelper, IUrlH public static IHtmlString ReactGetStylePaths(this IHtmlHelper htmlHelper, IUrlHelper urlHelper = null, bool lazy = false) { return lazy - ? GetStylePaths(urlHelper) - : GetStylePathsLazy(urlHelper); + ? GetStylePathsLazy(urlHelper) + : GetStylePaths(urlHelper); } private static IHtmlString GetStylePaths(IUrlHelper urlHelper = null) diff --git a/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs b/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs index dbbf21ce2..01399a8f9 100644 --- a/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs +++ b/tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs @@ -325,7 +325,7 @@ public void ReactGetStylePathsLazy() var result = HtmlHelperExtensions.ReactGetStylePaths(null, lazy: true); - Assert.Equal("(function(){function createStyleElem(link){var e=document.createElement('link');e.href=link;e.rel='stylesheet';e.type='text/css';document.getElementsByTagName('head')[0].appendChild(e);}createStyleElem('/dist/vendor.css');createStyleElem('/dist/app.css');})()", result.ToHtmlString()); + Assert.Equal("", result.ToHtmlString()); } } }