[Chore] Modify API Templates

Author: kanalveli-ramachandran

addon/components/sequential-render.hbs

@@ -1,11 +1,11 @@
 {{yield (hash
   content=this.content
   isContentLoading=this.isContentLoading
-  render-content=(component "sequential-render/content"
+  contentTemplate=(component "sequential-render/content"
     isFullFilled=this.isFullFilled
     showFadedState=this.showFadedState
   )
-  loader-state=(component "sequential-render/loader-state"
+  loaderTemplate=(component "sequential-render/loader-state"
     isFullFilled=this.isFullFilled
   )
   retry=this.retry

addon/components/sequential-render.js

@@ -18,24 +18,24 @@
       @getData={{this.executePromise}}
       @renderCallback={{action 'contentRenderCallback'}} as |renderHash|
     >
-      <renderHash.loader-state>
+      <renderHash.loaderTemplate>
         // Handle loading state if required
-      </renderHash.loader-state>
-      <renderHash.render-content @loaderClass="loader-fade">
+      </renderHash.loaderTemplate>
+      <renderHash.contentTemplate @loaderClass="loader-fade">
         // Use renderHash.content to render the content.
         // Use renderHash.isContentLoading to act based on the data loading state.
         // Use renderHash.retry action to retrigger data fetch and rendering as applicable.
-      {{/renderHash.render-content}}
+      </renderHash.contentTemplate>
     </SequentialRender>
   ```
   @class sequential-render
   @public
   @yield {Hash} renderHash
   @yield {Any} renderHash.content The response from performing getData.
   @yield {boolean} renderHash.isContentLoading Flag to check the loading state of the data fetch.
-  @yield {component} renderHash.render-content Block component used to render the content of the item.
+  @yield {component} renderHash.contentTemplate Block component used to render the content of the item.
         Accepts loaderClass as an argument. This class can be used to style the subsequent loading states for the item during rerender.  
-  @yield {component} renderHash.loader-state Block component used to render the loading state of the item.
+  @yield {component} renderHash.loaderTemplate Block component used to render the loading state of the item.
   @yield {action} renderHash.retry Exposes an action which can be used to retry the data fetch + render process without affecting the queue / app render states..
 */
 

tests/dummy/app/components/example-optimized/template.hbs

@@ -4,7 +4,7 @@
   <div class="flex1 schoolroom__mainpanel">
     <h2 class="maintitle">Dumbledore's Army</h2>
     <SequentialRender @renderPriority={{0}} @taskName="getSpellWork" @getData={{@getSpellWork}} as |spellHash|>
-      <spellHash.render-content>
+      <spellHash.contentTemplate>
         {{#each @spellWork as |spell|}}
           <div class="card">
             <div class="title">
@@ -15,10 +15,10 @@
             </div>
           </div>
         {{/each}}
-      </spellHash.render-content>
-      <spellHash.loader-state>
+      </spellHash.contentTemplate>
+      <spellHash.loaderTemplate>
         <div class="loader"></div>
-      </spellHash.loader-state>
+      </spellHash.loaderTemplate>
     </SequentialRender>
   </div>
   <div class="schoolroom__sidepane">
@@ -27,18 +27,18 @@
         Participants
       </h4>
       <SequentialRender @renderPriority={{1}} @taskName="getParticipants" @getData={{@getParticipants}} as |participantsHash|>
-        <participantsHash.render-content>
+        <participantsHash.contentTemplate>
           <div class="element-flex avatarpane">
             {{#each @participantsList as |person|}}
               <div class="avatar-item" aria-label={{person.name}}>
                 <img class="element-flex avatar-image-wrapper" src={{person.avatar}} alt={{person.name}}>
               </div>
             {{/each}}
           </div>
-        </participantsHash.render-content>
-        <participantsHash.loader-state>
+        </participantsHash.contentTemplate>
+        <participantsHash.loaderTemplate>
           <div class="loader"></div>
-        </participantsHash.loader-state>
+        </participantsHash.loaderTemplate>
       </SequentialRender>
     </div>
 
@@ -47,14 +47,14 @@
         Quick Notes
       </h4>
       <SequentialRender @renderPriority={{1}} @taskName="getNotes" @getData={{@getNotes}} as |notesHash|>
-        <notesHash.render-content>
+        <notesHash.contentTemplate>
           <div class="editor" contenteditable="true">
             {{@notes}}
           </div>
-        </notesHash.render-content>
-        <notesHash.loader-state>
+        </notesHash.contentTemplate>
+        <notesHash.loaderTemplate>
           <div class="loader"></div>
-        </notesHash.loader-state>
+        </notesHash.loaderTemplate>
       </SequentialRender>
     </div>
   </div>

tests/dummy/app/templates/docs/usage.md

@@ -38,12 +38,12 @@ In this example, the critical or hero element is the content inside the left pan
 ```
 <div class="flex1 schoolroom__mainpanel">
   <h2 class="maintitle">Dumbledore's Army</h2>
-  <sequential-render
+  <SequentialRender
     renderPriority={{0}}
     taskName="getSpellWork"
     getData={{this.getSpellWork}} as |spellHash|
   >
-    <spellHash.render-content>
+    <spellHash.contentTemplate>
       {{#each this.spellWork as |spell|}}
         <div class="card">
           <div class="title">
@@ -54,11 +54,11 @@ In this example, the critical or hero element is the content inside the left pan
           </div>
         </div>
       {{/each}}
-    </spellHash.render-content>
-    <spellHash.loader-state>
+    </spellHash.contentTemplate>
+    <spellHash.loaderTemplate>
      // ...Loader
-    </spellHash.loader-state>
-  </sequential-render>
+    </spellHash.loaderTemplate>
+  </SequentialRender>
 </div>
 ```