I am using System.Web.Optimization v1.3 in what I believe is a standard configuration, to bundle and minify the JavaScript and CSS files in an MVC 5 web application. For the most part, this works very well, but I have discovered a case where JavaScript is corrupted by the minification process.
Here is a simplified version of what was originally an AngularJS input validation directive:
var myApp;
(function (myApp) {
myApp.module.directive("validator", [
function () {
return {
link: function (scope, element) {
var validators = [
{ signal: "required", message: "Please enter a value", value: null },
{ signal: "email", message: "Please enter a valid email address", value: null }
];
$("input", element).on("blur", function () {
for (var i in validators) {
var validator = validators[i];
if (scope.$parent.form[scope.modelName].$error[validator.signal]) {
element.removeClass("has-success");
scope.errorMessage = myApp.Utility.formatString(validator.message, eval(validator.value));
break;
}
}
});
}
};
}
]);
})(myApp || (myApp = {}));
Although the above code no longer does anything useful (because it has been trimmed), it does demonstrate the minification problem. When minified, the resulting JavaScript is as follows:
var myApp;
function(n){
n.module.directive("validator",[
function(){
return{
link:function(t,i){
var r=[
{signal:"required",message:"Please enter a value",value:null},
{signal:"email",message:"Please enter a valid email address",value:null}
];
$("input",i).on("blur",function(){
var i,
validator;
for(i in r)
if(validator=r[i],t.$parent.form[t.modelName].$error[validator.signal]){
i.removeClass("has-success");
t.errorMessage=n.Utility.formatString(validator.message,eval(validator.value));
break
}
})
}
}
}
])
})(myApp||(myApp={}))
Note how minification has assigned the parameter names t and i to the link function, despite the fact that a loop variable i is used in the original code.
Needless to say, this breaks the code. In this case I can fix it by renaming my loop variable, but I am concerned that there may be other adverse consequences to JsMinify's minification that I am not aware of.
So, I have 3 questions related to this issue:
Am I right to assume that this is a minification bug and, if so, is
there somewhere I should report it?
Is there any practical way of finding any other instances of this issue in my minified code?
Is it possible to replace the JavaScript minification engine used by
System.Web.Optimization and, if so, what would be a good
alternative?
Many thanks, in advance, for your ideas.
Tim
Update: After some further investigation, I have discovered that it is actually WebGrease that performs minification on behalf of System.Web.Optimization and this issue appears to be the one that I am seeing. This seems to answer my first question, but I would still appreciate advice regarding alternative minifiers.
In the past, I have successfully used YUI Compressor for .Net (now moved to GitHub), which is a .NET port from Java of YUI Compressor. The great thing about it is that it's based on Mozilla's Rhino JavaScript interpreter, meaning it actually understands the code, and not just runs regular expressions on it. As a result, it will fail your build if you have JavaScript syntax errors.
I found the Bundle Transformer (https://bundletransformer.codeplex.com/) to work well. It has a number of minifier options, such as YUI, JSMin, Microsoft Ajax Minifier, etc.
Example code in Global.asax.cs:
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
var yuiMinifier = new BundleTransformer.Yui.Minifiers.YuiJsMinifier();
var customerTransformer = new BundleTransformer.Core.Transformers.ScriptTransformer(yuiMinifier);
var customBundle = new BundleTransformer.Core.Bundles.CustomScriptBundle("~/js/my-javascript.min.js");
customBundle.Include("~/js/script1.js");
customBundle.Include("~/js/script2.js");
customBundle.Transforms.Clear();
customBundle.Transforms.Add(customerTransformer);
BundleTable.Bundles.Add(customBundle);
}
}
Note: For me the minification only occurred if debug mode was set to false in the web.config.
Related
I am using the CrossDownManager plugin for Xamarin Forms
Here
When I run the method on Android it processes as expected. On iOS Debug.Writeline("Success!") isn't being hit like it was on Android.
Here is the code:
void ViewImage(string imageLink)
{
var downloadManager = CrossDownloadManager.Current;
downloadManager.PathNameForDownloadedFile = new System.Func<IDownloadFile, string>(file =>
{
string path = DependencyService.Get<IImageSaver>().Save("YHTS" + DateTime.Today.Ticks.ToString() + ".jpg");
Debug.WriteLine("Success!");
return path;
});
try
{
var file = downloadManager.CreateDownloadFile(imageLink);
Debug.WriteLine("file created");
downloadManager.Start(file);
Debug.WriteLine("downloadstarted");
}
catch (Exception e)
{
Debug.WriteLine(e.ToString());
}
}
For the life of me I can't figure out why the that code block isn't processed. Any ideas?
This is an interesting issue as technically your code should work as expected. I've done a little digging and found a reply to a similar question here.
your options are many... including:
DEBUG preprocessor as you show in your question.
Use System.Diagnostic.Debug.WriteLine: Any calls to Debug.* will be
removed by the compiler due to the [Conditional("DEBUG")] attribute
being applied.
Create your own "Logger" class as a wrapper to the stdout writers and
[Conditional("DEBUG")] it
Use Fody and re-weave the assemblies to remove/NOP/redirect the
WriteLine I do this to redirect the calls to in internal log and upon
crash or user stat requests, forward this log to our crash reporting
servers. etc, .....
So there are a few alternatives to consider, one of the common suggestions I've seen is to use the fully qualified reference for WriteLine(); as such:
System.Console.WriteLine("woop woop");
I would suggest giving the above a try first.
I've been working through the Angular 2 tutorial (in TypeScript) when I got stuck on this part. They now want to separate templates into separate files. That's fine and dandy, but I've got a quirky setup: I'm serving up the files with ASP.NET MVC, and it's refusing to serve up the file from the Views folder. Fair enough: I anticipate needing to serve up Razor (.cshtml) files, so I'm happy to try and hack this out instead of just whitelisting .html.
I've worked with Angular 1 before, and in this situation I used a decorator to modify the $templateRequest service to modify the template URLs into something MVC will accept, and then I set up MVC to serve up the corresponding files. Quite clever work if I do say so myself. So I just need to replicate this in Angular 2, right? That should be easy.
Wrong. So wrong. After some guesswork Googling I found UrlResolver which, after some client-side debugging I confirmed, is the class I want to extend. The documentation even says:
This class can be overridden by the application developer to create custom behavior.
Yes! This is exactly what I want to do. Unfortunately no examples of how to override it have been supplied. I've found this DemoUrlResolver and this MyUrlResolver, but I can't figure out how or if either of them works. I've tried the multiple approaches to supplying my custom provider (see this answer) including the bootstrap and providers (on the module and the app component) approaches all to no avail.
How do I override UrlResolver?
I assume it doesn't matter, but at the moment my extension does nothing but defer to the base class:
class MvcUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string {
return super.resolve(baseUrl, url);
}
}
Interesting question. Since it is part of compiler it makes sense that it would not be instantiated along with other application components, and after some research and analyzing angular's code I found the solution. You need to provide it directly in the call to platformBrowserDynamic(). In this case it will be merged into default compiler options and will be used by injector that instantiates compiler.
import { COMPILER_OPTIONS } from '#angular/core';
class MvcUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string {
let result = super.resolve(baseUrl, url);
console.log('resolving urls: baseUrl = ' + baseUrl + '; url = ' + url + '; result = ' + result);
return result;
}
}
platformBrowserDynamic([{
provide: COMPILER_OPTIONS,
useValue: {providers: [{provide: UrlResolver, useClass: MvcUrlResolver}]},
multi: true
}]).bootstrapModule(AppModule);
In ASP.NET MVC, when we call a post action with some data, we check ModelState and in case some validation error, it would be falst. For a big Enter User Information form, it is annoying to expand each Value and look at the count to see which Key (9 in attached example image) has validation error. Wondering if someone knows an easy way to figure out which element is causing validation error.
In VS2015+, you can use LINQ in the Immediate Window, which means you can just run the following:
ModelState.SelectMany(
x => x.Value.Errors,
(state, error) => $"{state.Key}: {error.ErrorMessage}"
)
I propose to write a method:
namespace System.Web
{
using Mvc;
public static class ModelStateExtensions
{
public static Tuple<string, string> GetFirstError(this ModelStateDictionary modelState)
{
if (modelState.IsValid)
{
return null;
}
foreach (var key in modelState.Keys)
{
if (modelState[key].Errors.Count != 0)
{
return new Tuple<string, string>(key, modelState[key].Errors[0].ErrorMessage);
}
}
return null;
}
}
}
Then during debugging open Immediate Window and enter:
ModelState.GetFirstError()
Sounds like you're looking for debugger enhancements. I recently came across this product in the visual studio gallery.
http://visualstudiogallery.msdn.microsoft.com/16acdc63-c4f1-43a7-866a-67ff7022a0ac
I have no affiliation with them, and haven't used it. It's also a trial version and have no idea how much it costs for the full thing.
If you're more focused on the debugger side of things, have a go with the trial copy of OzCode. It enhances the Visual Studio IDE by replacing the usual debugging tooltip with it's own, more powerful, debugging tooltip. It's hard to epxlain with words, check out their website, they have a gallery of features on there.
I've been playing around with the beta for a few weeks, and it's proved a very valuable tool. You can query against data in the debugger using OzCode. For example, you could query items in the ModelState by filtering against the Values collection.
I have recently started using coffeescript with Rails and I am finding that sometimes the generated javascript does not get the function safety wrapper.
Here is a sample project demonstrating it.
For example, this CS code, in index.js.coffee:
class Foo
afunc: ->
alert("afunc")
Correctly becomes:
(function() {
var Foo;
Foo = (function() {
function Foo() {}
Foo.prototype.afunc = function() {
return alert("afunc");
};
return Foo;
})();
}).call(this);
But this code, from other.js.coffee:
class App.Func
ouch: ->
alert("ouch")
becomes this un-wrapped version
App.Func = (function() {
function Func() {}
Func.prototype.ouch = function() {
return alert("ouch");
};
return Func;
})();
It seems to be due to the "App." prefix - which I can see affects naming/scope - but why is coffeescript compiling it differently...
App is defined in setup.js.coffee, like this:
window.App =
Models: {}
Which also does not get wrapped, unless I add a class into that file too.
I am sure it must be my misunderstanding - so thanks in advance for the pointers to the manual :).
EDIT:
I created this question as I thought it might be behind some issues I was having with my backbone/coffeescript app, but it seems that it was not. As the class is linked to a public/global thing "App", it seems to work wrapped or not. Still would be useful to know why its happening - is it by design?
The "function safety wrapper" feature you are using works to prevent local variables from being set on the global namespace. Since setting an object property (App.Func) doesn't affect the global namespace, the declaration is not wrapped in a function.
I have the following route registered;
routes.MapRoute(
"LocationsByArea",
"Locations/{system}/{storage}/{area}",
new { controller = "StorageLocation", action = "Index" },
null
);
...and the following code in my view;
<%= Html.ActionLink("Platser", "Index", "StorageLocation", new { system = Model.System, storage = Model.Storage, area = item.Name }, null)%>
My problem is when the "area = item.Name" contains a colon, e.g. "Area 4:1". If I click the rendered link I get HTTP-error 400, Bad reqest. I guess I have to encode my area parameter in some way, but I cant figure out how. Any help is apreciated.
Thanks!
The built-in encoding/decoding does not work, so I suggest you roll your own, like this:
namespace MyProject.Helpers
{
public static class JobNameHelper
{
public static string JobNameEncode(string jobname)
{
return jobname.Replace(":", "---colon---");
}
public static string JobNameDecode(string jobname)
{
return jobname.Replace("---colon---", ":");
}
}
}
Can you not just use
Server.UrlEnconde(item.Name)
Or am I missing something?
In your routing you may have to use Server.UrlDecde as well although I think It should decode for you on request.
Try using the Routing Debugger to see what the url router is getting passed, then you can see where the decoding needs to happen
ASP.NET 3.5 SP1 and earlier have a number of restrictions on which URLs are valid. In ASP.NET 4 most of these issues have been fixes (or are at least customizable via web.config). I think that the colon character, even when encoded, might not be allowed in ASP.NET 3.5 SP1 and earlier due to security concerns. Allowing colons can be a security problem when performing file checks since they are a little-known syntax for NTFS Alternate Data Streams.
I recommend trying to choose a character other than a colon for these purposes. Maybe a comma, semi-colon, or equal sign might work instead?