intercom/ember-href-to

:link: A lightweight alternative to {{link-to}}

ember-href-to

A lightweight alternative to {{link-to}}. No components, no class bindings - just a bound anchor href and a click handler.

Why use it?

Every time you use a {{link-to}}, you create a component. This is usually fine, but in cases where you're creating many of these, performance can suffer. {{href-to}} simply creates a URL and is 12x faster than {{link-to}} in Ember 1.13.4.

Questions? Ping me @gavinjoyce

Installation

This is an Ember CLI addon, to install:

ember install ember-href-to

Supported Ember Versions

• v5.0.1. supports Ember versions >=3.1 & <3.27
• It does not work in apps using Ember's modernized LinkTo, which was introduced in Ember 3.27 and built using Glimmer components. See this comment for more info.

Usage Instructions

{{href-to}} has the same interface as {{link-to}}, you can use it to link to static and dynamic routes in your ember application:

<a href="{{href-to 'index'}}">Go Home</a>
<a href="{{href-to 'contacts.contact' contact}}">View Contact 1</a>
<a href="{{href-to 'contacts.contact' 2}}">View Contact 2</a>
<a href="{{href-to 'contact-us' (query-params section='first')}}"
  >You can also use query params</a
>
<a href="{{href-to 'contact-us'}}#first"
  >You can also use fragment identifiers</a
>
<a href="{{href-to 'contact-us'}}" data-href-to-ignore>
  If you have a catchall route (this.route('catchall', { path: "/*" })), you
  need to add the attribute "data-href-to-ignore", otherwise you will always
  match it
</a>

As {{href-to}} simply generates a URL, you won't get automatic active class bindings as you do with {{link-to}}. Clicking on a {{href-to}} URL will trigger a full router transition though:

Development Instructions

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

ember-href-to's Issues

I did a snippet for sublimetext

I use this helper that often that I created a href snipped scoped to handlebars files to expand to a link using {{href-to}}.

Just sharing in case you want to mention it or something.

https://gist.github.com/cibernox/307edcf48a3000acef8f

1.9.0 not showing in github releases?

Wanted to know something about the update…

1.10 doesn't recognize URLs which have a rootUrl

We're incorrectly including the rootUrl when handling the URL:

1.9:

1.10:

Use jQuery.prop for relative href

Hi,

I must first add that we use ember-href-to in a weird way. We don't use the helper, but use the global click handler to make custom href links work. These links are 'user-generated', and this addon makes those links integrate with ember without the user having to know the route names.

This however does not work for relative names. While we can get the href's correctly pointing to the correct url's the addon does not recognize them as it uses the href attribute, which for relative uri's never begins with the root. This then marks these links as 'external'.

Maybe we could use jQuery.prop to get the complete uri that the href will point to? This does have the side-effect that the uri will contain the hostname, but maybe recognizing this will fix some problems concerning the external links not working? #63 #57

Inquiry on Intercom White Labeling Options

Dear Intercom Team,

We are interested in white labeling options for Intercom. Can you provide information on customization possibilities, including our logo, colors, and visual elements? Is it possible to use our own domain? Can we remove or minimize Intercom branding in the user interface?

Thank you for your attention. We look forward to your response.

Best regards,
Marys-Team.

Allow the click handler to be used without using the `href-to` helper

The click handler is currently just-in-time setup the first time the app uses href-to. Setting up the handler in an initialize would allow apps to use simple URLs directly without the need for the helper.

/cc @rwjblue

Introduction to ember-href-to on The Ember Show at Global Ember Meetup

Would you someone familiar with this library be interested in giving a lightning talk about this addon on The Ember Show? We're recording the next episode on June 11th followed by July 2nd.

An introduction to talk is about 15 minutes long and covers the following:

• Why was this addon created?
• When should it be used?
• How does one get started?
• What should the person be aware of?

You can see some of the previously recorded introduction talks on Global Ember Meetup Videos page.

Would you be able to give this talk?

TypeError: Cannot read property 'lookup' of undefined

I believe this is related to a regression in Ember 2.13.0-beta, but I thought I'd file an issue in order to track it. We are getting an error in href-to here: https://github.com/intercom/ember-href-to/blob/master/addon/helpers/href-to.js#L6 when testing:

const $result = Ember.$(`<div>${helper.compute([ event ])}</div>`);
assert.equal($result.text(), 'Version 511 was activated', 'full text');

Where our helper simply calls hrefTo:

hrefTo('configure.service.version', version)

The fix to this was to change the aforementioned like 6 in href-to.js to:

const container = getOwner(context) || context.container;
let router = container.lookup('router:main');

which was recommended in a similar issue in the torii project, here: https://github.com/Vestorly/torii/issues/349#issuecomment-302141236

href-to causes component integration tests to fail

I just tried to use href-to in my project (Ember 2.1), but it makes my component integration tests fail.

None of the namespaces return true for this line https://github.com/intercom/ember-href-to/blob/master/addon/lib/container-lookup.js#L7

TypeError: Cannot read property '__container__' of undefined
    at containerLookup (http://localhost:4002/assets/vendor.js:160928:23)
    at Object.getRouter (http://localhost:4002/assets/vendor.js:160932:12)
    at Object.hrefTo [as compute] (http://localhost:4002/assets/vendor.js:160899:35)

Add tests to cover rootURL variations and external links

Cover this behaviour in tests: https://github.com/intercom/ember-href-to/blob/master/addon/helpers/href-to.js#L21-L28

Is it possible to add classes and data attributes?

Hi,

I know you don't get automatic active class bindings as you with {{#link-to}} but is it possible to add class names and data attributes?

Handle clicks for <a> components

Awesome addon!

I have a use case for allowing the initializer to intercept clicks from an Ember.Component. We are using styleguide components like {{em-title}}, {{em-button}} and so on. I want an element that looks like a button but functions like a link. The public API looks like this:

{{#em-button style='link' href=(href-to 'about')}}
  Learn more
{{/em-button}}

Because of the link style, the tagName is set to <a> and href is bound. Everything works and the output is correct, but ember-href-to's global event handler is ignored because of this line (it ignores all .ember-views).

If you think this is legitimate I'm happy to work on a PR. What would be the approach? It seems that if you're using href-to you're opting-in to this library handling the click event. Could href-to set some property on the component instance that could be checked, which would allow the event handler to handle the click?

Don't use jQuery

From #1:

BaseURL other than / makes troubles

@GavinJoyce we host our ember app in a subdirectory called /app, when I use Ember-Href-To the links does not work, because Ember-Href-To resolves the links to /app/app. We are using Ember-CLI and our environment.js looks as follows:

module.exports = function (environment) {
    var ENV = {
        environment: environment,
        baseURL: '/app/'
        // ...
        // ...
    }
    return ENV;
}

I solved it by making my own helper based on Ember-Href-To. The helper looks as follows:

import Ember from 'ember';
import { hrefTo } from 'ember-href-to/helpers/href-to';

export function hrefToX(params/*, hash*/) {
    var url = hrefTo(params);
    var baseURL = APPENV.baseURL.replace(/\/$/, ''); // APPENV is globally available... jeah this is a relict from our old code from ember-cli 0.0.39
    url = url.replace(baseURL, '');
    return url;
}

export default Ember.Helper.helper(hrefToX);

It works but if I hover the links built with hrefToX the links dont contain the /app/. This does not happen with link-to. Is my solution the right way to go or is there a better way to do it?

Thanks a lot

Usage of `router` is deprecated, use `_routerMicrolib` instead

In Ember 2.13, the router property of the Ember.Router was renamed to _routerMicrolib.

But ember-href-to uses router. This is causing a lot of deprecation warnings being shown in the console.

Ref: https://emberjs.com/deprecations/v2.x/#toc_deprecations-added-in-2-13

TypeError: Cannot read property 'generate' of undefined

Ember 2.9.0

Running ember test with ember-href-to v1.14.0 is fine.
Using v1.15.0 we get some failing integration tests:

        actual: >
            null
        stack: >
            TypeError: Cannot read property 'generate' of undefined
                at Class.generate (http://localhost:7357/assets/vendor.js:49196:42)
                at Class.urlFor (http://localhost:7357/assets/vendor.js:76358:48)
                at hrefTo (http://localhost:7357/assets/vendor.js:144238:26)
                at Class.compute (http://localhost:7357/assets/vendor.js:144251:23)
                at Child.compute (http://localhost:7357/assets/vendor.js:34567:26)
                at Child.value (http://localhost:7357/assets/vendor.js:34897:27)
                at read (http://localhost:7357/assets/vendor.js:35290:21)
                at Object.readArray (http://localhost:7357/assets/vendor.js:35312:16)
                at Child.compute (http://localhost:7357/assets/vendor.js:34434:48)
                at Child.value (http://localhost:7357/assets/vendor.js:34897:27)
        message: >
            Died on test #1     at Module.callback (http://localhost:7357/assets/tests.js:27187:24)
                at Module.exports (http://localhost:7357/assets/vendor.js:115:32)
                at requireModule (http://localhost:7357/assets/vendor.js:36:18)
                at TestLoader.<anonymous> (http://localhost:7357/assets/test-support.js:7700:11)
                at TestLoader.require (http://localhost:7357/assets/test-support.js:7690:27)
                at TestLoader.loadModules (http://localhost:7357/assets/test-support.js:7682:16)
                at Function.load (http://localhost:7357/assets/test-support.js:7633:26): Cannot read property 'generate' of undefined
        Log: |

The test renders a component that contains a href-to call:

I haven't manage to recreate it in tests on ember-href-to yet

Add bold letter warning to Readme that this has dangerous side effects

Relating to #41.

I tried to add this to a single spot in a large app to get fragment identifiers working. I didn't realize it was causing 404s in various locations because we still have some server rendered pages that are linked to, and we have a catchall route.
I didn't realize the initializer was handling all links, not just the one's I was modifying.

href-to helper doesn't recompute when query params change

I'm using ember-source 3.20 and started noticing an issue where the service:-routing. generateURL returns a URL with query params appended if the route where you are loading the page on has query params already in the URL, even if the usage of href-to in the template does not specify any query params. This is weird behavior and is causing bugs in our application that has a lot of filtering. The flow now for a user:

1. filters by something
2. reloads the page with the query param in the URL
3. the side nav link has hardcoded the query param in the href

The service:router. urlFor seems to be the better way to go and fixes the issue with the non-wanted query params in the href.

href-to with query-params helper does not reset query param

Trying to figure out the right home for this so starting here.

Comparing these two incarnations of a link assuming these query params had a value on some previous navigation...

<a href={{href-to "route.name" (query-params firstQp=null secondQp=1)}}

<LinkTo
  @route="route.name"
  @query={{hash firstQp=null secondQp=1}}

The former will not reset firstQp and thus old sticky qp values will show up in the url.

Is it still needed with Glimmer 2 and Ember 2.12?

Is it still needed with Glimmer 2 and Ember 2.12?

Using this plugin broke all external pointing links

After implementing this plugin, we got major issues in production that all external pointing links directed to 404. This bug was not able to be reproduced locally.

It seems that the issue is that the plugin was trying to handle links that were using a normal href. The href apparently passed the checks to where it thinks it should handle it. It passed the url to the router, and got back the 404 route.

I think a reasonable fix would be to check the url in the href and look for a full url. For example, if the url starts with http://www.blah.com/mypath instead of /mypath, it probably shouldn't handle the transition. For now we removed the plugin and won't be able to consider implementing it again unless we are confident this could be fixed.

Modernize the addon

v2.0 broke import of hrefTo function

The change from v1.15.1 to v2.0.0 removed

// addon/helpers/href-to.js
export { hrefTo };

That means it's not possible to do import { hrefTo } from 'ember-href-to/helpers/href-to'. It also means the reexport from app/ is broken.

ember-href-to: Cannot read property 'charAt'

I'm very sorry. This issue should be internal.

Use "#" instead of "undefined".

Sometimes I need href-to to wait a little while I'm loading info from elsewhere.

Maybe (as link-to already does) is better to use # instead of undefined like now?

[QUESTION] target attribute

How to use target attribute in tag a ?
I try this:
<a href="{{href-to "nameRoute.nestedRoute" user.username}}" target="_blank"> {{user.username}} </a>

But it does not work.

Active class

Hi,

I'm using the helper in my navigation - all ok, and when rendering my nav component (assuming a class of nav-bar see below) I can give the target value an active class.

What I'm not sure about is how to give an item in the menu the active class when the link to that page has been clicked elsewhere within the app - for example from within the content, or in the footer etc.

Do you have any ideas on this?

Many thanks!

nav-bar-component.js

didInsertElement() {
  this._super(...arguments);
  this.$('.nav-bar a').on('click',function(){
     $('.nav-bar a').removeClass('active');
     $(this).parents('li').children('a').addClass('active');
  });
}

Calling `replaceWith` instead of `transitionTo`

The {{link-to}} component allows you to invoke it with replace=true, which causes it to not call transitionTo, but replaceWith instead. Like this:

{{#link-to "some.route" replace=true}}
  Link Text
{{/link-to}}

Would be nice, if we could do the something similar with {{href-to}}. Since the helper can't attach meta info to the <a> tag, we can't do it as a named param for the helper. Instead I propose allowing users to set a data-href-replace attribute on the tag, kinda like we already do for ignoring links:

ember-href-to/addon/href-to.js

Lines 46 to 48 in 36c2fa8

	isNotIgnored() {
	return !this.target.attributes['data-href-to-ignore'];
	}

So this would look like

<a href={{href-to "some.route"}} data-href-replace>
  Link Text
</a>

Sublimetext snippet

I've found myself writing a lot of links, so I created a sublime-text snippet that expands to <a href={{href-to '${1}'}}>${2}</a>. I just wanted to share it here, in case it's useful.

<snippet>
  <content><![CDATA[
<a href={{href-to '${1}'}}>${2}</a>
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>href</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>text.html.handlebars</scope>
</snippet>

To create it, go to Tools > Developer > New snippet, paste the text-above and save it with .sublime-snippet extension.

Now this can be closed :)

Optional route path when used with query params

With ember {{link-to}}, the route path can be omitted when used in conjunction with query params.

{{#link-to (query-params foo="bar")}}Baz{{/link-to}}
{{link-to "Baz" (query-params foo="bar")}}

I do this all the time in a project but ran into issues when trying to convert some of them to the {{href-to}} format.

Some deprecations

Hi! Please, fix these deprecations:

"DEPRECATION: Using Ember.HTMLBars.makeBoundHelper is deprecated. Please refactor to using Ember.Helper or Ember.Helper.helper. [deprecation id: ember-htmlbars.make-bound-helper]"

DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. Helpers (even dashless ones) are automatically resolved. [deprecation id: ember-htmlbars.register-helper]

Doesn't seem to work with JSON API related/links data

I use href-to to navigate to a user view page. The JSON blob for the user has this:

{
  videos: {
    data: [],
    links: {
      related: "/api/v1/videos?user_id=5"
    }
  },
}

If I load the page directly, /api/v1/videos?user_id=5 will get automatically loaded. If I navigate to it using href-to, it won't get auto loaded. If I navigate to it using link-to, it will get loaded.

Use new Ember.Helper syntax

Throwing deprecation in 1.13.10

Em.HTMLBars.makeBoundHelper(hrefTo);

should now be
Em.Helper.helper(hrefTo)

href-to should respect current state query parameters

Useful for combined filters. For example:

default route params:
tag: 'all',
from: '2016-04-07',
to: '2016-04-08',
fav: 'yes'

current state route params:
tag: 'vip',
from: '2016-04-01',
to: '2016-04-02',
fav: ''

How link-to works:

    {{link-to
      'prev'
      'games'
      (query-params from=ydEx to=ydTo)}}

result url: games?from=2016-04-06&to=2016-04-07&fav=&tag=vip

How equivalent href-to works:

<a href='{{href-to 'games' (query-params from=ydEx to=ydTo)}}'>prev</a>

result url: games?from=2016-04-06&to=2016-04-07&fav=yes&tag=all

Click handler leaks after app destruction

The click event handler in the initializer is leaking after the app is destroyed.

While the next app created clears the previous listener, if an app is destroyed without being followed by another app's initialization there's no way to clear the body's event listener.

We were previously working around that by calling $('body').off('.href-to') after destroying our app, which stopped working when jQuery was replaced by a regular event listener. While automatically cleaning up the listeners would be great, exporting a function to remove the listener would suffice since it will allow us to manually remove the listeners after we destroy our app.

Something like this for example?

export function removeListeners() {
  document.body.removeEventListener('click', hrefToClickHandler);
}

Expose configuration to opt-out for specific route names.

It is a fairly common practice to add globbing catch-all style routes to your Router.map to handle invalid links and whatnot. Since these catch-all routes will always match, ember-href-to's link handler will happily transition into the 404 route.

In deployments where a given root is fully owned by the Ember app, this is a totally fine assumption to make. However, in scenarios where things outside of your Ember app also live on the same domain (i.e. you are transitioning from server render pages to Ember app pages) you actually want to ignore the 404 route when deciding if a given link click is handleable.

Would you be open to adding support for a blacklist (an array of route names) to opt-out of the internal transition behavior?

PS: I love this addon, thank you for working on it!

Doesn't look like fragment identifiers are supported/working

Had to downgrade to 1.14.0 to get fragment identifiers to be kept at the end of the url. Is this considered a bug or is it not possible since 1.15 moved to embers router service polyfill? (I also tested with 3.1.0 and 2.0.0, no luck there)

Review: emberjs/rfcs#391

Just wanted to ping y'all about emberjs/rfcs#391 which (to my knowledge) would largely make the work that this addon does part of Ember itself.

Would love your thoughts and input over there on the RFC...

Add support for computed property query param values

e.g.:

<a href="{{href-to 'apps.app.inbox.search.conversations' app (query-params tag=tagOrSegment.id)}}">{{unbound tagOrSegment.name}}</a>

Results in: ...inbox/search/conversations?tag=%5Bobject%20Object%5D

I'm using "classNameBindings" with link-to, can I use it here?

I'm using "classNameBindings" with link-to, can I use it here?

Example:

{{#link-to 'post' post.id class='btn' classNameBindings='post.deleted:classDeleted'}}

How to with this?

Support asking for fully-qualified URL

I'd like to use this helper to generate a permalink -- specifically in a print template. My current solution is

// foo-bar/component.js:
export default Ember.Component.extend({
  fooBar: undefined,
  baseURI: document.baseURI
});

{{!-- foo-bar/template.hbs --}}
See your FooBar here: {{baseURI}}{{href-to 'foo.bar' fooBar}}

It'd be lovely to be able to do {{href-to 'foo.bar' fooBar fullyQualified=true}} or {{fully-qualified-href-to 'foo.bar' fooBar}}.

ember-href-to last version throws ember warnings for some deprications

I have the last version of ember-href-to 4.1.0 and it throws a deprecation warning with this id ember.built-in-components.import

testem.js:967 DEPRECATION: Using Ember.LinkComponent or importing from 'LinkComponent' has been deprecated, install the @ember/legacy-built-in-components addon and use import { LinkComponent } from '@ember/legacy-built-in-components'; instead [deprecation id: ember.built-in-components.import] See Ember.js - Deprecations  for more details.

And this when I debug the depreciation cause

Respect parent route query params

In my app I have a query param at the application level. Most of the time it'll never make it's way into the URL because the default value is not changed. However, when it is, it seems like any {{href-to}} URL's don't know about that, probably because it isn't passed in as (query-params). The issue would be that child routes don't really have direct access to the current value to pass in. Is there a way for this helper to know about those and add them to the URL automatically?

More details on lightweight nature

Hi,

Would it be possible to supply some information on how this is lightweight compared to the link-to helper?

I know that when I looked at my app in the Ember inspector, I'm was a little surprised at how much render time the link-to components take but I don't really understand why.

I'd be really interested to get some perspective on how the {{ember-href-to}} component is different to the {{link-to}}

Ember 2.0+

This project is necessary or useful for Ember 2.0? Anyone knows?

Use the Router service internally

It is currently included in the beta releases, and github.com/rwjblue/ember-router-service-polyfill can be used for older Ember versions.

Ember 2.16 new MODULES API IMPORT.

Any hint for the transition to the new import module system described here? https://emberjs.com/blog/2017/09/01/ember-2-15-released.html

The 2.16 stable is approaching...

I have this:

Uncaught Error: Could not find module emberimported fromember-href-to/href-to``