From 77e789a4f4fdb1fc4e6268a074bb7360f10f3605 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 19 Nov 2019 10:13:17 +0000
Subject: [PATCH] ui: Add optional name="" attribute so you can name slots with
 it (#6740)

Pretty soon we would like to move to XML/Angle Bracket style
components. As they are XML-y it means you can't use positional
parameters anymore (every 'argument' for the component requires it to
use an XML-like attribute).

This adds a `name=""` attribute to both block-slot and yield-slot
components so we can use attributes to specify the name. We prefer using
attributes from now on, whilst the positional parameter is still
available yet deprecated so we can move over at whatever speed fits.

We also did the same with the block params positional parameter.

As a final note this entire in repo addon is a fork of
`ember-block-slots`
---
 .../lib/block-slots/addon/components/block-slot.js | 14 +++++++++-----
 .../lib/block-slots/addon/components/yield-slot.js |  8 +++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/ui-v2/lib/block-slots/addon/components/block-slot.js b/ui-v2/lib/block-slots/addon/components/block-slot.js
index 4f96f23b53..a201207cc9 100644
--- a/ui-v2/lib/block-slots/addon/components/block-slot.js
+++ b/ui-v2/lib/block-slots/addon/components/block-slot.js
@@ -1,13 +1,16 @@
 import { readOnly } from '@ember/object/computed';
 import Component from '@ember/component';
 import { isPresent } from '@ember/utils';
-import { set, defineProperty } from '@ember/object';
+import { get, set, defineProperty, computed } from '@ember/object';
 import layout from '../templates/components/block-slot';
 import Slots from '../mixins/slots';
 import YieldSlot from './yield-slot';
 const BlockSlot = Component.extend({
   layout,
   tagName: '',
+  _name: computed('__name', 'name', function() {
+    return this.name || this.__name;
+  }),
   didInsertElement: function() {
     const slottedComponent = this.nearestOfType(Slots);
     if (!slottedComponent._isRegistered(this._name)) {
@@ -21,7 +24,7 @@ const BlockSlot = Component.extend({
       // The slotted component will yield multiple times - once to register
       // the activate slots and once more per active slot - only display this
       // block when its associated slot is the one yielding
-      const isTargetSlotYielding = yieldSlot._name === this._name;
+      const isTargetSlotYielding = get(yieldSlot, '_name') === this._name;
       set(this, 'isTargetSlotYielding', isTargetSlotYielding);
 
       // If the associated slot has block params, create a computed property
@@ -30,9 +33,10 @@ const BlockSlot = Component.extend({
       // (see the yield in the block-slot template)
       //
       // Spread PR: https://github.com/wycats/handlebars.js/pull/1149
-      if (isTargetSlotYielding && isPresent(yieldSlot._blockParams)) {
+      const params = get(yieldSlot, '_blockParams');
+      if (isTargetSlotYielding && isPresent(params)) {
         // p0 p1 p2...
-        yieldSlot._blockParams.forEach((param, index) => {
+        params.forEach((param, index) => {
           defineProperty(this, `p${index}`, readOnly(`_yieldSlot._blockParams.${index}`));
         });
       }
@@ -49,7 +53,7 @@ const BlockSlot = Component.extend({
 });
 
 BlockSlot.reopenClass({
-  positionalParams: ['_name'],
+  positionalParams: ['__name'],
 });
 
 export default BlockSlot;
diff --git a/ui-v2/lib/block-slots/addon/components/yield-slot.js b/ui-v2/lib/block-slots/addon/components/yield-slot.js
index 22ac461b35..b505843904 100644
--- a/ui-v2/lib/block-slots/addon/components/yield-slot.js
+++ b/ui-v2/lib/block-slots/addon/components/yield-slot.js
@@ -5,6 +5,12 @@ import Slots from '../mixins/slots';
 const YieldSlotComponent = Component.extend({
   layout,
   tagName: '',
+  _name: computed('__name', 'name', function() {
+    return this.name || this.__name;
+  }),
+  _blockParams: computed('__blockParams', 'params', function() {
+    return this.params || this.__blockParams;
+  }),
   _parentView: computed(function() {
     return this.nearestOfType(Slots);
   }),
@@ -14,7 +20,7 @@ const YieldSlotComponent = Component.extend({
 });
 
 YieldSlotComponent.reopenClass({
-  positionalParams: ['_name', '_blockParams'],
+  positionalParams: ['__name', '__blockParams'],
 });
 
 export default YieldSlotComponent;