Exemplo n.º 1
0
        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();
        }
Exemplo n.º 2
0
        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());
        }
Exemplo n.º 3
0
        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());
            }
        }