Fix #1335. Address feedback. Rename PageScript ->FluentPageScript

WHATSNEW.md

@@ -1,4 +1,7 @@
-## V4.3.1
+## V4.3.2
+- Issue [#1335](https://github.com/microsoft/fluentui-blazor/issues/1335): Consider removing the PageScript component from the public API (renamed to FluentPageScript)
+
+## V4.3.1
 - Issue [#1282](https://github.com/microsoft/fluentui-blazor/issues/1282): Looping behaviour after update to 4.3.0 / FluentDesignTheme
 - Issue [#1283](https://github.com/microsoft/fluentui-blazor/issues/1283): Fix Combobox and Select width property
 - Issue [#1294](https://github.com/microsoft/fluentui-blazor/issues/1294): Issue upgrading from 4.2.1 to 4.3.0; better fix for #1205 en #1225

examples/Demo/Shared/wwwroot/docs/WhatsNew.md

@@ -1,4 +1,7 @@
-## V4.3.1
+## V4.3.2
+- - Issue [#1335](https://github.com/microsoft/fluentui-blazor/issues/1335): Consider removing the PageScript component from the public API (renamed to FluentPageScript)
+
+## V4.3.1
 - Issue [#1282](https://github.com/microsoft/fluentui-blazor/issues/1282): Looping behaviour after update to 4.3.0 / FluentDesignTheme
 - Issue [#1283](https://github.com/microsoft/fluentui-blazor/issues/1283): Fix Combobox and Select width property
 - Issue [#1294](https://github.com/microsoft/fluentui-blazor/issues/1294): Issue upgrading from 4.2.1 to 4.3.0; better fix for #1205 en #1225

src/Core.Assets/src/PageScript.ts → src/Core.Assets/src/FluentPageScript.ts

@@ -1,5 +1,5 @@
 const pageScriptInfoBySrc = new Map();
-class PageScript extends HTMLElement {
+class FluentPageScript extends HTMLElement {
   static observedAttributes = ['src'];
   src: string | null = null;
 
@@ -49,7 +49,7 @@ class PageScript extends HTMLElement {
 
   async initializePageScriptModule(src: string, pageScriptInfo: any) {
     if (src.startsWith("./")) {
-      src = new URL(src.substr(2), document.baseURI).toString();
+      src = new URL(src.substring(2), document.baseURI).toString();
     }
 
     const module = await import(src);
@@ -77,4 +77,4 @@ export function onEnhancedLoad() {
   }
 }
 
-export { PageScript };
+export { FluentPageScript };

src/Core.Assets/src/index.ts

@@ -1,7 +1,7 @@
 export * from '@fluentui/web-components/dist/web-components'
 import { SplitPanels } from './SplitPanels'
 import { DesignTheme } from './DesignTheme'
-import { PageScript, onEnhancedLoad } from './PageScript'
+import { FluentPageScript, onEnhancedLoad } from './FluentPageScript'
 
 interface Blazor {
   registerCustomEventType: (
@@ -299,7 +299,7 @@ export function afterStarted(blazor: Blazor) {
 export function beforeStart(options: any) {
   customElements.define("fluent-design-theme", DesignTheme);
   customElements.define("split-panels", SplitPanels);
-  customElements.define('page-script', PageScript);
+  customElements.define('fluent-page-script', FluentPageScript);
 
   beforeStartCalled = true;
 }

src/Core/Components/FluentPageScript.razor

@@ -0,0 +1,9 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@* based on code from https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/static-server-rendering?view=aspnetcore-8.0 *@
+<fluent-page-script src="@Src"></fluent-page-script>
+
+@code {
+    [Parameter]
+    [EditorRequired]
+    public string Src { get; set; } = default!;
+}

src/Core/Components/NavMenu/FluentNavMenu.razor

@@ -2,7 +2,7 @@
 @inherits FluentComponentBase
 @if (Data is null)
 {
-    <PageScript Src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></PageScript>
+    <FluentPageScript Src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></FluentPageScript>
 }
 <div id="@Id" @ref="@Element" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" aria-label="@(Collapsible ? null : @Title)" role="menu" aria-expanded="@Expanded">
     <CascadingValue Value="this" IsFixed="true">

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html

@@ -1,5 +1,5 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 100%;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
   <div aria-label="Navigation menu" aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
     <div class="positioning-region" b-vs37bumpa7="">

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html

@@ -1,5 +1,5 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 100%;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
   <div aria-label="Custom title" aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
     <div class="positioning-region" b-vs37bumpa7="">

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html

@@ -1,3 +1,3 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 100%;" aria-label="Custom title" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html

@@ -1,3 +1,3 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 100%;" aria-label="Navigation menu" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html

@@ -1,5 +1,5 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 100%;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
   <div aria-label="Navigation menu" aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
     <div class="positioning-region" b-vs37bumpa7="">

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html

@@ -1,3 +1,3 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="margin: 5px 15px; width: 100%;" aria-label="Navigation menu" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html

@@ -1,3 +1,3 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="collapsed fluent-nav-menu" style="width: 40px; min-width: 40px;" aria-label="Navigation menu" role="menu" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>

tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html

@@ -1,3 +1,3 @@
 
-<page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+<fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
 <div id="xxx" class="fluent-nav-menu" style="width: 300px;" aria-label="Navigation menu" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>

tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.FluentMainLayout_Default.verified.html

@@ -7,7 +7,7 @@
   </header>
   <b>render me</b>
   <div class="stack-horizontal" style="justify-content: start; align-items: start; column-gap: 0px; row-gap: 10px; width: 100%; height:calc(100% - var(--header-height));" b-0nr62qx0mz="">
-    <page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></page-script>
+    <fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></fluent-page-script>
     <div id="xxx" class="main-layout-navmenu fluent-nav-menu" style="width: 320px;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
       <div aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
         <div class="positioning-region" b-vs37bumpa7="">