From 7ae98504b0d88d9f881aa62ae56d86405e9532f2 Mon Sep 17 00:00:00 2001
From: Chad Hietala <chadhietala@gmail.com>
Date: Mon, 22 Oct 2018 09:56:30 -0400
Subject: [PATCH] Add kitchen sink example

---
 text/0000-router-helpers.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/text/0000-router-helpers.md b/text/0000-router-helpers.md
index 6d88f22d7e3..f247114a394 100644
--- a/text/0000-router-helpers.md
+++ b/text/0000-router-helpers.md
@@ -78,6 +78,10 @@ Looking at a template you would have no idea that rendering the `{{link-to}}` wo
 
 Since angle bracket invocation does not support positional params, `{{link-to}}` has to adapt it's public API.
 
+### Costly API
+
+`{{link-to}}` has [a lot of functionality](#kitchen-sink), however this functionality does come at a cost for every instance of `{{link-to}}`. This is not ideal especially if you're just using `{{link-to}}` to generate a url that can be transitioned to. By providing fine grain control of the functionality, applications should see a performance boost.
+
 ## Detailed design
 
 Below is a detailed design of all of the template helpers and modifiers.
@@ -380,7 +384,7 @@ Since `{{link-to}}` is static we can write a codemod using [Ember Template Recas
 <a {{transition-to 'post' this.post replace=true}}>{{this.post.name}}</a>
 ```
 
-One of the tricker parts about this migration is knowing how the autogenerated CSS classes are being used. Because of this, adding the route state helpers must explicitly be turned on in the codemod. For instance if you are making heavy use of the `.active` class, you will be suited best by turning pass the codemod the correct configuration to do a transform like the following:
+One of the trickier parts about this migration is knowing how the autogenerated CSS classes are being used. Because of this, adding the route state helpers must explicitly be turned on in the codemod. For instance if you are making heavy use of the `.active` class, you will be suited best by turning pass the codemod the correct configuration to do a transform like the following:
 
 **Before**
 
@@ -394,6 +398,28 @@ One of the tricker parts about this migration is knowing how the autogenerated C
 <a href={{url-for 'profile'}} class={{is-active 'active'}}>Profile</a>
 ```
 
+#### Kitchen Sink
+
+If you were to transform all `{{link-to}}`s verbatim in terms of functionality this would be the result.
+
+**Before**
+
+```hbs
+{{#link-to 'profile' model (query-parmas foo=bar) replace=true}}Profile{{/link-to}}
+```
+
+**After**
+
+```hbs
+<a
+  {{transition-to 'profile'
+    model
+    queryParams=(hash foo=bar) replace=true}}
+  class="{{if (is-active 'profile' model queryParams=(hash foo=bar)) 'active'}} {{if (is-loading 'profile' model queryParams=(hash foo=bar)) 'loading'}} {{if (is-transitioning-in 'profile' model queryParams=(hash foo=bar)) 'ember-transitioning-in'}} {{if (is-transitioning-out 'profile' model queryParams=(hash foo=bar)) 'ember-transitioning-out'}}">Profile</a>
+```
+
+As the kitchen sink example shows, `{{link-to}}` is packed with functionality. While this convienent, it comes with a cost per `{{link-to}}` and is the reason why addons like [Ember-href-to](https://github.com/intercom/ember-href-to) were created. In reality the vast majority of applications only need a subset of this functionality and in only rare cases need things like the transition and loading states.
+
 ## How we teach this
 
 In many ways this vastly simplifies the Ember's approach to linking within the app. It removes the requirement for a proprietary API and instead embraces the power of URLs.