📦 JSON-Based Routing in WBC-Routes2

JSON is a universal format for defining structured data — and WBC-Routes2 makes it routeable!

By passing a JSON object to a route's item prop, you can dynamically render Vue components, markdown, layout structures, and even interactive behavior, all from data.

---

🔹 Basic JSON Object Rendering

You can route to a static JSON object like this:

{
  path: "/json/basic",
  name: "JsonBasic",
  component: WBC,
  props: {
    item: {
      comp: "JsonViewer",
      options: {
        value: { name: "Wissem", age: 30, active: true }
      }
    }
  }
}

✅ The JsonViewer global component will render your object with toggles, colorized keys, and nested display.

---

🔸 Render Lists from JSON

Pass JSON as arrays or objects into a list-like display using Markdown or HTML renderers.

{
  path: "/json/list",
  name: "JsonList",
  component: WBC,
  props: {
    item: {
      comp: "MD",
      options: {
        html: "<~ol>",
        src: "- Item 1\n- Item 2\n- Item 3"
      }
    }
  }
}

🧩 Combine this with interactive buttons or file content to build dashboards on-the-fly.

---

🔸 JSON with Events

Inject interactivity through event bindings in the options.on object.

{
  path: "/json/event",
  name: "JsonEvent",
  component: WBC,
  props: {
    item: {
      comp: "VBtn",
      dive: true,
      options: {
        class: "success",
        html: "Click me",
        on: {
          click: that => () => {
            alert("Hello from JSON-driven route!");
          }
        }
      }
    }
  }
}

💡 You’re not limited to read-only data. Full event lifecycles are supported.

---

🔁 Dynamic JSON Mapped to Layouts

Here's a full Vue layout mapped from structured JSON:

{
  path: "/json/layout",
  name: "JsonLayout",
  component: WBC,
  props: {
    item: [
      "<~VContainer|pa-5 grey lighten-4>",
      "<VRow|justify-center>",
      {
        comp: "VCol",
        options: {
          cols: 6,
          html: {
            comp: "VAlert",
            options: {
              type: "info",
              text: true,
              html: "Rendered from JSON layout"
            }
          }
        }
      }
    ]
  }
}

📐 You can control columns, rows, colors, spacing, and more — all from JSON.

---

🧪 Reactive JSON with dive

To make the JSON reactive (data-bound), use:

{
  dive: true,
  comp: "div",
  options: {
    html: "Your score is: ``{this.score}",
    on: {
      mounted: that => {
        that.score = 42;
      }
    }
  }
}

🔁 Now any property you assign inside that becomes available to interpolate in your text and children components.

---

✅ Summary

Feature	Supported
JSON to Vue Layouts	✅
Dynamic Event Binding	✅
Reactive Properties	✅
File + JSON Mix	✅
Multi-language JSON	✅

---