More of the Smidge initial implementation. Adding TODOs for next steps

This commit is contained in:
Elitsa Marinovska
2020-03-24 17:34:34 +01:00
parent 85730eadb0
commit ccfaebb09f
20 changed files with 176 additions and 76 deletions

View File

@@ -18,7 +18,7 @@ namespace Umbraco.Core.Assets
public int Group { get; set; }
public string PathNameAlias { get; set; }
public string ForceProvider { get; set; }
public bool ForceBundle { get; set; }
public string Bundle { get; }
/// <summary>
/// Used to store additional attributes in the HTML markup for the item
@@ -30,7 +30,7 @@ namespace Umbraco.Core.Assets
#endregion
public AssetFile(AssetType type)
public AssetFile(AssetType type, string bundleName = "unspecfed")
{
DependencyType = type;
HtmlAttributes = new Dictionary<string, string>();
@@ -39,6 +39,7 @@ namespace Umbraco.Core.Assets
Priority = 100;
//Unless a group is specified, all dependencies will go into the same, default, group.
Group = 100;
Bundle = bundleName;
}
}
}

View File

@@ -10,7 +10,7 @@ namespace Umbraco.Core.Assets
int Group { get; set; }
string PathNameAlias { get; set; }
string ForceProvider { get; set; }
bool ForceBundle { get; set; }
string Bundle { get; }
IDictionary<string, string> HtmlAttributes { get; }
}
}

View File

@@ -0,0 +1,23 @@
using System;
using System.Collections.Generic;
using System.Text;
namespace Umbraco.Core
{
public static partial class Constants
{
public static class RuntimeMinification
{
public static class CssBundles
{
public const string Default = "default-css";
public const string Index = "index-css";
}
public static class JsBundles
{
public const string Default = "default-js";
}
}
}
}

View File

@@ -14,17 +14,17 @@ namespace Umbraco.Core.Runtime
//return type IHtmlString
//IClientDependencyPath[]
string RenderCssHere(params string[] path);
string RenderCssHere(string bundleName);
// return type HtmlHelper
string RequiresJs(string filePath);
// return type IHtmlString
string RenderJsHere();
string RenderJsHere(string bundleName);
IEnumerable<string> GetAssetPaths(AssetType assetType, List<IAssetFile> attributes);
string Minify(string src);
string Minify(string src, AssetType assetType);
void Reset();
string GetScriptForBackOffice();
IEnumerable<string> GetAssetList();

View File

@@ -1,7 +1,5 @@
using System;
using Microsoft.AspNetCore.Builder;
using Smidge;
using Smidge.Models;
namespace Umbraco.Web.BackOffice.AspNetCore
{
@@ -14,29 +12,6 @@ namespace Umbraco.Web.BackOffice.AspNetCore
throw new ArgumentNullException(nameof(app));
}
app.UseRuntimeMinifier();
return app;
}
public static IApplicationBuilder UseRuntimeMinifier(this IApplicationBuilder app)
{
app.UseSmidge(bundles =>
{
bundles.Create("default-css",
new CssFile("~/assets/css/umbraco.css"),
new CssFile("~/lib/bootstrap-social/bootstrap-social.css"),
new CssFile("~/lib/font-awesome/css/font-awesome.min.css"));
bundles.Create("index-css",
new CssFile("assets/css/canvasdesigner.css"));
bundles.Create("default-js", WebFileType.Js,
"//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js",
"//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js",
"//cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
});
return app;
}
}

View File

@@ -42,6 +42,7 @@ namespace Umbraco.Web.BackOffice.AspNetCore
var httpContextAccessor = serviceProvider.GetService<IHttpContextAccessor>();
var webHostEnvironment = serviceProvider.GetService<IWebHostEnvironment>();
var hostApplicationLifetime = serviceProvider.GetService<IHostApplicationLifetime>();
var configuration = serviceProvider.GetService<IConfiguration>();
var configs = serviceProvider.GetService<Configs>();
@@ -51,7 +52,7 @@ namespace Umbraco.Web.BackOffice.AspNetCore
hostApplicationLifetime,
configs);
services.AddRuntimeMinifier();
services.AddRuntimeMinifier(configuration);
return services;
}
@@ -84,9 +85,10 @@ namespace Umbraco.Web.BackOffice.AspNetCore
return services;
}
public static IServiceCollection AddRuntimeMinifier(this IServiceCollection services)
public static IServiceCollection AddRuntimeMinifier(this IServiceCollection services,
IConfiguration configuration)
{
services.AddSmidge((IConfiguration) ConfigurationManager.GetSection("smidge"));
services.AddSmidge(configuration.GetSection("Umbraco:Smidge"));
return services;
}

View File

@@ -0,0 +1,22 @@
using System;
using System.Collections.Generic;
using System.Text;
using Umbraco.Core.Composing;
using Umbraco.Web.Runtime;
namespace Umbraco.Web.BackOffice.Smidge
{
[ComposeAfter(typeof(WebInitialComponent))]
public sealed class SmidgeComponent : IComponent
{
public void Initialize()
{
throw new NotImplementedException();
}
public void Terminate()
{
throw new NotImplementedException();
}
}
}

View File

@@ -0,0 +1,18 @@
using System;
using System.Collections.Generic;
using System.Text;
using Umbraco.Core;
using Umbraco.Core.Composing;
using Umbraco.Core.Runtime;
namespace Umbraco.Web.BackOffice.Smidge
{
public sealed class SmidgeComposer : ComponentComposer<SmidgeComponent>
{
public override void Compose(Composition composition)
{
base.Compose(composition);
composition.RegisterUnique<IRuntimeMinifier, SmidgeRuntimeMinifier>();
}
}
}

View File

@@ -17,7 +17,9 @@ namespace Umbraco.Web.BackOffice.Smidge
public class SmidgeRuntimeMinifier : IRuntimeMinifier
{
private readonly SmidgeHelper _smidge;
public string GetHashValue => new SmidgeConfig((IConfiguration) ConfigurationManager.GetSection("smidge")).Version;
// TODO: We need to use IConfiguration to get the section (ConfigurationManager is not the way to do it)
public string GetHashValue => new SmidgeConfig((IConfiguration)ConfigurationManager.GetSection("Umbraco:Smidge")).Version;
public SmidgeRuntimeMinifier(SmidgeHelper smidge)
{
@@ -28,9 +30,9 @@ namespace Umbraco.Web.BackOffice.Smidge
throw new NotImplementedException();
}
public string RenderCssHere(params string[] path)
public string RenderCssHere(string bundleName)
{
throw new NotImplementedException();
return _smidge.CssHereAsync(bundleName).ToString();
}
public string RequiresJs(string filePath)
@@ -38,27 +40,42 @@ namespace Umbraco.Web.BackOffice.Smidge
throw new NotImplementedException();
}
public string RenderJsHere()
public string RenderJsHere(string bundleName)
{
throw new NotImplementedException();
return _smidge.JsHereAsync(bundleName).ToString();
}
public IEnumerable<string> GetAssetPaths(AssetType assetType, List<IAssetFile> attributes)
{
throw new NotImplementedException();
var parsed = new List<string>();
if (assetType == AssetType.Javascript)
attributes.ForEach(x => parsed.AddRange(_smidge.GenerateJsUrlsAsync(x.Bundle).Result));
else
attributes.ForEach(x => parsed.AddRange(_smidge.GenerateCssUrlsAsync(x.Bundle).Result));
return parsed;
}
public string Minify(string src)
public string Minify(string src, AssetType assetType)
{
//TextReader reader = new StringReader(src);
// var jsMinifier = new NuglifyJs();
if (assetType == AssetType.Javascript)
{
// return jsMinifier.ProcessAsync();
return "";
// TODO: use NuglifyJs to minify JS files (https://github.com/Shazwazza/Smidge/blob/master/src/Smidge.Nuglify/NuglifyJs.cs)
}
else
{
// TODO: use NuglifyCss to minify CSS files (https://github.com/Shazwazza/Smidge/blob/master/src/Smidge.Nuglify/NuglifyCss.cs)
}
throw new NotImplementedException();
}
public void Reset()
{
// TODO: Need to figure out how to delete temp directories to make sure we get fresh caches
throw new NotImplementedException();
}

View File

@@ -19,6 +19,7 @@
<ProjectReference Include="..\Umbraco.Configuration\Umbraco.Configuration.csproj" />
<ProjectReference Include="..\Umbraco.Core\Umbraco.Core.csproj" />
<ProjectReference Include="..\Umbraco.Infrastructure\Umbraco.Infrastructure.csproj" />
<ProjectReference Include="..\Umbraco.Web\Umbraco.Web.csproj" />
</ItemGroup>
</Project>

View File

@@ -85,7 +85,7 @@
]
}
},
"smidge": {
"Smidge": {
"dataFolder" : "App_Data/Smidge",
"version" : "1"
}

View File

@@ -62,6 +62,9 @@
</PropertyGroup>
<ItemGroup>
<Reference Include="Microsoft.CSharp" />
<Reference Include="Smidge">
<HintPath>..\..\..\..\.nuget\packages\smidge\3.1.0\lib\netcoreapp3.0\Smidge.dll</HintPath>
</Reference>
<Reference Include="System.ComponentModel" />
<Reference Include="System.Data" />
<Reference Include="System.Drawing" />
@@ -108,6 +111,9 @@
<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
<PackageReference Include="Smidge">
<Version>3.1.0</Version>
</PackageReference>
<PackageReference Include="System.ComponentModel.Annotations" Version="4.6.0" />
<PackageReference Include="Umbraco.SqlServerCE" Version="4.0.0.1" />
</ItemGroup>

View File

@@ -1,5 +1,7 @@
@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Core
@using Umbraco.Web
@using Umbraco.Web.Composing
@using Umbraco.Web.Controllers
@@ -10,15 +12,18 @@
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
SmidgeHelper
.CreateJsBundle(Constants.RuntimeMinification.JsBundles.Default)
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
var success = TempData["ProfileUpdateSuccess"] != null;
}
@*NOTE: This RenderJsHere code should be put on your main template page where the rest of your script tags are placed*@
@Html.RenderJsHere()
@Current.RuntimeMinifier.RenderJsHere("default-js")
@if (Current.MembershipHelper.IsLoggedIn() && profileModel != null)
{

View File

@@ -1,6 +1,9 @@
@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Web
@using Umbraco.Core
@using Umbraco.Web.Composing
@using Umbraco.Web.Models
@using Umbraco.Web.Controllers
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@@ -11,13 +14,16 @@
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
SmidgeHelper
.CreateJsBundle(Constants.RuntimeMinification.JsBundles.Default)
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
}
@* NOTE: This RenderJsHere code should be put on your main template page where the rest of your script tags are placed *@
@Html.RenderJsHere()
@Current.RuntimeMinifier.RenderJsHere("default-js")
@using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin"))
{

View File

@@ -1,5 +1,7 @@
@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Core
@using Umbraco.Web
@using Umbraco.Web.Composing
@using Umbraco.Web.Controllers
@@ -34,15 +36,18 @@
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js");
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
SmidgeHelper
.CreateJsBundle(Constants.RuntimeMinification.JsBundles.Default)
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js")
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js");
var success = TempData["FormSuccess"] != null;
}
@*NOTE: This RenderJsHere code should be put on your main template page where the rest of your script tags are placed*@
@Html.RenderJsHere()
@Current.RuntimeMinifier.RenderJsHere("default-js")
@if (success)
{

View File

@@ -1,8 +1,11 @@
@using Umbraco.Core
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Web.Composing
@using Umbraco.Web
@using Constants = Umbraco.Core.Constants
using Umbraco.Core
@inherits System.Web.Mvc.WebViewPage<Umbraco.Web.Editors.BackOfficeModel>
@{
Layout = null;
@@ -11,6 +14,10 @@
.RequiresCss("assets/css/umbraco.css", "Umbraco")
.RequiresCss("lib/bootstrap-social/bootstrap-social.css", "Umbraco")
.RequiresCss("lib/font-awesome/css/font-awesome.min.css", "Umbraco");
SmidgeHelper
.CreateCssBundle(Constants.RuntimeMinification.CssBundles.Index)
.RequiresCss("~/assets/css/canvasdesigner.css");
}
<!DOCTYPE html>

View File

@@ -1,8 +1,10 @@
@using Umbraco.Core
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Web.Composing
@using Umbraco.Web
@using Constants = Umbraco.Core.Constants
@inherits WebViewPage<Umbraco.Web.Editors.BackOfficeModel>
@@ -18,10 +20,9 @@
}
}
Html
.RequiresCss("assets/css/umbraco.css", "Umbraco")
.RequiresCss("lib/bootstrap-social/bootstrap-social.css", "Umbraco")
.RequiresCss("lib/font-awesome/css/font-awesome.min.css", "Umbraco");
SmidgeHelper
.CreateCssBundle(Constants.RuntimeMinification.CssBundles.Default)
.RequiresCss("~/assets/css/umbraco.css", "~/lib/bootstrap-social/bootstrap-social.css", "~/lib/font-awesome/css/font-awesome.min.css");
}
<!DOCTYPE html>
@@ -38,8 +39,7 @@
<title ng-bind="$root.locationTitle">Umbraco</title>
@Html.RenderCssHere(
new BasicPath("Umbraco", Current.IOHelper.ResolveUrl(Current.Configs.Global().UmbracoPath)))
@Current.RuntimeMinifier.RenderCssHere("default-css")
</head>
<body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show, 'umb-tour-is-visible': tour.show, 'tabbing-active':tabbingActive}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">

View File

@@ -1,14 +1,18 @@
@using Umbraco.Core
@using Umbraco.Core
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using Smidge
@using Umbraco.Web.Composing
@using Umbraco.Web
@using Constants = Umbraco.Core.Constants
@inherits System.Web.Mvc.WebViewPage<Umbraco.Web.Editors.BackOfficePreviewModel>
@{
var disableDevicePreview = Model.DisableDevicePreview.ToString().ToLowerInvariant();
Html.RequiresCss("assets/css/canvasdesigner.css", "Umbraco");
SmidgeHelper
.CreateCssBundle(Constants.RuntimeMinification.CssBundles.Index)
.RequiresCss("~/assets/css/canvasdesigner.css");
}
<!DOCTYPE html>
<html lang="en">
@@ -18,8 +22,7 @@
<meta name="robots" content="noindex, nofollow">
<meta name="pinterest" content="nopin" />
@Html.RenderCssHere(
new BasicPath("Umbraco", Current.IOHelper.ResolveUrl(Current.Configs.Global().UmbracoPath)))
@Current.RuntimeMinifier.RenderCssHere("index-css")
</head>
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController" ng-class="{'tabbing-active': tabbingActive === true}" ng-click="windowClickHandler($event)">
@@ -64,7 +67,8 @@
</div>
}
<button ng-click="exitPreview()" title="Exit Preview" class="menu-bar__button umb-outline"><i class="icon icon-power"></i><span>Exit</span>
<button ng-click="exitPreview()" title="Exit Preview" class="menu-bar__button umb-outline">
<i class="icon icon-power"></i><span>Exit</span>
</button>
</div>

View File

@@ -45,7 +45,7 @@ namespace Umbraco.Web.JavaScript.CDF
//return html;
}
public string RenderCssHere(params string[] path)
public string RenderCssHere(string bundleName)
{
throw new NotImplementedException();
//return new HtmlString(_htmlHelper.ViewContext.GetLoader().RenderPlaceholder(
@@ -59,7 +59,7 @@ namespace Umbraco.Web.JavaScript.CDF
//return _htmlHelper;
}
public string RenderJsHere()
public string RenderJsHere(string bundleName)
{
throw new NotImplementedException();
//return new HtmlString(
@@ -75,7 +75,7 @@ namespace Umbraco.Web.JavaScript.CDF
foreach (var assetFile in attributes)
{
if(!((AssetFile)assetFile is null))
if (!((AssetFile)assetFile is null))
dependencies.Add(MapAssetFile(assetFile));
}
@@ -86,12 +86,19 @@ namespace Umbraco.Web.JavaScript.CDF
return toParse.Split(new[] { DependencyPathRenderer.Delimiter }, StringSplitOptions.RemoveEmptyEntries);
}
public string Minify(string src)
public string Minify(string src, AssetType assetType)
{
TextReader reader = new StringReader(src);
var jsMinifier = new JSMin();
return jsMinifier.Minify(reader);
if (assetType == AssetType.Javascript)
{
var jsMinifier = new JSMin();
return jsMinifier.Minify(reader);
}
// asset type is Css
var cssMinifier = new CssMinifier();
return cssMinifier.Minify(reader);
}
public void Reset()

View File

@@ -1,4 +1,5 @@
using System.Web.Mvc;
using Umbraco.Core.Assets;
using Umbraco.Web.Composing;
using Umbraco.Core.Hosting;
using Umbraco.Core.Runtime;
@@ -43,7 +44,7 @@ namespace Umbraco.Web.Mvc
//minify the result
var result = jsResult.Script;
var minified = _runtimeMinifier.Minify(result);
var minified = _runtimeMinifier.Minify(result, AssetType.Javascript);
jsResult.Script = minified;
}
}