Skip to content

Commit 3281a16

Browse files
Remove auto-registered JS engines from React.Core (#582)
* Remove auto-registered JS engines from React.Core * Update docs * Update samples * Fix cassette build * Fix building Cassette sample in release mode * Remove unused code * Add missing reference * Fix Cassette sample build * Fix code block syntax * Fix language hint * Update error handling and add some tests
1 parent 5bb7d50 commit 3281a16

36 files changed

+322
-364
lines changed

Diff for: site/jekyll/getting-started/aspnet.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
id: aspnet
3+
layout: docs
4+
title: Getting Started on ASP.NET
5+
---
6+
7+
This guide covers enabling server-side rendering and Babel compilation. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET](/getting-started/tutorial_aspnet4.html).
8+
9+
ReactJS.NET requires Visual Studio 2015 and MVC 4 or 5.
10+
11+
Install the `React.Web.Mvc4` package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the [JSEngineSwitcher docs](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines) for more information.
12+
13+
To use V8, add the following packages:
14+
15+
```
16+
JavaScriptEngineSwitcher.V8
17+
JavaScriptEngineSwitcher.V8.Native.win-x64
18+
```
19+
20+
`ReactConfig.cs` will be automatically generated for you. Update it to register a JS engine and your JSX files:
21+
22+
```csharp
23+
using JavaScriptEngineSwitcher.Core;
24+
using JavaScriptEngineSwitcher.V8;
25+
26+
[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(React.Sample.Mvc4.ReactConfig), "Configure")]
27+
28+
namespace React.Sample.Mvc4
29+
{
30+
public static class ReactConfig
31+
{
32+
public static void Configure()
33+
{
34+
ReactSiteConfiguration.Configuration
35+
.AddScript("~/Content/Sample.jsx");
36+
37+
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
38+
JsEngineSwitcher.Current.EngineFactories.AddV8();
39+
}
40+
}
41+
}
42+
```
43+
44+
Reference JSX files directly in script tags:
45+
46+
```html
47+
<script src="~/Content/Sample.jsx"></script>
48+
```
49+
50+
You're done! You can now call `Html.React` from within Razor files:
51+
52+
```
53+
@Html.React("Sample", new { initialComments = Model.Comments, page = Model.Page })
54+
```
55+
56+
You can also use [webpack](/guides/webpack.html) or [System.Web.Optimization](/guides/weboptimizer.html) to bundle your scripts together.
57+
58+
Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4) for a working demo.

Diff for: site/jekyll/getting-started/aspnetcore.md

+23-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@ layout: docs
44
title: Getting Started on ASP.NET Core
55
---
66

7-
Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET Core](/getting-started/tutorial.html).
7+
This guide covers enabling server-side rendering and Babel compilation. Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET Core](/getting-started/tutorial.html).
88

99
ReactJS.NET requires Visual Studio 2015 and ASP.NET Core RTM (final release). It is recommended to use .NET Framework, but ReactJS.NET also works with .NET Core.
1010

11-
Install the `React.AspNet` package through NuGet. After the package is installed, ReactJS.NET needs to be initialised in your `Startup.cs` file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator). At the top of the file, add:
11+
Install the `React.AspNet` package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the [JSEngineSwitcher docs](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines) for more information. After these packages are installed, ReactJS.NET needs to be initialised in your `Startup.cs` file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator).
12+
13+
At the top of Startup.cs, add:
1214

1315
```
1416
using Microsoft.AspNetCore.Http;
17+
using JavaScriptEngineSwitcher.Core;
18+
using JavaScriptEngineSwitcher.ChakraCore;
1519
using React.AspNet;
1620
```
1721

@@ -27,6 +31,10 @@ Add:
2731
```csharp
2832
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
2933
services.AddReact();
34+
35+
// Make sure a JS engine is registered, or you will get an error!
36+
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
37+
.AddChakraCore();
3038
```
3139

3240

@@ -66,6 +74,18 @@ Finally, add this to `Views\_ViewImports.cshtml` (or create it if it doesn't exi
6674
@using React.AspNet
6775
```
6876

69-
Once ReactJS.NET has been configured, you will be able to use [on-the-fly JSX to JavaScript compilation](/getting-started/usage.html) and [server-side rendering](/guides/server-side-rendering.html).
77+
Reference JSX files directly in script tags:
78+
79+
```html
80+
<script src="~/Content/Sample.jsx"></script>
81+
```
82+
83+
You're done! You can now call `Html.React` from within Razor files:
84+
85+
```
86+
@Html.React("Sample", new { initialComments = Model.Comments, page = Model.Page })
87+
```
7088

7189
If you need support for non-Windows platforms, please see the [ChakraCore guide](/guides/chakracore.html).
90+
91+
Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.CoreMvc) for a working demo.

Diff for: site/jekyll/getting-started/tutorial.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -201,15 +201,15 @@ If you see this, congratulations! You've just built your first React component.
201201
The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
202202

203203
```javascript
204-
var CommentBox = React.createClass({displayName: 'CommentBox',
205-
render: function() {
204+
class CommentBox extends React.Component {
205+
render() {
206206
return (
207207
React.createElement('div', {className: "commentBox"},
208208
"Hello, world! I am a CommentBox."
209209
)
210210
);
211211
}
212-
});
212+
};
213213

214214
ReactDOM.render(
215215
React.createElement(CommentBox, null),

Diff for: site/jekyll/getting-started/tutorial_aspnet4.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -126,15 +126,15 @@ If you see this, congratulations! You've just built your first React component.
126126
The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
127127

128128
```javascript
129-
var CommentBox = React.createClass({displayName: 'CommentBox',
130-
render: function() {
129+
class CommentBox extends React.Component {
130+
render() {
131131
return (
132132
React.createElement('div', {className: "commentBox"},
133133
"Hello, world! I am a CommentBox."
134134
)
135135
);
136136
}
137-
});
137+
};
138138

139139
ReactDOM.render(
140140
React.createElement(CommentBox, null),

Diff for: site/jekyll/getting-started/usage.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ Once installed, create your React components as usual.
77

88
```javascript
99
// /Scripts/HelloWorld.jsx
10-
var HelloWorld = React.createClass({
11-
render: function () {
10+
class HelloWorld extends React.Component {
11+
render() {
1212
return (
1313
<div>Hello {this.props.name}</div>
1414
);
1515
}
16-
});
16+
}
1717
```
1818

1919
On-the-Fly JSX to JavaScript Compilation

Diff for: site/jekyll/guides/azure.md

-43
This file was deleted.

Diff for: site/jekyll/guides/es6.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ var OldAndBusted = React.createClass({
2828
});
2929
3030
// The new way
31-
var NewHotness = React.createClass({
31+
class NewHotness extends React.Component {
3232
render() {
3333
// ...
3434
},
3535
doStuff() {
3636
// ...
3737
}
38-
});
38+
};
3939
```
4040

4141
* **[Classes](http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes)** &mdash; Similar to the class systems included in JavaScript frameworks such as Prototype and MooTools, but will (eventually) be native to JavaScript

Diff for: site/jekyll/guides/mono.md

+2-25
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,8 @@ layout: docs
33
title: Linux (Mono)
44
---
55

6-
ReactJS.NET includes full support for Mono via Google's [V8 JavaScript engine](https://code.google.com/p/v8/), the same engine used by Google Chrome and Node.js. To use ReactJS.NET with Mono, you need to compile V8 and VroomJs (a .NET wrapper around V8). This can be accomplished by running the following shell commands on your Linux or Mac OS X machine:
6+
While Mono is supported, we strongly recommend using .NET Core instead.
77

8-
```sh
9-
# Get a supported version of V8
10-
cd /usr/local/src/
11-
git clone https://github.com/v8/v8.git v8-3.17
12-
cd v8-3.17
13-
git checkout tags/3.17.16.2
14-
15-
# Build V8
16-
make dependencies
17-
make native werror=no library=shared soname_version=3.17.16.2 -j4
18-
cp out/native/lib.target/libv8.so.3.17.16.2 /usr/local/lib/
19-
20-
# Get ReactJS.NET's version of libvroomjs
21-
cd /usr/local/src/
22-
git clone https://github.com/reactjs/react.net.git
23-
cd react.net
24-
git submodule update --init
25-
cd lib/VroomJs/libvroomjs/
26-
27-
# Build libvroomjs
28-
g++ jscontext.cpp jsengine.cpp managedref.cpp bridge.cpp jsscript.cpp -o libVroomJsNative.so -shared -L /usr/local/src/v8-3.17/out/native/lib.target/ -I /usr/local/src/v8-3.17/include/ -fPIC -Wl,--no-as-needed -l:/usr/local/lib/libv8.so.3.17.16.2
29-
cp libVroomJsNative.so /usr/local/lib/
30-
ldconfig
31-
```
8+
ReactJS.NET includes full support for Mono via Google's [V8 JavaScript engine](https://code.google.com/p/v8/), the same engine used by Google Chrome and Node.js. To use ReactJS.NET with Mono, follow the documentation on the [JavaScriptEngineSwitcher repo](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/JS-Engine-Switcher:-Vroom) to build Vroom, and then register the JS Engine as the default in `Startup.cs`. For example on how to do this, see the [ChakraCore guide](/guides/chakracore.html).
329

3310
If VroomJs fails to load, you will see an exception when your application is started. If this happens, run Mono with the `MONO_LOG_LEVEL=debug` environment variable to get more useful debugging information. Often, this occurs when Mono is unable to locate V8 (ie. it's not in /usr/lib/ or /usr/local/lib/)

Diff for: site/jekyll/guides/webpack.md

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ layout: docs
33
title: Webpack
44
---
55

6+
This guide is for Webpack 1. To see the latest example for how to use webpack, check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack).
7+
68
[Webpack](http://webpack.github.io/docs/what-is-webpack.html) is a popular module bundling system built on top of Node.js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files (spriting) through the use of plugins. Webpack can be used as an alternative to Cassette or ASP.NET Combination and Minification. This guide assumes you have already [installed Webpack](http://webpack.github.io/docs/installation.html).
79

810
In order to use Webpack with ReactJS.NET's server-side rendering, it is suggested that you create a separate bundle ("[entry point](http://webpack.github.io/docs/multiple-entry-points.html)") containing *only* the code required to perform server-side rendering. Any components you would like to render server-side must be exposed globally so that ReactJS.NET can access them. This can be done through the [Webpack expose loader](https://github.com/webpack/expose-loader):

Diff for: site/jekyll/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ id: home
4848

4949
```javascript
5050
// /Scripts/HelloWorld.jsx
51-
var HelloWorld = React.createClass({
51+
class HelloWorld extends React.Component {
5252
render: function() {
5353
return <div>Hello world!</div>;
5454
}
55-
});
55+
}
5656
```
5757
```html
5858
<!-- Reference it from HTML -->

Diff for: src/Cassette.React/BabelBundleProcessor.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
* Copyright (c) 2014-Present, Facebook, Inc.
33
* All rights reserved.
44
*

Diff for: src/Cassette.React/Cassette.React.csproj

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
<ItemGroup>
2929
<PackageReference Include="Cassette" Version="2.4.2" />
30+
<PackageReference Include="JavaScriptEngineSwitcher.Msie" Version="3.0.0-beta5" />
3031
</ItemGroup>
3132

3233
<ItemGroup Condition=" '$(TargetFramework)' == 'net40' ">

Diff for: src/Cassette.React/CassetteMSBuildStartup.cs

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
* Copyright (c) 2014-Present, Facebook, Inc.
33
* All rights reserved.
44
*
@@ -7,8 +7,8 @@
77
* of patent rights can be found in the PATENTS file in the same directory.
88
*/
99

10-
using System;
11-
using System.Diagnostics;
10+
using JavaScriptEngineSwitcher.Core;
11+
using JavaScriptEngineSwitcher.Msie;
1212
using React;
1313

1414
namespace Cassette.React
@@ -31,6 +31,9 @@ public void Start()
3131
return;
3232
}
3333

34+
JsEngineSwitcher.Current.DefaultEngineName = MsieJsEngine.EngineName;
35+
JsEngineSwitcher.Current.EngineFactories.AddMsie();
36+
3437
// All "per-request" registrations should be singletons in MSBuild, since there's no
3538
// such thing as a "request"
3639
Initializer.Initialize(requestLifetimeRegistration: registration => registration.AsSingleton());

Diff for: src/React.Core/Exceptions/ClearScriptV8InitialisationException.cs

-51
This file was deleted.

0 commit comments

Comments
 (0)