intercom/ember-href-to

Support asking for fully-qualified URL

jamesarosen opened this issue · 8 comments

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}}.

I'm curious about how many uses you would have for this in your app. Is this a common requirement for you or are there only a handful of uses?

Not too many. We have a few permalinks. I could write a {{permalink-to}} helper if I could figure out a good way to call this helper from it. I don't want to duplicate the implementation, though.

I don't think that this would be a good fit for the addon at the moment. It seems trivial to implement a base-uri helper in your own app and use them together, similar to your example above. I'd be happy to reexamine adding support if this proves to be a common request or if you feel strongly about its inclusion though.

It seems trivial to implement a base-uri helper in your own app

The only trouble is that document.baseURI ends in / and {{href-to}} creates paths that start with /, so we'd need a way to strip off the extra /, which then looks like

{{strip-last baseURI}}{{href-to 'foo'}}

which is a bit unwieldy.

I'm going to give a shot at a stateful permalink-to helper that calls into this helper. If I figure it out, I'll post the code here in case others have the same use-case.

This works:

// app/helpers/permalink-to.js

import Ember from 'ember';
import getOwner from 'ember-getowner-polyfill';
const { assert, computed, Helper } = Ember;

export default Helper.extend({
  hrefToHelper: computed(function() {
    const result = getOwner(this).lookup('helper:href-to');
    assert('helper:href-to not found', result);
    return result;
  }),

  compute(params) {
    const baseURI = document.baseURI.replace(/\/$/, '');
    return baseURI + this.get('hrefToHelper').compute(params);
  }
});

Nice one, that's pretty neat and seems like a good solution for your app. I'd be happy to add this to ember-href-to in future if more people request it

NB: since the baseURL deprecation, this needs to change:

// app/helpers/permalink-to.js
import Ember from 'ember';
import getOwner from 'ember-getowner-polyfill';
import config from '../config/environment';
const { assert, computed, Helper } = Ember;

export default Helper.extend({
  hrefToHelper: computed(function() {
    const result = getOwner(this).lookup('helper:href-to');
    assert('helper:href-to not found', result);
    return result;
  }),

  compute(params) {
    let baseURI = `${location.protocol}//${location.host}${config.rootURL}`.replace(/\/$/, '')
    return baseURI + this.get('hrefToHelper').compute(params);
  }
});
iezer commented

going from ember 2.9 to ember 2.10 we have to call create() on the response to getOwner(this.lookup). Specifically: const result = getOwner(this).lookup('helper:href-to').create();

Also href-to exports the underlying function so I believe this is equivalent:

import Ember from 'ember';
import config from '../config/environment';
import { hrefTo } from 'app/helpers/href-to';
const { computed, Helper } = Ember;

export default Helper.extend({
  compute(params) {
    let baseURI = `${location.protocol}//${location.host}${config.rootURL}`.replace(/\/$/, '')
    return baseURI + hrefTo(this, params);
  }
});