⚙️ Dynamic Routing via Data Functions (DF)

In WBC-Routes2, you can pass functions (as item) that return a route-ready object, array, or component structure.

This technique is powerful when your layout depends on:

• Runtime conditions
• Fetched data
• Environment or route params
• External libraries or dynamic values

---

🧠 Basic Function-based Routing

You can write inline arrow functions or methods returning a WBC structure:

{
  path: "/df/basic",
  name: "DFBasic",
  component: WBC,
  props: {
    item: () => ({
      comp: "VAlert",
      options: {
        type: "success",
        text: true,
        html: "This view was generated by a JavaScript function!"
      }
    })
  }
}

---

🔁 Reactive Runtime Data Example

Use functions to compute layout from a list of users or items:

{
  path: "/df/list",
  name: "DFUserList",
  component: WBC,
  props: {
    item: () => {
      const users = ["Alice", "Bob", "Charlie"];
      return {
        comp: "MD",
        options: {
          src: users.map(name => `- `{name}`).join("\\n")
        }
      };
    }
  }
}

📦 Imagine this list being fetched from an API — you just return whatever you need to render!

---

🧩 Mixed Logic and View in a Single Function

You can do complex branching and return anything the WBC understands:

{
  path: "/df/logic",
  name: "DFLogic",
  component: WBC,
  props: {
    item: () => {
      const isAdmin = true;
      return {
        comp: "VAlert",
        options: {
          type: isAdmin ? "info" : "warning",
          html: isAdmin ? "Welcome Admin" : "Access limited"
        }
      };
    }
  }
}

---

🔄 Using route.params in Functions

You can pass the route context into your function to access params, query, etc.

{
  path: "/df/param/:lang",
  name: "DFParam",
  component: WBC,
  props: (route) => {
    const lang = route.params.lang;
    return {
      item: () => ({
        comp: "MD",
        options: {
          src: `## Language detected: **`{lang}**`
        }
      })
    };
  }
}

🛠 This pattern is excellent for multilingual setups and conditionally rendering per-route.

---

🧵 Combine Data Function with Slots, Events, and Styles

{
  path: "/df/complex",
  name: "DFComplex",
  component: WBC,
  props: {
    item: () => ({
      comp: "VCard",
      options: {
        class: "pa-5",
        style: { backgroundColor: "#E0F7FA" },
        html: {
          comp: "VBtn",
          options: {
            html: "Click Me",
            color: "teal",
            on: {
              click: () => alert("DF-generated button clicked!")
            }
          }
        }
      }
    })
  }
}

---

🧪 Tip: Use init inside Your Return

Return an object with init to run JavaScript before rendering:

{
  path: "/df/init",
  name: "DFInit",
  component: WBC,
  props: {
    item: () => ({
      comp: "div",
      init: () => console.log("This ran before rendering!"),
      options: {
        html: "Open your console!"
      }
    })
  }
}

---

✅ Summary

Feature	Supported
Function returns JSX-like WBC	✅
Reactive logic inside item	✅
Use of route params or query	✅
Support for async wrappers (soon)	🧪 Planned
Dynamic styling and events	✅