From b8dc9fb55b1f97e1e1b09f51eb038b97171add67 Mon Sep 17 00:00:00 2001 From: Chad Hietala Date: Mon, 20 May 2019 09:52:57 -0400 Subject: [PATCH 1/2] Deprecate disconnectOutlet --- text/0000-deprecate-disconnect-outlet.md | 130 +++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 text/0000-deprecate-disconnect-outlet.md diff --git a/text/0000-deprecate-disconnect-outlet.md b/text/0000-deprecate-disconnect-outlet.md new file mode 100644 index 0000000000..386ff12d81 --- /dev/null +++ b/text/0000-deprecate-disconnect-outlet.md @@ -0,0 +1,130 @@ +- Start Date: 2019-05-20 +- Relevant Team(s): Ember.js, Learning +- RFC PR: (after opening the RFC PR, update this with a link to it and update the file name) +- Tracking: (leave this empty) + +# Deprecate `disconnectOutlet` + +## Summary + +This RFC deprecates `Route#disconnectOutlet` because it has no use case given [#418](https://github.com/emberjs/rfcs/pull/418). + +## Motivation + +`Route#disconnectOutlet` is intended to be used in conjunction with `Route#render`. When we wrote [#418](https://github.com/emberjs/rfcs/pull/418) we should have also deprecated `Route#disconnectOutlet` because it is primarily used to teardown named outlets setup by `Route#render`. For all intensive this is just an addendum to #418. + +## Transition Path + +The transition path is the same to the one outlined in [#418](https://github.com/emberjs/rfcs/blob/master/text/0418-deprecate-route-render-methods.md#transition-path). Since the migration path for the named outlets is to use components, a developer would need to wrap the component in a conditional if they want to control the destruction. + +Given: + +```js +// app/routes/checkout.js + +class CheckoutRoute extends Route { + // ... + + @action + showModal() { + this.render('modal', { + outlet: 'modal', + into: 'application' + }); + } + + @action + hideModal() { + this.disconnectOutlet('modal'); + } +} +``` + +```hbs +{{! app/templates/checkout.hbs}} + + + +``` + +```hbs +{{! app/templates/application.hbs}} +{{outlet "modal"}} + +
+ {{outlet}} +
+``` + +This can transitioned to: + +```js +// app/controller/checkout.js + +class CheckoutController extends Controller { + // ... + @tracked isModalOpen = false; + + init() { + super.init(); + this.modalElement = document.getElementById('modal'); + } + + @action + showModal() { + this.isModalOpen = true; + } + + @action + closeModal() { + this.isModalOpen = false; + } +} +``` + +```hbs +{{! app/templates/checkout.hbs}} + + + + +{{#if this.isModalOpen}} + {{#in-element this.modalElement}} + + {{/in-element}} +{{/if}} +``` + +```hbs +{{! app/templates/application.hbs}} + + +
+ {{outlet}} +
+``` + +The above example will conditionally append the modal component into `div#modal` whenever the user toggles the modal. + +## How We Teach This + +Once deprecated, developers will be presented with the following deprecation warning: + +``` +"disconnectOutlet" has been deprecated for disconnecting outlets. +``` + +This deprecation message will also link to the transition guide. The transition guide will cover how to migrate named outlets to components. In addition, the guides should be updated to remove any usage of these APIs. + +## Drawbacks + +N/A. This addendum to [#418](https://github.com/emberjs/rfcs/pull/418). + +## Alternatives + +N/A. This addendum to [#418](https://github.com/emberjs/rfcs/pull/418). + +## Unresolved questions + +> Optional, but suggested for first drafts. What parts of the design are still +TBD? From 1c03584ce368b4143be111972afbfdc4daaa6379 Mon Sep 17 00:00:00 2001 From: Ricardo Mendes Date: Tue, 21 May 2019 08:42:47 +0100 Subject: [PATCH 2/2] Update and rename 0000-deprecate-disconnect-outlet.md to 0491-deprecate-disconnect-outlet.md --- ...disconnect-outlet.md => 0491-deprecate-disconnect-outlet.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename text/{0000-deprecate-disconnect-outlet.md => 0491-deprecate-disconnect-outlet.md} (97%) diff --git a/text/0000-deprecate-disconnect-outlet.md b/text/0491-deprecate-disconnect-outlet.md similarity index 97% rename from text/0000-deprecate-disconnect-outlet.md rename to text/0491-deprecate-disconnect-outlet.md index 386ff12d81..9d3ccce1f8 100644 --- a/text/0000-deprecate-disconnect-outlet.md +++ b/text/0491-deprecate-disconnect-outlet.md @@ -1,6 +1,6 @@ - Start Date: 2019-05-20 - Relevant Team(s): Ember.js, Learning -- RFC PR: (after opening the RFC PR, update this with a link to it and update the file name) +- RFC PR: https://github.com/emberjs/rfcs/pull/491 - Tracking: (leave this empty) # Deprecate `disconnectOutlet`