vtfuture / requirejsdotnet Goto Github PK

It would be helpful to have some mechanism to auto-version the JavaScript assets. http://stackoverflow.com/questions/8315088/prevent-requirejs-from-caching-required-scripts/12384043#12384043 seems like one possibility (appending version number to the files).

-J

Add outputPath attribute.
If it isn't defined, the bundle will be generated in the entryPoint root, with the module name + ".js" as the filename

<bundle name="main">

Would output main.js in the entryPoint directory.

If it is defined, take the directory and create it if it doesn't exist. If it also has a filename, use that. If not, use the module name + ".js"

<bundle name="main" outputPath="Bundles\Main\">

<bundle name="main" outputPath="Bundles\Main\main.js"

The above should create the "Bundles\Main" path inside the entryPoint (if it doesn't exist already), and create the bundle in the "main.js" file.

This error occures when trying to compile while makinge use of the compressor task.

Isn't this a valid module definition?
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js

Cheers
Philip

I ran into a situation where I have a config with an underscorejs dependency which did not have any dependency of its own but needed to be shim'd.

...
"shim": {
        "underscore.string": {
            "deps": [
                "underscore"
            ]
        },
        "underscore": {
            "exports": "_",
            "deps": [ ] //config won't load correctly if I don't specify an empty array for dependencies here
        }
}
...
...

The problem is with this line. It assumes that every shim entry will always have "deps" defined. But that is not true. "deps" is optional in the requireJS shim-config object.

https://github.com/vtfuture/RequireJSDotNet/blob/master/RequireJsNet/RequireJsHtmlHelpers.cs#L85

Hi,
The requirejs compressor seems to ignore dependencies for the magic modules "require" and "module" but tries to resolve "exports", which is needed if you are for example using TypeScripts external module concept.
https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#magic

Context

I am trying to setup RequireJsDoNet in an hybrid ASP.NET MVC / AngularJs application based on the structure described in this video.

I have a project with the following structure:

• App (Contains all first party, requirejs dependencies)
  • controllers
    • root
      • home
        • FooBar.js (Handles angular bootstraping)
  • root
    • foobar
      • app.js (The actual angular application code)
• Scripts (Contains all large third party libraries)
  • angular.js
  • jquery.js
  • moment.js
• Controllers
  • HomeController.cs
    • [GET] FooBar
• Views
  • Home
    • FooBar.cshtml

I am trying to use the App folder as my requirejs root directory. I expect everything in the Scripts folder to be ignored. I hit two issues when doing this.

Different behavior when using EntryPointRoot

The first thing I did was to change my RequireRenderConfiguration instance to this:

new RequireRendererConfiguration
{
    RequireJsUrl = Url.Content("~/Scripts/require.js"),
    BaseUrl = Url.Content("~/App/"),
    ConfigurationFiles = new[] { "~/requirejs.json" },
    EntryPointRoot = "",
    LoadOverrides = false,
    LocaleSelector = html => System.Threading.Thread.CurrentThread.CurrentUICulture.Name.Split('-')[0]
}

Trying to set the EntryPointRoot to match the BaseUrl like you do in your samples prevents requirejs from loading the controller file. It generates the following code.

<script>
require(["/App/controllers/root/home/FooBar"]);
</script>

<!-- RequireJS generates this script tag -->
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="/App/controllers/root/home/FooBar" src="/App/controllers/root/home/FooBar"></script>

GET http://localhost:57109/App/controllers/root/home/FooBar
404 Not Found

As you can see, the "/App/" prefix shouldn't be there; it isn't when using the "~/Scripts/" EntryPointRoot and BaseUrl. Building a similar require call in the debug console without this prefix loads the file as expected.

AutoBundles compilation task

The second issue I have comes when dealing with the compilation task. When setting the EntryPointOverride parameter to $(MSBuildProjectDirectory)\App, The controllers modules are bundled with their name prefixed with "../app".

Using this requirejs.json auto-bundle:

"property": {
  "outputPath": "App/Bundles/",
  "include": [
    { "directory": "controllers/root/foobar" },
    { "directory": "root/foobar" }
  ]
}

The following override is generated:

"property": {
  "paths": {
    "../app/controllers/root/home/FooBar": "../app/bundles/foobar",
    "../app/root/foobar/app": "../app/bundles/foobar",
  },
  "bundledScripts": [
    "../app/controllers/root/home/FooBar",
    "../app/root/foobar/_app",
  ]
}

I also noticed that all bundle name folders like viewModels gets converted to lowercase which prevents dependency injection from working as it is case sensitives.

Close

I have taken a look at the compiler code and I am not really sure of how the entry point override feature works as the original entry point is still used in many places around the code. Am I misunderstanding how this feature is supposed to work or is this really a major issue?

Are you planning to support MVC 6?

I love this utility, and finally now have my JavaScript layed out in a way which I'm happy about.

I have a question; as an example I'm using jQuery-FileUpload plugins and it has a number of files

<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/vendor/jquery.ui.widget.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/tmpl.min.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/load-image.min.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/canvas-to-blob.min.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.blueimp-gallery.min.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-process.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-image.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-audio.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-video.js'></script>
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-validate.js'></script> 
<script type='text/javascript' src='assets/plugins/jquery-fileupload/js/jquery.fileupload-ui.js'></script> 

How should I got a about registering all of these in the RequireJS.config file, should be create a line per file or is there a way I can bundle them all together into a single entry somehow ?

Thanks

Need to check for feasibility.
Javascript usage defined here: http://requirejs.org/docs/api.html#config-shim

RequireConfigReader should only handle reading the xml file into a RequireConfiguration class. It should handle merging of configs from children directories. It shouldn't handle processing of dependencies.

• the configuration itself
• the user-defined options
• the locale for both of the above

Hello.
Can you change class modifier from internal to public for PathHelpers class?
I need to implement new IEntryPointResolver (#31) interface. And I should duplicate path logic which already in this internal helper class.

It currently only outputs properties needed for the bundle overrides

See #4, #2

Everything inside it is now obsolete.

Hello again,
I'm currently exploring your solution and try to integrate it with TypeScripts external module concept.

I have noticed, that you try to maintain the MVC conventions by using capitalized folder and file names and then tranform it to uncapitalized paths to match the require convention.

So the issue I am currently experiencing with this is a bit complicated, by I try to explain it to you.
TypeScript is checking dependencies for modules by the actual file paths, so requiring a module like this works

import index = require(“Controllers/Root/Home/Index”);

but writing it as the follows results in a compiler-error

import index = require(“controllers/root/home/Index”);

because TypeScripts dependency-check is case sensitive, just like it is in require.js.
Now when bundling the files via autoBundles and using overrides I would generate for example a bundle with the following files:

• Controllers/Root/Home/Index
• Controllers/Root/Home/Extended

And the corresponding generated path overrides would look like this:

{
 "controllers/root/home/Index": "bundles/baseBundle",
 "controllers/root/home/Extended": "bundles/baseBundle"
}

Now my baseBundle file looks looks like follows with code compiled by TypeScript

   define(“controllers/root/home/Index”, [“module”,”exports”], function(){..});
   define(“controllers/root/home/Extended”,
              [“module”,”exports”, “ Controllers/Root/Home/Index”], function(){..});

And there things go down. The module “controllers/root/home/Index” is properly defined, but require.js sees the dependency “ Controllers/Root/Home/Index” as a different file and loads it again,
ending in having loaded the file-contents twice.

In my opinion this is a rather inconsistent behavior,
because I would expect the compressor either to de-capitalize all of the dependencies or none of them.

Maybe there should be the possibility to disable de-capitalization of file paths as an option, for I do not see the need of it,
except matching the conventions?

And by the way I am very impressed by this projects.
I see it as a great solution to bring AMD concepts into multipage apps.

Cheers!

It would look like this:

<bundle name="jquery">
  <bundleItem path="jquery" />
  <bundleItem path="jquery-ui" />
</bundle>

<bundle name="root" includes="jquery">
  <bundleItem path="root/controllers/home/'index" />
</bundle>

Multiple inclusions should be allowed, like so:

<bundle name="name" includes="jquery, bootstrap">

When including a bundle, all of the bundles it includes should be included as well.

Needs to be tested on the original bootstrap js file

After getting the latest release the Resolve method no longer finds my controller js files. It looks like the ".js" portion is missing from the reference.

I downloaded the source and modified the lines that looked like this:

return withBaseUrl ? computedEntry : rootUrl + computedEntry;

...to look like this:

return withBaseUrl ? computedEntry : rootUrl + computedEntry + ".js";

...and that seemed to fix it. Though I'm sure that was wrong and probably broke something else.

Thanks,
Jason

The output format in the existing one is already require-specific, no reason not to add it here

Setting store needs to be refactored so that it isn't tied to the current request.
Handler needs to be created for script rendering
Should help with google indexing various URLs passed through the config objects.

Look for feature we haven't implemented or that we can improve.

The ability to add/remove certain files/folders/bundles from a bundle.

When I build the project the compressor (msbuild specifically) keeps a lock on the DLLs used. If I try to build the project again I get an error because of the lock. I have to close Visual Studio and re-open.

Thanks,
Jason

Hi

I just realised that the non-auto bundler produces files with multiple define() definitions which contain no module id like define('module1'...; define('module2'...;

Cheers

In the DefaultEntryPointResolver implementation, the Resolve method has a nice algorithm to find an entry point.

What I'd like to do is inherit from DefaultEntryPointResolver and based on the condition viewContext.HttpContext.IsDebuggingEnabled, I'd like to change the result to be a minified entry point (add .min in the name of the javascript file if it exists).

Rigth now, the method is not virtual and I don't want to copy the logic as it may change in future versions. By making it virtual, all I have to do is call the base method and add my logic in the overridden method.

If you feel like it could be useful to other people, it could be another implementation that is provided by RequireJS.Net.

Hi

At the moment I miss the bundles-config section in the requirejs-config rendered to the markup. (As described here http://requirejs.org/docs/api.html#config-bundles) Is this still a missing feature, introduced in one of the upcoming versions? When using the bundling system it would be very usefull to tell requirejs in which bundle to find a module this way.

Or do it the way the autoBundling do by overwriting the RequireJS.json.

Cheers

PS: I think there is a lot of potential using this library in an MVC project. I would love to use this library in my projects when the (non auto)bundling feature is complete.

Hi
Are there are some more informations about how to use these ways of bundling? https://github.com/vtfuture/RequireJSDotNet/wiki/Compressor:-concepts Or are they still work in progress? I would like to bundle up some libraries like knockout including all the bindingHandlers (which are each in seperate files), or jQuery and its plugins. Currently I am not making use of the auto bundling because I want to have more controll about what is bundled an what is not.

Nice extension btw!

Cheers
Philip

• Naming consistency: Config vs Configuration
• Needless object depth: ConfigurationCollection.Paths.PathList etc
• Check if ConfigurationCollection constructor should instantiate all the lists it contains
  ConfigMerger: change IEnumerable to params[], make ConfigLoaderOptions optional
• Perhaps don't pass ConfigLoaderOptions to ConfigMerger, instead expose methods for calculating overrides/bundles etc - Maybe add ComputeX methods for each of its properties, then a ComputeAll method that takes flags in order to exclude what you'd usually want to exclude
• What's the point of the RequireDependency class?

Hi,

Thanks for RequireJSDotNet! It's awesome. When I'm using the auto compressor and building I get the following error:

"Error 59 Unable to cast object of type 'Jint.Parser.Ast.BinaryExpression' to type 'Jint.Parser.Ast.Literal'"

I don't have any complicated defines or requires, they are all just string literals. My project consists of 50+ js files and is fairly complicated so hard to track down which file it is having trouble with.

Any idea what might be causing this issue?

We need to cache the various configuration files / data extracted from them so that they aren't processed again if they haven't been modified.

• Get rid of the autoBundler, there should just be one bundler
• Wrap shimmed entries
• Transform require() modules into define() (with proper names)
• Generate config overrides
• Use the bundle feature of require.js instead of overriding maps (if deemed possible)
• Allow, at an inclusion level or at a bundle level, for automatic dependency discovery (this is actually the one feature the autoBundlers should have had extra to begin with)

Seeing in some websites like http://beletsky.net/2013/11/using-angular-dot-js-with-require-dot-js.html to use RequireJS with AngularJS we should bootstrap him like angular.bootstrap(document, []); by other way, angular DI inject error will rise at line var app = angular.module('myapp', []).

But with RequireJS Dot Net it's seem impossible.

How could I setup the AngularJS to work fine?

The following two examples should produce the same output:

<paths>
  <path key="jquery" value="jquery-1.10.2" bundle="main" />
  <path key="bootstrap" value="bootstrap-3" bundle="main" />
</paths>

  <paths>
    <path key="jquery" value="jquery-1.10.2" />
    <path key="bootstrap" value="bootstrap-3" />
  </paths>
  <bundles>
    <bundle name="main" virtual="true">
       <bundleItem path="jquery" />
       <bundleItem path="bootstrap" />
    </bundle>
  </bundles>

If the default bundle is explicitly defined, it should not be overriden, but instead the scripts should be added in its list.

Hi
It would be cool if there was a way to store the scripts within an MVC Area so they are more in context. For example:

Cheers
Philip

It would be awesome if the libraries supported .NET 4.0.

I'm unfortunately stuck in a situation where I need to support Windows Server 2003 for deployment which rules out using .NET 4.5.

I've currently got my own copy of the code compiling for .NET 4.0; but I want to try a different technique of converting than I used before sending a PR for it.

The build task should have the ability to define "virtual" bundles defined as such:

<bundle name="jquery" virtual="true">
  <bundleItem path="jquery" />
  <bundleItem path="jquery-ui" />
</bundle>

These bundles should not be written to disk but instead included by other bundles to avoid repetition for common scripts.

It should show all the features.
It should also demo all the compressor features (for both of them).

If a path key exists multiple times in a file, an exception should be thrown.
If a path key is found in another config file, it should override the previously found one.

This way, all bundles will default to the 's compression type if none is specified at a bundle level.