changes to support page level scripts, ability to detect prerendering

Oqtane.Client/App.razor

@@ -1,6 +1,8 @@
+@using Microsoft.AspNetCore.Http
 @inject IInstallationService InstallationService
 @inject IJSRuntime JSRuntime
 @inject SiteState SiteState
+@inject IServiceProvider ServiceProvider
 
 @if (_initialized)
 {
@@ -54,12 +56,24 @@
 
     private PageState PageState { get; set; }
 
+    private IHttpContextAccessor accessor;
+
     protected override async Task OnParametersSetAsync()
     {
         SiteState.RemoteIPAddress = RemoteIPAddress;
         SiteState.AntiForgeryToken = AntiForgeryToken;
         SiteState.AuthorizationToken = AuthorizationToken;
 
+        accessor = (IHttpContextAccessor)ServiceProvider.GetService(typeof(IHttpContextAccessor));
+        if (accessor != null)
+        {
+            SiteState.IsPrerendering = !accessor.HttpContext.Response.HasStarted;
+        }
+        else
+        {
+            SiteState.IsPrerendering = true;
+        }
+
         _installation = await InstallationService.IsInstalled();
         if (_installation.Alias != null)
         {

Oqtane.Client/Modules/ModuleBase.cs

@@ -278,6 +278,7 @@ namespace Oqtane.Modules
             SiteState.Properties.PageTitle = title;
         }
 
+        // note - only supports links and meta tags - not scripts
         public void AddHeadContent(string content)
         {
             if (string.IsNullOrEmpty(SiteState.Properties.HeadContent))

Oqtane.Client/UI/ThemeBuilder.razor

@@ -38,21 +38,21 @@
             favicon = Utilities.FileUrl(PageState.Alias, PageState.Site.FaviconFileId.Value);
         }
         headcontent += $"<link id=\"app-favicon\" rel=\"shortcut icon\" type=\"image/x-icon\" href=\"{favicon}\" />\n";
-        // head content
-        if (!string.IsNullOrEmpty(PageState.Site.HeadContent))
-        {
-            headcontent += ProcessHeadContent(PageState.Site.HeadContent, "site") + "\n";
-        }
-        if (!string.IsNullOrEmpty(PageState.Page.HeadContent))
-        {
-            headcontent += ProcessHeadContent(PageState.Page.HeadContent, $"page{PageState.Page.PageId}") + "\n";
-        }
         // stylesheets
         foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
         {
             var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
             headcontent += CreateLink(url, resource.Integrity, resource.CrossOrigin) + "\n";
         }
+        // head content
+        if (!string.IsNullOrEmpty(PageState.Site.HeadContent))
+        {
+            headcontent += PageState.Site.HeadContent + "\n";
+        }
+        if (!string.IsNullOrEmpty(PageState.Page.HeadContent))
+        {
+            headcontent += PageState.Page.HeadContent + "\n";
+        }
         SiteState.Properties.HeadContent = headcontent;
 
         DynamicComponent = builder =>
@@ -64,16 +64,20 @@
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
         {
             if (!string.IsNullOrEmpty(PageState.Page.HeadContent) && PageState.Page.HeadContent.Contains("<script"))
             {
-            // inject scripts into page
+                // inject scripts into page dynamically
                 var interop = new Interop(JSRuntime);
+                var scripts = new List<object>();
                 var count = 0;
                 var index = PageState.Page.HeadContent.IndexOf("<script");
                 while (index >= 0)
                 {
                     var script = PageState.Page.HeadContent.Substring(index, PageState.Page.HeadContent.IndexOf("</script>", index) + 9 - index);
+                    // get script attributes
                     var attributes = script.Substring(0, script.IndexOf(">")).Replace("\"", "").Split(" ");
                     string id = "";
                     string src = "";
@@ -105,13 +109,15 @@
                             }
                         }
                     }
+                    // inject script
                     if (!string.IsNullOrEmpty(src))
                     {
                         src = (src.Contains("://")) ? src : PageState.Alias.BaseUrl + src;
-                    await interop.IncludeScript(id, src, integrity, crossorigin, type, "", "head");
+                        scripts.Add(new { href = src, bundle = "", integrity = integrity, crossorigin = crossorigin, es6module = (type == "module"), location = "head" });
                     }
                     else
                     {
+                        // inline script must have an id attribute
                         if (id == "")
                         {
                             count += 1;
@@ -122,30 +128,12 @@
                     }
                     index = PageState.Page.HeadContent.IndexOf("<script", index + 1);
                 }
-        }
+                if (scripts.Any())
-    }
-
-    private string ProcessHeadContent(string headcontent, string id)
                 {
-        // iterate scripts
+                    await interop.IncludeScripts(scripts.ToArray());
-        if (!string.IsNullOrEmpty(headcontent))
+                }
-        {
-            var count = 0;
-            var index = headcontent.IndexOf("<script");
-            while (index >= 0)
-            {
-                var script = headcontent.Substring(index, headcontent.IndexOf("</script>", index) + 9 - index);
-                if (!script.Contains("src=") && !script.Contains("id="))
-                {
-                    count += 1;
-                    id += $"-script{count}";
-                    headcontent = headcontent.Replace(script, script.Replace("<script", $"<script id=\"{id}\""));
-                    index += id.Length;
-                }
-                index = headcontent.IndexOf("<script", index + 1);
             }
         }
-        return headcontent;
     }
 
     private string CreateLink(string url, string integrity, string crossorigin)

Oqtane.Server/Pages/_Host.cshtml

@@ -15,8 +15,8 @@
     {
         <link id="app-manifest" rel="manifest" />
     }
-    @Html.Raw(Model.HeadResources)
     <component type="typeof(Oqtane.Head)" render-mode="@((RenderMode)Enum.Parse(typeof(RenderMode), Model.RenderMode, true))" />
+    @Html.Raw(Model.HeadResources)
 </head>
 <body>
 	@if (string.IsNullOrEmpty(Model.Message))

Oqtane.Server/Pages/_Host.cshtml.cs

@@ -19,7 +19,6 @@ using Microsoft.Extensions.Primitives;
 using Oqtane.Enums;
 using Oqtane.Security;
 using Oqtane.Extensions;
-using Oqtane.Themes;
 
 namespace Oqtane.Pages
 {
@@ -130,10 +129,8 @@ namespace Oqtane.Pages
                         {
                             PWAScript = CreatePWAScript(alias, site, route);
                         }
-                        if (!string.IsNullOrEmpty(site.HeadContent))
+                        // site level scripts
-                        {
+                        HeadResources += ParseScripts(site.HeadContent);
-                            ProcessHeadContent(site.HeadContent, "site");
-                        }
 
                         // get jwt token for downstream APIs
                         if (User.Identity.IsAuthenticated)
@@ -174,8 +171,6 @@ namespace Oqtane.Pages
                             }
                         }
 
-                        ProcessHeadContent(page.HeadContent, $"page{page.PageId}");
-
                         // include global resources
                         var assemblies = AppDomain.CurrentDomain.GetOqtaneAssemblies();
                         foreach (Assembly assembly in assemblies)
@@ -427,27 +422,20 @@ namespace Oqtane.Pages
             }
         }
 
-        private void ProcessHeadContent(string headcontent, string id)
+        private string ParseScripts(string headcontent)
         {
-            // add scripts to page
+            // iterate scripts
+            var scripts = "";
             if (!string.IsNullOrEmpty(headcontent))
             {
-                var count = 0;
                 var index = headcontent.IndexOf("<script");
                 while (index >= 0)
                 {
-                    var script = headcontent.Substring(index, headcontent.IndexOf("</script>", index) + 9 - index);
+                    scripts += headcontent.Substring(index, headcontent.IndexOf("</script>", index) + 9 - index);
-                    if (!script.Contains("src=") && !script.Contains("id="))
-                    {
-                        count += 1;
-                        id += $"-script{count}";
-                        script = script.Replace("<script", $"<script id=\"{id}\"");
-                        index += id.Length;
-                    }
-                    HeadResources += script + Environment.NewLine;
                     index = headcontent.IndexOf("<script", index + 1);
                 }
             }
+            return scripts;
         }
 
         private void ProcessResource(Resource resource, int count, Alias alias)

Oqtane.Server/wwwroot/js/interop.js

@@ -116,6 +116,10 @@ Oqtane.Interop = {
         else {
             script = document.getElementById(id);
         }
+        if (script !== null) {
+            script.remove();
+            script = null;
+        }
         if (script === null) {
             script = document.createElement("script");
             if (id !== "") {
@@ -139,49 +143,21 @@ Oqtane.Interop = {
             script.async = false;
             this.addScript(script, location)
                 .then(() => {
+                    if (src !== "") {
                         console.log(src + ' loaded');
+                    }
+                    else {
+                        console.log(id + ' loaded');
+                    }
                 })
                 .catch(() => {
-                    console.error(src + ' failed');
-                });
-        }
-        else {
-            if (script.id !== id) {
-                script.setAttribute('id', id);
-            }
-            if (type !== "") {
-                if (script.type !== type) {
-                    script.setAttribute('type', type);
-                }
-            } else {
-                script.removeAttribute('type');
-            }
                     if (src !== "") {
-                if (script.src !== this.getAbsoluteUrl(src)) {
+                        console.error(src + ' failed');
-                    script.removeAttribute('integrity');
-                    script.removeAttribute('crossorigin');
-                    script.src = src;
-                }
-                if (integrity !== "") {
-                    if (script.integrity !== integrity) {
-                        script.setAttribute('integrity', integrity);
-                    }
-                } else {
-                    script.removeAttribute('integrity');
-                }
-                if (crossorigin !== "") {
-                    if (script.crossOrigin !== crossorigin) {
-                        script.setAttribute('crossorigin', crossorigin);
-                    }
-                } else {
-                    script.removeAttribute('crossorigin');
-                }
                     }
                     else {
-                if (script.innerHTML !== content) {
+                        console.error(id + ' failed');
-                    script.innerHTML = content;
-                }
                     }
+                });
         }
     },
     addScript: function (script, location) {
@@ -234,6 +210,10 @@ Oqtane.Interop = {
                                 if (path === scripts[s].href && scripts[s].es6module === true) {
                                     element.type = "module";
                                 }
+                                if (path === scripts[s].href && scripts[s].location === 'body') {
+                                    document.body.appendChild(element);
+                                    return false;  // return false to bypass default DOM insertion mechanism
+                                }
                             }
                         }
                     })

Oqtane.Shared/Shared/SiteState.cs

@@ -9,7 +9,7 @@ namespace Oqtane.Shared
         public string AntiForgeryToken { get; set; } // passed from server for use in service calls on client
         public string AuthorizationToken { get; set; } // passed from server for use in service calls on client
         public string RemoteIPAddress { get; set; } // passed from server as cannot be reliably retrieved on client
-
+        public bool IsPrerendering{ get; set; } 
 
         private dynamic _properties;
         public dynamic Properties => _properties ?? (_properties = new PropertyDictionary());