fix: add json formatting formatting and lang discrimination

cmd/wasm/functions.go

@@ -181,16 +181,25 @@ type IncompleteOverlayErrorMessage struct {
 }
 
 func applyOverlayJSONPathIncomplete(result []*yaml.Node, node *yaml.Node) (string, error) {
-	yamlResult, err := yaml.Marshal(result)
+	var data interface{}
+	if len(result) == 1 {
+		data = result[0]
+	} else {
+		data = result
+	}
+
+	yamlResult, err := yaml.Marshal(data)
 	if err != nil {
 		return "", err
 	}
+
 	out, err := json.Marshal(IncompleteOverlayErrorMessage{
 		Type:   "incomplete",
 		Line:   node.Line,
 		Col:    node.Column,
 		Result: string(yamlResult),
 	})
+
 	return string(out), err
 }
 

web/src/Playground.tsx

@@ -25,6 +25,7 @@ import {
 } from "react-resizable-panels";
 import posthog from "posthog-js";
 import { useDebounceCallback, useMediaQuery } from "usehooks-ts";
+import { formatDocument, guessDocumentLanguage } from "./lib/utils";
 
 const Link = ({ children, href }: { children: ReactNode; href: string }) => (
   <a
@@ -59,6 +60,7 @@ function Playground() {
   const [ready, setReady] = useState(false);
 
   const original = useRef(petstore);
+  const originalLang = useRef<DocumentLanguage>("yaml");
   const changed = useRef("");
   const [changedLoading, setChangedLoading] = useState(false);
   const [applyOverlayMode, setApplyOverlayMode] = useState<
@@ -97,14 +99,14 @@ function Playground() {
         );
         if (response.type == "success") {
           setApplyOverlayMode("original+overlay");
-          changed.current = response.result || "";
+          changed.current = formatDocument(response.result);
           setError("");
           setOverlayMarkers([]);
           const info = await GetInfo(changed.current, false);
           tryHandlePageTitle(JSON.parse(info));
         } else if (response.type == "incomplete") {
           setApplyOverlayMode("jsonpathexplorer");
-          changed.current = response.result || "";
+          changed.current = formatDocument(response.result);
           setError("");
           setOverlayMarkers([]);
         } else if (response.type == "error") {
@@ -206,7 +208,7 @@ function Playground() {
             false,
           );
           if (changedNew.type == "success") {
-            changed.current = changedNew.result;
+            changed.current = formatDocument(changedNew.result);
           }
         } catch (e: unknown) {
           if (e instanceof Error) {
@@ -226,6 +228,7 @@ function Playground() {
       try {
         setResultLoading(true);
         original.current = value || "";
+        originalLang.current = guessDocumentLanguage(original.current);
         const res = await CalculateOverlay(
           value || "",
           changed.current,
@@ -419,6 +422,7 @@ function Playground() {
                 title="Original"
                 index={0}
                 maxOnClick={maxLayout}
+                language={originalLang.current}
               />
             </div>
           </Panel>
@@ -438,6 +442,7 @@ function Playground() {
                 title={appliedPanelTitle}
                 index={1}
                 maxOnClick={maxLayout}
+                language={originalLang.current}
               />
             </div>
           </Panel>
@@ -453,6 +458,7 @@ function Playground() {
                 title={"Overlay"}
                 index={2}
                 maxOnClick={maxLayout}
+                language="yaml"
               />
             </div>
           </Panel>

web/src/components/Editor.tsx

@@ -28,6 +28,7 @@ export interface EditorComponentProps {
     value: string | undefined,
     ev: editor.IModelContentChangedEvent,
   ) => void;
+  language: DocumentLanguage;
 }
 
 const minLoadingTime = 150;
@@ -216,7 +217,7 @@ export function Editor(props: EditorComponentProps) {
         originalModelPath={encodedTitle + "/original"}
         modifiedModelPath={encodedTitle + "/modified"}
         theme={"vscode-dark"}
-        language="yaml"
+        language={props.language}
         options={options}
       />
     </div>

web/src/lib/utils.ts

@@ -1,6 +1,24 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function guessDocumentLanguage(content: string): DocumentLanguage {
+  try {
+    JSON.parse(content);
+    return "json";
+  } catch {
+    return "yaml";
+  }
+}
+
+export function formatDocument(doc: string, indentWidth: number = 2): string {
+  const docLang = guessDocumentLanguage(doc);
+
+  if (docLang === "json")
+    return JSON.stringify(JSON.parse(doc), null, indentWidth);
+
+  return doc;
 }

web/src/types.d.ts

@@ -7,3 +7,5 @@ declare class Go {
   mem: DataView;
   run(instance: WebAssembly.Instance): Promise<void>;
 }
+
+declare type DocumentLanguage = "json" | "yaml";