Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a public way to access the breadcrumbs in JS code #9

Closed
Windvis opened this issue May 15, 2021 · 4 comments
Closed

Provide a public way to access the breadcrumbs in JS code #9

Windvis opened this issue May 15, 2021 · 4 comments
Labels
enhancement New feature or request

Comments

@Windvis
Copy link
Owner

Windvis commented May 15, 2021

BreadcrumbsService.items is a private API at the moment. It might be nice to make it public API so that a consuming app can access it directly in helpers / components without having to pass it in.

I think it's a nice thing to have, but I'm not sure about the naming of the public property yet.

A theorectical is-last helper that returns true if the breadcrumb is the last item can have the following basic implementation:

import { helper } from '@ember/component/helper';

export default helper(function isLast([breadcrumb, breadcrumbs]) {
  return breadcrumbs[breadcrumbs.length - 1] === breadcrumb;
});

And used like this:

{{#each (breadcrumbs) as |breadcrumb|}}
  <li>
    {{#if (not (is-last breadcrumb (breadcrumbs))}}
      <LinkTo @route={{breadcrumb.data.route}}>
        {{breadcrumb.title}}
      </LinkTo>
    {{else}}
      {{breadcrumb.title}}
    {{/if}}
  </li>
{{/each}}

If BreadcrumbsService.items was public API the DX could be improved:

import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';

export default class IsLastHelper extends Helper {
  @service('breadcrumbs') breadcrumbsService;
  compute([breadcrumb]) {
    let breadcrumbs = this.breadcrumbsService.items;
    return breadcrumbs[breadcrumbs.length - 1] === breadcrumb;
  }
}

Usage:

{{#each (breadcrumbs) as |breadcrumb|}}
  <li>
    {{#if (not (is-last breadcrumb)}}
      <LinkTo @route={{breadcrumb.data.route}}>
        {{breadcrumb.title}}
      </LinkTo>
    {{else}}
      {{breadcrumb.title}}
    {{/if}}
  </li>
{{/each}}
@Windvis Windvis added the enhancement New feature or request label May 15, 2021
@cah-brian-gantzler
Copy link

I was just about to write an issue in that the example code shown uses is-last and no implementation given on the readme. I see it here. If the above is done, I would suggest changing the is-last to is-last-crumb because is-last is way to generic a name for such a given specific purpose.

It may also be noted that https://github.com/DockYard/ember-composable-helpers#has-next is the not equivalent of the is-last and removes the need for the not in the above hbs.

items on the service may be private in theory, but there is no documentation notes on the service stating it is not public. I would suggest crumbs if you are looking for a name different than items.

I would also not re-export the service in the app directory and instead replace the service injections @service('EmberBreadcrumbTrail@breadcrumbs') breadcrumbsService; as this helps to avoid app namespace overrides

@Windvis
Copy link
Owner Author

Windvis commented May 29, 2021

I was just about to write an issue in that the example code shown uses is-last and no implementation given on the readme. I see it here. If the above is done, I would suggest changing the is-last to is-last-crumb because is-last is way to generic a name for such a given specific purpose.

I'm not planning on adding a helper like that to the addon. That's just an example of how this addon can be used. The docs mention it is a "custom" helper though, maybe I should change the wording to make that more clear?

Like you said, there are multiple ways to solve this already (and it's a generic problem as well). I actually think the {{each}} helper should expose the "is first" and "is last" data in some way (which it does in the vanilla Handlebars variant).

items on the service may be private in theory, but there is no documentation notes on the service stating it is not public. I would suggest crumbs if you are looking for a name different than items.

Exactly, the service isn't documented at all 😄 so it is considered private API. People who need it are going to use it anyway, even if explicitly marked private. I'm just waiting until I encounter valid use cases for this. The example in this issue isn't really a good one imo.

I would also not re-export the service in the app directory and instead replace the service injections @service('EmberBreadcrumbTrail@breadcrumbs') breadcrumbsService; as this helps to avoid app namespace overrides

Interesting, is that notation documented somewhere? The only reference I can find is this RFC which explicitly says it's going to be deprecated 😄. But anyway, your reasoning is that not reexporting it like makes it possible for apps to create a "breadcrumbs" service themselves? I don't think addons commonly tend to avoid that? "breadcrumbs" is also kind of specific, I doubt anyone will do that if they use this addon. I'll keep it in mind though.

@Windvis
Copy link
Owner Author

Windvis commented May 29, 2021

Closing this as my example isn't the greatest and people who need this can open a new issue with their use case.

@Windvis Windvis closed this as completed May 29, 2021
@cah-brian-gantzler
Copy link

Its is not documented as far as I can tell, but I found an addon using it, then I have put it in some other addons. Here is a PR in which it was added and the discussion involved rjwblue who confirmed its usage and availability for a surprising long time. Still dont know why it isnt documented. The RFC you posted says the current syntax is going to be deprecated, it is still going to be available, just the namespace (part before the @) will be a separate string.

Ember-yeti-table uses it at my suggestion, notice that only the main component is added to app, the sub components are not. I thought ember-bootrap was going to use it in some fashion but see they have not yet.

The use of namespace in components as <EmberStargate@Portal> serves as a great start to template imports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants