intercom / ember-href-to Goto Github PK
View Code? Open in Web Editor NEW:link: A lightweight alternative to {{link-to}}
License: Apache License 2.0
:link: A lightweight alternative to {{link-to}}
License: Apache License 2.0
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 from
ember-href-to/href-to``
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.
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:
You can see some of the previously recorded introduction talks on Global Ember Meetup Videos page.
Would you be able to give this talk?
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
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!
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
Cover this behaviour in tests: https://github.com/intercom/ember-href-to/blob/master/addon/helpers/href-to.js#L21-L28
From #1:
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
});
It'd be lovely to be able to do {{href-to 'foo.bar' fooBar fullyQualified=true}}
or {{fully-qualified-href-to 'foo.bar' fooBar}}
.
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
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.
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
Wanted to know something about the update…
The {{link-to}}
component allows you to invoke it with replace=true
, which causes it to not call transitionTo
, but replaceWith
instead. Like this:
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
So this would look like
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
This project is necessary or useful for Ember 2.0? Anyone knows?
It is currently included in the beta releases, and github.com/rwjblue/ember-router-service-polyfill can be used for older Ember versions.
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}}
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?
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)
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.
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?
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:
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-view
s).
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?
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:
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.
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...
Throwing deprecation in 1.13.10
Em.HTMLBars.makeBoundHelper(hrefTo);
should now be
Em.Helper.helper(hrefTo)
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);
}
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.
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)
I'm very sorry. This issue should be internal.
@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
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');
});
}
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
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.
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?
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.
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
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 :)
Is it still needed with Glimmer 2 and Ember 2.12?
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.
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?
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]
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.