feat: change page title to match the openapi spec (#3)

Author: ThomasRooney

cmd/wasm/functions.go

@@ -4,6 +4,7 @@ package main
 
 import (
 	"fmt"
+	"github.com/speakeasy-api/jsonpath/pkg/jsonpath"
 	"github.com/speakeasy-api/jsonpath/pkg/overlay"
 	"gopkg.in/yaml.v3"
 	"syscall/js"
@@ -33,6 +34,39 @@ func CalculateOverlay(originalYAML, targetYAML string) (string, error) {
 	return string(out), nil
 }
 
+func GetInfo(originalYAML string) (string, error) {
+	var orig yaml.Node
+	err := yaml.Unmarshal([]byte(originalYAML), &orig)
+	if err != nil {
+		return "", fmt.Errorf("failed to parse source schema: %w", err)
+	}
+
+	titlePath, err := jsonpath.NewPath("$.info.title")
+	if err != nil {
+		return "", err
+	}
+	versionPath, err := jsonpath.NewPath("$.info.version")
+	if err != nil {
+		return "", err
+	}
+	descriptionPath, err := jsonpath.NewPath("$.info.version")
+	if err != nil {
+		return "", err
+	}
+	toString := func(node []*yaml.Node) string {
+		if len(node) == 0 {
+			return ""
+		}
+		return node[0].Value
+	}
+
+	return `{
+    "title": "` + toString(titlePath.Query(&orig)) + `",
+    "version": "` + toString(versionPath.Query(&orig)) + `",
+    "description": "` + toString(descriptionPath.Query(&orig)) + `"
+}`, nil
+}
+
 func ApplyOverlay(originalYAML, overlayYAML string) (string, error) {
 	var orig yaml.Node
 	err := yaml.Unmarshal([]byte(originalYAML), &orig)
@@ -111,5 +145,13 @@ func main() {
 		return ApplyOverlay(args[0].String(), args[1].String())
 	}))
 
+	js.Global().Set("GetInfo", promisify(func(args []js.Value) (string, error) {
+		if len(args) != 1 {
+			return "", fmt.Errorf("GetInfo: expected 1 arg, got %v", len(args))
+		}
+
+		return GetInfo(args[0].String())
+	}))
+
 	<-make(chan bool)
 }

web/src/Playground.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import "./App.css";
 import { Editor } from "./components/Editor.tsx";
 import { editor } from "monaco-editor";
-import { ApplyOverlay, CalculateOverlay } from "./bridge.ts";
+import { ApplyOverlay, CalculateOverlay, GetInfo } from "./bridge.ts";
 import { Alert, PageHeader } from "@speakeasy-api/moonshine";
 import { blankOverlay, petstore } from "./defaults.ts";
 import { useAtom } from "jotai";
@@ -82,6 +82,22 @@ function Playground() {
     [changed, original],
   );
 
+  useEffect(() => {
+    const tryHandlePageTitle = async () => {
+      try {
+        const info = await GetInfo(original);
+        const { title, version } = JSON.parse(info);
+        const pageTitle = `${title} ${version} | Speakeasy OpenAPI Overlay Playground`;
+        if (document.title !== pageTitle) {
+          document.title = pageTitle;
+        }
+      } catch (e: unknown) {
+        console.error(e);
+      }
+    };
+    tryHandlePageTitle();
+  }, [original]);
+
   if (!ready) {
     return "";
   }

web/src/assets/wasm/lib.wasm

@@ -60,6 +60,24 @@ export type CalculateOverlayMessage = {
       };
 };
 
+export type GetInfoMessage = {
+  Request: {
+    type: "GetInfo";
+    payload: {
+      openapi: string;
+    };
+  };
+  Response:
+    | {
+        type: "GetInfoResult";
+        payload: string;
+      }
+    | {
+        type: "GetInfoError";
+        error: string;
+      };
+};
+
 export type ApplyOverlayMessage = {
   Request: {
     type: "ApplyOverlay";
@@ -106,3 +124,13 @@ export function ApplyOverlay(
     supercede,
   );
 }
+
+export function GetInfo(openapi: string, supercede = false): Promise<string> {
+  return sendMessage(
+    {
+      type: "GetInfo",
+      payload: { openapi },
+    } satisfies GetInfoMessage["Request"],
+    supercede,
+  );
+}

web/src/bridge.ts

@@ -1,11 +1,16 @@
 // openapi.web.worker.ts
 import speakeasyWASM from "./assets/wasm/lib.wasm?url";
 import "./assets/wasm/wasm_exec.js";
-import type { CalculateOverlayMessage, ApplyOverlayMessage } from "./bridge";
+import type {
+  CalculateOverlayMessage,
+  ApplyOverlayMessage,
+  GetInfoMessage,
+} from "./bridge";
 
 const _wasmExecutors = {
   CalculateOverlay: (..._: any): any => false,
   ApplyOverlay: (..._: any): any => false,
+  GetInfo: (..._: any): any => false,
 } as const;
 
 type MessageHandlers = {
@@ -21,6 +26,9 @@ const messageHandlers: MessageHandlers = {
   ApplyOverlay: async (payload: ApplyOverlayMessage["Request"]["payload"]) => {
     return exec("ApplyOverlay", payload.source, payload.overlay);
   },
+  GetInfo: async (payload: GetInfoMessage["Request"]["payload"]) => {
+    return exec("GetInfo", payload.openapi);
+  },
 };
 
 let instantiated = false;