Finish wiring up very basic Node JS interop

Author: dustinsoftware

src/React.Core/INodeJsEngine.cs

@@ -17,6 +17,8 @@ public interface INodeJsEngine
 		void Execute(string code);
 		T Evaluate<T>(string code);
 
+		void ExecuteFile(IFileSystem fileSystem, string path);
+
 		T CallFunctionReturningJson<T>(string function, object[] args);
 
 		void ExecuteResource(string resourceName, Assembly assembly);

src/React.Core/IReactSiteConfiguration.cs

@@ -220,7 +220,7 @@ public interface IReactSiteConfiguration
 		/// <summary>
 		/// 
 		/// </summary>
-		Func<INodeJsEngine> NodeJsEngine { get; set; }
+		Func<INodeJsEngine> CreateNodeJsInstance { get; set; }
 
 		/// <summary>
 		/// 

src/React.Core/ReactSiteConfiguration.cs

@@ -363,7 +363,7 @@ public IReactSiteConfiguration SetScriptNonceProvider(Func<string> provider)
 		/// <summary>
 		/// The Node engine instance
 		/// </summary>
-		public Func<INodeJsEngine> NodeJsEngine { get; set; }
+		public Func<INodeJsEngine> CreateNodeJsInstance { get; set; }
 
 		/// <summary>
 		/// Sets the Node engine instance
@@ -372,7 +372,7 @@ public IReactSiteConfiguration SetScriptNonceProvider(Func<string> provider)
 		/// <returns></returns>
 		public IReactSiteConfiguration SetNodeJsEngine(Func<INodeJsEngine> nodeJsEngine)
 		{
-			NodeJsEngine = nodeJsEngine;
+			CreateNodeJsInstance = nodeJsEngine;
 			return this;
 		}
 	}

src/React.Core/ReactWithNodeEnvironment.cs

@@ -9,6 +9,7 @@
 using System.Collections.Generic;
 using System.Diagnostics;
 using System.IO;
+using System.Linq;
 using System.Reflection;
 using System.Text;
 using System.Threading;
@@ -130,7 +131,41 @@ IReactIdGenerator reactIdGenerator
 			_babelTransformer = new Lazy<IBabel>(() =>
 				new Babel(this, _cache, _fileSystem, _fileCacheHash, _config)
 			);
-			_lazyEngine = new Lazy<INodeJsEngine>(() => _config.NodeJsEngine());
+			_lazyEngine = new Lazy<INodeJsEngine>(() => 
+			{
+				var allFiles = _config.Scripts
+					.Concat(_config.ScriptsWithoutTransform)
+					.Select(_fileSystem.MapPath);
+
+				var nodeInstance = _config.CreateNodeJsInstance();
+
+				LoadUserScripts(nodeInstance);
+
+				return nodeInstance;
+			});
+		}
+
+
+		/// <summary>
+		/// Loads any user-provided scripts. Only scripts that don't need JSX transformation can
+		/// run immediately here. JSX files are loaded in ReactEnvironment.
+		/// </summary>
+		/// <param name="engine">Engine to load scripts into</param>
+		private void LoadUserScripts(INodeJsEngine engine)
+		{
+			foreach (var file in _config.ScriptsWithoutTransform)
+			{
+				try
+				{
+					engine.ExecuteFile(_fileSystem, file);
+				}
+				catch (NodeJsException ex)
+				{
+				}
+				catch (IOException ex)
+				{
+				}
+			}
 		}
 
 		/// <summary>
@@ -168,7 +203,7 @@ public virtual string Version
 		/// </summary>
 		protected virtual void EnsureUserScriptsLoaded()
 		{
-			// Scripts already loaded into this environment, don't load them again
+			// Scripts already loaded into this environment, don't load them agai	n
 			if (Engine.HasVariable(USER_SCRIPTS_LOADED_KEY) || _config == null)
 			{
 				return;
@@ -303,13 +338,6 @@ public virtual string GetInitJavaScript(bool clientOnly = false)
 		/// <returns>JavaScript for all components</returns>
 		public virtual void GetInitJavaScript(TextWriter writer, bool clientOnly = false)
 		{
-			// Propagate any server-side console.log calls to corresponding client-side calls.
-			if (!clientOnly && _components.Count != 0)
-			{
-				var consoleCalls = Execute<string>("console.getCalls()");
-				writer.Write(consoleCalls);
-			}
-
 			foreach (var component in _components)
 			{
 				if (!component.ServerOnly)

src/React.NodeServices/NodeJsEngine.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Reflection;
 using Jering.Javascript.NodeJS;
+using Newtonsoft.Json;
 using React;
 
 namespace React.NodeServices
@@ -11,13 +12,14 @@ public class NodeJsEngine : INodeJsEngine, IDisposable
 		private Dictionary<string, bool> _dict = new Dictionary<string, bool>();
 		private object _lock = new object();
 		private readonly INodeJSService _nodeJSService;
+		private static readonly JsonSerializerSettings _settings = new JsonSerializerSettings { StringEscapeHandling = StringEscapeHandling.EscapeNonAscii };
 
 		private NodeJsEngine(INodeJSService nodeJSService)
 		{
 			_nodeJSService = nodeJSService;
 		}
 
-		private string WrapAsModule(string code) => $"function wrappedCode() {{ {{{code}}} }} module.exports = function(callback, message) {{ callback(null, wrappedCode()); }}";
+		private string WrapAsModule(string code) => $"let wrappedCode = () => eval({JsonConvert.SerializeObject(code, _settings)}); module.exports = function(callback, message) {{ callback(null, wrappedCode()); }}";
 
 		public static INodeJsEngine CreateEngine(INodeJSService nodeJSService) => new NodeJsEngine(nodeJSService);
 		public string Name => throw new NotImplementedException();
@@ -49,6 +51,12 @@ public void Execute(string code)
 			_nodeJSService.InvokeFromStringAsync(WrapAsModule(code)).ConfigureAwait(false).GetAwaiter().GetResult();
 		}
 
+		public void ExecuteFile(IFileSystem fileSystem, string path)
+		{
+			var contents = fileSystem.ReadAsString(path);
+			Execute(contents);
+		}
+
 		public void ExecuteResource(string resourceName, Assembly assembly)
 		{
 			throw new NotImplementedException();

src/React.Sample.Webpack.CoreMvc/Startup.cs

@@ -31,6 +31,7 @@ public void ConfigureServices(IServiceCollection services)
 			services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
 
 			services.AddNodeJS();
+			services.Configure<NodeJSProcessOptions>(options => options.NodeAndV8Options = "--inspect");
 
 			// Build the intermediate service provider then return it
 			services.BuildServiceProvider();

src/React.Sample.Webpack.CoreMvc/Views/Home/Index.cshtml

@@ -5,18 +5,8 @@
 
 @{
 	Layout = "_Layout";
-	var emotionFunctions = new EmotionFunctions();
-	var styledComponentsFunctions = new StyledComponentsFunctions();
-	var reactJssFunctions = new ReactJssFunctions();
-	var helmetFunctions = new ReactHelmetFunctions();
-
-	var chainedFunctions = new ChainedRenderFunctions(emotionFunctions, styledComponentsFunctions, reactJssFunctions, helmetFunctions);
-}
-@Html.ReactRouter("RootComponent", new { initialComments = Model.Comments, page = Model.Page }, renderFunctions: chainedFunctions)
-@{
-	ViewBag.ServerStyles = styledComponentsFunctions.RenderedStyles + reactJssFunctions.RenderedStyles;
-	ViewBag.HelmetTitle = helmetFunctions.RenderedHelmet?.GetValueOrDefault("title");
 }
+@Html.React("RootComponent", new { initialComments = Model.Comments, page = Model.Page, context = new { } })
 <script src="/dist/runtime.js"></script>
 <script src="/dist/vendor.js"></script>
 <script src="/dist/components.js"></script>

src/React.Sample.Webpack.CoreMvc/webpack.config.js

@@ -6,7 +6,7 @@ module.exports = {
 	},
 	output: {
 		filename: '[name].js',
-		globalObject: 'this',
+		globalObject: 'global',
 		path: path.resolve(__dirname, 'wwwroot/dist'),
 		publicPath: 'dist/'
 	},