Merge branch 'dev-v5' of github.com-perso:microsoft/fluentui-blazor i…

…nto dev-v5

src/Core.Scripts/README.md

@@ -0,0 +1,46 @@
+# Microsoft.FluentUI.AspNetCore.Components.Scripts
+
+## Setup
+
+The **Components.Scripts** project uses several NPM packages.
+You should get them automatically the first time you compile this project from Visual Studio.
+
+In the event of an NPM authentication problem (E401), you will probably need to run these command from the `Core.Scripts` folder.
+
+1. Install the **vsts-npm-auth** command.
+   ```bash
+   npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
+   ```
+2. Execute this command to get an authentication token.
+   ```bash
+   vsts-npm-auth -config .npmrc -force
+   ```
+3. Download and install NPM packages manually.
+   ```bash
+   npm install
+   ```
+
+## Development
+
+  The `ìndex.ts` file is the entry point for the Fluent UI Blazor library.
+  It re-exports the `beforeStart` and `afterStarted` methods from the `Startup` file,
+  which are used to define and initialize the Fluent UI components and styles.
+
+  -  To create a new **custom component**, you can add a new file in the `Components` folder,
+     and register it in the `afterStarted` method in the `Startup` file.
+
+  -  To create a new **custom event**, you can add a new function in the `FluentUICustomEvents` file,
+     and register it in the `afterStarted` method in the `Startup` file.
+
+  -  All **FluentUI WebComponents** are defined and initialized in the `FluentUIWebComponents` file.
+
+## Update the list of FluentUI Web components
+
+To update the list of FluentUI Web components, you can run the `_ExtractWebComponents.ps1` script.
+This script will extract all FluentUI Web Components from the `.\node_modules\@fluentui\web-components\dist\web-components.d.ts` file.
+
+  1. Set the lastest `@fluentui/web-components` package version in the `package.json`.
+  2. Run `npm install` to install the latest package.
+  3. Open the PowerShell terminal in the `Core.Scripts` directory.
+  4. Run this Script using the following command: `.\_ExtractWebComponents.ps1`
+  5. Copy the output and paste it in the `FluentUIWebComponents.ts` file.

src/Core.Scripts/_ExtractWebComponents.ps1

@@ -0,0 +1,23 @@
+# ************************************************************
+# PowerShell Script to extract all FluentUI Web Components
+# from the web-components.d.ts file
+#
+# Usage:
+#    1. Set the lastest `@fluentui/web-components` package version in the `package.json`.
+#    2. Run `npm install` to install the latest package.
+#    3. Open the PowerShell terminal in the `Core.Scripts` directory.
+#    4. Run this Script using the following command: `.\_ExtractWebComponents.ps1`
+#    5. Copy the output and paste it in the `FluentUIWebComponents.ts` file.
+# ************************************************************
+
+# Read the content of the file
+$fileContent = Get-Content -Path ".\node_modules\@fluentui\web-components\dist\web-components.d.ts"
+
+# Use a regular expression to find matches
+$matches = [regex]::Matches($fileContent, 'export declare const (\w+): FASTElementDefinition')
+
+# Extract the matched item names
+$itemNames = foreach ($match in $matches) { "FluentUIComponents.$($match.Groups[1].Value).define(registry);" }
+
+# Output the item names
+$itemNames

src/Core.Scripts/package.json

@@ -25,6 +25,6 @@
     "typescript": "^5.4.4"
   },
   "dependencies": {
-    "@fluentui/web-components": "3.0.0-beta.73"
+    "@fluentui/web-components": "3.0.0-beta.74"
   }
 }

src/Core.Scripts/src/Components/PageScript/FluentPageScript.ts

@@ -0,0 +1,96 @@
+import { StartedMode } from "../../d-ts/StartedMode";
+
+export namespace Microsoft.FluentUI.Blazor.Components.PageScript {
+
+  const pageScriptInfoBySrc = new Map();
+
+  export class FluentPageScript extends HTMLElement {
+    static observedAttributes = ['src'];
+    src: string | null = null;
+
+    attributeChangedCallback(name: string | null, oldValue: string | null, newValue: string | null): void {
+      if (name !== 'src') {
+        return;
+      }
+
+      this.src = newValue;
+      this.unregisterPageScriptElement(oldValue);
+      this.registerPageScriptElement(newValue);
+    }
+
+    disconnectedCallback(): void {
+      this.unregisterPageScriptElement(this.src);
+    }
+
+    registerPageScriptElement(src: string | null): void {
+      if (!src) {
+        throw new Error('Must provide a non-empty value for the "src" attribute.');
+      }
+
+      let pageScriptInfo = pageScriptInfoBySrc.get(src);
+
+      if (pageScriptInfo) {
+        pageScriptInfo.referenceCount++;
+      } else {
+        pageScriptInfo = { referenceCount: 1, module: null };
+        pageScriptInfoBySrc.set(src, pageScriptInfo);
+        this.initializePageScriptModule(src, pageScriptInfo);
+      }
+    }
+
+    unregisterPageScriptElement(src: string | null): void {
+      if (!src) {
+        return;
+      }
+
+      const pageScriptInfo = pageScriptInfoBySrc.get(src);
+      if (!pageScriptInfo) {
+        return;
+      }
+
+      pageScriptInfo.referenceCount--;
+    }
+
+    async initializePageScriptModule(src: string, pageScriptInfo: any): void {
+      if (src.startsWith("./")) {
+        src = new URL(src.substring(2), document.baseURI).toString();
+      }
+
+      const module = await import(src);
+
+      if (pageScriptInfo.referenceCount <= 0) {
+        return;
+      }
+
+      pageScriptInfo.module = module;
+      module.onLoad?.();
+      module.onUpdate?.();
+    }
+  }
+
+  const onEnhancedLoad = (): void => {
+    for (const [src, { module, referenceCount }] of pageScriptInfoBySrc) {
+      if (referenceCount <= 0) {
+        module?.onDispose?.();
+        pageScriptInfoBySrc.delete(src);
+      }
+    }
+
+    for (const { module } of pageScriptInfoBySrc.values()) {
+      module?.onUpdate?.();
+    }
+  }
+
+  /**
+   * Register the FluentPageScript component
+   * @param blazor
+   * @param mode
+   */
+  export const registerComponent = (blazor: Blazor, mode: StartedMode): void => {
+    if (typeof blazor.addEventListener === 'function' && mode === StartedMode.Web) {
+      customElements.define('fluent-page-script', FluentPageScript);
+      blazor.addEventListener('enhancedload', onEnhancedLoad);
+    }
+  };
+
+}