/// <summary>Renders the specified view context by using the specified writer and <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</summary> /// <param name="viewContext">The view context.</param> /// <param name="writer">The writer that is used to render the view to the response.</param> /// <param name="instance">The <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</param> protected override void RenderView(ViewContext viewContext, TextWriter writer, object instance) { if (writer == null) { throw new ArgumentNullException(nameof(writer)); } var placeholderKeys = this.GetPlaceholders(this.ViewPath); var componentName = Path.GetFileNameWithoutExtension(this.ViewPath)?.Replace("-", string.Empty); var props = this.GetProps(viewContext.ViewData.Model, placeholderKeys); IReactComponent reactComponent = this.Environment.CreateComponent($"Components.{componentName}", props); bool isEditingOverrideEnabled = ReactSettingsProvider.Current.DisableClientSideWhenEditing && Sitecore.Context.PageMode.IsExperienceEditorEditing; if (ReactSettingsProvider.Current.EnableClientside && !isEditingOverrideEnabled) { writer.WriteLine(reactComponent.RenderHtml()); var tagBuilder = new TagBuilder("script") { InnerHtml = reactComponent.RenderJavaScript() }; writer.Write(System.Environment.NewLine); writer.Write(tagBuilder.ToString()); } else { writer.WriteLine(reactComponent.RenderHtml(renderServerOnly: true)); } }
private string RenderJavascriptSingleBoostrap(IReactComponent reactComponent) { string exception1 = string.Empty; if (ReactSettingsProvider.Current.Exception1Enabled && new ID(ReactSettingsProvider.Current.Exception1RenderingId) == RenderingContext.Current.Rendering?.RenderingItem?.ID) { exception1 = ReactSettingsProvider.Current.Exception1MinifiedInlineJs; } string mainBody = "if(document.getElementById(\"" + reactComponent.ContainerId + "\")){" + ApplyFilters(reactComponent.RenderJavaScript()) + " }" + System.Environment.NewLine; return(exception1 + "reactJsxNamespace." + ApplyFunctionFilters(reactComponent.ContainerId) + " = function(){" + mainBody + "};"); }
/// <summary>Renders the specified view context by using the specified writer and <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</summary> /// <param name="viewContext">The view context.</param> /// <param name="writer">The writer that is used to render the view to the response.</param> /// <param name="instance">The <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</param> protected override void RenderView(ViewContext viewContext, TextWriter writer, object instance) { if (writer == null) { throw new ArgumentNullException(nameof(writer)); } var componentName = Path.GetFileNameWithoutExtension(this.ViewPath)?.Replace("-", string.Empty); var props = this.GetProps(viewContext.ViewData.Model); IReactComponent reactComponent = this.Environment.CreateComponent(componentName, props); writer.WriteLine(reactComponent.RenderHtml()); }
/// <summary> /// Adds a component to the bundle for a particular page. /// </summary> /// <param name="reactComponent">The React component to add.</param> private void ConstructFastBundle(IReactComponent reactComponent) { // Lookup the rendering script for this rendering var renderingJavascript = _bundleCache.GetOrAddToCache( reactComponent.ContainerId, () => { return(_bundleCache.GetOrAddToCache(reactComponent.ContainerId, () => RenderJavascript(reactComponent))); }); var bundle = GetBundle(reactComponent, renderingJavascript); string bundleObjKey = GetBundleKey(); if (!bundle.ComponentBundle.ContainsKey(reactComponent.ContainerId)) { bundle.ComponentBundle.Add(reactComponent.ContainerId, renderingJavascript); _bundleCache.Set(bundleObjKey, bundle); _bundleCache.Set(GetBundleKey(isBundleObject: false, isBundleHtml: true), RenderPageScriptsFresh(bundle)); } }
private PageBundle GetBundle(IReactComponent reactComponent, string renderingJs) { string bundleObjKey = GetBundleKey(); var currentBundle = _bundleCache.Get <PageBundle>(bundleObjKey); if (currentBundle == null) { // Lookup the bundle see if it already exists in cache. If not create it. currentBundle = _bundleCache.GetOrAddToCache <PageBundle>( bundleObjKey, () => { var newBundle = new PageBundle() { PageKey = bundleObjKey, ComponentBundle = new Dictionary <string, string>() }; newBundle.ComponentBundle.Add(reactComponent.ContainerId, renderingJs); return(newBundle); }); } return(currentBundle); }
/// <summary>Renders the specified view context by using the specified writer and <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</summary> /// <param name="viewContext">The view context.</param> /// <param name="writer">The writer that is used to render the view to the response.</param> /// <param name="instance">The <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</param> protected override void RenderView(ViewContext viewContext, TextWriter writer, object instance) { if (writer == null) { throw new ArgumentNullException(nameof(writer)); } var placeholderKeys = this.GetPlaceholders(this.ViewPath); var componentName = Path.GetFileNameWithoutExtension(this.ViewPath)?.Replace("-", string.Empty); var props = this.GetProps(viewContext.ViewData.Model, placeholderKeys); IReactComponent reactComponent = this.Environment.CreateComponent($"Components.{componentName}", props); writer.WriteLine(reactComponent.RenderHtml()); var tagBuilder = new TagBuilder("script") { InnerHtml = reactComponent.RenderJavaScript() }; writer.Write(System.Environment.NewLine); writer.Write(tagBuilder.ToString()); }
private string RenderJavascript(IReactComponent reactComponent) { return("if(document.getElementById(\"" + reactComponent.ContainerId + "\")){" + ApplyFilters(reactComponent.RenderJavaScript()) + " }" + System.Environment.NewLine); }
/// <summary>Renders the specified view context by using the specified writer and <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</summary> /// <param name="viewContext">The view context.</param> /// <param name="writer">The writer that is used to render the view to the response.</param> /// <param name="instance">The <see cref="T:System.Web.Mvc.WebViewPage" /> instance.</param> protected override void RenderView(ViewContext viewContext, TextWriter writer, object instance) { if (writer == null) { throw new ArgumentNullException(nameof(writer)); } var placeholderKeys = this.GetPlaceholders(this.ViewPath); var componentName = Path.GetFileNameWithoutExtension(this.ViewPath)?.Replace("-", string.Empty); var props = this.GetProps(viewContext.ViewData.Model, placeholderKeys); string pageKey = GetPageKey(HttpContext.Current.Request); var componentId = GetComponentRenderingContextKey(pageKey, componentName, String.Join("|", placeholderKeys)); IReactComponent reactComponent = this.Environment.CreateComponent($"Components.{componentName}", props, componentId); // Main Layout as far as we can tell does not need react client side if (ReactSettingsProvider.Current.LayoutServerSideOnly && componentId.ToLower().Contains(ReactSettingsProvider.Current.LayoutName.ToLower())) { writer.WriteLine(reactComponent.RenderHtml(renderServerOnly: true)); return; } bool isEditingOverrideEnabled = ReactSettingsProvider.Current.DisableClientSideWhenEditing && Sitecore.Context.PageMode.IsExperienceEditorEditing; bool enableClientSide = ReactSettingsProvider.Current.EnableClientside && !isEditingOverrideEnabled; // Client side bundling // Added by Thomas Tyack. https://aceik.com.au/2018/06/28/sitecore-page-speed-part-3-eliminate-js-loading-time/ // Page Speed updates allowing all the javascript loading to be defered. bool hasDynamicLoadingEnabled = Context.Item.Fields.Any(x => x.Name.Equals("EnableDynamicScriptLoadingOnPage") && x.Value == "1"); bool enableClientSideBundle = ReactSettingsProvider.Current.EnableGroupedClientsideScripts && hasDynamicLoadingEnabled && !isEditingOverrideEnabled; bool enableClientSideDefer = ReactSettingsProvider.Current.EnableDeferClientsideScripts && hasDynamicLoadingEnabled && !isEditingOverrideEnabled; if (enableClientSideBundle) { writer.WriteLine(reactComponent.RenderHtml(false, true)); // Render the markup but not the client side JS yet. this.ConstructFastBundle(reactComponent); // Add the client side JS to a bundle for rendering at the end of the page. } else if (enableClientSideDefer) { writer.WriteLine(reactComponent.RenderHtml()); var tagBuilder = new TagBuilder("script") { InnerHtml = RenderJavascriptSingleBoostrap(reactComponent) }; tagBuilder.Attributes.Add("defer", "defer"); writer.Write(System.Environment.NewLine); writer.Write(tagBuilder.ToString()); } else if (enableClientSide) { writer.WriteLine(reactComponent.RenderHtml()); var tagBuilder = new TagBuilder("script") { InnerHtml = reactComponent.RenderJavaScript() }; writer.Write(System.Environment.NewLine); writer.Write(tagBuilder.ToString()); } else { writer.WriteLine(reactComponent.RenderHtml(renderServerOnly: true)); } }