/// <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));
}
}
