wip

Author: zhiyuanliang-ms

articles/azure-app-configuration/TOC.yml

@@ -310,6 +310,8 @@
       href: https://go.microsoft.com/fwlink/?linkid=2180917
     - name: Python provider
       href: https://pypi.org/project/azure-appconfiguration-provider/
+    - name: JavaScript provider
+      href: ./reference-javascript-provider.md
     - name: Azure SDK for .NET
       href: https://go.microsoft.com/fwlink/?linkid=2092056
     - name: Azure SDK for Java

articles/azure-app-configuration/enable-dynamic-configuration-javascript.md

@@ -221,3 +221,8 @@ In this tutorial, you enabled your JavaScript app to dynamically refresh configu
 
 > [!div class="nextstepaction"]
 > [Managed identity integration](./howto-integrate-azure-managed-service-identity.md)
+
+For the full feature rundown of the JavaScript configuration provider library, continue to the following document.
+
+> [!div class="nextstepaction"]
+> [JavaScript configuration provider](./reference-javascript-provider.md)

articles/azure-app-configuration/feature-management-dotnet-reference.md

@@ -1191,8 +1191,6 @@ ActivitySource.AddActivityListener(new ActivityListener()
 
 For more information, please go to [Collect a distributed trace](/dotnet/core/diagnostics/distributed-tracing-collection-walkthroughs).
 
-
-
 ### Application Insights Telemetry
 
 The `Microsoft.FeatureManagement.Telemetry.ApplicationInsights` package provides a built-in telemetry publisher that sends feature flag evaluation data to [Application Insights](/azure/azure-monitor/app/app-insights-overview). The `Microsoft.FeatureManagement.Telemetry.ApplicationInsights` package also provides a telemetry initializer that automatically tags all events with `TargetingId` so that events may be linked to flag evaluations. To take advantage of this, add a reference to the package and register the Application Insights telemetry as in the following example.

articles/azure-app-configuration/quickstart-javascript-provider.md

@@ -408,4 +408,9 @@ run().catch(console.error);
 In this quickstart, you created a new App Configuration store and learned how to access key-values using the App Configuration JavaScript provider in a Node.js app. To learn how to configure your app to dynamically refresh configuration settings, continue to the next tutorial.
 
 > [!div class="nextstepaction"]
-> [Enable dynamic configuration](./enable-dynamic-configuration-javascript.md)
+> [Enable dynamic configuration](./enable-dynamic-configuration-javascript.md)
+
+For the full feature rundown of the JavaScript configuration provider library, continue to the following document.
+
+> [!div class="nextstepaction"]
+> [JavaScript configuration provider](./reference-javascript-provider.md)

articles/azure-app-configuration/reference-javascript-provider.md

@@ -17,23 +17,118 @@ ms.date: 02/02/2025
 
 [![configuration-provider-npm-package](https://img.shields.io/npm/v/@azure/app-configuration-provider?label=@azure/app-configuration-provider)](https://www.npmjs.com/package/@azure/app-configuration-provider)
 
+Azure App Configuration is a managed service that helps developers centralize their application configurations simply and securely. The JavaScript configuration provider library enables loading configuration from an Azure App Configuration store in a managed way. This client library adds additional functionality above the Azure sdk for JavaScript.
+
 ## Load configuration
 
-### Connect to Azure App Configuration
+The `load` method exported in the `@azure/app-configuration-provider` package is used to load configuration from the Azure App Configuration. The `load` method allows you to either use Microsoft Entra ID or connection string to connect to the App Configuration store.
 
-### Load specific key-values using selectors
+### [Microsoft Entra ID](#tab/entra-id)
 
-### Load key-values and trim prefix from keys
+You use the `DefaultAzureCredential` to authenticate to your App Configuration store. Follow the [instructions](./concept-enable-rbac.md#authentication-with-token-credentials) to assign your credential the **App Configuration Data Reader** role.
 
-## Use Key Vault reference
+```javascript
+const { load } = require("@azure/app-configuration-provider");
+const { DefaultAzureCredential } = require("@azure/identity");
+const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
+const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility
+
+async function run() {
+    // Connect to Azure App Configuration using a token credential and load all key-values with null label.
+    const settings = await load(endpoint, credential);
+    console.log('settings.get("message"):', settings.get("message"));
+}
+
+run();
+```
+
+### [Connection string](#tab/connection-string)
+
+```javascript
+const { load } = require("@azure/app-configuration-provider");
+const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
+
+async function run() {
+    // Connect to Azure App Configuration using a connection string and load all key-values with null label.
+    const settings = await load(connectionString);
+    console.log('settings.get("message"):', settings.get("message"));
+}
+
+run();
+```
+
+---
+
+The `load` method returns an instance of `AzureAppConfiguration` type which is defined as follows:
+
+```typescript
+type AzureAppConfiguration = {
+    refresh(): Promise<void>;
+    onRefresh(listener: () => any, thisArg?: any): Disposable;
+} & IGettable & ReadonlyMap<string, any> & IConfigurationObject;
+```
+
+For more information about `refresh` and `onRefresh` methods, see the [Dynamic refresh](#dynamic-refresh) section.
+
+### Consume configuration
+
+The `AzureAppConfiguration` type extends the following interfaces:
 
-## Use feature flag
+- `IGettable`
 
+    ```typescript
+    interface IGettable {
+        get<T>(key: string): T | undefined;
+    }
+    ```
 
+    The `IGettable` interface provides `get` method to retrieve the value of a key-value from the Map-styled data structure.
+
+    ```typescript
+    const settings = await load(endpoint, credential);
+    const fontSize = settings.get("app:font:size"); // value of the key "app:font:size" from the App Configuration store
+    ```
+
+- `ReadonlyMap`
+
+    The `AzureAppConfiguration` type also extends the [`ReadonlyMap`](https://typestrong.org/typedoc-auto-docs/typedoc/interfaces/TypeScript.ReadonlyMap.html) interface, providing read-only access to key-value pairs.
+
+- `IConfigurationObject`
+
+    ```typescript
+    interface IConfigurationObject {
+        constructConfigurationObject(options?: ConfigurationObjectConstructionOptions): Record<string, any>;
+    }
+    ```
+
+    The `IConfigurationObject` interface provides `constructConfigurationObject` method to construct a configuration object based on a Map-styled data structure and hierarchical keys. The optional `ConfigurationObjectConstructionOptions` parameter can be used to specify the separator for converting hierarchical keys to object properties. By default, the separator is `"."`.
+
+    ```typescript
+    interface ConfigurationObjectConstructionOptions {
+        separator?: "." | "," | ";" | "-" | "_" | "__" | "/" | ":"; // supported separators
+    }
+    ```
+
+   In JavaScript, objects or maps are commonly used as the primary data structures to represent configurations. The JavaScript configuration provider library supports both of the configuration approaches, providing developers with the flexibility to choose the option that best fits their needs.
+
+    ```typescript
+    const settings = await load(endpoint, credential);
+    const settingsObj = settings.constructConfigurationObject({separator: ":"});
+    const fontSize1 = settings.get("app:font:size"); // map-style configuration representation
+    const fontSize2 = settingsObj.app.font.size; // object-style configuration representation
+    ```
+
+### Load specific key-values using selectors
+
+### Load feature flag
+
+### Trim prefix from keys
+
+## Use Key Vault reference
 
 
 
-## Refresh configuration
+## Dynamic refresh
 
 ### Watch sentinel key for refresh