support for nest oneOf and anyOf

Author: christophbuehler

fixtures/schema-with-nested-any-of.json

@@ -0,0 +1,58 @@
+{
+  "type": "object",
+  "properties": {
+    "person": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "details": {
+          "anyOf": [
+            {
+              "type": "object",
+              "properties": {
+                "address": {
+                  "type": "string"
+                },
+                "age": {
+                  "type": "number"
+                }
+              },
+              "required": ["address"]
+            },
+            {
+              "type": "object",
+              "properties": {
+                "hobbies": {
+                  "type": "array",
+                  "items": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "object",
+                        "properties": {
+                          "hobbyName": {
+                            "type": "string"
+                          },
+                          "duration": {
+                            "type": "number"
+                          }
+                        },
+                        "required": ["hobbyName", "duration"]
+                      }
+                    ]
+                  }
+                }
+              },
+              "required": ["hobbies"]
+            }
+          ]
+        }
+      },
+      "required": ["name", "details"]
+    }
+  }
+}

fixtures/schema-with-nested-one-of.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "person": {
+      "type": "object",
+      "oneOf": [
+        {
+          "properties": {
+            "student": {
+              "type": "object",
+              "oneOf": [
+                {
+                  "properties": {
+                    "level": {
+                      "enum": [
+                        "undergraduate",
+                        "postgraduate"
+                      ]
+                    },
+                    "course": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "level",
+                    "course"
+                  ]
+                },
+                {
+                  "properties": {
+                    "partTime": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "partTime"
+                  ]
+                }
+              ]
+            }
+          },
+          "required": [
+            "student"
+          ]
+        },
+        {
+          "properties": {
+            "employee": {
+              "type": "object",
+              "properties": {
+                "position": {
+                  "type": "string"
+                },
+                "department": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "position",
+                "department"
+              ]
+            }
+          },
+          "required": [
+            "employee"
+          ]
+        }
+      ]
+    }
+  },
+  "required": [
+    "person"
+  ]
+}

index.html

@@ -10,6 +10,7 @@
     <script type="module" src="/src/any-of-element.ts"></script>
     <script type="module" src="/src/body-element.ts"></script>
     <script type="module" src="/src/ui/checkbox-group-element.ts"></script>
+    <script type="module" src="/src/ui/checkbox-element.ts"></script>
     <script type="module" src="/src/ui/string-element.ts"></script>
     <script type="module" src="/src/ui/single-dropdown-element.ts"></script>
     <script type="module" src="/src/ui/number-element.ts"></script>
@@ -20,9 +21,18 @@
         const el = document.createElement("json-ui-element");
 
         Object.assign(el, {
-          schema: await (await fetch("./fixtures/coa-schema.json")).json(),
+          schema: await (
+            await fetch("./fixtures/schema-with-nested-one-of.json")
+          ).json(),
           path: location.hash.replaceAll("/", ".").slice(1),
-          value: JSON.parse(localStorage.getItem("JSON_UI_VALUE")),
+          value: {
+            person: {
+              student: {
+                partTime: true,
+              },
+            },
+          },
+          // value: JSON.parse(localStorage.getItem("JSON_UI_VALUE")),
         });
 
         el.addEventListener("change", (e) => {

src/any-of-element.ts

@@ -11,9 +11,6 @@ export class AnyOfElement extends LitElement {
   @property({ type: Object })
   schema!: JSONSchema7;
 
-  @property({ type: String })
-  path!: string;
-
   @property({ type: Array })
   value?: number[];
 
@@ -26,14 +23,7 @@ export class AnyOfElement extends LitElement {
   }
 
   render() {
-    const options = anyOfOptions(
-      this.schema!,
-      this.path!,
-      this.value ?? []
-    )?.map((option) => option.title);
-
-    console.log({ options }, this.schema, this.path, this.value);
-
+    const options = anyOfOptions(this.schema);
     return options
       ? html`
           <checkbox-group-element

src/body-element.ts

@@ -16,7 +16,7 @@ import { humanizeKey, humanizeValue } from "./utils/humanize";
 import { choose } from "lit/directives/choose.js";
 import { when } from "lit/directives/when.js";
 import { isUndefined } from "lodash";
-import { navigate } from "./utils/path";
+import { navigateSchema } from "./utils/path";
 
 /**
  * The body represents the main content of the JSON UI.
@@ -54,6 +54,7 @@ export class BodyElement extends LitElement {
           ["string", () => this.renderPrimitive("string")],
           ["number", () => this.renderPrimitive("string")],
           ["enum", () => this.renderPrimitive("string")],
+          ["boolean", () => this.renderPrimitive("boolean")],
         ],
         () => html`Unknown type <strong>${type}</strong>.`
       )}
@@ -69,12 +70,12 @@ export class BodyElement extends LitElement {
   }
 
   private renderPrimitive(
-    type: "string" | "number" | "enum",
+    type: "string" | "number" | "enum" | "boolean",
     key?: string | number,
     skipHeader = false
   ) {
     const value = !isUndefined(key) ? this.value?.[key] : this.value;
-    const schema = navigate(this.schema!, key);
+    const schema = navigateSchema(this.schema!, key);
     return html`<label class="flex flex-col gap-2 w-full">
       ${when(!skipHeader && key, () =>
         renderLabel(String(key), this.required.includes(String(key)))
@@ -109,6 +110,14 @@ export class BodyElement extends LitElement {
             ></single-dropdown-element>`;
           },
         ],
+        [
+          "boolean",
+          () => html`<checkbox-element
+            @change=${dispatchChange(this, String(key ?? ""))}
+            .value=${value}
+            .label=${humanizeKey(String(key))}
+          ></checkbox-element>`,
+        ],
       ])}
     </label>`;
   }
@@ -129,8 +138,9 @@ export class BodyElement extends LitElement {
               ["string", () => this.renderPrimitive("string", key)],
               ["number", () => this.renderPrimitive("number", key)],
               ["enum", () => this.renderPrimitive("enum", key)],
+              ["boolean", () => this.renderPrimitive("boolean", key, true)],
             ],
-            () => html`<label class="inline-flex flex-col gap-2"
+            () => html`<label class="w-full inline-flex flex-col gap-2"
               >${renderLabel(key, this.required.includes(key))}
               ${this.renderValuePreview(key, value)}
             </label>`

src/constants.ts

@@ -3,6 +3,8 @@ import { JSONSchema7TypeName } from "json-schema";
 export const PROPERTIES_KEY = "properties";
 export const REQUIRED_KEY = "required";
 export const REF_KEY = "$ref";
+export const ANY_OF_KEY = "anyOf";
+export const ANY_OF_REF_KEY = "$ref:anyOf";
 
 export const PATH_SEPARATOR = ".";
 

src/json-ui-element.ts

@@ -4,7 +4,7 @@ import styles from "./index.css?inline";
 import { resolveRefs } from "./parser/resolve-refs";
 import { allOf } from "./parser/all-of";
 import { JSONSchema7 } from "json-schema";
-import { joinPaths, navigate } from "./utils/path";
+import { joinPaths, navigateSchema } from "./utils/path";
 import { inferOneOfOption, oneOf } from "./parser/one-of";
 import { anyOf, inferAnyOfOptions } from "./parser/any-of";
 import { get, isEmpty, isNull, isUndefined, set } from "lodash";
@@ -82,7 +82,9 @@ export class JsonUiElement extends LitElement {
     }
 
     console.debug(
-      `🚀 [DEBUG] Performing a level ${updateLevel} schema update.`
+      `${
+        ["🔴", "🟠", "🟡", "🟢"][updateLevel]
+      } [DEBUG] Performing a level ${updateLevel} schema update.`
     );
 
     if (updateLevel === 0) {
@@ -97,9 +99,10 @@ export class JsonUiElement extends LitElement {
     if (updateLevel <= 1) {
       this.dispatchEvent(new CustomEvent("navigate", { detail: this.path }));
 
-      const navigatedSchema = navigate(
+      const navigatedSchema = navigateSchema(
         this.resolvedSchemas.resolvedAllOf,
-        this.path
+        this.path,
+        this.value
       );
 
       if (isUndefined(navigatedSchema)) {
@@ -123,7 +126,6 @@ export class JsonUiElement extends LitElement {
 
       this.anyOfIndices = inferAnyOfOptions(
         this.resolvedSchemas.resolvedOneOf,
-        this.path,
         this.resolvedValue
       );
     }
@@ -151,9 +153,8 @@ export class JsonUiElement extends LitElement {
   }
 
   render() {
-    console.log("RENDER", this.schema);
-    const { resolvedAnyOf, resolvedAllOf, navigated, resolvedOneOf } =
-      this.resolvedSchemas;
+    console.debug(`🧠 [DEBUG] Rendering JSON UI.`);
+    const { resolvedAnyOf, navigated, resolvedOneOf } = this.resolvedSchemas;
 
     return html`
       <div class="grid grid-cols-1 gap-8">
@@ -168,8 +169,7 @@ export class JsonUiElement extends LitElement {
         html`<any-of-element
           @change=${(ev: CustomEvent<ChangeEventDetails<number[]>>) =>
             (this.anyOfIndices = ev.detail.value)}
-          .schema=${resolvedAllOf}
-          .path=${this.path}
+          .schema=${navigated}
           .value=${this.anyOfIndices}
         ></any-of-element>`}
 
@@ -227,9 +227,8 @@ export class JsonUiElement extends LitElement {
 
   private renderErrors() {
     const errors = this.ajvValidateFn?.errors ?? [];
-    console.log(errors);
     return html`
-      <div class="flex flex-col p-8 ring-2 ring-red-500 gap-4">
+      <div class="hidden flex flex-col p-8 ring-2 ring-red-500 gap-4">
         ${errors.map(
           (e) =>
             html`<div class="text-red-500 flex flex-col">

src/parser/any-of.spec.ts

@@ -11,14 +11,6 @@ test("anyOf applied correctly", async () => {
 test("anyOf options parsed correctly", async () => {
   const schema = (await import("../../fixtures/schema-with-any-of.json"))
     .default as unknown as JSONSchema7;
-  const result = anyOfOptions(schema, "", []);
-  expect(result).toMatchSnapshot();
-});
-
-test("selected anyOf options parsed correctly", async () => {
-  const schema = (await import("../../fixtures/schema-with-any-of.json"))
-    .default as unknown as JSONSchema7;
-  const selectedIndices = [0, 1];
-  const result = anyOfOptions(schema, "", selectedIndices);
+  const result = anyOfOptions(schema);
   expect(result).toMatchSnapshot();
 });