AlexxNB / tinro

Highly declarative, tiny, dependency free router for Svelte's web applications.
MIT License
669 stars 30 forks source link

Feature request - Route independent breadcrumbs #51

Closed sourcegr closed 3 years ago

sourcegr commented 3 years ago

The current implementation of the breadcrumbs feature is not very useful since it is available only in the matched route.

For example, the following - trivial - layout does not make any sense since the <Breadcrumb> is outside the <Route> components. Is there something I am missing?

Can I get the computed breadcrumb - for example for the url /user/details right inside the <Breadcrumb /> Component?

<App>
  <SideBar />
  <Breadcrumb/>
  <Route path="*" breadcrumb="Home">
    <Route path="/dashboard" breadcrumb="Dashboard">
      Dashboard here...
    </Route>
    <Route path="/user/*" breadcrumb="user">
      <Route path="/" breadcrumb="details">
        User Details here...
      </Route>
      <Route path="/edit" breadcrumb="edit">
        Edit the user here...
      </Route>
    </Route>
  </Route>
</App>

It would be useful if the lib exports a breadcrumb array...

AlexxNB commented 3 years ago

It is impossible to export a breadcrumbs array, because breadcrumbs are depend on context of each matched route. In some cases may be matched not only one route and each has its own breadcrumbs set.

But you have some options. For example, your <Breadcrumbs /> may export method like setBreadcrumbs(bcarray). Call it on every page mount. You may create wrapper for Route component to avoid manual calling this method on every page.

sourcegr commented 3 years ago

In some cases may be matched not only one route and each has its own breadcrumbs set

Well it could, but IMO such a use would be a misuse of the BreadCrumb concept.

Anyway, please have a look at this fork, and if you think there is space for it, implement as you like.

the router object now contains a breadcrumb store, with the breadcrumb

AlexxNB commented 3 years ago

Synthetic example:

<script>
    import {Route} from "tinro";
</script>

<Route breadcrumb="Home">
    <Route path="/subpage" breadcrumb="Subpage">Subpage</Route>
</Route>

<Route breadcrumb="Home2">
    <Route path="/subpage" breadcrumb="Subpage2">Subpage2</Route>
</Route>

This is simplified and not from real world maybe, but this is a valid tinro composition.

What should be in your router.breadcrumb store in this case, when URL will be '/subpage'?

AlexxNB commented 3 years ago

See an example how to use breadcrumbs in layouts: https://svelte.dev/repl/8de50a09b67540b3ba21e5914efb6d86?version=3.32.1

sourcegr commented 3 years ago

The "synthetic example" in your previous comment is exactly what I meant when I said that this would be a misuse of the Breadcrumb concept. There is no real world scenarios where two distinct breadcrumbs are needed for the same URL. It does not make sense.

Anyway, thanks for your attention

AlexxNB commented 3 years ago

It is important that users can do it. You and I may not know how, but somebody m