Babel translator support for React JS?

[kendallb]

Do you have any plans to build a transformer to work with ReactJS.net? If not, do you have any suggestions on how to wire up the existing BabelTransform() that is part of the package so it can work with BundleTransformer? At the moment I am keeping the .jsx files in their own bundle, but I would prefer to run it all through bundle transformer.

[Taritsyn]

Hello, Kendall!

I can not say anything yet. I will research this problem after the JavaScript Engine Switcher 3.0, Bundle Transformer 1.10 and React.NET 4.0 releases.

[kendallb]

Hi Andrey, thanks for the update. I see these are all connected :). Any potential ETA on when 1.10 and JS switcher 3.0 will be completed?

I might grab the source code for 1.10 beta myself and take a stab at building it, and send you a PR if I get it working.

[Taritsyn]

I might grab the source code for 1.10 beta myself and take a stab at building it, and send you a PR if I get it working.

I'll make this module myself. While planning release of the JavaScript Engine Switcher for the first half of next week. Other projects after. I would like to have time to make releases before New year.

[Taritsyn]

In this module, you only need to translate JSX code to JS?

[kendallb]

Yes correct. It translates the .jsx file to .js using the BabelHandler as part of React.net, and I would assume once the translation is done it would be able to minify it using whatever BundleTransformer is using for JS script minification.

It works right now using the default transformer and minification that is provided by the Microsoft.Web optimization library, but I think by default it always uses WebGrease and I would like to be able to control it using your library.

[Taritsyn]

Hello, Kendall!

In principle, you can integrate the React.Web.Mvc4 and System.Web.Optimization.React libraries with the Bundle Transformer right now.

First, register the .jsx extension in the Web.config file.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    …
    <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
        <core>
            …
            <js>
                …
                <fileExtensions>
                    …
                    <add fileExtension=".jsx" assetTypeCode="JSX" />
                    …
                </fileExtensions>
                …
            </js>
            …
        </core>
    </bundleTransformer>
    …
</configuration>

Then add to the BundleConfig.cs file a bundle like this:

using System.Web;
using System.Web.Optimization;
using System.Web.Optimization.React;

using BundleTransformer.Core.Builders;
using BundleTransformer.Core.Orderers;
…
using BundleTransformer.Core.Transformers;

…
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            …
            var jsxBundle = new Bundle("~/bundles/jsx");
            jsxBundle.Include(
                "~/Scripts/jsx/CommentsBox.jsx",
                "~/Scripts/jsx/HelloWorld.jsx");
            jsxBundle.Builder = new NullBuilder();
            jsxBundle.Transforms.Add(new BabelTransform());
            jsxBundle.Transforms.Add(new ScriptTransformer());
            jsxBundle.Orderer = new NullOrderer();
            bundles.Add(jsxBundle);
            …
        }
    }
…

[kendallb]

Ok thanks, I will give that a try! I tried doing it myself and it did not work, but the bit I missed was setting up the file extension, so I will try that again.

[kendallb]

That worked great, thanks!

[kendallb]

Hmm, never mind it does not translate when bundling is actually enabled :( I just see the JSX file contents untranslated.

[kendallb]

Hmm, I had to put the BabelTransform after ScriptTransform, which fixed the problem but that seems wrong? What happens if I mix normal JS and JSX in the same bundle?

[Taritsyn]

Hello, Kendall!

It seems that I was wrong here, because I had forgotten how to work the Bundle Transformer's pipeline. We'll have to wait for a fully-fledged module.

[kendallb]

No worries, I will wait until then.