From 4c24e8b072e14f8702606531ff7cdebdd071175c 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 4f96f23b5..a201207cc 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 22ac461b3..b50584390 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;