protected RazorReactManagerBase(ReactBundle reactServerSideBundle, ReactBundle reactClientSideBundle, IServerPathMapper mapServerPath, IJsEngineFactory jsEngineFactory, RazorReactOptions options = null) { if (options != null) { Options = options; } _jsEngineFactory = jsEngineFactory; _mapServerPath = mapServerPath; ReactServerSideBundle = reactServerSideBundle; ReactClientSideBundle = reactClientSideBundle; // TODO: JsPool //JsEngineSwitcher.Current.DefaultEngineName = ChakraCoreJsEngine.EngineName; // V8JsEngine.EngineName; //JsEngineSwitcher.Current.EngineFactories.AddChakraCore(); //.AddV8(); //JsEngineSwitcher.Current.CreateDefaultEngine(); }
public string GetClientSideRenderScripts(string componentName, object props, string bundleId = null, string containerId = null, RazorReactOptions options = null) { var usedOptions = options != null ? options : Options; if (!usedOptions.ClientSide) { return($"<!-- Client side rendering disabled for: {componentName} -->"); } var propsAsString = GetPropsAsStringOrNull(props); var id = GetContainerId(containerId, componentName); var scriptTag = new StringBuilder(); foreach (var bundleFile in ReactClientSideBundle.BundleFiles) { // Remove start ~ character (used in ASP.NET) var scriptSrc = Regex.Replace(bundleFile, "^~", ""); scriptTag.AppendLine($"<script src=\"{scriptSrc}\"></script>"); } scriptTag.AppendLine($"<script>ReactDOM.hydrate(React.createElement({componentName}, {propsAsString}), document.getElementById(\"{id}\"))</script>"); return(scriptTag.ToString()); }
public string GetServerSideRenderedHtml(string componentName, object props, string bundleId = null, string containerId = null, RazorReactOptions options = null) { var usedOptions = options != null ? options : Options; var comments = new StringBuilder(); // For live reload dev mode reset everything each render if (usedOptions.LiveReloadDevMode) { Initialize(); usedOptions.CacheRendering = false; comments.AppendLine("<!-- Live reload dev mode enabled, performance will be lower -->"); } var id = GetContainerId(containerId, componentName); var propsAsString = GetPropsAsStringOrNull(props); var cacheKey = $"{id}-{propsAsString}"; object html = null; if (usedOptions.CacheRendering) { html = cache[cacheKey]; } if (html == null) { var outputHtml = new StringBuilder(); outputHtml.Append($"<div id=\"{id}\">"); if (usedOptions.ServerSide) { var ssrHtml = ""; //var useEmotion = false; var createElementJs = $"React.createElement({componentName}, {propsAsString})"; //if (useEmotion) //{ // var emotionDataJson = _jsEngine.Evaluate($"emotionExtractCritical({createElementJs})"); // var emotionData = JsonConvert.DeserializeObject<EmotionSSRData>(emotionDataJson.ToString()); // var emotionStyleTag = $"<style data-emotion-css=\"{string.Join(" ", emotionData.Ids)}\">{emotionData.Css}</style>"; // ssrHtml = emotionStyleTag + emotionData.Html; //} //else //{ ssrHtml = _jsEngine.Evaluate($"ReactDOMServer.renderToString({createElementJs})").ToString(); //} outputHtml.Append(ssrHtml.ToString()); } outputHtml.Append("</div>"); var finalHtml = outputHtml.ToString(); // Set cached rendering if enabled (default enabled) if (usedOptions.CacheRendering) { cache.Set(cacheKey, finalHtml, new CacheItemPolicy()); } return(comments.ToString() + finalHtml); } else { comments.AppendLine($"<!-- Rendering cached: {componentName} -->"); // Cached version return(comments.ToString() + html.ToString()); } }