Upload playground standalone emitters

eng/emitters/pipelines/templates/stages/emitter-stages.yml

@@ -82,6 +82,11 @@ parameters:
     type: string
     default: "3.12"
 
+  # Whether to bundle and upload the emitter package to the playground package storage.
+  - name: UploadPlaygroundBundle
+    type: boolean
+    default: false
+
 stages:
   # Build stage
   # Responsible for building the autorest generator and typespec emitter packages
@@ -333,6 +338,23 @@ stages:
                   ArtifactPath: $(buildArtifactsPath)
                   LanguageShortName: ${{ parameters.LanguageShortName }}
 
+              - ${{ if parameters.UploadPlaygroundBundle }}:
+                  - script: npm install -g pnpm
+                    displayName: Install pnpm for playground bundle upload
+                  - script: pnpm install --filter "@typespec/bundle-uploader..."
+                    displayName: Install bundle-uploader dependencies
+                    workingDirectory: $(Build.SourcesDirectory)
+                  - script: pnpm build --filter "@typespec/bundle-uploader..."
+                    displayName: Build bundle-uploader
+                    workingDirectory: $(Build.SourcesDirectory)
+                  - task: AzureCLI@1
+                    displayName: Upload playground bundle
+                    inputs:
+                      azureSubscription: "Azure SDK Engineering System"
+                      scriptLocation: inlineScript
+                      inlineScript: node ./eng/emitters/scripts/upload-bundled-emitter.js ${{ parameters.PackagePath }}
+                      workingDirectory: $(Build.SourcesDirectory)
+
             templateContext:
               outputs:
                 - output: pipelineArtifact

eng/emitters/scripts/upload-bundled-emitter.js

@@ -0,0 +1,15 @@
+// @ts-check
+import { resolve } from "path";
+import { bundleAndUploadStandalonePackage } from "../../../packages/bundle-uploader/dist/src/index.js";
+import { repoRoot } from "../../common/scripts/helpers.js";
+
+const packageRelativePath = process.argv[2];
+if (!packageRelativePath) {
+  console.error("Usage: node upload-bundled-emitter.js <package-path>");
+  console.error("  e.g. node upload-bundled-emitter.js packages/http-client-csharp");
+  process.exit(1);
+}
+
+const packagePath = resolve(repoRoot, packageRelativePath);
+
+await bundleAndUploadStandalonePackage({ packagePath });

packages/bundle-uploader/src/index.ts

@@ -16,6 +16,47 @@ function logSuccess(message: string) {
   logInfo(pc.green(`✔ ${message}`));
 }
 
+export interface BundleAndUploadStandalonePackageOptions {
+  /**
+   * Absolute path to the package directory.
+   */
+  packagePath: string;
+}
+
+/**
+ * Bundle and upload a standalone package that is not part of the pnpm workspace.
+ * Uploads the bundle files and writes a `latest.json` under the package's blob directory
+ * (e.g. `@typespec/http-client-csharp/latest.json`).
+ */
+export async function bundleAndUploadStandalonePackage({
+  packagePath,
+}: BundleAndUploadStandalonePackageOptions) {
+  const bundle = await createTypeSpecBundle(packagePath);
+  const manifest = bundle.manifest;
+  logInfo(`Bundling standalone package: ${manifest.name}@${manifest.version}`);
+
+  const uploader = new TypeSpecBundledPackageUploader(new AzureCliCredential());
+  await uploader.createIfNotExists();
+
+  const result = await uploader.upload(bundle);
+  if (result.status === "uploaded") {
+    logSuccess(`Bundle for package ${manifest.name}@${manifest.version} uploaded.`);
+  } else {
+    logInfo(`Bundle for package ${manifest.name} already exists for version ${manifest.version}.`);
+  }
+
+  const importMap: Record<string, string> = {};
+  for (const [key, value] of Object.entries(result.imports)) {
+    importMap[joinUnix(manifest.name, key)] = value;
+  }
+
+  await uploader.updatePackageLatest(manifest.name, {
+    version: manifest.version,
+    imports: importMap,
+  });
+  logSuccess(`Updated ${manifest.name}/latest.json for version ${manifest.version}.`);
+}
+
 export interface BundleAndUploadPackagesOptions {
   repoRoot: string;
   /**
@@ -85,9 +126,12 @@ export async function bundleAndUploadPackages({
     }
   }
   logInfo(`Import map for ${indexVersion}:`, importMap);
-  await uploader.updateIndex(indexName, {
+  const index = {
     version: indexVersion,
     imports: importMap,
-  });
+  };
+  await uploader.updateIndex(indexName, index);
   logSuccess(`Updated index for version ${indexVersion}.`);
+  await uploader.updateLatestIndex(indexName, index);
+  logSuccess(`Updated latest index for ${indexName}.`);
 }

packages/bundle-uploader/src/upload-browser-package.ts

@@ -75,6 +75,58 @@ export class TypeSpecBundledPackageUploader {
     });
   }
 
+  async getLatestIndex(name: string): Promise<PackageIndex | undefined> {
+    const blob = this.#container.getBlockBlobClient(`indexes/${name}/latest.json`);
+    if (await blob.exists()) {
+      const response = await blob.download();
+      const body = await response.blobBody;
+      const existingContent = await body?.text();
+      if (existingContent) {
+        return JSON.parse(existingContent);
+      }
+    }
+    return undefined;
+  }
+
+  async updateLatestIndex(name: string, index: PackageIndex) {
+    const blob = this.#container.getBlockBlobClient(`indexes/${name}/latest.json`);
+    const content = JSON.stringify(index);
+    await blob.upload(content, content.length, {
+      blobHTTPHeaders: {
+        blobContentType: "application/json; charset=utf-8",
+      },
+    });
+  }
+
+  /** Read the latest.json for a package from `{pkgName}/latest.json`. */
+  async getPackageLatest(pkgName: string): Promise<PackageIndex | undefined> {
+    const blob = this.#container.getBlockBlobClient(
+      normalizePath(join(pkgName, "latest.json")),
+    );
+    if (await blob.exists()) {
+      const response = await blob.download();
+      const body = await response.blobBody;
+      const existingContent = await body?.text();
+      if (existingContent) {
+        return JSON.parse(existingContent);
+      }
+    }
+    return undefined;
+  }
+
+  /** Write the latest.json for a package at `{pkgName}/latest.json`. */
+  async updatePackageLatest(pkgName: string, index: PackageIndex) {
+    const blob = this.#container.getBlockBlobClient(
+      normalizePath(join(pkgName, "latest.json")),
+    );
+    const content = JSON.stringify(index);
+    await blob.upload(content, content.length, {
+      blobHTTPHeaders: {
+        blobContentType: "application/json; charset=utf-8",
+      },
+    });
+  }
+
   async #uploadManifest(manifest: BundleManifest) {
     try {
       const blob = this.#container.getBlockBlobClient(

packages/http-client-csharp/eng/pipeline/publish.yml

@@ -64,6 +64,7 @@ extends:
           LanguageShortName: "csharp"
           HasNugetPackages: true
           CadlRanchName: "@typespec/http-client-csharp"
+          UploadPlaygroundBundle: true
           AdditionalInitializeSteps:
             - task: UseDotNet@2
               inputs:

packages/http-client-python/eng/pipeline/publish.yml

@@ -31,3 +31,4 @@ extends:
           CadlRanchName: "@typespec/http-client-python"
           EnableCadlRanchReport: false
           PythonVersion: "3.11"
+          UploadPlaygroundBundle: true

website/src/components/playground-component/import-map.ts

@@ -9,10 +9,40 @@
   imports: Record<string, string>;
 }
 
+const pkgsBaseUrl = "https://typespec.blob.core.windows.net/pkgs";
+
+async function fetchAdditionalPackageImports(
+  packageNames: readonly string[],
+): Promise<Record<string, string>> {
+  const imports: Record<string, string> = {};
+
+  const results = await Promise.allSettled(
+    packageNames.map(async (name) => {
+      const url = `${pkgsBaseUrl}/${name}/latest.json`;
+      const response = await fetch(url);
+      if (!response.ok) {
+        console.warn(`Failed to load latest index for ${name}: ${response.status}`);
+        return undefined;
+      }
+      return JSON.parse(await response.text()) as ImportMap;
+    }),
+  );
+
+  for (const result of results) {
+    if (result.status === "fulfilled" && result.value) {
+      Object.assign(imports, result.value.imports);
+    }
+  }
+
+  return imports;
+}
+
 export async function loadImportMap({
   latestVersion,
+  additionalPackages = [],
 }: {
   latestVersion: string;
+  additionalPackages?: readonly string[];
 }): Promise<VersionData> {
   const optionsScript = document.querySelector("script[type=playground-options]");
   if (optionsScript === undefined) {
@@ -24,14 +54,17 @@
   const parsed = new URLSearchParams(window.location.search);
 
   const requestedVersion = parsed.get("version");
-  const importMapUrl = `https://typespec.blob.core.windows.net/pkgs/indexes/typespec/${
+  const importMapUrl = `${pkgsBaseUrl}/indexes/typespec/${
     requestedVersion ?? latestVersion
   }.json`;
 
-  const response = await fetch(importMapUrl);
-  const content = await response.text();
+  const [mainResponse, additionalImports] = await Promise.all([
+    fetch(importMapUrl),
+    fetchAdditionalPackageImports(additionalPackages),
+  ]);
 
-  const importMap = JSON.parse(content);
+  const importMap: ImportMap = JSON.parse(await mainResponse.text());
+  Object.assign(importMap.imports, additionalImports);
 
   (window as any).importShim.addImportMap(importMap);
 

website/src/components/react-pages/playground.tsx

@@ -3,6 +3,11 @@ import { useEffect, useState, type ReactNode } from "react";
 import { FluentLayout } from "../fluent/fluent-layout";
 import { loadImportMap, type VersionData } from "../playground-component/import-map";
 
+const additionalPlaygroundPackages = [
+  "@typespec/http-client-csharp",
+  "@typespec/http-client-python",
+] as const;
+
 export const AsyncPlayground = ({
   latestVersion,
   fallback,
@@ -15,7 +20,10 @@ export const AsyncPlayground = ({
     WebsitePlayground: typeof import("../playground-component/playground").WebsitePlayground;
   }>(undefined as any);
   useEffect(() => {
-    Promise.all([loadImportMap({ latestVersion }), import("../playground-component/playground")])
+    Promise.all([
+      loadImportMap({ latestVersion, additionalPackages: additionalPlaygroundPackages }),
+      import("../playground-component/playground"),
+    ])
       .then((x) => setMod({ versionData: x[0] as any, WebsitePlayground: x[1].WebsitePlayground }))
       .catch((e) => {
         throw e;