[Feature] Util.HTMLHead.AddScriptFromUri and Util.HTMLHead.AddScript should support type=module

Jens_Odborg

i.e. to enable scripts like this:

<script type="module">
    import {a} from "./module.js";
    alert(a);
</script>

as it is now you have to roll your own injection of script element to get that

Note I tried:

var serverType = typeof(Util).Assembly.GetType("LINQPad.ExecutionModel.Server");
var server = serverType.GetProperty("CurrentServer").GetValue(null);
server.Uncapsulate().InjectHtmlHeader($"<script type='module' src='{uri}'></script>\r\n");

but it seems to ignore the type attributes
so I had to write a javascript that added the script element to header

JoeAlbahari

The problem is caused in the JavaScript that LINQPad generates to parse script attributes before adding them to the DOM - it only looks at specific attributes and hard-codes the type attribute. I'll fix this so that it enumerates over all attributes.

I'll also add a AddScript (string type, string javaScript) method and a AddRawHtml (string html) method to HtmlHead.

This will appear in the LINQPad 8 preview, which should be out next week.

JoeAlbahari

An early LINQPad 8 preview is now available:
https://www.linqpad.net/linqpad8.aspx

Let me know how you get on.

claybox

Linqpad 8 is fantastic! Thanks again Joe!
Q: I'm trying my to see if this is possible using
1) html script content in html content
2) using AddScript (string type, string javaScript)
Both fail... Is particular example (fluentui modules) just not possible?

void Main()
{
    var htmlContent = @"
         <script type='module' src='https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js'></script>  

<fluent-button appearance='accent' class='accent' current-value='d'>
  <fluent-icon icon-name='CircleAdditionSolid'></fluent-icon>
      Click test
    </fluent-button>
";
 Util.RawHtml(htmlContent).Dump();

Util.HtmlHead.AddScript("module", "https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js");

var htmlContent2 = @"
                 <fluent-button appearance='accent' class='accent' current-value='d'>
      <fluent-icon icon-name='CircleAdditionSolid'></fluent-icon>
      Click test2
    </fluent-button>
    ";
    Util.RawHtml(htmlContent2).Dump();
}

JoeAlbahari

I'm sorry - I don't know why I didn't also add the overload that accepts a type to the AddScriptFromUri method. Until this is fixed, you can work around it as follows:

void Main()
{
    Util.HtmlHead.AddRawHtml ($"<script type='module' src='https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js");

    var htmlContent2 = @"<fluent-button appearance='accent' class='accent' current-value='d'>
      <fluent-icon icon-name='CircleAdditionSolid'></fluent-icon>
      Click test2
    </fluent-button>
    ";
    Util.RawHtml (htmlContent2).Dump();
}

claybox

Sorry Joe... your above example didn't work...

void Main()
{
    Util.HtmlHead.AddRawHtml("<script type='module' src='https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js'");

    var htmlContent2 = @"<fluent-button appearance='accent' class='accent' current-value='d'>
      <fluent-icon icon-name='CircleAdditionSolid'></fluent-icon>
      Click test2
    </fluent-button>
    ";
    Util.RawHtml(htmlContent2).Dump();

}  

claybox

Apologies!!!! It works!
Thanks again Joe!
(working example below - was missing the >

void Main()
{
    Util.HtmlHead.AddRawHtml("<script type='module' src='https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js'>");

    var htmlContent2 = @"<fluent-button appearance='accent' class='accent' current-value='d'>
      <fluent-icon icon-name='CircleAdditionSolid'></fluent-icon>
      Click test2
    </fluent-button>
    ";
    Util.RawHtml(htmlContent2).Dump();

}