ReactConfig lack of wildcard subdirectory search for adding components

[tokyo0709]

Adding all of our components to be able to render them server side would eventually get out of hand. There should be a way to wildcard and search subdirectories.

Example of the problem

public static class ReactConfig
{
    public static void Configure()
    {
        ReactSiteConfiguration.Configuration
            .AddScript("~/ClientApp/Components/Comments/Comment.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentBox.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentForm.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentList.jsx");
            // Additional component folders with endless amounts of component jsx files
    }
}

However this seems to be done effectively with the BabelBundle package that implements IncludeDirectory in this example. If this format could be mimicked in ReactSiteConfiguration.Configuration it should solve the issue.

Proposed Solution

public static class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // Searches components folder for all jsx files and all subdirectories for jsx files
        bundles.Add(new BabelBundle("~/scripts/components")
            .IncludeDirectory("~/ClientApp/Components", "*.jsx", true));
    }
}

[dustinsoftware]

Great idea!

[Daniel15]

One of the issues with this is that some of the files may rely on other files being loaded in a particular order. In general it seems like a good idea, though!

[tokyo0709]

@Daniel15 This may be my lack of knowledge with regards to React or too simple an example but I went ahead and tested reordering my separated component scripts to this to try to mess up the dependencies,

public static class ReactConfig
{
    public static void Configure()
    {
        ReactSiteConfiguration.Configuration
            .AddScript("~/ClientApp/Components/Comments/Comment.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentForm.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentList.jsx")
            .AddScript("~/ClientApp/Components/Comments/CommentBox.jsx");
    }
}

(I'm following the reactjs.net tutorial and updated code libraries) Where CommentBox has a CommentForm and a CommentList and CommentList has several Comment components. This shouldn't work right since the order is reversed? I ran what I had and didn't notice any issues with the reordering.

[dustinsoftware]

Execution might be deferred here until all the scripts have loaded. You could test this theory by doing something like this inside of Comment.jsx

render() {
  let debugComponents = JSON.stringify([typeof CommentForm, typeof CommentList, typeof CommentBox]);

  return <span>{debugComponents}</span>;
}

Look at the server and client rendered output (you can disable script loading in your browser or use CURL to see just the server output). If you see undefined in the output at all, then the script ordering does matter.

[Yaevh]

It's actually possible to provide a wildcard, at least for a flat directory (subdirectories have to be added manually), just that it's bugged on Windows due to conflicting directory separator between ASP.NET and Windows OS. I've submitted a fix in #631