Load hello world sample by default in the playground

common/changes/@typespec/playground/playground-hello-world-default_2023-12-11-23-01.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Add a new `defaultSample` option to the standalone playground that will load this sample automatically if no sample or content was specified in the playground state",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}

packages/playground-website/e2e/ui.e2e.ts

@@ -23,7 +23,7 @@ test.describe("playground UI tests", () => {
   });
 
   test("save code with ctrl/cmd+S", async ({ page }) => {
-    await page.goto(host);
+    await page.goto(`${host}/?c=`);
     const typespecEditorContainer = page.locator("_react=TypeSpecEditor");
     await typespecEditorContainer.click();
     await typespecEditorContainer.pressSequentially("op sharedCode(): string;");

packages/playground-website/samples/build.js

@@ -7,6 +7,10 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(__dirname, "..");
 
 await buildSamples_experimental(packageRoot, resolve(__dirname, "dist/samples.js"), {
+  "Hello World": {
+    filename: "samples/hello.tsp",
+    preferredEmitter: "@typespec/openapi3",
+  },
   "API versioning": {
     filename: "samples/versioning.tsp",
     preferredEmitter: "@typespec/openapi3",

packages/playground-website/samples/hello.tsp

@@ -0,0 +1,11 @@
+import "@typespec/http";
+
+@service
+namespace Hello.World;
+
+model World {
+  planet: string;
+  age: int32;
+}
+
+op hello(): World;

packages/playground-website/src/index.ts

@@ -13,4 +13,5 @@ export const TypeSpecPlaygroundConfig = {
     "@typespec/protobuf",
   ],
   samples,
+  defaultSample: "Hello World" satisfies keyof typeof samples,
 } as const;

packages/playground/src/react/standalone.tsx

@@ -29,6 +29,9 @@ export interface ReactPlaygroundConfig extends Partial<PlaygroundProps> {
   readonly importConfig?: LibraryImportOptions;
   /** Content to show while the playground data is loading(Libraries) */
   readonly fallback?: ReactNode;
+
+  /** If no sample or other code is said to be loaded in the playground state load this sample instead. */
+  readonly defaultSample?: string;
 }
 
 interface StandalonePlaygroundContext {
@@ -85,7 +88,10 @@ export const StandalonePlayground: FunctionComponent<ReactPlaygroundConfig> = (c
         defaultContent: context.initialState.content,
         defaultEmitter: context.initialState.emitter ?? config.defaultEmitter,
         defaultCompilerOptions: context.initialState.options,
-        defaultSampleName: context.initialState.sampleName,
+        defaultSampleName:
+          context.initialState.sampleName ?? context.initialState.content === undefined
+            ? config.defaultSample
+            : undefined,
       },
     [context]
   );