[mgmt] migrate mgmt package to esm 22 (#33037)

#32184
@azure/arm-storage
@azure/arm-sqlvirtualmachine
@azure/arm-sql
@azure/arm-springappdiscovery
@azure/arm-sphere

Author: v-jiaodi

Diff for: common/config/rush/pnpm-lock.yaml

@@ -48,20 +48,28 @@ Set the values of the client ID, tenant ID, and client secret of the AAD applica
 
 For more information about how to create an Azure AD Application check out [this guide](https://learn.microsoft.com/azure/active-directory/develop/howto-create-service-principal-portal).
 
-```javascript
-const { AzureSphereManagementClient } = require("@azure/arm-sphere");
-const { DefaultAzureCredential } = require("@azure/identity");
-// For client-side applications running in the browser, use InteractiveBrowserCredential instead of DefaultAzureCredential. See https://aka.ms/azsdk/js/identity/examples for more details.
+Using Node.js and Node-like environments, you can use the `DefaultAzureCredential` class to authenticate the client.
+ 
+```ts snippet:ReadmeSampleCreateClient_Node
+import { AzureSphereManagementClient } from "@azure/arm-sphere";
+import { DefaultAzureCredential } from "@azure/identity";
 
 const subscriptionId = "00000000-0000-0000-0000-000000000000";
 const client = new AzureSphereManagementClient(new DefaultAzureCredential(), subscriptionId);
+```
+ 
+For browser environments, use the `InteractiveBrowserCredential` from the `@azure/identity` package to authenticate.
+ 
+```ts snippet:ReadmeSampleCreateClient_Browser
+import { InteractiveBrowserCredential } from "@azure/identity";
+import { AzureSphereManagementClient } from "@azure/arm-sphere";
 
-// For client-side applications running in the browser, use this code instead:
-// const credential = new InteractiveBrowserCredential({
-//   tenantId: "<YOUR_TENANT_ID>",
-//   clientId: "<YOUR_CLIENT_ID>"
-// });
-// const client = new AzureSphereManagementClient(credential, subscriptionId);
+const subscriptionId = "00000000-0000-0000-0000-000000000000";
+const credential = new InteractiveBrowserCredential({
+  tenantId: "<YOUR_TENANT_ID>",
+  clientId: "<YOUR_CLIENT_ID>",
+});
+const client = new AzureSphereManagementClient(credential, subscriptionId);
 ```
 
 ### JavaScript Bundle
@@ -80,8 +88,9 @@ To use this client library in the browser, first you need to use a bundler. For
 
 Enabling logging may help uncover useful information about failures. In order to see a log of HTTP requests and responses, set the `AZURE_LOG_LEVEL` environment variable to `info`. Alternatively, logging can be enabled at runtime by calling `setLogLevel` in the `@azure/logger`:
 
-```javascript
-const { setLogLevel } = require("@azure/logger");
+```ts snippet:SetLogLevel
+import { setLogLevel } from "@azure/logger";
+
 setLogLevel("info");
 ```
 

Diff for: sdk/sphere/arm-sphere/README.md

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "mainEntryPointFilePath": "./dist-esm/src/index.d.ts",
+  "mainEntryPointFilePath": "dist/esm/index.d.ts",
   "docModel": {
     "enabled": true
   },
@@ -11,7 +11,7 @@
   "dtsRollup": {
     "enabled": true,
     "untrimmedFilePath": "",
-    "publicTrimmedFilePath": "./types/arm-sphere.d.ts"
+    "publicTrimmedFilePath": "dist/arm-sphere.d.ts"
   },
   "messages": {
     "tsdocMessageReporting": {
@@ -28,4 +28,4 @@
       }
     }
   }
-}
+}