Fixed #84 Output paths

Author: ashphy

package-lock.json

@@ -21,11 +21,12 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "jotai": "^2.11.0",
-    "jsonpath-js": "^0.1.0",
+    "jsonpath-js": "^0.2.0",
     "jsonpath-plus": "^10.3.0",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",

package.json

@@ -1,9 +1,15 @@
 import { useJSONPath } from "@/hooks/use-jsonpath";
 import Editor from "@monaco-editor/react";
 
-export const Result = () => {
+interface ResultProps {
+  outputPathMode: boolean;
+}
+
+export const Result = ({ outputPathMode }: ResultProps) => {
   const { result } = useJSONPath();
-  const text = result.isValid ? JSON.stringify(result.result, null, 2) : "[]";
+  const text = result.isValid
+    ? JSON.stringify(outputPathMode ? result.paths : result.values, null, 2)
+    : "[]";
 
   return (
     <Editor

src/components/editor/result.tsx

@@ -1,8 +1,12 @@
 import { Query } from "./query";
 import { JSONEditor } from "./editor/json-editor";
 import { Result } from "./editor/result";
+import { OutputPathSwitch } from "./output-path-switch";
+import { useState } from "react";
 
 export const JSONPathOnlineEvaluator = () => {
+  const [outputPathMode, setOutputPathMode] = useState(false);
+
   return (
     <div className="w-full flex flex-col gap-4">
       <Query />
@@ -13,10 +17,13 @@ export const JSONPathOnlineEvaluator = () => {
           <JSONEditor />
         </div>
         <div>
-          <h2 className="py-1 text-xl text-joe-green-950">
-            Evaluation Results
-          </h2>
-          <Result />
+          <div className="flex justify-between">
+            <h2 className="py-1 text-xl text-joe-green-950">
+              Evaluation Results
+            </h2>
+            <OutputPathSwitch onChange={setOutputPathMode} />
+          </div>
+          <Result outputPathMode={outputPathMode} />
         </div>
       </div>
     </div>

src/components/online-evaluator.tsx

@@ -0,0 +1,18 @@
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+
+interface Props {
+  onChange?: (pathOutput: boolean) => void;
+}
+
+export const OutputPathSwitch = ({ onChange }: Props) => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="output-paths"
+        onCheckedChange={(checked) => onChange?.(checked)}
+      />
+      <Label htmlFor="output-paths">Output Paths</Label>
+    </div>
+  );
+};

src/components/output-path-switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

src/components/ui/switch.tsx

@@ -1,19 +1,21 @@
 import { useAtom, useAtomValue } from "jotai";
 import { atom } from "jotai";
 import SampleJsonFile from "../assets/sample.json?raw";
-import { JSONValue } from "@/types/json";
-import { Engine } from "@/types/engine";
+import type { JSONValue } from "@/types/json";
+import type { Engine } from "@/types/engine";
 import { evalJsonPath } from "@/lib/jsonpath";
 
 type JSONPathResult =
   | {
       isValid: true;
-      result: JSONValue;
+      values: JSONValue;
+      paths: string[];
       error: undefined;
     }
   | {
       isValid: false;
-      result: undefined;
+      values: undefined;
+      paths: undefined;
       error: string;
     };
 
@@ -51,21 +53,23 @@ const resultAtom = atom<JSONPathResult>((get) => {
   const query = get(queryAtom).trim();
 
   try {
-    const result = evalJsonPath(
+    const { values, paths } = evalJsonPath(
       get(engineAtom),
       jsonDocument.error === undefined ? jsonDocument.json : {},
       query
     );
 
     return {
       isValid: true,
-      result,
+      values: values,
+      paths: paths,
       error: undefined,
     };
   } catch (error) {
     return {
       isValid: false,
-      result: undefined,
+      values: undefined,
+      paths: undefined,
       error: String(error),
     };
   }

src/hooks/use-jsonpath.ts

@@ -29,51 +29,52 @@ h3 {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 161 0% 0%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.75rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

src/index.css

@@ -1,22 +1,38 @@
-import { Engine } from "@/types/engine";
+import type { Engine } from "@/types/engine";
 import { JSONPath } from "jsonpath-plus";
-import { JSONValue } from "@/types/json";
+import type { JSONValue } from "@/types/json";
 import { JSONPathJS } from "jsonpath-js";
 
 export const evalJsonPath = (
   engine: Engine,
   document: JSONValue,
   query: string
-) => {
+): { values: JSONValue[]; paths: string[] } => {
   switch (engine) {
-    case "rfc9535":
-      return new JSONPathJS(query).find(document);
-    case "jsonpath-plus":
-      return JSONPath({
+    case "rfc9535": {
+      const result = new JSONPathJS(query).paths(document);
+      return {
+        values: result.map((path) => path.value),
+        paths: result.map((path) => path.path),
+      };
+    }
+    case "jsonpath-plus": {
+      const results = JSONPath({
         json: document,
         path: query,
-      });
+        resultType: "all",
+      }) as {
+        path: string;
+        value: JSONValue;
+      }[];
+
+      return {
+        values: results.map((result) => result.value),
+        paths: results.map((result) => result.path),
+      };
+    }
     default:
       engine satisfies never;
+      throw new Error(`Unknown engine: ${engine}`);
   }
 };