diff --git a/app/assets/javascripts/admin/addon/templates/admin.hbs b/app/assets/javascripts/admin/addon/templates/admin.hbs
index 8a7c76a1065..cdfe1692918 100644
--- a/app/assets/javascripts/admin/addon/templates/admin.hbs
+++ b/app/assets/javascripts/admin/addon/templates/admin.hbs
@@ -1,32 +1,32 @@
-{{#admin-wrapper class="container"}}
+<AdminWrapper @class="container">
   <div class="row">
     <div class="full-width">
       <div class="admin-main-nav">
         <ul class="nav nav-pills">
-          {{nav-item route="admin.dashboard" label="admin.dashboard.title"}}
+          <NavItem @route="admin.dashboard" @label="admin.dashboard.title" />
           {{#if currentUser.admin}}
-            {{nav-item route="adminSiteSettings" label="admin.site_settings.title"}}
+            <NavItem @route="adminSiteSettings" @label="admin.site_settings.title" />
           {{/if}}
-          {{nav-item route="adminUsers" label="admin.users.title"}}
+          <NavItem @route="adminUsers" @label="admin.users.title" />
           {{#if showGroups}}
-            {{nav-item route="groups" label="admin.groups.title"}}
+            <NavItem @route="groups" @label="admin.groups.title" />
           {{/if}}
           {{#if showBadges}}
-            {{nav-item route="adminBadges" label="admin.badges.title"}}
+            <NavItem @route="adminBadges" @label="admin.badges.title" />
           {{/if}}
           {{#if currentUser.admin}}
-            {{nav-item route="adminEmail" label="admin.email.title"}}
+            <NavItem @route="adminEmail" @label="admin.email.title" />
           {{/if}}
-          {{nav-item route="adminLogs" label="admin.logs.title"}}
-          {{nav-item route="adminCustomize" label="admin.customize.title"}}
+          <NavItem @route="adminLogs" @label="admin.logs.title" />
+          <NavItem @route="adminCustomize" @label="admin.customize.title" />
           {{#if currentUser.admin}}
-            {{nav-item route="adminApi" label="admin.api.title"}}
+            <NavItem @route="adminApi" @label="admin.api.title" />
             {{#if siteSettings.enable_backups}}
-              {{nav-item route="admin.backups" label="admin.backups.title"}}
+              <NavItem @route="admin.backups" @label="admin.backups.title" />
             {{/if}}
           {{/if}}
-          {{nav-item route="adminPlugins" label="admin.plugins.title"}}
-          {{plugin-outlet name="admin-menu"}}
+          <NavItem @route="adminPlugins" @label="admin.plugins.title" />
+          <PluginOutlet @name="admin-menu" />
         </ul>
       </div>
 
@@ -37,4 +37,4 @@
       </div>
     </div>
   </div>
-{{/admin-wrapper}}
+</AdminWrapper>
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs b/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
index f5608434adb..24816b5d8da 100644
--- a/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
@@ -1,11 +1,7 @@
-{{d-button
-  class="btn-primary"
-  action=(route-action "new")
-  icon="plus"
-  label="admin.api.new_key"}}
+<DButton @class="btn-primary" @action={{route-action "new"}} @icon="plus" @label="admin.api.new_key" />
 
 {{#if model}}
-  {{#load-more selector=".api-keys tr" action=(action "loadMore")}}
+  <LoadMore @selector=".api-keys tr" @action={{action "loadMore"}}>
     <table class="api-keys grid">
       <thead>
         <th>{{i18n "admin.api.key"}}</th>
@@ -28,9 +24,9 @@
             <td class="key-user">
               <div class="label">{{i18n "admin.api.user"}}</div>
               {{#if k.user}}
-                {{#link-to "adminUser" k.user}}
+                <LinkTo @route="adminUser" @model={{k.user}}>
                   {{avatar k.user imageSize="small"}}
-                {{/link-to}}
+                </LinkTo>
               {{else}}
                 {{i18n "admin.api.all_users"}}
               {{/if}}
@@ -48,28 +44,20 @@
               {{/if}}
             </td>
             <td class="key-controls">
-              {{d-button action=(route-action "show" k) icon="far-eye" title="admin.api.show_details"}}
+              <DButton @action={{route-action "show" k}} @icon="far-eye" @title="admin.api.show_details" />
               {{#if k.revoked_at}}
-                {{d-button
-                  action=(action "undoRevokeKey")
-                  actionParam=k icon="undo"
-                  title="admin.api.undo_revoke"}}
+                <DButton @action={{action "undoRevokeKey"}} @actionParam={{k}} @icon="undo" @title="admin.api.undo_revoke" />
               {{else}}
-                {{d-button
-                  class="btn-danger"
-                  action=(action "revokeKey")
-                  actionParam=k
-                  icon="times"
-                  title="admin.api.revoke"}}
+                <DButton @class="btn-danger" @action={{action "revokeKey"}} @actionParam={{k}} @icon="times" @title="admin.api.revoke" />
               {{/if}}
             </td>
           </tr>
         {{/each}}
       </tbody>
     </table>
-  {{/load-more}}
+  </LoadMore>
 
-  {{conditional-loading-spinner condition=loading}}
+  <ConditionalLoadingSpinner @condition={{loading}} />
 {{else}}
   <p>{{i18n "admin.api.none"}}</p>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs b/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs
index 7f703c3bc21..d8dc05558e1 100644
--- a/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs
@@ -1,50 +1,46 @@
-{{#link-to "adminApiKeys.index" class="go-back"}}
+<LinkTo @route="adminApiKeys.index" class="go-back">
   {{d-icon "arrow-left"}}
   <span>{{i18n "admin.api.all_api_keys"}}</span>
-{{/link-to}}
+</LinkTo>
 
 <div class="api-key api-key-new">
   {{#if model.id}}
-    {{#admin-form-row label="admin.api.key"}}
+    <AdminFormRow @label="admin.api.key">
       <div>{{model.key}}</div>
-    {{/admin-form-row}}
-    {{#admin-form-row}}
+    </AdminFormRow>
+    <AdminFormRow>
       {{i18n "admin.api.not_shown_again"}}
-    {{/admin-form-row}}
-    {{#admin-form-row}}
-      {{d-button icon="angle-right" label="admin.api.continue" action=(action "continue") class="btn-primary"}}
-    {{/admin-form-row}}
+    </AdminFormRow>
+    <AdminFormRow>
+      <DButton @icon="angle-right" @label="admin.api.continue" @action={{action "continue"}} @class="btn-primary" />
+    </AdminFormRow>
   {{else}}
-    {{#admin-form-row label="admin.api.description"}}
-      {{input value=model.description maxlength="255" placeholder=(i18n "admin.api.description_placeholder")}}
-    {{/admin-form-row}}
+    <AdminFormRow @label="admin.api.description">
+      <Input @value={{model.description}} @maxlength="255" placeholder={{i18n "admin.api.description_placeholder"}} />
+    </AdminFormRow>
 
-    {{#admin-form-row label="admin.api.user_mode"}}
-      {{combo-box content=userModes value=userMode onChange=(action "changeUserMode")}}
-    {{/admin-form-row}}
+    <AdminFormRow @label="admin.api.user_mode">
+      <ComboBox @content={{userModes}} @value={{userMode}} @onChange={{action "changeUserMode"}} />
+    </AdminFormRow>
 
     {{#if showUserSelector}}
-      {{#admin-form-row label="admin.api.user"}}
-        {{email-group-user-chooser
-          value=model.username
-          onChange=(action "updateUsername")
-          options=(hash
+      <AdminFormRow @label="admin.api.user">
+        <EmailGroupUserChooser @value={{model.username}} @onChange={{action "updateUsername"}} @options={{hash
             maximum=1
             filterPlaceholder="admin.api.user_placeholder"
-          )
-        }}
-      {{/admin-form-row}}
+          }} />
+      </AdminFormRow>
     {{/if}}
 
-    {{#admin-form-row label="admin.api.scope_mode"}}
-      {{combo-box content=scopeModes value=scopeMode onChange=(action "changeScopeMode")}}
+    <AdminFormRow @label="admin.api.scope_mode">
+      <ComboBox @content={{scopeModes}} @value={{scopeMode}} @onChange={{action "changeScopeMode"}} />
 
       {{#if (eq scopeMode "read_only")}}
         <p>{{i18n "admin.api.scopes.descriptions.global.read"}}</p>
       {{else if (eq scopeMode "global")}}
         <p>{{i18n "admin.api.scopes.global_description"}}</p>
       {{/if}}
-    {{/admin-form-row}}
+    </AdminFormRow>
 
     {{#if (eq scopeMode "granular")}}
       <h2 class="scopes-title">{{i18n "admin.api.scopes.title"}}</h2>
@@ -68,7 +64,7 @@
             </tr>
             {{#each actions as |act|}}
               <tr>
-                <td>{{input type="checkbox" checked=act.selected}}</td>
+                <td><Input @type="checkbox" @checked={{act.selected}} /></td>
                 <td>
                   <div class="scope-name">{{act.name}}</div>
                   <span class="scope-tooltip" data-tooltip={{i18n (concat "admin.api.scopes.descriptions." resource "." act.key)}}>
@@ -76,11 +72,11 @@
                   </span>
                 </td>
                 <td>
-                  {{d-button icon="link" action=(action "showURLs" act.urls) class="btn-info"}}
+                  <DButton @icon="link" @action={{action "showURLs" act.urls}} @class="btn-info" />
                 </td>
                 <td>
                   {{#each act.params as |p|}}
-                    {{input maxlength="255" value=(get act p) placeholder=p}}
+                    <Input @maxlength="255" @value={{get act p}} placeholder={{p}} />
                   {{/each}}
                 </td>
               </tr>
@@ -90,6 +86,6 @@
       </table>
     {{/if}}
 
-    {{d-button icon="check" label="admin.api.save" action=(action "save") class="btn-primary" disabled=saveDisabled}}
+    <DButton @icon="check" @label="admin.api.save" @action={{action "save"}} @class="btn-primary" @disabled={{saveDisabled}} />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-show.hbs b/app/assets/javascripts/admin/addon/templates/api-keys-show.hbs
index 436e0cf0048..5707d4cf3e9 100644
--- a/app/assets/javascripts/admin/addon/templates/api-keys-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api-keys-show.hbs
@@ -1,17 +1,17 @@
-{{#link-to "adminApiKeys.index" class="go-back"}}
+<LinkTo @route="adminApiKeys.index" class="go-back">
   {{d-icon "arrow-left"}}
   {{i18n "admin.api.all_api_keys"}}
-{{/link-to}}
+</LinkTo>
 
 <div class="api-key api-key-show">
-  {{#admin-form-row label="admin.api.key"}}
+  <AdminFormRow @label="admin.api.key">
     {{#if model.revoked_at}}{{d-icon "times-circle"}}{{/if}}
     {{model.truncatedKey}}
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.description"}}
+  <AdminFormRow @label="admin.api.description">
     {{#if editingDescription}}
-      {{input value=buffered.description maxlength="255" placeholder=(i18n "admin.api.description_placeholder")}}
+      <Input @value={{buffered.description}} @maxlength="255" placeholder={{i18n "admin.api.description_placeholder"}} />
     {{else}}
       <span>
         {{if model.description model.description (i18n "admin.api.no_description")}}
@@ -20,41 +20,41 @@
 
     <div class="controls">
       {{#if editingDescription}}
-        {{d-button class="ok" action=(action "saveDescription") icon="check"}}
-        {{d-button class="cancel" action=(action "editDescription") icon="times"}}
+        <DButton @class="ok" @action={{action "saveDescription"}} @icon="check" />
+        <DButton @class="cancel" @action={{action "editDescription"}} @icon="times" />
       {{else}}
-        {{d-button class="btn-default" action=(action "editDescription") icon="pencil-alt"}}
+        <DButton @class="btn-default" @action={{action "editDescription"}} @icon="pencil-alt" />
       {{/if}}
     </div>
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.user"}}
+  <AdminFormRow @label="admin.api.user">
     {{#if model.user}}
-      {{#link-to "adminUser" model.user}}
+      <LinkTo @route="adminUser" @model={{model.user}}>
         {{avatar model.user imageSize="small"}} {{model.user.username}}
-      {{/link-to}}
+      </LinkTo>
     {{else}}
       {{i18n "admin.api.all_users"}}
     {{/if}}
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.created"}}
+  <AdminFormRow @label="admin.api.created">
     {{format-date model.created_at leaveAgo="true"}}
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.updated"}}
+  <AdminFormRow @label="admin.api.updated">
     {{format-date model.updated_at leaveAgo="true"}}
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.last_used"}}
+  <AdminFormRow @label="admin.api.last_used">
     {{#if model.last_used_at}}
       {{format-date model.last_used_at leaveAgo="true"}}
     {{else}}
       {{i18n "admin.api.never_used"}}
     {{/if}}
-  {{/admin-form-row}}
+  </AdminFormRow>
 
-  {{#admin-form-row label="admin.api.revoked"}}
+  <AdminFormRow @label="admin.api.revoked">
     {{#if model.revoked_at}}
       {{format-date model.revoked_at leaveAgo="true"}}
     {{else}}
@@ -62,25 +62,13 @@
     {{/if}}
     <div class="controls">
       {{#if model.revoked_at}}
-        {{d-button
-          action=(action "undoRevokeKey")
-          actionParam=model icon="undo"
-          label="admin.api.undo_revoke"}}
-        {{d-button
-          action=(action "deleteKey")
-          actionParam=model icon="trash-alt"
-          label="admin.api.delete"
-          class="btn-danger"}}
+        <DButton @action={{action "undoRevokeKey"}} @actionParam={{model}} @icon="undo" @label="admin.api.undo_revoke" />
+        <DButton @action={{action "deleteKey"}} @actionParam={{model}} @icon="trash-alt" @label="admin.api.delete" @class="btn-danger" />
       {{else}}
-        {{d-button
-          class="btn-danger"
-          action=(action "revokeKey")
-          actionParam=model
-          icon="times"
-          label="admin.api.revoke"}}
+        <DButton @class="btn-danger" @action={{action "revokeKey"}} @actionParam={{model}} @icon="times" @label="admin.api.revoke" />
       {{/if}}
     </div>
-  {{/admin-form-row}}
+  </AdminFormRow>
 
   {{#if model.api_key_scopes.length}}
     <h2 class="scopes-title">{{i18n "admin.api.scopes.title"}}</h2>
@@ -107,7 +95,7 @@
               </span>
             </td>
             <td>
-              {{d-button icon="link" action=(action "showURLs" scope.urls) class="btn-info"}}
+              <DButton @icon="link" @action={{action "showURLs" scope.urls}} @class="btn-info" />
             </td>
             <td>
               {{#each scope.parameters as |p|}}
diff --git a/app/assets/javascripts/admin/addon/templates/api.hbs b/app/assets/javascripts/admin/addon/templates/api.hbs
index 288bbc71fe8..fd55893fb90 100644
--- a/app/assets/javascripts/admin/addon/templates/api.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api.hbs
@@ -1,7 +1,7 @@
-{{#admin-nav}}
-  {{nav-item route="adminApiKeys" label="admin.api.title"}}
-  {{nav-item route="adminWebHooks" label="admin.web_hooks.title"}}
-{{/admin-nav}}
+<AdminNav>
+  <NavItem @route="adminApiKeys" @label="admin.api.title" />
+  <NavItem @route="adminWebHooks" @label="admin.web_hooks.title" />
+</AdminNav>
 
 <div class="admin-container">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/backups-index.hbs b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
index cf84d858f81..732b8f308b0 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
@@ -1,26 +1,14 @@
 <div class="backup-options">
   {{#if localBackupStorage}}
-    {{uppy-backup-uploader done=(route-action "uploadSuccess") localBackupStorage=localBackupStorage}}
+    <UppyBackupUploader @done={{route-action "uploadSuccess"}} @localBackupStorage={{localBackupStorage}} />
   {{else}}
-    {{uppy-backup-uploader done=(route-action "remoteUploadSuccess")}}
+    <UppyBackupUploader @done={{route-action "remoteUploadSuccess"}} />
   {{/if}}
 
   {{#if site.isReadOnly}}
-    {{d-button
-      class="btn-default"
-      icon="far-eye"
-      action=(action "toggleReadOnlyMode")
-      disabled=status.isOperationRunning
-      title="admin.backups.read_only.disable.title"
-      label="admin.backups.read_only.disable.label"}}
+    <DButton @class="btn-default" @icon="far-eye" @action={{action "toggleReadOnlyMode"}} @disabled={{status.isOperationRunning}} @title="admin.backups.read_only.disable.title" @label="admin.backups.read_only.disable.label" />
   {{else}}
-    {{d-button
-      class="btn-default"
-      icon="far-eye"
-      action=(action "toggleReadOnlyMode")
-      disabled=status.isOperationRunning
-      title="admin.backups.read_only.enable.title"
-      label="admin.backups.read_only.enable.label"}}
+    <DButton @class="btn-default" @icon="far-eye" @action={{action "toggleReadOnlyMode"}} @disabled={{status.isOperationRunning}} @title="admin.backups.read_only.enable.title" @label="admin.backups.read_only.enable.label" />
   {{/if}}
   <div class="backup-message">
     {{#if status.restoreDisabled}}
@@ -41,41 +29,13 @@
         <td class="backup-size">{{human-size backup.size}}</td>
         <td class="backup-controls">
           <div>
-            {{d-button class="btn-default download"
-               action=(action "download")
-               actionParam=backup
-               icon="download"
-               title="admin.backups.operations.download.title"
-               label="admin.backups.operations.download.label"}}
+            <DButton @class="btn-default download" @action={{action "download"}} @actionParam={{backup}} @icon="download" @title="admin.backups.operations.download.title" @label="admin.backups.operations.download.label" />
             {{#if status.isOperationRunning}}
-              {{d-button
-                icon="far-trash-alt"
-                action=(route-action "destroyBackup")
-                actionParam=backup class="btn-danger"
-                disabled="true"
-                title="admin.backups.operations.is_running"}}
-              {{d-button
-                icon="play"
-                action=(route-action "startRestore")
-                actionParam=backup disabled=status.restoreDisabled
-                class="btn-default"
-                title=restoreTitle
-                label="admin.backups.operations.restore.label"}}
+              <DButton @icon="far-trash-alt" @action={{route-action "destroyBackup"}} @actionParam={{backup}} @class="btn-danger" @disabled="true" @title="admin.backups.operations.is_running" />
+              <DButton @icon="play" @action={{route-action "startRestore"}} @actionParam={{backup}} @disabled={{status.restoreDisabled}} @class="btn-default" @title={{restoreTitle}} @label="admin.backups.operations.restore.label" />
             {{else}}
-              {{d-button
-                icon="far-trash-alt"
-                action=(route-action "destroyBackup")
-                actionParam=backup
-                class="btn-danger"
-                title="admin.backups.operations.destroy.title"}}
-              {{d-button
-                icon="play"
-                action=(route-action "startRestore")
-                actionParam=backup
-                disabled=status.restoreDisabled
-                class="btn-default btn-restore"
-                title=restoreTitle
-                label="admin.backups.operations.restore.label"}}
+              <DButton @icon="far-trash-alt" @action={{route-action "destroyBackup"}} @actionParam={{backup}} @class="btn-danger" @title="admin.backups.operations.destroy.title" />
+              <DButton @icon="play" @action={{route-action "startRestore"}} @actionParam={{backup}} @disabled={{status.restoreDisabled}} @class="btn-default btn-restore" @title={{restoreTitle}} @label="admin.backups.operations.restore.label" />
             {{/if}}
           </div>
         </td>
diff --git a/app/assets/javascripts/admin/addon/templates/backups-logs.hbs b/app/assets/javascripts/admin/addon/templates/backups-logs.hbs
index 34ec15f84a7..1f4a77418d0 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-logs.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups-logs.hbs
@@ -1 +1 @@
-{{admin-backups-logs logs=logs status=status}}
+<AdminBackupsLogs @logs={{logs}} @status={{status}} />
diff --git a/app/assets/javascripts/admin/addon/templates/backups.hbs b/app/assets/javascripts/admin/addon/templates/backups.hbs
index 2a5e08ce255..ca33af1c50c 100644
--- a/app/assets/javascripts/admin/addon/templates/backups.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups.hbs
@@ -2,37 +2,24 @@
   <div class="admin-controls">
     <nav>
       <ul class="nav nav-pills">
-        {{nav-item route="admin.backups.index" label="admin.backups.menu.backups"}}
-        {{nav-item route="admin.backups.logs" label="admin.backups.menu.logs"}}
-        {{plugin-outlet name="downloader" connectorTagName="div"}}
+        <NavItem @route="admin.backups.index" @label="admin.backups.menu.backups" />
+        <NavItem @route="admin.backups.logs" @label="admin.backups.menu.logs" />
+        <PluginOutlet @name="downloader" @connectorTagName="div" />
         <div class="admin-actions">
           {{#if model.canRollback}}
-            {{d-button action=(route-action "rollback")
-                       class="btn-default btn-rollback"
-                       label="admin.backups.operations.rollback.label"
-                       title="admin.backups.operations.rollback.title"
-                       icon="ambulance"
-                       disabled=rollbackDisabled}}
+            <DButton @action={{route-action "rollback"}} @class="btn-default btn-rollback" @label="admin.backups.operations.rollback.label" @title="admin.backups.operations.rollback.title" @icon="ambulance" @disabled={{rollbackDisabled}} />
           {{/if}}
           {{#if model.isOperationRunning}}
-            {{d-button action=(route-action "cancelOperation")
-                       class="btn-danger"
-                       title="admin.backups.operations.cancel.title"
-                       label="admin.backups.operations.cancel.label"
-                       icon="times"}}
+            <DButton @action={{route-action "cancelOperation"}} @class="btn-danger" @title="admin.backups.operations.cancel.title" @label="admin.backups.operations.cancel.label" @icon="times" />
           {{else}}
-            {{d-button action=(route-action "showStartBackupModal")
-                       class="btn-primary"
-                       title="admin.backups.operations.backup.title"
-                       label="admin.backups.operations.backup.label"
-                       icon="rocket"}}
+            <DButton @action={{route-action "showStartBackupModal"}} @class="btn-primary" @title="admin.backups.operations.backup.title" @label="admin.backups.operations.backup.label" @icon="rocket" />
           {{/if}}
         </div>
       </ul>
     </nav>
   </div>
 
-  {{plugin-outlet name="before-backup-list" connectorTagName="div"}}
+  <PluginOutlet @name="before-backup-list" @connectorTagName="div" />
 
   <div class="admin-container">
     {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/badges-award.hbs b/app/assets/javascripts/admin/addon/templates/badges-award.hbs
index 1020f6369df..b91297be450 100644
--- a/app/assets/javascripts/admin/addon/templates/badges-award.hbs
+++ b/app/assets/javascripts/admin/addon/templates/badges-award.hbs
@@ -1,4 +1,4 @@
-{{#d-section class="award-badge"}}
+<DSection @class="award-badge">
   <h1>{{i18n "admin.badges.mass_award.title"}}</h1>
   <p>{{i18n "admin.badges.mass_award.description"}}</p>
 
@@ -18,27 +18,21 @@
       </div>
       <div class="control-group">
         <label>
-          {{input type="checkbox" checked=replaceBadgeOwners}}
+          <Input @type="checkbox" @checked={{replaceBadgeOwners}} />
           {{i18n "admin.badges.mass_award.replace_owners"}}
         </label>
         {{#if model.multiple_grant}}
           <label class="grant-existing-holders">
-            {{input type="checkbox" checked=grantExistingHolders class="grant-existing-holders-checkbox"}}
+            <Input @type="checkbox" @checked={{grantExistingHolders}} class="grant-existing-holders-checkbox" />
             {{i18n "admin.badges.mass_award.grant_existing_holders"}}
           </label>
         {{/if}}
       </div>
-      {{d-button
-          class="btn-primary"
-          action=(action "massAward")
-          type="submit"
-          disabled=massAwardButtonDisabled
-          icon="certificate"
-          label="admin.badges.mass_award.perform"}}
-      {{#link-to "adminBadges.index" class="btn btn-normal"}}
+      <DButton @class="btn-primary" @action={{action "massAward"}} @type="submit" @disabled={{massAwardButtonDisabled}} @icon="certificate" @label="admin.badges.mass_award.perform" />
+      <LinkTo @route="adminBadges.index" class="btn btn-normal">
         {{d-icon "times"}}
         <span>{{i18n "cancel"}}</span>
-      {{/link-to}}
+      </LinkTo>
     </form>
     {{#if saving}}
       {{i18n "uploading"}}
@@ -73,4 +67,4 @@
   {{else}}
     <span class="badge-required">{{i18n "admin.badges.mass_award.no_badge_selected"}}</span>
   {{/if}}
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/admin/addon/templates/badges-index.hbs b/app/assets/javascripts/admin/addon/templates/badges-index.hbs
index 4f26fde7f30..240428ab45f 100644
--- a/app/assets/javascripts/admin/addon/templates/badges-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/badges-index.hbs
@@ -1,4 +1,4 @@
-{{#d-section class="current-badges"}}
+<DSection @class="current-badges">
   <div class="badge-intro admin-intro">
     <img src={{badgeIntroEmoji}} class="badge-intro-emoji" alt={{i18n "admin.badges.badge_intro.emoji"}}>
     <div class="content-wrapper">
@@ -13,4 +13,4 @@
       </div>
     </div>
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/admin/addon/templates/badges-show.hbs b/app/assets/javascripts/admin/addon/templates/badges-show.hbs
index 524a53c8121..75e1803afdd 100644
--- a/app/assets/javascripts/admin/addon/templates/badges-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/badges-show.hbs
@@ -1,16 +1,16 @@
-{{#d-section class="current-badge content-body"}}
+<DSection @class="current-badge content-body">
   <form class="form-horizontal">
     <div class="control-group">
       <label for="name">{{i18n "admin.badges.name"}}</label>
       {{#if readOnly}}
-        {{input type="text" name="name" value=buffered.name disabled=true}}
+        <Input @type="text" @name="name" @value={{buffered.name}} @disabled={{true}} />
         <p class="help">
-          {{#link-to "adminSiteText" (query-params q=(concat textCustomizationPrefix "name"))}}
+          <LinkTo @route="adminSiteText" @query={{hash q=(concat textCustomizationPrefix "name")}}>
             {{i18n "admin.badges.read_only_setting_help"}}
-          {{/link-to}}
+          </LinkTo>
         </p>
       {{else}}
-        {{input type="text" name="name" value=buffered.name}}
+        <Input @type="text" @name="name" @value={{buffered.name}} />
       {{/if}}
     </div>
 
@@ -18,114 +18,73 @@
       <label for="graphic">{{i18n "admin.badges.graphic"}}</label>
       <div class="radios inline-form full-width">
         <label class="radio-label" for="badge-icon">
-          {{radio-button
-            name="badge-icon"
-            id="badge-icon"
-            value="icon"
-            selection=selectedGraphicType
-            onChange=(action "changeGraphicType")
-          }}
+          <RadioButton @name="badge-icon" @id="badge-icon" @value="icon" @selection={{selectedGraphicType}} @onChange={{action "changeGraphicType"}} />
           <span>{{i18n "admin.badges.select_an_icon"}}</span>
         </label>
 
         <label class="radio-label" for="badge-image">
-          {{radio-button
-            name="badge-image"
-            id="badge-image"
-            value="image"
-            selection=selectedGraphicType
-            onChange=(action "changeGraphicType")
-          }}
+          <RadioButton @name="badge-image" @id="badge-image" @value="image" @selection={{selectedGraphicType}} @onChange={{action "changeGraphicType"}} />
           <span>{{i18n "admin.badges.upload_an_image"}}</span>
         </label>
       </div>
       {{#if imageUploaderSelected}}
-        {{uppy-image-uploader
-          id="badge-image-uploader"
-          imageUrl=buffered.image_url
-          type="badge_image"
-          onUploadDone=(action "setImage")
-          onUploadDeleted=(action "removeImage")
-          class="no-repeat contain-image"
-        }}
+        <UppyImageUploader @id="badge-image-uploader" @imageUrl={{buffered.image_url}} @type="badge_image" @onUploadDone={{action "setImage"}} @onUploadDeleted={{action "removeImage"}} @class="no-repeat contain-image" />
         <div class="control-instructions">
           <p class="help">{{i18n "admin.badges.image_help"}}</p>
         </div>
       {{else if iconSelectorSelected}}
-        {{icon-picker
-          name="icon"
-          value=buffered.icon
-          options=(hash maximum=1)
-          onChange=(action (mut buffered.icon))
-        }}
+        <IconPicker @name="icon" @value={{buffered.icon}} @options={{hash maximum=1}} @onChange={{action (mut buffered.icon)}} />
       {{/if}}
     </div>
 
     <div class="control-group">
       <label for="badge_type_id">{{i18n "admin.badges.badge_type"}}</label>
-      {{combo-box
-        name="badge_type_id"
-        value=buffered.badge_type_id
-        content=badgeTypes
-        onChange=(action (mut buffered.badge_type_id))
-        options=(hash
+      <ComboBox @name="badge_type_id" @value={{buffered.badge_type_id}} @content={{badgeTypes}} @onChange={{action (mut buffered.badge_type_id)}} @options={{hash
           disabled=readOnly
-        )
-      }}
+        }} />
     </div>
 
     <div class="control-group">
       <label for="badge_grouping_id">{{i18n "admin.badges.badge_grouping"}}</label>
 
       <div class="badge-grouping-control">
-        {{combo-box
-          name="badge_grouping_id"
-          value=buffered.badge_grouping_id
-          content=badgeGroupings
-          class="badge-selector"
-          nameProperty="name"
-          onChange=(action (mut buffered.badge_grouping_id))
-        }}
-        {{d-button
-          class="btn-default"
-          action=(route-action "editGroupings")
-          icon="pencil-alt"
-        }}
+        <ComboBox @name="badge_grouping_id" @value={{buffered.badge_grouping_id}} @content={{badgeGroupings}} @class="badge-selector" @nameProperty="name" @onChange={{action (mut buffered.badge_grouping_id)}} />
+        <DButton @class="btn-default" @action={{route-action "editGroupings"}} @icon="pencil-alt" />
       </div>
     </div>
 
     <div class="control-group">
       <label for="description">{{i18n "admin.badges.description"}}</label>
       {{#if buffered.system}}
-        {{textarea name="description" value=buffered.description disabled=true}}
+        <Textarea @name="description" @value={{buffered.description}} @disabled={{true}} />
         <p class="help">
-          {{#link-to "adminSiteText" (query-params q=(concat textCustomizationPrefix "description"))}}
+          <LinkTo @route="adminSiteText" @query={{hash q=(concat textCustomizationPrefix "description")}}>
             {{i18n "admin.badges.read_only_setting_help"}}
-          {{/link-to}}
+          </LinkTo>
         </p>
       {{else}}
-        {{textarea name="description" value=buffered.description}}
+        <Textarea @name="description" @value={{buffered.description}} />
       {{/if}}
     </div>
 
     <div class="control-group">
       <label for="long_description">{{i18n "admin.badges.long_description"}}</label>
       {{#if buffered.system}}
-        {{textarea name="long_description" value=buffered.long_description disabled=true}}
+        <Textarea @name="long_description" @value={{buffered.long_description}} @disabled={{true}} />
         <p class="help">
-          {{#link-to "adminSiteText" (query-params q=(concat textCustomizationPrefix "long_description"))}}
+          <LinkTo @route="adminSiteText" @query={{hash q=(concat textCustomizationPrefix "long_description")}}>
             {{i18n "admin.badges.read_only_setting_help"}}
-          {{/link-to}}
+          </LinkTo>
         </p>
       {{else}}
-        {{textarea name="long_description" value=buffered.long_description}}
+        <Textarea @name="long_description" @value={{buffered.long_description}} />
       {{/if}}
     </div>
 
     {{#if siteSettings.enable_badge_sql}}
       <div class="control-group">
         <label for="query">{{i18n "admin.badges.query"}}</label>
-        {{ace-editor content=buffered.query mode="sql" disabled=readOnly}}
+        <AceEditor @content={{buffered.query}} @mode="sql" @disabled={{readOnly}} />
       </div>
 
       {{#if hasQuery}}
@@ -138,29 +97,23 @@
 
         <div class="control-group">
           <label>
-            {{input type="checkbox" checked=buffered.auto_revoke disabled=readOnly}}
+            <Input @type="checkbox" @checked={{buffered.auto_revoke}} @disabled={{readOnly}} />
             {{i18n "admin.badges.auto_revoke"}}
           </label>
         </div>
 
         <div class="control-group">
           <label>
-            {{input type="checkbox" checked=buffered.target_posts disabled=readOnly}}
+            <Input @type="checkbox" @checked={{buffered.target_posts}} @disabled={{readOnly}} />
             {{i18n "admin.badges.target_posts"}}
           </label>
         </div>
 
         <div class="control-group">
           <label for="trigger">{{i18n "admin.badges.trigger"}}</label>
-          {{combo-box
-            name="trigger"
-            value=buffered.trigger
-            content=badgeTriggers
-            onChange=(action (mut buffered.trigger))
-            options=(hash
+          <ComboBox @name="trigger" @value={{buffered.trigger}} @content={{badgeTriggers}} @onChange={{action (mut buffered.trigger)}} @options={{hash
               disabled=readOnly
-            )
-          }}
+            }} />
         </div>
       {{/if}}
     {{/if}}
@@ -168,63 +121,54 @@
     <div class="control-group">
       <div>
         <label>
-          {{input type="checkbox" checked=buffered.allow_title}}
+          <Input @type="checkbox" @checked={{buffered.allow_title}} />
           {{i18n "admin.badges.allow_title"}}
         </label>
       </div>
 
       <div>
         <label>
-          {{input type="checkbox" checked=buffered.multiple_grant disabled=readOnly}}
+          <Input @type="checkbox" @checked={{buffered.multiple_grant}} @disabled={{readOnly}} />
           {{i18n "admin.badges.multiple_grant"}}
         </label>
       </div>
 
       <div>
         <label>
-          {{input type="checkbox" checked=buffered.listable disabled=readOnly}}
+          <Input @type="checkbox" @checked={{buffered.listable}} @disabled={{readOnly}} />
           {{i18n "admin.badges.listable"}}
         </label>
       </div>
 
       <div>
         <label>
-          {{input type="checkbox" checked=buffered.show_posts disabled=readOnly}}
+          <Input @type="checkbox" @checked={{buffered.show_posts}} @disabled={{readOnly}} />
           {{i18n "admin.badges.show_posts"}}
         </label>
       </div>
 
       <div>
         <label>
-          {{input type="checkbox" checked=buffered.enabled}}
+          <Input @type="checkbox" @checked={{buffered.enabled}} />
           {{i18n "admin.badges.enabled"}}
         </label>
       </div>
     </div>
 
     <div class="buttons">
-      {{d-button
-        class="btn-primary"
-        action=(action "save")
-        type="submit"
-        disabled=saving
-        label="admin.badges.save"}}
+      <DButton @class="btn-primary" @action={{action "save"}} @type="submit" @disabled={{saving}} @label="admin.badges.save" />
       <span class="saving">{{savingStatus}}</span>
       {{#unless readOnly}}
-        {{d-button
-          action=(action "destroy")
-          class="btn-danger"
-          label="admin.badges.delete"
-        }}
+        <DButton @action={{action "destroy"}} @class="btn-danger" @label="admin.badges.delete" />
       {{/unless}}
     </div>
   </form>
-{{/d-section}}
+</DSection>
 
 {{#if grant_count}}
   <div class="content-body current-badge-actions">
     <div>
-      {{#link-to "badges.show" this}}{{i18n "badges.granted" count=grant_count}}{{/link-to}}
+      <LinkTo @route="badges.show" @model={{this}}>{{i18n "badges.granted" count=grant_count}}</LinkTo>
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/badges.hbs b/app/assets/javascripts/admin/addon/templates/badges.hbs
index 2f3d3358d9e..37d09891067 100644
--- a/app/assets/javascripts/admin/addon/templates/badges.hbs
+++ b/app/assets/javascripts/admin/addon/templates/badges.hbs
@@ -2,27 +2,27 @@
   <div class="badges-header">
     <h3 class="badges-heading">{{i18n "admin.badges.title"}}</h3>
     <div class="create-new-badge">
-      {{#link-to "adminBadges.show" "new" class="btn btn-primary"}}
+      <LinkTo @route="adminBadges.show" @model="new" class="btn btn-primary">
         {{d-icon "plus"}}
         <span>{{i18n "admin.badges.new"}}</span>
-      {{/link-to}}
+      </LinkTo>
 
-      {{#link-to "adminBadges.award" "new" class="btn btn-default"}}
+      <LinkTo @route="adminBadges.award" @model="new" class="btn btn-default">
         {{d-icon "upload"}}
         <span>{{i18n "admin.badges.mass_award.title"}}</span>
-      {{/link-to}}
+      </LinkTo>
     </div>
   </div>
   <div class="content-list">
     <ul class="admin-badge-list">
       {{#each model as |badge|}}
         <li class="admin-badge-list-item">
-          {{#link-to selectedRoute badge.id}}
-            {{badge-button badge=badge}}
+          <LinkTo @route={{selectedRoute}} @model={{badge.id}}>
+            <BadgeButton @badge={{badge}} />
             {{#if badge.newBadge}}
               <span class="list-badge">{{i18n "filters.new.lower_title"}}</span>
             {{/if}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/each}}
     </ul>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-editable-field.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-editable-field.hbs
index 3dce5e6299a..c9617670f17 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-editable-field.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-editable-field.hbs
@@ -1,7 +1,7 @@
 <div class="field">{{i18n name}}</div>
 <div class="value">
   {{#if editing}}
-    {{text-field value=buffer autofocus="autofocus" autocomplete="off"}}
+    <TextField @value={{buffer}} @autofocus="autofocus" @autocomplete="off" />
   {{else}}
     <a href {{action "edit"}} class="inline-editable-field">
       <span>{{value}}</span>
@@ -10,9 +10,9 @@
 </div>
 <div class="controls">
   {{#if editing}}
-    {{d-button class="btn-default" action=(action "save") label="admin.user_fields.save"}}
+    <DButton @class="btn-default" @action={{action "save"}} @label="admin.user_fields.save" />
     <a href {{action "edit"}}>{{i18n "cancel"}}</a>
   {{else}}
-    {{d-button class="btn-default" action=(action "edit") icon="pencil-alt"}}
+    <DButton @class="btn-default" @action={{action "edit"}} @icon="pencil-alt" />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-report-table-header.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-report-table-header.hbs
index f03bb92f2c1..02d8da84444 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-report-table-header.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-report-table-header.hbs
@@ -1,5 +1,5 @@
 {{#if showSortingUI}}
-  {{d-button action=sortByLabel icon=sortIcon class="sort-btn"}}
+  <DButton @action={{sortByLabel}} @icon={{sortIcon}} @class="sort-btn" />
 {{/if}}
 
 {{#if label.htmlTitle}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-report-table-row.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-report-table-row.hbs
index 8feefaf1106..7a5c52a88df 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-report-table-row.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-report-table-row.hbs
@@ -1,3 +1,3 @@
 {{#each labels as |label|}}
-  {{admin-report-table-cell label=label data=data options=options}}
+  <AdminReportTableCell @label={{label}} @data={{data}} @options={{options}} />
 {{/each}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-report-table.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-report-table.hbs
index 6ff8b0b3e4b..5b6f6724d23 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-report-table.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-report-table.hbs
@@ -3,12 +3,7 @@
     <tr>
       {{#if model.computedLabels}}
         {{#each model.computedLabels as |label|}}
-          {{admin-report-table-header
-            showSortingUI=showSortingUI
-            currentSortDirection=sortDirection
-            currentSortLabel=sortLabel
-            label=label
-            sortByLabel=(action "sortByLabel" label)}}
+          <AdminReportTableHeader @showSortingUI={{showSortingUI}} @currentSortDirection={{sortDirection}} @currentSortLabel={{sortLabel}} @label={{label}} @sortByLabel={{action "sortByLabel" label}} />
         {{/each}}
       {{else}}
         {{#each model.data as |data|}}
@@ -19,7 +14,7 @@
   </thead>
   <tbody>
     {{#each paginatedData as |data|}}
-      {{admin-report-table-row data=data labels=model.computedLabels options=options}}
+      <AdminReportTableRow @data={{data}} @labels={{model.computedLabels}} @options={{options}} />
     {{/each}}
 
     {{#if showTotalForSample}}
@@ -65,10 +60,6 @@
 
 <div class="pagination">
   {{#each pages as |pageState|}}
-    {{d-button
-      translatedLabel=pageState.page
-      action=(action "changePage")
-      actionParam=pageState.index
-      class=pageState.class}}
+    <DButton @translatedLabel={{pageState.page}} @action={{action "changePage"}} @actionParam={{pageState.index}} @class={{pageState.class}} />
   {{/each}}
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-report-trust-level-counts.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-report-trust-level-counts.hbs
index ddd2282a165..be416ab37de 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-report-trust-level-counts.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-report-trust-level-counts.hbs
@@ -1,6 +1,6 @@
 <td class="title">{{report.title}}</td>
-<td class="value">{{#link-to "adminUsersList.show" "newuser"}}{{number (value-at-tl report.data level="0")}}{{/link-to}}</td>
-<td class="value">{{#link-to "adminUsersList.show" "basic"}}{{number (value-at-tl report.data level="1")}}{{/link-to}}</td>
-<td class="value">{{#link-to "adminUsersList.show" "member"}}{{number (value-at-tl report.data level="2")}}{{/link-to}}</td>
-<td class="value">{{#link-to "adminUsersList.show" "regular"}}{{number (value-at-tl report.data level="3")}}{{/link-to}}</td>
-<td class="value">{{#link-to "adminUsersList.show" "leader"}}{{number (value-at-tl report.data level="4")}}{{/link-to}}</td>
+<td class="value"><LinkTo @route="adminUsersList.show" @model="newuser">{{number (value-at-tl report.data level="0")}}</LinkTo></td>
+<td class="value"><LinkTo @route="adminUsersList.show" @model="basic">{{number (value-at-tl report.data level="1")}}</LinkTo></td>
+<td class="value"><LinkTo @route="adminUsersList.show" @model="member">{{number (value-at-tl report.data level="2")}}</LinkTo></td>
+<td class="value"><LinkTo @route="adminUsersList.show" @model="regular">{{number (value-at-tl report.data level="3")}}</LinkTo></td>
+<td class="value"><LinkTo @route="adminUsersList.show" @model="leader">{{number (value-at-tl report.data level="4")}}</LinkTo></td>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-report.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-report.hbs
index 892c802df18..04036efde43 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-report.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-report.hbs
@@ -1,15 +1,15 @@
 {{#unless isHidden}}
   {{#if isEnabled}}
-    {{#conditional-loading-section isLoading=isLoading}}
+    <ConditionalLoadingSection @isLoading={{isLoading}}>
       {{#if showHeader}}
         <div class="header">
           {{#if showTitle}}
             <ul class="breadcrumb">
               {{#if showAllReportsLink}}
                 <li class="item all-reports">
-                  {{#link-to "admin.dashboardReports" class="report-url"}}
+                  <LinkTo @route="admin.dashboardReports" class="report-url">
                     {{i18n "admin.dashboard.all_reports"}}
-                  {{/link-to}}
+                  </LinkTo>
                 </li>
 
                 {{#unless showNotFoundError}}
@@ -86,7 +86,7 @@
                 {{component modeComponent model=model options=options}}
 
                 {{#if model.relatedReport}}
-                  {{admin-report showFilteringUI=false dataSourceName=model.relatedReport.type}}
+                  <AdminReport @showFilteringUI={{false}} @dataSourceName={{model.relatedReport.type}} />
                 {{/if}}
               {{/if}}
             {{else}}
@@ -121,11 +121,7 @@
             {{#if showModes}}
               <div class="modes">
                 {{#each displayedModes as |displayedMode|}}
-                  {{d-button
-                    action=(action "onChangeMode")
-                    actionParam=displayedMode.mode
-                    class=displayedMode.cssClass
-                    icon=displayedMode.icon}}
+                  <DButton @action={{action "onChangeMode"}} @actionParam={{displayedMode.mode}} @class={{displayedMode.cssClass}} @icon={{displayedMode.icon}} />
                 {{/each}}
               </div>
             {{/if}}
@@ -138,12 +134,7 @@
               {{/if}}
               <div class="chart-groupings">
                 {{#each chartGroupings as |chartGrouping|}}
-                  {{d-button
-                    label=chartGrouping.label
-                    action=(action "changeGrouping" chartGrouping.id)
-                    class=chartGrouping.class
-                    disabled=chartGrouping.disabled
-                  }}
+                  <DButton @label={{chartGrouping.label}} @action={{action "changeGrouping" chartGrouping.id}} @class={{chartGrouping.class}} @disabled={{chartGrouping.disabled}} />
                 {{/each}}
               </div>
             {{/if}}
@@ -155,13 +146,7 @@
                 </span>
 
                 <div class="input">
-                  {{date-time-input-range
-                    from=startDate
-                    to=endDate
-                    onChange=(action "onChangeDateRange")
-                    showFromTime=false
-                    showToTime=false
-                  }}
+                  <DateTimeInputRange @from={{startDate}} @to={{endDate}} @onChange={{action "onChangeDateRange"}} @showFromTime={{false}} @showToTime={{false}} />
                 </div>
               </div>
             {{/if}}
@@ -184,29 +169,21 @@
 
             <div class="control">
               <div class="input">
-                {{d-button
-                  class="btn-default export-csv-btn"
-                  action=(action "exportCsv")
-                  label="admin.export_csv.button_text"
-                  icon="download"}}
+                <DButton @class="btn-default export-csv-btn" @action={{action "exportCsv"}} @label="admin.export_csv.button_text" @icon="download" />
               </div>
             </div>
 
             {{#if showRefresh}}
               <div class="control">
                 <div class="input">
-                  {{d-button
-                    class="refresh-report-btn btn-primary"
-                    action=(action "refreshReport")
-                    label="admin.dashboard.reports.refresh_report"
-                    icon="sync"}}
+                  <DButton @class="refresh-report-btn btn-primary" @action={{action "refreshReport"}} @label="admin.dashboard.reports.refresh_report" @icon="sync" />
                 </div>
               </div>
             {{/if}}
           </div>
         {{/if}}
       </div>
-    {{/conditional-loading-section}}
+    </ConditionalLoadingSection>
   {{else}}
     <div class="alert alert-info">
       {{html-safe disabledLabel}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
index a309f9aba5e..f9f923cde0a 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
@@ -3,18 +3,11 @@
     <ul class="nav nav-pills target">
       {{#each visibleTargets as |target|}}
         <li>
-          {{#link-to editRouteName
-            theme.id
-            target.name
-            fieldName
-            replace=true
-            title=field.title
-            class=(if target.edited "edited" "blank")
-          }}
+          <LinkTo @route={{editRouteName}} @models={{array theme.id target.name fieldName}} @replace={{true}} @title={{field.title}} class={{if target.edited "edited" "blank"}}>
             {{#if target.error}}{{d-icon "exclamation-triangle"}}{{/if}}
             {{#if target.icon}}{{d-icon target.icon}}{{/if}}
             {{i18n (concat "admin.customize.theme." target.name)}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/each}}
 
@@ -31,7 +24,7 @@
       <li class="spacer"></li>
       <li>
         <label>
-          {{input type="checkbox" checked=onlyOverridden click=(action "onlyOverriddenChanged" value="target.checked")}}
+          <Input @type="checkbox" @checked={{onlyOverridden}} @click={{action "onlyOverriddenChanged" value="target.checked"}} />
           {{i18n "admin.customize.theme.hide_unused_fields"}}
         </label>
       </li>
@@ -44,27 +37,20 @@
     <ul class="nav nav-pills fields">
       {{#each visibleFields as |field|}}
         <li>
-          {{#link-to editRouteName
-            theme.id
-            currentTargetName
-            field.name
-            replace=true
-            title=field.title
-            class=(if field.edited "edited" "blank")
-          }}
+          <LinkTo @route={{editRouteName}} @models={{array theme.id currentTargetName field.name}} @replace={{true}} @title={{field.title}} class={{if field.edited "edited" "blank"}}>
             {{#if field.error}}{{d-icon "exclamation-triangle"}}{{/if}}
             {{#if field.icon}}{{d-icon field.icon}}{{/if}}
             {{field.translatedName}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/each}}
 
       {{#if showAddField}}
         <li>
           {{#if addingField}}
-            {{input type=text value=newFieldName enter=(action "addField") escape-press=(action "cancelAddField")}}
-            {{d-button class="ok" action=(action "addField" newFieldName) icon="check"}}
-            {{d-button class="cancel" action=(action "cancelAddField") icon="times"}}
+            <Input @type={{text}} @value={{newFieldName}} @enter={{action "addField"}} @escape-press={{action "cancelAddField"}} />
+            <DButton @class="ok" @action={{action "addField" newFieldName}} @icon="check" />
+            <DButton @class="cancel" @action={{action "cancelAddField"}} @icon="times" />
           {{else}}
             <a href {{action "toggleAddField" currentTargetName}} class="no-text">
               {{d-icon "plus"}}
@@ -91,13 +77,4 @@
   <pre class="field-warning">{{html-safe warning}}</pre>
 {{/if}}
 
-{{ace-editor
-  content=activeSection
-  editorId=editorId
-  mode=activeSectionMode
-  autofocus="true"
-  placeholder=placeholder
-  htmlPlaceholder=true
-  save=(action "save")
-  setWarning=(action "setWarning")
-}}
+<AceEditor @content={{activeSection}} @editorId={{editorId}} @mode={{activeSectionMode}} @autofocus="true" @placeholder={{placeholder}} @htmlPlaceholder={{true}} @save={{action "save"}} @setWarning={{action "setWarning"}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-user-field-item.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-user-field-item.hbs
index 6cb97de9a0d..78535773269 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-user-field-item.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-user-field-item.hbs
@@ -1,51 +1,47 @@
 <div class="user-field">
   {{#if (or isEditing (not userField.id))}}
-    {{#admin-form-row label="admin.user_fields.type"}}
-      {{combo-box
-        content=fieldTypes
-        value=buffered.field_type
-        onChange=(action (mut buffered.field_type))
-      }}
-    {{/admin-form-row}}
+    <AdminFormRow @label="admin.user_fields.type">
+      <ComboBox @content={{fieldTypes}} @value={{buffered.field_type}} @onChange={{action (mut buffered.field_type)}} />
+    </AdminFormRow>
 
-    {{#admin-form-row label="admin.user_fields.name"}}
-      {{input value=buffered.name class="user-field-name" maxlength="255"}}
-    {{/admin-form-row}}
+    <AdminFormRow @label="admin.user_fields.name">
+      <Input @value={{buffered.name}} class="user-field-name" @maxlength="255" />
+    </AdminFormRow>
 
-    {{#admin-form-row label="admin.user_fields.description"}}
-      {{input value=buffered.description class="user-field-desc" maxlength="255"}}
-    {{/admin-form-row}}
+    <AdminFormRow @label="admin.user_fields.description">
+      <Input @value={{buffered.description}} class="user-field-desc" @maxlength="255" />
+    </AdminFormRow>
 
     {{#if bufferedFieldType.hasOptions}}
-      {{#admin-form-row label="admin.user_fields.options"}}
-        {{value-list values=buffered.options inputType="array"}}
-      {{/admin-form-row}}
+      <AdminFormRow @label="admin.user_fields.options">
+        <ValueList @values={{buffered.options}} @inputType="array" />
+      </AdminFormRow>
     {{/if}}
 
-    {{#admin-form-row wrapLabel="true"}}
-      {{input type="checkbox" checked=buffered.editable}} <span>{{i18n "admin.user_fields.editable.title"}}</span>
-    {{/admin-form-row}}
+    <AdminFormRow @wrapLabel="true">
+      <Input @type="checkbox" @checked={{buffered.editable}} /> <span>{{i18n "admin.user_fields.editable.title"}}</span>
+    </AdminFormRow>
 
-    {{#admin-form-row wrapLabel="true"}}
-      {{input type="checkbox" checked=buffered.required}} <span>{{i18n "admin.user_fields.required.title"}}</span>
-    {{/admin-form-row}}
+    <AdminFormRow @wrapLabel="true">
+      <Input @type="checkbox" @checked={{buffered.required}} /> <span>{{i18n "admin.user_fields.required.title"}}</span>
+    </AdminFormRow>
 
-    {{#admin-form-row wrapLabel="true"}}
-      {{input type="checkbox" checked=buffered.show_on_profile}} <span>{{i18n "admin.user_fields.show_on_profile.title"}}</span>
-    {{/admin-form-row}}
+    <AdminFormRow @wrapLabel="true">
+      <Input @type="checkbox" @checked={{buffered.show_on_profile}} /> <span>{{i18n "admin.user_fields.show_on_profile.title"}}</span>
+    </AdminFormRow>
 
-    {{#admin-form-row wrapLabel="true"}}
-      {{input type="checkbox" checked=buffered.show_on_user_card}} <span>{{i18n "admin.user_fields.show_on_user_card.title"}}</span>
-    {{/admin-form-row}}
+    <AdminFormRow @wrapLabel="true">
+      <Input @type="checkbox" @checked={{buffered.show_on_user_card}} /> <span>{{i18n "admin.user_fields.show_on_user_card.title"}}</span>
+    </AdminFormRow>
 
-    {{#admin-form-row wrapLabel="true"}}
-      {{input type="checkbox" checked=buffered.searchable}} <span>{{i18n "admin.user_fields.searchable.title"}}</span>
-    {{/admin-form-row}}
+    <AdminFormRow @wrapLabel="true">
+      <Input @type="checkbox" @checked={{buffered.searchable}} /> <span>{{i18n "admin.user_fields.searchable.title"}}</span>
+    </AdminFormRow>
 
-    {{#admin-form-row}}
-      {{d-button action=(action "save") class="btn-primary save" icon="check" label="admin.user_fields.save"}}
-      {{d-button action=(action "cancel") class="btn-danger cancel" icon="times" label="admin.user_fields.cancel"}}
-    {{/admin-form-row}}
+    <AdminFormRow>
+      <DButton @action={{action "save"}} @class="btn-primary save" @icon="check" @label="admin.user_fields.save" />
+      <DButton @action={{action "cancel"}} @class="btn-danger cancel" @icon="times" @label="admin.user_fields.cancel" />
+    </AdminFormRow>
   {{else}}
     <div class="row">
       <div class="form-display">
@@ -55,10 +51,10 @@
       </div>
       <div class="form-display field-type">{{fieldName}}</div>
       <div class="form-element controls">
-        {{d-button action=(action "edit") class="btn-default edit" icon="pencil-alt" label="admin.user_fields.edit"}}
-        {{d-button action=destroyAction actionParam=userField class="btn-danger cancel" icon="far-trash-alt" label="admin.user_fields.delete"}}
-        {{d-button action=moveUpAction actionParam=userField class="btn-default" icon="arrow-up" disabled=cantMoveUp}}
-        {{d-button action=moveDownAction actionParam=userField class="btn-default" icon="arrow-down" disabled=cantMoveDown}}
+        <DButton @action={{action "edit"}} @class="btn-default edit" @icon="pencil-alt" @label="admin.user_fields.edit" />
+        <DButton @action={{destroyAction}} @actionParam={{userField}} @class="btn-danger cancel" @icon="far-trash-alt" @label="admin.user_fields.delete" />
+        <DButton @action={{moveUpAction}} @actionParam={{userField}} @class="btn-default" @icon="arrow-up" @disabled={{cantMoveUp}} />
+        <DButton @action={{moveDownAction}} @actionParam={{userField}} @class="btn-default" @icon="arrow-down" @disabled={{cantMoveDown}} />
       </div>
     </div>
     <div class="row">{{flags}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event-chooser.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event-chooser.hbs
index 0ecb553d38e..ccad02b5f5d 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event-chooser.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event-chooser.hbs
@@ -1,3 +1,3 @@
-{{input id=typeName type="checkbox" name="event-choice" checked=enabled}}
+<Input @id={{typeName}} @type="checkbox" @name="event-choice" @checked={{enabled}} />
 <label for={{typeName}}>{{name}}</label>
 <p>{{details}}</p>
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event.hbs
index 11977f1398a..487d2efe32a 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-web-hook-event.hbs
@@ -5,9 +5,9 @@
 <div class="col timestamp">{{createdAt}}</div>
 <div class="col completion">{{completion}}</div>
 <div class="col actions">
-  {{d-button icon=expandRequestIcon action=(action "toggleRequest") label="admin.web_hooks.events.request"}}
-  {{d-button icon=expandResponseIcon action=(action "toggleResponse") label="admin.web_hooks.events.response"}}
-  {{d-button icon="sync" action=(action "redeliver") label="admin.web_hooks.events.redeliver"}}
+  <DButton @icon={{expandRequestIcon}} @action={{action "toggleRequest"}} @label="admin.web_hooks.events.request" />
+  <DButton @icon={{expandResponseIcon}} @action={{action "toggleResponse"}} @label="admin.web_hooks.events.response" />
+  <DButton @icon="sync" @action={{action "redeliver"}} @label="admin.web_hooks.events.redeliver" />
 </div>
 {{#if expandDetails}}
   <div class="details">
diff --git a/app/assets/javascripts/admin/addon/templates/components/dashboard-new-features.hbs b/app/assets/javascripts/admin/addon/templates/components/dashboard-new-features.hbs
index 74f1a90d9c4..f52f20bfa0a 100644
--- a/app/assets/javascripts/admin/addon/templates/components/dashboard-new-features.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/dashboard-new-features.hbs
@@ -5,7 +5,7 @@
 
   <div class="section-body {{columnCountClass}}">
     {{#each newFeatures as |feature|}}
-      {{dashboard-new-feature-item item=feature tagName=""}}
+      <DashboardNewFeatureItem @item={{feature}} @tagName="" />
     {{/each}}
   </div>
   <div class="section-footer">
@@ -14,6 +14,6 @@
         {{i18n "admin.dashboard.new_features.learn_more"}}
       </a>
     {{/if}}
-    {{d-button label="admin.dashboard.new_features.dismiss" class="btn-default new-features-dismiss" action=dismissNewFeatures }}
+    <DButton @label="admin.dashboard.new_features.dismiss" @class="btn-default new-features-dismiss" @action={{dismissNewFeatures}} />
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/dashboard-problems.hbs b/app/assets/javascripts/admin/addon/templates/components/dashboard-problems.hbs
index f866fa7e5ec..82a32c24792 100644
--- a/app/assets/javascripts/admin/addon/templates/components/dashboard-problems.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/dashboard-problems.hbs
@@ -8,7 +8,7 @@
     </div>
 
     <div class="section-body">
-      {{#conditional-loading-section isLoading=loadingProblems}}
+      <ConditionalLoadingSection @isLoading={{loadingProblems}}>
         {{#if highPriorityProblems.length}}
           <div class="problem-messages priority-high">
             <ul>
@@ -30,10 +30,10 @@
         </div>
 
         <p class="actions">
-          {{d-button action=refreshProblems class="btn-default" icon="sync" label="admin.dashboard.refresh_problems"}}
+          <DButton @action={{refreshProblems}} @class="btn-default" @icon="sync" @label="admin.dashboard.refresh_problems" />
           {{i18n "admin.dashboard.last_checked"}}: {{problemsTimestamp}}
         </p>
-      {{/conditional-loading-section}}
+      </ConditionalLoadingSection>
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs b/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
index cc510651d03..af2859bbe9a 100644
--- a/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
@@ -2,17 +2,17 @@
   <div class="admin-controls">
     <nav>
       <ul class="nav nav-pills">
-        <li>{{#link-to "adminCustomizeEmailStyle.edit" "html" replace=true}}{{i18n "admin.customize.email_style.html"}}{{/link-to}}</li>
-        <li>{{#link-to "adminCustomizeEmailStyle.edit" "css" replace=true}}{{i18n "admin.customize.email_style.css"}}{{/link-to}}</li>
+        <li><LinkTo @route="adminCustomizeEmailStyle.edit" @model="html" @replace={{true}}>{{i18n "admin.customize.email_style.html"}}</LinkTo></li>
+        <li><LinkTo @route="adminCustomizeEmailStyle.edit" @model="css" @replace={{true}}>{{i18n "admin.customize.email_style.css"}}</LinkTo></li>
       </ul>
     </nav>
   </div>
 </div>
 
-{{ace-editor content=editorContents mode=currentEditorMode editorId=editorId save=(action "save")}}
+<AceEditor @content={{editorContents}} @mode={{currentEditorMode}} @editorId={{editorId}} @save={{action "save"}} />
 
 <div class="admin-footer">
   <div class="buttons">
-    {{d-button action=(action "reset") disabled=resetDisabled class="btn-default" label="admin.customize.email_style.reset"}}
+    <DButton @action={{action "reset"}} @disabled={{resetDisabled}} @class="btn-default" @label="admin.customize.email_style.reset" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/embeddable-host.hbs b/app/assets/javascripts/admin/addon/templates/components/embeddable-host.hbs
index a5e4b04ad2e..83c445e3837 100644
--- a/app/assets/javascripts/admin/addon/templates/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/embeddable-host.hbs
@@ -1,27 +1,23 @@
 {{#if editing}}
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.host"}}</div>
-    {{input value=buffered.host placeholder="example.com" enter=(action "save") class="host-name" autofocus=true}}
+    <Input @value={{buffered.host}} placeholder="example.com" @enter={{action "save"}} class="host-name" @autofocus={{true}} />
   </td>
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.class_name"}}</div>
-    {{input value=buffered.class_name placeholder="class" enter=(action "save") class="class-name"}}
+    <Input @value={{buffered.class_name}} placeholder="class" @enter={{action "save"}} class="class-name" />
   </td>
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.allowed_paths"}}</div>
-    {{input value=buffered.allowed_paths placeholder="/blog/.*" enter=(action "save") class="path-allowlist"}}
+    <Input @value={{buffered.allowed_paths}} placeholder="/blog/.*" @enter={{action "save"}} class="path-allowlist" />
   </td>
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.category"}}</div>
-    {{category-chooser
-      value=categoryId
-      class="small"
-      onChange=(action (mut categoryId))
-    }}
+    <CategoryChooser @value={{categoryId}} @class="small" @onChange={{action (mut categoryId)}} />
   </td>
   <td class="editing-controls">
-    {{d-button icon="check" action=(action "save") class="btn-primary" disabled=cantSave}}
-    {{d-button icon="times" action=(action "cancel") class="btn-danger" disabled=host.isSaving}}
+    <DButton @icon="check" @action={{action "save"}} @class="btn-primary" @disabled={{cantSave}} />
+    <DButton @icon="times" @action={{action "cancel"}} @class="btn-danger" @disabled={{host.isSaving}} />
   </td>
 {{else}}
   <td><div class="label">{{i18n "admin.embedding.host"}}</div>{{host.host}}</td>
@@ -29,7 +25,7 @@
   <td><div class="label">{{i18n "admin.embedding.allowed_paths"}}</div>{{host.allowed_paths}}</td>
   <td><div class="label">{{i18n "admin.embedding.category"}}</div>{{category-badge host.category allowUncategorized=true}}</td>
   <td class="controls">
-    {{d-button icon="pencil-alt" action=(action "edit")}}
-    {{d-button icon="far-trash-alt" action=(action "delete") class="btn-danger"}}
+    <DButton @icon="pencil-alt" @action={{action "edit"}} />
+    <DButton @icon="far-trash-alt" @action={{action "delete"}} @class="btn-danger" />
   </td>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/embedding-setting.hbs b/app/assets/javascripts/admin/addon/templates/components/embedding-setting.hbs
index 5ac27a9981f..818cc0c60aa 100644
--- a/app/assets/javascripts/admin/addon/templates/components/embedding-setting.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/embedding-setting.hbs
@@ -1,11 +1,11 @@
 {{#if isCheckbox}}
   <label for={{inputId}}>
-    {{input checked=checked id=inputId type="checkbox"}}
+    <Input @checked={{checked}} @id={{inputId}} @type="checkbox" />
     {{i18n translationKey}}
   </label>
 {{else}}
   <label for={{inputId}}>{{i18n translationKey}}</label>
-  {{input value=value id=inputId placeholder=placeholder}}
+  <Input @value={{value}} @id={{inputId}} placeholder={{placeholder}} />
 {{/if}}
 
 <div class="clearfix"></div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/emoji-value-list.hbs b/app/assets/javascripts/admin/addon/templates/components/emoji-value-list.hbs
index fa27093cfcd..e21c562651e 100644
--- a/app/assets/javascripts/admin/addon/templates/components/emoji-value-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/emoji-value-list.hbs
@@ -2,13 +2,7 @@
   <ul class="values emoji-value-list">
     {{#each collection as |data index|}}
       <li class="value" data-index={{index}}>
-        {{d-button
-          action=(action "removeValue")
-          actionParam=data
-          icon="times"
-          class="remove-value-btn btn-small"
-          disabled=(not data.isEditable)
-        }}
+        <DButton @action={{action "removeValue"}} @actionParam={{data}} @icon="times" @class="remove-value-btn btn-small" @disabled={{not data.isEditable}} />
 
         <div class="value-input emoji-details {{if data.isEditable "can-edit"}} {{if data.isEditing "d-editor-textarea-wrapper"}}" {{on "click" (fn this.editValue index)}} role="button">
           <img height="15px" width="15px" src={{data.emojiUrl}} class="emoji-list-emoji">
@@ -16,16 +10,8 @@
         </div>
 
         {{#if showUpDownButtons}}
-          {{d-button
-            action=(action "shift" -1 index)
-            icon="arrow-up"
-            class="shift-up-value-btn btn-small"
-          }}
-          {{d-button
-            action=(action "shift" 1 index)
-            icon="arrow-down"
-            class="shift-down-value-btn btn-small"
-          }}
+          <DButton @action={{action "shift" -1 index}} @icon="arrow-up" @class="shift-up-value-btn btn-small" />
+          <DButton @action={{action "shift" 1 index}} @icon="arrow-down" @class="shift-down-value-btn btn-small" />
         {{/if}}
       </li>
     {{/each}}
@@ -33,20 +19,9 @@
 {{/if}}
 
 <div class="value">
-  {{d-button
-    action=(action "editValue")
-    actionParam=data
-    icon="discourse-emojis"
-    class="add-emoji-button d-editor-textarea-wrapper"
-    label="admin.site_settings.emoji_list.add_emoji_button.label"
-  }}
+  <DButton @action={{action "editValue"}} @actionParam={{data}} @icon="discourse-emojis" @class="add-emoji-button d-editor-textarea-wrapper" @label="admin.site_settings.emoji_list.add_emoji_button.label" />
 </div>
 
-{{emoji-picker
-  isActive=emojiPickerIsActive
-  isEditorFocused=isEditorFocused
-  emojiSelected=(action "emojiSelected")
-  onEmojiPickerClose=(action "closeEmojiPicker")
-}}
+<EmojiPicker @isActive={{emojiPickerIsActive}} @isEditorFocused={{isEditorFocused}} @emojiSelected={{action "emojiSelected"}} @onEmojiPickerClose={{action "closeEmojiPicker"}} />
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/flag-user-lists.hbs b/app/assets/javascripts/admin/addon/templates/components/flag-user-lists.hbs
index 78b30290ee3..ea058c8c4eb 100644
--- a/app/assets/javascripts/admin/addon/templates/components/flag-user-lists.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/flag-user-lists.hbs
@@ -4,15 +4,12 @@
   </div>
   <div class="flag-users">
     {{#each flaggedPost.post_actions as |postAction|}}
-      {{#flag-user user=postAction.user date=postAction.created_at}}
+      <FlagUser @user={{postAction.user}} @date={{postAction.created_at}}>
         <div class="flagger-flag-type">
           {{post-action-title postAction.post_action_type_id postAction.name_key}}
         </div>
-        {{user-flag-percentage
-          agreed=postAction.user.flags_agreed
-          disagreed=postAction.user.flags_disagreed
-          ignored=postAction.user.flags_ignored}}
-      {{/flag-user}}
+        <UserFlagPercentage @agreed={{postAction.user.flags_agreed}} @disagreed={{postAction.user.flags_disagreed}} @ignored={{postAction.user.flags_ignored}} />
+      </FlagUser>
     {{/each}}
   </div>
 </div>
@@ -24,12 +21,12 @@
     </div>
     <div class="flag-users">
       {{#each flaggedPost.post_actions as |postAction|}}
-        {{#flag-user user=postAction.disposed_by date=postAction.disposed_at}}
+        <FlagUser @user={{postAction.disposed_by}} @date={{postAction.disposed_at}}>
           {{disposition-icon postAction.disposition}}
           {{#if postAction.staff_took_action}}
             {{d-icon "gavel" title="admin.flags.took_action"}}
           {{/if}}
-        {{/flag-user}}
+        </FlagUser>
       {{/each}}
     </div>
   </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/flag-user.hbs b/app/assets/javascripts/admin/addon/templates/components/flag-user.hbs
index 0662859c2df..43f19485a81 100644
--- a/app/assets/javascripts/admin/addon/templates/components/flag-user.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/flag-user.hbs
@@ -1,12 +1,12 @@
 <div class="flag-user">
-  {{#link-to "adminUser" user.id user.username class="flag-user-avatar"}}
+  <LinkTo @route="adminUser" @models={{array user.id user.username}} class="flag-user-avatar">
     {{avatar user imageSize="small"}}
-  {{/link-to}}
+  </LinkTo>
   <div class="flag-user-details">
     <div class="flag-user-who">
-      {{#link-to "adminUser" user.id user.username class="flag-user-username"}}
+      <LinkTo @route="adminUser" @models={{array user.id user.username}} class="flag-user-username">
         {{user.username}}
-      {{/link-to}}
+      </LinkTo>
       <div title={{raw-date date}} class="flag-user-date">
         {{format-age date}}
       </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/inline-edit-checkbox.hbs b/app/assets/javascripts/admin/addon/templates/components/inline-edit-checkbox.hbs
index 0e8cfba7e08..9db2fcc1d5f 100644
--- a/app/assets/javascripts/admin/addon/templates/components/inline-edit-checkbox.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/inline-edit-checkbox.hbs
@@ -1,8 +1,8 @@
 <label class="checkbox-label">
-  {{input type="checkbox" disabled=disabled checked=buffer}}
+  <Input @type="checkbox" @disabled={{disabled}} @checked={{buffer}} />
   {{i18n labelKey}}
 </label>
 {{#if changed}}
-  {{d-button action=(action "apply") class="btn-primary btn-small submit-edit" icon="check"}}
-  {{d-button action=(action "cancel") class="btn-small cancel-edit" icon="times"}}
+  <DButton @action={{action "apply"}} @class="btn-primary btn-small submit-edit" @icon="check" />
+  <DButton @action={{action "cancel"}} @class="btn-small cancel-edit" @icon="times" />
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/install-theme-item.hbs b/app/assets/javascripts/admin/addon/templates/components/install-theme-item.hbs
index a44f6837aab..81169521131 100644
--- a/app/assets/javascripts/admin/addon/templates/components/install-theme-item.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/install-theme-item.hbs
@@ -1,4 +1,4 @@
-{{radio-button name="install-items" id=value value=value selection=selection}}
+<RadioButton @name="install-items" @id={{value}} @value={{value}} @selection={{selection}} />
 <label class="radio" for={{value}}>
   {{#if showIcon}}
     {{d-icon "plus"}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/penalty-post-action.hbs b/app/assets/javascripts/admin/addon/templates/components/penalty-post-action.hbs
index a796f090576..991f107d8db 100644
--- a/app/assets/javascripts/admin/addon/templates/components/penalty-post-action.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/penalty-post-action.hbs
@@ -4,17 +4,11 @@
       {{html-safe (i18n "admin.user.penalty_post_actions")}}
     </div>
   </label>
-  {{combo-box
-    value=postAction
-    content=penaltyActions
-    onChange=(action "penaltyChanged")
-  }}
+  <ComboBox @value={{postAction}} @content={{penaltyActions}} @onChange={{action "penaltyChanged"}} />
 </div>
 
 {{#if editing}}
   <div class="penalty-post-edit">
-    {{textarea
-      value=postEdit
-      class="post-editor"}}
+    <Textarea @value={{postEdit}} class="post-editor" />
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
index cbe3dc77478..4ff56bf1dbf 100644
--- a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
@@ -2,35 +2,12 @@
   <div class="inline-form">
     <label>{{i18n "admin.permalink.form.label"}}</label>
 
-    {{text-field
-      value=url
-      disabled=formSubmitted
-      class="permalink-url"
-      placeholderKey="admin.permalink.url"
-      autocorrect="off"
-      autocapitalize="off"
-    }}
+    <TextField @value={{url}} @disabled={{formSubmitted}} @class="permalink-url" @placeholderKey="admin.permalink.url" @autocorrect="off" @autocapitalize="off" />
 
-    {{combo-box
-      content=permalinkTypes
-      value=permalinkType
-      onChange=(action (mut permalinkType))
-      class="permalink-type"
-    }}
+    <ComboBox @content={{permalinkTypes}} @value={{permalinkType}} @onChange={{action (mut permalinkType)}} @class="permalink-type" />
 
-    {{text-field
-      value=permalinkTypeValue
-      disabled=formSubmitted
-      placeholderKey=permalinkTypePlaceholder
-      autocorrect="off"
-      autocapitalize="off"
-      keyDown=(action "submitFormOnEnter")
-    }}
+    <TextField @value={{permalinkTypeValue}} @disabled={{formSubmitted}} @placeholderKey={{permalinkTypePlaceholder}} @autocorrect="off" @autocapitalize="off" @keyDown={{action "submitFormOnEnter"}} />
 
-    {{d-button
-      action=(action "onSubmit")
-      disabled=formSubmitted
-      label="admin.permalink.form.add"
-    }}
+    <DButton @action={{action "onSubmit"}} @disabled={{formSubmitted}} @label="admin.permalink.form.add" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/report-filters/bool.hbs b/app/assets/javascripts/admin/addon/templates/components/report-filters/bool.hbs
index de106adfd8c..ee9caaaef69 100644
--- a/app/assets/javascripts/admin/addon/templates/components/report-filters/bool.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/report-filters/bool.hbs
@@ -1,5 +1 @@
-{{input
-  type="checkbox"
-  checked=checked
-  click=(action "onChange")
-}}
+<Input @type="checkbox" @checked={{checked}} @click={{action "onChange"}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/report-filters/category.hbs b/app/assets/javascripts/admin/addon/templates/components/report-filters/category.hbs
index bdf354e188b..d6e63f575a2 100644
--- a/app/assets/javascripts/admin/addon/templates/components/report-filters/category.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/report-filters/category.hbs
@@ -1,5 +1 @@
-{{search-advanced-category-chooser
-  value=category
-  onChange=(action "onChange")
-  options=(hash filterable=true)
-}}
+<SearchAdvancedCategoryChooser @value={{category}} @onChange={{action "onChange"}} @options={{hash filterable=true}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/report-filters/group.hbs b/app/assets/javascripts/admin/addon/templates/components/report-filters/group.hbs
index c306bcc68ff..eb11cf42524 100644
--- a/app/assets/javascripts/admin/addon/templates/components/report-filters/group.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/report-filters/group.hbs
@@ -1,11 +1,5 @@
-{{combo-box
-  valueProperty="value"
-  content=groupOptions
-  value=groupId
-  onChange=(action "onChange")
-  options=(hash
+<ComboBox @valueProperty="value" @content={{groupOptions}} @value={{groupId}} @onChange={{action "onChange"}} @options={{hash
     allowAny=filter.allow_any
     filterable=true
     none="admin.dashboard.reports.groups"
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/report-filters/list.hbs b/app/assets/javascripts/admin/addon/templates/components/report-filters/list.hbs
index e01c74268bd..584b028cf73 100644
--- a/app/assets/javascripts/admin/addon/templates/components/report-filters/list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/report-filters/list.hbs
@@ -1,10 +1,5 @@
-{{combo-box
-  content=filter.choices
-  value=filter.default
-  onChange=(action "onChange")
-  options=(hash
+<ComboBox @content={{filter.choices}} @value={{filter.default}} @onChange={{action "onChange"}} @options={{hash
     allowAny=filter.allow_any
     filterable=true
     none="admin.dashboard.report_filter_any"
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs b/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
index a78a6c82e17..ce7bb6e485c 100644
--- a/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
@@ -1,10 +1,6 @@
 <label>{{i18n "admin.logs.screened_ips.form.label"}}</label>
-{{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
+<TextField @value={{ip_address}} @disabled={{formSubmitted}} @class="ip-address-input" @placeholderKey="admin.logs.screened_ips.form.ip_address" @autocorrect="off" @autocapitalize="off" />
 
-{{combo-box
-  content=actionNames
-  value=actionName
-  onChange=(action (mut actionName))
-}}
+<ComboBox @content={{actionNames}} @value={{actionName}} @onChange={{action (mut actionName)}} />
 
-{{d-button class="btn-default" action=(action "submit") disabled=formSubmitted label="admin.logs.screened_ips.form.add"}}
+<DButton @class="btn-default" @action={{action "submit"}} @disabled={{formSubmitted}} @label="admin.logs.screened_ips.form.add" />
diff --git a/app/assets/javascripts/admin/addon/templates/components/secret-value-list.hbs b/app/assets/javascripts/admin/addon/templates/components/secret-value-list.hbs
index 5674d6d7d7d..2429f9ad8a8 100644
--- a/app/assets/javascripts/admin/addon/templates/components/secret-value-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/secret-value-list.hbs
@@ -2,23 +2,18 @@
   <div class="values">
     {{#each collection as |value index|}}
       <div class="value" data-index={{index}}>
-        {{d-button action=(action "removeValue")
-                   actionParam=value
-                   icon="times"
-                   class="remove-value-btn btn-small"}}
-        {{input value=value.key class="value-input" focus-out=(action "changeKey" index)}}
-        {{input value=value.secret class="value-input" focus-out=(action "changeSecret" index) type=(if isSecret "password" "text")}}
+        <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
+        <Input @value={{value.key}} class="value-input" @focus-out={{action "changeKey" index}} />
+        <Input @value={{value.secret}} class="value-input" @focus-out={{action "changeSecret" index}} @type={{if isSecret "password" "text"}} />
       </div>
     {{/each}}
   </div>
 {{/if}}
 
 <div class="value">
-  {{text-field value=newKey class="new-value-input key" placeholder=setting.placeholder.key}}
-  {{input type="password" value=newSecret class="new-value-input secret" placeholder=setting.placeholder.value}}
-  {{d-button action=(action "addValue")
-             icon="plus"
-             class="add-value-btn btn-small"}}
+  <TextField @value={{newKey}} @class="new-value-input key" @placeholder={{setting.placeholder.key}} />
+  <Input @type="password" @value={{newSecret}} class="new-value-input secret" placeholder={{setting.placeholder.value}} />
+  <DButton @action={{action "addValue"}} @icon="plus" @class="add-value-btn btn-small" />
 </div>
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/silence-details.hbs b/app/assets/javascripts/admin/addon/templates/components/silence-details.hbs
index c0a37f55bb3..84727644ba8 100644
--- a/app/assets/javascripts/admin/addon/templates/components/silence-details.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/silence-details.hbs
@@ -4,11 +4,7 @@
       {{html-safe (i18n "admin.user.silence_reason_label")}}
     </div>
   </label>
-  {{text-field
-    value=reason
-    class="silence-reason"
-    placeholderKey="admin.user.silence_reason_placeholder"
-  }}
+  <TextField @value={{reason}} @class="silence-reason" @placeholderKey="admin.user.silence_reason_placeholder" />
 </div>
 
 <label>
@@ -16,7 +12,4 @@
     {{i18n "admin.user.silence_message"}}
   </div>
 </label>
-{{textarea
-  value=message
-  class="silence-message"
-  placeholder=(i18n "admin.user.silence_message_placeholder")}}
+<Textarea @value={{message}} class="silence-message" placeholder={{i18n "admin.user.silence_message_placeholder"}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs b/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs
index fab64bc92d0..0161851fce0 100644
--- a/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs
@@ -2,31 +2,13 @@
   <div class="values">
     {{#each collection as |value index|}}
       <div data-index={{index}} class="value">
-        {{d-button
-          action=(action "removeValue")
-          actionParam=value
-          icon="times"
-          class="remove-value-btn btn-small"
-        }}
+        <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
 
-        {{input
-          title=value
-          value=value
-          class="value-input"
-          focus-out=(action "changeValue" index)
-        }}
+        <Input @title={{value}} @value={{value}} class="value-input" @focus-out={{action "changeValue" index}} />
 
         {{#if showUpDownButtons}}
-          {{d-button
-            action=(action "shift" -1 index)
-            icon="arrow-up"
-            class="shift-up-value-btn btn-small"
-          }}
-          {{d-button
-            action=(action "shift" 1 index)
-            icon="arrow-down"
-            class="shift-down-value-btn btn-small"
-          }}
+          <DButton @action={{action "shift" -1 index}} @icon="arrow-up" @class="shift-up-value-btn btn-small" />
+          <DButton @action={{action "shift" 1 index}} @icon="arrow-down" @class="shift-down-value-btn btn-small" />
         {{/if}}
       </div>
 
@@ -36,21 +18,7 @@
 {{/if}}
 
 <div class="simple-list-input">
-  {{input
-    type="text"
-    value=newValue
-    placeholderKey="admin.site_settings.simple_list.add_item"
-    class="add-value-input"
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-  }}
+  <Input @type="text" @value={{newValue}} @placeholderKey="admin.site_settings.simple_list.add_item" class="add-value-input" @autocomplete="off" @autocorrect="off" @autocapitalize="off" />
 
-  {{d-button
-      action=(action "addValue")
-      actionParam=newValue
-      disabled=inputEmpty
-      icon="plus"
-      class="add-value-btn btn-small"
-    }}
+  <DButton @action={{action "addValue"}} @actionParam={{newValue}} @disabled={{inputEmpty}} @icon="plus" @class="add-value-btn btn-small" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-customization-change-details.hbs b/app/assets/javascripts/admin/addon/templates/components/site-customization-change-details.hbs
index a3358b195b8..501b0105927 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-customization-change-details.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-customization-change-details.hbs
@@ -2,17 +2,17 @@
   <b>{{i18n "admin.customize.enabled"}}</b>: {{change.enabled}}
 </section>
 
-{{site-customization-change-field field=change.stylesheet name="admin.customize.css"}}
-{{site-customization-change-field icon="mobile" field=change.mobile_stylesheet name="admin.customize.css"}}
+<SiteCustomizationChangeField @field={{change.stylesheet}} @name="admin.customize.css" />
+<SiteCustomizationChangeField @icon="mobile" @field={{change.mobile_stylesheet}} @name="admin.customize.css" />
 
-{{site-customization-change-field field=change.header name="admin.customize.header"}}
-{{site-customization-change-field icon="mobile" field=change.mobile_header name="admin.customize.header"}}
+<SiteCustomizationChangeField @field={{change.header}} @name="admin.customize.header" />
+<SiteCustomizationChangeField @icon="mobile" @field={{change.mobile_header}} @name="admin.customize.header" />
 
-{{site-customization-change-field field=change.top name="admin.customize.top"}}
-{{site-customization-change-field icon="mobile" field=change.mobile_top name="admin.customize.top"}}
+<SiteCustomizationChangeField @field={{change.top}} @name="admin.customize.top" />
+<SiteCustomizationChangeField @icon="mobile" @field={{change.mobile_top}} @name="admin.customize.top" />
 
-{{site-customization-change-field field=change.footer name="admin.customize.footer"}}
-{{site-customization-change-field icon="mobile" field=change.mobile_footer name="admin.customize.footer"}}
+<SiteCustomizationChangeField @field={{change.footer}} @name="admin.customize.footer" />
+<SiteCustomizationChangeField @icon="mobile" @field={{change.mobile_footer}} @name="admin.customize.footer" />
 
-{{site-customization-change-field icon="file-text-o" field=change.head_tag name="admin.customize.head_tag.text"}}
-{{site-customization-change-field icon="file-text-o" field=change.body_tag name="admin.customize.body_tag.text"}}
+<SiteCustomizationChangeField @icon="file-text-o" @field={{change.head_tag}} @name="admin.customize.head_tag.text" />
+<SiteCustomizationChangeField @icon="file-text-o" @field={{change.body_tag}} @name="admin.customize.body_tag.text" />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-customization-change-field.hbs b/app/assets/javascripts/admin/addon/templates/components/site-customization-change-field.hbs
index b11022cb3c6..3c4d3fa099c 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-customization-change-field.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-customization-change-field.hbs
@@ -2,6 +2,6 @@
   <section class="field">
     <b>{{i18n name}}</b>: ({{i18n "character_count" count=field.length}})
     <br>
-    {{textarea value=field class="plain"}}
+    <Textarea @value={{field}} class="plain" />
   </section>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-setting.hbs b/app/assets/javascripts/admin/addon/templates/components/site-setting.hbs
index 01e47fee830..fd6910d0e53 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-setting.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-setting.hbs
@@ -2,11 +2,11 @@
   <h3>
     {{#if staffLogFilter}}
       {{settingName}}
-      {{#link-to "adminLogs.staffActionLogs" (query-params filters=staffLogFilter force_refresh=true) title=(i18n "admin.settings.history")}}
+      <LinkTo @route="adminLogs.staffActionLogs" @query={{hash filters=staffLogFilter force_refresh=true}} @title={{i18n "admin.settings.history"}}>
         <span class="history-icon">
           {{d-icon "history"}}
         </span>
-      {{/link-to}}
+      </LinkTo>
     {{else}}
       {{settingName}}
     {{/if}}
@@ -20,12 +20,12 @@
 </div>
 {{#if dirty}}
   <div class="setting-controls">
-    {{d-button class="ok" action=(action "update") icon="check"}}
-    {{d-button class="cancel" action=(action "cancel") icon="times"}}
+    <DButton @class="ok" @action={{action "update"}} @icon="check" />
+    <DButton @class="cancel" @action={{action "cancel"}} @icon="times" />
   </div>
 {{else if setting.overridden}}
   {{#if setting.secret}}
-    {{d-button action=(action "toggleSecret") icon="far-eye-slash"}}
+    <DButton @action={{action "toggleSecret"}} @icon="far-eye-slash" />
   {{/if}}
-  {{d-button class="btn-default undo" action=(action "resetDefault") icon="undo" label="admin.settings.reset"}}
+  <DButton @class="btn-default undo" @action={{action "resetDefault"}} @icon="undo" @label="admin.settings.reset" />
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/bool.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/bool.hbs
index 848c68145c6..29ec01159fa 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/bool.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/bool.hbs
@@ -1,6 +1,6 @@
 <label>
-  {{input type="checkbox" checked=enabled}}
+  <Input @type="checkbox" @checked={{enabled}} />
   <span>{{html-safe setting.description}}</span>
 </label>
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/category-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/category-list.hbs
index a551fd9f126..5019261a245 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/category-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/category-list.hbs
@@ -1,7 +1,4 @@
-{{category-selector
-  categories=selectedCategories
-  onChange=(action "onChangeSelectedCategories")
-}}
+<CategorySelector @categories={{selectedCategories}} @onChange={{action "onChangeSelectedCategories"}} />
 
 <div class="desc">{{html-safe setting.description}}</div>
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/category.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/category.hbs
index 27a80e7aaaf..2986fef49e3 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/category.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/category.hbs
@@ -1,10 +1,6 @@
-{{category-chooser
-  value=value
-  onChange=(action (mut value))
-  options=(hash
+<CategoryChooser @value={{value}} @onChange={{action (mut value)}} @options={{hash
     allowUncategorized=true
     none=(eq setting.default "")
-  )
-}}
-{{setting-validation-message message=validationMessage}}
+  }} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/color.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/color.hbs
index 7b9b5bf2a88..05d28ae1ada 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/color.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/color.hbs
@@ -1,9 +1,3 @@
-{{color-input
-  hexValue=(readonly value)
-  valid=valid
-  onlyHex=false
-  styleSelection=false
-  onChangeColor=(action "onChangeColor")
-}}
-{{setting-validation-message message=validationMessage}}
+<ColorInput @hexValue={{readonly value}} @valid={{valid}} @onlyHex={{false}} @styleSelection={{false}} @onChangeColor={{action "onChangeColor"}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/compact-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/compact-list.hbs
index c896d5ecc35..6d1f56e6bd9 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/compact-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/compact-list.hbs
@@ -1,13 +1,6 @@
-{{list-setting
-  value=settingValue
-  settingName=setting.setting
-  choices=settingChoices
-  onChange=(action "onChangeListSetting")
-  onChangeChoices=(action "onChangeChoices")
-  options=(hash
+<ListSetting @value={{settingValue}} @settingName={{setting.setting}} @choices={{settingChoices}} @onChange={{action "onChangeListSetting"}} @onChangeChoices={{action "onChangeChoices"}} @options={{hash
     allowAny=allowAny
-  )
-}}
+  }} />
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/emoji-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/emoji-list.hbs
index 50d1d18898b..1a42748ff11 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/emoji-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/emoji-list.hbs
@@ -1,3 +1,3 @@
-{{emoji-value-list setting=setting values=value}}
+<EmojiValueList @setting={{setting}} @values={{value}} />
 <div class="desc">{{html-safe setting.description}}</div>
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/enum.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/enum.hbs
index 265301db6a4..e11ec645827 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/enum.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/enum.hbs
@@ -1,18 +1,11 @@
-{{combo-box
-  content=setting.validValues
-  value=value
-  onChange=(action (mut value))
-  valueProperty=setting.computedValueProperty
-  nameProperty=setting.computedNameProperty
-  options=(hash
+<ComboBox @content={{setting.validValues}} @value={{value}} @onChange={{action (mut value)}} @valueProperty={{setting.computedValueProperty}} @nameProperty={{setting.computedNameProperty}} @options={{hash
     castInteger=true
     allowAny=setting.allowsNone
-  )
-}}
+  }} />
 
 {{preview}}
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
 
 <div class="desc">
   {{html-safe setting.description}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/group-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/group-list.hbs
index 9ad465c8d48..96a009b3490 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/group-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/group-list.hbs
@@ -1,10 +1,3 @@
-{{list-setting
-  value=settingValue
-  choices=groupChoices
-  settingName="name"
-  nameProperty=nameProperty
-  valueProperty=valueProperty
-  onChange=(action "onChangeGroupListSetting")
-}}
-{{setting-validation-message message=validationMessage}}
+<ListSetting @value={{settingValue}} @choices={{groupChoices}} @settingName="name" @nameProperty={{nameProperty}} @valueProperty={{valueProperty}} @onChange={{action "onChangeGroupListSetting"}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/host-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/host-list.hbs
index 3460bf78df3..8953f1350ad 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/host-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/host-list.hbs
@@ -1,12 +1,6 @@
-{{list-setting
-  value=settingValue
-  settingName=setting.setting
-  choices=settingValue
-  onChange=(action "onChange")
-  options=(hash
+<ListSetting @value={{settingValue}} @settingName={{setting.setting}} @choices={{settingValue}} @onChange={{action "onChange"}} @options={{hash
     allowAny=allowAny
-  )
-}}
+  }} />
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/list.hbs
index 753b9ba9871..d0cbacd5ea7 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/list.hbs
@@ -1,3 +1,3 @@
-{{value-list values=value inputDelimiter="|" choices=setting.choices}}
-{{setting-validation-message message=validationMessage}}
+<ValueList @values={{value}} @inputDelimiter="|" @choices={{setting.choices}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/named-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/named-list.hbs
index 8e2a8aac50f..9f3393704ab 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/named-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/named-list.hbs
@@ -1,14 +1,6 @@
-{{list-setting
-  value=settingValue
-  settingName=setting.setting
-  choices=settingChoices
-  nameProperty="name"
-  valueProperty="value"
-  onChange=(action "onChangeListSetting")
-  options=(hash
+<ListSetting @value={{settingValue}} @settingName={{setting.setting}} @choices={{settingChoices}} @nameProperty="name" @valueProperty="value" @onChange={{action "onChangeListSetting"}} @options={{hash
     allowAny=allowAny
-  )
-}}
+  }} />
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/secret-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/secret-list.hbs
index 08b9992e882..26010dd8048 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/secret-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/secret-list.hbs
@@ -1,3 +1,3 @@
-{{secret-value-list setting=setting values=value isSecret=isSecret}}
-{{setting-validation-message message=validationMessage}}
+<SecretValueList @setting={{setting}} @values={{value}} @isSecret={{isSecret}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/simple-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/simple-list.hbs
index 3eca57db83a..0d34eee4b8b 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/simple-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/simple-list.hbs
@@ -1,3 +1,3 @@
-{{simple-list values=value inputDelimiter=inputDelimiter onChange=(action "onChange")}}
-{{setting-validation-message message=validationMessage}}
+<SimpleList @values={{value}} @inputDelimiter={{inputDelimiter}} @onChange={{action "onChange"}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/string.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/string.hbs
index 09eb918646f..28d4a0a44ad 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/string.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/string.hbs
@@ -1,16 +1,12 @@
 {{#if setting.textarea}}
-  {{textarea value=value classNames="input-setting-textarea"}}
+  <Textarea @value={{value}} @classNames="input-setting-textarea" />
 {{else if setting.json_schema}}
-  {{d-button
-    action=(action "launchJsonEditorModal")
-    icon="pencil-alt"
-    label="admin.site_settings.json_schema.edit"
-  }}
+  <DButton @action={{action "launchJsonEditorModal"}} @icon="pencil-alt" @label="admin.site_settings.json_schema.edit" />
 {{else if isSecret}}
-  {{input type="password" value=value classNames="input-setting-string"}}
+  <Input @type="password" @value={{value}} @classNames="input-setting-string" />
 {{else}}
-  {{text-field value=value classNames="input-setting-string"}}
+  <TextField @value={{value}} @classNames="input-setting-string" />
 {{/if}}
 
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/tag-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/tag-list.hbs
index a326f2a6562..2f0375bb6b5 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/tag-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/tag-list.hbs
@@ -1,11 +1,6 @@
-{{tag-chooser
-  tags=selectedTags
-  onChange=(action "changeSelectedTags")
-  everyTag=true
-  options=(hash
+<TagChooser @tags={{selectedTags}} @onChange={{action "changeSelectedTags"}} @everyTag={{true}} @options={{hash
     allowAny=false
     maximum=null
-  )
-}}
+  }} />
 <div class="desc">{{html-safe setting.description}}</div>
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/upload.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/upload.hbs
index 7d2c4b4e03c..d68639ddd66 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/upload.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/upload.hbs
@@ -1,9 +1,3 @@
-{{uppy-image-uploader
-  imageUrl=value
-  placeholderUrl=setting.placeholder
-  additionalParams=(hash for_site_setting=true)
-  type="site_setting"
-  id=(concat "site-setting-image-uploader-" setting.setting)
-}}
+<UppyImageUploader @imageUrl={{value}} @placeholderUrl={{setting.placeholder}} @additionalParams={{hash for_site_setting=true}} @type="site_setting" @id={{concat "site-setting-image-uploader-" setting.setting}} />
 <div class="desc">{{html-safe setting.description}}</div>
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/uploaded-image-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/uploaded-image-list.hbs
index df019bae62f..22b35fd33a8 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/uploaded-image-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/uploaded-image-list.hbs
@@ -1,3 +1,3 @@
-{{d-button label="admin.site_settings.uploaded_image_list.label" action=(action "showUploadModal") actionParam=(hash value=value setting=setting)}}
+<DButton @label="admin.site_settings.uploaded_image_list.label" @action={{action "showUploadModal"}} @actionParam={{hash value=value setting=setting}} />
 <div class="desc">{{html-safe setting.description}}</div>
-{{setting-validation-message message=validationMessage}}
+<SettingValidationMessage @message={{validationMessage}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/url-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/url-list.hbs
index 7d22100489d..b9f79d51b05 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/url-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/url-list.hbs
@@ -1,3 +1,3 @@
-{{value-list values=value addKey="admin.site_settings.add_url"}}
-{{setting-validation-message message=validationMessage}}
+<ValueList @values={{value}} @addKey="admin.site_settings.add_url" />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-settings/value-list.hbs b/app/assets/javascripts/admin/addon/templates/components/site-settings/value-list.hbs
index 52a0fcc5c9f..3265f00790c 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-settings/value-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-settings/value-list.hbs
@@ -1,3 +1,3 @@
-{{value-list values=value}}
-{{setting-validation-message message=validationMessage}}
+<ValueList @values={{value}} />
+<SettingValidationMessage @message={{validationMessage}} />
 <div class="desc">{{html-safe setting.description}}</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/site-text-summary.hbs b/app/assets/javascripts/admin/addon/templates/components/site-text-summary.hbs
index 42323a18340..181e885f680 100644
--- a/app/assets/javascripts/admin/addon/templates/components/site-text-summary.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/site-text-summary.hbs
@@ -1,4 +1,4 @@
-{{d-button label="admin.site_text.edit" class="btn-default edit" action=editAction actionParam=siteText}}
+<DButton @label="admin.site_text.edit" @class="btn-default edit" @action={{editAction}} @actionParam={{siteText}} />
 <h3 class="site-text-id">{{siteText.id}}</h3>
 <div class="site-text-value">{{siteText.value}}</div>
 
diff --git a/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs b/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs
index 97fcbd8dcd0..309e9206848 100644
--- a/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/suspension-details.hbs
@@ -11,16 +11,9 @@
   <label>
     {{i18n "admin.user.suspend_reason_title"}}
   </label>
-  {{combo-box
-    content=reasons
-    value=selectedReason
-    class="suspend-reason"
-    onChange=(action setSelectedReason)}}
+  <ComboBox @content={{reasons}} @value={{selectedReason}} @class="suspend-reason" @onChange={{action setSelectedReason}} />
   {{#if isCustomReason}}
-    {{text-field
-      value=customReason
-      class="suspend-reason"
-      onChange=(action setCustomReason)}}
+    <TextField @value={{customReason}} @class="suspend-reason" @onChange={{action setCustomReason}} />
   {{/if}}
 </div>
 
@@ -29,7 +22,4 @@
     {{i18n "admin.user.suspend_message"}}
   </div>
 </label>
-{{textarea
-  value=message
-  class="suspend-message"
-  placeholder=(i18n "admin.user.suspend_message_placeholder")}}
+<Textarea @value={{message}} class="suspend-message" placeholder={{i18n "admin.user.suspend_message_placeholder"}} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs b/app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs
index 70a704ee463..c1c9e7fced3 100644
--- a/app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/themes-list-item.hbs
@@ -1,5 +1,5 @@
 <div class="inner-wrapper">
-  {{plugin-outlet name="admin-customize-themes-list-item" tagName="span" connectorTagName="span" args=(hash theme=theme)}}
+  <PluginOutlet @name="admin-customize-themes-list-item" @tagName="span" @connectorTagName="span" @args={{hash theme=theme}} />
 
   <div class="info">
     <span class="name">
diff --git a/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs b/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
index 5639dc42c1e..6c268550975 100644
--- a/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
@@ -1,36 +1,19 @@
 <div class="themes-list-header">
-  {{d-button
-    action=(action "changeView")
-    actionParam=THEMES
-    class=(concat "themes-tab " "tab " (if themesTabActive "btn-danger active" ""))
-    label="admin.customize.theme.title"
-  }}
-  {{d-button
-    action=(action "changeView")
-    actionParam=COMPONENTS
-    class=(concat "components-tab " "tab " (if componentsTabActive "btn-danger active" ""))
-    label="admin.customize.theme.components"
-    icon="puzzle-piece"
-  }}
+  <DButton @action={{action "changeView"}} @actionParam={{THEMES}} @class={{concat "themes-tab " "tab " (if themesTabActive "btn-danger active" "")}} @label="admin.customize.theme.title" />
+  <DButton @action={{action "changeView"}} @actionParam={{COMPONENTS}} @class={{concat "components-tab " "tab " (if componentsTabActive "btn-danger active" "")}} @label="admin.customize.theme.components" @icon="puzzle-piece" />
 </div>
 
 <div class="themes-list-container">
   {{#if showFilter}}
     <div class="themes-list-filter themes-list-item">
-      {{input
-        class="filter-input"
-        placeholder=(i18n "admin.customize.theme.filter_placeholder")
-        autocomplete="off"
-        type="search"
-        value=(mut filterTerm)
-      }}
+      <Input class="filter-input" placeholder={{i18n "admin.customize.theme.filter_placeholder"}} @autocomplete="off" @type="search" @value={{mut filterTerm}} />
       {{d-icon "search"}}
     </div>
   {{/if}}
   {{#if hasThemes}}
     {{#if hasActiveThemes}}
       {{#each activeThemes as |theme|}}
-        {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
+        <ThemesListItem @theme={{theme}} @navigateToTheme={{action "navigateToTheme" theme}} />
       {{/each}}
 
       {{#if hasInactiveThemes}}
@@ -48,7 +31,7 @@
 
     {{#if hasInactiveThemes}}
       {{#each inactiveThemes as |theme|}}
-        {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
+        <ThemesListItem @theme={{theme}} @navigateToTheme={{action "navigateToTheme" theme}} />
       {{/each}}
     {{/if}}
   {{else}}
@@ -59,5 +42,5 @@
 </div>
 
 <div class="create-actions">
-  {{d-button action=installModal icon="upload" label="admin.customize.install" class="btn-primary"}}
+  <DButton @action={{installModal}} @icon="upload" @label="admin.customize.install" @class="btn-primary" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/value-list.hbs b/app/assets/javascripts/admin/addon/templates/components/value-list.hbs
index c9852ed170f..03e6a72ff34 100644
--- a/app/assets/javascripts/admin/addon/templates/components/value-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/value-list.hbs
@@ -2,45 +2,20 @@
   <div class="values">
     {{#each collection as |value index|}}
       <div data-index={{index}} class="value">
-        {{d-button
-          action=(action "removeValue")
-          actionParam=value
-          icon="times"
-          class="remove-value-btn btn-small"
-        }}
+        <DButton @action={{action "removeValue"}} @actionParam={{value}} @icon="times" @class="remove-value-btn btn-small" />
 
-        {{input
-          title=value
-          value=value
-          class="value-input"
-          focus-out=(action "changeValue" index)
-        }}
+        <Input @title={{value}} @value={{value}} class="value-input" @focus-out={{action "changeValue" index}} />
 
         {{#if showUpDownButtons}}
-          {{d-button
-            action=(action "shift" -1 index)
-            icon="arrow-up"
-            class="shift-up-value-btn btn-small"
-          }}
-          {{d-button
-            action=(action "shift" 1 index)
-            icon="arrow-down"
-            class="shift-down-value-btn btn-small"
-          }}
+          <DButton @action={{action "shift" -1 index}} @icon="arrow-up" @class="shift-up-value-btn btn-small" />
+          <DButton @action={{action "shift" 1 index}} @icon="arrow-down" @class="shift-down-value-btn btn-small" />
         {{/if}}
       </div>
     {{/each}}
   </div>
 {{/if}}
 
-{{combo-box
-  valueProperty=null
-  nameProperty=null
-  value=newValue
-  content=filteredChoices
-  onChange=(action "selectChoice")
-  options=(hash
+<ComboBox @valueProperty={{null}} @nameProperty={{null}} @value={{newValue}} @content={{filteredChoices}} @onChange={{action "selectChoice"}} @options={{hash
     allowAny=true
     none=noneKey
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/admin/addon/templates/components/version-checks.hbs b/app/assets/javascripts/admin/addon/templates/components/version-checks.hbs
index f9d418a4160..0d5208c1716 100644
--- a/app/assets/javascripts/admin/addon/templates/components/version-checks.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/version-checks.hbs
@@ -126,10 +126,5 @@
       </div>
     </div>
   {{/if}}
-  {{custom-html
-    name="upgrade-header"
-    versionCheck=versionCheck
-    tagName="div"
-    classNames="upgrade-header"
-  }}
+  <CustomHtml @name="upgrade-header" @versionCheck={{versionCheck}} @tagName="div" @classNames="upgrade-header" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs b/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
index a76822c9553..c459a42d49b 100644
--- a/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/watched-word-form.hbs
@@ -1,40 +1,33 @@
 <div class="watched-word-input">
   <label for="watched-word">{{i18n "admin.watched_words.form.label"}}</label>
-  {{text-field id="watched-word" value=word disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey=placeholderKey title=(i18n placeholderKey)}}
+  <TextField @id="watched-word" @value={{word}} @disabled={{formSubmitted}} @class="watched-word-input-field" @autocorrect="off" @autocapitalize="off" @placeholderKey={{placeholderKey}} @title={{i18n placeholderKey}} />
 </div>
 
 {{#if canReplace}}
   <div class="watched-word-input">
     <label for="watched-replacement">{{i18n "admin.watched_words.form.replace_label"}}</label>
-    {{text-field id="watched-replacement" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.replace_placeholder"}}
+    <TextField @id="watched-replacement" @value={{replacement}} @disabled={{formSubmitted}} @class="watched-word-input-field" @autocorrect="off" @autocapitalize="off" @placeholderKey="admin.watched_words.form.replace_placeholder" />
   </div>
 {{/if}}
 
 {{#if canTag}}
   <div class="watched-word-input">
     <label for="watched-tag">{{i18n "admin.watched_words.form.tag_label"}}</label>
-    {{tag-chooser
-      id="watched-tag"
-      class="watched-word-input-field"
-      tags=selectedTags
-      onChange=(action "changeSelectedTags")
-      everyTag=true
-      options=(hash
+    <TagChooser @id="watched-tag" @class="watched-word-input-field" @tags={{selectedTags}} @onChange={{action "changeSelectedTags"}} @everyTag={{true}} @options={{hash
         allowAny=true
         disabled=formSubmitted
-      )
-    }}
+      }} />
   </div>
 {{/if}}
 
 {{#if canLink}}
   <div class="watched-word-input">
     <label for="watched-replacement">{{i18n "admin.watched_words.form.link_label"}}</label>
-    {{text-field id="watched-replacement" value=replacement disabled=formSubmitted class="watched-word-input-field" autocorrect="off" autocapitalize="off" placeholderKey="admin.watched_words.form.link_placeholder"}}
+    <TextField @id="watched-replacement" @value={{replacement}} @disabled={{formSubmitted}} @class="watched-word-input-field" @autocorrect="off" @autocapitalize="off" @placeholderKey="admin.watched_words.form.link_placeholder" />
   </div>
 {{/if}}
 
-{{d-button class="btn btn-primary" action=(action "submit") disabled=formSubmitted label="admin.watched_words.form.add"}}
+<DButton @class="btn btn-primary" @action={{action "submit"}} @disabled={{formSubmitted}} @label="admin.watched_words.form.add" />
 
 {{#if showMessage}}
   <span class="success-message">{{message}}</span>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs b/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
index 7c0ef9a3e0f..b5ffc2413f5 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
@@ -1,40 +1,20 @@
 <div class="color-scheme show-current-style">
   <div class="admin-container">
-    <h1>{{#if model.theme_id}}{{model.name}}{{else}}{{text-field class="style-name" value=model.name}}{{/if}}</h1>
+    <h1>{{#if model.theme_id}}{{model.name}}{{else}}<TextField @class="style-name" @value={{model.name}} />{{/if}}</h1>
     <div class="controls">
       {{#unless model.theme_id}}
-        {{d-button
-          class="btn-primary"
-          action=(action "save")
-          disabled=model.disableSave
-          label="admin.customize.save"
-        }}
+        <DButton @class="btn-primary" @action={{action "save"}} @disabled={{model.disableSave}} @label="admin.customize.save" />
       {{/unless}}
-      {{d-button
-        class="btn-default"
-        action=(action "copy" model)
-        icon="copy"
-        label="admin.customize.copy"
-      }}
-      {{d-button
-        class="btn-default copy-to-clipboard"
-        action=(action "copyToClipboard" model)
-        icon="far-clipboard"
-        label="admin.customize.copy_to_clipboard"
-      }}
+      <DButton @class="btn-default" @action={{action "copy" model}} @icon="copy" @label="admin.customize.copy" />
+      <DButton @class="btn-default copy-to-clipboard" @action={{action "copyToClipboard" model}} @icon="far-clipboard" @label="admin.customize.copy_to_clipboard" />
       <span class="saving {{unless model.savingStatus "hidden"}}">{{model.savingStatus}}</span>
       {{#if model.theme_id}}
         <span class="not-editable">
           {{i18n "admin.customize.theme_owner"}}
-          {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
+          <LinkTo @route="adminCustomizeThemes.show" @model={{model.theme_id}}>{{model.theme_name}}</LinkTo>
         </span>
       {{else}}
-        {{d-button
-          action=(action "destroy")
-          class="btn-danger"
-          icon="far-trash-alt"
-          label="admin.customize.delete"
-        }}
+        <DButton @action={{action "destroy"}} @class="btn-danger" @icon="far-trash-alt" @label="admin.customize.delete" />
       {{/if}}
     </div>
 
@@ -42,7 +22,7 @@
       {{#unless model.theme_id}}
         <div class="pull-right">
           <label>
-            {{input type="checkbox" checked=onlyOverridden}}
+            <Input @type="checkbox" @checked={{onlyOverridden}} />
             {{i18n "admin.settings.show_overriden"}}
           </label>
         </div>
@@ -50,10 +30,10 @@
 
       <div>
         {{#if model.theme_id}}
-          {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable modelId=model.id}}
+          <InlineEditCheckbox @action={{action "applyUserSelectable"}} @labelKey="admin.customize.theme.color_scheme_user_selectable" @checked={{model.user_selectable}} @modelId={{model.id}} />
         {{else}}
           <label>
-            {{input type="checkbox" checked=model.user_selectable}}
+            <Input @type="checkbox" @checked={{model.user_selectable}} />
             {{i18n "admin.customize.theme.color_scheme_user_selectable"}}
           </label>
         {{/if}}
@@ -76,19 +56,11 @@
                 <h3>{{c.translatedName}}</h3>
                 <p class="description">{{c.description}}</p>
               </td>
-              <td class="hex">{{color-input hexValue=c.hex brightnessValue=c.brightness valid=c.valid}}</td>
+              <td class="hex"><ColorInput @hexValue={{c.hex}} @brightnessValue={{c.brightness}} @valid={{c.valid}} /></td>
               <td class="actions">
                 {{#unless model.theme_id}}
-                  {{d-button
-                    class=(concat "btn-default revert " (unless c.savedIsOverriden "invisible"))
-                    action=(action "revert" c)
-                    title="admin.customize.colors.revert_title"
-                    label="revert"}}
-                  {{d-button
-                    class=(concat "btn-default undo " (unless c.changed "invisible"))
-                    action=(action "undo" c)
-                    title="admin.customize.colors.undo_title"
-                    label="undo"}}
+                  <DButton @class={{concat "btn-default revert " (unless c.savedIsOverriden "invisible")}} @action={{action "revert" c}} @title="admin.customize.colors.revert_title" @label="revert" />
+                  <DButton @class={{concat "btn-default undo " (unless c.changed "invisible")}} @action={{action "undo" c}} @title="admin.customize.colors.undo_title" @label="undo" />
                 {{/unless}}
               </td>
             </tr>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-colors.hbs b/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
index 01716958c87..0c64ee1e26d 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-colors.hbs
@@ -5,20 +5,16 @@
     {{#each model as |scheme|}}
       {{#unless scheme.is_base}}
         <li>
-          {{#link-to "adminCustomize.colors.show" scheme replace=true}}
+          <LinkTo @route="adminCustomize.colors.show" @model={{scheme}} @replace={{true}}>
             {{d-icon "paint-brush"}}
             {{scheme.description}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/unless}}
     {{/each}}
   </ul>
 
-  {{d-button
-    class="btn-default"
-    action=(action "newColorScheme")
-    icon="plus"
-    label="admin.customize.new"}}
+  <DButton @class="btn-default" @action={{action "newColorScheme"}} @icon="plus" @label="admin.customize.new" />
 </div>
 
 {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
index 6acb4ed37b8..0d3dbab7416 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
@@ -1,7 +1,7 @@
-{{email-styles-editor styles=model fieldName=fieldName save=(action "save")}}
+<EmailStylesEditor @styles={{model}} @fieldName={{fieldName}} @save={{action "save"}} />
 
 <div class="admin-footer">
   <div class="buttons">
-    {{d-button action=(action "save") disabled=saveDisabled class="btn-primary" translatedLabel=saveButtonText}}
+    <DButton @action={{action "save"}} @disabled={{saveDisabled}} @class="btn-primary" @translatedLabel={{saveButtonText}} />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs
index e41522c0b92..0a90f0b6486 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs
@@ -1,25 +1,20 @@
-{{combo-box
-  value=emailTemplate.id
-  content=adminCustomizeEmailTemplates.sortedTemplates
-  onChange=adminCustomizeEmailTemplates.onSelectTemplate
-  nameProperty="title"
-}}
+<ComboBox @value={{emailTemplate.id}} @content={{adminCustomizeEmailTemplates.sortedTemplates}} @onChange={{adminCustomizeEmailTemplates.onSelectTemplate}} @nameProperty="title" />
 
 <div class="email-template">
   <label>{{i18n "admin.customize.email_templates.subject"}}</label>
   {{#if hasMultipleSubjects}}
-    <h3>{{#link-to "adminSiteText" (query-params q=hasMultipleSubjects)}}{{i18n "admin.customize.email_templates.multiple_subjects"}}{{/link-to}}</h3>
+    <h3><LinkTo @route="adminSiteText" @query={{hash q=hasMultipleSubjects}}>{{i18n "admin.customize.email_templates.multiple_subjects"}}</LinkTo></h3>
   {{else}}
-    {{input value=buffered.subject}}
+    <Input @value={{buffered.subject}} />
   {{/if}}
   <br>
 
   <label>{{i18n "admin.customize.email_templates.body"}}</label>
-  {{d-editor value=buffered.body}}
+  <DEditor @value={{buffered.body}} />
 
-  {{#save-controls model=emailTemplate action=(action "saveChanges") saved=saved saveDisabled=saveDisabled}}
+  <SaveControls @model={{emailTemplate}} @action={{action "saveChanges"}} @saved={{saved}} @saveDisabled={{saveDisabled}}>
     {{#if emailTemplate.can_revert}}
-      {{d-button action=(action "revertChanges") label="admin.customize.email_templates.revert"}}
+      <DButton @action={{action "revertChanges"}} @label="admin.customize.email_templates.revert" />
     {{/if}}
-  {{/save-controls}}
+  </SaveControls>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-robots-txt.hbs b/app/assets/javascripts/admin/addon/templates/customize-robots-txt.hbs
index 7c78e1f9d27..539f9c98ea7 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-robots-txt.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-robots-txt.hbs
@@ -6,15 +6,8 @@
       {{i18n "admin.customize.robots.overridden"}}
     </div>
   {{/if}}
-  {{textarea
-    value=buffered.robots_txt
-    class="robots-txt-input"}}
-  {{#save-controls model=this action=(action "save") saved=saved saveDisabled=saveDisabled}}
-    {{d-button
-      class="btn-default"
-      disabled=resetDisabled
-      icon="undo"
-      action=(action "reset")
-      label="admin.settings.reset"}}
-  {{/save-controls}}
+  <Textarea @value={{buffered.robots_txt}} class="robots-txt-input" />
+  <SaveControls @model={{this}} @action={{action "save"}} @saved={{saved}} @saveDisabled={{saveDisabled}}>
+    <DButton @class="btn-default" @disabled={{resetDisabled}} @icon="undo" @action={{action "reset"}} @label="admin.settings.reset" />
+  </SaveControls>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
index b4e845e4169..e0c81b56faa 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
@@ -1,32 +1,17 @@
 <div class="current-style {{if maximized "maximized"}}">
   <div class="wrapper">
     <div class="editor-information">
-      {{d-button
-        title="go_back"
-        action=(action "goBack")
-        icon="chevron-left"
-        class="btn-small editor-back-button"
-      }}
+      <DButton @title="go_back" @action={{action "goBack"}} @icon="chevron-left" @class="btn-small editor-back-button" />
 
       <span class="editor-theme-name-wrapper">
         {{i18n "admin.customize.theme.edit_css_html"}}
-        {{#link-to showRouteName model.id replace=true class="editor-theme-name"
-        }}
+        <LinkTo @route={{showRouteName}} @model={{model.id}} @replace={{true}} class="editor-theme-name">
           {{model.name}}
-        {{/link-to}}
+        </LinkTo>
       </span>
     </div>
 
-    {{admin-theme-editor
-      theme=model
-      editRouteName=editRouteName
-      currentTargetName=currentTargetName
-      fieldName=fieldName
-      fieldAdded=(action "fieldAdded")
-      maximized=maximized
-      onlyOverriddenChanged=(action "onlyOverriddenChanged")
-      save=(action "save")
-    }}
+    <AdminThemeEditor @theme={{model}} @editRouteName={{editRouteName}} @currentTargetName={{currentTargetName}} @fieldName={{fieldName}} @fieldAdded={{action "fieldAdded"}} @maximized={{maximized}} @onlyOverriddenChanged={{action "onlyOverriddenChanged"}} @save={{action "save"}} />
 
     <div class="admin-footer">
       <div class="status-actions">
@@ -44,12 +29,7 @@
       </div>
 
       <div class="buttons">
-        {{d-button
-          action=(action "save")
-          disabled=saveDisabled
-          class="btn-primary"
-          translatedLabel=saveButtonText
-        }}
+        <DButton @action={{action "save"}} @disabled={{saveDisabled}} @class="btn-primary" @translatedLabel={{saveButtonText}} />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes-index.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes-index.hbs
index fd1914a9101..e8ddd77ae31 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-themes-index.hbs
@@ -3,7 +3,7 @@
   <div class="content-wrapper">
     <h1>{{i18n "admin.customize.theme.themes_intro"}}</h1>
     <div class="create-actions">
-      {{d-button action=(route-action "installModal") icon="upload" label="admin.customize.install" class="btn-primary"}}
+      <DButton @action={{route-action "installModal"}} @icon="upload" @label="admin.customize.install" @class="btn-primary" />
     </div>
     <div class="external-resources">
       {{#each externalResources as |resource|}}
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs
index 811510fa3ed..92fecd210b7 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs
@@ -1,17 +1,13 @@
 <div class="show-current-style">
-  {{plugin-outlet name="admin-customize-themes-show-top" tagName="span" connectorTagName="div" args=(hash theme=model)}}
+  <PluginOutlet @name="admin-customize-themes-show-top" @tagName="span" @connectorTagName="div" @args={{hash theme=model}} />
   <div class="title">
     {{#if editingName}}
-      {{text-field value=model.name autofocus="true"}}
-      {{d-button action=(action "finishedEditingName") class="btn-primary btn-small submit-edit" icon="check"}}
-      {{d-button action=(action "cancelEditingName") class="btn-small cancel-edit" icon="times"}}
+      <TextField @value={{model.name}} @autofocus="true" />
+      <DButton @action={{action "finishedEditingName"}} @class="btn-primary btn-small submit-edit" @icon="check" />
+      <DButton @action={{action "cancelEditingName"}} @class="btn-small cancel-edit" @icon="times" />
     {{else}}
       <span>{{model.name}}</span>
-      {{d-button
-        action=(action "startEditingName")
-        icon="pencil-alt"
-        class="btn-small"
-      }}
+      <DButton @action={{action "startEditingName"}} @icon="pencil-alt" @class="btn-small" />
     {{/if}}
   </div>
 
@@ -35,19 +31,15 @@
     <div class="alert alert-error">
       {{#if model.disabled_by}}
         {{i18n "admin.customize.theme.disabled_by"}}
-        {{#user-link user=model.disabled_by}}
+        <UserLink @user={{model.disabled_by}}>
           {{avatar model.disabled_by imageSize="tiny"}}
           {{model.disabled_by.username}}
-        {{/user-link}}
+        </UserLink>
         {{format-date model.disabled_at leaveAgo="true"}}
       {{else}}
         {{i18n "admin.customize.theme.disabled"}}
       {{/if}}
-      {{d-button
-        class="btn-default"
-        action=(action "enableComponent")
-        icon="check"
-        label="admin.customize.theme.enable"}}
+      <DButton @class="btn-default" @action={{action "enableComponent"}} @icon="check" @label="admin.customize.theme.enable" />
     </div>
   {{/unless}}
 
@@ -95,9 +87,9 @@
           {{/if}}
 
           {{#if model.remote_theme.commits_behind}}
-            {{d-button action=(action "updateToLatest") icon="download" class="btn-primary" label="admin.customize.theme.update_to_latest"}}
+            <DButton @action={{action "updateToLatest"}} @icon="download" @class="btn-primary" @label="admin.customize.theme.update_to_latest" />
           {{else}}
-            {{d-button action=(action "checkForThemeUpdates") icon="sync" class="btn-default" label="admin.customize.theme.check_for_updates"}}
+            <DButton @action={{action "checkForThemeUpdates"}} @icon="sync" @class="btn-default" @label="admin.customize.theme.check_for_updates" />
           {{/if}}
 
           <span class="status-message">
@@ -131,9 +123,9 @@
     {{else}}
       <span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
       <span>
-        {{#user-link user=model.user}}
+        <UserLink @user={{model.user}}>
           {{format-username model.user.username}}
-        {{/user-link}}
+        </UserLink>
       </span>
     {{/if}}
   </div>
@@ -141,41 +133,36 @@
   {{#if showCheckboxes}}
     <div class="control-unit">
       {{#unless model.component}}
-        {{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default modelId=model.id}}
-        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable modelId=model.id}}
+        <InlineEditCheckbox @action={{action "applyDefault"}} @labelKey="admin.customize.theme.is_default" @checked={{model.default}} @modelId={{model.id}} />
+        <InlineEditCheckbox @action={{action "applyUserSelectable"}} @labelKey="admin.customize.theme.user_selectable" @checked={{model.user_selectable}} @modelId={{model.id}} />
       {{/unless}}
       {{#if model.remote_theme}}
-        {{inline-edit-checkbox action=(action "applyAutoUpdateable") labelKey="admin.customize.theme.auto_update" checked=model.auto_update modelId=model.id}}
+        <InlineEditCheckbox @action={{action "applyAutoUpdateable"}} @labelKey="admin.customize.theme.auto_update" @checked={{model.auto_update}} @modelId={{model.id}} />
       {{/if}}
     </div>
   {{/if}}
 
   {{#unless model.component}}
-    {{#d-section class="form-horizontal theme settings control-unit"}}
+    <DSection @class="form-horizontal theme settings control-unit">
       <div class="row setting">
         <div class="setting-label">
           {{i18n "admin.customize.theme.color_scheme"}}
         </div>
         <div class="setting-value">
-          {{color-palettes
-            content=colorSchemes
-            value=colorSchemeId
-            icon="paint-brush"
-            options=(hash
+          <ColorPalettes @content={{colorSchemes}} @value={{colorSchemeId}} @icon="paint-brush" @options={{hash
               filterable=true
-            )
-          }}
+            }} />
 
           <div class="desc">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
         </div>
         <div class="setting-controls">
           {{#if colorSchemeChanged}}
-            {{d-button action=(action "changeScheme") class="ok submit-edit" icon="check"}}
-            {{d-button action=(action "cancelChangeScheme") class="cancel cancel-edit" icon="times"}}
+            <DButton @action={{action "changeScheme"}} @class="ok submit-edit" @icon="check" />
+            <DButton @action={{action "cancelChangeScheme"}} @class="cancel cancel-edit" @icon="times" />
           {{/if}}
         </div>
       </div>
-    {{/d-section}}
+    </DSection>
   {{/unless}}
 
   {{#if parentThemes}}
@@ -183,24 +170,24 @@
       <div class="mini-title">{{i18n "admin.customize.theme.component_of"}}</div>
       <ul>
         {{#each parentThemes as |theme|}}
-          <li>{{#link-to "adminCustomizeThemes.show" theme replace=true}}{{theme.name}}{{/link-to}}</li>
+          <li><LinkTo @route="adminCustomizeThemes.show" @model={{theme}} @replace={{true}}>{{theme.name}}</LinkTo></li>
         {{/each}}
       </ul>
     </div>
   {{/if}}
 
   {{#if model.component}}
-    {{#d-section class="form-horizontal theme settings control-unit"}}
+    <DSection @class="form-horizontal theme settings control-unit">
       <div class="row setting">
-        {{theme-setting-relatives-selector setting=relativesSelectorSettingsForComponent model=model class="theme-setting"}}
+        <ThemeSettingRelativesSelector @setting={{relativesSelectorSettingsForComponent}} @model={{model}} @class="theme-setting" />
       </div>
-    {{/d-section}}
+    </DSection>
   {{else}}
-    {{#d-section class="form-horizontal theme settings control-unit"}}
+    <DSection @class="form-horizontal theme settings control-unit">
       <div class="row setting">
-        {{theme-setting-relatives-selector setting=relativesSelectorSettingsForTheme model=model class="theme-setting"}}
+        <ThemeSettingRelativesSelector @setting={{relativesSelectorSettingsForTheme}} @model={{model}} @class="theme-setting" />
       </div>
-    {{/d-section}}
+    </DSection>
   {{/if}}
 
   {{#unless model.remote_theme.is_git}}
@@ -219,10 +206,7 @@
         </div>
       {{/if}}
 
-      {{d-button
-        class="btn-default edit"
-        action=(action "editTheme")
-        label="admin.customize.theme.edit_css_html"}}
+      <DButton @class="btn-default edit" @action={{action "editTheme"}} @label="admin.customize.theme.edit_css_html" />
     </div>
 
     <div class="control-unit">
@@ -233,7 +217,7 @@
             <li>
               <span class="col">${{upload.name}}: <a href={{upload.url}} rel="noopener noreferrer" target="_blank">{{upload.filename}}</a></span>
               <span class="col">
-                {{d-button action=(action "removeUpload") actionParam=upload class="second btn-default btn-default cancel-edit" icon="times"}}
+                <DButton @action={{action "removeUpload"}} @actionParam={{upload}} @class="second btn-default btn-default cancel-edit" @icon="times" />
               </span>
             </li>
           {{/each}}
@@ -241,7 +225,7 @@
       {{else}}
         <div class="description">{{i18n "admin.customize.theme.no_uploads"}}</div>
       {{/if}}
-      {{d-button action=(action "addUploadModal") class="btn-default" icon="plus" label="admin.customize.theme.add"}}
+      <DButton @action={{action "addUploadModal"}} @class="btn-default" @icon="plus" @label="admin.customize.theme.add" />
     </div>
   {{/unless}}
 
@@ -268,22 +252,22 @@
   {{#if hasSettings}}
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.theme_settings"}}</div>
-      {{#d-section class="form-horizontal theme settings control-unit"}}
+      <DSection @class="form-horizontal theme settings control-unit">
         {{#each settings as |setting|}}
-          {{theme-setting-editor setting=setting model=model class="theme-setting control-unit"}}
+          <ThemeSettingEditor @setting={{setting}} @model={{model}} @class="theme-setting control-unit" />
         {{/each}}
-      {{/d-section}}
+      </DSection>
     </div>
   {{/if}}
 
   {{#if hasTranslations}}
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.theme_translations"}}</div>
-      {{#d-section class="form-horizontal theme settings translations control-unit"}}
+      <DSection @class="form-horizontal theme settings translations control-unit">
         {{#each translations as |translation|}}
-          {{theme-translation translation=translation model=model class="theme-translation"}}
+          <ThemeTranslation @translation={{translation}} @model={{model}} @class="theme-translation" />
         {{/each}}
-      {{/d-section}}
+      </DSection>
     </div>
   {{/if}}
 
@@ -293,26 +277,18 @@
     <a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>
 
     {{#if showConvert}}
-      {{d-button action=(action "switchType") label="admin.customize.theme.convert" icon=convertIcon class="btn-default btn-normal" title=convertTooltip}}
+      <DButton @action={{action "switchType"}} @label="admin.customize.theme.convert" @icon={{convertIcon}} @class="btn-default btn-normal" @title={{convertTooltip}} />
     {{/if}}
 
     {{#if model.component}}
       {{#if model.enabled}}
-        {{d-button
-          class="btn-default"
-          action=(action "disableComponent")
-          icon="ban"
-          label="admin.customize.theme.disable"}}
+        <DButton @class="btn-default" @action={{action "disableComponent"}} @icon="ban" @label="admin.customize.theme.disable" />
       {{else}}
-        {{d-button
-          class="btn-default"
-          action=(action "enableComponent")
-          icon="check"
-          label="admin.customize.theme.enable"}}
+        <DButton @class="btn-default" @action={{action "enableComponent"}} @icon="check" @label="admin.customize.theme.enable" />
       {{/if}}
     {{/if}}
 
-    {{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
+    <DButton @action={{action "destroy"}} @label="admin.customize.delete" @icon="trash-alt" @class="btn-danger" />
 
   </div>
 
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes.hbs
index 31d81941df6..8767606671f 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-themes.hbs
@@ -1,9 +1,5 @@
 {{#unless editingTheme}}
-  {{themes-list
-    themes=fullThemes
-    components=childThemes
-    currentTab=currentTab
-    installModal=(route-action "installModal")}}
+  <ThemesList @themes={{fullThemes}} @components={{childThemes}} @currentTab={{currentTab}} @installModal={{route-action "installModal"}} />
 {{/unless}}
 
 {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/customize.hbs b/app/assets/javascripts/admin/addon/templates/customize.hbs
index 48ed0896efa..2b192fb11b7 100644
--- a/app/assets/javascripts/admin/addon/templates/customize.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize.hbs
@@ -1,17 +1,17 @@
-{{#admin-nav}}
+<AdminNav>
   {{#if currentUser.admin}}
-    {{nav-item route="adminCustomizeThemes" label="admin.customize.theme.title" class="admin-customize-themes"}}
-    {{nav-item route="adminCustomize.colors" label="admin.customize.colors.title" class="admin-customize-colors"}}
-    {{nav-item route="adminSiteText" label="admin.site_text.title" class="admin-customize-site-text"}}
-    {{nav-item route="adminCustomizeEmailTemplates" label="admin.customize.email_templates.title" class="admin-customize-email-templates"}}
-    {{nav-item route="adminCustomizeEmailStyle" label="admin.customize.email_style.title" class="admin-customize-email-styles"}}
-    {{nav-item route="adminUserFields" label="admin.user_fields.title" class="admin-customize-user-fields"}}
-    {{nav-item route="adminEmojis" label="admin.emoji.title" class="admin-customize-emojis"}}
-    {{nav-item route="adminPermalinks" label="admin.permalink.title" class="admin-customize-permalinks"}}
-    {{nav-item route="adminEmbedding" label="admin.embedding.title" class="admin-customize-embedding"}}
+    <NavItem @route="adminCustomizeThemes" @label="admin.customize.theme.title" @class="admin-customize-themes" />
+    <NavItem @route="adminCustomize.colors" @label="admin.customize.colors.title" @class="admin-customize-colors" />
+    <NavItem @route="adminSiteText" @label="admin.site_text.title" @class="admin-customize-site-text" />
+    <NavItem @route="adminCustomizeEmailTemplates" @label="admin.customize.email_templates.title" @class="admin-customize-email-templates" />
+    <NavItem @route="adminCustomizeEmailStyle" @label="admin.customize.email_style.title" @class="admin-customize-email-styles" />
+    <NavItem @route="adminUserFields" @label="admin.user_fields.title" @class="admin-customize-user-fields" />
+    <NavItem @route="adminEmojis" @label="admin.emoji.title" @class="admin-customize-emojis" />
+    <NavItem @route="adminPermalinks" @label="admin.permalink.title" @class="admin-customize-permalinks" />
+    <NavItem @route="adminEmbedding" @label="admin.embedding.title" @class="admin-customize-embedding" />
   {{/if}}
-  {{nav-item route="adminWatchedWords" label="admin.watched_words.title" class="admin-customize-watched-words"}}
-{{/admin-nav}}
+  <NavItem @route="adminWatchedWords" @label="admin.watched_words.title" @class="admin-customize-watched-words" />
+</AdminNav>
 
 <div class="admin-container">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard.hbs b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
index e12e72dce6d..7eb39b55103 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
@@ -1,56 +1,49 @@
-{{plugin-outlet name="admin-dashboard-top" tagName="span" connectorTagName="div"}}
+<PluginOutlet @name="admin-dashboard-top" @tagName="span" @connectorTagName="div" />
 
 {{#if showVersionChecks}}
   <div class="section-top">
     <div class="version-checks">
-      {{version-checks versionCheck=versionCheck tagName=""}}
+      <VersionChecks @versionCheck={{versionCheck}} @tagName="" />
     </div>
   </div>
 {{/if}}
 
-{{dashboard-problems
-  loadingProblems=loadingProblems
-  foundProblems=foundProblems
-  lowPriorityProblems=lowPriorityProblems
-  highPriorityProblems=highPriorityProblems
-  problemsTimestamp=problemsTimestamp
-  refreshProblems=(action "refreshProblems")
-}}
+<DashboardProblems @loadingProblems={{loadingProblems}} @foundProblems={{foundProblems}} @lowPriorityProblems={{lowPriorityProblems}} @highPriorityProblems={{highPriorityProblems}} @problemsTimestamp={{problemsTimestamp}} @refreshProblems={{action "refreshProblems"}} />
 
 <ul class="navigation">
   <li class="navigation-item general">
-    {{#link-to "admin.dashboard.general" class="navigation-link"}}
+    <LinkTo @route="admin.dashboard.general" class="navigation-link">
       {{i18n "admin.dashboard.general_tab"}}
-    {{/link-to}}
+    </LinkTo>
   </li>
 
   {{#if isModerationTabVisible}}
     <li class="navigation-item moderation">
-      {{#link-to "admin.dashboardModeration" class="navigation-link"}}
+      <LinkTo @route="admin.dashboardModeration" class="navigation-link">
         {{i18n "admin.dashboard.moderation_tab"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/if}}
 
   {{#if isSecurityTabVisible}}
     <li class="navigation-item security">
-      {{#link-to "admin.dashboardSecurity" class="navigation-link"}}
+      <LinkTo @route="admin.dashboardSecurity" class="navigation-link">
         {{i18n "admin.dashboard.security_tab"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/if}}
 
   {{#if isReportsTabVisible}}
     <li class="navigation-item reports">
-      {{#link-to "admin.dashboardReports" class="navigation-link"}}
+      <LinkTo @route="admin.dashboardReports" class="navigation-link">
         {{i18n "admin.dashboard.reports_tab"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/if}}
 </ul>
 
 {{outlet}}
 
-{{dashboard-new-features tagName="div"}}
+<DashboardNewFeatures @tagName="div" />
 
-{{plugin-outlet name="admin-dashboard-bottom" tagName="span" connectorTagName="div"}}
+<PluginOutlet @name="admin-dashboard-bottom" @tagName="span" @connectorTagName="div" />
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard_general.hbs b/app/assets/javascripts/admin/addon/templates/dashboard_general.hbs
index 4425ee338ff..09bfa92a240 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard_general.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard_general.hbs
@@ -1,5 +1,5 @@
-{{#conditional-loading-spinner condition=isLoading}}
-  {{plugin-outlet name="admin-dashboard-general-top" tagName="span" connectorTagName="div"}}
+<ConditionalLoadingSpinner @condition={{isLoading}}>
+  <PluginOutlet @name="admin-dashboard-general-top" @tagName="span" @connectorTagName="div" />
 
   {{#if isCommunityHealthVisible}}
     <div class="community-health section">
@@ -10,55 +10,24 @@
               {{i18n "admin.dashboard.community_health"}}
             </a>
           </h2>
-          {{period-chooser
-            period=period
-            action=(action "changePeriod")
-            content=availablePeriods
-            fullDay=false}}
+          <PeriodChooser @period={{period}} @action={{action "changePeriod"}} @content={{availablePeriods}} @fullDay={{false}} />
         </div>
 
         <div class="section-body">
           <div class="charts">
-            {{admin-report
-              dataSourceName="consolidated_page_views"
-              forcedModes="stacked-chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="consolidated_page_views" @forcedModes="stacked-chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="signups"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="signups" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="topics"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="topics" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="posts"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="posts" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="dau_by_mau"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="dau_by_mau" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="daily_engaged_users"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="daily_engaged_users" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
 
-            {{admin-report
-              dataSourceName="new_contributors"
-              showTrend=true
-              forcedModes="chart"
-              filters=filters}}
+            <AdminReport @dataSourceName="new_contributors" @showTrend={{true}} @forcedModes="chart" @filters={{filters}} />
           </div>
         </div>
       </div>
@@ -73,9 +42,9 @@
             <div class="header">
               <ul class="breadcrumb">
                 <li class="item report">
-                  {{#link-to "adminReports" class="report-url"}}
+                  <LinkTo @route="adminReports" class="report-url">
                     {{i18n "admin.dashboard.activity_metrics"}}
-                  {{/link-to}}
+                  </LinkTo>
                 </li>
               </ul>
             </div>
@@ -90,11 +59,7 @@
                 </div>
 
                 {{#each activityMetrics as |metric|}}
-                  {{admin-report
-                    showHeader=false
-                    filters=activityMetricsFilters
-                    forcedModes="counters"
-                    dataSourceName=metric}}
+                  <AdminReport @showHeader={{false}} @filters={{activityMetricsFilters}} @forcedModes="counters" @dataSourceName={{metric}} />
                 {{/each}}
               </div>
             </div>
@@ -103,22 +68,15 @@
       {{/if}}
 
       <div class="user-metrics">
-        {{#conditional-loading-section isLoading=isLoading}}
-          {{admin-report
-            forcedModes="inline-table"
-            dataSourceName="users_by_type"}}
+        <ConditionalLoadingSection @isLoading={{isLoading}}>
+          <AdminReport @forcedModes="inline-table" @dataSourceName="users_by_type" />
 
-          {{admin-report
-            forcedModes="inline-table"
-            dataSourceName="users_by_trust_level"}}
-        {{/conditional-loading-section}}
+          <AdminReport @forcedModes="inline-table" @dataSourceName="users_by_trust_level" />
+        </ConditionalLoadingSection>
       </div>
 
       <div class="misc">
-        {{admin-report
-          forcedModes="storage-stats"
-          dataSourceName="storage_stats"
-          showHeader=false}}
+        <AdminReport @forcedModes="storage-stats" @dataSourceName="storage_stats" @showHeader={{false}} />
 
         <div class="last-dashboard-update">
           <div>
@@ -140,21 +98,13 @@
 
     {{#if isSearchReportsVisible}}
       <div class="section-column">
-        {{admin-report
-          filters=topReferredTopicsFilters
-          dataSourceName="top_referred_topics"
-          reportOptions=topReferredTopicsOptions}}
+        <AdminReport @filters={{topReferredTopicsFilters}} @dataSourceName="top_referred_topics" @reportOptions={{topReferredTopicsOptions}} />
 
-        {{admin-report
-          dataSourceName="trending_search"
-          reportOptions=trendingSearchOptions
-          filters=trendingSearchFilters
-          isEnabled=logSearchQueriesEnabled
-          disabledLabel=trendingSearchDisabledLabel}}
+        <AdminReport @dataSourceName="trending_search" @reportOptions={{trendingSearchOptions}} @filters={{trendingSearchFilters}} @isEnabled={{logSearchQueriesEnabled}} @disabledLabel={{trendingSearchDisabledLabel}} />
         {{html-safe (i18n "admin.dashboard.reports.trending_search.more" basePath=(base-path))}}
       </div>
     {{/if}}
   </div>
 
-  {{plugin-outlet name="admin-dashboard-general-bottom" tagName="span" connectorTagName="div"}}
-{{/conditional-loading-spinner}}
+  <PluginOutlet @name="admin-dashboard-general-bottom" @tagName="span" @connectorTagName="div" />
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard_moderation.hbs b/app/assets/javascripts/admin/addon/templates/dashboard_moderation.hbs
index cebed3c3ff9..66032ad9b87 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard_moderation.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard_moderation.hbs
@@ -1,5 +1,5 @@
 <div class="sections">
-  {{plugin-outlet name="admin-dashboard-moderation-top" tagName="span" connectorTagName="div"}}
+  <PluginOutlet @name="admin-dashboard-moderation-top" @tagName="span" @connectorTagName="div" />
 
   {{#if isModeratorsActivityVisible}}
     <div class="moderators-activity section">
@@ -9,37 +9,22 @@
             {{i18n "admin.dashboard.moderators_activity"}}
           </a>
         </h2>
-        {{period-chooser
-          period=period
-          action=(action "changePeriod")
-          content=availablePeriods
-          fullDay=false}}
+        <PeriodChooser @period={{period}} @action={{action "changePeriod"}} @content={{availablePeriods}} @fullDay={{false}} />
       </div>
 
       <div class="section-body">
-        {{admin-report
-          filters=filters
-          showHeader=false
-          dataSourceName="moderators_activity"}}
+        <AdminReport @filters={{filters}} @showHeader={{false}} @dataSourceName="moderators_activity" />
       </div>
     </div>
   {{/if}}
 
   <div class="main-section">
-    {{admin-report
-      dataSourceName="flags_status"
-      reportOptions=flagsStatusOptions
-      filters=lastWeekfilters}}
+    <AdminReport @dataSourceName="flags_status" @reportOptions={{flagsStatusOptions}} @filters={{lastWeekfilters}} />
 
-    {{admin-report
-      dataSourceName="post_edits"
-      filters=lastWeekfilters}}
+    <AdminReport @dataSourceName="post_edits" @filters={{lastWeekfilters}} />
 
-    {{admin-report
-      dataSourceName="user_flagging_ratio"
-      filters=lastWeekfilters
-      reportOptions=userFlaggingRatioOptions}}
+    <AdminReport @dataSourceName="user_flagging_ratio" @filters={{lastWeekfilters}} @reportOptions={{userFlaggingRatioOptions}} />
 
-    {{plugin-outlet name="admin-dashboard-moderation-bottom" tagName="span" connectorTagName="div"}}
+    <PluginOutlet @name="admin-dashboard-moderation-bottom" @tagName="span" @connectorTagName="div" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard_reports.hbs b/app/assets/javascripts/admin/addon/templates/dashboard_reports.hbs
index 83f3ad74eb1..2a45f8928d5 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard_reports.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard_reports.hbs
@@ -1,28 +1,23 @@
-{{#conditional-loading-spinner condition=isLoading}}
+<ConditionalLoadingSpinner @condition={{isLoading}}>
   <div class="reports-index section">
     <div class="section-title">
       <h2>{{i18n "admin.reports.title"}}</h2>
-      {{input
-        class="filter-reports-input"
-        input=(action "filterReports" value="target.value")
-        placeholder=(i18n "admin.dashboard.filter_reports")
-        autofocus=true
-      }}
+      <Input class="filter-reports-input" @input={{action "filterReports" value="target.value"}} placeholder={{i18n "admin.dashboard.filter_reports"}} @autofocus={{true}} />
     </div>
 
     <ul class="reports-list">
       {{#each filterReports as |report|}}
         <li class="report">
-          {{#link-to "adminReports.show" report.type}}
+          <LinkTo @route="adminReports.show" @model={{report.type}}>
             <h3 class="report-title">{{report.title}}</h3>
             {{#if report.description}}
               <p class="report-description">
                 {{report.description}}
               </p>
             {{/if}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/each}}
     </ul>
   </div>
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard_security.hbs b/app/assets/javascripts/admin/addon/templates/dashboard_security.hbs
index 9f0a23dbb51..b076f9f9f2c 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard_security.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard_security.hbs
@@ -1,15 +1,11 @@
 <div class="sections">
-  {{plugin-outlet name="admin-dashboard-security-top" tagName="span" connectorTagName="div"}}
+  <PluginOutlet @name="admin-dashboard-security-top" @tagName="span" @connectorTagName="div" />
 
   <div class="main-section">
-    {{admin-report
-      dataSourceName="suspicious_logins"
-      filters=lastWeekfilters}}
+    <AdminReport @dataSourceName="suspicious_logins" @filters={{lastWeekfilters}} />
 
-    {{admin-report
-      dataSourceName="staff_logins"
-      filters=lastWeekfilters}}
+    <AdminReport @dataSourceName="staff_logins" @filters={{lastWeekfilters}} />
 
-    {{plugin-outlet name="admin-dashboard-security-bottom" tagName="span" connectorTagName="div"}}
+    <PluginOutlet @name="admin-dashboard-security-bottom" @tagName="span" @connectorTagName="div" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/email-advanced-test.hbs b/app/assets/javascripts/admin/addon/templates/email-advanced-test.hbs
index 8e4b0cbff04..03a32956681 100644
--- a/app/assets/javascripts/admin/addon/templates/email-advanced-test.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-advanced-test.hbs
@@ -2,14 +2,11 @@
 
 <div class="email-advanced-test">
   <label for="email">{{i18n "admin.email.advanced_test.email"}}</label>
-  {{textarea name="email" value=email class="email-body"}}
-  {{d-button
-    action=(action "run")
-    label="admin.email.advanced_test.run"
-  }}
+  <Textarea @name="email" @value={{email}} class="email-body" />
+  <DButton @action={{action "run"}} @label="admin.email.advanced_test.run" />
 </div>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if format}}
     <hr>
     <div class="text">
@@ -22,4 +19,4 @@
       <pre class="full-reason">{{html-safe elided}}</pre>
     </div>
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/email-bounced.hbs b/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
index 5677cc4664a..85fa2d8bed5 100644
--- a/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
@@ -1,4 +1,4 @@
-{{#load-more selector=".email-list tr" action=(action "loadMore")}}
+<LoadMore @selector=".email-list tr" @action={{action "loadMore"}}>
   <table class="table email-list">
     <thead>
       <tr>
@@ -11,9 +11,9 @@
     <tbody>
       <tr class="filters">
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
-        <td>{{text-field value=filter.user placeholderKey="admin.email.logs.filters.user_placeholder"}}</td>
-        <td>{{text-field value=filter.address placeholderKey="admin.email.logs.filters.address_placeholder"}}</td>
-        <td colspan="2">{{text-field value=filter.type placeholderKey="admin.email.logs.filters.type_placeholder"}}</td>
+        <td><TextField @value={{filter.user}} @placeholderKey="admin.email.logs.filters.user_placeholder" /></td>
+        <td><TextField @value={{filter.address}} @placeholderKey="admin.email.logs.filters.address_placeholder" /></td>
+        <td colspan="2"><TextField @value={{filter.type}} @placeholderKey="admin.email.logs.filters.type_placeholder" /></td>
       </tr>
 
       {{#each model as |l|}}
@@ -21,8 +21,8 @@
           <td>{{format-date l.created_at}}</td>
           <td>
             {{#if l.user}}
-              {{#link-to "adminUser" l.user}}{{avatar l.user imageSize="tiny"}}{{/link-to}}
-              {{#link-to "adminUser" l.user}}{{l.user.username}}{{/link-to}}
+              <LinkTo @route="adminUser" @model={{l.user}}>{{avatar l.user imageSize="tiny"}}</LinkTo>
+              <LinkTo @route="adminUser" @model={{l.user}}>{{l.user.username}}</LinkTo>
             {{else}}
               &mdash;
             {{/if}}
@@ -52,6 +52,6 @@
       {{/each}}
     </tbody>
   </table>
-{{/load-more}}
+</LoadMore>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
diff --git a/app/assets/javascripts/admin/addon/templates/email-index.hbs b/app/assets/javascripts/admin/addon/templates/email-index.hbs
index 4919b249e6f..d21414f0f59 100644
--- a/app/assets/javascripts/admin/addon/templates/email-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-index.hbs
@@ -21,14 +21,8 @@
         {{#if sendingEmail}}
           {{i18n "admin.email.sending_test"}}
         {{else}}
-          {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
-          {{d-button
-            class="btn-primary"
-            action=(action "sendTestEmail")
-            disabled=sendTestEmailDisabled
-            label="admin.email.send_test"
-            type="submit"
-          }}
+          <TextField @value={{testEmailAddress}} @placeholderKey="admin.email.test_email_address" />
+          <DButton @class="btn-primary" @action={{action "sendTestEmail"}} @disabled={{sendTestEmailDisabled}} @label="admin.email.send_test" @type="submit" />
           {{#if sentTestEmailMessage}}
             <span class="result-message">{{sentTestEmailMessage}}</span>
           {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
index a4af09fb881..a051a7b3134 100644
--- a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
@@ -4,20 +4,12 @@
   <div class="controls">
     <div class="inline-form">
       <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
-      {{date-picker-past value=lastSeen id="last-seen"}}
+      <DatePickerPast @value={{lastSeen}} @id="last-seen" />
       <label>{{i18n "admin.email.user"}}:</label>
-      {{email-group-user-chooser
-        value=username
-        onChange=(action "updateUsername")
-        options=(hash
+      <EmailGroupUserChooser @value={{username}} @onChange={{action "updateUsername"}} @options={{hash
           maximum=1
-        )
-      }}
-      {{d-button
-        class="btn-primary digest-refresh-button"
-        action=(action "refresh")
-        label="admin.email.refresh"
-      }}
+        }} />
+      <DButton @class="btn-primary digest-refresh-button" @action={{action "refresh"}} @label="admin.email.refresh" />
       <div class="toggle">
         <label>{{i18n "admin.email.format"}}</label>
         {{#if showHtml}}
@@ -35,7 +27,7 @@
   </div>
 </div>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
 
   <div class="email-preview-digest">
     {{#if showSendEmailForm}}
@@ -45,12 +37,8 @@
             {{i18n "admin.email.sending_test"}}
           {{else}}
             <label>{{i18n "admin.email.send_digest_label"}}</label>
-            {{text-field value=email placeholderKey="admin.email.test_email_address"}}
-            {{d-button
-              class="btn-default"
-              action=(action "sendEmail")
-              disabled=sendEmailDisabled
-              label="admin.email.send_digest"}}
+            <TextField @value={{email}} @placeholderKey="admin.email.test_email_address" />
+            <DButton @class="btn-default" @action={{action "sendEmail"}} @disabled={{sendEmailDisabled}} @label="admin.email.send_digest" />
             {{#if sentEmail}}
               <span class="result-message">{{i18n "admin.email.sent_test"}}</span>
             {{/if}}
@@ -72,4 +60,4 @@
     </div>
   </div>
 
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/email-received.hbs b/app/assets/javascripts/admin/addon/templates/email-received.hbs
index e8632cc687d..584872acf52 100644
--- a/app/assets/javascripts/admin/addon/templates/email-received.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-received.hbs
@@ -1,4 +1,4 @@
-{{#load-more selector=".email-list tr" action=(action "loadMore")}}
+<LoadMore @selector=".email-list tr" @action={{action "loadMore"}}>
   <table class="table email-list">
     <thead>
       <tr>
@@ -12,9 +12,9 @@
     <tbody>
       <tr class="filters">
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
-        <td>{{text-field value=filter.from placeholderKey="admin.email.incoming_emails.filters.from_placeholder"}}</td>
-        <td>{{text-field value=filter.to placeholderKey="admin.email.incoming_emails.filters.to_placeholder"}}</td>
-        <td>{{text-field value=filter.subject placeholderKey="admin.email.incoming_emails.filters.subject_placeholder"}}</td>
+        <td><TextField @value={{filter.from}} @placeholderKey="admin.email.incoming_emails.filters.from_placeholder" /></td>
+        <td><TextField @value={{filter.to}} @placeholderKey="admin.email.incoming_emails.filters.to_placeholder" /></td>
+        <td><TextField @value={{filter.subject}} @placeholderKey="admin.email.incoming_emails.filters.subject_placeholder" /></td>
       </tr>
 
       {{#each model as |email|}}
@@ -23,10 +23,10 @@
           <td class="username">
             <div>
               {{#if email.user}}
-                {{#link-to "adminUser" email.user}}
+                <LinkTo @route="adminUser" @model={{email.user}}>
                   {{avatar email.user imageSize="tiny"}}
                   {{email.from_address}}
-                {{/link-to}}
+                </LinkTo>
               {{else}}
                 &mdash;
               {{/if}}
@@ -53,6 +53,6 @@
       {{/each}}
     </tbody>
   </table>
-{{/load-more}}
+</LoadMore>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
diff --git a/app/assets/javascripts/admin/addon/templates/email-rejected.hbs b/app/assets/javascripts/admin/addon/templates/email-rejected.hbs
index c214a57e374..6a734246eb3 100644
--- a/app/assets/javascripts/admin/addon/templates/email-rejected.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-rejected.hbs
@@ -1,4 +1,4 @@
-{{#load-more selector=".email-list tr" action=(action "loadMore")}}
+<LoadMore @selector=".email-list tr" @action={{action "loadMore"}}>
   <table class="table email-list">
     <thead>
       <tr>
@@ -13,10 +13,10 @@
     <tbody>
       <tr class="filters">
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
-        <td>{{text-field value=filter.from placeholderKey="admin.email.incoming_emails.filters.from_placeholder"}}</td>
-        <td>{{text-field value=filter.to placeholderKey="admin.email.incoming_emails.filters.to_placeholder"}}</td>
-        <td>{{text-field value=filter.subject placeholderKey="admin.email.incoming_emails.filters.subject_placeholder"}}</td>
-        <td colspan="2">{{text-field value=filter.error placeholderKey="admin.email.incoming_emails.filters.error_placeholder"}}</td>
+        <td><TextField @value={{filter.from}} @placeholderKey="admin.email.incoming_emails.filters.from_placeholder" /></td>
+        <td><TextField @value={{filter.to}} @placeholderKey="admin.email.incoming_emails.filters.to_placeholder" /></td>
+        <td><TextField @value={{filter.subject}} @placeholderKey="admin.email.incoming_emails.filters.subject_placeholder" /></td>
+        <td colspan="2"><TextField @value={{filter.error}} @placeholderKey="admin.email.incoming_emails.filters.error_placeholder" /></td>
       </tr>
 
       {{#each model as |email|}}
@@ -25,10 +25,10 @@
           <td class="username">
             <div>
               {{#if email.user}}
-                {{#link-to "adminUser" email.user}}
+                <LinkTo @route="adminUser" @model={{email.user}}>
                   {{avatar email.user imageSize="tiny"}}
                   {{email.from_address}}
-                {{/link-to}}
+                </LinkTo>
               {{else}}
                 {{#if email.from_address}}
                   <a href="mailto:{{email.from_address}}">{{email.from_address}}</a>
@@ -61,6 +61,6 @@
       {{/each}}
     </tbody>
   </table>
-{{/load-more}}
+</LoadMore>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
diff --git a/app/assets/javascripts/admin/addon/templates/email-sent.hbs b/app/assets/javascripts/admin/addon/templates/email-sent.hbs
index d213f4b3735..2317185cf65 100644
--- a/app/assets/javascripts/admin/addon/templates/email-sent.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-sent.hbs
@@ -1,4 +1,4 @@
-{{#load-more selector=".email-list tr" action=(action "loadMore")}}
+<LoadMore @selector=".email-list tr" @action={{action "loadMore"}}>
   <table class="table email-list">
     <thead>
       <tr>
@@ -12,10 +12,10 @@
     <tbody>
       <tr class="filters">
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
-        <td>{{text-field value=filter.user placeholderKey="admin.email.logs.filters.user_placeholder"}}</td>
-        <td>{{text-field value=filter.address placeholderKey="admin.email.logs.filters.address_placeholder"}}</td>
-        <td>{{text-field value=filter.type placeholderKey="admin.email.logs.filters.type_placeholder"}}</td>
-        <td>{{text-field value=filter.reply_key placeholderKey="admin.email.logs.filters.reply_key_placeholder"}}</td>
+        <td><TextField @value={{filter.user}} @placeholderKey="admin.email.logs.filters.user_placeholder" /></td>
+        <td><TextField @value={{filter.address}} @placeholderKey="admin.email.logs.filters.address_placeholder" /></td>
+        <td><TextField @value={{filter.type}} @placeholderKey="admin.email.logs.filters.type_placeholder" /></td>
+        <td><TextField @value={{filter.reply_key}} @placeholderKey="admin.email.logs.filters.reply_key_placeholder" /></td>
       </tr>
 
       {{#each model as |l|}}
@@ -23,8 +23,8 @@
           <td class="sent-email-date">{{format-date l.created_at}}</td>
           <td class="sent-email-username">
             {{#if l.user}}
-              {{#link-to "adminUser" l.user}}{{avatar l.user imageSize="tiny"}}{{/link-to}}
-              {{#link-to "adminUser" l.user}}{{l.user.username}}{{/link-to}}
+              <LinkTo @route="adminUser" @model={{l.user}}>{{avatar l.user imageSize="tiny"}}</LinkTo>
+              <LinkTo @route="adminUser" @model={{l.user}}>{{l.user.username}}</LinkTo>
             {{else}}
               &mdash;
             {{/if}}
@@ -50,6 +50,6 @@
       {{/each}}
     </tbody>
   </table>
-{{/load-more}}
+</LoadMore>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
diff --git a/app/assets/javascripts/admin/addon/templates/email-skipped.hbs b/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
index 3dc05cfc720..5bd3479d504 100644
--- a/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
@@ -1,4 +1,4 @@
-{{#load-more selector=".email-list tr" action=(action "loadMore")}}
+<LoadMore @selector=".email-list tr" @action={{action "loadMore"}}>
   <table class="table email-list">
     <thead>
       <tr>
@@ -12,9 +12,9 @@
     <tbody>
       <tr class="filters">
         <td>{{i18n "admin.email.logs.filters.title"}}</td>
-        <td>{{text-field value=filter.user placeholderKey="admin.email.logs.filters.user_placeholder"}}</td>
-        <td>{{text-field value=filter.address placeholderKey="admin.email.logs.filters.address_placeholder"}}</td>
-        <td>{{text-field value=filter.type placeholderKey="admin.email.logs.filters.type_placeholder"}}</td>
+        <td><TextField @value={{filter.user}} @placeholderKey="admin.email.logs.filters.user_placeholder" /></td>
+        <td><TextField @value={{filter.address}} @placeholderKey="admin.email.logs.filters.address_placeholder" /></td>
+        <td><TextField @value={{filter.type}} @placeholderKey="admin.email.logs.filters.type_placeholder" /></td>
         <td></td>
       </tr>
 
@@ -23,8 +23,8 @@
           <td>{{format-date l.created_at}}</td>
           <td>
             {{#if l.user}}
-              {{#link-to "adminUser" l.user}}{{avatar l.user imageSize="tiny"}}{{/link-to}}
-              {{#link-to "adminUser" l.user}}{{l.user.username}}{{/link-to}}
+              <LinkTo @route="adminUser" @model={{l.user}}>{{avatar l.user imageSize="tiny"}}</LinkTo>
+              <LinkTo @route="adminUser" @model={{l.user}}>{{l.user.username}}</LinkTo>
             {{else}}
               &mdash;
             {{/if}}
@@ -46,6 +46,6 @@
       {{/each}}
     </tbody>
   </table>
-{{/load-more}}
+</LoadMore>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
diff --git a/app/assets/javascripts/admin/addon/templates/email.hbs b/app/assets/javascripts/admin/addon/templates/email.hbs
index b61bdcae840..c4d714d5bc0 100644
--- a/app/assets/javascripts/admin/addon/templates/email.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email.hbs
@@ -1,14 +1,14 @@
-{{#admin-nav}}
-  {{nav-item route="adminEmail.index" label="admin.email.settings"}}
-  {{nav-item route="adminEmail.previewDigest" label="admin.email.preview_digest"}}
-  {{nav-item route="adminEmail.advancedTest" label="admin.email.advanced_test.title"}}
-  {{nav-item route="adminCustomizeEmailTemplates" label="admin.email.templates"}}
-  {{nav-item route="adminEmail.sent" label="admin.email.sent"}}
-  {{nav-item route="adminEmail.skipped" label="admin.email.skipped"}}
-  {{nav-item route="adminEmail.bounced" label="admin.email.bounced"}}
-  {{nav-item route="adminEmail.received" label="admin.email.received"}}
-  {{nav-item route="adminEmail.rejected" label="admin.email.rejected"}}
-{{/admin-nav}}
+<AdminNav>
+  <NavItem @route="adminEmail.index" @label="admin.email.settings" />
+  <NavItem @route="adminEmail.previewDigest" @label="admin.email.preview_digest" />
+  <NavItem @route="adminEmail.advancedTest" @label="admin.email.advanced_test.title" />
+  <NavItem @route="adminCustomizeEmailTemplates" @label="admin.email.templates" />
+  <NavItem @route="adminEmail.sent" @label="admin.email.sent" />
+  <NavItem @route="adminEmail.skipped" @label="admin.email.skipped" />
+  <NavItem @route="adminEmail.bounced" @label="admin.email.bounced" />
+  <NavItem @route="adminEmail.received" @label="admin.email.received" />
+  <NavItem @route="adminEmail.rejected" @label="admin.email.rejected" />
+</AdminNav>
 
 <div class="admin-container">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/embedding.hbs b/app/assets/javascripts/admin/addon/templates/embedding.hbs
index fc07050e346..a09ea779b72 100644
--- a/app/assets/javascripts/admin/addon/templates/embedding.hbs
+++ b/app/assets/javascripts/admin/addon/templates/embedding.hbs
@@ -10,7 +10,7 @@
       </thead>
       <tbody>
         {{#each embedding.embeddable_hosts as |host|}}
-          {{embeddable-host host=host deleteHost=(action "deleteHost")}}
+          <EmbeddableHost @host={{host}} @deleteHost={{action "deleteHost"}} />
         {{/each}}
       </tbody>
     </table>
@@ -18,13 +18,13 @@
     <p>{{i18n "admin.embedding.get_started"}}</p>
   {{/if}}
 
-  {{d-button label="admin.embedding.add_host" action=(action "addHost") icon="plus" class="btn-primary add-host"}}
+  <DButton @label="admin.embedding.add_host" @action={{action "addHost"}} @icon="plus" @class="btn-primary add-host" />
 </div>
 
 {{#if showSecondary}}
   <div class="embedding-secondary">
     <p>{{html-safe (i18n "admin.embedding.sample")}}</p>
-    {{highlighted-code code=embeddingCode lang="html"}}
+    <HighlightedCode @code={{embeddingCode}} @lang="html" />
   </div>
 
   <hr>
@@ -32,37 +32,26 @@
   <div class="embedding-secondary">
     <h3>{{i18n "admin.embedding.settings"}}</h3>
 
-    {{embedding-setting field="embed_by_username" value=embedding.embed_by_username}}
-    {{embedding-setting field="embed_post_limit" value=embedding.embed_post_limit}}
-    {{embedding-setting field="embed_title_scrubber"
-                        value=embedding.embed_title_scrubber
-                        placeholder="- site.com$"}}
-    {{embedding-setting field="embed_truncate" value=embedding.embed_truncate type="checkbox"}}
-    {{embedding-setting field="embed_unlisted" value=embedding.embed_unlisted type="checkbox"}}
+    <EmbeddingSetting @field="embed_by_username" @value={{embedding.embed_by_username}} />
+    <EmbeddingSetting @field="embed_post_limit" @value={{embedding.embed_post_limit}} />
+    <EmbeddingSetting @field="embed_title_scrubber" @value={{embedding.embed_title_scrubber}} @placeholder="- site.com$" />
+    <EmbeddingSetting @field="embed_truncate" @value={{embedding.embed_truncate}} @type="checkbox" />
+    <EmbeddingSetting @field="embed_unlisted" @value={{embedding.embed_unlisted}} @type="checkbox" />
   </div>
 
   <div class="embedding-secondary">
     <h3>{{i18n "admin.embedding.crawling_settings"}}</h3>
     <p class="description">{{i18n "admin.embedding.crawling_description"}}</p>
 
-    {{embedding-setting field="allowed_embed_selectors"
-                        value=embedding.allowed_embed_selectors
-                        placeholder="article, #story, .post"}}
+    <EmbeddingSetting @field="allowed_embed_selectors" @value={{embedding.allowed_embed_selectors}} @placeholder="article, #story, .post" />
 
-    {{embedding-setting field="blocked_embed_selectors"
-                        value=embedding.blocked_embed_selectors
-                        placeholder=".ad-unit, header"}}
+    <EmbeddingSetting @field="blocked_embed_selectors" @value={{embedding.blocked_embed_selectors}} @placeholder=".ad-unit, header" />
 
-    {{embedding-setting field="allowed_embed_classnames"
-                        value=embedding.allowed_embed_classnames
-                        placeholder="emoji, classname"}}
+    <EmbeddingSetting @field="allowed_embed_classnames" @value={{embedding.allowed_embed_classnames}} @placeholder="emoji, classname" />
   </div>
 
   <div class="embedding-secondary">
-    {{d-button label="admin.embedding.save"
-               action=(action "saveChanges")
-               class="btn-primary embed-save"
-               disabled=embedding.isSaving}}
+    <DButton @label="admin.embedding.save" @action={{action "saveChanges"}} @class="btn-primary embed-save" @disabled={{embedding.isSaving}} />
 
     {{#if saved}}{{i18n "saved"}}{{/if}}
   </div>
diff --git a/app/assets/javascripts/admin/addon/templates/emojis.hbs b/app/assets/javascripts/admin/addon/templates/emojis.hbs
index e2e39499866..18f33fbf654 100644
--- a/app/assets/javascripts/admin/addon/templates/emojis.hbs
+++ b/app/assets/javascripts/admin/addon/templates/emojis.hbs
@@ -3,11 +3,7 @@
 
   <p class="desc">{{i18n "admin.emoji.help"}}</p>
 
-  {{emoji-uploader
-    emojiGroups=emojiGroups
-    done=(action "emojiUploaded")
-    id="emoji-uploader"
-  }}
+  <EmojiUploader @emojiGroups={{emojiGroups}} @done={{action "emojiUploaded"}} @id="emoji-uploader" />
 
   <hr>
 
@@ -18,13 +14,7 @@
           <th>{{i18n "admin.emoji.image"}}</th>
           <th>{{i18n "admin.emoji.name"}}</th>
           <th colspan="2">
-            {{combo-box
-              value=filter
-              content=sortingGroups
-              nameProperty=null
-              valueProperty=null
-              onChange=(action "filterGroups")
-            }}
+            <ComboBox @value={{filter}} @content={{sortingGroups}} @nameProperty={{null}} @valueProperty={{null}} @onChange={{action "filterGroups"}} />
           </th>
         </tr>
       </thead>
@@ -35,11 +25,7 @@
             <td>:{{e.name}}:</td>
             <td>{{e.group}}</td>
             <td class="action">
-              {{d-button
-                action=(action "destroyEmoji" e)
-                class="btn-danger"
-                icon="far-trash-alt"
-              }}
+              <DButton @action={{action "destroyEmoji" e}} @class="btn-danger" @icon="far-trash-alt" />
             </td>
           </tr>
         {{/each}}
diff --git a/app/assets/javascripts/admin/addon/templates/logs.hbs b/app/assets/javascripts/admin/addon/templates/logs.hbs
index 4cc214e1848..237f810fb8c 100644
--- a/app/assets/javascripts/admin/addon/templates/logs.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs.hbs
@@ -1,13 +1,13 @@
-{{#admin-nav}}
-  {{nav-item route="adminLogs.staffActionLogs" label="admin.logs.staff_actions.title"}}
-  {{nav-item route="adminLogs.screenedEmails" label="admin.logs.screened_emails.title"}}
-  {{nav-item route="adminLogs.screenedIpAddresses" label="admin.logs.screened_ips.title"}}
-  {{nav-item route="adminLogs.screenedUrls" label="admin.logs.screened_urls.title"}}
-  {{nav-item route="adminSearchLogs" label="admin.logs.search_logs.title"}}
+<AdminNav>
+  <NavItem @route="adminLogs.staffActionLogs" @label="admin.logs.staff_actions.title" />
+  <NavItem @route="adminLogs.screenedEmails" @label="admin.logs.screened_emails.title" />
+  <NavItem @route="adminLogs.screenedIpAddresses" @label="admin.logs.screened_ips.title" />
+  <NavItem @route="adminLogs.screenedUrls" @label="admin.logs.screened_urls.title" />
+  <NavItem @route="adminSearchLogs" @label="admin.logs.search_logs.title" />
   {{#if currentUser.admin}}
-    {{nav-item path="/logs" label="admin.logs.logster.title"}}
+    <NavItem @path="/logs" @label="admin.logs.logster.title" />
   {{/if}}
-{{/admin-nav}}
+</AdminNav>
 
 <div class="admin-container">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-emails.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-emails.hbs
index 17b4316629b..57c78176eb0 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/screened-emails.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/screened-emails.hbs
@@ -2,16 +2,11 @@
   {{i18n "admin.logs.screened_emails.description"}}
 </p>
 
-{{d-button
-  class="btn-default screened-email-export"
-  action=(action "exportScreenedEmailList")
-  title="admin.export_csv.button_title.screened_email"
-  icon="download"
-  label="admin.export_csv.button_text"}}
+<DButton @class="btn-default screened-email-export" @action={{action "exportScreenedEmailList"}} @title="admin.export_csv.button_title.screened_email" @icon="download" @label="admin.export_csv.button_text" />
 
 <br>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if model.length}}
 
     <table class="screened-emails grid">
@@ -36,7 +31,7 @@
             <td class="created_at"><div class="label">{{i18n "admin.logs.created_at"}}</div>{{age-with-tooltip item.created_at}}</td>
             <td class="ip_address">{{item.ip_address}}</td>
             <td class="action">
-              {{d-button action=(action "clearBlock") actionParam=item icon="check" label="admin.logs.screened_emails.actions.allow"}}
+              <DButton @action={{action "clearBlock"}} @actionParam={{item}} @icon="check" @label="admin.logs.screened_emails.actions.allow" />
             </td>
           </tr>
         {{/each}}
@@ -46,4 +41,4 @@
   {{else}}
     {{i18n "search.no_results"}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
index 1531a541bef..9b981b1af35 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
@@ -2,24 +2,14 @@
 
 <div class="screened-ip-controls">
   <div class="filter-screened-ip-address inline-form">
-    {{text-field
-      value=filter
-      class="ip-address-input"
-      placeholderKey="admin.logs.screened_ips.form.filter"
-      autocorrect="off"
-      autocapitalize="off"}}
-    {{d-button
-      class="btn-default"
-      action=(action "exportScreenedIpList")
-      icon="download"
-      title="admin.export_csv.button_title.screened_ip"
-      label="admin.export_csv.button_text"}}
+    <TextField @value={{filter}} @class="ip-address-input" @placeholderKey="admin.logs.screened_ips.form.filter" @autocorrect="off" @autocapitalize="off" />
+    <DButton @class="btn-default" @action={{action "exportScreenedIpList"}} @icon="download" @title="admin.export_csv.button_title.screened_ip" @label="admin.export_csv.button_text" />
   </div>
 
-  {{screened-ip-address-form action=(action "recordAdded")}}
+  <ScreenedIpAddressForm @action={{action "recordAdded"}} />
 </div>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if model.length}}
     <table class="admin-logs-table screened-ip-addresses grid">
       <thead class="heading-container">
@@ -35,7 +25,7 @@
           <tr class="admin-list-item">
             <td class="col first ip_address">
               {{#if item.editing}}
-                {{text-field value=item.ip_address autofocus="autofocus"}}
+                <TextField @value={{item.ip_address}} @autofocus="autofocus" />
               {{else}}
                 <a href {{action "edit" item}} class="inline-editable-field">
                   {{#if item.isRange}}
@@ -72,39 +62,17 @@
             </td>
             <td class="col actions">
               {{#if item.editing}}
-                {{d-button
-                  class="btn-default"
-                  action=(action "save")
-                  actionParam=item
-                  label="admin.logs.save"}}
+                <DButton @class="btn-default" @action={{action "save"}} @actionParam={{item}} @label="admin.logs.save" />
                 <a href {{action "cancel" item}} class="cancel-action">
                   {{i18n "cancel"}}
                 </a>
               {{else}}
-                {{d-button
-                  class="btn-default btn-danger"
-                  action=(action "destroy")
-                  actionParam=item
-                  icon="far-trash-alt"}}
-                {{d-button
-                  class="btn-default"
-                  action=(action "edit")
-                  actionParam=item
-                  icon="pencil-alt"}}
+                <DButton @class="btn-default btn-danger" @action={{action "destroy"}} @actionParam={{item}} @icon="far-trash-alt" />
+                <DButton @class="btn-default" @action={{action "edit"}} @actionParam={{item}} @icon="pencil-alt" />
                 {{#if item.isBlocked}}
-                  {{d-button
-                    class="btn-default"
-                    action=(action "allow")
-                    actionParam=item
-                    icon="check"
-                    label="admin.logs.screened_ips.actions.do_nothing"}}
+                  <DButton @class="btn-default" @action={{action "allow"}} @actionParam={{item}} @icon="check" @label="admin.logs.screened_ips.actions.do_nothing" />
                 {{else}}
-                  {{d-button
-                    class="btn-default"
-                    action=(action "block")
-                    actionParam=item
-                    icon="ban"
-                    label="admin.logs.screened_ips.actions.block"}}
+                  <DButton @class="btn-default" @action={{action "block"}} @actionParam={{item}} @icon="ban" @label="admin.logs.screened_ips.actions.block" />
                 {{/if}}
               {{/if}}
             </td>
@@ -115,4 +83,4 @@
   {{else}}
     {{i18n "search.no_results"}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-urls.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-urls.hbs
index d48248152d0..10f9fd3d653 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/screened-urls.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/screened-urls.hbs
@@ -1,15 +1,10 @@
 <p>
   {{i18n "admin.logs.screened_urls.description"}}
 </p>
-  {{d-button
-    class="btn-default"
-    action=(action "exportScreenedUrlList")
-    title="admin.export_csv.button_title.screened_url"
-    icon="download"
-    label="admin.export_csv.button_text"}}
+  <DButton @class="btn-default" @action={{action "exportScreenedUrlList"}} @title="admin.export_csv.button_title.screened_url" @icon="download" @label="admin.export_csv.button_text" />
 <br>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if model.length}}
     <table class="screened-urls grid">
       <thead>
@@ -36,4 +31,4 @@
   {{else}}
     {{i18n "search.no_results"}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
index afb605991bf..0250ebd3888 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
@@ -31,23 +31,18 @@
     </div>
   {{else}}
     {{i18n "admin.logs.staff_actions.filter"}}
-    {{combo-box
-      content=userHistoryActions
-      value=filterActionId
-      onChange=(action "filterActionIdChanged")
-      options=(hash
+    <ComboBox @content={{userHistoryActions}} @value={{filterActionId}} @onChange={{action "filterActionIdChanged"}} @options={{hash
         none="admin.logs.staff_actions.all"
-      )
-    }}
+      }} />
   {{/if}}
 
-  {{d-button class="btn-default" action=(action "exportStaffActionLogs") label="admin.export_csv.button_text" icon="download"}}
+  <DButton @class="btn-default" @action={{action "exportStaffActionLogs"}} @label="admin.export_csv.button_text" @icon="download" />
 </div>
 
 <div class="clearfix"></div>
 
-{{#staff-actions}}
-  {{#load-more selector=".staff-logs tr" action=(action "loadMore")}}
+<StaffActions>
+  <LoadMore @selector=".staff-logs tr" @action={{action "loadMore"}}>
     {{#if model.content}}
       <table class="table staff-logs grid">
         <thead>
@@ -64,10 +59,10 @@
               <td class="staff-users">
                 <div class="staff-user">
                   {{#if item.acting_user}}
-                    {{#link-to "adminUser" item.acting_user}}
+                    <LinkTo @route="adminUser" @model={{item.acting_user}}>
                       {{avatar item.acting_user imageSize="tiny"}}
                       {{item.acting_user.username}}
-                    {{/link-to}}
+                    </LinkTo>
                   {{else}}
                     <span class="deleted-user" title={{i18n "admin.user.deleted"}}>
                       {{d-icon "far-trash-alt"}}
@@ -81,7 +76,7 @@
               <td class="col value subject">
                 <div class="subject">
                   {{#if item.target_user}}
-                    {{#link-to "adminUser" item.target_user}}{{avatar item.target_user imageSize="tiny"}}{{/link-to}}
+                    <LinkTo @route="adminUser" @model={{item.target_user}}>{{avatar item.target_user imageSize="tiny"}}</LinkTo>
                     <a href {{action "filterByTargetUser" item.target_user}}>{{item.target_user.username}}</a>
                   {{/if}}
                   {{#if item.subject}}
@@ -107,9 +102,9 @@
         </tbody>
       </table>
     {{else if model.loadingMore}}
-      {{conditional-loading-spinner condition=model.loadingMore}}
+      <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
     {{else}}
       {{i18n "search.no_results"}}
     {{/if}}
-  {{/load-more}}
-{{/staff-actions}}
+  </LoadMore>
+</StaffActions>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs
index 100a36afce2..e2348526e1e 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-add-upload.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="add-upload-modal" title="admin.customize.theme.add_upload"}}
+<DModalBody @class="add-upload-modal" @title="admin.customize.theme.add_upload">
   <div class="inputs">
     <section class="field">
       <input onchange={{action "updateName"}} type="file" id="file-input" accept="*">
@@ -6,7 +6,7 @@
     </section>
     <section class="field">
       <label for="theme-variable-name">{{i18n "admin.customize.theme.variable_name"}}</label>
-      {{input id="theme-variable-name" value=name}}
+      <Input @id="theme-variable-name" @value={{name}} />
     </section>
     {{#if fileSelected}}
       {{#if errorMessage}}
@@ -14,9 +14,9 @@
       {{/if}}
     {{/if}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "upload") disabled=disabled class="btn btn-primary" icon="upload" label="admin.customize.theme.upload"}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DButton @action={{action "upload"}} @disabled={{disabled}} @class="btn btn-primary" @icon="upload" @label="admin.customize.theme.upload" />
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-api-key-urls.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-api-key-urls.hbs
index f9a138f247b..df8e196d946 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-api-key-urls.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-api-key-urls.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="admin.api.scopes.allowed_urls"}}
+<DModalBody @title="admin.api.scopes.allowed_urls">
   <div>
     <ul>
       {{#each model.urls as |url|}}
@@ -8,4 +8,4 @@
       {{/each}}
     </ul>
   </div>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-badge-preview.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-badge-preview.hbs
index 219dee18d45..ef68ae0d4ce 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-badge-preview.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-badge-preview.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="admin.badges.preview.modal_title" class="badge-query-preview"}}
+<DModalBody @title="admin.badges.preview.modal_title" @class="badge-query-preview">
   {{#if errors}}
     <p class="error-header">{{i18n "admin.badges.preview.sql_error_header"}}</p>
 
@@ -52,4 +52,4 @@
       </div>
     {{/if}}
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-color-scheme-select-base.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-color-scheme-select-base.hbs
index 15a39314cd3..3d5980e00e7 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-color-scheme-select-base.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-color-scheme-select-base.hbs
@@ -1,20 +1,10 @@
 <div>
-  {{#d-modal-body title="admin.customize.colors.select_base.title"}}
+  <DModalBody @title="admin.customize.colors.select_base.title">
     {{i18n "admin.customize.colors.select_base.description"}}
-    {{combo-box
-      content=model
-      value=selectedBaseThemeId
-      onChange=(action (mut selectedBaseThemeId))
-      valueProperty="base_scheme_id"
-    }}
-  {{/d-modal-body}}
+    <ComboBox @content={{model}} @value={{selectedBaseThemeId}} @onChange={{action (mut selectedBaseThemeId)}} @valueProperty="base_scheme_id" />
+  </DModalBody>
 
   <div class="modal-footer">
-    {{d-button
-      class="btn-primary"
-      action=(action "selectBase")
-      icon="plus"
-      label="admin.customize.new"
-    }}
+    <DButton @class="btn-primary" @action={{action "selectBase"}} @icon="plus" @label="admin.customize.new" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-delete-posts-confirmation.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-delete-posts-confirmation.hbs
index 9c5cb275c3b..b9836ac0025 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-delete-posts-confirmation.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-delete-posts-confirmation.hbs
@@ -1,20 +1,11 @@
 <div>
-  {{#d-modal-body rawTitle=(i18n "admin.user.delete_posts.confirmation.title" username=username)}}
+  <DModalBody @rawTitle={{i18n "admin.user.delete_posts.confirmation.title" username=username}}>
     <p>{{html-safe (i18n "admin.user.delete_posts.confirmation.description" username=username post_count=postCount text=text)}}</p>
-    {{input type="text" value=value}}
-  {{/d-modal-body}}
+    <Input @type="text" @value={{value}} />
+  </DModalBody>
 
   <div class="modal-footer">
-    {{d-button
-      class="btn-danger"
-      action=(action "confirm")
-      icon="trash-alt"
-      disabled=deleteDisabled
-      translatedLabel=deleteButtonText
-    }}
-    {{d-button
-      action=(action "close")
-      label="admin.user.delete_posts.confirmation.cancel"
-    }}
+    <DButton @class="btn-danger" @action={{action "confirm"}} @icon="trash-alt" @disabled={{deleteDisabled}} @translatedLabel={{deleteButtonText}} />
+    <DButton @action={{action "close"}} @label="admin.user.delete_posts.confirmation.cancel" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-delete-user-posts-progress.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-delete-user-posts-progress.hbs
index 1f962689428..8f86288d70c 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-delete-user-posts-progress.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-delete-user-posts-progress.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="admin.user.delete_posts.progress.title" dismissable=false}}
+<DModalBody @title="admin.user.delete_posts.progress.title" @dismissable={{false}}>
   <p>{{I18n "admin.user.delete_posts.progress.description"}}</p>
   <div class="progress-bar"><span style={{html-safe (concat "width: " deletedPercentage "%")}}></span></div>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs
index a5fba689935..7c47c27779b 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-edit-badge-groupings.hbs
@@ -1,34 +1,30 @@
-{{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
+<DModalBody @title="admin.badges.badge_groupings.modal_title" @class="badge-groupings-modal">
   <div class="badge-groupings">
     <ul class="badge-groupings-list">
       {{#each workingCopy as |wc|}}
         <li class="badge-grouping-item">
           <div class="badge-grouping">
             {{#if wc.editing}}
-              {{input value=wc.name class="badge-grouping-name-input"}}
-              {{d-button action=(action "save" wc) icon="check"}}
+              <Input @value={{wc.name}} class="badge-grouping-name-input" />
+              <DButton @action={{action "save" wc}} @icon="check" />
             {{else}}
               <span>{{wc.displayName}}</span>
             {{/if}}
           </div>
           <div class="actions">
-            {{d-button action=(action "edit" wc) disabled=wc.system icon="pencil-alt"}}
-            {{d-button action=(action "up" wc) icon="chevron-up"}}
-            {{d-button action=(action "down" wc) icon="chevron-down"}}
-            {{d-button action=(action "delete" wc) disabled=wc.system icon="times"}}
+            <DButton @action={{action "edit" wc}} @disabled={{wc.system}} @icon="pencil-alt" />
+            <DButton @action={{action "up" wc}} @icon="chevron-up" />
+            <DButton @action={{action "down" wc}} @icon="chevron-down" />
+            <DButton @action={{action "delete" wc}} @disabled={{wc.system}} @icon="times" />
           </div>
         </li>
       {{/each}}
     </ul>
   </div>
-  {{d-button action=(action "add") label="admin.badges.new"}}
-{{/d-modal-body}}
+  <DButton @action={{action "add"}} @label="admin.badges.new" />
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    action=(action "saveAll")
-    label="admin.badges.save"
-    class="btn-primary"
-    disabled=submitDisabled}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DButton @action={{action "saveAll"}} @label="admin.badges.save" @class="btn-primary" @disabled={{submitDisabled}} />
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-incoming-email.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-incoming-email.hbs
index 7882fbd0745..057f58c1ed8 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-incoming-email.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-incoming-email.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="incoming-emails" title="admin.email.incoming_emails.modal.title"}}
+<DModalBody @class="incoming-emails" @title="admin.email.incoming_emails.modal.title">
   <div class="control-group">
     <label>{{i18n "admin.email.incoming_emails.modal.error"}}</label>
     <div class="controls">
@@ -14,7 +14,7 @@
   <div class="control-group">
     <label>{{i18n "admin.email.incoming_emails.modal.headers"}}</label>
     <div class="controls">
-      {{textarea value=model.headers wrap="off"}}
+      <Textarea @value={{model.headers}} @wrap="off" />
     </div>
   </div>
 
@@ -28,7 +28,7 @@
   <div class="control-group">
     <label>{{i18n "admin.email.incoming_emails.modal.body"}}</label>
     <div class="controls">
-      {{textarea value=model.body}}
+      <Textarea @value={{model.body}} />
     </div>
   </div>
 
@@ -38,8 +38,8 @@
     <div class="control-group">
       <label>{{i18n "admin.email.incoming_emails.modal.rejection_message"}}</label>
       <div class="controls">
-        {{textarea value=model.rejection_message}}
+        <Textarea @value={{model.rejection_message}} />
       </div>
     </div>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs
index cdaed98667b..abb8dde504e 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs
@@ -1,10 +1,10 @@
-{{#d-modal-body class="install-theme" title="admin.customize.theme.install"}}
+<DModalBody @class="install-theme" @title="admin.customize.theme.install">
   {{#unless directRepoInstall}}
     <div class="install-theme-items">
-      {{install-theme-item value="popular" selection=selection label="admin.customize.theme.install_popular"}}
-      {{install-theme-item value="local" selection=selection label="admin.customize.theme.install_upload"}}
-      {{install-theme-item value="remote" selection=selection label="admin.customize.theme.install_git_repo"}}
-      {{install-theme-item value="create" selection=selection label="admin.customize.theme.install_create" showIcon=true}}
+      <InstallThemeItem @value="popular" @selection={{selection}} @label="admin.customize.theme.install_popular" />
+      <InstallThemeItem @value="local" @selection={{selection}} @label="admin.customize.theme.install_upload" />
+      <InstallThemeItem @value="remote" @selection={{selection}} @label="admin.customize.theme.install_git_repo" />
+      <InstallThemeItem @value="create" @selection={{selection}} @label="admin.customize.theme.install_create" @showIcon={{true}} />
     </div>
   {{/unless}}
   <div class="install-theme-content">
@@ -28,11 +28,7 @@
               {{#if theme.installed}}
                 <span>{{i18n "admin.customize.theme.installed"}}</span>
               {{else}}
-                {{d-button class="btn-small"
-                  label="admin.customize.theme.install"
-                  disabled=installDisabled
-                  icon="upload"
-                  action=(action "installThemeFromList" theme.value)}}
+                <DButton @class="btn-small" @label="admin.customize.theme.install" @disabled={{installDisabled}} @icon="upload" @action={{action "installThemeFromList" theme.value}} />
 
                 {{#if theme.preview}}
                   <a href={{theme.preview}} rel="noopener noreferrer" target="_blank">{{d-icon "desktop"}} {{i18n "admin.customize.theme.preview"}}</a>
@@ -55,23 +51,20 @@
       <div class="inputs">
         <div class="repo">
           <div class="label">{{i18n "admin.customize.theme.import_web_tip"}}</div>
-          {{input value=uploadUrl placeholder=urlPlaceholder}}
+          <Input @value={{uploadUrl}} placeholder={{urlPlaceholder}} />
         </div>
 
-        {{d-button
-          class="btn-small advanced-repo"
-          action=(action "toggleAdvanced")
-          label="admin.customize.theme.import_web_advanced"}}
+        <DButton @class="btn-small advanced-repo" @action={{action "toggleAdvanced"}} @label="admin.customize.theme.import_web_advanced" />
 
         {{#if advancedVisible}}
           <div class="branch">
             <div class="label">{{i18n "admin.customize.theme.remote_branch"}}</div>
-            {{input value=branch placeholder="main"}}
+            <Input @value={{branch}} placeholder="main" />
           </div>
 
           <div class="check-private">
             <label>
-              {{input type="checkbox" checked=privateChecked}}
+              <Input @type="checkbox" @checked={{privateChecked}} />
               {{i18n "admin.customize.theme.is_private"}}
             </label>
           </div>
@@ -79,8 +72,8 @@
             <div class="public-key">
               <div class="label">{{i18n "admin.customize.theme.public_key"}}</div>
               <div class="public-key-text-wrapper">
-                {{textarea class="public-key-value" readonly=true value=publicKey}}
-                {{copy-button selector="textarea.public-key-value"}}
+                <Textarea class="public-key-value" @readonly={{true}} @value={{publicKey}} />
+                <CopyButton @selector="textarea.public-key-value" />
               </div>
             </div>
           {{else}}
@@ -95,15 +88,10 @@
     {{#if create}}
       <div class="inputs">
         <div class="label">{{i18n "admin.customize.theme.create_name"}}</div>
-        {{input value=name placeholder=placeholder}}
+        <Input @value={{name}} placeholder={{placeholder}} />
 
         <div class="label">{{i18n "admin.customize.theme.create_type"}}</div>
-        {{combo-box
-          valueProperty="value"
-          content=createTypes
-          value=selectedType
-          onChange=(action (mut selectedType))
-        }}
+        <ComboBox @valueProperty="value" @content={{createTypes}} @value={{selectedType}} @onChange={{action (mut selectedType)}} />
       </div>
     {{/if}}
 
@@ -115,7 +103,7 @@
     {{/if}}
   </div>
 
-{{/d-modal-body}}
+</DModalBody>
 
 {{#unless popular}}
   <div class="modal-footer">
@@ -124,7 +112,7 @@
         ⚠️ {{duplicateRemoteThemeWarning}}
       </div>
     {{/if}}
-    {{d-button action=(action "installTheme") disabled=installDisabled class="btn btn-primary" label=submitLabel}}
-    {{d-modal-cancel close=(route-action "closeModal")}}
+    <DButton @action={{action "installTheme"}} @disabled={{installDisabled}} @class="btn btn-primary" @label={{submitLabel}} />
+    <DModalCancel @close={{route-action "closeModal"}} />
   </div>
 {{/unless}}
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-confirmation.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-confirmation.hbs
index fc07ea1f19f..d315ac0672b 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-confirmation.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-confirmation.hbs
@@ -1,20 +1,11 @@
 <div>
-  {{#d-modal-body rawTitle=(i18n "admin.user.merge.confirmation.title" username=username)}}
+  <DModalBody @rawTitle={{i18n "admin.user.merge.confirmation.title" username=username}}>
     <p>{{html-safe (i18n "admin.user.merge.confirmation.description" username=username targetUsername=targetUsername text=text)}}</p>
-    {{input type="text" value=value}}
-  {{/d-modal-body}}
+    <Input @type="text" @value={{value}} />
+  </DModalBody>
 
   <div class="modal-footer">
-    {{d-button
-      class="btn-danger"
-      action=(action "confirm")
-      icon="trash-alt"
-      disabled=mergeDisabled
-      translatedLabel=mergeButtonText
-    }}
-    {{d-button
-      action=(action "close")
-      label="admin.user.merge.confirmation.cancel"
-    }}
+    <DButton @class="btn-danger" @action={{action "confirm"}} @icon="trash-alt" @disabled={{mergeDisabled}} @translatedLabel={{mergeButtonText}} />
+    <DButton @action={{action "close"}} @label="admin.user.merge.confirmation.cancel" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-progress.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-progress.hbs
index 40c3c160daf..2f08cd30a52 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-progress.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-progress.hbs
@@ -1,3 +1,3 @@
-{{#d-modal-body title="admin.user.merge.progress.title" dismissable=false}}
+<DModalBody @title="admin.user.merge.progress.title" @dismissable={{false}}>
   {{ message }}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs
index 458c5b56bcf..b8b1f604391 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs
@@ -1,27 +1,14 @@
 <div>
-  {{#d-modal-body rawTitle=(i18n "admin.user.merge.prompt.title" username=username)}}
+  <DModalBody @rawTitle={{i18n "admin.user.merge.prompt.title" username=username}}>
     <p>{{html-safe (i18n "admin.user.merge.prompt.description" username=username)}}</p>
-    {{email-group-user-chooser
-      value=targetUsername
-      onChange=(action "updateUsername")
-      options=(hash
+    <EmailGroupUserChooser @value={{targetUsername}} @onChange={{action "updateUsername"}} @options={{hash
         maximum=1
         filterPlaceholder="admin.user.merge.prompt.target_username_placeholder"
-      )
-    }}
-  {{/d-modal-body}}
+      }} />
+  </DModalBody>
 
   <div class="modal-footer">
-    {{d-button
-      class="btn-primary"
-      action=(action "showConfirmation")
-      icon="trash-alt"
-      disabled=mergeDisabled
-      translatedLabel=mergeButtonText
-    }}
-    {{d-button
-      action=(action "close")
-      label="admin.user.merge.prompt.cancel"
-    }}
+    <DButton @class="btn-primary" @action={{action "showConfirmation"}} @icon="trash-alt" @disabled={{mergeDisabled}} @translatedLabel={{mergeButtonText}} />
+    <DButton @action={{action "close"}} @label="admin.user.merge.prompt.cancel" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-reseed.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-reseed.hbs
index 9bdbd1dba73..f56a14d706f 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-reseed.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-reseed.hbs
@@ -1,12 +1,12 @@
-{{#d-modal-body title="admin.reseed.modal.title" subtitle="admin.reseed.modal.subtitle" class="reseed-modal"}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody @title="admin.reseed.modal.title" @subtitle="admin.reseed.modal.subtitle" @class="reseed-modal">
+  <ConditionalLoadingSpinner @condition={{loading}}>
     {{#if categories}}
       <fieldset>
         <legend class="options-group-title">{{i18n "admin.reseed.modal.categories"}}</legend>
 
         {{#each categories as |category|}}
           <label>
-            {{input class="option" type="checkbox" checked=category.selected}}
+            <Input class="option" @type="checkbox" @checked={{category.selected}} />
             <span>{{category.name}}</span>
           </label>
         {{/each}}
@@ -21,20 +21,20 @@
 
         {{#each topics as |topic|}}
           <label>
-            {{input class="option" type="checkbox" checked=topic.selected}}
+            <Input class="option" @type="checkbox" @checked={{topic.selected}} />
             <span>{{topic.name}}</span>
           </label>
         {{/each}}
       </fieldset>
     {{/if}}
-  {{/conditional-loading-spinner}}
-{{/d-modal-body}}
+  </ConditionalLoadingSpinner>
+</DModalBody>
 
 <div class="modal-footer">
-  {{conditional-loading-spinner condition=reseeding size="small"}}
-  {{d-button action=(action "reseed") class="btn-danger" label="admin.reseed.modal.replace" disabled=reseeding}}
+  <ConditionalLoadingSpinner @condition={{reseeding}} @size="small" />
+  <DButton @action={{action "reseed"}} @class="btn-danger" @label="admin.reseed.modal.replace" @disabled={{reseeding}} />
 
   {{#unless reseeding}}
-    {{d-modal-cancel close=(route-action "closeModal")}}
+    <DModalCancel @close={{route-action "closeModal"}} />
   {{/unless}}
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-silence-user.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-silence-user.hbs
index e6a31315b5f..2dec18de884 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-silence-user.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-silence-user.hbs
@@ -1,43 +1,29 @@
-{{#d-modal-body title="admin.user.silence_modal_title"}}
-  {{#conditional-loading-spinner condition=loadingUser}}
+<DModalBody @title="admin.user.silence_modal_title">
+  <ConditionalLoadingSpinner @condition={{loadingUser}}>
 
     {{#if errorMessage}}
       <div class="alert alert-error">{{errorMessage}}</div>
     {{/if}}
 
-    {{admin-penalty-history user=user}}
+    <AdminPenaltyHistory @user={{user}} />
 
     <div class="until-controls">
       <label>
-        {{future-date-input
-          class="silence-until"
-          label="admin.user.silence_duration"
-          clearable=false
-          input=silenceUntil
-          onChangeInput=(action (mut silenceUntil))
-        }}
+        <FutureDateInput @class="silence-until" @label="admin.user.silence_duration" @clearable={{false}} @input={{silenceUntil}} @onChangeInput={{action (mut silenceUntil)}} />
       </label>
     </div>
 
-    {{silence-details reason=reason message=message}}
+    <SilenceDetails @reason={{reason}} @message={{message}} />
     {{#if postId}}
-      {{penalty-post-action
-        postId=postId
-        postAction=postAction
-        postEdit=postEdit}}
+      <PenaltyPostAction @postId={{postId}} @postAction={{postAction}} @postEdit={{postEdit}} />
     {{/if}}
 
-  {{/conditional-loading-spinner}}
+  </ConditionalLoadingSpinner>
 
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-danger perform-silence"
-    action=(action "silence")
-    disabled=submitDisabled
-    icon="microphone-slash"
-    label="admin.user.silence"}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
-  {{conditional-loading-spinner condition=loading size="small"}}
+  <DButton @class="btn-danger perform-silence" @action={{action "silence"}} @disabled={{submitDisabled}} @icon="microphone-slash" @label="admin.user.silence" />
+  <DModalCancel @close={{route-action "closeModal"}} />
+  <ConditionalLoadingSpinner @condition={{loading}} @size="small" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-staff-action-log-details.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-staff-action-log-details.hbs
index 3039e95b132..e23e737cc1f 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-staff-action-log-details.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-staff-action-log-details.hbs
@@ -1,6 +1,6 @@
-{{#d-modal-body title="admin.logs.staff_actions.modal_title"}}
+<DModalBody @title="admin.logs.staff_actions.modal_title">
   <pre>{{model.details}}</pre>
-{{/d-modal-body}}
+</DModalBody>
 <div class="modal-footer">
-  {{d-button action=(route-action "closeModal") label="close"}}
+  <DButton @action={{route-action "closeModal"}} @label="close" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-start-backup.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-start-backup.hbs
index 011de55de94..fe0bb228c0e 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-start-backup.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-start-backup.hbs
@@ -1,14 +1,5 @@
-{{#d-modal-body title="admin.backups.operations.backup.confirm"}}
-  {{d-button
-    class="btn-primary backup-with-uploads"
-    action=(action "startBackupWithUploads")
-    label="yes_value"}}
-  {{d-button
-    class="backup-no-uploads"
-    action=(action "startBackupWithoutUploads")
-    label="admin.backups.operations.backup.without_uploads"}}
-  {{d-button
-    class="btn-default"
-    action=(action "cancel")
-    label="no_value"}}
-{{/d-modal-body}}
+<DModalBody @title="admin.backups.operations.backup.confirm">
+  <DButton @class="btn-primary backup-with-uploads" @action={{action "startBackupWithUploads"}} @label="yes_value" />
+  <DButton @class="backup-no-uploads" @action={{action "startBackupWithoutUploads"}} @label="admin.backups.operations.backup.without_uploads" />
+  <DButton @class="btn-default" @action={{action "cancel"}} @label="no_value" />
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-suspend-user.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-suspend-user.hbs
index 44f4a47ec1a..4c3288338dc 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-suspend-user.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-suspend-user.hbs
@@ -1,31 +1,22 @@
-{{#d-modal-body title="admin.user.suspend_modal_title"}}
-  {{#conditional-loading-spinner condition=loadingUser}}
+<DModalBody @title="admin.user.suspend_modal_title">
+  <ConditionalLoadingSpinner @condition={{loadingUser}}>
 
     {{#if errorMessage}}
       <div class="alert alert-error">{{errorMessage}}</div>
     {{/if}}
 
     {{#if user.canSuspend}}
-      {{admin-penalty-history user=user}}
+      <AdminPenaltyHistory @user={{user}} />
 
       <div class="until-controls">
         <label>
-          {{future-date-input
-            class="suspend-until"
-            label="admin.user.suspend_duration"
-            clearable=false
-            input=suspendUntil
-            onChangeInput=(action (mut suspendUntil))
-          }}
+          <FutureDateInput @class="suspend-until" @label="admin.user.suspend_duration" @clearable={{false}} @input={{suspendUntil}} @onChangeInput={{action (mut suspendUntil)}} />
         </label>
       </div>
-      {{suspension-details reason=reason message=message}}
+      <SuspensionDetails @reason={{reason}} @message={{message}} />
 
       {{#if postId}}
-        {{penalty-post-action
-          postId=postId
-          postAction=postAction
-          postEdit=postEdit}}
+        <PenaltyPostAction @postId={{postId}} @postAction={{postAction}} @postEdit={{postEdit}} />
       {{/if}}
 
     {{else}}
@@ -34,17 +25,12 @@
       </div>
     {{/if}}
 
-  {{/conditional-loading-spinner}}
+  </ConditionalLoadingSpinner>
 
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-danger perform-suspend"
-    action=(action "suspend")
-    disabled=submitDisabled
-    icon="ban"
-    label="admin.user.suspend"}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
-  {{conditional-loading-spinner condition=loading size="small"}}
+  <DButton @class="btn-danger perform-suspend" @action={{action "suspend"}} @disabled={{submitDisabled}} @icon="ban" @label="admin.user.suspend" />
+  <DModalCancel @close={{route-action "closeModal"}} />
+  <ConditionalLoadingSpinner @condition={{loading}} @size="small" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs
index 7b3ffb5ca5b..11e9b5c6abd 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-theme-change.hbs
@@ -1,11 +1,8 @@
 <div>
-  {{#d-modal-body title="admin.logs.staff_actions.modal_title"}}
+  <DModalBody @title="admin.logs.staff_actions.modal_title">
     {{html-safe diff}}
-  {{/d-modal-body}}
+  </DModalBody>
   <div class="modal-footer">
-    {{d-button
-      class="btn-primary"
-      action=(route-action "closeModal")
-      label="close"}}
+    <DButton @class="btn-primary" @action={{route-action "closeModal"}} @label="close" />
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-item.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-theme-item.hbs
index 7a7198fd570..bcb26896217 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-theme-item.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-theme-item.hbs
@@ -9,11 +9,7 @@
     {{#if theme.installed}}
       <span>{{i18n "admin.customize.theme.installed"}}</span>
     {{else}}
-      {{d-button class="btn-small"
-        label="admin.customize.theme.install"
-        disabled=installDisabled
-        icon="upload"
-        action=(action "installThemeFromList" theme.value)}}
+      <DButton @class="btn-small" @label="admin.customize.theme.install" @disabled={{installDisabled}} @icon="upload" @action={{action "installThemeFromList" theme.value}} />
     {{/if}}
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs
index 178f39075ce..a760891e33d 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-uploaded-image-list.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="uploaded-image-list"}}
+<DModalBody @class="uploaded-image-list">
   <div class="selectable-avatars">
     {{#each images as |image|}}
       <a href class="selectable-avatar" {{action "remove" image}}>
@@ -8,8 +8,8 @@
       <p>{{i18n "admin.site_settings.uploaded_image_list.empty"}}</p>
     {{/each}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
 <div class="modal-footer">
-  {{d-button action=(action "close") label="close"}}
-  {{images-uploader uploading=uploading done=(action "uploadDone") class="pull-right"}}
+  <DButton @action={{action "close"}} @label="close" />
+  <ImagesUploader @uploading={{uploading}} @done={{action "uploadDone"}} @class="pull-right" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-watched-word-test.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-watched-word-test.hbs
index 92b6b22679c..550a537278a 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-watched-word-test.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-watched-word-test.hbs
@@ -1,6 +1,6 @@
-{{#d-modal-body rawTitle=(i18n "admin.watched_words.test.modal_title" action=model.name) class="watched-words-test-modal"}}
+<DModalBody @rawTitle={{i18n "admin.watched_words.test.modal_title" action=model.name}} @class="watched-words-test-modal">
   <p>{{i18n "admin.watched_words.test.description"}}</p>
-  {{textarea name="test_value" value=value autofocus="autofocus"}}
+  <Textarea @name="test_value" @value={{value}} @autofocus="autofocus" />
   {{#if matches}}
     <p>
       {{i18n "admin.watched_words.test.found_matches"}}
@@ -33,4 +33,4 @@
   {{else}}
     <p>{{i18n "admin.watched_words.test.no_matches"}}</p>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/admin/addon/templates/modal/site-setting-default-categories.hbs b/app/assets/javascripts/admin/addon/templates/modal/site-setting-default-categories.hbs
index cd3e3c67459..3a79e51fde5 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/site-setting-default-categories.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/site-setting-default-categories.hbs
@@ -1,8 +1,8 @@
-{{#d-modal-body class="incoming-emails" rawTitle=model.key}}
+<DModalBody @class="incoming-emails" @rawTitle={{model.key}}>
   {{i18n "admin.site_settings.default_categories.modal_description" count=model.count}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "updateExistingUsers") class="btn-primary" label="admin.site_settings.default_categories.modal_yes"}}
-  {{d-button action=(action "cancel") label="admin.site_settings.default_categories.modal_no"}}
+  <DButton @action={{action "updateExistingUsers"}} @class="btn-primary" @label="admin.site_settings.default_categories.modal_yes" />
+  <DButton @action={{action "cancel"}} @label="admin.site_settings.default_categories.modal_no" />
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/permalinks.hbs b/app/assets/javascripts/admin/addon/templates/permalinks.hbs
index e23b0a62994..b1fcd5fa61e 100644
--- a/app/assets/javascripts/admin/addon/templates/permalinks.hbs
+++ b/app/assets/javascripts/admin/addon/templates/permalinks.hbs
@@ -3,18 +3,12 @@
 <div class="permalink-description">
   <span>{{i18n "admin.permalink.description"}}</span>
 </div>
-{{permalink-form action=(action "recordAdded")}}
+<PermalinkForm @action={{action "recordAdded"}} />
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if model.length}}
     <div class="permalink-search">
-      {{text-field
-        value=filter
-        class="url-input"
-        placeholderKey="admin.permalink.form.filter"
-        autocorrect="off"
-        autocapitalize="off"
-      }}
+      <TextField @value={{filter}} @class="url-input" @placeholderKey="admin.permalink.form.filter" @autocorrect="off" @autocapitalize="off" />
     </div>
     <table class="admin-logs-table permalinks grid">
       <thead class="heading-container">
@@ -26,11 +20,7 @@
         {{#each model as |pl|}}
           <tr class="admin-list-item">
             <td class="col first url">
-              {{flat-button
-                title="admin.permalink.copy_to_clipboard"
-                icon="far-clipboard"
-                action=(action "copyUrl" pl)
-              }}
+              <FlatButton @title="admin.permalink.copy_to_clipboard" @icon="far-clipboard" @action={{action "copyUrl" pl}} />
               <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span>
             </td>
             <td class="col destination">
@@ -54,7 +44,7 @@
               {{/if}}
             </td>
             <td class="col action" style="text-align: right;">
-              {{d-button action=(action "destroy") actionParam=pl icon="far-trash-alt" class="btn-danger"}}
+              <DButton @action={{action "destroy"}} @actionParam={{pl}} @icon="far-trash-alt" @class="btn-danger" />
             </td>
           </tr>
         {{/each}}
@@ -63,4 +53,4 @@
   {{else}}
     {{i18n "search.no_results"}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
index c2f02308987..fbdd4210b3d 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
@@ -53,7 +53,7 @@
           <td class="settings">
             {{#if currentUser.admin}}
               {{#if plugin.has_settings}}
-                {{d-button class="btn-default" action=(route-action "showSettings") actionParam=plugin icon="cog" label="admin.plugins.change_settings_short"}}
+                <DButton @class="btn-default" @action={{route-action "showSettings"}} @actionParam={{plugin}} @icon="cog" @label="admin.plugins.change_settings_short" />
               {{/if}}
             {{/if}}
           </td>
@@ -67,4 +67,4 @@
 
 <p class="admin-plugins-howto"><a href="https://meta.discourse.org/t/install-a-plugin/19157">{{i18n "admin.plugins.howto"}}</a></p>
 
-{{plugin-outlet name="admin-below-plugins-index" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="admin-below-plugins-index" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
diff --git a/app/assets/javascripts/admin/addon/templates/plugins.hbs b/app/assets/javascripts/admin/addon/templates/plugins.hbs
index 054a6d10068..f3d69d71c7e 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins.hbs
@@ -1,24 +1,19 @@
 <div class="admin-controls">
   <div class="controls">
-    {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
+    <DButton @action={{action "toggleMenu"}} @class="menu-toggle" @icon="bars" />
 
     {{#if currentUser.admin}}
-      {{d-button
-        label="admin.plugins.change_settings"
-        icon="cog"
-        class="btn-default settings-button"
-        action=(route-action "showSettings")
-      }}
+      <DButton @label="admin.plugins.change_settings" @icon="cog" @class="btn-default settings-button" @action={{route-action "showSettings"}} />
     {{/if}}
   </div>
 </div>
 
 <div class="admin-nav pull-left">
   <ul class="nav nav-stacked">
-    {{nav-item route="adminPlugins.index" label="admin.plugins.title"}}
+    <NavItem @route="adminPlugins.index" @label="admin.plugins.title" />
 
     {{#each adminRoutes as |route|}}
-      {{nav-item route=route.full_location label=route.label}}
+      <NavItem @route={{route.full_location}} @label={{route.label}} />
     {{/each}}
   </ul>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/reports-show.hbs b/app/assets/javascripts/admin/addon/templates/reports-show.hbs
index 6c6a8fb279e..4f761d850a6 100644
--- a/app/assets/javascripts/admin/addon/templates/reports-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/reports-show.hbs
@@ -1,8 +1 @@
-{{admin-report
-  showAllReportsLink=true
-  dataSourceName=model.type
-  filters=model
-  reportOptions=reportOptions
-  showFilteringUI=true
-  onRefresh=(route-action "onParamsChange")
-}}
+<AdminReport @showAllReportsLink={{true}} @dataSourceName={{model.type}} @filters={{model}} @reportOptions={{reportOptions}} @showFilteringUI={{true}} @onRefresh={{route-action "onParamsChange"}} />
diff --git a/app/assets/javascripts/admin/addon/templates/search-logs-index.hbs b/app/assets/javascripts/admin/addon/templates/search-logs-index.hbs
index baf516489d8..c2c091e1d29 100644
--- a/app/assets/javascripts/admin/addon/templates/search-logs-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/search-logs-index.hbs
@@ -1,14 +1,9 @@
 <div class="admin-title">
-  {{period-chooser period=period onChange=(action (mut period))}}
-  {{combo-box
-    content=searchTypeOptions
-    value=searchType
-    class="search-logs-filter"
-    onChange=(action (mut searchType))
-  }}
+  <PeriodChooser @period={{period}} @onChange={{action (mut period)}} />
+  <ComboBox @content={{searchTypeOptions}} @value={{searchType}} @class="search-logs-filter" @onChange={{action (mut searchType)}} />
 </div>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if model.length}}
 
     <table class="search-logs-list grid">
@@ -21,9 +16,9 @@
         {{#each model as |item|}}
           <tr class="admin-list-item">
             <td class="col term">
-              {{#link-to "adminSearchLogs.term" (query-params term=item.term period=period) class="test"}}
+              <LinkTo @route="adminSearchLogs.term" @query={{hash term=item.term period=period}} class="test">
                 {{item.term}}
-              {{/link-to}}
+              </LinkTo>
             </td>
             <td class="col"><div class="label">{{i18n "admin.logs.search_logs.searches"}}</div>{{item.searches}}</td>
             <td class="col"><div class="label">{{i18n "admin.logs.search_logs.click_through_rate"}}</div>{{item.ctr}}%</td>
@@ -35,4 +30,4 @@
   {{else}}
     {{i18n "search.no_results"}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/search-logs-term.hbs b/app/assets/javascripts/admin/addon/templates/search-logs-term.hbs
index b4b0c8aed3e..d90571523a8 100644
--- a/app/assets/javascripts/admin/addon/templates/search-logs-term.hbs
+++ b/app/assets/javascripts/admin/addon/templates/search-logs-term.hbs
@@ -1,19 +1,14 @@
 <div class="admin-title">
-  {{period-chooser period=period onChange=(action (mut period))}}
-  {{combo-box
-    content=searchTypeOptions
-    value=searchType
-    class="search-logs-filter"
-    onChange=(action (mut searchType))
-  }}
+  <PeriodChooser @period={{period}} @onChange={{action (mut period)}} />
+  <ComboBox @content={{searchTypeOptions}} @value={{searchType}} @class="search-logs-filter" @onChange={{action (mut searchType)}} />
 </div>
 
 <h2>
-  {{#link-to "full-page-search" (query-params q=term)}}{{term}}{{/link-to}}
+  <LinkTo @route="full-page-search" @query={{hash q=term}}>{{term}}</LinkTo>
 </h2>
 
-{{#conditional-loading-spinner condition=refreshing}}
-  {{admin-graph model=model type="bar"}}
+<ConditionalLoadingSpinner @condition={{refreshing}}>
+  <AdminGraph @model={{model}} @type="bar" />
 
   <br><br>
   <h2> {{i18n "admin.logs.search_logs.header_search_results"}} </h2>
@@ -31,14 +26,14 @@
         <div class="fps-topic">
           <div class="topic">
             <a href={{result.url}} class="search-link">
-              {{topic-status topic=result.topic disableActions=true}}
+              <TopicStatus @topic={{result.topic}} @disableActions={{true}} />
               <span class="topic-title">
                 {{#if result.useTopicTitleHeadline}}
                   {{html-safe result.topicTitleHeadline}}
                 {{else}}
-                  {{#highlight-search highlight=q}}
+                  <HighlightSearch @highlight={{q}}>
                     {{html-safe result.topic.fancyTitle}}
-                  {{/highlight-search}}
+                  </HighlightSearch>
                 {{/if}}
               </span>
             </a>
@@ -66,9 +61,9 @@
               {{#if siteSettings.use_pg_headlines_for_excerpt}}
                 {{html-safe result.blurb}}
               {{else}}
-                {{#highlight-search highlight=highlightQuery}}
+                <HighlightSearch @highlight={{highlightQuery}}>
                   {{html-safe result.blurb}}
-                {{/highlight-search}}
+                </HighlightSearch>
               {{/if}}
             {{/if}}
           </div>
@@ -76,4 +71,4 @@
       </div>
     {{/each}}
   </div>
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/site-settings-category.hbs b/app/assets/javascripts/admin/addon/templates/site-settings-category.hbs
index 3703cf3c8fb..b6aa9caa872 100644
--- a/app/assets/javascripts/admin/addon/templates/site-settings-category.hbs
+++ b/app/assets/javascripts/admin/addon/templates/site-settings-category.hbs
@@ -1,12 +1,12 @@
 {{#if filteredContent}}
-  {{#d-section class="form-horizontal settings"}}
+  <DSection @class="form-horizontal settings">
     {{#each filteredContent as |setting|}}
-      {{site-setting setting=setting afterSave=(route-action "refreshAll")}}
+      <SiteSetting @setting={{setting}} @afterSave={{route-action "refreshAll"}} />
     {{/each}}
     {{#if category.hasMore}}
       <p class="warning">{{i18n "admin.site_settings.more_than_30_results"}}</p>
     {{/if}}
-  {{/d-section}}
+  </DSection>
 {{else}}
   <br>
   {{i18n "admin.site_settings.no_results"}}
diff --git a/app/assets/javascripts/admin/addon/templates/site-settings.hbs b/app/assets/javascripts/admin/addon/templates/site-settings.hbs
index f236db32a1a..0e6cdf0f68d 100644
--- a/app/assets/javascripts/admin/addon/templates/site-settings.hbs
+++ b/app/assets/javascripts/admin/addon/templates/site-settings.hbs
@@ -2,14 +2,14 @@
 
   <div class="controls">
     <div class="inline-form">
-      {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
-      {{text-field id="setting-filter" value=filter placeholderKey="type_to_filter" class="no-blur"}}
-      {{d-button class="btn-default" id="clear-filter" action=(action "clearFilter") label="admin.site_settings.clear_filter"}}
+      <DButton @action={{action "toggleMenu"}} @class="menu-toggle" @icon="bars" />
+      <TextField @id="setting-filter" @value={{filter}} @placeholderKey="type_to_filter" @class="no-blur" />
+      <DButton @class="btn-default" @id="clear-filter" @action={{action "clearFilter"}} @label="admin.site_settings.clear_filter" />
     </div>
   </div>
   <div class="search controls">
     <label>
-      {{input type="checkbox" checked=onlyOverridden}}
+      <Input @type="checkbox" @checked={{onlyOverridden}} />
       {{i18n "admin.settings.show_overriden"}}
     </label>
   </div>
@@ -19,10 +19,10 @@
   <ul class="nav nav-stacked">
     {{#each visibleSiteSettings as |category|}}
       <li class={{category.nameKey}}>
-        {{#link-to "adminSiteSettingsCategory" category.nameKey class=category.nameKey}}
+        <LinkTo @route="adminSiteSettingsCategory" @model={{category.nameKey}} class={{category.nameKey}}>
           {{category.name}}
           {{#if category.count}}<span class="count">({{category.count}})</span>{{/if}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/each}}
   </ul>
diff --git a/app/assets/javascripts/admin/addon/templates/site-text-edit.hbs b/app/assets/javascripts/admin/addon/templates/site-text-edit.hbs
index 2bf960c24bc..5d726ad92af 100644
--- a/app/assets/javascripts/admin/addon/templates/site-text-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/site-text-edit.hbs
@@ -7,17 +7,17 @@
     <h4>{{i18n "admin.site_text.locale"}} {{localeFullName}}</h4>
   </div>
 
-  {{expanding-text-area value=buffered.value rows="1" class="site-text-value"}}
+  <ExpandingTextArea @value={{buffered.value}} @rows="1" @class="site-text-value" />
 
-  {{#save-controls model=siteText action=(action "saveChanges") saved=saved saveDisabled=saveDisabled}}
+  <SaveControls @model={{siteText}} @action={{action "saveChanges"}} @saved={{saved}} @saveDisabled={{saveDisabled}}>
     {{#if siteText.can_revert}}
-      {{d-button action=(action "revertChanges") label="admin.site_text.revert" class="revert-site-text"}}
+      <DButton @action={{action "revertChanges"}} @label="admin.site_text.revert" @class="revert-site-text" />
     {{/if}}
-  {{/save-controls}}
+  </SaveControls>
 
-  {{#link-to "adminSiteText.index" (query-params locale=locale) class="go-back"}}
+  <LinkTo @route="adminSiteText.index" @query={{hash locale=locale}} class="go-back">
     {{d-icon "arrow-left"}}
     {{i18n "admin.site_text.go_back"}}
-  {{/link-to}}
+  </LinkTo>
 
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/site-text-index.hbs b/app/assets/javascripts/admin/addon/templates/site-text-index.hbs
index bce391d31e7..34fcd700a79 100644
--- a/app/assets/javascripts/admin/addon/templates/site-text-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/site-text-index.hbs
@@ -1,41 +1,26 @@
 <div class="search-area">
   <p>{{i18n "admin.site_text.description"}}</p>
 
-  {{text-field value=q
-               placeholderKey="admin.site_text.search"
-               class="no-blur site-text-search"
-               autofocus="true"
-               key-up=(action "search")}}
+  <TextField @value={{q}} @placeholderKey="admin.site_text.search" @class="no-blur site-text-search" @autofocus="true" @key-up={{action "search"}} />
 
   <div class="reseed">
-    {{d-button action=(route-action "showReseedModal")
-               class="btn-default"
-               label="admin.reseed.action.label"
-               title="admin.reseed.action.title"
-               icon="sync"}}
+    <DButton @action={{route-action "showReseedModal"}} @class="btn-default" @label="admin.reseed.action.label" @title="admin.reseed.action.title" @icon="sync" />
   </div>
 
   <p class="filter-options">
     <div class="locale">
       <label>{{i18n "admin.site_text.locale"}}</label>
-      {{combo-box
-        valueProperty="value"
-        content=availableLocales
-        value=locale
-        onChange=(action "updateLocale")
-        class="locale-search"
-        options=(hash filterable=true)
-      }}
+      <ComboBox @valueProperty="value" @content={{availableLocales}} @value={{locale}} @onChange={{action "updateLocale"}} @class="locale-search" @options={{hash filterable=true}} />
     </div>
 
     <label>
-      {{input type="checkbox" checked=overridden click=(action "toggleOverridden")}}
+      <Input @type="checkbox" @checked={{overridden}} @click={{action "toggleOverridden"}} />
       {{i18n "admin.site_text.show_overriden"}}
     </label>
   </p>
 </div>
 
-{{#conditional-loading-spinner condition=searching}}
+<ConditionalLoadingSpinner @condition={{searching}}>
   {{#if showFallbackLocaleWarning}}
     <div class="alert alert-info">
       {{d-icon "exclamation-circle"}}
@@ -48,10 +33,10 @@
   {{/if}}
 
   {{#each siteTexts as |siteText|}}
-    {{site-text-summary siteText=siteText editAction=(action "edit") term=q searchRegex=siteTexts.extras.regex}}
+    <SiteTextSummary @siteText={{siteText}} @editAction={{action "edit"}} @term={{q}} @searchRegex={{siteTexts.extras.regex}} />
   {{/each}}
 
   {{#if siteTexts.extras.has_more}}
     <p class="warning">{{i18n "admin.site_text.more_than_50_results"}}</p>
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/user-badges.hbs b/app/assets/javascripts/admin/addon/templates/user-badges.hbs
index 44549f6613d..38d322d2a66 100644
--- a/app/assets/javascripts/admin/addon/templates/user-badges.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-badges.hbs
@@ -1,12 +1,12 @@
 <div class="admin-controls">
   <nav>
     <ul class="nav nav-pills">
-      <li>{{#link-to "adminUser" user}}{{d-icon "caret-left"}} &nbsp;{{user.username}}{{/link-to}}</li>
+      <li><LinkTo @route="adminUser" @model={{user}}>{{d-icon "caret-left"}} &nbsp;{{user.username}}</LinkTo></li>
     </ul>
   </nav>
 </div>
 
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   <div class="admin-container user-badges">
     <h2>{{i18n "admin.badges.grant_badge"}}</h2>
     <br>
@@ -16,24 +16,15 @@
       <form class="form-horizontal">
         <div class="control-group">
           <label>{{i18n "admin.badges.badge"}}</label>
-          {{combo-box
-            value=selectedBadgeId
-            content=grantableBadges
-            onChange=(action (mut selectedBadgeId))
-            options=(hash
+          <ComboBox @value={{selectedBadgeId}} @content={{grantableBadges}} @onChange={{action (mut selectedBadgeId)}} @options={{hash
               filterable=true
-            )
-          }}
+            }} />
         </div>
         <div class="control-group">
           <label>{{i18n "admin.badges.reason"}}</label>
-          {{input type="text" value=badgeReason}}<br><small>{{i18n "admin.badges.reason_help"}}</small>
+          <Input @type="text" @value={{badgeReason}} /><br><small>{{i18n "admin.badges.reason_help"}}</small>
         </div>
-        {{d-button
-          class="btn-primary"
-          action=(action "grantBadge")
-          type="submit"
-          label="admin.badges.grant"}}
+        <DButton @class="btn-primary" @action={{action "grantBadge"}} @type="submit" @label="admin.badges.grant" />
       </form>
     {{/if}}
 
@@ -48,12 +39,12 @@
         </tr>
         {{#each groupedBadges as |userBadge|}}
           <tr>
-            <td>{{user-badge badge=userBadge.badge count=userBadge.count}}</td>
+            <td><UserBadge @badge={{userBadge.badge}} @count={{userBadge.count}} /></td>
             <td>
-              {{#link-to "adminUser" userBadge.badge.granted_by}}
+              <LinkTo @route="adminUser" @model={{userBadge.badge.granted_by}}>
                 {{avatar userBadge.granted_by imageSize="tiny"}}
                 {{userBadge.granted_by.username}}
-              {{/link-to}}
+              </LinkTo>
             </td>
             <td class="reason">
               {{#if userBadge.postUrl}}
@@ -63,14 +54,9 @@
             <td>{{age-with-tooltip userBadge.granted_at}}</td>
             <td>
               {{#if userBadge.grouped}}
-                {{d-button
-                  action=(action "expandGroup" userBadge)
-                  label="admin.badges.expand"}}
+                <DButton @action={{action "expandGroup" userBadge}} @label="admin.badges.expand" />
               {{else}}
-                {{d-button
-                  class="btn-danger"
-                  action=(action "revokeBadge" userBadge)
-                  label="admin.badges.revoke"}}
+                <DButton @class="btn-danger" @action={{action "revokeBadge" userBadge}} @label="admin.badges.revoke" />
               {{/if}}
             </td>
           </tr>
@@ -84,4 +70,4 @@
       </tbody>
     </table>
   </div>
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/admin/addon/templates/user-fields.hbs b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
index a14119e92bb..198aa74eee5 100644
--- a/app/assets/javascripts/admin/addon/templates/user-fields.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
@@ -15,10 +15,6 @@
     {{/each}}
   {{/if}}
 
-  {{d-button disabled=createDisabled
-             class="btn-primary"
-             action=(action "createField")
-             label="admin.user_fields.create"
-             icon="plus"}}
+  <DButton @disabled={{createDisabled}} @class="btn-primary" @action={{action "createField"}} @label="admin.user_fields.create" @icon="plus" />
 
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/user-index.hbs b/app/assets/javascripts/admin/addon/templates/user-index.hbs
index f445b3c581c..b2ba7993a11 100644
--- a/app/assets/javascripts/admin/addon/templates/user-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-index.hbs
@@ -1,53 +1,32 @@
 <section class="details {{unless model.active "not-activated"}}">
   <div class="user-controls">
     {{#if model.canViewProfile}}
-      {{#link-to "user" model class="btn btn-default"}}
+      <LinkTo @route="user" @model={{model}} class="btn btn-default">
         {{d-icon "user"}}
         {{i18n "admin.user.show_public_profile"}}
-      {{/link-to}}
+      </LinkTo>
     {{/if}}
 
     {{#if model.can_view_action_logs}}
-      {{d-button
-        action=(action "viewActionLogs")
-        class="btn-default"
-        actionParam=model.username
-        icon="far-list-alt"
-        label="admin.user.action_logs"}}
+      <DButton @action={{action "viewActionLogs"}} @class="btn-default" @actionParam={{model.username}} @icon="far-list-alt" @label="admin.user.action_logs" />
     {{/if}}
     {{#if model.active}}
       {{#if currentUser.admin}}
-        {{d-button
-          class="btn-default"
-          action=(action "logOut")
-          icon="power-off"
-          label="admin.user.log_out"}}
+        <DButton @class="btn-default" @action={{action "logOut"}} @icon="power-off" @label="admin.user.log_out" />
       {{/if}}
     {{/if}}
-    {{plugin-outlet
-      name="admin-user-controls-after"
-      args=(hash model=model)
-     }}
+    <PluginOutlet @name="admin-user-controls-after" @args={{hash model=model}} />
   </div>
 
   <div class="display-row username">
-    {{admin-editable-field name="user.username.title"
-                           value=model.username
-                           action=(action "saveUsername")
-                           editing=editingUsername}}
+    <AdminEditableField @name="user.username.title" @value={{model.username}} @action={{action "saveUsername"}} @editing={{editingUsername}} />
   </div>
 
   <div class="display-row name">
-    {{admin-editable-field name="user.name.title"
-                           value=model.name
-                           action=(action "saveName")
-                           editing=editingName}}
+    <AdminEditableField @name="user.name.title" @value={{model.name}} @action={{action "saveName"}} @editing={{editingName}} />
   </div>
 
-  {{plugin-outlet
-    name="admin-user-below-names"
-    args=(hash user=model)
-   }}
+  <PluginOutlet @name="admin-user-below-names" @args={{hash user=model}} />
 
   {{#if canCheckEmails}}
     <div class="display-row email">
@@ -59,12 +38,7 @@
         {{#if model.email}}
           <a href="mailto:{{model.email}}">{{model.email}}</a>
         {{else}}
-          {{d-button
-            class="btn-default"
-            action=(route-action "checkEmail")
-            actionParam=model icon="far-envelope"
-            label="admin.users.check_email.text"
-            title="admin.users.check_email.title"}}
+          <DButton @class="btn-default" @action={{route-action "checkEmail"}} @actionParam={{model}} @icon="far-envelope" @label="admin.users.check_email.text" @title="admin.users.check_email.title" />
         {{/if}}
       </div>
       <div class="controls">
@@ -91,12 +65,7 @@
             {{i18n "user.email.no_secondary"}}
           {{/if}}
         {{else}}
-          {{d-button action=(route-action "checkEmail")
-              class="btn-default"
-              actionParam=model
-              icon="far-envelope"
-              label="admin.users.check_email.text"
-              title="admin.users.check_email.title"}}
+          <DButton @action={{route-action "checkEmail"}} @class="btn-default" @actionParam={{model}} @icon="far-envelope" @label="admin.users.check_email.text" @title="admin.users.check_email.title" />
         {{/if}}
       </div>
 
@@ -118,11 +87,7 @@
       <div class="value">{{model.bounceScore}}</div>
       <div class="controls">
         {{#if model.canResetBounceScore}}
-          {{d-button
-            class="btn-default"
-            action=(action "resetBounceScore")
-            label="admin.user.reset_bounce_score.label"
-            title="admin.user.reset_bounce_score.title"}}
+          <DButton @class="btn-default" @action={{action "resetBounceScore"}} @label="admin.user.reset_bounce_score.label" @title="admin.user.reset_bounce_score.title" />
         {{/if}}
         {{model.bounceScoreExplanation}}
       </div>
@@ -134,12 +99,7 @@
         {{#if associatedAccountsLoaded}}
           {{associatedAccounts}}
         {{else}}
-          {{d-button
-            class="btn-default"
-            action=(route-action "checkEmail")
-            actionParam=model icon="far-envelope"
-            label="admin.users.check_email.text"
-            title="admin.users.check_email.title"}}
+          <DButton @class="btn-default" @action={{route-action "checkEmail"}} @actionParam={{model}} @icon="far-envelope" @label="admin.users.check_email.text" @title="admin.users.check_email.title" />
         {{/if}}
       </div>
     </div>
@@ -154,10 +114,7 @@
   </div>
 
   <div class="display-row">
-    {{admin-editable-field name="user.title.title"
-                           value=model.title
-                           action=(action "saveTitle")
-                           editing=editingTitle}}
+    <AdminEditableField @name="user.title.title" @value={{model.title}} @action={{action "saveTitle"}} @editing={{editingTitle}} />
   </div>
 
   <div class="display-row last-ip">
@@ -165,7 +122,7 @@
     <div class="value">{{model.ip_address}}</div>
     <div class="controls">
       {{#if currentUser.staff}}
-        {{ip-lookup ip=model.ip_address userId=model.id}}
+        <IpLookup @ip={{model.ip_address}} @userId={{model.id}} />
       {{/if}}
     </div>
   </div>
@@ -175,7 +132,7 @@
     <div class="value">{{model.registration_ip_address}}</div>
     <div class="controls">
       {{#if currentUser.staff}}
-        {{ip-lookup ip=model.registration_ip_address userId=model.id}}
+        <IpLookup @ip={{model.registration_ip_address}} @userId={{model.id}} />
       {{/if}}
     </div>
   </div>
@@ -187,10 +144,10 @@
         {{i18n "badges.badge_count" count=model.badge_count}}
       </div>
       <div class="controls">
-        {{#link-to "adminUser.badges" model class="btn btn-default"}}
+        <LinkTo @route="adminUser.badges" @model={{model}} class="btn btn-default">
           {{d-icon "certificate"}}
           {{i18n "admin.badges.edit_badges"}}
-        {{/link-to}}
+        </LinkTo>
       </div>
     </div>
   {{/if}}
@@ -206,11 +163,7 @@
     </div>
     <div class="controls">
       {{#if canDisableSecondFactor}}
-        {{d-button
-          class="btn-default"
-          action=(action "disableSecondFactor")
-          icon="unlock-alt"
-          label="user.second_factor.disable"}}
+        <DButton @class="btn-default" @action={{action "disableSecondFactor"}} @icon="unlock-alt" @label="user.second_factor.disable" />
       {{/if}}
     </div>
   </div>
@@ -233,7 +186,7 @@
   </section>
 {{/if}}
 
-{{plugin-outlet name="admin-user-details" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="admin-user-details" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
 <section class="details">
   <h1>{{i18n "admin.user.permissions"}}</h1>
@@ -244,12 +197,12 @@
       <div class="value">
         {{#if model.approved}}
           {{i18n "admin.user.approved_by"}}
-          {{#link-to "adminUser" model.approvedBy}}
+          <LinkTo @route="adminUser" @model={{model.approvedBy}}>
             {{avatar model.approvedBy imageSize="small"}}
-          {{/link-to}}
-          {{#link-to "adminUser" model.approvedBy}}
+          </LinkTo>
+          <LinkTo @route="adminUser" @model={{model.approvedBy}}>
             {{model.approvedBy.username}}
-          {{/link-to}}
+          </LinkTo>
         {{else}}
           {{i18n "no_value"}}
         {{/if}}
@@ -259,11 +212,7 @@
           {{i18n "admin.user.approve_success"}}
         {{else}}
           {{#if model.can_approve}}
-            {{d-button
-              class="btn-default"
-              action=(action "approve")
-              icon="check"
-              label="admin.user.approve"}}
+            <DButton @class="btn-default" @action={{action "approve"}} @icon="check" @label="admin.user.approve" />
           {{/if}}
         {{/if}}
       </div>
@@ -276,26 +225,15 @@
     <div class="controls">
       {{#if model.active}}
         {{#if model.can_deactivate}}
-          {{d-button
-            class="btn-default"
-            action=(action "deactivate")
-            label="admin.user.deactivate_account"}}
+          <DButton @class="btn-default" @action={{action "deactivate"}} @label="admin.user.deactivate_account" />
           {{i18n "admin.user.deactivate_explanation"}}
         {{/if}}
       {{else}}
         {{#if model.can_send_activation_email}}
-          {{d-button
-            class="btn-default"
-            action=(action "sendActivationEmail")
-            icon="envelope"
-            label="admin.user.send_activation_email"}}
+          <DButton @class="btn-default" @action={{action "sendActivationEmail"}} @icon="envelope" @label="admin.user.send_activation_email" />
         {{/if}}
         {{#if model.can_activate}}
-          {{d-button
-            class="btn-default"
-            action=(action "activate")
-            icon="check"
-            label="admin.user.activate"}}
+          <DButton @class="btn-default" @action={{action "activate"}} @icon="check" @label="admin.user.activate" />
         {{/if}}
       {{/if}}
     </div>
@@ -314,7 +252,7 @@
         {{model.api_key_count}}
       </div>
       <div class="controls">
-        {{d-button class="btn-default" href="/admin/api/keys" label="admin.api.manage_keys"}}
+        <DButton @class="btn-default" @href="/admin/api/keys" @label="admin.api.manage_keys" />
       </div>
     </div>
   {{/if}}
@@ -324,18 +262,10 @@
     <div class="value">{{i18n-yes-no model.admin}}</div>
     <div class="controls">
       {{#if model.can_revoke_admin}}
-        {{d-button
-          class="btn-default"
-          action=(action "revokeAdmin")
-          icon="shield-alt"
-          label="admin.user.revoke_admin"}}
+        <DButton @class="btn-default" @action={{action "revokeAdmin"}} @icon="shield-alt" @label="admin.user.revoke_admin" />
       {{/if}}
       {{#if model.can_grant_admin}}
-        {{d-button
-          class="btn-default grant-admin"
-          action=(action "grantAdmin")
-          icon="shield-alt"
-          label="admin.user.grant_admin"}}
+        <DButton @class="btn-default grant-admin" @action={{action "grantAdmin"}} @icon="shield-alt" @label="admin.user.grant_admin" />
       {{/if}}
     </div>
   </div>
@@ -345,18 +275,10 @@
     <div class="value">{{i18n-yes-no model.moderator}}</div>
     <div class="controls">
       {{#if model.can_revoke_moderation}}
-        {{d-button
-          class="btn-default"
-          action=(action "revokeModeration")
-          icon="shield-alt"
-          label="admin.user.revoke_moderation"}}
+        <DButton @class="btn-default" @action={{action "revokeModeration"}} @icon="shield-alt" @label="admin.user.revoke_moderation" />
       {{/if}}
       {{#if model.can_grant_moderation}}
-        {{d-button
-          class="btn-default"
-          action=(action "grantModeration")
-          icon="shield-alt"
-          label="admin.user.grant_moderation"}}
+        <DButton @class="btn-default" @action={{action "grantModeration"}} @icon="shield-alt" @label="admin.user.grant_moderation" />
       {{/if}}
     </div>
   </div>
@@ -364,17 +286,12 @@
   <div class="display-row">
     <div class="field">{{i18n "trust_level"}}</div>
     <div class="value">
-      {{combo-box
-        content=site.trustLevels
-        nameProperty="detailedName"
-        value=model.trustLevel.id
-        onChange=(action (mut model.trust_level))
-      }}
+      <ComboBox @content={{site.trustLevels}} @nameProperty="detailedName" @value={{model.trustLevel.id}} @onChange={{action (mut model.trust_level)}} />
 
       {{#if model.dirty}}
         <div>
-          {{d-button class="ok no-text" action=(action "saveTrustLevel") icon="check"}}
-          {{d-button class="cancel no-text" action=(action "restoreTrustLevel") icon="times"}}
+          <DButton @class="ok no-text" @action={{action "saveTrustLevel"}} @icon="check" />
+          <DButton @class="cancel no-text" @action={{action "restoreTrustLevel"}} @icon="times" />
         </div>
       {{/if}}
     </div>
@@ -382,24 +299,16 @@
       {{#if model.canLockTrustLevel}}
         {{#if hasLockedTrustLevel}}
           {{d-icon "lock" title="admin.user.trust_level_locked_tip"}}
-          {{d-button
-            class="btn-default"
-            action=(action "lockTrustLevel")
-            actionParam=false
-            label="admin.user.unlock_trust_level"}}
+          <DButton @class="btn-default" @action={{action "lockTrustLevel"}} @actionParam={{false}} @label="admin.user.unlock_trust_level" />
         {{else}}
           {{d-icon "unlock" title="admin.user.trust_level_unlocked_tip"}}
-          {{d-button
-            class="btn-default"
-            action=(action "lockTrustLevel")
-            actionParam=true
-            label="admin.user.lock_trust_level"}}
+          <DButton @class="btn-default" @action={{action "lockTrustLevel"}} @actionParam={{true}} @label="admin.user.lock_trust_level" />
         {{/if}}
       {{/if}}
       {{#if model.tl3Requirements}}
-        {{#link-to "adminUser.tl3Requirements" model class="btn btn-default"}}
+        <LinkTo @route="adminUser.tl3Requirements" @model={{model}} class="btn btn-default">
           {{i18n "admin.user.trust_level_3_requirements"}}
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     </div>
   </div>
@@ -416,19 +325,11 @@
     </div>
     <div class="controls">
       {{#if model.suspended}}
-        {{d-button
-          class="btn-danger unsuspend-user"
-          action=(action "unsuspend")
-          icon="ban"
-          label="admin.user.unsuspend"}}
+        <DButton @class="btn-danger unsuspend-user" @action={{action "unsuspend"}} @icon="ban" @label="admin.user.unsuspend" />
         {{i18n "admin.user.suspended_explanation"}}
       {{else}}
         {{#if model.canSuspend}}
-          {{d-button
-            class="btn-danger suspend-user"
-            action=(action "showSuspendModal")
-            icon="ban"
-            label="admin.user.suspend"}}
+          <DButton @class="btn-danger suspend-user" @action={{action "showSuspendModal"}} @icon="ban" @label="admin.user.suspend" />
           {{i18n "admin.user.suspended_explanation"}}
         {{/if}}
       {{/if}}
@@ -439,12 +340,12 @@
     <div class="display-row highlight-danger suspension-info">
       <div class="field">{{i18n "admin.user.suspended_by"}}</div>
       <div class="value">
-        {{#link-to "adminUser" model.suspendedBy}}
+        <LinkTo @route="adminUser" @model={{model.suspendedBy}}>
           {{avatar model.suspendedBy imageSize="tiny"}}
-        {{/link-to}}
-        {{#link-to "adminUser" model.suspendedBy}}
+        </LinkTo>
+        <LinkTo @route="adminUser" @model={{model.suspendedBy}}>
           {{model.suspendedBy.username}}
-        {{/link-to}}
+        </LinkTo>
       </div>
       <div class="controls">
         <b>{{i18n "admin.user.suspend_reason"}}</b>:
@@ -464,23 +365,15 @@
       {{/if}}
     </div>
     <div class="controls">
-      {{#conditional-loading-spinner size="small" condition=model.silencingUser}}
+      <ConditionalLoadingSpinner @size="small" @condition={{model.silencingUser}}>
         {{#if model.silenced}}
-          {{d-button
-            class="btn-danger unsilence-user"
-            action=(action "unsilence")
-            icon="microphone-slash"
-            label="admin.user.unsilence"}}
+          <DButton @class="btn-danger unsilence-user" @action={{action "unsilence"}} @icon="microphone-slash" @label="admin.user.unsilence" />
           {{i18n "admin.user.silence_explanation"}}
         {{else}}
-          {{d-button
-            class="btn-danger silence-user"
-            action=(action "showSilenceModal")
-            icon="microphone-slash"
-            label="admin.user.silence"}}
+          <DButton @class="btn-danger silence-user" @action={{action "showSilenceModal"}} @icon="microphone-slash" @label="admin.user.silence" />
           {{i18n "admin.user.silence_explanation"}}
         {{/if}}
-      {{/conditional-loading-spinner}}
+      </ConditionalLoadingSpinner>
     </div>
   </div>
 
@@ -488,12 +381,12 @@
     <div class="display-row highlight-danger silence-info">
       <div class="field">{{i18n "admin.user.silenced_by"}}</div>
       <div class="value">
-        {{#link-to "adminUser" model.silencedBy}}
+        <LinkTo @route="adminUser" @model={{model.silencedBy}}>
           {{avatar model.silencedBy imageSize="tiny"}}
-        {{/link-to}}
-        {{#link-to "adminUser" model.silencedBy}}
+        </LinkTo>
+        <LinkTo @route="adminUser" @model={{model.silencedBy}}>
           {{model.silencedBy.username}}
-        {{/link-to}}
+        </LinkTo>
       </div>
       <div class="controls">
         <b>{{i18n "admin.user.silence_reason"}}</b>:
@@ -508,10 +401,7 @@
       <div class="value">{{model.tl3_requirements.penalty_counts.total}}</div>
       {{#if currentUser.admin}}
         <div class="controls">
-          {{d-button label="admin.user.clear_penalty_history.title"
-                     class="btn-default"
-                     icon="times"
-                     action=(action "clearPenaltyHistory")}}
+          <DButton @label="admin.user.clear_penalty_history.title" @class="btn-default" @icon="times" @action={{action "clearPenaltyHistory"}} />
           {{i18n "admin.user.clear_penalty_history.description"}}
         </div>
       {{/if}}
@@ -530,17 +420,12 @@
     <div class="display-row">
       <div class="field">{{i18n "admin.groups.custom"}}</div>
       <div class="value">
-        {{group-chooser
-          content=availableGroups
-          value=customGroupIdsBuffer
-          labelProperty="name"
-          onChange=(action (mut customGroupIdsBuffer))
-        }}
+        <GroupChooser @content={{availableGroups}} @value={{customGroupIdsBuffer}} @labelProperty="name" @onChange={{action (mut customGroupIdsBuffer)}} />
       </div>
       {{#if customGroupsDirty}}
         <div class="controls">
-          {{d-button icon="check" class="ok" action=(action "saveCustomGroups")}}
-          {{d-button icon="times" class="cancel" action=(action "resetCustomGroups")}}
+          <DButton @icon="check" @class="ok" @action={{action "saveCustomGroups"}} />
+          <DButton @icon="times" @class="cancel" @action={{action "resetCustomGroups"}} />
         </div>
       {{/if}}
     </div>
@@ -548,19 +433,14 @@
       <div class="display-row">
         <div class="field">{{i18n "admin.groups.primary"}}</div>
         <div class="value">
-          {{combo-box
-            content=model.customGroups
-            value=model.primary_group_id
-            onChange=(action (mut model.primary_group_id))
-            options=(hash
+          <ComboBox @content={{model.customGroups}} @value={{model.primary_group_id}} @onChange={{action (mut model.primary_group_id)}} @options={{hash
               none="admin.groups.no_primary"
-            )
-          }}
+            }} />
         </div>
         {{#if primaryGroupDirty}}
           <div class="controls">
-            {{d-button icon="check" class="ok" action=(action "savePrimaryGroup")}}
-            {{d-button icon="times" class="cancel" action=(action "resetPrimaryGroup")}}
+            <DButton @icon="check" @class="ok" @action={{action "savePrimaryGroup"}} />
+            <DButton @icon="times" @class="cancel" @action={{action "resetPrimaryGroup"}} />
           </div>
         {{/if}}
       </div>
@@ -597,11 +477,7 @@
     <div class="controls">
       {{#if model.can_delete_all_posts}}
         {{#if model.post_count}}
-          {{d-button
-            class="btn-danger"
-            action=(action "showDeletePostsConfirmation")
-            icon="far-trash-alt"
-            label="admin.user.delete_posts.button"}}
+          <DButton @class="btn-danger" @action={{action "showDeletePostsConfirmation"}} @icon="far-trash-alt" @label="admin.user.delete_posts.button" />
         {{/if}}
       {{else}}
         {{deleteAllPostsExplanation}}
@@ -623,9 +499,9 @@
     </div>
     <div class="controls">
       {{#if model.flags_received_count}}
-        {{#link-to "review" (query-params username=model.username type="ReviewableFlaggedPost" status="all") class="btn"}}
+        <LinkTo @route="review" @query={{hash username=model.username type="ReviewableFlaggedPost" status="all"}} class="btn">
           {{i18n "admin.user.show_flags_received"}}
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     </div>
   </div>
@@ -648,10 +524,10 @@
     </div>
     <div class="controls">
       {{#if (gt model.post_edits_count 0) }}
-        {{#link-to "adminReports.show" "post_edits" (query-params filters=postEditsByEditorFilter) class="btn btn-icon"}}
+        <LinkTo @route="adminReports.show" @model="post_edits" @query={{hash filters=postEditsByEditorFilter}} class="btn btn-icon">
           {{d-icon "far-eye"}}
           {{i18n "admin.user.view_edits"}}
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     </div>
   </div>
@@ -667,12 +543,7 @@
         <div class="value">{{sso.external_id}}</div>
         {{#if model.can_delete_sso_record}}
           <div class="controls">
-            {{d-button
-              class="btn-danger"
-              action=(action "deleteSSORecord")
-              icon="far-trash-alt"
-              label="admin.user.discourse_connect.delete_sso_record"
-            }}
+            <DButton @class="btn-danger" @action={{action "deleteSSORecord"}} @icon="far-trash-alt" @label="admin.user.discourse_connect.delete_sso_record" />
           </div>
         {{/if}}
       </div>
@@ -690,12 +561,7 @@
           {{#if ssoExternalEmail}}
             <div class="value">{{ssoExternalEmail}}</div>
           {{else}}
-            {{d-button
-              class="btn-default"
-              action=(action "checkSsoEmail")
-              actionParam=model icon="far-envelope"
-              label="admin.users.check_email.text"
-              title="admin.users.check_email.title"}}
+            <DButton @class="btn-default" @action={{action "checkSsoEmail"}} @actionParam={{model}} @icon="far-envelope" @label="admin.users.check_email.text" @title="admin.users.check_email.title" />
           {{/if}}
         </div>
       {{/if}}
@@ -713,12 +579,7 @@
               {{/each}}
             </div>
           {{else}}
-            {{d-button
-              class="btn-default"
-              action=(action "checkSsoPayload")
-              actionParam=model icon="far-list-alt"
-              label="admin.users.check_sso.text"
-              title="admin.users.check_sso.title"}}
+            <DButton @class="btn-default" @action={{action "checkSsoPayload"}} @actionParam={{model}} @icon="far-list-alt" @label="admin.users.check_sso.text" @title="admin.users.check_sso.title" />
           {{/if}}
         </div>
       {{/if}}
@@ -726,41 +587,27 @@
   </section>
 {{/if}}
 
-{{plugin-outlet name="after-user-details" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="after-user-details" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
 <section>
   <hr>
   <div class="pull-right">
     {{#if model.active}}
       {{#if model.can_impersonate}}
-        {{d-button
-          class="btn-danger btn-impersonate"
-          action=(action "impersonate")
-          icon="crosshairs"
-          label="admin.impersonate.title"
-          title="admin.impersonate.help"}}
+        <DButton @class="btn-danger btn-impersonate" @action={{action "impersonate"}} @icon="crosshairs" @label="admin.impersonate.title" @title="admin.impersonate.help" />
       {{/if}}
     {{/if}}
 
     {{#if model.can_be_anonymized}}
-      {{d-button label="admin.user.anonymize"
-                 icon="exclamation-triangle"
-                 class="btn-danger btn-anonymize"
-                 action=(action "anonymize")}}
+      <DButton @label="admin.user.anonymize" @icon="exclamation-triangle" @class="btn-danger btn-anonymize" @action={{action "anonymize"}} />
     {{/if}}
 
     {{#if model.canBeDeleted}}
-      {{d-button label="admin.user.delete"
-                 icon="trash-alt"
-                 class="btn-danger btn-user-delete"
-                 action=(action "destroy")}}
+      <DButton @label="admin.user.delete" @icon="trash-alt" @class="btn-danger btn-user-delete" @action={{action "destroy"}} />
     {{/if}}
 
     {{#if model.can_be_merged}}
-      {{d-button label="admin.user.merge.button"
-                 icon="arrows-alt-h"
-                 class="btn-danger btn-user-merge"
-                 action=(action "promptTargetUser")}}
+      <DButton @label="admin.user.merge.button" @icon="arrows-alt-h" @class="btn-danger btn-user-merge" @action={{action "promptTargetUser"}} />
     {{/if}}
   </div>
 
diff --git a/app/assets/javascripts/admin/addon/templates/user-tl3-requirements.hbs b/app/assets/javascripts/admin/addon/templates/user-tl3-requirements.hbs
index 74738f2080c..f32d4a7185b 100644
--- a/app/assets/javascripts/admin/addon/templates/user-tl3-requirements.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-tl3-requirements.hbs
@@ -1,8 +1,8 @@
 <div class="admin-controls">
   <nav>
     <ul class="nav nav-pills">
-      <li>{{#link-to "adminUser" model}}{{d-icon "caret-left"}} &nbsp;{{model.username}}{{/link-to}}</li>
-      <li>{{#link-to "adminUsersList.show" "member"}}{{i18n "admin.user.trust_level_2_users"}}{{/link-to}}</li>
+      <li><LinkTo @route="adminUser" @model={{model}}>{{d-icon "caret-left"}} &nbsp;{{model.username}}</LinkTo></li>
+      <li><LinkTo @route="adminUsersList.show" @model="member">{{i18n "admin.user.trust_level_2_users"}}</LinkTo></li>
     </ul>
   </nav>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/user.hbs b/app/assets/javascripts/admin/addon/templates/user.hbs
index 3b1c7742714..dffc22a179a 100644
--- a/app/assets/javascripts/admin/addon/templates/user.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user.hbs
@@ -1,3 +1,3 @@
-{{#d-section}}
+<DSection>
   {{outlet}}
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
index a8742527135..056511986af 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
@@ -2,35 +2,29 @@
   <h2>{{title}}</h2>
   {{#if canCheckEmails}}
     {{#if showEmails}}
-      {{d-button
-        action=(action "toggleEmailVisibility")
-        class="hide-emails btn-default"
-        label="admin.users.hide_emails"}}
+      <DButton @action={{action "toggleEmailVisibility"}} @class="hide-emails btn-default" @label="admin.users.hide_emails" />
     {{else}}
-      {{d-button
-        action=(action "toggleEmailVisibility")
-        class="show-emails btn-default"
-        label="admin.users.show_emails"}}
+      <DButton @action={{action "toggleEmailVisibility"}} @class="show-emails btn-default" @label="admin.users.show_emails" />
     {{/if}}
   {{/if}}
 </div>
 
 <div class="username controls">
-  {{text-field value=listFilter placeholder=searchHint title=searchHint}}
+  <TextField @value={{listFilter}} @placeholder={{searchHint}} @title={{searchHint}} />
 </div>
 
-{{#load-more class="users-list-container" selector=".users-list tr" action=(action "loadMore")}}
+<LoadMore @class="users-list-container" @selector=".users-list tr" @action={{action "loadMore"}}>
   {{#if model}}
     <table class="table users-list grid">
       <thead>
-        {{table-header-toggle field="username" labelKey="username" order=order asc=asc automatic=true}}
-        {{table-header-toggle  class=(if showEmails "" "hidden") field="email" labelKey="email" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="last_emailed" labelKey="admin.users.last_emailed" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="seen" labelKey="last_seen" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="topics_viewed" labelKey="admin.user.topics_entered" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="posts_read" labelKey="admin.user.posts_read_count" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="read_time" labelKey="admin.user.time_read" order=order asc=asc automatic=true}}
-        {{table-header-toggle field="created" labelKey="created" order=order asc=asc automatic=true}}
+        <TableHeaderToggle @field="username" @labelKey="username" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @class={{if showEmails "" "hidden"}} @field="email" @labelKey="email" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="last_emailed" @labelKey="admin.users.last_emailed" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="seen" @labelKey="last_seen" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="topics_viewed" @labelKey="admin.user.topics_entered" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="posts_read" @labelKey="admin.user.posts_read_count" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="read_time" @labelKey="admin.user.time_read" @order={{order}} @asc={{asc}} @automatic={{true}} />
+        <TableHeaderToggle @field="created" @labelKey="created" @order={{order}} @asc={{asc}} @automatic={{true}} />
         {{#if siteSettings.must_approve_users}}
           <th>{{i18n "admin.users.approved"}}</th>
         {{/if}}
@@ -43,7 +37,7 @@
               <a href={{user.path}} data-user-card={{user.username}}>
                 {{avatar user imageSize="small"}}
               </a>
-              {{#link-to "adminUser" user}}{{user.username}}{{/link-to}}
+              <LinkTo @route="adminUser" @model={{user}}>{{user.username}}</LinkTo>
               {{#if user.staged}}
                 {{d-icon "far-envelope" title="user.staged" }}
               {{/if}}
@@ -100,14 +94,14 @@
               {{#if user.second_factor_enabled}}
                 {{d-icon "lock" title="admin.user.second_factor_enabled" }}
               {{/if}}
-              {{plugin-outlet name="admin-users-list-icon" connectorTagName="div" args=(hash user=user query=query)}}
+              <PluginOutlet @name="admin-users-list-icon" @connectorTagName="div" @args={{hash user=user query=query}} />
             </td>
           </tr>
         {{/each}}
       </tbody>
     </table>
-    {{conditional-loading-spinner condition=refreshing}}
+    <ConditionalLoadingSpinner @condition={{refreshing}} />
   {{else}}
     <p>{{i18n "search.no_results"}}</p>
   {{/if}}
-{{/load-more}}
+</LoadMore>
diff --git a/app/assets/javascripts/admin/addon/templates/users-list.hbs b/app/assets/javascripts/admin/addon/templates/users-list.hbs
index 88f860734aa..7e0c27eeda9 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list.hbs
@@ -1,22 +1,22 @@
 <div class="admin-controls">
   <nav>
     <ul class="nav nav-pills">
-      {{nav-item route="adminUsersList.show" routeParam="active" label="admin.users.nav.active" class="active-users"}}
-      {{nav-item route="adminUsersList.show" routeParam="new" label="admin.users.nav.new" class="new-users"}}
-      {{nav-item route="adminUsersList.show" routeParam="staff" label="admin.users.nav.staff" class="staff-users"}}
-      {{nav-item route="adminUsersList.show" routeParam="suspended" label="admin.users.nav.suspended" class="suspended-users"}}
-      {{nav-item route="adminUsersList.show" routeParam="silenced" label="admin.users.nav.silenced" class="silenced-users"}}
-      {{nav-item route="adminUsersList.show" routeParam="staged" label="admin.users.nav.staged" class="staged-users"}}
-      {{nav-item route="groups" label="groups.index.title" class="groups"}}
-      {{plugin-outlet name="admin-users-list-nav-after"}}
+      <NavItem @route="adminUsersList.show" @routeParam="active" @label="admin.users.nav.active" @class="active-users" />
+      <NavItem @route="adminUsersList.show" @routeParam="new" @label="admin.users.nav.new" @class="new-users" />
+      <NavItem @route="adminUsersList.show" @routeParam="staff" @label="admin.users.nav.staff" @class="staff-users" />
+      <NavItem @route="adminUsersList.show" @routeParam="suspended" @label="admin.users.nav.suspended" @class="suspended-users" />
+      <NavItem @route="adminUsersList.show" @routeParam="silenced" @label="admin.users.nav.silenced" @class="silenced-users" />
+      <NavItem @route="adminUsersList.show" @routeParam="staged" @label="admin.users.nav.staged" @class="staged-users" />
+      <NavItem @route="groups" @label="groups.index.title" @class="groups" />
+      <PluginOutlet @name="admin-users-list-nav-after" />
 
       <li class="admin-actions">
         {{#if currentUser.can_invite_to_forum}}
-          {{d-button class="btn-default" action=(route-action "sendInvites") title="admin.invite.button_title" icon="user-plus" label="admin.invite.button_text"}}
+          <DButton @class="btn-default" @action={{route-action "sendInvites"}} @title="admin.invite.button_title" @icon="user-plus" @label="admin.invite.button_text" />
         {{/if}}
 
         {{#if currentUser.admin}}
-          {{d-button class="btn-default" action=(route-action "exportUsers") title="admin.export_csv.button_title.user" icon="download" label="admin.export_csv.button_text"}}
+          <DButton @class="btn-default" @action={{route-action "exportUsers"}} @title="admin.export_csv.button_title.user" @icon="download" @label="admin.export_csv.button_text" />
         {{/if}}
       </li>
     </ul>
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs b/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
index f074dc3ede9..28dc9e6cb2f 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
@@ -3,29 +3,13 @@
 {{/if}}
 
 <div class="watched-word-controls">
-  {{d-button
-    class="btn-default download-link"
-    href=downloadLink
-    icon="download"
-    label="admin.watched_words.download"}}
+  <DButton @class="btn-default download-link" @href={{downloadLink}} @icon="download" @label="admin.watched_words.download" />
 
-  {{watched-word-uploader
-    id="watched-word-uploader"
-    uploading=uploading
-    actionKey=actionNameKey
-    done=(action "uploadComplete")}}
+  <WatchedWordUploader @id="watched-word-uploader" @uploading={{uploading}} @actionKey={{actionNameKey}} @done={{action "uploadComplete"}} />
 
-  {{d-button
-    class="watched-word-test"
-    label="admin.watched_words.test.button_label"
-    icon="far-eye"
-    action=(action "test")}}
+  <DButton @class="watched-word-test" @label="admin.watched_words.test.button_label" @icon="far-eye" @action={{action "test"}} />
 
-  {{d-button
-    class="btn-danger clear-all"
-    label="admin.watched_words.clear_all"
-    icon="trash-alt"
-    action=(action "clearAll")}}
+  <DButton @class="btn-danger clear-all" @label="admin.watched_words.clear_all" @icon="trash-alt" @action={{action "clearAll"}} />
 </div>
 
 <p class="about">{{actionDescription}}</p>
@@ -34,15 +18,11 @@
   <p>{{html-safe (i18n "admin.watched_words.regex_warning" basePath=(base-path))}}</p>
 {{/if}}
 
-{{watched-word-form
-  actionKey=actionNameKey
-  action=(action "recordAdded")
-  filteredContent=currentAction.words
-}}
+<WatchedWordForm @actionKey={{actionNameKey}} @action={{action "recordAdded"}} @filteredContent={{currentAction.words}} />
 
 {{#if currentAction.words}}
   <label class="show-words-checkbox">
-    {{input type="checkbox" checked=adminWatchedWords.showWords disabled=adminWatchedWords.disableShowWords}}
+    <Input @type="checkbox" @checked={{adminWatchedWords.showWords}} @disabled={{adminWatchedWords.disableShowWords}} />
     {{i18n "admin.watched_words.show_words" count=currentAction.words.length}}
   </label>
 {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words.hbs b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
index 53a08964199..803b0e82dc9 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
@@ -2,9 +2,9 @@
   <div class="admin-controls">
     <div class="controls">
       <div class="inline-form">
-        {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
-        {{text-field value=filter placeholderKey="admin.watched_words.search" class="no-blur"}}
-        {{d-button action=(action "clearFilter") label="admin.watched_words.clear_filter"}}
+        <DButton @action={{action "toggleMenu"}} @class="menu-toggle" @icon="bars" />
+        <TextField @value={{filter}} @placeholderKey="admin.watched_words.search" @class="no-blur" />
+        <DButton @action={{action "clearFilter"}} @label="admin.watched_words.clear_filter" />
       </div>
     </div>
   </div>
@@ -13,10 +13,10 @@
     <ul class="nav nav-stacked">
       {{#each model as |action|}}
         <li class={{action.nameKey}}>
-          {{#link-to "adminWatchedWords.action" action.nameKey}}
+          <LinkTo @route="adminWatchedWords.action" @model={{action.nameKey}}>
             {{action.name}}
             {{#if action.words}}<span class="count">({{action.words.length}})</span>{{/if}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/each}}
     </ul>
diff --git a/app/assets/javascripts/admin/addon/templates/web-hooks-show-events.hbs b/app/assets/javascripts/admin/addon/templates/web-hooks-show-events.hbs
index 14557341d8f..eac48aad00d 100644
--- a/app/assets/javascripts/admin/addon/templates/web-hooks-show-events.hbs
+++ b/app/assets/javascripts/admin/addon/templates/web-hooks-show-events.hbs
@@ -1,16 +1,16 @@
 <div class="web-hook-direction">
-  {{#link-to "adminWebHooks" tagName="button" classNames="btn"}}
+  <LinkTo @route="adminWebHooks" @tagName="button" @classNames="btn">
     {{d-icon "list"}} {{i18n "admin.web_hooks.events.go_list"}}
-  {{/link-to}}
-  {{d-button icon="paper-plane" label="admin.web_hooks.events.ping" action=(action "ping") disabled=pingDisabled}}
-  {{#link-to "adminWebHooks.show" model.extras.web_hook_id tagName="button" classNames="btn"}}
+  </LinkTo>
+  <DButton @icon="paper-plane" @label="admin.web_hooks.events.ping" @action={{action "ping"}} @disabled={{pingDisabled}} />
+  <LinkTo @route="adminWebHooks.show" @model={{model.extras.web_hook_id}} @tagName="button" @classNames="btn">
     {{d-icon "far-edit"}} {{i18n "admin.web_hooks.events.go_details"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
 
 <div class="web-hook-events-listing">
   {{#if model}}
-    {{#load-more selector=".web-hook-events li" action=(action "loadMore")}}
+    <LoadMore @selector=".web-hook-events li" @action={{action "loadMore"}}>
       <div class="web-hook-events content-list">
         <div class="heading-container">
           <div class="col heading first status">{{i18n "admin.web_hooks.events.status"}}</div>
@@ -22,17 +22,17 @@
         </div>
         {{#if hasIncoming}}
           <a href tabindex="0" {{action "showInserted"}} class="alert alert-info clickable">
-            {{count-i18n key="admin.web_hooks.events.incoming" count=incomingCount}}
+            <CountI18n @key="admin.web_hooks.events.incoming" @count={{incomingCount}} />
           </a>
         {{/if}}
         <ul>
           {{#each model as |webHookEvent|}}
-            {{admin-web-hook-event model=webHookEvent}}
+            <AdminWebHookEvent @model={{webHookEvent}} />
           {{/each}}
         </ul>
       </div>
-      {{conditional-loading-spinner condition=model.loadingMore}}
-    {{/load-more}}
+      <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
+    </LoadMore>
   {{else}}
     <p>{{i18n "admin.web_hooks.events.none"}}</p>
   {{/if}}
diff --git a/app/assets/javascripts/admin/addon/templates/web-hooks-show.hbs b/app/assets/javascripts/admin/addon/templates/web-hooks-show.hbs
index 9cb7be2b723..5a17f25e3cf 100644
--- a/app/assets/javascripts/admin/addon/templates/web-hooks-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/web-hooks-show.hbs
@@ -1,49 +1,44 @@
-{{#link-to "adminWebHooks" class="go-back"}}
+<LinkTo @route="adminWebHooks" class="go-back">
   {{d-icon "arrow-left"}}
   {{i18n "admin.web_hooks.go_back"}}
-{{/link-to}}
+</LinkTo>
 
 <div class="web-hook-container">
   <p>{{i18n "admin.web_hooks.detailed_instruction"}}</p>
   <form class="web-hook form-horizontal">
     <div class="control-group">
       <label for="payload-url">{{i18n "admin.web_hooks.payload_url"}}</label>
-      {{text-field name="payload-url" value=model.payload_url placeholderKey="admin.web_hooks.payload_url_placeholder"}}
-      {{input-tip validation=urlValidation}}
+      <TextField @name="payload-url" @value={{model.payload_url}} @placeholderKey="admin.web_hooks.payload_url_placeholder" />
+      <InputTip @validation={{urlValidation}} />
     </div>
 
     <div class="control-group">
       <label for="content-type">{{i18n "admin.web_hooks.content_type"}}</label>
-      {{combo-box
-        content=contentTypes
-        name="content-type"
-        value=model.content_type
-        onChange=(action (mut model.content_type))
-      }}
+      <ComboBox @content={{contentTypes}} @name="content-type" @value={{model.content_type}} @onChange={{action (mut model.content_type)}} />
     </div>
 
     <div class="control-group">
       <label for="secret">{{i18n "admin.web_hooks.secret"}}</label>
-      {{text-field name="secret" value=model.secret placeholderKey="admin.web_hooks.secret_placeholder"}}
-      {{input-tip validation=secretValidation}}
+      <TextField @name="secret" @value={{model.secret}} @placeholderKey="admin.web_hooks.secret_placeholder" />
+      <InputTip @validation={{secretValidation}} />
     </div>
 
     <div class="control-group">
       <label>{{i18n "admin.web_hooks.event_chooser"}}</label>
       <div>
-        {{radio-button class="subscription-choice" name="subscription-choice" value="individual" selection=model.webHookType}}
+        <RadioButton @class="subscription-choice" @name="subscription-choice" @value="individual" @selection={{model.webHookType}} />
         {{i18n "admin.web_hooks.individual_event"}}
-        {{input-tip validation=eventTypeValidation}}
+        <InputTip @validation={{eventTypeValidation}} />
       </div>
       {{#unless model.wildcard_web_hook}}
         <div class="event-selector">
           {{#each eventTypes as |type|}}
-            {{admin-web-hook-event-chooser type=type model=model.web_hook_event_types}}
+            <AdminWebHookEventChooser @type={{type}} @model={{model.web_hook_event_types}} />
           {{/each}}
         </div>
       {{/unless}}
       <div>
-        {{radio-button class="subscription-choice" name="subscription-choice" value="wildcard" selection=model.webHookType}}
+        <RadioButton @class="subscription-choice" @name="subscription-choice" @value="wildcard" @selection={{model.webHookType}} />
         {{i18n "admin.web_hooks.wildcard_event"}}
       </div>
     </div>
@@ -51,34 +46,31 @@
     <div class="filters control-group">
       <div class="filter">
         <label>{{d-icon "circle" class="tracking"}}{{i18n "admin.web_hooks.categories_filter"}}</label>
-        {{category-selector
-          categories=model.categories
-          onChange=(action (mut model.categories))
-        }}
+        <CategorySelector @categories={{model.categories}} @onChange={{action (mut model.categories)}} />
         <div class="instructions">{{i18n "admin.web_hooks.categories_filter_instructions"}}</div>
       </div>
       {{#if showTagsFilter}}
         <div class="filter">
           <label>{{d-icon "circle" class="tracking"}}{{i18n "admin.web_hooks.tags_filter"}}</label>
-          {{tag-chooser tags=model.tag_names everyTag=true excludeSynonyms=true}}
+          <TagChooser @tags={{model.tag_names}} @everyTag={{true}} @excludeSynonyms={{true}} />
           <div class="instructions">{{i18n "admin.web_hooks.tags_filter_instructions"}}</div>
         </div>
       {{/if}}
       <div class="filter">
         <label>{{d-icon "circle" class="tracking"}}{{i18n "admin.web_hooks.groups_filter"}}</label>
-        {{group-selector groupNames=model.groupsFilterInName groupFinder=model.groupFinder}}
+        <GroupSelector @groupNames={{model.groupsFilterInName}} @groupFinder={{model.groupFinder}} />
         <div class="instructions">{{i18n "admin.web_hooks.groups_filter_instructions"}}</div>
       </div>
     </div>
 
-    {{plugin-outlet name="web-hook-fields" tagName="span" connectorTagName="div" args=(hash model=model)}}
+    <PluginOutlet @name="web-hook-fields" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
     <div>
-      {{input type="checkbox" name="verify_certificate" checked=model.verify_certificate}} {{i18n "admin.web_hooks.verify_certificate"}}
+      <Input @type="checkbox" @name="verify_certificate" @checked={{model.verify_certificate}} /> {{i18n "admin.web_hooks.verify_certificate"}}
     </div>
     <div>
       <div>
-        {{input type="checkbox" name="active" checked=model.active}} {{i18n "admin.web_hooks.active"}}
+        <Input @type="checkbox" @name="active" @checked={{model.active}} /> {{i18n "admin.web_hooks.active"}}
       </div>
       {{#if model.active}}
         <div class="instructions">{{i18n "admin.web_hooks.active_notice"}}</div>
@@ -87,13 +79,13 @@
   </form>
 
   <div class="controls">
-    {{d-button class="btn-default" translatedLabel=saveButtonText action=(action "save") disabled=saveButtonDisabled}}
+    <DButton @class="btn-default" @translatedLabel={{saveButtonText}} @action={{action "save"}} @disabled={{saveButtonDisabled}} />
 
     {{#unless model.isNew}}
-      {{d-button class="btn-danger" label="admin.web_hooks.destroy" action=(action "destroy")}}
-      {{#link-to "adminWebHooks.showEvents" model.id class="btn"}}
+      <DButton @class="btn-danger" @label="admin.web_hooks.destroy" @action={{action "destroy"}} />
+      <LinkTo @route="adminWebHooks.showEvents" @model={{model.id}} class="btn">
         {{i18n "admin.web_hooks.events.go_events"}}
-      {{/link-to}}
+      </LinkTo>
     {{/unless}}
     <span class="saving">{{savingStatus}}</span>
   </div>
diff --git a/app/assets/javascripts/admin/addon/templates/web-hooks.hbs b/app/assets/javascripts/admin/addon/templates/web-hooks.hbs
index abc2b6e90e8..328cf6c0073 100644
--- a/app/assets/javascripts/admin/addon/templates/web-hooks.hbs
+++ b/app/assets/javascripts/admin/addon/templates/web-hooks.hbs
@@ -1,12 +1,12 @@
 <div class="web-hooks-listing">
   <p>{{i18n "admin.web_hooks.instruction"}}</p>
   <div class="new-webhook">
-    {{#link-to "adminWebHooks.show" "new" tagName="button" classNames="btn btn-default"}}
+    <LinkTo @route="adminWebHooks.show" @model="new" @tagName="button" @classNames="btn btn-default">
       {{d-icon "plus"}} {{i18n "admin.web_hooks.new"}}
-    {{/link-to}}
+    </LinkTo>
   </div>
   {{#if model}}
-    {{#load-more selector=".web-hooks tr" action=(action "loadMore")}}
+    <LoadMore @selector=".web-hooks tr" @action={{action "loadMore"}}>
       <table class="web-hooks grid">
         <thead>
           <tr>
@@ -19,19 +19,19 @@
         <tbody>
           {{#each model as |webHook|}}
             <tr>
-              <td class="delivery-status">{{#link-to "adminWebHooks.showEvents" webHook.id}}{{admin-web-hook-status deliveryStatuses=deliveryStatuses model=webHook}}{{/link-to}}</td>
-              <td class="payload-url">{{#link-to "adminWebHooks.show" webHook}}{{webHook.payload_url}}{{/link-to}}</td>
+              <td class="delivery-status"><LinkTo @route="adminWebHooks.showEvents" @model={{webHook.id}}><AdminWebHookStatus @deliveryStatuses={{deliveryStatuses}} @model={{webHook}} /></LinkTo></td>
+              <td class="payload-url"><LinkTo @route="adminWebHooks.show" @model={{webHook}}>{{webHook.payload_url}}</LinkTo></td>
               <td class="description">{{webHook.description}}</td>
               <td class="controls">
-                {{#link-to "adminWebHooks.show" webHook tagName="button" classNames="btn btn-default no-text"}}{{d-icon "far-edit"}}{{/link-to}}
-                {{d-button class="destroy btn-danger" action=(action "destroy") actionParam=webHook icon="times"}}
+                <LinkTo @route="adminWebHooks.show" @model={{webHook}} @tagName="button" @classNames="btn btn-default no-text">{{d-icon "far-edit"}}</LinkTo>
+                <DButton @class="destroy btn-danger" @action={{action "destroy"}} @actionParam={{webHook}} @icon="times" />
               </td>
             </tr>
           {{/each}}
         </tbody>
       </table>
-      {{conditional-loading-spinner condition=model.loadingMore}}
-    {{/load-more}}
+      <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
+    </LoadMore>
   {{else}}
     <p>{{i18n "admin.web_hooks.none"}}</p>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/about.hbs b/app/assets/javascripts/discourse/app/templates/about.hbs
index 6dd8fc0db26..fb70e1b5147 100644
--- a/app/assets/javascripts/discourse/app/templates/about.hbs
+++ b/app/assets/javascripts/discourse/app/templates/about.hbs
@@ -1,17 +1,17 @@
-{{#d-section pageClass="about"}}
+<DSection @pageClass="about">
   <div class="container">
     <div class="contents clearfix body-page">
 
       <ul class="nav-pills">
-        <li class="nav-item-about">{{#link-to "about" class="active"}}{{i18n "about.simple_title"}}{{/link-to}}</li>
+        <li class="nav-item-about"><LinkTo @route="about" class="active">{{i18n "about.simple_title"}}</LinkTo></li>
         {{#if faqOverriden}}
-          <li class="nav-item-guidelines">{{#link-to "guidelines"}}{{i18n "guidelines"}}{{/link-to}}</li>
-          <li class="nav-item-faq">{{#link-to "faq"}}{{i18n "faq"}}{{/link-to}}</li>
+          <li class="nav-item-guidelines"><LinkTo @route="guidelines">{{i18n "guidelines"}}</LinkTo></li>
+          <li class="nav-item-faq"><LinkTo @route="faq">{{i18n "faq"}}</LinkTo></li>
         {{else}}
-          <li class="nav-item-faq">{{#link-to "faq"}}{{i18n "faq"}}{{/link-to}}</li>
+          <li class="nav-item-faq"><LinkTo @route="faq">{{i18n "faq"}}</LinkTo></li>
         {{/if}}
-        <li class="nav-item-tos">{{#link-to "tos"}}{{i18n "tos"}}{{/link-to}}</li>
-        <li class="nav-item-privacy">{{#link-to "privacy"}}{{i18n "privacy"}}{{/link-to}}</li>
+        <li class="nav-item-tos"><LinkTo @route="tos">{{i18n "tos"}}</LinkTo></li>
+        <li class="nav-item-privacy"><LinkTo @route="privacy">{{i18n "privacy"}}</LinkTo></li>
       </ul>
 
       <section class="about description">
@@ -19,47 +19,39 @@
         <p>{{model.description}}</p>
       </section>
 
-      {{plugin-outlet name="about-after-description"
-              connectorTagName="section"
-              args=(hash model=model)}}
+      <PluginOutlet @name="about-after-description" @connectorTagName="section" @args={{hash model=model}} />
 
       {{#if model.admins}}
         <section class="about admins">
           <h3>{{d-icon "users"}} {{i18n "about.our_admins"}}</h3>
 
-          {{about-page-users users=model.admins}}
+          <AboutPageUsers @users={{model.admins}} />
           <div class="clearfix"></div>
 
         </section>
       {{/if}}
 
-      {{plugin-outlet name="about-after-admins"
-                    tagName="span"
-                    connectorTagName="section"
-                    args=(hash model=model)}}
+      <PluginOutlet @name="about-after-admins" @tagName="span" @connectorTagName="section" @args={{hash model=model}} />
 
       {{#if model.moderators}}
         <section class="about moderators">
           <h3>{{d-icon "users"}} {{i18n "about.our_moderators"}}</h3>
 
           <div class="users">
-            {{about-page-users users=model.moderators}}
+            <AboutPageUsers @users={{model.moderators}} />
           </div>
           <div class="clearfix"></div>
         </section>
       {{/if}}
 
-      {{plugin-outlet name="about-after-moderators"
-                    tagName="span"
-                    connectorTagName="section"
-                    args=(hash model=model)}}
+      <PluginOutlet @name="about-after-moderators" @tagName="span" @connectorTagName="section" @args={{hash model=model}} />
 
       {{#if model.category_moderators.length}}
         {{#each model.category_moderators as |cm|}}
           <section class="about category-moderators moderators-{{cm.category.slug}}">
             <h3>{{category-link cm.category}}{{i18n "about.moderators"}}</h3>
             <div class="users">
-              {{about-page-users users=cm.moderators}}
+              <AboutPageUsers @users={{cm.moderators}} />
             </div>
             <div class="clearfix"></div>
           </section>
@@ -127,4 +119,4 @@
 
     </div>
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs b/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs
index 677a6c56347..b8232200962 100644
--- a/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs
+++ b/app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs
@@ -1,11 +1,8 @@
 <div class="ac-message">
-  {{activation-email-form email=newEmail}}
+  <ActivationEmailForm @email={{newEmail}} />
 </div>
 
 <div class="activation-controls">
-  {{d-button action=(action "changeEmail")
-             label="login.submit_new_email"
-             disabled=submitDisabled
-             class="btn-primary"}}
-  {{d-button action=(action "cancel") label="cancel" class="edit-cancel"}}
+  <DButton @action={{action "changeEmail"}} @label="login.submit_new_email" @disabled={{submitDisabled}} @class="btn-primary" />
+  <DButton @action={{action "cancel"}} @label="cancel" @class="edit-cancel" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/account-created/index.hbs b/app/assets/javascripts/discourse/app/templates/account-created/index.hbs
index 3bbbb930111..2c10296b77e 100644
--- a/app/assets/javascripts/discourse/app/templates/account-created/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/account-created/index.hbs
@@ -2,6 +2,5 @@
   {{html-safe accountCreated.message}}
 </div>
 {{#if accountCreated.show_controls}}
-  {{activation-controls sendActivationEmail=(action "sendActivationEmail")
-                        editActivationEmail=(action "editActivationEmail")}}
+  <ActivationControls @sendActivationEmail={{action "sendActivationEmail"}} @editActivationEmail={{action "editActivationEmail"}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs
index 1a8cf13f5e0..fa842d64ed5 100644
--- a/app/assets/javascripts/discourse/app/templates/application.hbs
+++ b/app/assets/javascripts/discourse/app/templates/application.hbs
@@ -1,19 +1,11 @@
-{{#discourse-root}}
+<DiscourseRoot>
   <a href="#main-container" id="skip-link">{{i18n "skip_to_main_content"}}</a>
-  {{d-document}}
-  {{plugin-outlet name="above-site-header" connectorTagName="div"}}
-  {{site-header canSignUp=canSignUp
-                showCreateAccount=(route-action "showCreateAccount")
-                showLogin=(route-action "showLogin")
-                showKeyboard=(route-action "showKeyboardShortcutsHelp")
-                toggleMobileView=(route-action "toggleMobileView")
-                toggleAnonymous=(route-action "toggleAnonymous")
-                logout=(route-action "logout")
-                toggleSidebar=(route-action "toggleSidebar")
-                }}
-  {{software-update-prompt}}
+  <DDocument />
+  <PluginOutlet @name="above-site-header" @connectorTagName="div" />
+  <SiteHeader @canSignUp={{canSignUp}} @showCreateAccount={{route-action "showCreateAccount"}} @showLogin={{route-action "showLogin"}} @showKeyboard={{route-action "showKeyboardShortcutsHelp"}} @toggleMobileView={{route-action "toggleMobileView"}} @toggleAnonymous={{route-action "toggleAnonymous"}} @logout={{route-action "logout"}} @toggleSidebar={{route-action "toggleSidebar"}} />
+  <SoftwareUpdatePrompt />
 
-  {{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
+  <PluginOutlet @name="below-site-header" @connectorTagName="div" @args={{hash currentPath=router._router.currentPath}} />
 
   <div id="main-outlet-wrapper" class="wrap" role="main">
     {{#if (and currentUser.experimental_sidebar_enabled showSidebar)}}
@@ -21,16 +13,16 @@
     {{/if}}
 
     <div id="main-outlet">
-      {{plugin-outlet name="above-main-container" connectorTagName="div"}}
+      <PluginOutlet @name="above-main-container" @connectorTagName="div" />
       <div class="container" id="main-container">
         {{#if showTop}}
-          {{custom-html name="top"}}
+          <CustomHtml @name="top" />
         {{/if}}
-        {{notification-consent-banner}}
-        {{pwa-install-banner}}
-        {{global-notice}}
-        {{create-topics-notice}}
-        {{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
+        <NotificationConsentBanner />
+        <PwaInstallBanner />
+        <GlobalNotice />
+        <CreateTopicsNotice />
+        <PluginOutlet @name="top-notices" @connectorTagName="div" @args={{hash currentPath=router._router.currentPath}} />
       </div>
 
       {{outlet}}
@@ -38,20 +30,17 @@
     </div>
   </div>
 
-  {{plugin-outlet name="above-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
+  <PluginOutlet @name="above-footer" @connectorTagName="div" @args={{hash showFooter=showFooter}} />
   {{#if showFooter}}
-    {{custom-html
-      name="footer"
-      triggerAppEvent="true"
-      classNames="custom-footer-content"}}
+    <CustomHtml @name="footer" @triggerAppEvent="true" @classNames="custom-footer-content" />
   {{/if}}
-  {{plugin-outlet name="below-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}
+  <PluginOutlet @name="below-footer" @connectorTagName="div" @args={{hash showFooter=showFooter}} />
 
   {{outlet "modal"}}
-  {{topic-entrance}}
+  <TopicEntrance />
   {{outlet "composer"}}
 
   {{#if showFooterNav}}
-    {{footer-nav}}
+    <FooterNav />
   {{/if}}
-{{/discourse-root}}
+</DiscourseRoot>
diff --git a/app/assets/javascripts/discourse/app/templates/badges/index.hbs b/app/assets/javascripts/discourse/app/templates/badges/index.hbs
index d680a993564..2b321b4a542 100644
--- a/app/assets/javascripts/discourse/app/templates/badges/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/badges/index.hbs
@@ -1,8 +1,8 @@
-{{#d-section pageClass="badges"}}
+<DSection @pageClass="badges">
   <div class="container badges">
     <h1>{{i18n "badges.title"}}</h1>
 
-    {{plugin-outlet name="below-badges-title" tagName="span" connectorTagName="div"}}
+    <PluginOutlet @name="below-badges-title" @tagName="span" @connectorTagName="div" />
 
     <div class="badge-groups">
       {{#each badgeGroups as |bg|}}
@@ -12,11 +12,11 @@
           </div>
           <div class="badge-group-list">
             {{#each bg.badges as |b|}}
-              {{badge-card badge=b username=currentUser.username}}
+              <BadgeCard @badge={{b}} @username={{currentUser.username}} />
             {{/each}}
           </div>
         </div>
       {{/each}}
     </div>
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/badges/show.hbs b/app/assets/javascripts/discourse/app/templates/badges/show.hbs
index 164c21a71db..908468863db 100644
--- a/app/assets/javascripts/discourse/app/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/badges/show.hbs
@@ -1,21 +1,18 @@
 <div class="container show-badge {{model.slug}}">
   <h1>
-    {{#link-to "badges.index"}}{{i18n "badges.title"}}{{/link-to}}
+    <LinkTo @route="badges.index">{{i18n "badges.title"}}</LinkTo>
      /
     {{model.name}}
   </h1>
 
   <div class="show-badge-details">
-    {{badge-card badge=model size="large" count=userBadges.grant_count}}
+    <BadgeCard @badge={{model}} @size="large" @count={{userBadges.grant_count}} />
     <div class="badge-grant-info {{if hiddenSetTitle "" "hidden"}}">
       <div>
         {{#if canSelectTitle}}
           <div class="grant-info-item">
             {{i18n "badges.allow_title"}}
-            {{d-button
-              class="btn-default pad-left"
-              action=(action "toggleSetUserTitle")
-              icon="pencil-alt"}}
+            <DButton @class="btn-default pad-left" @action={{action "toggleSetUserTitle"}} @icon="pencil-alt" />
           </div>
         {{/if}}
         {{#if model.multiple_grant}}
@@ -28,26 +25,26 @@
 
     {{#if canSelectTitle}}
       <div class="badge-set-title {{if hiddenSetTitle "hidden" ""}}">
-        {{badge-title selectableUserBadges=selectableUserBadges}}
-        {{d-button class="btn-default close-btn" action=(action "toggleSetUserTitle") label="close"}}
+        <BadgeTitle @selectableUserBadges={{selectableUserBadges}} />
+        <DButton @class="btn-default close-btn" @action={{action "toggleSetUserTitle"}} @label="close" />
       </div>
     {{/if}}
   </div>
 
   {{#if userBadges}}
     <div class="user-badges {{model.slug}}">
-      {{#load-more selector=".badge-info" action=(action "loadMore")}}
+      <LoadMore @selector=".badge-info" @action={{action "loadMore"}}>
         <div class="badges-granted">
           {{#each userBadges as |ub|}}
-            {{#user-info user=ub.user size="medium" class="badge-info" date=ub.granted_at}}
+            <UserInfo @user={{ub.user}} @size="medium" @class="badge-info" @date={{ub.granted_at}}>
               <div class="granted-on">{{i18n "badges.granted_on" date=(inline-date ub.granted_at)}}</div>
               {{#if ub.post_number}}
                 <a class="post-link" href="{{ub.topic.url}}/{{ub.post_number}}">{{html-safe ub.topic.fancyTitle}}</a>
               {{/if}}
-            {{/user-info}}
+            </UserInfo>
           {{/each}}
         </div>
-      {{/load-more}}
+      </LoadMore>
 
       {{#unless canLoadMore}}
         {{#if canShowOthers}}
@@ -58,6 +55,6 @@
       {{/unless}}
     </div>
 
-    {{conditional-loading-spinner condition=canLoadMore}}
+    <ConditionalLoadingSpinner @condition={{canLoadMore}} />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/bulk-tag.hbs b/app/assets/javascripts/discourse/app/templates/bulk-tag.hbs
index 4ed48ddc2b6..4215736057d 100644
--- a/app/assets/javascripts/discourse/app/templates/bulk-tag.hbs
+++ b/app/assets/javascripts/discourse/app/templates/bulk-tag.hbs
@@ -1,5 +1,5 @@
 <p>{{i18n (concat "topics.bulk." title)}}</p>
 
-<p>{{tag-chooser tags=tags categoryId=categoryId}}</p>
+<p><TagChooser @tags={{tags}} @categoryId={{categoryId}} /></p>
 
-{{d-button action=action disabled=emptyTags label=(concat "topics.bulk." label)}}
+<DButton @action={{this.action}} @disabled={{emptyTags}} @label={{concat "topics.bulk." label}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/activation-controls.hbs b/app/assets/javascripts/discourse/app/templates/components/activation-controls.hbs
index 454aa331031..2b49b2ad1d8 100644
--- a/app/assets/javascripts/discourse/app/templates/components/activation-controls.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/activation-controls.hbs
@@ -1,13 +1,7 @@
 {{#unless siteSettings.must_approve_users}}
-  {{d-button action=sendActivationEmail
-             label="login.resend_title"
-             icon="envelope"
-             class="btn-primary resend"}}
+  <DButton @action={{sendActivationEmail}} @label="login.resend_title" @icon="envelope" @class="btn-primary resend" />
 {{/unless}}
 
 {{#if canEditEmail}}
-  {{d-button action=editActivationEmail
-            label="login.change_email"
-            icon="pencil-alt"
-            class="edit-email"}}
+  <DButton @action={{editActivationEmail}} @label="login.change_email" @icon="pencil-alt" @class="edit-email" />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/activation-email-form.hbs b/app/assets/javascripts/discourse/app/templates/components/activation-email-form.hbs
index c340df40f50..82c42603ee6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/activation-email-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/activation-email-form.hbs
@@ -1,2 +1,2 @@
 <p>{{i18n "login.provide_new_email"}}</p>
-{{input value=email class="activate-new-email"}}
+<Input @value={{email}} class="activate-new-email" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/backup-codes.hbs b/app/assets/javascripts/discourse/app/templates/components/backup-codes.hbs
index 95ae6664711..de8bbaf7244 100644
--- a/app/assets/javascripts/discourse/app/templates/components/backup-codes.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/backup-codes.hbs
@@ -1,12 +1,7 @@
 <div class="wrapper">
   <textarea id="backupCodes" class="backup-codes-area" rows="10" readonly>{{formattedBackupCodes}}</textarea>
 
-  {{d-button
-    action=(action "copyToClipboard")
-    class="backup-codes-copy-btn"
-    icon="copy"
-    aria-label="user.second_factor_backup.copy_to_clipboard"
-    title="user.second_factor_backup.copy_to_clipboard"}}
+  <DButton @action={{action "copyToClipboard"}} @class="backup-codes-copy-btn" @icon="copy" @aria-label="user.second_factor_backup.copy_to_clipboard" @title="user.second_factor_backup.copy_to_clipboard" />
 
   <a download="{{siteTitleSlug}}-backup-codes.txt"
      class="btn no-text btn-icon backup-codes-download-btn"
diff --git a/app/assets/javascripts/discourse/app/templates/components/badge-card.hbs b/app/assets/javascripts/discourse/app/templates/components/badge-card.hbs
index 613b99b0ef6..58c279989dd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/badge-card.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/badge-card.hbs
@@ -7,19 +7,9 @@
 
 {{#if canFavorite}}
   {{#if isFavorite}}
-    {{d-button
-      icon="star"
-      class="favorite-btn"
-      action=onFavoriteClick
-    }}
+    <DButton @icon="star" @class="favorite-btn" @action={{onFavoriteClick}} />
   {{else}}
-    {{d-button
-      icon="far-star"
-      class="favorite-btn"
-      action=onFavoriteClick
-      title=(if canFavoriteMoreBadges "badges.favorite_max_not_reached" "badges.favorite_max_reached")
-      disabled=(not canFavoriteMoreBadges)
-    }}
+    <DButton @icon="far-star" @class="favorite-btn" @action={{onFavoriteClick}} @title={{if canFavoriteMoreBadges "badges.favorite_max_not_reached" "badges.favorite_max_reached"}} @disabled={{not canFavoriteMoreBadges}} />
   {{/if}}
 {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/badge-title.hbs b/app/assets/javascripts/discourse/app/templates/components/badge-title.hbs
index 6df7fc0a24b..d32973e1dd7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/badge-title.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/badge-title.hbs
@@ -9,23 +9,13 @@
 
       <div class="control-group">
         <div class="controls">
-          {{combo-box
-            value=_selectedUserBadgeId
-            nameProperty="badge.name"
-            content=selectableUserBadges
-            onChange=(action (mut _selectedUserBadgeId))
-          }}
+          <ComboBox @value={{_selectedUserBadgeId}} @nameProperty="badge.name" @content={{selectableUserBadges}} @onChange={{action (mut _selectedUserBadgeId)}} />
         </div>
       </div>
 
       <div class="control-group">
         <div class="controls">
-          {{d-button
-            class="btn-primary"
-            action=(action "saveBadgeTitle")
-            disabled=_isSaving
-            label=(if _isSaving "saving" "save")
-          }}
+          <DButton @class="btn-primary" @action={{action "saveBadgeTitle"}} @disabled={{_isSaving}} @label={{if _isSaving "saving" "save"}} />
           {{#if _isSaved}}
             <span>{{i18n "saved"}}</span>
           {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
index db3c4d9fcd2..87f36da3851 100644
--- a/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/basic-topic-list.hbs
@@ -1,20 +1,6 @@
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if topics}}
-    {{topic-list
-      showPosters=showPosters
-      hideCategory=hideCategory
-      topics=topics
-      expandExcerpts=expandExcerpts
-      bulkSelectEnabled=bulkSelectEnabled
-      bulkSelectAction=bulkSelectAction
-      canBulkSelect=canBulkSelect
-      selected=selected
-      tagsForUser=tagsForUser
-      onScroll=onScroll
-      scrollOnLoad=scrollOnLoad
-      toggleBulkSelect=toggleBulkSelect
-      updateAutoAddTopicsToBulkSelect=updateAutoAddTopicsToBulkSelect
-    }}
+    <TopicList @showPosters={{showPosters}} @hideCategory={{hideCategory}} @topics={{topics}} @expandExcerpts={{expandExcerpts}} @bulkSelectEnabled={{bulkSelectEnabled}} @bulkSelectAction={{bulkSelectAction}} @canBulkSelect={{canBulkSelect}} @selected={{selected}} @tagsForUser={{tagsForUser}} @onScroll={{onScroll}} @scrollOnLoad={{scrollOnLoad}} @toggleBulkSelect={{toggleBulkSelect}} @updateAutoAddTopicsToBulkSelect={{updateAutoAddTopicsToBulkSelect}} />
   {{else}}
     {{#unless loadingMore}}
       <div class="alert alert-info">
@@ -22,4 +8,4 @@
       </div>
     {{/unless}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs b/app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs
index c7954015474..7f1daf30654 100644
--- a/app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs
@@ -1,5 +1,5 @@
-{{#conditional-loading-spinner condition=loading}}
-  {{#load-more selector=".bookmark-list .bookmark-list-item" action=loadMore}}
+<ConditionalLoadingSpinner @condition={{loading}}>
+  <LoadMore @selector=".bookmark-list .bookmark-list-item" @action={{loadMore}}>
     <table class="topic-list bookmark-list">
       <thead class="topic-list-header">
         {{#unless site.mobileView}}
@@ -32,7 +32,7 @@
                     {{d-icon "thumbtack" class="bookmark-pinned"}}
                   {{/if}}
                   {{#if bookmark.bookmarkableTopicAlike}}
-                    {{~topic-status topic=bookmark.topicStatus~}}
+                    <TopicStatus @topic={{bookmark.topicStatus}} />
                     {{topic-link bookmark.topicForList}}
                   {{else}}
                     <a href={{bookmark.bookmarkable_url}}
@@ -71,18 +71,12 @@
               {{raw "list/activity-column" topic=bookmark class="num post-metadata" tagName="td"}}
             {{/unless}}
             <td class="topic-list-data">
-              {{bookmark-actions-dropdown
-              bookmark=bookmark
-              removeBookmark=(action "removeBookmark")
-              editBookmark=(action "editBookmark")
-              clearBookmarkReminder=(action "clearBookmarkReminder")
-              togglePinBookmark=(action "togglePinBookmark")
-              }}
+              <BookmarkActionsDropdown @bookmark={{bookmark}} @removeBookmark={{action "removeBookmark"}} @editBookmark={{action "editBookmark"}} @clearBookmarkReminder={{action "clearBookmarkReminder"}} @togglePinBookmark={{action "togglePinBookmark"}} />
             </td>
           </tr>
         {{/each}}
       </tbody>
     </table>
-    {{conditional-loading-spinner condition=loadingMore}}
-  {{/load-more}}
-{{/conditional-loading-spinner}}
+    <ConditionalLoadingSpinner @condition={{loadingMore}} />
+  </LoadMore>
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/discourse/app/templates/components/bookmark.hbs b/app/assets/javascripts/discourse/app/templates/components/bookmark.hbs
index 44d14a340a6..6e038c999a9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/bookmark.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/bookmark.hbs
@@ -1,4 +1,4 @@
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if errorMessage}}
     <div class="control-group">
       <div class="controls">
@@ -8,19 +8,14 @@
   {{/if}}
 
   <div class="control-group bookmark-name-wrap">
-    {{input id="bookmark-name" value=model.name name="bookmark-name" class="bookmark-name" enter=(action "saveAndClose") placeholder=(i18n "post.bookmarks.name_placeholder") maxlength="100"}}
-    {{d-button icon="cog" action=(action "toggleShowOptions") class="bookmark-options-button" ariaLabel="post.bookmarks.options"}}
+    <Input @id="bookmark-name" @value={{model.name}} @name="bookmark-name" class="bookmark-name" @enter={{action "saveAndClose"}} placeholder={{i18n "post.bookmarks.name_placeholder"}} @maxlength="100" />
+    <DButton @icon="cog" @action={{action "toggleShowOptions"}} @class="bookmark-options-button" @ariaLabel="post.bookmarks.options" />
   </div>
 
   {{#if showOptions}}
     <div class="bookmark-options-panel">
       <label class="control-label" for="bookmark_auto_delete_preference">{{i18n "bookmarks.auto_delete_preference.label"}}</label>
-      {{combo-box
-      content=autoDeletePreferences
-      value=autoDeletePreference
-      class="bookmark-option-selector"
-      onChange=(action (mut autoDeletePreference))
-      }}
+      <ComboBox @content={{autoDeletePreferences}} @value={{autoDeletePreference}} @class="bookmark-option-selector" @onChange={{action (mut autoDeletePreference)}} />
     </div>
   {{/if}}
 
@@ -37,24 +32,17 @@
     </label>
 
     {{#if userHasTimezoneSet}}
-      {{time-shortcut-picker
-        timeShortcuts=timeOptions
-        prefilledDatetime=prefilledDatetime
-        onTimeSelected=(action "onTimeSelected")
-        hiddenOptions=hiddenTimeShortcutOptions
-        customLabels=customTimeShortcutLabels
-        _itsatrap=_itsatrap
-      }}
+      <TimeShortcutPicker @timeShortcuts={{timeOptions}} @prefilledDatetime={{prefilledDatetime}} @onTimeSelected={{action "onTimeSelected"}} @hiddenOptions={{hiddenTimeShortcutOptions}} @customLabels={{customTimeShortcutLabels}} @_itsatrap={{_itsatrap}} />
     {{else}}
       <div class="alert alert-info">{{html-safe (i18n "bookmarks.no_timezone" basePath=(base-path))}}</div>
     {{/if}}
   </div>
 
   <div class="modal-footer control-group">
-    {{d-button id="save-bookmark" label="bookmarks.save" class="btn-primary" action=(action "saveAndClose")}}
-    {{d-modal-cancel close=(action "closeWithoutSavingBookmark")}}
+    <DButton @id="save-bookmark" @label="bookmarks.save" @class="btn-primary" @action={{action "saveAndClose"}} />
+    <DModalCancel @close={{action "closeWithoutSavingBookmark"}} />
     {{#if showDelete}}
-      {{d-button id="delete-bookmark" icon="trash-alt" class="delete-bookmark btn-danger" action=(action "delete")}}
+      <DButton @id="delete-bookmark" @icon="trash-alt" @class="delete-bookmark btn-danger" @action={{action "delete"}} />
     {{/if}}
   </div>
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs
index f34b9e21f20..21fcaeb6987 100644
--- a/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs
@@ -1,19 +1,12 @@
 {{#each categoryBreadcrumbs as |breadcrumb|}}
   {{#if breadcrumb.hasOptions}}
     <li>
-      {{category-drop
-        category=breadcrumb.category
-        categories=breadcrumb.options
-        tagId=tag.id
-        editingCategory=editingCategory
-        editingCategoryTab=editingCategoryTab
-        options=(hash
+      <CategoryDrop @category={{breadcrumb.category}} @categories={{breadcrumb.options}} @tagId={{tag.id}} @editingCategory={{editingCategory}} @editingCategoryTab={{editingCategoryTab}} @options={{hash
           parentCategory=breadcrumb.parentCategory
           subCategory=breadcrumb.isSubcategory
           noSubcategories=breadcrumb.noSubcategories
           autoFilterable=true
-        )
-      }}
+        }} />
     </li>
   {{/if}}
 {{/each}}
@@ -21,24 +14,15 @@
 {{#if showTagsSection}}
   {{#if additionalTags}}
     <li>
-      {{tags-intersection-chooser
-        currentCategory=category
-        mainTag=tag.id
-        additionalTags=additionalTags
-        options=(hash
+      <TagsIntersectionChooser @currentCategory={{category}} @mainTag={{tag.id}} @additionalTags={{additionalTags}} @options={{hash
           categoryId=category.id
-        )
-      }}
+        }} />
     </li>
   {{else}}
     <li>
-      {{tag-drop
-        currentCategory=category
-        noSubcategories=noSubcategories
-        tagId=tag.id
-      }}
+      <TagDrop @currentCategory={{category}} @noSubcategories={{noSubcategories}} @tagId={{tag.id}} />
     </li>
   {{/if}}
 {{/if}}
 
-{{plugin-outlet name="bread-crumbs-right" connectorTagName="li"}}
+<PluginOutlet @name="bread-crumbs-right" @connectorTagName="li" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/cancel-link.hbs b/app/assets/javascripts/discourse/app/templates/components/cancel-link.hbs
index 311aaceae07..cdef7f3c203 100644
--- a/app/assets/javascripts/discourse/app/templates/components/cancel-link.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/cancel-link.hbs
@@ -1,3 +1,3 @@
-{{#link-to route args class="cancel"}}
+<LinkTo @route={{route}} @model={{args}} class="cancel">
   {{i18n "cancel"}}
-{{/link-to}}
+</LinkTo>
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-and-latest-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-and-latest-topics.hbs
index 9bd1f392feb..73b51ca62b7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-and-latest-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-and-latest-topics.hbs
@@ -1,9 +1,9 @@
 <div class="column categories">
-  {{categories-only categories=categories}}
+  <CategoriesOnly @categories={{categories}} />
 </div>
 
 <div class="column">
-  {{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
+  <CategoriesTopicList @topics={{topics}} @filter="latest" @class="latest-topic-list" />
 </div>
 
-{{plugin-outlet name="extra-categories-column" connectorTagName="div"}}
+<PluginOutlet @name="extra-categories-column" @connectorTagName="div" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-and-top-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-and-top-topics.hbs
index 803bd2dc8c0..2d33841cca0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-and-top-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-and-top-topics.hbs
@@ -1,9 +1,9 @@
 <div class="column categories">
-  {{categories-only categories=categories}}
+  <CategoriesOnly @categories={{categories}} />
 </div>
 
 <div class="column">
-  {{categories-topic-list topics=topics filter="top" class="top-topic-list"}}
+  <CategoriesTopicList @topics={{topics}} @filter="top" @class="top-topic-list" />
 </div>
 
-{{plugin-outlet name="extra-categories-column" connectorTagName="div"}}
+<PluginOutlet @name="extra-categories-column" @connectorTagName="div" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
index e25f0d922c1..1a515034835 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@@ -5,18 +5,12 @@
         <a href={{c.url}}>
           {{#unless c.isMuted}}
             {{#if c.uploaded_logo.url}}
-              {{cdn-img
-                src=c.uploaded_logo.url
-                class="logo"
-                width=c.uploaded_logo.width
-                height=c.uploaded_logo.height
-                alt=""
-              }}
+              <CdnImg @src={{c.uploaded_logo.url}} @class="logo" @width={{c.uploaded_logo.width}} @height={{c.uploaded_logo.height}} @alt="" />
             {{/if}}
           {{/unless}}
 
           <h3>
-            {{category-title-before category=c}}
+            <CategoryTitleBefore @category={{c}} />
             {{#if c.read_restricted}}
               {{d-icon lockIcon}}
             {{/if}}
@@ -30,14 +24,14 @@
           {{#if c.topics}}
             <ul>
               {{#each c.topics as |topic|}}
-                {{categories-boxes-topic topic=topic}}
+                <CategoriesBoxesTopic @topic={{topic}} />
               {{/each}}
             </ul>
           {{/if}}
         </div>
       {{/unless}}
 
-      {{plugin-outlet name="category-box-below-each-category" args=(hash category=c)}}
+      <PluginOutlet @name="category-box-below-each-category" @args={{hash category=c}} />
     </div>
   </div>
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
index 95758c17e50..b1da9f26f32 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
@@ -1,18 +1,12 @@
 {{#each categories as |c|}}
-  {{plugin-outlet name="category-box-before-each-box" args=(hash category=c)}}
+  <PluginOutlet @name="category-box-before-each-box" @args={{hash category=c}} />
 
   <div style={{unless noCategoryStyle (html-safe (concat (border-color c.color) (category-color-variable c.color)))}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} data-url={{c.url}} class="category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}} {{if noCategoryStyle "no-category-boxes-style"}}">
     <div class="category-box-inner">
       {{#unless c.isMuted}}
         <div class="category-logo">
           {{#if c.uploaded_logo.url}}
-            {{cdn-img
-              src=c.uploaded_logo.url
-              class="logo"
-              width=c.uploaded_logo.width
-              height=c.uploaded_logo.height
-              alt=""
-            }}
+            <CdnImg @src={{c.uploaded_logo.url}} @class="logo" @width={{c.uploaded_logo.width}} @height={{c.uploaded_logo.height}} @alt="" />
           {{/if}}
         </div>
       {{/unless}}
@@ -21,7 +15,7 @@
         <div class="category-box-heading">
           <a class="parent-box-link" href={{c.url}}>
             <h3>
-              {{category-title-before category=c}}
+              <CategoryTitleBefore @category={{c}} />
               {{#if c.read_restricted}}
                 {{d-icon lockIcon}}
               {{/if}}
@@ -39,13 +33,13 @@
             {{#each c.subcategories as |subcategory|}}
               <div data-category-id={{subcategory.id}} data-notification-level={{subcategory.notificationLevelString}} style={{border-color subcategory.color}} class="subcategory with-subcategories {{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}">
                 <div class="subcategory-box-inner">
-                  {{category-title-link tagName="h4" category=subcategory}}
+                  <CategoryTitleLink @tagName="h4" @category={{subcategory}} />
                   {{#if subcategory.subcategories}}
                     <div class="subcategories">
                       {{#each subcategory.subcategories as |subsubcategory|}}
                         {{#unless subsubcategory.isMuted}}
                           <span class="subcategory">
-                            {{category-title-before category=subsubcategory}}
+                            <CategoryTitleBefore @category={{subsubcategory}} />
                             {{category-link subsubcategory hideParent="true"}}
                           </span>
                         {{/unless}}
@@ -60,12 +54,7 @@
               {{#each c.subcategories as |sc|}}
                 <a class="subcategory" href={{sc.url}}>
                   <span class="subcategory-image-placeholder">
-                    {{cdn-img
-                        src=sc.uploaded_logo.url
-                        class="logo"
-                        width=sc.uploaded_logo.width
-                        height=sc.uploaded_logo.height
-                        alt=""}}
+                    <CdnImg @src={{sc.uploaded_logo.url}} @class="logo" @width={{sc.uploaded_logo.width}} @height={{sc.uploaded_logo.height}} @alt="" />
                   </span>
 
                   {{category-link sc hideParent="true"}}
@@ -76,11 +65,11 @@
         {{/unless}}
       </div>
 
-      {{plugin-outlet name="category-box-below-each-category" args=(hash category=c)}}
+      <PluginOutlet @name="category-box-below-each-category" @args={{hash category=c}} />
     </div>
   </div>
 
-  {{plugin-outlet name="category-box-after-each-box" args=(hash category=c)}}
+  <PluginOutlet @name="category-box-after-each-box" @args={{hash category=c}} />
 {{/each}}
 
-{{plugin-outlet name="category-boxes-after-boxes" args=(hash category=c)}}
+<PluginOutlet @name="category-boxes-after-boxes" @args={{hash category=c}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
index b98eb836296..0a7c9889bb5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
@@ -12,7 +12,7 @@
       </thead>
       <tbody aria-labelledby="categories-only-category">
         {{#each categories as |category|}}
-          {{parent-category-row category=category showTopics=showTopics}}
+          <ParentCategoryRow @category={{category}} @showTopics={{showTopics}} />
         {{/each}}
       </tbody>
     </table>
@@ -38,7 +38,7 @@
         </thead>
         <tbody aria-labelledby="categories-only-category-muted">
           {{#each categories as |category|}}
-            {{parent-category-row category=category showTopics=showTopics listType="muted"}}
+            <ParentCategoryRow @category={{category}} @showTopics={{showTopics}} @listType="muted" />
           {{/each}}
         </tbody>
       </table>
@@ -46,4 +46,4 @@
   {{/if}}
 {{/if}}
 
-{{plugin-outlet name="below-categories-only" connectorTagName="div" args=(hash categories=categories showTopics=showTopics)}}
+<PluginOutlet @name="below-categories-only" @connectorTagName="div" @args={{hash categories=categories showTopics=showTopics}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs
index b5125ff0892..b25ccba1a07 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs
@@ -1,11 +1,11 @@
 <div role="heading" aria-level="2" class="table-heading">
   {{i18n (concat "filters." filter ".title")}}
-  {{plugin-outlet name="categories-topics-table-heading" connectorTagName="div"}}
+  <PluginOutlet @name="categories-topics-table-heading" @connectorTagName="div" />
 </div>
 
 {{#if topics}}
   {{#each topics as |t|}}
-    {{latest-topic-list-item topic=t}}
+    <LatestTopicListItem @topic={{t}} />
   {{/each}}
   <div class="more-topics">
     <a href={{get-url (concat "/" filter)}} class="btn btn-default pull-right">{{i18n "more"}}</a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-with-featured-topics.hbs
index b62e4a8fb54..75eaa9bb810 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-with-featured-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-with-featured-topics.hbs
@@ -1,2 +1 @@
-{{categories-only categories=categories
-                  showTopics="true"}}
+<CategoriesOnly @categories={{categories}} @showTopics="true" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/category-name-fields.hbs b/app/assets/javascripts/discourse/app/templates/components/category-name-fields.hbs
index 7bcefbbe18b..c470ef1f2bf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/category-name-fields.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/category-name-fields.hbs
@@ -2,11 +2,11 @@
   {{#unless category.isUncategorizedCategory}}
     <section class="field-item">
       <label>{{i18n "category.name"}}</label>
-      {{text-field value=category.name placeholderKey="category.name_placeholder" maxlength="50" class="category-name"}}
+      <TextField @value={{category.name}} @placeholderKey="category.name_placeholder" @maxlength="50" @class="category-name" />
     </section>
   {{/unless}}
   <section class="field-item">
     <label>{{i18n "category.slug"}}</label>
-    {{text-field value=category.slug placeholderKey="category.slug_placeholder" maxlength="255"}}
+    <TextField @value={{category.slug}} @placeholderKey="category.slug_placeholder" @maxlength="255" />
   </section>
 </section>
diff --git a/app/assets/javascripts/discourse/app/templates/components/category-permission-row.hbs b/app/assets/javascripts/discourse/app/templates/components/category-permission-row.hbs
index b3ac950558c..975c455d177 100644
--- a/app/assets/javascripts/discourse/app/templates/components/category-permission-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/category-permission-row.hbs
@@ -5,25 +5,9 @@
   </a>
 </span>
 <span class="options actionable">
-  {{d-button
-    icon="check-square"
-    class="btn btn-flat see"
-    disabled=true
-  }}
+  <DButton @icon="check-square" @class="btn btn-flat see" @disabled={{true}} />
 
-  {{d-button
-    icon=canReplyIcon
-    action=(action "setPermissionReply")
-    translatedTitle=replyTooltip
-    class=(concat "btn btn-flat reply-toggle " replyGranted)
-    disabled=replyDisabled
-  }}
+  <DButton @icon={{canReplyIcon}} @action={{action "setPermissionReply"}} @translatedTitle={{replyTooltip}} @class={{concat "btn btn-flat reply-toggle " replyGranted}} @disabled={{replyDisabled}} />
 
-  {{d-button
-    icon=canCreateIcon
-    action=(action "setPermissionFull")
-    translatedTitle=createTooltip
-    class=(concat "btn btn-flat create-toggle " createGranted)
-    disabled=createDisabled
-  }}
+  <DButton @icon={{canCreateIcon}} @action={{action "setPermissionFull"}} @translatedTitle={{createTooltip}} @class={{concat "btn btn-flat create-toggle " createGranted}} @disabled={{createDisabled}} />
 </span>
diff --git a/app/assets/javascripts/discourse/app/templates/components/category-title-before.hbs b/app/assets/javascripts/discourse/app/templates/components/category-title-before.hbs
index 99761e59b2d..b4cc2ca52cf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/category-title-before.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/category-title-before.hbs
@@ -1 +1 @@
-{{plugin-outlet name="category-title-before" args=(hash category=category)}}
+<PluginOutlet @name="category-title-before" @args={{hash category=category}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs b/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs
index 43cec199dc2..0ca2df142c1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/category-title-link.hbs
@@ -1,17 +1,12 @@
 <a class="category-title-link" href={{category.url}}>
   <div class="category-text-title">
-    {{category-title-before category=category}}
+    <CategoryTitleBefore @category={{category}} />
     {{#if category.read_restricted}}
       {{d-icon lockIcon}}
     {{/if}}
     <span class="category-name">{{dir-span category.name}}</span>
   </div>
   {{#if category.uploaded_logo.url}}
-    {{cdn-img
-      src=category.uploaded_logo.url
-      class="category-logo"
-      width=category.uploaded_logo.width
-      height=category.uploaded_logo.height
-      alt=""}}
+    <CdnImg @src={{category.uploaded_logo.url}} @class="category-logo" @width={{category.uploaded_logo.width}} @height={{category.uploaded_logo.height}} @alt="" />
   {{/if}}
 </a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/choose-message.hbs b/app/assets/javascripts/discourse/app/templates/components/choose-message.hbs
index f8005caa4ad..6561946c4e9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/choose-message.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/choose-message.hbs
@@ -1,6 +1,6 @@
 <label for="choose-message-title">{{i18n "choose_message.title.search"}}</label>
 
-{{text-field value=messageTitle placeholderKey="choose_message.title.placeholder" id="choose-message-title"}}
+<TextField @value={{messageTitle}} @placeholderKey="choose_message.title.placeholder" @id="choose-message-title" />
 
 {{#if loading}}
   <p>{{i18n "loading"}}</p>
diff --git a/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
index 60c99d75417..fcd59e1ed26 100644
--- a/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
@@ -5,11 +5,7 @@
   <span>{{i18n labelText}}</span>
 </label>
 
-{{text-field
-  value=topicTitle
-  placeholderKey="choose_topic.title.placeholder"
-  id="choose-topic-title"
-}}
+<TextField @value={{topicTitle}} @placeholderKey="choose_topic.title.placeholder" @id="choose-topic-title" />
 
 {{#if loading}}
   <p>{{i18n "loading"}}</p>
@@ -21,14 +17,8 @@
       {{#each topics as |t|}}
         <div class="controls existing-topic">
           <label class="radio">
-            {{input
-              id=(concat "choose-topic-" t.id)
-              checked=(eq t.id selectedTopicId)
-              click=(action "chooseTopic" t)
-              type="radio"
-              name="choose_topic_id"
-            }}
-            {{topic-status topic=t disableActions=true}}
+            <Input @id={{concat "choose-topic-" t.id}} @checked={{eq t.id selectedTopicId}} @click={{action "chooseTopic" t}} @type="radio" @name="choose_topic_id" />
+            <TopicStatus @topic={{t}} @disableActions={{true}} />
             <span class="topic-title">
               {{replace-emoji t.fancy_title}}
             </span>
diff --git a/app/assets/javascripts/discourse/app/templates/components/color-input.hbs b/app/assets/javascripts/discourse/app/templates/components/color-input.hbs
index 2d6a1bf703f..9c5ab4433ab 100644
--- a/app/assets/javascripts/discourse/app/templates/components/color-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/color-input.hbs
@@ -1,7 +1,2 @@
-{{#if onlyHex}}<span class="add-on">#</span>{{/if}}{{text-field
-  class="hex-input"
-  value=hexValue
-  maxlength=maxlength
-  input=(action "onHexInput" value="target.value")
-}}
+{{#if onlyHex}}<span class="add-on">#</span>{{/if}}<TextField @class="hex-input" @value={{hexValue}} @maxlength={{maxlength}} @input={{action "onHexInput" value="target.value"}} />
 <input class="picker" type="color" value={{normalizedHexValue}} {{on "input" this.onPickerInput}}>
diff --git a/app/assets/javascripts/discourse/app/templates/components/color-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/color-picker.hbs
index a7b3613fa53..b33c5463162 100644
--- a/app/assets/javascripts/discourse/app/templates/components/color-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/color-picker.hbs
@@ -1,5 +1,5 @@
 {{#each colors as |c|}}
-  {{#color-picker-choice color=c usedColors=usedColors selectColor=(action "selectColor")}}
+  <ColorPickerChoice @color={{c}} @usedColors={{usedColors}} @selectColor={{action "selectColor"}}>
     {{d-icon "check"}}
-  {{/color-picker-choice}}
+  </ColorPickerChoice>
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
index 220f9dd497e..ace38619ae2 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
@@ -1,19 +1,6 @@
-{{composer-actions
-  composerModel=model
-  replyOptions=model.replyOptions
-  canWhisper=canWhisper
-  openComposer=openComposer
-  closeComposer=closeComposer
-  action=model.action
-  tabindex=tabindex
-  topic=model.topic
-  post=model.post
-  whisper=model.whisper
-  noBump=model.noBump
-  options=(hash
+<ComposerActions @composerModel={{model}} @replyOptions={{model.replyOptions}} @canWhisper={{canWhisper}} @openComposer={{openComposer}} @closeComposer={{closeComposer}} @action={{model.action}} @tabindex={{tabindex}} @topic={{model.topic}} @post={{model.post}} @whisper={{model.whisper}} @noBump={{model.noBump}} @options={{hash
     mobilePlacementStrategy="fixed"
-  )
-}}
+  }} />
 
 <span class="action-title">
   {{actionTitle}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs
index 767b0a854ae..fce455b4192 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs
@@ -1,27 +1,7 @@
-{{#d-editor
-  value=composer.reply
-  placeholder=replyPlaceholder
-  previewUpdated=(action "previewUpdated")
-  markdownOptions=markdownOptions
-  extraButtons=(action "extraButtons")
-  importQuote=(action "importQuote")
-  showUploadModal=showUploadModal
-  togglePreview=(action "togglePreview")
-  processPreview=processPreview
-  validation=validation
-  loading=composer.loading
-  forcePreview=forcePreview
-  showLink=showLink
-  composerEvents=true
-  onExpandPopupMenuOptions=(action "onExpandPopupMenuOptions")
-  onPopupMenuAction=onPopupMenuAction
-  popupMenuOptions=popupMenuOptions
-  disabled=disableTextarea
-  outletArgs=(hash composer=composer editorType="composer")
-}}
+<DEditor @value={{composer.reply}} @placeholder={{replyPlaceholder}} @previewUpdated={{action "previewUpdated"}} @markdownOptions={{markdownOptions}} @extraButtons={{action "extraButtons"}} @importQuote={{action "importQuote"}} @showUploadModal={{showUploadModal}} @togglePreview={{action "togglePreview"}} @processPreview={{processPreview}} @validation={{validation}} @loading={{composer.loading}} @forcePreview={{forcePreview}} @showLink={{showLink}} @composerEvents={{true}} @onExpandPopupMenuOptions={{action "onExpandPopupMenuOptions"}} @onPopupMenuAction={{onPopupMenuAction}} @popupMenuOptions={{popupMenuOptions}} @disabled={{disableTextarea}} @outletArgs={{hash composer=composer editorType="composer"}}>
   {{yield}}
-{{/d-editor}}
+</DEditor>
 
 {{#if allowUpload}}
-  {{pick-files-button fileInputId="file-uploader" allowMultiple=true}}
+  <PickFilesButton @fileInputId="file-uploader" @allowMultiple={{true}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
index 2374a83a17a..60aa15fbeeb 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs
@@ -1,8 +1,3 @@
 {{#each messages as |message|}}
-  {{composer-message
-    message=message
-    closeMessage=(action "closeMessage")
-    shareModal=(action "shareModal")
-    switchPM=(action "switchPM")
-  }}
+  <ComposerMessage @message={{message}} @closeMessage={{action "closeMessage"}} @shareModal={{action "shareModal"}} @switchPM={{action "switchPM"}} />
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-title.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-title.hbs
index 55f7302f1e1..f192ecbdc01 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-title.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-title.hbs
@@ -1,11 +1,3 @@
-{{text-field
-  value=composer.title
-  id="reply-title"
-  maxLength=titleMaxLength
-  placeholderKey=composer.titlePlaceholder
-  aria-label=(I18n composer.titlePlaceholder)
-  disabled=disabled
-  autocomplete="off"
-}}
+<TextField @value={{composer.title}} @id="reply-title" @maxLength={{titleMaxLength}} @placeholderKey={{composer.titlePlaceholder}} @aria-label={{I18n composer.titlePlaceholder}} @disabled={{disabled}} @autocomplete="off" />
 
-{{popup-input-tip validation=validation}}
+<PopupInputTip @validation={{validation}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs
index 5ea7bb8c0b1..9668f4f6c9c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs
@@ -1,32 +1,13 @@
 <div class="composer-controls">
-  {{plugin-outlet name="before-composer-toggles" tagName="span" connectorTagName="div"}}
+  <PluginOutlet @name="before-composer-toggles" @tagName="span" @connectorTagName="div" />
 
   {{#if site.mobileView}}
-    {{d-button
-      class="btn-flat toggle-toolbar btn-mini-toggle"
-      icon="bars"
-      action=toggleToolbar
-      title=toggleToolbarTitle
-      preventFocus=true
-      tabindex=-1
-    }}
+    <DButton @class="btn-flat toggle-toolbar btn-mini-toggle" @icon="bars" @action={{toggleToolbar}} @title={{toggleToolbarTitle}} @preventFocus={{true}} @tabindex={{-1}} />
   {{/if}}
 
-  {{d-button
-    class="btn-flat toggler toggle-minimize btn-mini-toggle"
-    icon=toggleIcon
-    action=toggleComposer
-    title=toggleTitle
-    tabindex=-1
-  }}
+  <DButton @class="btn-flat toggler toggle-minimize btn-mini-toggle" @icon={{toggleIcon}} @action={{toggleComposer}} @title={{toggleTitle}} @tabindex={{-1}} />
 
   {{#if showFullScreenButton}}
-    {{d-button
-      class="btn-flat toggle-fullscreen btn-mini-toggle"
-      icon=fullscreenIcon
-      action=toggleFullscreen
-      title=fullscreenTitle
-      tabindex=-1
-    }}
+    <DButton @class="btn-flat toggle-fullscreen btn-mini-toggle" @icon={{fullscreenIcon}} @action={{toggleFullscreen}} @title={{fullscreenTitle}} @tabindex={{-1}} />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs
index fda26a748aa..df79751a1b5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs
@@ -1,12 +1,7 @@
-{{email-group-user-chooser
-  id="private-message-users"
-  value=splitRecipients
-  onChange=(action "updateRecipients")
-  options=(hash
+<EmailGroupUserChooser @id="private-message-users" @value={{splitRecipients}} @onChange={{action "updateRecipients"}} @options={{hash
     topicId=topicId
     none="composer.users_placeholder"
     includeMessageableGroups=true
     allowEmails=currentUser.can_send_private_email_messages
     autoWrap=true
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs b/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
index 6a554d97829..6e06af71d8b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
@@ -1 +1 @@
-{{d-button class=copyClass icon=copyIcon action=(action "copy")}}
+<DButton @class={{copyClass}} @icon={{copyIcon}} @action={{action "copy"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/create-topic-button.hbs b/app/assets/javascripts/discourse/app/templates/components/create-topic-button.hbs
index 76524d1478f..da851686378 100644
--- a/app/assets/javascripts/discourse/app/templates/components/create-topic-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/create-topic-button.hbs
@@ -1,9 +1,3 @@
 {{#if canCreateTopic}}
-  {{d-button
-    class=btnClass
-    id="create-topic"
-    action=action
-    icon="plus"
-    disabled=disabled
-    label=label}}
+  <DButton @class={{btnClass}} @id="create-topic" @action={{this.action}} @icon="plus" @disabled={{disabled}} @label={{label}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
index f6ca96a8ea7..9b6c0d90c83 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
@@ -7,31 +7,12 @@
         {{#each toolbar.groups as |group|}}
           {{#each group.buttons as |b|}}
             {{#if b.popupMenu}}
-              {{toolbar-popup-menu-options
-                content=popupMenuOptions
-                onChange=onPopupMenuAction
-                onOpen=(action b.action b)
-                class=b.className
-                tabindex=-1
-                onKeydown=rovingButtonBar
-                options=(hash
+              <ToolbarPopupMenuOptions @content={{popupMenuOptions}} @onChange={{onPopupMenuAction}} @onOpen={{action b.action b}} @class={{b.className}} @tabindex={{-1}} @onKeydown={{rovingButtonBar}} @options={{hash
                   icon=b.icon
                   focusAfterOnChange=false
-                )
-              }}
+                }} />
             {{else}}
-              {{d-button
-                action=b.action
-                type="button"
-                actionParam=b
-                translatedTitle=b.title
-                label=b.label
-                icon=b.icon
-                class=b.className
-                preventFocus=b.preventFocus
-                tabindex=b.tabindex
-                onKeyDown=rovingButtonBar
-              }}
+              <DButton @action={{b.action}} @type="button" @actionParam={{b}} @translatedTitle={{b.title}} @label={{b.label}} @icon={{b.icon}} @class={{b.className}} @preventFocus={{b.preventFocus}} @tabindex={{b.tabindex}} @onKeyDown={{rovingButtonBar}} />
             {{/if}}
           {{/each}}
 
@@ -41,21 +22,10 @@
         {{/each}}
       </div>
 
-      {{conditional-loading-spinner condition=loading}}
-      {{d-textarea
-        autocomplete="off"
-        tabindex=tabindex
-        value=value
-        class="d-editor-input"
-        placeholder=placeholderTranslated
-        aria-label=placeholderTranslated
-        disabled=disabled
-        input=change
-        focusIn=(action "focusIn")
-        focusOut=(action "focusOut")
-      }}
-      {{popup-input-tip validation=validation}}
-      {{plugin-outlet name="after-d-editor" connectorTagName="div" args=outletArgs}}
+      <ConditionalLoadingSpinner @condition={{loading}} />
+      <DTextarea @autocomplete="off" @tabindex={{tabindex}} @value={{value}} @class="d-editor-input" @placeholder={{placeholderTranslated}} @aria-label={{placeholderTranslated}} @disabled={{disabled}} @input={{change}} @focusIn={{action "focusIn"}} @focusOut={{action "focusOut"}} />
+      <PopupInputTip @validation={{validation}} />
+      <PluginOutlet @name="after-d-editor" @connectorTagName="div" @args={{outletArgs}} />
     </div>
   </div>
 
@@ -65,14 +35,8 @@
         {{html-safe preview}}
       {{/unless}}
     </div>
-    {{plugin-outlet name="editor-preview" tagName="span" connectorTagName="div" classNames="d-editor-plugin" args=outletArgs}}
+    <PluginOutlet @name="editor-preview" @tagName="span" @connectorTagName="div" @classNames="d-editor-plugin" @args={{outletArgs}} />
   </div>
 </div>
 
-{{emoji-picker
-  isActive=emojiPickerIsActive
-  isEditorFocused=isEditorFocused
-  initialFilter=this.emojiFilter
-  emojiSelected=(action "emojiSelected")
-  onEmojiPickerClose=onEmojiPickerClose
-}}
+<EmojiPicker @isActive={{emojiPickerIsActive}} @isEditorFocused={{isEditorFocused}} @initialFilter={{this.emojiFilter}} @emojiSelected={{action "emojiSelected"}} @onEmojiPickerClose={{onEmojiPickerClose}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs b/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
index 961d37e8245..b0ce07b0c03 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
@@ -3,12 +3,7 @@
     <div class="modal-inner-container">
       <div class="modal-header {{headerClass}}">
         {{#if dismissable}}
-          {{d-button
-            icon="times"
-            action=(route-action "closeModal" "initiatedByCloseButton")
-            class="btn-flat modal-close close"
-            title="modal.close"
-          }}
+          <DButton @icon="times" @action={{route-action "closeModal" "initiatedByCloseButton"}} @class="btn-flat modal-close close" @title="modal.close" />
         {{/if}}
 
         {{#if title}}
@@ -24,12 +19,7 @@
         {{#if panels}}
           <ul class="modal-tabs">
             {{#each panels as |panel|}}
-              {{modal-tab
-                panel=panel
-                panelsLength=panels.length
-                selectedPanel=selectedPanel
-                onSelectPanel=onSelectPanel
-              }}
+              <ModalTab @panel={{panel}} @panelsLength={{panels.length}} @selectedPanel={{selectedPanel}} @onSelectPanel={{onSelectPanel}} />
             {{/each}}
           </ul>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-navigation-item.hbs b/app/assets/javascripts/discourse/app/templates/components/d-navigation-item.hbs
index b5b04eb673d..9ecb75f9d3f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-navigation-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-navigation-item.hbs
@@ -1,3 +1,3 @@
-{{#link-to route}}
+<LinkTo @route={{route}}>
   {{yield}}
-{{/link-to}}
+</LinkTo>
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs
index 7c6bcd38dd1..781cc61e275 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs
@@ -1,76 +1,54 @@
-{{bread-crumbs categories=categories category=category noSubcategories=noSubcategories tag=tag additionalTags=additionalTags}}
+<BreadCrumbs @categories={{categories}} @category={{category}} @noSubcategories={{noSubcategories}} @tag={{tag}} @additionalTags={{additionalTags}} />
 
 {{#unless additionalTags}}
   {{!-- nav bar doesn't work with tag intersections --}}
-  {{navigation-bar navItems=navItems filterMode=filterMode category=category}}
+  <NavigationBar @navItems={{navItems}} @filterMode={{filterMode}} @category={{category}} />
 {{/unless}}
 
 <div class="navigation-controls">
 
   {{#if showCategoryAdmin}}
-    {{categories-admin-dropdown
-      onChange=(action "selectCategoryAdminDropdownAction")
-      options=(hash
+    <CategoriesAdminDropdown @onChange={{action "selectCategoryAdminDropdownAction"}} @options={{hash
         triggerOnChangeOnTab=false
-      )
-    }}
+      }} />
   {{/if}}
 
   {{#if category}}
     {{#unless tag}}
       {{!-- don't show category edit button on tag pages --}}
       {{#if showCategoryEdit}}
-        {{d-button
-          class="btn-default edit-category"
-          action=editCategory
-          icon="wrench"
-          ariaLabel="category.edit"}}
+        <DButton @class="btn-default edit-category" @action={{editCategory}} @icon="wrench" @ariaLabel="category.edit" />
       {{/if}}
     {{/unless}}
   {{/if}}
 
   {{#if tag}}
     {{#if showToggleInfo}}
-      {{d-button icon=(if currentUser.staff "wrench" "info-circle") class="btn-default" ariaLabel="tagging.info" action=toggleInfo id="show-tag-info"}}
+      <DButton @icon={{if currentUser.staff "wrench" "info-circle"}} @class="btn-default" @ariaLabel="tagging.info" @action={{toggleInfo}} @id="show-tag-info" />
     {{/if}}
   {{/if}}
 
-  {{plugin-outlet name="before-create-topic-button" connectorTagName="div" tagName=""
-    args=(hash
+  <PluginOutlet @name="before-create-topic-button" @connectorTagName="div" @tagName="" @args={{hash
       canCreateTopic=canCreateTopic
       createTopicDisabled=createTopicDisabled
       createTopicLabel=createTopicLabel
       additionalTags=additionalTags
       category=category
-      tag=tag)
-  }}
+      tag=tag}} />
 
-  {{create-topic-button
-    canCreateTopic=canCreateTopic
-    action=(action "clickCreateTopicButton")
-    disabled=createTopicButtonDisabled
-    label=createTopicLabel
-    btnClass=createTopicClass
-    canCreateTopicOnTag=canCreateTopicOnTag
-  }}
+  <CreateTopicButton @canCreateTopic={{canCreateTopic}} @action={{action "clickCreateTopicButton"}} @disabled={{createTopicButtonDisabled}} @label={{createTopicLabel}} @btnClass={{createTopicClass}} @canCreateTopicOnTag={{canCreateTopicOnTag}} />
 
-  {{plugin-outlet name="after-create-topic-button" connectorTagName="div" tagName=""
-    args=(hash
+  <PluginOutlet @name="after-create-topic-button" @connectorTagName="div" @tagName="" @args={{hash
       canCreateTopic=canCreateTopic
       createTopicDisabled=createTopicDisabled
       createTopicLabel=createTopicLabel
-      category=category)
-  }}
+      category=category}} />
 
   {{#if category}}
     {{#unless tag}}
       {{!-- don't show category notification menu on tag pages --}}
       {{#if showCategoryNotifications}}
-        {{category-notifications-button
-          value=categoryNotificationLevel
-          category=category
-          onChange=(action "changeCategoryNotificationLevel")
-        }}
+        <CategoryNotificationsButton @value={{categoryNotificationLevel}} @category={{category}} @onChange={{action "changeCategoryNotificationLevel"}} />
       {{/if}}
     {{/unless}}
   {{/if}}
@@ -79,10 +57,7 @@
     {{#unless category}}
       {{!-- don't show tag notification menu on category pages --}}
       {{#if showTagNotifications}}
-        {{tag-notifications-button
-          onChange=changeTagNotificationLevel
-          value=tagNotification.notification_level
-        }}
+        <TagNotificationsButton @onChange={{changeTagNotificationLevel}} @value={{tagNotification.notification_level}} />
       {{/if}}
     {{/unless}}
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-input.hbs b/app/assets/javascripts/discourse/app/templates/components/date-input.hbs
index 995e421490f..2d13434224b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-input.hbs
@@ -1,11 +1,4 @@
-{{input
-  type=inputType
-  class="date-picker"
-  placeholder=placeholder
-  value=(readonly value)
-  input=(action "onChangeDate")
-  id=inputId
-}}
+<Input @type={{inputType}} class="date-picker" placeholder={{placeholder}} @value={{readonly value}} @input={{action "onChangeDate"}} @id={{inputId}} />
 
 {{#unless useGlobalPickerContainer}}
   <div class="picker-container"></div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
index 5b865fb7c12..0442534ffc6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
@@ -1,7 +1 @@
-{{input
-  type=inputType
-  class="date-picker"
-  placeholder=placeholder
-  value=value
-  autocomplete="off"
-}}
+<Input @type={{inputType}} class="date-picker" placeholder={{placeholder}} @value={{value}} @autocomplete="off" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs b/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
index 6953677d092..24900efae56 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-time-input-range.hbs
@@ -1,18 +1,3 @@
-{{date-time-input
-  date=from
-  onChange=(action "onChangeRanges" (hash prop="from"))
-  showTime=showFromTime
-  class="from"
-  placeholder=(i18n "dates.from_placeholder")
-}}
+<DateTimeInput @date={{from}} @onChange={{action "onChangeRanges" (hash prop="from")}} @showTime={{showFromTime}} @class="from" @placeholder={{i18n "dates.from_placeholder"}} />
 
-{{date-time-input
-  date=to
-  relativeDate=from
-  onChange=(action "onChangeRanges" (hash prop="to"))
-  timeFirst=toTimeFirst
-  showTime=showToTime
-  clearable=clearable
-  class="to"
-  placeholder=(i18n "dates.to_placeholder")
-}}
+<DateTimeInput @date={{to}} @relativeDate={{from}} @onChange={{action "onChangeRanges" (hash prop="to")}} @timeFirst={{toTimeFirst}} @showTime={{showToTime}} @clearable={{clearable}} @class="to" @placeholder={{i18n "dates.to_placeholder"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs b/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
index 3101e3b8f27..cf138cd99ad 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-time-input.hbs
@@ -1,35 +1,15 @@
 {{#unless timeFirst}}
-  {{date-input
-    date=date
-    placeholder=placeholder
-    relativeDate=relativeDate
-    onChange=(action "onChangeDate")
-    useGlobalPickerContainer=useGlobalPickerContainer
-  }}
+  <DateInput @date={{date}} @placeholder={{placeholder}} @relativeDate={{relativeDate}} @onChange={{action "onChangeDate"}} @useGlobalPickerContainer={{useGlobalPickerContainer}} />
 {{/unless}}
 
 {{#if showTime}}
-  {{time-input
-    date=date
-    relativeDate=relativeDate
-    onChange=(action "onChangeTime")
-  }}
+  <TimeInput @date={{date}} @relativeDate={{relativeDate}} @onChange={{action "onChangeTime"}} />
 {{/if}}
 
 {{#if timeFirst}}
-  {{date-input
-    date=date
-    placeholder=placeholder
-    relativeDate=relativeDate
-    onChange=(action "onChangeDate")
-    useGlobalPickerContainer=useGlobalPickerContainer
-  }}
+  <DateInput @date={{date}} @placeholder={{placeholder}} @relativeDate={{relativeDate}} @onChange={{action "onChangeDate"}} @useGlobalPickerContainer={{useGlobalPickerContainer}} />
 {{/if}}
 
 {{#if clearable}}
-  {{d-button
-    class="btn-default clear-date-time"
-    icon="times"
-    action=(action "onClear")
-  }}
+  <DButton @class="btn-default clear-date-time" @icon="times" @action={{action "onClear"}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/desktop-notification-config.hbs b/app/assets/javascripts/discourse/app/templates/components/desktop-notification-config.hbs
index 0d88488ae40..42add6bbec2 100644
--- a/app/assets/javascripts/discourse/app/templates/components/desktop-notification-config.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/desktop-notification-config.hbs
@@ -1,13 +1,13 @@
 {{#if isNotSupported}}
-  {{d-button icon="bell-slash" class="btn-default" label="user.desktop_notifications.not_supported" disabled="true"}}
+  <DButton @icon="bell-slash" @class="btn-default" @label="user.desktop_notifications.not_supported" @disabled="true" />
 {{/if}}
 {{#if isDeniedPermission}}
-  {{d-button icon="bell-slash" class="btn-default" label="user.desktop_notifications.perm_denied_btn" action=(action "recheckPermission") disabled="true"}}
+  <DButton @icon="bell-slash" @class="btn-default" @label="user.desktop_notifications.perm_denied_btn" @action={{action "recheckPermission"}} @disabled="true" />
   {{i18n "user.desktop_notifications.perm_denied_expl"}}
 {{else}}
   {{#if isEnabled}}
-    {{d-button icon="far-bell-slash" class="btn-default"  label="user.desktop_notifications.disable" action=(action "turnoff")}}
+    <DButton @icon="far-bell-slash" @class="btn-default" @label="user.desktop_notifications.disable" @action={{action "turnoff"}} />
   {{else}}
-    {{d-button icon="far-bell" class="btn-default" label="user.desktop_notifications.enable" action=(action "turnon")}}
+    <DButton @icon="far-bell" @class="btn-default" @label="user.desktop_notifications.enable" @action={{action "turnon"}} />
   {{/if}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/directory-item.hbs b/app/assets/javascripts/discourse/app/templates/components/directory-item.hbs
index b1b083beda4..2e8fdb053d6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/directory-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/directory-item.hbs
@@ -1,4 +1,4 @@
-<td>{{user-info user=item.user}}</td>
+<td><UserInfo @user={{item.user}} /></td>
 {{#each columns as |column|}}
   <td>
     {{#if (directory-column-is-user-field column=column)}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/directory-table.hbs b/app/assets/javascripts/discourse/app/templates/components/directory-table.hbs
index 5864d038390..e3a56c286a3 100644
--- a/app/assets/javascripts/discourse/app/templates/components/directory-table.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/directory-table.hbs
@@ -5,17 +5,9 @@
 <div class="directory-table-container">
   <table class="directory-table">
     <thead>
-      {{table-header-toggle field="username" order=order asc=asc}}
+      <TableHeaderToggle @field="username" @order={{order}} @asc={{asc}} />
       {{#each columns as |column|}}
-        {{table-header-toggle
-          field=column.name
-          icon=column.icon
-          order=order
-          asc=asc
-          automatic=(directory-column-is-automatic column=column)
-          translated=column.user_field_id
-          onActiveRender=setActiveHeader
-        }}
+        <TableHeaderToggle @field={{column.name}} @icon={{column.icon}} @order={{order}} @asc={{asc}} @automatic={{directory-column-is-automatic column=column}} @translated={{column.user_field_id}} @onActiveRender={{setActiveHeader}} />
       {{/each}}
 
       {{#if showTimeRead}}
@@ -24,7 +16,7 @@
     </thead>
     <tbody>
       {{#each items as |item|}}
-        {{directory-item item=item columns=columns showTimeRead=showTimeRead}}
+        <DirectoryItem @item={{item}} @columns={{columns}} @showTimeRead={{showTimeRead}} />
       {{/each}}
     </tbody>
   </table>
diff --git a/app/assets/javascripts/discourse/app/templates/components/discourse-banner.hbs b/app/assets/javascripts/discourse/app/templates/components/discourse-banner.hbs
index f9f2fb55c50..5280df6b30f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/discourse-banner.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/discourse-banner.hbs
@@ -11,7 +11,7 @@
           </a>
         {{/if}}
 
-        {{d-button icon="times" action=(action "dismiss") class="btn btn-flat close" title="banner.close"}}
+        <DButton @icon="times" @action={{action "dismiss"}} @class="btn btn-flat close" @title="banner.close" />
       </div>
       <div id="banner-content">
         {{html-safe content}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
index aa408070cbb..86be4251694 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
@@ -6,23 +6,16 @@
 {{/if}}
 
 <form>
-  {{category-name-fields category=category tagName=""}}
+  <CategoryNameFields @category={{category}} @tagName="" />
 
   {{#if canSelectParentCategory}}
     <section class="field parent-category">
       <label>{{i18n "category.parent"}}</label>
-      {{category-chooser
-        value=category.parent_category_id
-        categories=parentCategories
-        allowSubCategories=true
-        allowRestrictedCategories=true
-        onChange=(action (mut category.parent_category_id))
-        options=(hash
+      <CategoryChooser @value={{category.parent_category_id}} @categories={{parentCategories}} @allowSubCategories={{true}} @allowRestrictedCategories={{true}} @onChange={{action (mut category.parent_category_id)}} @options={{hash
           allowUncategorized=false
           excludeCategoryId=category.id
           none=true
-        )
-      }}
+        }} />
     </section>
   {{/if}}
 
@@ -45,7 +38,7 @@
       {{/if}}
       {{#if category.topic_url}}
         <br>
-        {{d-button class="btn-default edit-category-description" action=(action "showCategoryTopic") icon="pencil-alt" label="category.change_in_category_topic"}}
+        <DButton @class="btn-default edit-category-description" @action={{action "showCategoryTopic"}} @icon="pencil-alt" @label="category.change_in_category_topic" />
       {{/if}}
     </section>
   {{/if}}
@@ -64,16 +57,16 @@
         <section class="field">
           <span class="color-title">{{i18n "category.background_color"}}:</span>
           <div class="colorpicker-wrapper">
-            {{color-input hexValue=category.color valid=category.colorValid}}
-            {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
+            <ColorInput @hexValue={{category.color}} @valid={{category.colorValid}} />
+            <ColorPicker @colors={{backgroundColors}} @usedColors={{usedBackgroundColors}} @value={{category.color}} />
           </div>
         </section>
 
         <section class="field">
           <span class="color-title">{{i18n "category.foreground_color"}}:</span>
           <div class="colorpicker-wrapper edit-text-color">
-            {{color-input hexValue=category.text_color}}
-            {{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
+            <ColorInput @hexValue={{category.text_color}} />
+            <ColorPicker @colors={{foregroundColors}} @value={{category.text_color}} @id="edit-text-color" />
           </div>
         </section>
       </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-images.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-images.hbs
index 4b44458c03a..3e16aaca0b9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-images.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-images.hbs
@@ -1,22 +1,9 @@
 <section class="field category-logo">
   <label>{{i18n "category.logo"}}</label>
-  {{uppy-image-uploader
-    imageUrl=logoImageUrl
-    onUploadDone=(action "logoUploadDone")
-    onUploadDeleted=(action "logoUploadDeleted")
-    type="category_logo"
-    class="no-repeat contain-image"
-    id="category-logo-uploader"
-  }}
+  <UppyImageUploader @imageUrl={{logoImageUrl}} @onUploadDone={{action "logoUploadDone"}} @onUploadDeleted={{action "logoUploadDeleted"}} @type="category_logo" @class="no-repeat contain-image" @id="category-logo-uploader" />
 </section>
 
 <section class="field category-background-image">
   <label>{{i18n "category.background_image"}}</label>
-  {{uppy-image-uploader
-    imageUrl=backgroundImageUrl
-    onUploadDone=(action "backgroundUploadDone")
-    onUploadDeleted=(action "backgroundUploadDeleted")
-    type="category_background"
-    id="category-background-uploader"
-  }}
+  <UppyImageUploader @imageUrl={{backgroundImageUrl}} @onUploadDone={{action "backgroundUploadDone"}} @onUploadDeleted={{action "backgroundUploadDeleted"}} @type="category_background" @id="category-background-uploader" />
 </section>
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-security.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-security.hbs
index b538f5acbfe..d0c761cda7e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-security.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-security.hbs
@@ -18,7 +18,7 @@
         </span>
       </div>
       {{#each category.permissions as |p|}}
-        {{category-permission-row group_name=p.group_name type=p.permission_type category=category everyonePermission=everyonePermission}}
+        <CategoryPermissionRow @group_name={{p.group_name}} @type={{p.permission_type}} @category={{category}} @everyonePermission={{everyonePermission}} />
       {{/each}}
 
       {{#unless category.permissions}}
@@ -30,17 +30,9 @@
       {{#if category.availableGroups}}
         <div class="add-group">
           <span class="group-name">
-            {{combo-box
-              class="available-groups"
-              content=category.availableGroups
-              onChange=(action "onSelectGroup")
-              value=null
-              valueProperty=null
-              nameProperty=null
-              options=(hash
+            <ComboBox @class="available-groups" @content={{category.availableGroups}} @onChange={{action "onSelectGroup"}} @value={{null}} @valueProperty={{null}} @nameProperty={{null}} @options={{hash
                 none="category.security_add_group"
-              )
-            }}
+              }} />
           </span>
         </div>
       {{/if}}
@@ -52,4 +44,4 @@
   {{/unless}}
 </section>
 
-{{plugin-outlet name="category-custom-security" args=(hash category=category) tagName="section"}}
+<PluginOutlet @name="category-custom-security" @args={{hash category=category}} @tagName="section" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-settings.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-settings.hbs
index fb3a3ade063..914209b0608 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-settings.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-settings.hbs
@@ -4,7 +4,7 @@
       <label for="category-position">
         {{i18n "category.position"}}
       </label>
-      {{text-field value=category.position id="category-position" class="position-input" type="number"}}
+      <TextField @value={{category.position}} @id="category-position" @class="position-input" @type="number" />
     </section>
   {{/if}}
 
@@ -23,7 +23,7 @@
         {{i18n "category.num_featured_topics"}}
       {{/if}}
     </label>
-    {{text-field value=category.num_featured_topics id="category-number-featured-topics" type="number"}}
+    <TextField @value={{category.num_featured_topics}} @id="category-number-featured-topics" @type="number" />
   </section>
 
   <section class="field search-priority">
@@ -31,23 +31,16 @@
       {{i18n "category.search_priority.label"}}
     </label>
     <div class="controls">
-      {{combo-box
-        valueProperty="value"
-        id="category-search-priority"
-        content=searchPrioritiesOptions
-        value=category.search_priority
-        onChange=(action (mut category.search_priority))
-        options=(hash
+      <ComboBox @valueProperty="value" @id="category-search-priority" @content={{searchPrioritiesOptions}} @value={{category.search_priority}} @onChange={{action (mut category.search_priority)}} @options={{hash
           placementStrategy="absolute"
-        )
-      }}
+        }} />
     </div>
   </section>
 
   {{#if siteSettings.enable_badges}}
     <section class="field allow-badges">
       <label>
-        {{input type="checkbox" checked=category.allow_badges}}
+        <Input @type="checkbox" @checked={{category.allow_badges}} />
         {{i18n "category.allow_badges_label"}}
       </label>
     </section>
@@ -57,7 +50,7 @@
     <section class="field topic-featured-link-allowed">
       <div class="allowed-topic-featured-link-category">
         <label class="checkbox-label">
-          {{input type="checkbox" checked=category.topic_featured_link_allowed}}
+          <Input @type="checkbox" @checked={{category.topic_featured_link_allowed}} />
           {{i18n "category.topic_featured_link_allowed"}}
         </label>
       </div>
@@ -66,21 +59,21 @@
 
   <section class="field navigate-to-first-post-after-read">
     <label>
-      {{input type="checkbox" checked=category.navigate_to_first_post_after_read}}
+      <Input @type="checkbox" @checked={{category.navigate_to_first_post_after_read}} />
       {{i18n "category.navigate_to_first_post_after_read"}}
     </label>
   </section>
 
   <section class="field all-topics-wiki">
     <label>
-      {{input type="checkbox" checked=category.all_topics_wiki}}
+      <Input @type="checkbox" @checked={{category.all_topics_wiki}} />
       {{i18n "category.all_topics_wiki"}}
     </label>
   </section>
 
   <section class="field allow-unlimited-owner-edits-on-first-post">
     <label>
-      {{input type="checkbox" checked=category.allow_unlimited_owner_edits_on_first_post}}
+      <Input @type="checkbox" @checked={{category.allow_unlimited_owner_edits_on_first_post}} />
       {{i18n "category.allow_unlimited_owner_edits_on_first_post"}}
     </label>
   </section>
@@ -91,25 +84,20 @@
   {{#if siteSettings.enable_category_group_moderation}}
     <section class="field reviewable-by-group">
       <label>{{i18n "category.reviewable_by_group"}}</label>
-      {{group-selector
-        groupFinder=groupFinder
-        single="true"
-        groupNames=category.reviewable_by_group_name
-        placeholderKey="category.review_group_name"
-      }}
+      <GroupSelector @groupFinder={{groupFinder}} @single="true" @groupNames={{category.reviewable_by_group_name}} @placeholderKey="category.review_group_name" />
     </section>
   {{/if}}
 
   <section class="field require-topic-approval">
     <label>
-      {{input type="checkbox" checked=category.custom_fields.require_topic_approval}}
+      <Input @type="checkbox" @checked={{category.custom_fields.require_topic_approval}} />
       {{i18n "category.require_topic_approval"}}
     </label>
   </section>
 
   <section class="field require-reply-approval">
     <label>
-      {{input type="checkbox" checked=category.custom_fields.require_reply_approval}}
+      <Input @type="checkbox" @checked={{category.custom_fields.require_reply_approval}} />
       {{i18n "category.require_reply_approval"}}
     </label>
   </section>
@@ -120,11 +108,7 @@
         {{i18n "category.default_slow_mode"}}
       </label>
       <div class="category-default-slow-mode-seconds">
-        {{relative-time-picker
-            id="category-default-slow-mode"
-            durationMinutes=category.defaultSlowModeMinutes
-            hiddenIntervals=hiddenRelativeIntervals
-            onChange=(action "onDefaultSlowModeDurationChange")}}
+        <RelativeTimePicker @id="category-default-slow-mode" @durationMinutes={{category.defaultSlowModeMinutes}} @hiddenIntervals={{hiddenRelativeIntervals}} @onChange={{action "onDefaultSlowModeDurationChange"}} />
       </div>
     </div>
   </section>
@@ -135,14 +119,10 @@
         {{i18n "topic.auto_close.label"}}
       </label>
       <div class="category-topic-auto-close-hours">
-        {{relative-time-picker
-            id="topic-auto-close"
-            durationHours=category.auto_close_hours
-            hiddenIntervals=hiddenRelativeIntervals
-            onChange=(action "onAutoCloseDurationChange")}}
+        <RelativeTimePicker @id="topic-auto-close" @durationHours={{category.auto_close_hours}} @hiddenIntervals={{hiddenRelativeIntervals}} @onChange={{action "onAutoCloseDurationChange"}} />
       </div>
       <label>
-        {{input type="checkbox" checked=category.auto_close_based_on_last_post}}
+        <Input @type="checkbox" @checked={{category.auto_close_based_on_last_post}} />
         {{i18n "topic.auto_close.based_on_last_post"}}
       </label>
     </div>
@@ -153,7 +133,7 @@
       <label for="category-minimum-tags">
         {{i18n "category.minimum_required_tags"}}
       </label>
-      {{text-field value=category.minimum_required_tags id="category-minimum-tags" type="number" min="0"}}
+      <TextField @value={{category.minimum_required_tags}} @id="category-minimum-tags" @type="number" @min="0" />
     </section>
   {{/if}}
 
@@ -161,7 +141,7 @@
     <label for="category-number-daily-bump">
       {{i18n "category.num_auto_bump_daily"}}
     </label>
-    {{text-field value=category.custom_fields.num_auto_bump_daily id="category-number-daily-bump" type="number"}}
+    <TextField @value={{category.custom_fields.num_auto_bump_daily}} @id="category-number-daily-bump" @type="number" />
   </section>
 </section>
 
@@ -173,15 +153,9 @@
       {{i18n "category.default_view"}}
     </label>
     <div class="controls">
-      {{combo-box
-        valueProperty="value"
-        id="category-default-view"
-        content=availableViews
-        value=category.default_view
-        options=(hash
+      <ComboBox @valueProperty="value" @id="category-default-view" @content={{availableViews}} @value={{category.default_view}} @options={{hash
           placementStrategy="absolute"
-        )
-      }}
+        }} />
     </div>
   </section>
 
@@ -190,15 +164,9 @@
       {{i18n "category.default_top_period"}}
     </label>
     <div class="controls">
-      {{combo-box
-        valueProperty="value"
-        id="category-default-period"
-        content=availableTopPeriods
-        value=category.default_top_period
-        options=(hash
+      <ComboBox @valueProperty="value" @id="category-default-period" @content={{availableTopPeriods}} @value={{category.default_top_period}} @options={{hash
           placementStrategy="absolute"
-        )
-      }}
+        }} />
     </div>
   </section>
 
@@ -207,26 +175,14 @@
       {{i18n "category.sort_order"}}
     </label>
     <div class="controls">
-      {{combo-box
-        valueProperty="value"
-        content=availableSorts
-        value=category.sort_order
-        options=(hash
+      <ComboBox @valueProperty="value" @content={{availableSorts}} @value={{category.sort_order}} @options={{hash
           none="category.sort_options.default"
-        )
-        onChange=(action (mut category.sort_order))
-      }}
+        }} @onChange={{action (mut category.sort_order)}} />
       {{#unless isDefaultSortOrder}}
-        {{combo-box
-          valueProperty="value"
-          content=sortAscendingOptions
-          value=sortAscendingOption
-          options=(hash
+        <ComboBox @valueProperty="value" @content={{sortAscendingOptions}} @value={{sortAscendingOption}} @options={{hash
             none="category.sort_options.default"
             placementStrategy="absolute"
-          )
-          onChange=(action (mut category.sort_ascending))
-        }}
+          }} @onChange={{action (mut category.sort_ascending)}} />
       {{/unless}}
     </div>
   </section>
@@ -236,19 +192,14 @@
       {{i18n "category.default_list_filter"}}
     </label>
     <div class="controls">
-      {{combo-box
-        id="category-default-filter"
-        valueProperty="value"
-        content=availableListFilters
-        value=category.default_list_filter
-      }}
+      <ComboBox @id="category-default-filter" @valueProperty="value" @content={{availableListFilters}} @value={{category.default_list_filter}} />
     </div>
   </section>
 
   {{#if isParentCategory}}
     <section class="field show-subcategory-list-field">
       <label>
-        {{input type="checkbox" checked=category.show_subcategory_list}}
+        <Input @type="checkbox" @checked={{category.show_subcategory_list}} />
         {{i18n "category.show_subcategory_list"}}
       </label>
     </section>
@@ -259,28 +210,17 @@
       <label>
         {{i18n "category.subcategory_list_style"}}
       </label>
-      {{combo-box
-        valueProperty="value"
-        id="subcategory-list-style"
-        content=availableSubcategoryListStyles
-        value=category.subcategory_list_style
-        options=(hash
+      <ComboBox @valueProperty="value" @id="subcategory-list-style" @content={{availableSubcategoryListStyles}} @value={{category.subcategory_list_style}} @options={{hash
           placementStrategy="absolute"
-        )
-      }}
+        }} />
     </section>
   {{/if}}
 
   <section class="field category-read-only-banner">
     <label for="read-only-message">{{i18n "category.read_only_banner"}}</label>
-    {{text-field
-        valueProperty="value"
-        id="read-only-message"
-        value=category.read_only_banner
-        options=(hash
+    <TextField @valueProperty="value" @id="read-only-message" @value={{category.read_only_banner}} @options={{hash
         placementStrategy="absolute"
-        )
-    }}
+        }} />
   </section>
 </section>
 
@@ -293,24 +233,24 @@
         {{d-icon "far-envelope"}}
         {{i18n "category.email_in"}}
       </label>
-      {{text-field id="category-email-in" class="email-in" value=category.email_in}}
+      <TextField @id="category-email-in" @class="email-in" @value={{category.email_in}} />
     </section>
 
     <section class="field email-in-allow-strangers">
       <label>
-        {{input type="checkbox" checked=category.email_in_allow_strangers}}
+        <Input @type="checkbox" @checked={{category.email_in_allow_strangers}} />
         {{i18n "category.email_in_allow_strangers"}}
       </label>
     </section>
 
     <section class="field mailinglist-mirror">
       <label>
-        {{input type="checkbox" checked=category.mailinglist_mirror}}
+        <Input @type="checkbox" @checked={{category.mailinglist_mirror}} />
         {{i18n "category.mailinglist_mirror"}}
       </label>
     </section>
 
-    {{plugin-outlet name="category-email-in" tagName="span" connectorTagName="div" args=(hash category=category)}}
+    <PluginOutlet @name="category-email-in" @tagName="span" @connectorTagName="div" @args={{hash category=category}} />
   {{/if}}
 
   {{#unless emailInEnabled}}
@@ -321,4 +261,4 @@
   {{/unless}}
 </section>
 
-{{plugin-outlet name="category-custom-settings" args=(hash category=category) tagName="section"}}
+<PluginOutlet @name="category-custom-settings" @args={{hash category=category}} @tagName="section" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-tags.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-tags.hbs
index b093ec89e67..53ff16c71a6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-tags.hbs
@@ -1,31 +1,19 @@
 <section class="field allowed-tags">
   <label>{{i18n "category.tags_allowed_tags"}}</label>
-  {{tag-chooser
-    id="category-allowed-tags"
-    tags=category.allowed_tags
-    everyTag=true
-    excludeSynonyms=true
-    unlimitedTagCount=true
-    onChange=(action (mut category.allowed_tags))
-    options=(hash
+  <TagChooser @id="category-allowed-tags" @tags={{category.allowed_tags}} @everyTag={{true}} @excludeSynonyms={{true}} @unlimitedTagCount={{true}} @onChange={{action (mut category.allowed_tags)}} @options={{hash
       filterPlaceholder="category.tags_placeholder"
-    )
-  }}
+    }} />
 </section>
 
 <section class="field allowed-tag-groups">
   <label>{{i18n "category.tags_allowed_tag_groups"}}</label>
-  {{tag-group-chooser
-    id="category-allowed-tag-groups"
-    tagGroups=category.allowed_tag_groups
-    onChange=(action (mut category.allowed_tag_groups))
-  }}
-  {{#link-to "tagGroups" class="manage-tag-groups"}}{{i18n "category.manage_tag_groups_link"}}{{/link-to}}
+  <TagGroupChooser @id="category-allowed-tag-groups" @tagGroups={{category.allowed_tag_groups}} @onChange={{action (mut category.allowed_tag_groups)}} />
+  <LinkTo @route="tagGroups" class="manage-tag-groups">{{i18n "category.manage_tag_groups_link"}}</LinkTo>
 </section>
 
 <section class="field allow-global-tags">
   <label>
-    {{input type="checkbox" checked=category.allow_global_tags id="allow_global_tags" disabled=disableAllowGlobalTags}}
+    <Input @type="checkbox" @checked={{category.allow_global_tags}} @id="allow_global_tags" @disabled={{disableAllowGlobalTags}} />
     {{i18n "category.allow_global_tags_label"}}
   </label>
 </section>
@@ -42,26 +30,14 @@
   <section class="field-item required-tag-groups">
     {{#each category.required_tag_groups as |rtg|}}
       <div class="required-tag-group-row">
-        {{text-field value=rtg.min_count type="number" min="1"}}
-        {{tag-group-chooser
-          tagGroups=(if rtg.name (array rtg.name) (array))
-          onChange=(action "onTagGroupChange" rtg)
-          options=(hash
+        <TextField @value={{rtg.min_count}} @type="number" @min="1" />
+        <TagGroupChooser @tagGroups={{if rtg.name (array rtg.name) (array )}} @onChange={{action "onTagGroupChange" rtg}} @options={{hash
             maximum=1
             filterPlaceholder="category.required_tag_group.placeholder"
-          )
-        }}
-        {{d-button
-          label="category.required_tag_group.delete"
-          action=(action "deleteRequiredTagGroup" rtg)
-          icon="trash-alt"
-          class="delete-required-tag-group"}}
+          }} />
+        <DButton @label="category.required_tag_group.delete" @action={{action "deleteRequiredTagGroup" rtg}} @icon="trash-alt" @class="delete-required-tag-group" />
       </div>
     {{/each}}
-    {{d-button
-      label="category.required_tag_group.add"
-      action=(action "addRequiredTagGroup")
-      icon="plus"
-      class="add-required-tag-group"}}
+    <DButton @label="category.required_tag_group.add" @action={{action "addRequiredTagGroup"}} @icon="plus" @class="add-required-tag-group" />
   </section>
 </section>
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-topic-template.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-topic-template.hbs
index 955616399b4..f3b1e414ef6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-topic-template.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-topic-template.hbs
@@ -1 +1 @@
-{{d-editor value=category.topic_template showLink=showInsertLinkButton}}
+<DEditor @value={{category.topic_template}} @showLink={{showInsertLinkButton}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs
index c9d6d28ed77..48d1e020629 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-topic-timer-form.hbs
@@ -1,38 +1,23 @@
 <form>
   <div class="control-group">
-    {{combo-box
-      class="timer-type"
-      onChange=onChangeStatusType
-      content=timerTypes
-      value=statusType
-    }}
+    <ComboBox @class="timer-type" @onChange={{onChangeStatusType}} @content={{timerTypes}} @value={{statusType}} />
   </div>
   {{#if publishToCategory}}
     <div class="control-group">
       <label class="control-label">{{i18n "topic.topic_status_update.publish_to"}}</label>
-      {{category-chooser
-        value=topicTimer.category_id
-        onChange=(action (mut topicTimer.category_id))
-        options=(hash
+      <CategoryChooser @value={{topicTimer.category_id}} @onChange={{action (mut topicTimer.category_id)}} @options={{hash
           excludeCategoryId=excludeCategoryId
-        )
-      }}
+        }} />
     </div>
   {{/if}}
   {{#if showFutureDateInput}}
     <label class="control-label">{{i18n "topic.topic_status_update.when"}}</label>
-    {{time-shortcut-picker
-      timeShortcuts=timeOptions
-      prefilledDatetime=topicTimer.execute_at
-      onTimeSelected=onTimeSelected
-      hiddenOptions=hiddenTimeShortcutOptions
-      _itsatrap=_itsatrap
-    }}
+    <TimeShortcutPicker @timeShortcuts={{timeOptions}} @prefilledDatetime={{topicTimer.execute_at}} @onTimeSelected={{onTimeSelected}} @hiddenOptions={{hiddenTimeShortcutOptions}} @_itsatrap={{_itsatrap}} />
   {{/if}}
   {{#if useDuration}}
     <div class="controls">
       <label class="control-label">{{i18n "topic.topic_status_update.duration"}}</label>
-      {{relative-time-picker onChange=(action "durationChanged") durationMinutes=(readonly topicTimer.duration_minutes)}}
+      <RelativeTimePicker @onChange={{action "durationChanged"}} @durationMinutes={{readonly topicTimer.duration_minutes}} />
     </div>
   {{/if}}
   {{#if willCloseImmediately}}
@@ -43,13 +28,7 @@
   {{/if}}
   {{#if showTopicTimerInfo}}
     <div class="alert alert-info modal-topic-timer-info">
-      {{topic-timer-info
-        statusType=statusType
-        executeAt=executeAt
-        basedOnLastPost=topicTimer.based_on_last_post
-        durationMinutes=topicTimer.duration_minutes
-        categoryId=topicTimer.category_id
-      }}
+      <TopicTimerInfo @statusType={{statusType}} @executeAt={{executeAt}} @basedOnLastPost={{topicTimer.based_on_last_post}} @durationMinutes={{topicTimer.duration_minutes}} @categoryId={{topicTimer.category_id}} />
     </div>
   {{/if}}
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
index fd2a31b4854..3611e0b1c37 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
@@ -9,7 +9,7 @@
         </button>
       {{/if}}
 
-      {{emoji-group-buttons onCategorySelection=(action "onCategorySelection") tagName=""}}
+      <EmojiGroupButtons @onCategorySelection={{action "onCategorySelection"}} @tagName="" />
 
       {{#each-in customEmojis as |group emojis|}}
         <button type="button" data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
@@ -20,17 +20,7 @@
 
     <div class="emoji-picker-content">
       <div class="emoji-picker-search-container">
-        {{input
-          class="filter"
-          name="filter"
-          value=@initialFilter
-          placeholder=(i18n "emoji_picker.filter_placeholder")
-          autocomplete="off"
-          type="search"
-          autocorrect="off"
-          autocapitalize="off"
-          input=(action "onFilterChange")
-        }}
+        <Input class="filter" @name="filter" @value={{@initialFilter}} placeholder={{i18n "emoji_picker.filter_placeholder"}} @autocomplete="off" @type="search" @autocorrect="off" @autocapitalize="off" @input={{action "onFilterChange"}} />
 
         {{d-icon "search"}}
       </div>
@@ -43,7 +33,7 @@
             <div class="section recent" data-section="recent">
               <div class="section-header">
                 <span class="title">{{i18n "emoji_picker.recent"}}</span>
-                {{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
+                <DButton @icon="trash-alt" @action={{action "onClearRecents"}} @class="trash-recent" />
               </div>
               <div class="section-group">
                 {{#each recentEmojis as |emoji|}}
@@ -53,7 +43,7 @@
             </div>
           {{/if}}
 
-          {{emoji-group-sections}}
+          <EmojiGroupSections />
 
           {{#each-in customEmojis as |group emojis|}}
             <div class="section" data-section="custom-{{group}}">
@@ -83,12 +73,7 @@
 
         <div class="emoji-picker-diversity-picker">
           {{#each diversityScales as |diversityScale index|}}
-            {{d-button
-              icon=diversityScale.icon
-              class=(concat "diversity-scale " diversityScale.name)
-              title=diversityScale.title
-              action=(action "onDiversitySelection" index)
-            }}
+            <DButton @icon={{diversityScale.icon}} @class={{concat "diversity-scale " diversityScale.name}} @title={{diversityScale.title}} @action={{action "onDiversitySelection" index}} />
           {{/each}}
         </div>
       </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
index 519f95e4e29..954c26229bf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
@@ -4,13 +4,7 @@
       {{i18n "admin.emoji.name"}}
     </span>
     <div class="input">
-      {{input
-        id="emoji-name"
-        name="name"
-        placeholderKey="admin.emoji.name"
-        value=(readonly name)
-        input=(action (mut name) value="target.value")
-      }}
+      <Input @id="emoji-name" @name="name" @placeholderKey="admin.emoji.name" @value={{readonly name}} @input={{action (mut name) value="target.value"}} />
     </div>
   </div>
   <div class="control-group">
@@ -18,18 +12,9 @@
       {{i18n "admin.emoji.group"}}
     </span>
     <div class="input">
-      {{combo-box
-        name="group"
-        id="emoji-group-selector"
-        value=group
-        content=newEmojiGroups
-        onChange=(action "createEmojiGroup")
-        valueProperty=null
-        nameProperty=null
-        options=(hash
+      <ComboBox @name="group" @id="emoji-group-selector" @value={{group}} @content={{newEmojiGroups}} @onChange={{action "createEmojiGroup"}} @valueProperty={{null}} @nameProperty={{null}} @options={{hash
           allowAny=true
-        )
-      }}
+        }} />
     </div>
   </div>
   <div class="control-group">
@@ -40,7 +25,7 @@
         type="file"
         multiple="true"
         accept=".png,.gif">
-      {{d-button class="btn-primary" translatedLabel=buttonLabel icon="plus" action=(action "chooseFiles") disabled=uploading}}
+      <DButton @class="btn-primary" @translatedLabel={{buttonLabel}} @icon="plus" @action={{action "chooseFiles"}} @disabled={{uploading}} />
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/featured-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/featured-topic.hbs
index 39b208a3058..c3aa110c1bf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/featured-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/featured-topic.hbs
@@ -1,5 +1,5 @@
 {{raw "topic-status" topic=topic}}
 <a href={{topic.lastUnreadUrl}} class="title">{{html-safe topic.fancyTitle}}</a>
-{{topic-post-badges unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl}}
+<TopicPostBadges @unreadPosts={{topic.unread_posts}} @unseen={{topic.unseen}} @url={{topic.lastUnreadUrl}} />
 
 <a href={{topic.lastPostUrl}} class="last-posted-at">{{format-age topic.last_posted_at}}</a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/flag-action-type.hbs b/app/assets/javascripts/discourse/app/templates/components/flag-action-type.hbs
index 88166064c09..50299bac97b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/flag-action-type.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/flag-action-type.hbs
@@ -7,7 +7,7 @@
       <div class="flag-action-type-details">
         <span class="description">{{html-safe flag.description}}</span>
         {{#if showMessageInput}}
-          {{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}
+          <Textarea @name="message" class="flag-message" placeholder={{customPlaceholder}} @value={{message}} />
           <div class="custom-message-length {{customMessageLengthClasses}}">{{customMessageLength}}</div>
         {{/if}}
       </div>
@@ -27,7 +27,7 @@
           <div class="description">{{html-safe description}}</div>
         {{/if}}
         {{#if showMessageInput}}
-          {{textarea name="message" class="flag-message" placeholder=customPlaceholder value=message}}
+          <Textarea @name="message" class="flag-message" placeholder={{customPlaceholder}} @value={{message}} />
           <div class="custom-message-length {{customMessageLengthClasses}}">{{customMessageLength}}</div>
         {{/if}}
       </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
index 9833dd995d4..7806581c988 100644
--- a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
@@ -3,38 +3,20 @@
     <label class={{labelClasses}}>
       {{#if displayLabelIcon}}{{d-icon displayLabelIcon}}{{/if}}{{displayLabel}}
     </label>
-    {{future-date-input-selector
-      value=(readonly selection)
-      content=shortcuts
-      clearable=clearable
-      onChangeInput=onChangeInput
-      onChange=(action (mut selection))
-      options=(hash
+    <FutureDateInputSelector @value={{readonly selection}} @content={{shortcuts}} @clearable={{clearable}} @onChangeInput={{onChangeInput}} @onChange={{action (mut selection)}} @options={{hash
         none="time_shortcut.select_timeframe"
-      )
-    }}
+      }} />
   </div>
 
   {{#if displayDateAndTimePicker}}
     <div class="control-group future-date-input-date-picker">
       {{d-icon "calendar-alt"}}
-      {{date-picker-future
-        value=_date
-        defaultDate=_date
-        onSelect=(action "onChangeDate")
-      }}
+      <DatePickerFuture @value={{_date}} @defaultDate={{_date}} @onSelect={{action "onChangeDate"}} />
     </div>
 
     <div class="control-group future-date-input-time-picker">
       {{d-icon "far-clock"}}
-      {{input
-        placeholder="--:--"
-        type="time"
-        class="time-input"
-        value=_time
-        disabled=timeInputDisabled
-        input=(action "onChangeTime" value="target.value")
-      }}
+      <Input placeholder="--:--" @type="time" class="time-input" @value={{_time}} @disabled={{timeInputDisabled}} @input={{action "onChangeTime" value="target.value"}} />
     </div>
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/global-notice.hbs b/app/assets/javascripts/discourse/app/templates/components/global-notice.hbs
index efb640d1be8..ee2a817fb93 100644
--- a/app/assets/javascripts/discourse/app/templates/components/global-notice.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/global-notice.hbs
@@ -13,12 +13,7 @@
           <span class="text">{{html-safe notice.text}}</span>
 
           {{#if notice.options.dismissable}}
-            {{d-button
-              class="btn-flat close"
-              icon="times"
-              action=(action "dismissNotice")
-              actionParam=notice
-            }}
+            <DButton @class="btn-flat close" @icon="times" @action={{action "dismissNotice"}} @actionParam={{notice}} />
           {{/if}}
         </div>
       </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-activity-filter.hbs b/app/assets/javascripts/discourse/app/templates/components/group-activity-filter.hbs
index 85e3a212aea..37d2350117b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-activity-filter.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-activity-filter.hbs
@@ -1,3 +1,3 @@
-{{#link-to (concat "group.activity." filter) (query-params category_id=categoryId)}}
+<LinkTo @route={{concat "group.activity." filter}} @query={{hash category_id=categoryId}}>
   {{i18n (concat "groups." filter)}}
-{{/link-to}}
+</LinkTo>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/group-card-contents.hbs
index ef5908bf88e..7362501fd21 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-card-contents.hbs
@@ -14,12 +14,7 @@
       <div class="card-row first-row">
         <div class="group-card-avatar">
           <a href={{groupPath}} {{action "showGroup" group}} class="card-huge-avatar">
-            {{avatar-flair
-              flairName=group.name
-              flairUrl=group.flair_url
-              flairBgColor=group.flair_bg_color
-              flairColor=group.flair_color
-            }}
+            <AvatarFlair @flairName={{group.name}} @flairUrl={{group.flair_url}} @flairBgColor={{group.flair_bg_color}} @flairColor={{group.flair_color}} />
           </a>
         </div>
         <div class="names">
@@ -36,19 +31,11 @@
         </div>
         <ul class="usercard-controls group-details-button">
           <li>
-            {{group-membership-button
-               model=group
-               showLogin=(route-action "showLogin")
-             }}
+            <GroupMembershipButton @model={{group}} @showLogin={{route-action "showLogin"}} />
           </li>
           {{#if group.messageable}}
             <li>
-              {{d-button
-                action=(action "messageGroup")
-                class="btn-primary group-message-button inline"
-                icon="envelope"
-                label="groups.message"
-              }}
+              <DButton @action={{action "messageGroup"}} @class="btn-primary group-message-button inline" @icon="envelope" @label="groups.message" />
             </li>
           {{/if}}
         </ul>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-flair-inputs.hbs b/app/assets/javascripts/discourse/app/templates/components/group-flair-inputs.hbs
index 1c41852fd84..dd7bf91f0b9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-flair-inputs.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-flair-inputs.hbs
@@ -3,31 +3,20 @@
 
   <div class="radios">
     <label class="radio-label" for="avatar-flair-icon">
-      {{radio-button name="avatar-flair-icon" id="avatar-flair-icon" value="icon" selection=model.flair_type}}
+      <RadioButton @name="avatar-flair-icon" @id="avatar-flair-icon" @value="icon" @selection={{model.flair_type}} />
       <b>{{i18n "groups.flair_type.icon"}}</b>
     </label>
 
     <label class="radio-label" for="avatar-flair-image">
-      {{radio-button name="avatar-flair-image" id="avatar-flair-image" value="image" selection=model.flair_type}}
+      <RadioButton @name="avatar-flair-image" @id="avatar-flair-image" @value="image" @selection={{model.flair_type}} />
       <b>{{i18n "groups.flair_type.image"}}</b>
     </label>
   </div>
 
   {{#if flairPreviewIcon}}
-    {{icon-picker
-      name="icon"
-      value=model.flair_icon
-      options=(hash maximum=1)
-      onChange=(action (mut model.flair_icon))
-    }}
+    <IconPicker @name="icon" @value={{model.flair_icon}} @options={{hash maximum=1}} @onChange={{action (mut model.flair_icon)}} />
   {{else if flairPreviewImage}}
-    {{uppy-image-uploader
-      imageUrl=flairImageUrl
-      onUploadDone=(action "setFlairImage")
-      onUploadDeleted=(action "removeFlairImage")
-      type="group_flair"
-      id="group-flair-uploader"
-      class="no-repeat contain-image"}}
+    <UppyImageUploader @imageUrl={{flairImageUrl}} @onUploadDone={{action "setFlairImage"}} @onUploadDeleted={{action "removeFlairImage"}} @type="group_flair" @id="group-flair-uploader" @class="no-repeat contain-image" />
     <div class="control-instructions">
       {{i18n "groups.flair_upload_description"}}
     </div>
@@ -37,20 +26,14 @@
 <div class="control-group">
   <label class="control-label" for="flair_bg_color">{{i18n "groups.flair_bg_color"}}</label>
 
-  {{text-field name="flair_bg_color"
-      class="group-flair-bg-color input-xxlarge"
-      value=model.flair_bg_color
-      placeholderKey="groups.flair_bg_color_placeholder"}}
+  <TextField @name="flair_bg_color" @class="group-flair-bg-color input-xxlarge" @value={{model.flair_bg_color}} @placeholderKey="groups.flair_bg_color_placeholder" />
 </div>
 
 {{#if flairPreviewIcon}}
   <div class="control-group">
     <label class="control-label" for="flair_color">{{i18n "groups.flair_color"}}</label>
 
-    {{text-field name="flair_color"
-        class="group-flair-color input-xxlarge"
-        value=model.flair_color
-        placeholderKey="groups.flair_color_placeholder"}}
+    <TextField @name="flair_color" @class="group-flair-color input-xxlarge" @value={{model.flair_color}} @placeholderKey="groups.flair_color_placeholder" />
   </div>
 {{/if}}
 
@@ -63,12 +46,7 @@
     </div>
 
     {{#if (or model.flair_icon flairImageUrl model.flairBackgroundHexColor)}}
-      {{avatar-flair
-        flairName=model.name
-        flairUrl=(if flairPreviewIcon model.flair_icon (if flairPreviewImage flairImageUrl ""))
-        flairBgColor=model.flairBackgroundHexColor
-        flairColor=model.flairHexColor
-      }}
+      <AvatarFlair @flairName={{model.name}} @flairUrl={{if flairPreviewIcon model.flair_icon (if flairPreviewImage flairImageUrl "")}} @flairBgColor={{model.flairBackgroundHexColor}} @flairColor={{model.flairHexColor}} />
     {{/if}}
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-imap-email-settings.hbs b/app/assets/javascripts/discourse/app/templates/components/group-imap-email-settings.hbs
index 9b66d8079fd..37a71945038 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-imap-email-settings.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-imap-email-settings.hbs
@@ -3,11 +3,11 @@
     <div>
       <div class="control-group">
         <label for="imap_server">{{i18n "groups.manage.email.credentials.imap_server"}}</label>
-        {{input type="text" name="imap_server" value=form.imap_server tabindex="8" onChange=(action "resetSettingsValid")}}
+        <Input @type="text" @name="imap_server" @value={{form.imap_server}} @tabindex="8" @onChange={{action "resetSettingsValid"}} />
       </div>
 
       <label for="enable_ssl_imap">
-        {{input type="checkbox" checked=form.imap_ssl id="enable_ssl_imap" tabindex="11" onChange=(action "resetSettingsValid")}}
+        <Input @type="checkbox" @checked={{form.imap_ssl}} @id="enable_ssl_imap" @tabindex="11" @onChange={{action "resetSettingsValid"}} />
         {{i18n "groups.manage.email.credentials.imap_ssl"}}
       </label>
     </div>
@@ -15,7 +15,7 @@
     <div>
       <div class="control-group">
         <label for="imap_port">{{i18n "groups.manage.email.credentials.imap_port"}}</label>
-        {{input type="text" name="imap_port" value=form.imap_port tabindex="9" onChange=(action "resetSettingsValid" form.imap_port)}}
+        <Input @type="text" @name="imap_port" @value={{form.imap_port}} @tabindex="9" @onChange={{action "resetSettingsValid" form.imap_port}} />
       </div>
     </div>
 
@@ -23,17 +23,9 @@
       <div class="control-group group-imap-mailboxes">
         {{#if mailboxes}}
           <label for="imap_mailbox_name">{{i18n "groups.manage.email.mailboxes.synchronized"}}</label>
-          {{combo-box name="imap_mailbox_name"
-            id="imap_mailbox"
-            value=group.imap_mailbox_name
-            valueProperty="value"
-            content=mailboxes
-            tabindex="10"
-            onChange=(action (mut group.imap_mailbox_name))
-            options=(hash
+          <ComboBox @name="imap_mailbox_name" @id="imap_mailbox" @value={{group.imap_mailbox_name}} @valueProperty="value" @content={{mailboxes}} @tabindex="10" @onChange={{action (mut group.imap_mailbox_name)}} @options={{hash
               none="groups.manage.email.mailboxes.disabled"
-            )
-          }}
+            }} />
         {{/if}}
       </div>
 
@@ -53,17 +45,9 @@
   {{/unless}}
 
   <div class="control-group buttons">
-    {{d-button
-      disabled=(or missingSettings testingSettings)
-      class="btn-primary test-imap-settings"
-      action=(action "testImapSettings")
-      icon="cog"
-      label="groups.manage.email.test_settings"
-      tabindex="12"
-      title="groups.manage.email.settings_required"
-    }}
+    <DButton @disabled={{or missingSettings testingSettings}} @class="btn-primary test-imap-settings" @action={{action "testImapSettings"}} @icon="cog" @label="groups.manage.email.test_settings" @tabindex="12" @title="groups.manage.email.settings_required" />
 
-    {{conditional-loading-spinner size="small" condition=testingSettings}}
+    <ConditionalLoadingSpinner @size="small" @condition={{testingSettings}} />
 
     {{#if imapSettingsValid}}
       <span class="imap-settings-ok">
@@ -76,7 +60,7 @@
     <div class="group-email-last-updated-details for-imap">
       <small>
         {{i18n "groups.manage.email.last_updated"}} <strong>{{format-date group.imap_updated_at leaveAgo="true"}}</strong>
-        {{i18n "groups.manage.email.last_updated_by"}} {{#link-to "user" group.imap_updated_by.username}}{{group.imap_updated_by.username}}{{/link-to}}
+        {{i18n "groups.manage.email.last_updated_by"}} <LinkTo @route="user" @model={{group.imap_updated_by.username}}>{{group.imap_updated_by.username}}</LinkTo>
       </small>
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-manage-email-settings.hbs b/app/assets/javascripts/discourse/app/templates/components/group-manage-email-settings.hbs
index 7c8080f79d2..da3eb7575b5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-manage-email-settings.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-manage-email-settings.hbs
@@ -3,12 +3,12 @@
   <p>{{i18n "groups.manage.email.smtp_instructions"}}</p>
 
   <label for="enable_smtp">
-    {{input type="checkbox" checked=group.smtp_enabled id="enable_smtp" change=(action "smtpEnabledChange") tabindex="1"}}
+    <Input @type="checkbox" @checked={{group.smtp_enabled}} @id="enable_smtp" @change={{action "smtpEnabledChange"}} @tabindex="1" />
     {{i18n "groups.manage.email.enable_smtp"}}
   </label>
 
   {{#if group.smtp_enabled}}
-    {{group-smtp-email-settings group=group smtpSettingsValid=smtpSettingsValid}}
+    <GroupSmtpEmailSettings @group={{group}} @smtpSettingsValid={{smtpSettingsValid}} />
   {{/if}}
 
   {{#if siteSettings.enable_imap}}
@@ -23,12 +23,12 @@
       <div class="alert alert-warning">{{i18n "groups.manage.email.imap_alpha_warning"}}</div>
 
       <label for="enable_imap">
-        {{input type="checkbox" disabled=(not enableImapSettings) checked=group.imap_enabled id="enable_imap" change=(action "imapEnabledChange") tabindex="8"}}
+        <Input @type="checkbox" @disabled={{not enableImapSettings}} @checked={{group.imap_enabled}} @id="enable_imap" @change={{action "imapEnabledChange"}} @tabindex="8" />
         {{i18n "groups.manage.email.enable_imap"}}
       </label>
 
       {{#if group.imap_enabled}}
-        {{group-imap-email-settings group=group imapSettingsValid=imapSettingsValid}}
+        <GroupImapEmailSettings @group={{group}} @imapSettingsValid={{imapSettingsValid}} />
       {{/if}}
     </div>
   {{/if}}
@@ -37,7 +37,7 @@
     <div class="control-group">
       <h3>{{i18n "groups.manage.email.imap_additional_settings"}}</h3>
       <label class="control-group-inline" for="allow_unknown_sender_topic_replies">
-        {{input type="checkbox" name="allow_unknown_sender_topic_replies" id="allow_unknown_sender_topic_replies" checked=group.allow_unknown_sender_topic_replies tabindex="13"}}
+        <Input @type="checkbox" @name="allow_unknown_sender_topic_replies" @id="allow_unknown_sender_topic_replies" @checked={{group.allow_unknown_sender_topic_replies}} @tabindex="13" />
         <span>{{i18n "groups.manage.email.settings.allow_unknown_sender_topic_replies"}}</span>
       </label>
       <p>{{i18n "groups.manage.email.settings.allow_unknown_sender_topic_replies_hint"}}</p>
@@ -45,5 +45,5 @@
   </div>
 
   <br>
-  {{group-manage-save-button model=group disabled=(not emailSettingsValid) beforeSave=beforeSave afterSave=afterSave tabindex="15"}}
+  <GroupManageSaveButton @model={{group}} @disabled={{not emailSettingsValid}} @beforeSave={{beforeSave}} @afterSave={{afterSave}} @tabindex="15" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-filter.hbs b/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-filter.hbs
index d439d39c87f..9a170d76253 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-filter.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-filter.hbs
@@ -1,3 +1,3 @@
 {{#if value}}
-  {{d-button class="btn-default group-manage-logs-filter" action=(action "clearFilter") actionParam=type icon="times-circle" translatedLabel=(concat label ": " filterText)}}
+  <DButton @class="btn-default group-manage-logs-filter" @action={{action "clearFilter"}} @actionParam={{type}} @icon="times-circle" @translatedLabel={{concat label ": " filterText}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-row.hbs b/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-row.hbs
index 79466b9d98b..10bb4abeedf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-manage-logs-row.hbs
@@ -1,23 +1,23 @@
 <tr class="group-manage-logs-row">
   <td>
-    {{d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.action key="action") translatedLabel=log.actionTitle}}
+    <DButton @class="btn-default" @action={{action "filter"}} @actionParam={{hash value=log.action key="action"}} @translatedLabel={{log.actionTitle}} />
   </td>
 
   <td>
     <span>{{avatar log.acting_user imageSize="tiny"}}</span>
-    {{d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.acting_user.username key="acting_user") translatedLabel=log.acting_user.username}}
+    <DButton @class="btn-default" @action={{action "filter"}} @actionParam={{hash value=log.acting_user.username key="acting_user"}} @translatedLabel={{log.acting_user.username}} />
   </td>
 
   <td>
     {{#if log.target_user}}
       <span>{{avatar log.target_user imageSize="tiny"}}</span>
-      {{d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.target_user.username key="target_user") translatedLabel=log.target_user.username}}
+      <DButton @class="btn-default" @action={{action "filter"}} @actionParam={{hash value=log.target_user.username key="target_user"}} @translatedLabel={{log.target_user.username}} />
     {{/if}}
   </td>
 
   <td>
     {{#if log.subject}}
-      {{d-button class="btn-default" action=(action "filter") actionParam=(hash value=log.subject key="subject") translatedLabel=log.subject}}
+      <DButton @class="btn-default" @action={{action "filter"}} @actionParam={{hash value=log.subject key="subject"}} @translatedLabel={{log.subject}} />
     {{/if}}
   </td>
 
@@ -25,10 +25,7 @@
 
   <td class="group-manage-logs-expand-details">
     {{#if log.prev_value}}
-      {{d-button
-        action=(action "toggleDetails")
-        icon=(if expandDetails "angle-up" "angle-down")
-      }}
+      <DButton @action={{action "toggleDetails"}} @icon={{if expandDetails "angle-up" "angle-down"}} />
     {{/if}}
   </td>
 </tr>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-manage-save-button.hbs b/app/assets/javascripts/discourse/app/templates/components/group-manage-save-button.hbs
index d4b358d00f6..91811e174e5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-manage-save-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-manage-save-button.hbs
@@ -1,9 +1,5 @@
 <div class="control-group buttons group-manage-save-button">
-  {{d-button action=(action "save")
-    disabled=(or disabled saving)
-    class="btn btn-primary group-manage-save"
-    translatedLabel=savingText
-  }}
+  <DButton @action={{action "save"}} @disabled={{or disabled saving}} @class="btn btn-primary group-manage-save" @translatedLabel={{savingText}} />
   {{#if saved}}
     <span>{{i18n "saved"}}</span>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-membership-button.hbs b/app/assets/javascripts/discourse/app/templates/components/group-membership-button.hbs
index 8f2b8353fed..de3ca9640b0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-membership-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-membership-button.hbs
@@ -1,21 +1,9 @@
 {{#if canJoinGroup}}
-  {{d-button action=(action "joinGroup")
-      class="btn-default group-index-join"
-      icon="user-plus"
-      label="groups.join"
-      disabled=updatingMembership}}
+  <DButton @action={{action "joinGroup"}} @class="btn-default group-index-join" @icon="user-plus" @label="groups.join" @disabled={{updatingMembership}} />
 {{else if canLeaveGroup}}
-  {{d-button action=(action "leaveGroup")
-      class="btn-danger group-index-leave"
-      icon="user-times"
-      label="groups.leave"
-      disabled=updatingMembership}}
+  <DButton @action={{action "leaveGroup"}} @class="btn-danger group-index-leave" @icon="user-times" @label="groups.leave" @disabled={{updatingMembership}} />
 {{else if canRequestMembership}}
-  {{d-button action=(action "showRequestMembershipForm")
-      class="btn-default group-index-request"
-      disabled=loading
-      icon="user-plus"
-      label="groups.request"}}
+  <DButton @action={{action "showRequestMembershipForm"}} @class="btn-default group-index-request" @disabled={{loading}} @icon="user-plus" @label="groups.request" />
 {{else}}
   {{yield}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/group-navigation.hbs
index e470f65e988..79554bfc17a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-navigation.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-navigation.hbs
@@ -1,27 +1,24 @@
-{{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
+<MobileNav @class="group-nav" @desktopClass="nav nav-pills">
   {{#if site.mobileView}}
     <li>
-      {{#link-to "groups.index"}}
+      <LinkTo @route="groups.index">
         {{i18n "groups.index.all"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{else}}
     <li>
-      {{group-dropdown
-        groups=group.extras.visible_group_names
-        value=group.name
-      }}
+      <GroupDropdown @groups={{group.extras.visible_group_names}} @value={{group.name}} />
     </li>
   {{/if}}
 
   {{#each tabs as |tab|}}
     <li>
-      {{#link-to tab.route group title=tab.message class=tab.name}}
+      <LinkTo @route={{tab.route}} @model={{group}} @title={{tab.message}} class={{tab.name}}>
         {{#if tab.icon}}{{d-icon tab.icon}}{{/if}}
         {{tab.message}}
         {{#if tab.count}}<span class="count">({{tab.count}})</span>{{/if}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
-  {{plugin-outlet name="group-reports-nav-item" args=(hash group=group) connectorTagName="li"}}
-{{/mobile-nav}}
+  <PluginOutlet @name="group-reports-nav-item" @args={{hash group=group}} @connectorTagName="li" />
+</MobileNav>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-post.hbs b/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
index d6c2e6ba599..1677c710167 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
@@ -3,7 +3,7 @@
     {{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
   </a>
   <span class="time">{{format-date post.created_at leaveAgo="true"}}</span>
-  {{expand-post item=post}}
+  <ExpandPost @item={{post}} />
 
   <div class="stream-topic-details">
     <div class="stream-topic-title">
@@ -16,7 +16,7 @@
       <div class="group-member-info names">
         <span class="name">{{name}}</span>
         {{#if post.user.title}}<span class="user-title">{{post.user.title}}</span>{{/if}}
-        {{plugin-outlet name="group-post-additional-member-info" args=(hash user=post.user)}}
+        <PluginOutlet @name="group-post-additional-member-info" @args={{hash user=post.user}} />
       </div>
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-smtp-email-settings.hbs b/app/assets/javascripts/discourse/app/templates/components/group-smtp-email-settings.hbs
index 525b66091b1..973ad8a3384 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-smtp-email-settings.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-smtp-email-settings.hbs
@@ -3,16 +3,16 @@
     <div>
       <div class="control-group">
         <label for="username">{{i18n "groups.manage.email.credentials.username"}}</label>
-        {{input type="text" name="username" value=form.email_username tabindex="1" onChange=(action "resetSettingsValid")}}
+        <Input @type="text" @name="username" @value={{form.email_username}} @tabindex="1" @onChange={{action "resetSettingsValid"}} />
       </div>
 
       <div class="control-group">
         <label for="smtp_server">{{i18n "groups.manage.email.credentials.smtp_server"}}</label>
-        {{input type="text" name="smtp_server" value=form.smtp_server tabindex="4" onChange=(action "resetSettingsValid")}}
+        <Input @type="text" @name="smtp_server" @value={{form.smtp_server}} @tabindex="4" @onChange={{action "resetSettingsValid"}} />
       </div>
 
       <label for="enable_ssl">
-        {{input type="checkbox" checked=form.smtp_ssl id="enable_ssl" tabindex="6" onChange=(action "resetSettingsValid")}}
+        <Input @type="checkbox" @checked={{form.smtp_ssl}} @id="enable_ssl" @tabindex="6" @onChange={{action "resetSettingsValid"}} />
         {{i18n "groups.manage.email.credentials.smtp_ssl"}}
       </label>
     </div>
@@ -20,19 +20,19 @@
     <div>
       <div class="control-group">
         <label for="password">{{i18n "groups.manage.email.credentials.password"}}</label>
-        {{input type="password" name="password" value=form.email_password tabindex="2" onChange=(action "resetSettingsValid")}}
+        <Input @type="password" @name="password" @value={{form.email_password}} @tabindex="2" @onChange={{action "resetSettingsValid"}} />
       </div>
 
       <div class="control-group">
         <label for="smtp_port">{{i18n "groups.manage.email.credentials.smtp_port"}}</label>
-        {{input type="text" name="smtp_port" value=form.smtp_port tabindex="5" onChange=(action "resetSettingsValid" form.smtp_port)}}
+        <Input @type="text" @name="smtp_port" @value={{form.smtp_port}} @tabindex="5" @onChange={{action "resetSettingsValid" form.smtp_port}} />
       </div>
     </div>
 
     <div>
       <div class="control-group">
         <label for="from_alias">{{i18n "groups.manage.email.settings.from_alias"}}</label>
-        {{input type="text" name="from_alias" id="from_alias" value=form.email_from_alias onChange=(action "resetSettingsValid") tabindex="3"}}
+        <Input @type="text" @name="from_alias" @id="from_alias" @value={{form.email_from_alias}} @onChange={{action "resetSettingsValid"}} @tabindex="3" />
         <p>{{i18n "groups.manage.email.settings.from_alias_hint"}}</p>
       </div>
     </div>
@@ -45,17 +45,9 @@
   </div>
 
   <div class="control-group buttons">
-    {{d-button
-    disabled=(or missingSettings testingSettings)
-    class="btn-primary test-smtp-settings"
-    action=(action "testSmtpSettings")
-    icon="cog"
-    label="groups.manage.email.test_settings"
-    tabindex="7"
-    title="groups.manage.email.settings_required"
-    }}
+    <DButton @disabled={{or missingSettings testingSettings}} @class="btn-primary test-smtp-settings" @action={{action "testSmtpSettings"}} @icon="cog" @label="groups.manage.email.test_settings" @tabindex="7" @title="groups.manage.email.settings_required" />
 
-    {{conditional-loading-spinner size="small" condition=testingSettings}}
+    <ConditionalLoadingSpinner @size="small" @condition={{testingSettings}} />
 
     {{#if smtpSettingsValid}}
       <span class="smtp-settings-ok">
@@ -68,7 +60,7 @@
     <div class="group-email-last-updated-details for-smtp">
       <small>
         {{i18n "groups.manage.email.last_updated"}} <strong>{{format-date group.smtp_updated_at leaveAgo="true"}}</strong>
-        {{i18n "groups.manage.email.last_updated_by"}} {{#link-to "user" group.smtp_updated_by.username}}{{group.smtp_updated_by.username}}{{/link-to}}
+        {{i18n "groups.manage.email.last_updated_by"}} <LinkTo @route="user" @model={{group.smtp_updated_by.username}}>{{group.smtp_updated_by.username}}</LinkTo>
       </small>
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/groups-form-interaction-fields.hbs b/app/assets/javascripts/discourse/app/templates/components/groups-form-interaction-fields.hbs
index 63a5fe3c59e..714141bbb12 100644
--- a/app/assets/javascripts/discourse/app/templates/components/groups-form-interaction-fields.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/groups-form-interaction-fields.hbs
@@ -3,17 +3,9 @@
     <label class="control-label">{{i18n "admin.groups.manage.interaction.visibility"}}</label>
     <label for="visiblity">{{i18n "admin.groups.manage.interaction.visibility_levels.title"}}</label>
 
-    {{combo-box
-      name="alias"
-      valueProperty="value"
-      value=model.visibility_level
-      content=visibilityLevelOptions
-      class="groups-form-visibility-level"
-      onChange=(action (mut model.visibility_level))
-      options=(hash
+    <ComboBox @name="alias" @valueProperty="value" @value={{model.visibility_level}} @content={{visibilityLevelOptions}} @class="groups-form-visibility-level" @onChange={{action (mut model.visibility_level)}} @options={{hash
         castInteger=true
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "admin.groups.manage.interaction.visibility_levels.description"}}
@@ -23,13 +15,7 @@
   <div class="control-group">
     <label for="visiblity">{{i18n "admin.groups.manage.interaction.members_visibility_levels.title"}}</label>
 
-    {{combo-box name="alias"
-      valueProperty="value"
-      value=membersVisibilityLevel
-      content=visibilityLevelOptions
-      class="groups-form-members-visibility-level"
-      onChange=(action (mut model.members_visibility_level))
-    }}
+    <ComboBox @name="alias" @valueProperty="value" @value={{membersVisibilityLevel}} @content={{visibilityLevelOptions}} @class="groups-form-members-visibility-level" @onChange={{action (mut model.members_visibility_level)}} />
 
     {{#if membersVisibilityPrivate}}
       <div class="control-instructions">
@@ -43,35 +29,19 @@
   <label class="control-label">{{i18n "groups.manage.interaction.posting"}}</label>
   <label for="alias">{{i18n "groups.alias_levels.mentionable"}}</label>
 
-  {{combo-box
-    name="alias"
-    valueProperty="value"
-    value=mentionableLevel
-    content=aliasLevelOptions
-    class="groups-form-mentionable-level"
-    onChange=(action (mut model.mentionable_level))
-  }}
+  <ComboBox @name="alias" @valueProperty="value" @value={{mentionableLevel}} @content={{aliasLevelOptions}} @class="groups-form-mentionable-level" @onChange={{action (mut model.mentionable_level)}} />
 </div>
 
 <div class="control-group">
   <label for="alias">{{i18n "groups.alias_levels.messageable"}}</label>
 
-  {{combo-box
-    name="alias"
-    valueProperty="value"
-    value=messageableLevel
-    content=aliasLevelOptions
-    class="groups-form-messageable-level"
-    onChange=(action (mut model.messageable_level))
-  }}
+  <ComboBox @name="alias" @valueProperty="value" @value={{messageableLevel}} @content={{aliasLevelOptions}} @class="groups-form-messageable-level" @onChange={{action (mut model.messageable_level)}} />
 </div>
 
 {{#if canAdminGroup}}
   <div class="control-group">
     <label>
-      {{input type="checkbox"
-            checked=model.publish_read_state
-            class="groups-form-publish-read-state"}}
+      <Input @type="checkbox" @checked={{model.publish_read_state}} class="groups-form-publish-read-state" />
 
       {{i18n "admin.groups.manage.interaction.publish_read_state"}}
     </label>
@@ -83,12 +53,9 @@
     <label class="control-label">{{i18n "admin.groups.manage.interaction.email"}}</label>
     <label for="incoming_email">{{i18n "admin.groups.manage.interaction.incoming_email"}}</label>
 
-    {{text-field name="incoming_email"
-        class="input-xxlarge groups-form-incoming-email"
-        value=model.incoming_email
-        placeholderKey="admin.groups.manage.interaction.incoming_email_placeholder"}}
+    <TextField @name="incoming_email" @class="input-xxlarge groups-form-incoming-email" @value={{model.incoming_email}} @placeholderKey="admin.groups.manage.interaction.incoming_email_placeholder" />
 
-    {{plugin-outlet name="group-email-in" tagName="span" connectorTagName="div" args=(hash model=model)}}
+    <PluginOutlet @name="group-email-in" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
   </div>
 {{/if}}
 
@@ -97,14 +64,9 @@
 <div class="control-group">
   <label>{{i18n "groups.notification_level"}}</label>
 
-  {{notifications-button
-    value=defaultNotificationLevel
-    class="groups-form-default-notification-level"
-    options=(hash
+  <NotificationsButton @value={{defaultNotificationLevel}} @class="groups-form-default-notification-level" @options={{hash
       i18nPrefix="groups.notifications"
-    )
-    onChange=(action (mut model.default_notification_level))
-  }}
+    }} @onChange={{action (mut model.default_notification_level)}} />
 </div>
 
-{{plugin-outlet name="groups-interaction-custom-options" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="groups-interaction-custom-options" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/groups-form-membership-fields.hbs b/app/assets/javascripts/discourse/app/templates/components/groups-form-membership-fields.hbs
index 96bca40f8f3..c64741ae1a3 100644
--- a/app/assets/javascripts/discourse/app/templates/components/groups-form-membership-fields.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/groups-form-membership-fields.hbs
@@ -2,27 +2,19 @@
   <label class="control-label">{{i18n "groups.manage.membership.access"}}</label>
 
   <label>
-    {{input type="checkbox"
-        class="group-form-public-admission"
-        checked=model.public_admission
-        disabled=disablePublicSetting}}
+    <Input @type="checkbox" class="group-form-public-admission" @checked={{model.public_admission}} @disabled={{disablePublicSetting}} />
 
     {{i18n "groups.public_admission"}}
   </label>
 
   <label>
-    {{input type="checkbox"
-        class="group-form-public-exit"
-        checked=model.public_exit}}
+    <Input @type="checkbox" class="group-form-public-exit" @checked={{model.public_exit}} />
 
     {{i18n "groups.public_exit"}}
   </label>
 
   <label>
-    {{input type="checkbox"
-        class="group-form-allow-membership-requests"
-        checked=model.allow_membership_requests
-        disabled=disableMembershipRequestSetting}}
+    <Input @type="checkbox" class="group-form-allow-membership-requests" @checked={{model.allow_membership_requests}} @disabled={{disableMembershipRequestSetting}} />
 
     {{i18n "groups.allow_membership_requests"}}
   </label>
@@ -33,9 +25,7 @@
         {{i18n "groups.membership_request_template"}}
       </label>
 
-      {{expanding-text-area name="membership-request-template"
-          class="group-form-membership-request-template input-xxlarge"
-          value=model.membership_request_template}}
+      <ExpandingTextArea @name="membership-request-template" @class="group-form-membership-request-template input-xxlarge" @value={{model.membership_request_template}} />
     </div>
   {{/if}}
 </div>
@@ -48,55 +38,26 @@
       {{i18n "admin.groups.manage.membership.automatic_membership_email_domains"}}
     </label>
 
-    {{list-setting
-      name="automatic_membership"
-      class="group-form-automatic-membership-automatic"
-      value=emailDomains
-      choices=emailDomains
-      settingName="name"
-      nameProperty=null
-      valueProperty=null
-      onChange=(action "onChangeEmailDomainsSetting")
-      options=(hash allowAny=true)
-    }}
+    <ListSetting @name="automatic_membership" @class="group-form-automatic-membership-automatic" @value={{emailDomains}} @choices={{emailDomains}} @settingName="name" @nameProperty={{null}} @valueProperty={{null}} @onChange={{action "onChangeEmailDomainsSetting"}} @options={{hash allowAny=true}} />
 
     {{#if showAssociatedGroups}}
       <label for="automatic_membership_associated_groups">
         {{i18n "admin.groups.manage.membership.automatic_membership_associated_groups"}}
       </label>
 
-      {{list-setting
-        name="automatic_membership_associated_groups"
-        class="group-form-automatic-membership-associated-groups"
-        value=model.associatedGroupIds
-        choices=associatedGroups
-        settingName="name"
-        nameProperty="label"
-        valueProperty="id"
-        onChange=(action (mut model.associated_group_ids))
-      }}
+      <ListSetting @name="automatic_membership_associated_groups" @class="group-form-automatic-membership-associated-groups" @value={{model.associatedGroupIds}} @choices={{associatedGroups}} @settingName="name" @nameProperty="label" @valueProperty="id" @onChange={{action (mut model.associated_group_ids)}} />
     {{/if}}
   </div>
 
-  {{plugin-outlet name="groups-form-membership-below-automatic" tagName="span" connectorTagName="div"
-                  args=(hash model=model)}}
+  <PluginOutlet @name="groups-form-membership-below-automatic" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
   <div class="control-group">
     <label class="control-label">{{i18n "admin.groups.manage.membership.effects"}}</label>
     <label for="grant_trust_level">{{i18n "admin.groups.manage.membership.trust_levels_title"}}</label>
 
-    {{combo-box
-      name="grant_trust_level"
-      valueProperty="value"
-      value=groupTrustLevel
-      content=trustLevelOptions
-      class="groups-form-grant-trust-level"
-      onChange=(action (mut model.grant_trust_level))
-    }}
+    <ComboBox @name="grant_trust_level" @valueProperty="value" @value={{groupTrustLevel}} @content={{trustLevelOptions}} @class="groups-form-grant-trust-level" @onChange={{action (mut model.grant_trust_level)}} />
     <label>
-      {{input type="checkbox"
-          checked=model.primary_group
-          class="groups-form-primary-group"}}
+      <Input @type="checkbox" @checked={{model.primary_group}} class="groups-form-primary-group" />
 
       {{i18n "admin.groups.manage.membership.primary_group"}}
     </label>
@@ -107,7 +68,7 @@
       {{i18n "admin.groups.default_title"}}
     </label>
 
-    {{input value=model.title name="title" class="input-xxlarge"}}
+    <Input @value={{model.title}} @name="title" class="input-xxlarge" />
 
     <div class="control-instructions">
       {{i18n "admin.groups.default_title_description"}}
@@ -117,6 +78,6 @@
 
 {{#if canEdit}}
   <div class="control-group">
-    {{group-flair-inputs model=model}}
+    <GroupFlairInputs @model={{model}} />
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs b/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs
index 2690f13f04a..92cca84c253 100644
--- a/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/groups-form-profile-fields.hbs
@@ -3,37 +3,32 @@
     <div class="control-group">
       <label class="control-label" for="name">{{i18n "groups.name"}}</label>
 
-      {{text-field name="name"
-          class="input-xxlarge group-form-name"
-          value=nameInput
-          placeholderKey="admin.groups.name_placeholder"}}
+      <TextField @name="name" @class="input-xxlarge group-form-name" @value={{nameInput}} @placeholderKey="admin.groups.name_placeholder" />
 
-      {{input-tip validation=nameValidation}}
+      <InputTip @validation={{nameValidation}} />
     </div>
   {{/if}}
 
   <div class="control-group">
     <label class="control-label" for="full_name">{{i18n "groups.manage.full_name"}}</label>
 
-    {{text-field name="full_name"
-        class="input-xxlarge group-form-full-name"
-        value=model.full_name}}
+    <TextField @name="full_name" @class="input-xxlarge group-form-full-name" @value={{model.full_name}} />
   </div>
 {{/if}}
 
 <div class="control-group">
   <label class="control-label" for="bio">{{i18n "groups.bio"}}</label>
-  {{d-editor value=model.bio_raw class="group-form-bio input-xxlarge"}}
+  <DEditor @value={{model.bio_raw}} @class="group-form-bio input-xxlarge" />
 </div>
 
 {{#if model.automatic}}
   <div class="control-group">
-    {{group-flair-inputs model=model}}
+    <GroupFlairInputs @model={{model}} />
   </div>
 {{/if}}
 
 {{#if canEdit}}
   {{yield}}
 
-  {{plugin-outlet name="group-edit" tagName="span" connectorTagName="div" args=(hash group=model)}}
+  <PluginOutlet @name="group-edit" @tagName="span" @connectorTagName="div" @args={{hash group=model}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs b/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs
index b7dc645453a..02ed8af4802 100644
--- a/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs
@@ -1,8 +1,5 @@
 {{#unless expanded}}
-  {{d-button
-    action=(action "expand")
-    class="btn-link"
-    label=label}}
+  <DButton @action={{action "expand"}} @class="btn-link" @label={{label}} />
 {{/unless}}
 {{#if expanded}}
   <span class="description" aria-live="assertive">{{details}}</span>
diff --git a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list-item.hbs b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list-item.hbs
index eb85b541cde..c079068765d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list-item.hbs
@@ -1,4 +1,4 @@
 <div class="ignored-user-list-item">
   <span class="ignored-user-name">{{item}}</span>
-  {{d-button class="remove-ignored-user no-text btn-icon" action=(action "removeIgnoredUser" item) icon="times"}}
+  <DButton @class="remove-ignored-user no-text btn-icon" @action={{action "removeIgnoredUser" item}} @icon="times" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs
index 44f88763eca..d8f9eeec0f9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs
@@ -1,9 +1,9 @@
 <div class="ignored-list">
   {{#each items as |item|}}
-    {{ignored-user-list-item item=item onRemoveIgnoredUser=(action "removeIgnoredUser")}}
+    <IgnoredUserListItem @item={{item}} @onRemoveIgnoredUser={{action "removeIgnoredUser"}} />
   {{else}}
     {{i18n "user.user_notifications.ignore_no_users"}}
   {{/each}}
 </div>
 <div class="instructions">{{i18n "user.ignored_users_instructions"}}</div>
-<div>{{d-button action=(action "newIgnoredUser") class="btn-default" icon="plus" label="user.user_notifications.add_ignored_user"}}</div>
+<div><DButton @action={{action "newIgnoredUser"}} @class="btn-default" @icon="plus" @label="user.user_notifications.add_ignored_user" /></div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs
index f78860493dc..934e8adc94e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs
@@ -7,7 +7,7 @@
 <div class="body">
   {{#if inviteModel.finished}}
     {{#if inviteModel.inviteLink}}
-      {{generated-invite-link link=inviteModel.inviteLink email=invitee}}
+      <GeneratedInviteLink @link={{inviteModel.inviteLink}} @email={{invitee}} />
     {{else}}
       <div class="success-message">
         {{html-safe successMessage}}
@@ -18,31 +18,19 @@
       <label class="instructions">{{inviteInstructions}}</label>
       <div class="invite-user-input-wrapper">
         {{#if allowExistingMembers}}
-          {{email-group-user-chooser
-            class="invite-user-input"
-            value=invitee
-            onChange=(action "updateInvitee")
-            options=(hash
+          <EmailGroupUserChooser @class="invite-user-input" @value={{invitee}} @onChange={{action "updateInvitee"}} @options={{hash
               maximum=1
               allowEmails=canInviteViaEmail
               excludeCurrentUser=true
               includeMessageableGroups=isPM
               filterPlaceholder=placeholderKey
               fullWidthWrap=true
-            )
-          }}
+            }} />
         {{else}}
-          {{text-field
-            class="email-or-username-input"
-            value=invitee
-            placeholderKey="topic.invite_reply.email_placeholder"}}
+          <TextField @class="email-or-username-input" @value={{invitee}} @placeholderKey="topic.invite_reply.email_placeholder" />
         {{/if}}
         {{#if capabilities.hasContactPicker}}
-          {{d-button
-            icon="address-book"
-            action=(action "searchContact")
-            class="btn-primary open-contact-picker"
-          }}
+          <DButton @icon="address-book" @action={{action "searchContact"}} @class="btn-primary open-contact-picker" />
         {{/if}}
       </div>
     </div>
@@ -52,25 +40,17 @@
         <label class="instructions {{showGroupsClass}}">
           {{i18n "topic.automatically_add_to_groups"}}
         </label>
-        {{group-chooser
-          content=allGroups
-          value=groupIds
-          labelProperty="name"
-          onChange=(action (mut groupIds))
-        }}
+        <GroupChooser @content={{allGroups}} @value={{groupIds}} @labelProperty="name" @onChange={{action (mut groupIds)}} />
       </div>
     {{/if}}
 
     {{#if showCustomMessage}}
       <div class="show-custom-message-control">
         <label class="instructions">
-          {{discourse-linked-text
-            class="optional"
-            action=(action "showCustomMessageBox")
-            text="invite.custom_message"}}
+          <DiscourseLinkedText @class="optional" @action={{action "showCustomMessageBox"}} @text="invite.custom_message" />
         </label>
         {{#if hasCustomMessage}}
-          {{textarea value=customMessage placeholder=customMessagePlaceholder}}
+          <Textarea @value={{customMessage}} placeholder={{customMessagePlaceholder}} />
         {{/if}}
       </div>
     {{/if}}
@@ -85,24 +65,11 @@
 
 <div class="footer">
   {{#if inviteModel.finished}}
-    {{d-button
-      class="btn-primary"
-      action=(action "sendCloseModal")
-      label="close"}}
+    <DButton @class="btn-primary" @action={{action "sendCloseModal"}} @label="close" />
   {{else}}
-    {{d-button
-      icon=inviteIcon
-      action=(action "createInvite")
-      class="btn-primary send-invite"
-      disabled=disabled
-      label=buttonTitle}}
+    <DButton @icon={{inviteIcon}} @action={{action "createInvite"}} @class="btn-primary send-invite" @disabled={{disabled}} @label={{buttonTitle}} />
     {{#if showCopyInviteButton}}
-      {{d-button
-        icon="link"
-        action=(action "generateInviteLink")
-        class="btn-primary generate-invite-link"
-        disabled=disabledCopyLink
-        label="user.invited.generate_link"}}
+      <DButton @icon="link" @action={{action "generateInviteLink"}} @class="btn-primary generate-invite-link" @disabled={{disabledCopyLink}} @label="user.invited.generate_link" />
     {{/if}}
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/ip-lookup.hbs b/app/assets/javascripts/discourse/app/templates/components/ip-lookup.hbs
index fe70b9cdb9a..e91799fb02a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/ip-lookup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/ip-lookup.hbs
@@ -1,17 +1,13 @@
 {{#if ip}}
-  {{d-button
-    class="btn-default"
-    action=(action "lookup")
-    icon="globe"
-    label="admin.user.ip_lookup"}}
+  <DButton @class="btn-default" @action={{action "lookup"}} @icon="globe" @label="admin.user.ip_lookup" />
 {{/if}}
 {{#if show}}
   <div class="location-box">
     <a href class="close pull-right" {{action "hide"}}>{{d-icon "times"}}</a>
     {{#if copied}}
-      {{d-button class="btn-hover pull-right" icon="copy" label="ip_lookup.copied"}}
+      <DButton @class="btn-hover pull-right" @icon="copy" @label="ip_lookup.copied" />
     {{else}}
-      {{d-button action=(action "copy") class="pull-right no-text" icon="copy"}}
+      <DButton @action={{action "copy"}} @class="pull-right no-text" @icon="copy" />
     {{/if}}
     <h4>{{i18n "ip_lookup.title"}}</h4>
     <p class="powered-by">{{html-safe (i18n "ip_lookup.powered_by")}}</p>
@@ -45,16 +41,11 @@
         {{i18n "ip_lookup.other_accounts"}}
         <strong>{{totalOthersWithSameIP}}</strong>
         {{#if other_accounts.length}}
-          {{d-button
-            class="btn-danger pull-right"
-            action=(action "deleteOtherAccounts")
-            icon="exclamation-triangle"
-            translatedLabel=(i18n "ip_lookup.delete_other_accounts" count=otherAccountsToDelete)
-          }}
+          <DButton @class="btn-danger pull-right" @action={{action "deleteOtherAccounts"}} @icon="exclamation-triangle" @translatedLabel={{i18n "ip_lookup.delete_other_accounts" count=otherAccountsToDelete}} />
         {{/if}}
       </dt>
 
-      {{#conditional-loading-spinner size="small" condition=otherAccountsLoading}}
+      <ConditionalLoadingSpinner @size="small" @condition={{otherAccountsLoading}}>
         {{#if other_accounts.length}}
           <dd class="other-accounts">
             <table class="table table-condensed table-hover">
@@ -71,11 +62,11 @@
                 {{#each other_accounts as |a|}}
                   <tr>
                     <td>
-                      {{#link-to "adminUser" a}}
+                      <LinkTo @route="adminUser" @model={{a}}>
                         {{avatar a usernamePath="user.username" imageSize="small"}}
                         &nbsp;
                         <span>{{a.username}}</span>
-                      {{/link-to}}
+                      </LinkTo>
                     </td>
                     <td>{{a.trustLevel.id}}</td>
                     <td>{{a.time_read}}</td>
@@ -87,7 +78,7 @@
             </table>
           </dd>
         {{/if}}
-      {{/conditional-loading-spinner}}
+      </ConditionalLoadingSpinner>
     </dl>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/json-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/json-editor.hbs
index 8d7e6e377e8..f1afb4a7985 100644
--- a/app/assets/javascripts/discourse/app/templates/components/json-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/json-editor.hbs
@@ -1,11 +1,7 @@
-{{#d-modal-body rawTitle=(i18n "admin.site_settings.json_schema.modal_title" name=settingName)}}
+<DModalBody @rawTitle={{i18n "admin.site_settings.json_schema.modal_title" name=settingName}}>
   <div id="json-editor-holder"></div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(action "saveChanges")
-    label="save"
-  }}
+  <DButton @class="btn-primary" @action={{action "saveChanges"}} @label="save" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
index 23d6c6cb773..b35d945c277 100644
--- a/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
@@ -1,9 +1,9 @@
-{{plugin-outlet name="above-latest-topic-list-item" connectorTagName="div"}}
+<PluginOutlet @name="above-latest-topic-list-item" @connectorTagName="div" />
 <div class="topic-poster">
-  {{#user-link user=topic.lastPosterUser}}
+  <UserLink @user={{topic.lastPosterUser}}>
     {{avatar topic.lastPosterUser imageSize="large"}}
-  {{/user-link}}
-  {{user-avatar-flair user=topic.lastPosterUser}}
+  </UserLink>
+  <UserAvatarFlair @user={{topic.lastPosterUser}} />
 </div>
 <div class="main-link">
   <div class="top-row">
@@ -12,7 +12,7 @@
     {{~#if topic.featured_link}}
       {{topic-featured-link topic}}
     {{/if}}
-    {{~topic-post-badges unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl}}
+    <TopicPostBadges @unreadPosts={{topic.unread_posts}} @unseen={{topic.unseen}} @url={{topic.lastUnreadUrl}} />
   </div>
   <div class="bottom-row">
     {{category-link topic.category}}{{discourse-tags topic mode="list"}}{{! intentionally inline to avoid whitespace}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/modal-footer-close.hbs b/app/assets/javascripts/discourse/app/templates/components/modal-footer-close.hbs
index 0aa87bde2d3..c03550a4cd6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/modal-footer-close.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/modal-footer-close.hbs
@@ -1,6 +1,3 @@
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(route-action "closeModal")
-    label="close"}}
+  <DButton @class="btn-primary" @action={{route-action "closeModal"}} @label="close" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/nav-item.hbs b/app/assets/javascripts/discourse/app/templates/components/nav-item.hbs
index 8817c4df616..94e64a4c483 100644
--- a/app/assets/javascripts/discourse/app/templates/components/nav-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/nav-item.hbs
@@ -1,7 +1,7 @@
 {{#if routeParam}}
-  {{#link-to route routeParam}}{{contents}}{{/link-to}}
+  <LinkTo @route={{route}} @model={{routeParam}}>{{contents}}</LinkTo>
 {{else if route}}
-  {{#link-to route}}{{contents}}{{/link-to}}
+  <LinkTo @route={{route}}>{{contents}}</LinkTo>
 {{else}}
   <a href={{get-url path}} data-auto-route="true">{{contents}}</a>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs b/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs
index 5e4f0279e9f..0b811f7f919 100644
--- a/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs
@@ -1,5 +1,5 @@
 {{#each navItems as |navItem|}}
-  {{navigation-item content=navItem filterMode=filterMode category=category class=(concat "nav-item_" navItem.name)}}
+  <NavigationItem @content={{navItem}} @filterMode={{filterMode}} @category={{category}} @class={{concat "nav-item_" navItem.name}} />
 {{/each}}
-{{custom-html name="extraNavItem" tagName="li"}}
-{{plugin-outlet name="extra-nav-item" connectorTagName="li" args=(hash category=category filterMode=filterMode)}}
+<CustomHtml @name="extraNavItem" @tagName="li" />
+<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=category filterMode=filterMode}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/notification-consent-banner.hbs b/app/assets/javascripts/discourse/app/templates/components/notification-consent-banner.hbs
index 69aec8e2cf2..3f21ef3536c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/notification-consent-banner.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/notification-consent-banner.hbs
@@ -3,17 +3,9 @@
     <div class="consent_banner alert alert-info">
       <span>
         {{i18n "user.desktop_notifications.consent_prompt"}}
-        {{d-button
-          display="link"
-          action=(action "turnon")
-          label="user.desktop_notifications.enable"
-        }}
+        <DButton @display="link" @action={{action "turnon"}} @label="user.desktop_notifications.enable" />
       </span>
-      {{d-button
-        icon="times"
-        action=(action "dismiss")
-        class="btn btn-flat close" title="banner.close"
-      }}
+      <DButton @icon="times" @action={{action "dismiss"}} @class="btn btn-flat close" @title="banner.close" />
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
index 19fd656fd06..e86156382b9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/parent-category-row.hbs
@@ -1,10 +1,10 @@
 {{#unless isHidden}}
-  {{plugin-outlet name="category-list-above-each-category" args=(hash category=category)}}
+  <PluginOutlet @name="category-list-above-each-category" @args={{hash category=category}} />
 
   <tr data-category-id={{category.id}} data-notification-level={{category.notificationLevelString}} class="{{if category.description_excerpt "has-description" "no-description"}} {{if category.uploaded_logo.url "has-logo" "no-logo"}}">
     <td class="category {{if isMuted "muted"}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (html-safe (concat (border-color category.color) (category-color-variable category.color)))}}>
-      {{category-title-link category=category}}
-      {{plugin-outlet name="below-category-title-link" connectorTagName="div" args=(hash category=category)}}
+      <CategoryTitleLink @category={{category}} />
+      <PluginOutlet @name="below-category-title-link" @connectorTagName="div" @args={{hash category=category}} />
 
       {{#if category.description_excerpt}}
         <div class="category-description">
@@ -16,14 +16,14 @@
         <table class="category-list subcategories-with-subcategories">
           <tbody>
             {{#each category.subcategories as |subcategory|}}
-              {{sub-category-row category=subcategory listType=listType}}
+              <SubCategoryRow @category={{subcategory}} @listType={{listType}} />
             {{/each}}
           </tbody>
         </table>
       {{else if category.subcategories}}
         <div class="subcategories">
           {{#each category.subcategories as |subcategory|}}
-            {{sub-category-item category=subcategory listType=listType}}
+            <SubCategoryItem @category={{subcategory}} @listType={{listType}} />
           {{/each}}
         </div>
       {{/if}}
@@ -31,14 +31,14 @@
 
     <td class="topics">
       <div title={{category.statTitle}}>{{html-safe category.stat}}</div>
-      {{category-unread category=category tagName="div" class="unread-new"}}
+      <CategoryUnread @category={{category}} @tagName="div" @class="unread-new" />
     </td>
 
     {{#unless isMuted}}
       {{#if showTopics}}
         <td class="latest">
           {{#each category.featuredTopics as |t|}}
-            {{featured-topic topic=t}}
+            <FeaturedTopic @topic={{t}} />
           {{/each}}
         </td>
       {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs b/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs
index 5b91833292b..a35f7174c64 100644
--- a/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/pick-files-button.hbs
@@ -1,5 +1,5 @@
 {{#if showButton}}
-  {{d-button action=(action "openSystemFilePicker") label=label icon=icon}}
+  <DButton @action={{action "openSystemFilePicker"}} @label={{label}} @icon={{icon}} />
 {{/if}}
 {{#if acceptsAllFormats}}
   <input type="file" id={{fileInputId}} class={{fileInputClass}} multiple={{allowMultiple}} disabled={{fileInputDisabled}}>
diff --git a/app/assets/javascripts/discourse/app/templates/components/plugin-outlet.hbs b/app/assets/javascripts/discourse/app/templates/components/plugin-outlet.hbs
index 8dbfeec09d3..4f6c319f549 100644
--- a/app/assets/javascripts/discourse/app/templates/components/plugin-outlet.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/plugin-outlet.hbs
@@ -1,3 +1,3 @@
 {{#each connectors as |c|}}
-  {{plugin-connector connector=c args=args deprecatedArgs=deprecatedArgs class=c.classNames tagName=connectorTagName}}
+  <PluginConnector @connector={{c}} @args={{args}} @deprecatedArgs={{deprecatedArgs}} @class={{c.classNames}} @tagName={{connectorTagName}} />
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/preference-checkbox.hbs b/app/assets/javascripts/discourse/app/templates/components/preference-checkbox.hbs
index 1d5fd86eb73..3a84ea4b8a2 100644
--- a/app/assets/javascripts/discourse/app/templates/components/preference-checkbox.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/preference-checkbox.hbs
@@ -1,4 +1,4 @@
 <label class="checkbox-label">
-  {{input type="checkbox" disabled=disabled checked=checked}}
+  <Input @type="checkbox" @disabled={{disabled}} @checked={{checked}} />
   {{label}}
 </label>
diff --git a/app/assets/javascripts/discourse/app/templates/components/pwa-install-banner.hbs b/app/assets/javascripts/discourse/app/templates/components/pwa-install-banner.hbs
index a4ab37cc7ed..7ead7e3df9b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/pwa-install-banner.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/pwa-install-banner.hbs
@@ -2,18 +2,9 @@
   <div class="row">
     <div class="pwa-install-banner alert alert-info">
       <span>
-        {{discourse-linked-text
-          action=(action "turnOn")
-          text="pwa.install_banner"
-          textParams=(hash title=siteSettings.title)
-        }}
+        <DiscourseLinkedText @action={{action "turnOn"}} @text="pwa.install_banner" @textParams={{hash title=siteSettings.title}} />
       </span>
-      {{d-button
-        icon="times"
-        action=(action "dismiss")
-        class="btn btn-flat close"
-        title="banner.close"
-      }}
+      <DButton @icon="times" @action={{action "dismiss"}} @class="btn btn-flat close" @title="banner.close" />
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs b/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
index 4babf386ef2..9966b9a58c0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
@@ -1,44 +1,25 @@
 <div class="buttons">
   {{#if embedQuoteButton}}
-    {{d-button
-      class="btn-flat insert-quote"
-      action=(action "insertQuote")
-      icon="quote-left"
-      label="post.quote_reply"
-      title="post.quote_reply_shortcut"
-    }}
+    <DButton @class="btn-flat insert-quote" @action={{action "insertQuote"}} @icon="quote-left" @label="post.quote_reply" @title="post.quote_reply_shortcut" />
   {{/if}}
 
   {{#if siteSettings.enable_fast_edit}}
     {{#if _canEditPost}}
-      {{d-button
-        icon="pencil-alt"
-        action=(action "_toggleFastEditForm")
-        label="post.quote_edit"
-        class="btn-flat quote-edit-label"
-        title="post.quote_edit_shortcut"
-      }}
+      <DButton @icon="pencil-alt" @action={{action "_toggleFastEditForm"}} @label="post.quote_edit" @class="btn-flat quote-edit-label" @title="post.quote_edit_shortcut" />
     {{/if}}
   {{/if}}
 
   {{#if quoteSharingEnabled}}
     <span class="quote-sharing">
       {{#if quoteSharingShowLabel}}
-        {{d-button
-          icon="share"
-          label="post.quote_share"
-          class="btn-flat quote-share-label"}}
+        <DButton @icon="share" @label="post.quote_share" @class="btn-flat quote-share-label" />
       {{/if}}
 
       <span class="quote-share-buttons">
         {{#each quoteSharingSources as |source|}}
-          {{d-button
-            class="btn-flat"
-            action=(action "share" source)
-            translatedTitle=source.title
-            icon=source.icon}}
+          <DButton @class="btn-flat" @action={{action "share" source}} @translatedTitle={{source.title}} @icon={{source.icon}} />
         {{/each}}
-        {{plugin-outlet name="quote-share-buttons-after" connectorTagName="div"}}
+        <PluginOutlet @name="quote-share-buttons-after" @connectorTagName="div" />
       </span>
     </span>
   {{/if}}
@@ -48,21 +29,10 @@
   {{#if siteSettings.enable_fast_edit}}
     {{#if _displayFastEditInput}}
       <div class="fast-edit-container">
-        {{textarea
-          id="fast-edit-input"
-          value=_fastEditNewSelection
-        }}
-        {{d-button
-          action=(action "_saveFastEdit")
-          class="btn-small btn-primary save-fast-edit"
-          icon="pencil-alt"
-          label="composer.save_edit"
-          translatedTitle=_saveEditButtonTitle
-          disabled=_saveFastEditDisabled
-          isLoading=_isSavingFastEdit
-        }}
+        <Textarea @id="fast-edit-input" @value={{_fastEditNewSelection}} />
+        <DButton @action={{action "_saveFastEdit"}} @class="btn-small btn-primary save-fast-edit" @icon="pencil-alt" @label="composer.save_edit" @translatedTitle={{_saveEditButtonTitle}} @disabled={{_saveFastEditDisabled}} @isLoading={{_isSavingFastEdit}} />
       </div>
     {{/if}}
   {{/if}}
-  {{plugin-outlet name="quote-button-after" connectorTagName="div"}}
+  <PluginOutlet @name="quote-button-after" @connectorTagName="div" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/related-messages.hbs b/app/assets/javascripts/discourse/app/templates/components/related-messages.hbs
index c16f2b6b797..cc6b4f40859 100644
--- a/app/assets/javascripts/discourse/app/templates/components/related-messages.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/related-messages.hbs
@@ -4,11 +4,7 @@
   </h3>
 
   <div class="topics">
-    {{basic-topic-list
-      hideCategory="true"
-      showPosters="true"
-      topics=topic.relatedMessages
-    }}
+    <BasicTopicList @hideCategory="true" @showPosters="true" @topics={{topic.relatedMessages}} />
   </div>
 
   {{#if targetUser}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/relative-time-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/relative-time-picker.hbs
index adab5e9a548..2fc133aefd3 100644
--- a/app/assets/javascripts/discourse/app/templates/components/relative-time-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/relative-time-picker.hbs
@@ -1,17 +1,4 @@
 <div class="relative-time-picker">
-  {{input
-    class="relative-time-duration"
-    min=durationMin
-    step=durationStep
-    type="number"
-    value=duration
-    onChange=(action "onChangeDuration")
-    id=id
-  }}
-  {{combo-box
-    content=intervals
-    value=selectedInterval
-    class="relative-time-intervals"
-    onChange=(action "onChangeInterval")
-  }}
+  <Input class="relative-time-duration" @min={{durationMin}} @step={{durationStep}} @type="number" @value={{duration}} @onChange={{action "onChangeDuration"}} @id={{id}} />
+  <ComboBox @content={{intervals}} @value={{selectedInterval}} @class="relative-time-intervals" @onChange={{action "onChangeInterval"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-bundled-action.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-bundled-action.hbs
index 17eb8837522..740d1ea63df 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-bundled-action.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-bundled-action.hbs
@@ -1,21 +1,10 @@
 {{#if multiple}}
-  {{dropdown-select-box
-    class="reviewable-action-dropdown"
-    nameProperty="label"
-    content=bundle.actions
-    onChange=(action "performById")
-    options=(hash
+  <DropdownSelectBox @class="reviewable-action-dropdown" @nameProperty="label" @content={{bundle.actions}} @onChange={{action "performById"}} @options={{hash
       icon=bundle.icon
       disabled=reviewableUpdating
       placement=placement
       translatedNone=bundle.label
-    )
-  }}
+    }} />
 {{else}}
-  {{d-button
-    class=(concat "reviewable-action " (dasherize first.id) " " first.button_class)
-    icon=first.icon
-    action=(action "perform" first)
-    translatedLabel=first.label
-    disabled=reviewableUpdating}}
+  <DButton @class={{concat "reviewable-action " (dasherize first.id) " " first.button_class}} @icon={{first.icon}} @action={{action "perform" first}} @translatedLabel={{first.label}} @disabled={{reviewableUpdating}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-claimed-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-claimed-topic.hbs
index 80e825fa083..2d14dda38ed 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-claimed-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-claimed-topic.hbs
@@ -5,14 +5,9 @@
         {{avatar claimedBy imageSize="small"}}
         <span class="claimed-username">{{claimedBy.username}}</span>
       </div>
-      {{d-button
-        icon="times"
-        class="btn-small unclaim"
-        action=(action "unclaim")
-        disabled=unassigning
-        title="review.unclaim.help"}}
+      <DButton @icon="times" @class="btn-small unclaim" @action={{action "unclaim"}} @disabled={{unassigning}} @title="review.unclaim.help" />
     {{else}}
-      {{d-button icon="user-plus" class="btn-small claim" title="review.claim.title" action=(action "claim")}}
+      <DButton @icon="user-plus" @class="btn-small claim" @title="review.claim.title" @action={{action "claim"}} />
     {{/if}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-conversation-post.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-conversation-post.hbs
index a9c94a9cf72..87bdc7fb1b3 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-conversation-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-conversation-post.hbs
@@ -1,7 +1,7 @@
 {{#if post}}
   <div class="reviewable-conversation-post">
     {{#if showUsername}}
-      {{#link-to "user" post.user class="username"}}@{{post.user.username}}{{/link-to}}
+      <LinkTo @route="user" @model={{post.user}} class="username">@{{post.user.username}}</LinkTo>
     {{/if}}
     {{html-safe post.excerpt}}
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by-name.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by-name.hbs
index 0a7f81822e2..e7e6ade724b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by-name.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by-name.hbs
@@ -1,7 +1,7 @@
 <div class="names">
   <span class="username">
     {{#if user}}
-      {{#user-link user=user}}{{user.username}}{{/user-link}}
+      <UserLink @user={{user}}>{{user.username}}</UserLink>
       {{#if user.silenced}}
         {{d-icon "ban" title="user.silenced_tooltip"}}
       {{/if}}
@@ -9,6 +9,5 @@
       {{i18n "review.deleted_user"}}
     {{/if}}
   </span>
-  {{plugin-outlet name="after-reviewable-post-user" connectorTagName="div"
-      args=(hash user=user)}}
+  <PluginOutlet @name="after-reviewable-post-user" @connectorTagName="div" @args={{hash user=user}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by.hbs
index ea8f4fd8787..58895422e97 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-created-by.hbs
@@ -1,6 +1,6 @@
 <div class="created-by">
   {{#if user}}
-    {{#user-link user=user}}{{avatar user imageSize="large"}}{{/user-link}}
+    <UserLink @user={{user}}>{{avatar user imageSize="large"}}</UserLink>
   {{else}}
     {{d-icon "far-trash-alt" class="deleted-user-avatar"}}
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-category.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-category.hbs
index 773ae4587eb..d07479c6087 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-category.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-category.hbs
@@ -1,4 +1 @@
-{{category-chooser
-  value=value
-  onChange=(action "onChange")
-}}
+<CategoryChooser @value={{value}} @onChange={{action "onChange"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-editor.hbs
index befb8bc08ae..f4d56275952 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-editor.hbs
@@ -1 +1 @@
-{{d-editor value=value change=valueChanged}}
+<DEditor @value={{value}} @change={{valueChanged}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-tags.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-tags.hbs
index 7d9ab0d12bb..b81fa4c3d4e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-tags.hbs
@@ -1,7 +1,3 @@
-{{mini-tag-chooser
-  value=value
-  onChange=(action "onChange")
-  options=(hash
+<MiniTagChooser @value={{value}} @onChange={{action "onChange"}} @options={{hash
     categoryId=tagCategoryId
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-text.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-text.hbs
index e41a036af67..2c2c579d800 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-text.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-text.hbs
@@ -1 +1 @@
-{{input value=value change=valueChanged class="reviewable-input-text"}}
+<Input @value={{value}} @change={{valueChanged}} class="reviewable-input-text" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-textarea.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-textarea.hbs
index 1f1856ffc67..8085c8e4917 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-field-textarea.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-field-textarea.hbs
@@ -1 +1 @@
-{{textarea value=value change=valueChanged class="reviewable-input-textarea"}}
+<Textarea @value={{value}} @change={{valueChanged}} class="reviewable-input-textarea" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-flagged-post.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-flagged-post.hbs
index b3e22fed81c..a681a9af669 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-flagged-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-flagged-post.hbs
@@ -1,12 +1,12 @@
 <div class="flagged-post-header">
-  {{reviewable-topic-link reviewable=reviewable tagName=""}}
-  {{reviewable-post-edits reviewable=reviewable tagName=""}}
+  <ReviewableTopicLink @reviewable={{reviewable}} @tagName="" />
+  <ReviewablePostEdits @reviewable={{reviewable}} @tagName="" />
 </div>
 
 <div class="post-contents-wrapper">
-  {{reviewable-created-by user=reviewable.target_created_by tagName=""}}
+  <ReviewableCreatedBy @user={{reviewable.target_created_by}} @tagName="" />
   <div class="post-contents">
-    {{reviewable-post-header reviewable=reviewable createdBy=reviewable.target_created_by tagName=""}}
+    <ReviewablePostHeader @reviewable={{reviewable}} @createdBy={{reviewable.target_created_by}} @tagName="" />
     <div class="post-body">
       {{#if reviewable.blank_post}}
         <p>{{i18n "review.deleted_post"}}</p>
@@ -14,7 +14,7 @@
         {{html-safe reviewable.cooked}}
       {{/if}}
     </div>
-    {{plugin-outlet name="after-reviewable-flagged-post-body" tagName="span" connectorTagName="div" args=(hash model=reviewable)}}
+    <PluginOutlet @name="after-reviewable-flagged-post-body" @tagName="span" @connectorTagName="div" @args={{hash model=reviewable}} />
     {{yield}}
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-histories.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-histories.hbs
index 433ee1f15dc..256c5655b82 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-histories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-histories.hbs
@@ -13,10 +13,10 @@
               {{reviewable-history-description rh}}
             </td>
             <td>
-              {{#user-link user=rs.user}}
+              <UserLink @user={{rs.user}}>
                 {{avatar rh.created_by imageSize="tiny"}}
                 {{rh.created_by.username}}
-              {{/user-link}}
+              </UserLink>
             </td>
             <td>{{format-date rh.created_at format="medium"}}</td>
           </tr>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs
index 2e142f1de98..86c30cd2b48 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs
@@ -5,7 +5,7 @@
       <span class="reply-count">{{i18n "review.replies" count=reviewable.reply_count}}</span>
     {{/if}}
     <span class="created-at">
-      {{#link-to "review.show" reviewable.id}}{{age-with-tooltip reviewable.created_at}}{{/link-to}}
+      <LinkTo @route="review.show" @model={{reviewable.id}}>{{age-with-tooltip reviewable.created_at}}</LinkTo>
     </span>
     <span class="status">
       {{reviewable-status reviewable.status}}
@@ -21,7 +21,7 @@
         {{#if reviewable.created_by}}
           <div class="editable-created-by">
             {{avatar reviewable.created_by imageSize="tiny"}}
-            {{reviewable-created-by-name user=reviewable.created_by tagName=""}}
+            <ReviewableCreatedByName @user={{reviewable.created_by}} @tagName="" />
           </div>
         {{/if}}
 
@@ -39,7 +39,7 @@
       </div>
     {{else}}
       {{#component reviewableComponent reviewable=reviewable tagName=""}}
-        {{reviewable-scores reviewable=reviewable tagName=""}}
+        <ReviewableScores @reviewable={{reviewable}} @tagName="" />
       {{/component}}
     {{/if}}
   </div>
@@ -50,39 +50,21 @@
       {{#if claimEnabled}}
         <div class="claimed-actions">
           <span class="help">{{html-safe claimHelp}}</span>
-          {{reviewable-claimed-topic topicId=topicId claimedBy=reviewable.claimed_by}}
+          <ReviewableClaimedTopic @topicId={{topicId}} @claimedBy={{reviewable.claimed_by}} />
         </div>
       {{/if}}
 
       {{#if canPerform}}
         {{#if editing}}
-          {{d-button
-            class="btn-primary reviewable-action save-edit"
-            disabled=disabled
-            icon="check"
-            action=(action "saveEdit")
-            label="review.save"}}
-          {{d-button
-            class="btn-danger reviewable-action cancel-edit"
-            disabled=disabled
-            icon="times"
-            action=(action "cancelEdit")
-            label="review.cancel"}}
+          <DButton @class="btn-primary reviewable-action save-edit" @disabled={{disabled}} @icon="check" @action={{action "saveEdit"}} @label="review.save" />
+          <DButton @class="btn-danger reviewable-action cancel-edit" @disabled={{disabled}} @icon="times" @action={{action "cancelEdit"}} @label="review.cancel" />
         {{else}}
           {{#each reviewable.bundled_actions as |bundle|}}
-            {{reviewable-bundled-action
-              bundle=bundle
-              performAction=(action "perform")
-              reviewableUpdating=disabled}}
+            <ReviewableBundledAction @bundle={{bundle}} @performAction={{action "perform"}} @reviewableUpdating={{disabled}} />
           {{/each}}
 
           {{#if reviewable.can_edit}}
-            {{d-button
-              class="reviewable-action edit"
-              disabled=disabled
-              icon="pencil-alt"
-              action=(action "edit")
-              label="review.edit"}}
+            <DButton @class="reviewable-action edit" @disabled={{disabled}} @icon="pencil-alt" @action={{action "edit"}} @label="review.edit" />
           {{/if}}
         {{/if}}
       {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-post-header.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-post-header.hbs
index 3d2ffd8234c..e589c5c334d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-post-header.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-post-header.hbs
@@ -1,5 +1,5 @@
 <div class="reviewable-post-header">
-  {{reviewable-created-by-name user=createdBy tagName=""}}
+  <ReviewableCreatedByName @user={{createdBy}} @tagName="" />
   {{#if reviewable.reply_to_post_number}}
     <a href={{concat reviewable.topic_url "/" reviewable.reply_to_post_number}} class="reviewable-reply-to">
       {{d-icon "share"}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-post.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-post.hbs
index 27310675a13..1f4127c2d80 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-post.hbs
@@ -1,12 +1,12 @@
 <div class="flagged-post-header">
-  {{reviewable-topic-link reviewable=reviewable tagName=""}}
-  {{reviewable-post-edits reviewable=reviewable tagName=""}}
+  <ReviewableTopicLink @reviewable={{reviewable}} @tagName="" />
+  <ReviewablePostEdits @reviewable={{reviewable}} @tagName="" />
 </div>
 
 <div class="post-contents-wrapper">
-  {{reviewable-created-by user=reviewable.target_created_by tagName=""}}
+  <ReviewableCreatedBy @user={{reviewable.target_created_by}} @tagName="" />
   <div class="post-contents">
-    {{reviewable-post-header reviewable=reviewable createdBy=reviewable.target_created_by tagName=""}}
+    <ReviewablePostHeader @reviewable={{reviewable}} @createdBy={{reviewable.target_created_by}} @tagName="" />
     <div class="post-body">
       {{#if reviewable.blank_post}}
         <p>{{i18n "review.deleted_post"}}</p>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-queued-post.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-queued-post.hbs
index 1d0ce502223..587ec2f3d4a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-queued-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-queued-post.hbs
@@ -1,22 +1,22 @@
-{{#reviewable-topic-link reviewable=reviewable tagName=""}}
+<ReviewableTopicLink @reviewable={{reviewable}} @tagName="">
   <div class="title-text">
     {{d-icon "plus-square" title="review.new_topic"}}
     {{reviewable.payload.title}}
   </div>
   {{category-badge reviewable.category}}
-  {{reviewable-tags tags=reviewable.payload.tags tagName=""}}
+  <ReviewableTags @tags={{reviewable.payload.tags}} @tagName="" />
   {{#if reviewable.payload.via_email}}
     <a href {{action "showRawEmail"}} class="show-raw-email">
       {{d-icon "far-envelope" title="post.via_email"}}
     </a>
   {{/if}}
-{{/reviewable-topic-link}}
+</ReviewableTopicLink>
 
 <div class="post-contents-wrapper">
-  {{reviewable-created-by user=reviewable.created_by tagName=""}}
+  <ReviewableCreatedBy @user={{reviewable.created_by}} @tagName="" />
 
   <div class="post-contents">
-    {{reviewable-post-header reviewable=reviewable createdBy=reviewable.created_by tagName=""}}
+    <ReviewablePostHeader @reviewable={{reviewable}} @createdBy={{reviewable.created_by}} @tagName="" />
 
     {{cook-text
       reviewable.payload.raw
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-score.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-score.hbs
index 58ce2cb9fa8..abeef1df8d6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-score.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-score.hbs
@@ -1,13 +1,10 @@
 <tr class="reviewable-score">
   <td class="user">
-    {{#user-link user=rs.user}}
+    <UserLink @user={{rs.user}}>
       {{avatar rs.user imageSize="tiny"}}
       {{rs.user.username}}
-    {{/user-link}}
-    {{user-flag-percentage
-      agreed=rs.agree_stats.agreed
-      disagreed=rs.agree_stats.disagreed
-      ignored=rs.agree_stats.ignored}}
+    </UserLink>
+    <UserFlagPercentage @agreed={{rs.agree_stats.agreed}} @disagreed={{rs.agree_stats.disagreed}} @ignored={{rs.agree_stats.ignored}} />
   </td>
   <td>
     {{d-icon rs.score_type.icon}}
@@ -24,10 +21,10 @@
 
     <td class="reviewed-by">
       {{#if rs.reviewed_by}}
-        {{#user-link user=rs.reviewed_by}}
+        <UserLink @user={{rs.reviewed_by}}>
           {{avatar rs.reviewed_by imageSize="tiny"}}
           {{rs.reviewed_by.username}}
-        {{/user-link}}
+        </UserLink>
       {{else}}
         &mdash;
       {{/if}}
@@ -59,7 +56,7 @@
     <td colspan="7">
       <div class="reviewable-conversation">
         {{#each rs.reviewable_conversation.conversation_posts as |p index|}}
-          {{reviewable-conversation-post post=p index=index}}
+          <ReviewableConversationPost @post={{p}} @index={{index}} />
         {{/each}}
         <div class="controls">
           <a href={{rs.reviewable_conversation.permalink}} class="btn btn-small">
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-scores.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-scores.hbs
index 3d6bb9d09b0..93c0c0de0f5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-scores.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-scores.hbs
@@ -2,7 +2,7 @@
   <table class="reviewable-scores">
     <tbody>
       {{#each reviewable.reviewable_scores as |rs|}}
-        {{reviewable-score rs=rs reviewable=reviewable}}
+        <ReviewableScore @rs={{rs}} @reviewable={{reviewable}} />
       {{/each}}
     </tbody>
   </table>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-topic-link.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-topic-link.hbs
index 4b9a0d8e861..d4b7fdc467e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-topic-link.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-topic-link.hbs
@@ -1,15 +1,15 @@
 <div class="post-topic">
   {{#if reviewable.topic}}
-    {{topic-status topic=reviewable.topic showPrivateMessageIcon=true}}
+    <TopicStatus @topic={{reviewable.topic}} @showPrivateMessageIcon={{true}} />
     <a href={{reviewable.target_url}} class="title-text">{{html-safe reviewable.topic.fancyTitle}}</a>
     {{category-badge reviewable.category}}
-    {{reviewable-tags tags=reviewable.topic_tags tagName=""}}
+    <ReviewableTags @tags={{reviewable.topic_tags}} @tagName="" />
   {{else if (has-block)}}
     {{yield}}
   {{else}}
     <span class="title-text">
       {{i18n "review.topics.deleted"}}
-      {{link-to (i18n "review.topics.original") "topic" "-" reviewable.removed_topic_id}}
+      <LinkTo @route="topic" @models={{array "-" reviewable.removed_topic_id}}>{{i18n "review.topics.original"}}</LinkTo>
     </span>
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-user.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-user.hbs
index 9e246ed2c68..0e434dc83a8 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/reviewable-user.hbs
@@ -13,17 +13,11 @@
       </div>
     </div>
 
-    {{reviewable-field classes="reviewable-user-details name"
-                       name=(i18n "review.user.name")
-                       value=reviewable.payload.name}}
+    <ReviewableField @classes="reviewable-user-details name" @name={{i18n "review.user.name"}} @value={{reviewable.payload.name}} />
 
-    {{reviewable-field classes="reviewable-user-details email"
-                       name=(i18n "review.user.email")
-                       value=reviewable.payload.email}}
+    <ReviewableField @classes="reviewable-user-details email" @name={{i18n "review.user.email"}} @value={{reviewable.payload.email}} />
 
-    {{reviewable-field classes="reviewable-user-details bio"
-                       name=(i18n "review.user.bio")
-                       value=reviewable.payload.bio}}
+    <ReviewableField @classes="reviewable-user-details bio" @name={{i18n "review.user.bio"}} @value={{reviewable.payload.bio}} />
 
     {{#if reviewable.payload.website}}
       <div class="reviewable-user-details website">
@@ -34,15 +28,10 @@
       </div>
     {{/if}}
 
-    {{reviewable-field classes="reviewable-user-details reject-reason"
-                       name=(i18n "review.user.reject_reason")
-                       value=reviewable.reject_reason}}
+    <ReviewableField @classes="reviewable-user-details reject-reason" @name={{i18n "review.user.reject_reason"}} @value={{reviewable.reject_reason}} />
 
     {{#each userFields as |f|}}
-      {{reviewable-field classes="reviewable-user-details user-field"
-                         name=f.name
-                         value=f.value
-                         tagName=""}}
+      <ReviewableField @classes="reviewable-user-details user-field" @name={{f.name}} @value={{f.value}} @tagName="" />
     {{/each}}
   </div>
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/save-controls.hbs b/app/assets/javascripts/discourse/app/templates/components/save-controls.hbs
index 9d95f47a315..c84fab80060 100644
--- a/app/assets/javascripts/discourse/app/templates/components/save-controls.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/save-controls.hbs
@@ -1,4 +1,4 @@
-{{d-button action=action disabled=buttonDisabled label=savingText class="btn-primary save-changes"}}
+<DButton @action={{this.action}} @disabled={{buttonDisabled}} @label={{savingText}} @class="btn-primary save-changes" />
 {{#if saved}}
   <span class="saved">{{i18n "saved"}}</span>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs b/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
index ce3f0944222..2c6ac67263e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
@@ -3,16 +3,12 @@
 </summary>
 <div class="search-advanced-filters">
   <div class="search-advanced-options">
-    {{plugin-outlet name="advanced-search-options-above" connectorTagName="div" args=(hash searchedTerms=searchedTerms onChangeSearchedTermField=onChangeSearchedTermField)}}
+    <PluginOutlet @name="advanced-search-options-above" @connectorTagName="div" @args={{hash searchedTerms=searchedTerms onChangeSearchedTermField=onChangeSearchedTermField}} />
 
     <div class="control-group advanced-search-category">
       <label class="control-label">{{i18n "search.advanced.in_category.label"}}</label>
       <div class="controls">
-        {{search-advanced-category-chooser
-          id="search-in-category"
-          value=searchedTerms.category.id
-          onChange=(action "onChangeSearchTermForCategory")
-        }}
+        <SearchAdvancedCategoryChooser @id="search-in-category" @value={{searchedTerms.category.id}} @onChange={{action "onChangeSearchTermForCategory"}} />
       </div>
     </div>
 
@@ -20,26 +16,14 @@
       <div class="control-group advanced-search-tags">
         <label class="control-label">{{i18n "search.advanced.with_tags.label"}}</label>
         <div class="controls">
-          {{tag-chooser
-            id="search-with-tags"
-            tags=searchedTerms.tags
-            everyTag=true
-            unlimitedTagCount=true
-            onChange=(action "onChangeSearchTermForTags")
-            options=(hash
+          <TagChooser @id="search-with-tags" @tags={{searchedTerms.tags}} @everyTag={{true}} @unlimitedTagCount={{true}} @onChange={{action "onChangeSearchTermForTags"}} @options={{hash
               allowAny=false
               headerAriaLabel=(i18n "search.advanced.with_tags.aria_label")
-            )
-          }}
+            }} />
           {{#if showAllTagsCheckbox}}
             <section class="field">
               <label>
-                {{input
-                  type="checkbox"
-                  class="all-tags"
-                  checked=searchedTerms.special.all_tags
-                  click=(action "onChangeSearchTermForAllTags" value="target.checked")
-                }}
+                <Input @type="checkbox" class="all-tags" @checked={{searchedTerms.special.all_tags}} @click={{action "onChangeSearchTermForAllTags" value="target.checked"}} />
                 {{i18n "search.advanced.filters.all_tags"}}
               </label>
             </section>
@@ -55,63 +39,32 @@
 
           {{#if currentUser}}
             <div class="grouped-control-field">
-              {{input
-                id="matching-title-only"
-                type="checkbox"
-                class="in-title"
-                checked=searchedTerms.special.in.title
-                click=(action "onChangeSearchTermForSpecialInTitle" value="target.checked")
-              }}
+              <Input @id="matching-title-only" @type="checkbox" class="in-title" @checked={{searchedTerms.special.in.title}} @click={{action "onChangeSearchTermForSpecialInTitle" value="target.checked"}} />
               <label for="matching-title-only">
                 {{i18n "search.advanced.filters.title"}}
               </label>
             </div>
 
             <div class="grouped-control-field">
-              {{input
-                id="matching-liked"
-                type="checkbox"
-                class="in-likes"
-                checked=searchedTerms.special.in.likes
-                click=(action "onChangeSearchTermForSpecialInLikes" value="target.checked")
-              }}
+              <Input @id="matching-liked" @type="checkbox" class="in-likes" @checked={{searchedTerms.special.in.likes}} @click={{action "onChangeSearchTermForSpecialInLikes" value="target.checked"}} />
               <label for="matching-liked">{{i18n "search.advanced.filters.likes"}}</label>
             </div>
 
             <div class="grouped-control-field">
-              {{input
-                id="matching-in-messages"
-                type="checkbox"
-                class="in-private"
-                checked=searchedTerms.special.in.messages
-                click=(action "onChangeSearchTermForSpecialInMessages" value="target.checked")
-              }}
+              <Input @id="matching-in-messages" @type="checkbox" class="in-private" @checked={{searchedTerms.special.in.messages}} @click={{action "onChangeSearchTermForSpecialInMessages" value="target.checked"}} />
               <label for="matching-in-messages">{{i18n "search.advanced.filters.private"}}</label>
             </div>
 
             <div class="grouped-control-field">
-              {{input
-                id="matching-seen"
-                type="checkbox"
-                class="in-seen"
-                checked=searchedTerms.special.in.seen
-                click=(action "onChangeSearchTermForSpecialInSeen" value="target.checked")
-              }}
+              <Input @id="matching-seen" @type="checkbox" class="in-seen" @checked={{searchedTerms.special.in.seen}} @click={{action "onChangeSearchTermForSpecialInSeen" value="target.checked"}} />
               <label for="matching-seen">{{i18n "search.advanced.filters.seen"}}</label>
             </div>
           {{/if}}
 
-          {{combo-box
-            id="in"
-            valueProperty="value"
-            content=inOptions
-            value=searchedTerms.in
-            onChange=(action "onChangeSearchTermForIn")
-            options=(hash
+          <ComboBox @id="in" @valueProperty="value" @content={{inOptions}} @value={{searchedTerms.in}} @onChange={{action "onChangeSearchTermForIn"}} @options={{hash
               none="user.locale.any"
               clearable=true
-            )
-          }}
+            }} />
         </fieldset>
       </div>
     </div>
@@ -119,18 +72,11 @@
     <div class="control-group advanced-search-topic-status">
       <label class="control-label">{{i18n "search.advanced.statuses.label"}}</label>
       <div class="controls">
-        {{combo-box
-          id="search-status-options"
-          valueProperty="value"
-          content=statusOptions
-          value=searchedTerms.status
-          onChange=(action "onChangeSearchTermForStatus")
-          options=(hash
+        <ComboBox @id="search-status-options" @valueProperty="value" @content={{statusOptions}} @value={{searchedTerms.status}} @onChange={{action "onChangeSearchTermForStatus"}} @options={{hash
             none="user.locale.any"
             headerAriaLabel=(i18n "search.advanced.statuses.label")
             clearable=true
-          )
-        }}
+          }} />
       </div>
     </div>
 
@@ -139,41 +85,25 @@
         {{i18n "search.advanced.posted_by.label"}}
       </label>
       <div class="controls">
-        {{user-chooser
-          id="search-posted-by"
-          value=searchedTerms.username
-          onChange=(action "onChangeSearchTermForUsername")
-          options=(hash
+        <UserChooser @id="search-posted-by" @value={{searchedTerms.username}} @onChange={{action "onChangeSearchTermForUsername"}} @options={{hash
             headerAriaLabel=(i18n "search.advanced.posted_by.aria_label")
             maximum=1
             excludeCurrentUser=false
-          )
-        }}
+          }} />
       </div>
     </div>
 
     <div class="control-group advanced-search-posted-date">
       <label class="control-label">{{i18n "search.advanced.post.time.label"}}</label>
       <div class="controls inline-form full-width">
-        {{combo-box
-          id="postTime"
-          valueProperty="value"
-          content=postTimeOptions
-          value=searchedTerms.time.when
-          onChange=(action "onChangeWhenTime")
-          options=(hash
+        <ComboBox @id="postTime" @valueProperty="value" @content={{postTimeOptions}} @value={{searchedTerms.time.when}} @onChange={{action "onChangeWhenTime"}} @options={{hash
             headerAriaLabel=(i18n "search.advanced.post.time.aria_label")
-          )
-        }}
-        {{date-input
-          date=searchedTerms.time.days
-          onChange=(action "onChangeWhenDate")
-          inputId="search-post-date"
-        }}
+          }} />
+        <DateInput @date={{searchedTerms.time.days}} @onChange={{action "onChangeWhenDate"}} @inputId="search-post-date" />
       </div>
     </div>
 
-    {{plugin-outlet name="advanced-search-options-below" connectorTagName="div" args=(hash searchedTerms=searchedTerms onChangeSearchedTermField=onChangeSearchedTermField)}}
+    <PluginOutlet @name="advanced-search-options-below" @connectorTagName="div" @args={{hash searchedTerms=searchedTerms onChangeSearchedTermField=onChangeSearchedTermField}} />
   </div>
 
   <details class="search-advanced-additional-options">
@@ -184,25 +114,9 @@
       {{!-- TODO: Using a label here fails no-nested-interactive lint rule --}}
       <span class="control-label">{{i18n "search.advanced.post.count.label"}}</span>
       <div class="controls">
-        {{input
-          type="number"
-          value=(readonly searchedTerms.min_posts)
-          class="input-small"
-          id="search-min-post-count"
-          input=(action "onChangeSearchTermMinPostCount" value="target.value")
-          placeholder=(i18n "search.advanced.post.min.placeholder")
-          aria-label=(i18n "search.advanced.post.min.aria_label")
-        }}
+        <Input @type="number" @value={{readonly searchedTerms.min_posts}} class="input-small" @id="search-min-post-count" @input={{action "onChangeSearchTermMinPostCount" value="target.value"}} placeholder={{i18n "search.advanced.post.min.placeholder"}} @aria-label={{i18n "search.advanced.post.min.aria_label"}} />
         {{d-icon "arrows-alt-h"}}
-        {{input
-          type="number"
-          value=(readonly searchedTerms.max_posts)
-          class="input-small"
-          id="search-max-post-count"
-          input=(action "onChangeSearchTermMaxPostCount" value="target.value")
-          placeholder=(i18n "search.advanced.post.max.placeholder")
-          aria-label=(i18n "search.advanced.post.max.aria_label")
-        }}
+        <Input @type="number" @value={{readonly searchedTerms.max_posts}} class="input-small" @id="search-max-post-count" @input={{action "onChangeSearchTermMaxPostCount" value="target.value"}} placeholder={{i18n "search.advanced.post.max.placeholder"}} @aria-label={{i18n "search.advanced.post.max.aria_label"}} />
       </div>
     </div>
 
@@ -210,39 +124,16 @@
       {{!-- TODO: Using a label here fails no-nested-interactive lint rule --}}
       <span class="control-label">{{i18n "search.advanced.views.label"}}</span>
       <div class="controls">
-        {{input
-          type="number"
-          value=(readonly searchedTerms.min_views)
-          class="input-small"
-          id="search-min-views"
-          input=(action "onChangeSearchTermMinViews" value="target.value")
-          placeholder=(i18n "search.advanced.min_views.placeholder")
-          aria-label=(i18n "search.advanced.min_views.aria_label")
-        }}
+        <Input @type="number" @value={{readonly searchedTerms.min_views}} class="input-small" @id="search-min-views" @input={{action "onChangeSearchTermMinViews" value="target.value"}} placeholder={{i18n "search.advanced.min_views.placeholder"}} @aria-label={{i18n "search.advanced.min_views.aria_label"}} />
         {{d-icon "arrows-alt-h"}}
-        {{input
-          type="number"
-          value=(readonly searchedTerms.max_views)
-          class="input-small"
-          id="search-max-views"
-          input=(action "onChangeSearchTermMaxViews" value="target.value")
-          placeholder=(i18n "search.advanced.max_views.placeholder")
-          aria-label=(i18n "search.advanced.max_views.aria_label")
-        }}
+        <Input @type="number" @value={{readonly searchedTerms.max_views}} class="input-small" @id="search-max-views" @input={{action "onChangeSearchTermMaxViews" value="target.value"}} placeholder={{i18n "search.advanced.max_views.placeholder"}} @aria-label={{i18n "search.advanced.max_views.aria_label"}} />
       </div>
     </div>
   </details>
 
   {{#if site.mobileView}}
     <div class="second-search-button">
-      {{d-button
-        action=search
-        icon="search"
-        label="search.search_button"
-        class="btn-primary search-cta"
-        ariaLabel="search.search_button"
-        disabled=searchButtonDisabled
-      }}
+      <DButton @action={{search}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{searchButtonDisabled}} />
     </div>
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/search-result-entries.hbs b/app/assets/javascripts/discourse/app/templates/components/search-result-entries.hbs
index 941ec29b38f..eed27b798b9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/search-result-entries.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/search-result-entries.hbs
@@ -1,11 +1,5 @@
 <div class="fps-result-entries" role="list">
   {{#each posts as |post|}}
-    {{search-result-entry
-      post=post
-      bulkSelectEnabled=bulkSelectEnabled
-      selected=selected
-      highlightQuery=highlightQuery
-      searchLogId=searchLogId
-    }}
+    <SearchResultEntry @post={{post}} @bulkSelectEnabled={{bulkSelectEnabled}} @selected={{selected}} @highlightQuery={{highlightQuery}} @searchLogId={{searchLogId}} />
   {{/each}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs b/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
index 860cee9c3b2..de62d7f7161 100644
--- a/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
@@ -7,7 +7,7 @@
 <div class="fps-topic">
   <div class="topic">
     {{#if bulkSelectEnabled}}
-      {{track-selected selectedList=selected selectedId=post.topic class="bulk-select"}}
+      <TrackSelected @selectedList={{selected}} @selectedId={{post.topic}} @class="bulk-select" />
     {{/if}}
 
     <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link{{if post.topic.visited " visited"}}" role="heading" aria-level="2">
@@ -16,9 +16,9 @@
         {{#if post.useTopicTitleHeadline}}
           {{html-safe post.topicTitleHeadline}}
         {{else}}
-          {{#highlight-search highlight=highlightQuery}}
+          <HighlightSearch @highlight={{highlightQuery}}>
             {{html-safe post.topic.fancyTitle}}
-          {{/highlight-search}}
+          </HighlightSearch>
         {{/if}}
       </span>
     </a>
@@ -31,7 +31,7 @@
       {{#if post.topic}}
         {{discourse-tags post.topic}}
       {{/if}}
-      {{plugin-outlet name="full-page-search-category" tagName="span" connectorTagName="div" args=(hash post=post)}}
+      <PluginOutlet @name="full-page-search-category" @tagName="span" @connectorTagName="div" @args={{hash post=post}} />
     </div>
   </div>
 
@@ -47,9 +47,9 @@
       {{#if siteSettings.use_pg_headlines_for_excerpt}}
         {{html-safe post.blurb}}
       {{else}}
-        {{#highlight-search highlight=highlightQuery}}
+        <HighlightSearch @highlight={{highlightQuery}}>
           {{html-safe post.blurb}}
-        {{/highlight-search}}
+        </HighlightSearch>
       {{/if}}
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs b/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
index eb841a81c99..4e228f5c1da 100644
--- a/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
@@ -1,14 +1 @@
-{{text-field
-    value=value
-    type=type
-    pattern=pattern
-    maxlength=maxlength
-    class="second-factor-token-input"
-    id=inputId
-    autocapitalize="off"
-    autocomplete="one-time-code"
-    autocorrect="off"
-    autofocus="autofocus"
-    placeholder=placeholder
-    input=(action "onInput")
-}}
+<TextField @value={{value}} @type={{type}} @pattern={{pattern}} @maxlength={{maxlength}} @class="second-factor-token-input" @id={{inputId}} @autocapitalize="off" @autocomplete="one-time-code" @autocorrect="off" @autofocus="autofocus" @placeholder={{placeholder}} @input={{action "onInput"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/security-key-form.hbs b/app/assets/javascripts/discourse/app/templates/components/security-key-form.hbs
index 93158de33c8..014654d3958 100644
--- a/app/assets/javascripts/discourse/app/templates/components/security-key-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/security-key-form.hbs
@@ -1,11 +1,5 @@
 <div id="security-key">
-  {{d-button
-      action=action
-      icon="key"
-      id="security-key-authenticate-button"
-      label="login.security_key_authenticate"
-      type="button"
-      class="btn btn-large btn-primary"}}
+  <DButton @action={{this.action}} @icon="key" @id="security-key-authenticate-button" @label="login.security_key_authenticate" @type="button" @class="btn btn-large btn-primary" />
   <p>
     {{#if otherMethodAllowed}}
       <a href="" class="toggle-second-factor-method" {{action "useAnotherMethod"}}>{{ i18n "login.security_key_alternative" }}</a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/selected-posts.hbs b/app/assets/javascripts/discourse/app/templates/components/selected-posts.hbs
index 48860f89c90..b054b0f288a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/selected-posts.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/selected-posts.hbs
@@ -1,5 +1,5 @@
 <p>
-  {{count-i18n key="topic.multi_select.description" count=selectedPostsCount}}
+  <CountI18n @key="topic.multi_select.description" @count={{selectedPostsCount}} />
 </p>
 
 {{#if canSelectAll}}
@@ -19,39 +19,19 @@
 {{/if}}
 
 {{#if canDeleteSelected}}
-  {{d-button
-    action=deleteSelected
-    icon="far-trash-alt"
-    label="topic.multi_select.delete"
-    class="btn-danger"
-  }}
+  <DButton @action={{deleteSelected}} @icon="far-trash-alt" @label="topic.multi_select.delete" @class="btn-danger" />
 {{/if}}
 
 {{#if canMergeTopic}}
-  {{d-button
-    action=(route-action "moveToTopic")
-    icon="sign-out-alt"
-    label="topic.move_to.action"
-    class="btn-primary move-to-topic"
-  }}
+  <DButton @action={{route-action "moveToTopic"}} @icon="sign-out-alt" @label="topic.move_to.action" @class="btn-primary move-to-topic" />
 {{/if}}
 
 {{#if canChangeOwner}}
-  {{d-button
-    action=(route-action "changeOwner")
-    icon="user"
-    label="topic.change_owner.action"
-    class="btn-primary"
-  }}
+  <DButton @action={{route-action "changeOwner"}} @icon="user" @label="topic.change_owner.action" @class="btn-primary" />
 {{/if}}
 
 {{#if canMergePosts}}
-  {{d-button
-    action=mergePosts
-    icon="arrows-alt-v"
-    label="topic.merge_posts.action"
-    class="btn-primary"
-  }}
+  <DButton @action={{mergePosts}} @icon="arrows-alt-v" @label="topic.merge_posts.action" @class="btn-primary" />
 {{/if}}
 
 <p class="cancel">
diff --git a/app/assets/javascripts/discourse/app/templates/components/share-panel.hbs b/app/assets/javascripts/discourse/app/templates/components/share-panel.hbs
index c309de1488d..9ef8362874e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/share-panel.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/share-panel.hbs
@@ -3,11 +3,11 @@
 </div>
 
 <div class="body">
-  {{d-textarea value=shareUrl class="topic-share-url" aria-label=(I18n "share.url")}}
+  <DTextarea @value={{shareUrl}} @class="topic-share-url" @aria-label={{I18n "share.url"}} />
 
   <div class="sources">
     {{#each sources as |source|}}
-      {{share-source source=source title=topic.title action=(action "share")}}
+      <ShareSource @source={{source}} @title={{topic.title}} @action={{action "share"}} />
     {{/each}}
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/share-source.hbs b/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
index cea4521ecf3..60d97e36cd9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
@@ -1,6 +1 @@
-{{d-button
-  action=(action "share" source)
-  class=(concat "btn-default share-" source.id)
-  translatedTitle=source.title
-  icon=(if source.icon source.icon source.htmlIcon)
- }}
+<DButton @action={{action "share" source}} @class={{concat "btn-default share-" source.id}} @translatedTitle={{source.title}} @icon={{if source.icon source.icon source.htmlIcon}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/shared-draft-controls.hbs b/app/assets/javascripts/discourse/app/templates/components/shared-draft-controls.hbs
index 4501449c1b1..7e562db7c79 100644
--- a/app/assets/javascripts/discourse/app/templates/components/shared-draft-controls.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/shared-draft-controls.hbs
@@ -6,19 +6,12 @@
 
     <div class="publish-field">
       <label>{{i18n "shared_drafts.destination_category"}}</label>
-      {{category-chooser
-        value=topic.destination_category_id
-        onChange=(action "updateDestinationCategory")
-      }}
+      <CategoryChooser @value={{topic.destination_category_id}} @onChange={{action "updateDestinationCategory"}} />
     </div>
 
     <div class="publish-field">
       {{#if validCategory}}
-        {{d-button
-          action=(action "publish")
-          label="shared_drafts.publish"
-          class="btn-primary publish-shared-draft"
-          icon="far-clipboard"}}
+        <DButton @action={{action "publish"}} @label="shared_drafts.publish" @class="btn-primary publish-shared-draft" @icon="far-clipboard" />
       {{/if}}
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs b/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
index 9fbbf93fa6a..da7c98608d6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
@@ -8,8 +8,8 @@
     <p>{{replace-emoji (i18n "signup_cta.value_prop")}}</p>
 
     <div class="buttons">
-      {{d-button action=(route-action "showCreateAccount") label="signup_cta.sign_up" icon="check" class="btn-primary"}}
-      {{d-button action=(action "hideForSession") label="signup_cta.hide_session" class="no-icon"}}
+      <DButton @action={{route-action "showCreateAccount"}} @label="signup_cta.sign_up" @icon="check" @class="btn-primary" />
+      <DButton @action={{action "hideForSession"}} @label="signup_cta.hide_session" @class="no-icon" />
       <a href {{action "neverShow"}}>{{i18n "signup_cta.hide_forever"}}</a>
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/slow-mode-info.hbs b/app/assets/javascripts/discourse/app/templates/components/slow-mode-info.hbs
index 530ead3e8a4..f05e0588d2d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/slow-mode-info.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/slow-mode-info.hbs
@@ -7,9 +7,7 @@
       </span>
 
       {{#if user.canManageTopic}}
-        {{d-button class="slow-mode-remove"
-                  action=(action "disableSlowMode")
-                  icon="trash-alt"}}
+        <DButton @class="slow-mode-remove" @action={{action "disableSlowMode"}} @icon="trash-alt" />
       {{/if}}
     </h3>
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/sub-category-item.hbs b/app/assets/javascripts/discourse/app/templates/components/sub-category-item.hbs
index b4f04b2da6d..edc3f6bfcdf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sub-category-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sub-category-item.hbs
@@ -1,9 +1,9 @@
 {{#unless isMuted}}
   <span class="subcategory">
-    {{category-title-before category=category}}
+    <CategoryTitleBefore @category={{category}} />
     {{category-link category hideParent="true"}}
     {{#unless hideUnread}}
-      {{category-unread category=category}}
+      <CategoryUnread @category={{category}} />
     {{/unless}}
   </span>
 {{/unless}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/sub-category-row.hbs b/app/assets/javascripts/discourse/app/templates/components/sub-category-row.hbs
index fd6126c9970..3244a1303d4 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sub-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sub-category-row.hbs
@@ -1,7 +1,7 @@
 {{#unless isHidden}}
   <tr data-category-id={{category.id}} data-notification-level={{category.notificationLevelString}} class="{{if category.description_excerpt "has-description" "no-description"}} {{if category.uploaded_logo.url "has-logo" "no-logo"}}">
     <td class="category {{if isMuted "muted"}}" style={{border-color category.color}}>
-      {{category-title-link tagName="h4" category=category}}
+      <CategoryTitleLink @tagName="h4" @category={{category}} />
       {{#if category.description_excerpt}}
         <div class="category-description subcategory-description">
           {{dir-span category.description_excerpt htmlSafe="true"}}
@@ -10,7 +10,7 @@
       {{#if category.subcategories}}
         <div class="subcategories">
           {{#each category.subcategories as |subsubcategory|}}
-            {{sub-category-item category=subsubcategory hideUnread="true" listType=listType}}
+            <SubCategoryItem @category={{subsubcategory}} @hideUnread="true" @listType={{listType}} />
           {{/each}}
         </div>
       {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
index ca19c2539bc..a990d1bce88 100644
--- a/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/subcategories-with-featured-topics.hbs
@@ -3,7 +3,7 @@
     <thead>
       <tr>
         <th class="parent-category">
-          {{category-title-link category=category}}
+          <CategoryTitleLink @category={{category}} />
           <span class="stat" title={{category.statTitle}}>{{html-safe category.stat}}</span>
         </th>
         <th class="topics">{{i18n "categories.topics"}}</th>
@@ -12,10 +12,10 @@
     </thead>
     <tbody aria-labelledby="categories-only-category">
       {{#each category.subcategories as |subCategory|}}
-        {{parent-category-row category=subCategory showTopics=true}}
+        <ParentCategoryRow @category={{subCategory}} @showTopics={{true}} />
       {{else}}
         {{!-- No subcategories... so just show the parent to avoid confusion --}}
-        {{parent-category-row category=category showTopics=true}}
+        <ParentCategoryRow @category={{category}} @showTopics={{true}} />
       {{/each}}
     </tbody>
   </table>
diff --git a/app/assets/javascripts/discourse/app/templates/components/suggested-topics.hbs b/app/assets/javascripts/discourse/app/templates/components/suggested-topics.hbs
index 01ef22e3602..5923ffd129a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/suggested-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/suggested-topics.hbs
@@ -6,13 +6,9 @@
 
   <div class="topics">
     {{#if topic.isPrivateMessage}}
-      {{basic-topic-list
-        hideCategory="true"
-        showPosters="true"
-        topics=topic.suggestedTopics
-      }}
+      <BasicTopicList @hideCategory="true" @showPosters="true" @topics={{topic.suggestedTopics}} />
     {{else}}
-      {{basic-topic-list topics=topic.suggestedTopics}}
+      <BasicTopicList @topics={{topic.suggestedTopics}} />
     {{/if}}
   </div>
 
@@ -21,4 +17,4 @@
   </h3>
 </div>
 
-{{plugin-outlet name="below-suggested-topics" tagName="span" connectorTagName="div" args=(hash topic=topic)}}
+<PluginOutlet @name="below-suggested-topics" @tagName="span" @connectorTagName="div" @args={{hash topic=topic}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
index 3fabd1678d1..ced5f82bb9c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs
@@ -1,123 +1,73 @@
 <section class="group-name">
   <label>{{i18n "tagging.groups.name_placeholder"}}</label>
-  <div>{{text-field value=buffered.name}}</div>
+  <div><TextField @value={{buffered.name}} /></div>
 </section>
 
 <section class="group-tags-list">
   <label>{{i18n "tagging.groups.tags_label"}}</label><br>
-  {{tag-chooser
-    tags=buffered.tag_names
-    everyTag=true
-    unlimitedTagCount=true
-    excludeSynonyms=true
-    options=(hash
+  <TagChooser @tags={{buffered.tag_names}} @everyTag={{true}} @unlimitedTagCount={{true}} @excludeSynonyms={{true}} @options={{hash
       allowAny=true
       filterPlaceholder="tagging.groups.tags_placeholder"
-    )
-  }}
+    }} />
 </section>
 
 <section class="parent-tag-section">
   <label>{{i18n "tagging.groups.parent_tag_label"}}</label>
   <div>
-    {{tag-chooser
-      tags=buffered.parent_tag_name
-      everyTag=true
-      excludeSynonyms=true
-      options=(hash
+    <TagChooser @tags={{buffered.parent_tag_name}} @everyTag={{true}} @excludeSynonyms={{true}} @options={{hash
         allowAny=true
         filterPlaceholder="tagging.groups.parent_tag_placeholder"
         maximum=1
-      )
-    }}
+      }} />
   </div>
   <div class="description">{{i18n "tagging.groups.parent_tag_description"}}</div>
 </section>
 
 <section class="group-one-per-topic">
   <label>
-    {{input type="checkbox" checked=buffered.one_per_topic name="onepertopic"}}
+    <Input @type="checkbox" @checked={{buffered.one_per_topic}} @name="onepertopic" />
     {{i18n "tagging.groups.one_per_topic_label"}}
   </label>
 </section>
 
 <section class="group-visibility">
   <div class="group-visibility-option">
-    {{radio-button
-      class="tag-permissions-choice"
-      name="tag-permissions-choice"
-      value="public"
-      id="public-permission"
-      selection=buffered.permissionName
-      onChange=(action "setPermissionsType")}}
+    <RadioButton @class="tag-permissions-choice" @name="tag-permissions-choice" @value="public" @id="public-permission" @selection={{buffered.permissionName}} @onChange={{action "setPermissionsType"}} />
 
     <label class="radio" for="public-permission">
       {{i18n "tagging.groups.everyone_can_use"}}
     </label>
   </div>
   <div class="group-visibility-option">
-    {{radio-button
-      class="tag-permissions-choice"
-      name="tag-permissions-choice"
-      value="visible"
-      id="visible-permission"
-      selection=buffered.permissionName
-      onChange=(action "setPermissionsType")}}
+    <RadioButton @class="tag-permissions-choice" @name="tag-permissions-choice" @value="visible" @id="visible-permission" @selection={{buffered.permissionName}} @onChange={{action "setPermissionsType"}} />
 
     <label class="radio" for="visible-permission">
       {{i18n "tagging.groups.usable_only_by_groups"}}
     </label>
 
     <div class="group-access-control">
-      {{group-chooser
-        content=allGroups
-        value=selectedGroupIds
-        labelProperty="name"
-        onChange=(action "setPermissionsGroups")
-        options=(hash
+      <GroupChooser @content={{allGroups}} @value={{selectedGroupIds}} @labelProperty="name" @onChange={{action "setPermissionsGroups"}} @options={{hash
           filterPlaceholder="tagging.groups.select_groups_placeholder"
-        )
-      }}
+        }} />
     </div>
   </div>
   <div class="group-visibility-option">
-    {{radio-button
-      class="tag-permissions-choice"
-      name="tag-permissions-choice"
-      value="private"
-      id="private-permission"
-      selection=buffered.permissionName
-      onChange=(action "setPermissionsType")}}
+    <RadioButton @class="tag-permissions-choice" @name="tag-permissions-choice" @value="private" @id="private-permission" @selection={{buffered.permissionName}} @onChange={{action "setPermissionsType"}} />
 
     <label class="radio" for="private-permission">
       {{i18n "tagging.groups.visible_only_to_groups"}}
     </label>
 
     <div class="group-access-control">
-      {{group-chooser
-        content=allGroups
-        value=selectedGroupIds
-        labelProperty="name"
-        onChange=(action "setPermissionsGroups")
-        options=(hash
+      <GroupChooser @content={{allGroups}} @value={{selectedGroupIds}} @labelProperty="name" @onChange={{action "setPermissionsGroups"}} @options={{hash
           filterPlaceholder="tagging.groups.select_groups_placeholder"
-        )
-      }}
+        }} />
     </div>
   </div>
 </section>
 
 <div class="tag-group-controls">
-  {{d-button
-    class="btn-primary"
-    action=(action "save")
-    disabled=buffered.isSaving
-    label="tagging.groups.save"}}
+  <DButton @class="btn-primary" @action={{action "save"}} @disabled={{buffered.isSaving}} @label="tagging.groups.save" />
 
-  {{d-button
-    class="btn-danger"
-    action=(action "destroy")
-    disabled=buffered.isNew
-    icon="far-trash-alt"
-    label="tagging.groups.delete"}}
+  <DButton @class="btn-danger" @action={{action "destroy"}} @disabled={{buffered.isNew}} @icon="far-trash-alt" @label="tagging.groups.delete" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs
index e235b4c02c6..bf50c171d4d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs
@@ -3,14 +3,14 @@
     <div class="tag-name">
       {{#if editing}}
         <div class="edit-tag-wrapper">
-          {{text-field id="edit-name" value=(readonly tagInfo.name) maxlength=siteSettings.max_tag_length input=(action (mut newTagName) value="target.value") autofocus="true"}}
-          {{text-field id="edit-description" value=(readonly tagInfo.description) placeholder=(i18n "tagging.description") maxlength=280 input=(action (mut newTagDescription) value="target.value") autofocus="true"}}
+          <TextField @id="edit-name" @value={{readonly tagInfo.name}} @maxlength={{siteSettings.max_tag_length}} @input={{action (mut newTagName) value="target.value"}} @autofocus="true" />
+          <TextField @id="edit-description" @value={{readonly tagInfo.description}} @placeholder={{i18n "tagging.description"}} @maxlength={{280}} @input={{action (mut newTagDescription) value="target.value"}} @autofocus="true" />
 
           <div class="edit-controls">
             {{#unless updateDisabled}}
-              {{d-button action=(action "finishedEditing") class="btn-primary submit-edit" icon="check" ariaLabel="tagging.save"}}
+              <DButton @action={{action "finishedEditing"}} @class="btn-primary submit-edit" @icon="check" @ariaLabel="tagging.save" />
             {{/unless}}
-            {{d-button action=(action "cancelEditing") class="btn-default cancel-edit" icon="times" ariaLabel="cancel"}}
+            <DButton @action={{action "cancelEditing"}} @class="btn-default cancel-edit" @icon="times" @ariaLabel="cancel" />
           </div>
         </div>
       {{else}}
@@ -72,28 +72,17 @@
       <section class="add-synonyms field">
         <label for="add-synonyms">{{i18n "tagging.add_synonyms_label"}}</label>
         <div>
-          {{tag-chooser
-            id="add-synonyms"
-            tags=newSynonyms
-            blockedTags=(array tagInfo.name)
-            everyTag=true
-            excludeSynonyms=true
-            excludeHasSynonyms=true
-            unlimitedTagCount=true}}
-          {{d-button
-            class="ok"
-            action=(action "addSynonyms")
-            disabled=addSynonymsDisabled
-            icon="check"}}
+          <TagChooser @id="add-synonyms" @tags={{newSynonyms}} @blockedTags={{array tagInfo.name}} @everyTag={{true}} @excludeSynonyms={{true}} @excludeHasSynonyms={{true}} @unlimitedTagCount={{true}} />
+          <DButton @class="ok" @action={{action "addSynonyms"}} @disabled={{addSynonymsDisabled}} @icon="check" />
         </div>
       </section>
     {{/if}}
     {{#if canAdminTag}}
-      {{plugin-outlet name="tag-custom-settings" args=(hash tag=tagInfo) tagName="section"}}
+      <PluginOutlet @name="tag-custom-settings" @args={{hash tag=tagInfo}} @tagName="section" />
       <div class="tag-actions">
-        {{d-button class="btn-default" action=(action "toggleEditControls") icon="cog" label="tagging.edit_synonyms" id="edit-synonyms"}}
+        <DButton @class="btn-default" @action={{action "toggleEditControls"}} @icon="cog" @label="tagging.edit_synonyms" @id="edit-synonyms" />
         {{#if deleteAction}}
-          {{d-button class="btn-danger delete-tag" action=(action "deleteTag") icon="far-trash-alt" label="tagging.delete_tag" id="delete-tag"}}
+          <DButton @class="btn-danger delete-tag" @action={{action "deleteTag"}} @icon="far-trash-alt" @label="tagging.delete_tag" @id="delete-tag" />
         {{/if}}
       </div>
     {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-list.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-list.hbs
index e02568a225b..7a2b3c02a87 100644
--- a/app/assets/javascripts/discourse/app/templates/components/tag-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/tag-list.hbs
@@ -2,7 +2,7 @@
   <h3>{{title}}</h3>
 {{/if}}
 {{#if category}}
-  {{category-title-link category=category}}
+  <CategoryTitleLink @category={{category}} />
 {{/if}}
 {{#if tagGroupName}}
   <h3>{{tagGroupName}}</h3>
diff --git a/app/assets/javascripts/discourse/app/templates/components/time-input.hbs b/app/assets/javascripts/discourse/app/templates/components/time-input.hbs
index 8dd13ff06b3..9d6103a3b56 100644
--- a/app/assets/javascripts/discourse/app/templates/components/time-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/time-input.hbs
@@ -1,12 +1,7 @@
-{{combo-box
-  value=time
-  content=timeOptions
-  onChange=(action "onChangeTime")
-  options=(hash
+<ComboBox @value={{time}} @content={{timeOptions}} @onChange={{action "onChangeTime"}} @options={{hash
     translatedNone="--:--"
     allowAny=true
     filterable=false
     autoInsertNoneItem=false
     translatedFilterPlaceholder="--:--"
-  )
-}}
+  }} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs
index d8b03ffa422..1df2609c7be 100644
--- a/app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/time-shortcut-picker.hbs
@@ -1,10 +1,10 @@
-{{#tap-tile-grid activeTile=selectedShortcut as |grid|}}
+<TapTileGrid @activeTile={{selectedShortcut}} as |grid|>
   {{#each options as |option|}}
     {{#unless option.hidden}}
-      {{#tap-tile icon=option.icon tileId=option.id activeTile=grid.activeTile onChange=(action "selectShortcut")}}
+      <TapTile @icon={{option.icon}} @tileId={{option.id}} @activeTile={{grid.activeTile}} @onChange={{action "selectShortcut"}}>
         <div class="tap-tile-title">{{i18n option.label}}</div>
         <div class="tap-tile-date">{{option.timeFormatted}}</div>
-      {{/tap-tile}}
+      </TapTile>
     {{/unless}}
 
     {{#if option.isCustomTimeShortcut}}
@@ -12,22 +12,18 @@
         <div class="control-group custom-date-time-wrap custom-input-wrap">
           <div class="tap-tile-date-input">
             {{d-icon "calendar-alt"}}
-            {{date-picker-future
-            value=customDate
-            onSelect=(action (mut customDate))
-            id="custom-date"
-            }}
+            <DatePickerFuture @value={{customDate}} @onSelect={{action (mut customDate)}} @id="custom-date" />
           </div>
           <div class="tap-tile-time-input">
             {{d-icon "far-clock"}}
-            {{input placeholder="--:--" id="custom-time" type="time" class="time-input" value=customTime}}
+            <Input placeholder="--:--" @id="custom-time" @type="time" class="time-input" @value={{customTime}} />
           </div>
         </div>
         <div class="control-group custom-date-time-wrap custom-relative-wrap">
           <label class="control-label">{{i18n "relative_time_picker.relative"}}</label>
-          {{relative-time-picker onChange=(action "relativeTimeChanged")}}
+          <RelativeTimePicker @onChange={{action "relativeTimeChanged"}} />
         </div>
       {{/if}}
     {{/if}}
   {{/each}}
-{{/tap-tile-grid}}
+</TapTileGrid>
diff --git a/app/assets/javascripts/discourse/app/templates/components/top-period-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/top-period-buttons.hbs
index 770688531e9..4f4898e1691 100644
--- a/app/assets/javascripts/discourse/app/templates/components/top-period-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/top-period-buttons.hbs
@@ -1,3 +1,3 @@
 {{#each periods as |p|}}
-  {{d-button action=(action "changePeriod") class="btn-default" actionParam=p translatedLabel=(period-title p)}}
+  <DButton @action={{action "changePeriod"}} @class="btn-default" @actionParam={{p}} @translatedLabel={{period-title p}} />
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-category.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-category.hbs
index 1b302847afd..27bd49073e5 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-category.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-category.hbs
@@ -12,4 +12,4 @@
   {{/if}}
 </div>
 
-{{plugin-outlet name="topic-category" tagName="span" connectorTagName="div" args=(hash topic=topic category=topic.category)}}
+<PluginOutlet @name="topic-category" @tagName="span" @connectorTagName="div" @args={{hash topic=topic category=topic.category}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-dismiss-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-dismiss-buttons.hbs
index 32d9e25d5d4..cf3474e3cbd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-dismiss-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-dismiss-buttons.hbs
@@ -1,20 +1,10 @@
 {{#if showBasedOnPosition}}
   <div class="row {{containerClass}}">
     {{#if showDismissRead}}
-      {{d-button
-        class="btn-default dismiss-read"
-        id=dismissReadId
-        action=(action "dismissReadPosts")
-        translatedLabel=dismissLabel
-        title="topics.bulk.dismiss_tooltip"}}
+      <DButton @class="btn-default dismiss-read" @id={{dismissReadId}} @action={{action "dismissReadPosts"}} @translatedLabel={{dismissLabel}} @title="topics.bulk.dismiss_tooltip" />
     {{/if}}
     {{#if showResetNew}}
-      {{d-button
-        class="btn-default dismiss-read"
-        id=dismissNewId
-        action=resetNew
-        icon="check"
-        translatedLabel=dismissNewLabel}}
+      <DButton @class="btn-default dismiss-read" @id={{dismissNewId}} @action={{resetNew}} @icon="check" @translatedLabel={{dismissNewLabel}} />
     {{/if}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-entrance.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-entrance.hbs
index b7947a4f145..7e550e6e700 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-entrance.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-entrance.hbs
@@ -1,7 +1,7 @@
-{{#d-button action=(action "enterTop") class="btn-default full jump-top" ariaLabel="topic_entrance.sr_jump_top_button"}}
+<DButton @action={{action "enterTop"}} @class="btn-default full jump-top" @ariaLabel="topic_entrance.sr_jump_top_button">
   {{d-icon "step-backward"}} {{html-safe topDate}}
-{{/d-button}}
+</DButton>
 
-{{#d-button action=(action "enterBottom") class="btn-default full jump-bottom" ariaLabel="topic_entrance.sr_jump_bottom_button"}}
+<DButton @action={{action "enterBottom"}} @class="btn-default full jump-bottom" @ariaLabel="topic_entrance.sr_jump_bottom_button">
   {{html-safe bottomDate}} {{d-icon "step-forward"}}
-{{/d-button}}
+</DButton>
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
index a58b01c9e71..1801b696d3d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
@@ -1,81 +1,35 @@
 <div class="topic-footer-main-buttons">
-  {{topic-admin-menu-button
-    topic=topic
-    openUpwards="true"
-    toggleMultiSelect=toggleMultiSelect
-    showTopicSlowModeUpdate=showTopicSlowModeUpdate
-    deleteTopic=deleteTopic
-    recoverTopic=recoverTopic
-    toggleFeaturedOnProfile=toggleFeaturedOnProfile
-    toggleClosed=toggleClosed
-    toggleArchived=toggleArchived
-    toggleVisibility=toggleVisibility
-    showTopicTimerModal=showTopicTimerModal
-    showFeatureTopic=showFeatureTopic
-    showChangeTimestamp=showChangeTimestamp
-    resetBumpDate=resetBumpDate
-    convertToPublicTopic=convertToPublicTopic
-    convertToPrivateMessage=convertToPrivateMessage
-  }}
+  <TopicAdminMenuButton @topic={{topic}} @openUpwards="true" @toggleMultiSelect={{toggleMultiSelect}} @showTopicSlowModeUpdate={{showTopicSlowModeUpdate}} @deleteTopic={{deleteTopic}} @recoverTopic={{recoverTopic}} @toggleFeaturedOnProfile={{toggleFeaturedOnProfile}} @toggleClosed={{toggleClosed}} @toggleArchived={{toggleArchived}} @toggleVisibility={{toggleVisibility}} @showTopicTimerModal={{showTopicTimerModal}} @showFeatureTopic={{showFeatureTopic}} @showChangeTimestamp={{showChangeTimestamp}} @resetBumpDate={{resetBumpDate}} @convertToPublicTopic={{convertToPublicTopic}} @convertToPrivateMessage={{convertToPrivateMessage}} />
 
   {{#if site.mobileView}}
-    {{topic-footer-mobile-dropdown topic=topic content=dropdownButtons}}
+    <TopicFooterMobileDropdown @topic={{topic}} @content={{dropdownButtons}} />
   {{/if}}
 
   {{#each inlineActionables as |actionable|}}
     {{#if (eq actionable.type "inline-button")}}
-      {{d-button
-        id=(concat "topic-footer-button-" actionable.id)
-        class=(concat "btn-default topic-footer-button " actionable.classNames)
-        action=actionable.action
-        icon=actionable.icon
-        translatedLabel=actionable.label
-        translatedTitle=actionable.title
-        translatedAriaLabel=actionable.ariaLabel
-        disabled=actionable.disabled
-      }}
+      <DButton @id={{concat "topic-footer-button-" actionable.id}} @class={{concat "btn-default topic-footer-button " actionable.classNames}} @action={{actionable.action}} @icon={{actionable.icon}} @translatedLabel={{actionable.label}} @translatedTitle={{actionable.title}} @translatedAriaLabel={{actionable.ariaLabel}} @disabled={{actionable.disabled}} />
     {{else}}
-      {{dropdown-select-box
-        id=(concat "topic-footer-dropdown-" actionable.id)
-        value=actionable.value
-        class=(concat "topic-footer-dropdown " actionable.classNames)
-        content=actionable.content
-        onChange=(action actionable.action)
-        options=(hash
+      <DropdownSelectBox @id={{concat "topic-footer-dropdown-" actionable.id}} @value={{actionable.value}} @class={{concat "topic-footer-dropdown " actionable.classNames}} @content={{actionable.content}} @onChange={{action actionable.action}} @options={{hash
           icon=actionable.icon
           none=actionable.noneItem
           disabled=actionable.disabled
-        )
-      }}
+        }} />
     {{/if}}
   {{/each}}
 
-  {{plugin-outlet name="topic-footer-main-buttons-before-create"
-                  args=(hash topic=topic)
-                  connectorTagName="span"}}
+  <PluginOutlet @name="topic-footer-main-buttons-before-create" @args={{hash topic=topic}} @connectorTagName="span" />
 
   {{#if topic.details.can_create_post}}
-    {{d-button class="btn-primary create"
-               icon="reply"
-               action=replyToPost
-               label="topic.reply.title"
-               title="topic.reply.help"}}
+    <DButton @class="btn-primary create" @icon="reply" @action={{replyToPost}} @label="topic.reply.title" @title="topic.reply.help" />
   {{/if}}
 
-  {{plugin-outlet name="after-topic-footer-main-buttons"
-                  args=(hash topic=topic)
-                  connectorTagName="span"}}
+  <PluginOutlet @name="after-topic-footer-main-buttons" @args={{hash topic=topic}} @connectorTagName="span" />
 </div>
 
-{{pinned-button pinned=topic.pinned topic=topic}}
+<PinnedButton @pinned={{topic.pinned}} @topic={{topic}} />
 
 {{#if showNotificationsButton}}
-  {{topic-notifications-button
-    notificationLevel=topic.details.notification_level
-    topic=topic
-  }}
+  <TopicNotificationsButton @notificationLevel={{topic.details.notification_level}} @topic={{topic}} />
 {{/if}}
 
-{{plugin-outlet name="after-topic-footer-buttons"
-                args=(hash topic=topic)
-                connectorTagName="span"}}
+<PluginOutlet @name="after-topic-footer-buttons" @args={{hash topic=topic}} @connectorTagName="span" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
index 1f8575a5df2..33cf78b13c1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
@@ -17,50 +17,26 @@
   </thead>
 {{/unless}}
 
-{{plugin-outlet
-  name="before-topic-list-body"
-  args=(hash
+<PluginOutlet @name="before-topic-list-body" @args={{hash
     topics=topics
     selected=selected
     bulkSelectEnabled=bulkSelectEnabled
     lastVisitedTopic=lastVisitedTopic
     discoveryList=discoveryList
-    hideCategory=hideCategory)
- }}
+    hideCategory=hideCategory}} />
 
 <tbody class="topic-list-body">
   {{#each filteredTopics as |topic index|}}
-    {{topic-list-item topic=topic
-                      bulkSelectEnabled=bulkSelectEnabled
-                      showTopicPostBadges=showTopicPostBadges
-                      hideCategory=hideCategory
-                      showPosters=showPosters
-                      showLikes=showLikes
-                      showOpLikes=showOpLikes
-                      expandGloballyPinned=expandGloballyPinned
-                      expandAllPinned=expandAllPinned
-                      lastVisitedTopic=lastVisitedTopic
-                      selected=selected
-                      lastChecked=lastChecked
-                      tagsForUser=tagsForUser
-                      focusLastVisitedTopic=focusLastVisitedTopic
-                      index=index}}
+    <TopicListItem @topic={{topic}} @bulkSelectEnabled={{bulkSelectEnabled}} @showTopicPostBadges={{showTopicPostBadges}} @hideCategory={{hideCategory}} @showPosters={{showPosters}} @showLikes={{showLikes}} @showOpLikes={{showOpLikes}} @expandGloballyPinned={{expandGloballyPinned}} @expandAllPinned={{expandAllPinned}} @lastVisitedTopic={{lastVisitedTopic}} @selected={{selected}} @lastChecked={{lastChecked}} @tagsForUser={{tagsForUser}} @focusLastVisitedTopic={{focusLastVisitedTopic}} @index={{index}} />
     {{raw "list/visited-line" lastVisitedTopic=lastVisitedTopic topic=topic}}
-    {{plugin-outlet
-      name="after-topic-list-item"
-      args=(hash topic=topic index=index)
-      connectorTagName="tr"
-    }}
+    <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
   {{/each}}
 </tbody>
 
-{{plugin-outlet
-  name="after-topic-list-body"
-  args=(hash
+<PluginOutlet @name="after-topic-list-body" @args={{hash
     topics=topics
     selected=selected
     bulkSelectEnabled=bulkSelectEnabled
     lastVisitedTopic=lastVisitedTopic
     discoveryList=discoveryList
-    hideCategory=hideCategory)
- }}
+    hideCategory=hideCategory}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs
index 66c5f3e2115..7a859f4538d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs
@@ -1,6 +1,6 @@
 {{#unless hidden}}
   <div class="topic-navigation-popup">
-    {{d-button action=(action "close") class="close btn-flat" icon="times"}}
+    <DButton @action={{action "close"}} @class="close btn-flat" @icon="times" />
     {{yield}}
   </div>
 {{/unless}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-progress.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-progress.hbs
index e110f2098cc..1574c1d0296 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-progress.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-progress.hbs
@@ -4,7 +4,7 @@
 
 {{#if showBackButton}}
   <div class="progress-back-container">
-    {{d-button label="topic.timeline.back" class="btn-primary progress-back" action=(action "goBack") icon="arrow-down"}}
+    <DButton @label="topic.timeline.back" @class="btn-primary progress-back" @action={{action "goBack"}} @icon="arrow-down" />
   </div>
 {{/if}}
 
@@ -19,4 +19,4 @@
   <div class="bg"></div>
 </nav>
 
-{{plugin-outlet name="after-topic-progress" tagName="" connectorTagName="div"}}
+<PluginOutlet @name="after-topic-progress" @tagName="" @connectorTagName="div" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-status.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-status.hbs
index ab63a3a40bd..6f53c219bba 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-status.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-status.hbs
@@ -30,4 +30,4 @@
 {{~#if topicInvisible~}}
   <span title={{invisibleTitle}} class="topic-status">{{invisibleIcon}}</span>
 {{~/if~}}
-{{plugin-outlet name="after-topic-status" connectorTagName="div" args=(hash topic=topic)~}}
+<PluginOutlet @name="after-topic-status" @connectorTagName="div" @args={{hash topic=topic}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-timer-info.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-timer-info.hbs
index c2cb0d0a1ed..15cbdaff173 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-timer-info.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-timer-info.hbs
@@ -5,20 +5,10 @@
     </span>
     <div class="topic-timer-modify">
       {{#if showEdit}}
-        {{~d-button
-          title="post.controls.edit_timer"
-          icon="pencil-alt"
-          class="btn topic-timer-edit no-text"
-          action=showTopicTimerModal
-        ~}}
+        <DButton @title="post.controls.edit_timer" @icon="pencil-alt" @class="btn topic-timer-edit no-text" @action={{showTopicTimerModal}} />
       {{/if}}
       {{#if showTrashCan}}
-        {{~d-button
-          title="post.controls.remove_timer"
-          icon="trash-alt"
-          class="btn topic-timer-remove no-text"
-          action=removeTopicTimer
-        ~}}
+        <DButton @title="post.controls.remove_timer" @icon="trash-alt" @class="btn topic-timer-remove no-text" @action={{removeTopicTimer}} />
       {{/if}}
     </div>
   </h3>
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-title.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-title.hbs
index 8aa4279fe60..aa418dff106 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-title.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-title.hbs
@@ -2,5 +2,5 @@
   <div class="title-wrapper">
     {{yield}}
   </div>
-  {{plugin-outlet name="topic-title" tagName="span" connectorTagName="div" args=(hash model=model)}}
+  <PluginOutlet @name="topic-title" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/track-selected.hbs b/app/assets/javascripts/discourse/app/templates/components/track-selected.hbs
index dcc61529505..2d7c73231c7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/track-selected.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/track-selected.hbs
@@ -1 +1 @@
-{{input type="checkbox" checked=selected}}
+<Input @type="checkbox" @checked={{selected}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs
index 9244794936c..50a3314eb6a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs
@@ -5,25 +5,13 @@
   <div class="image-upload-controls">
     <label class="btn btn-default pad-left no-text {{if uploadingOrProcessing "disabled"}}">
       {{d-icon "far-image"}}
-      {{pick-files-button fileInputDisabled=uploadingOrProcessing fileInputClass="hidden-upload-field" acceptedFormatsOverride="image/*" }}
+      <PickFilesButton @fileInputDisabled={{uploadingOrProcessing}} @fileInputClass="hidden-upload-field" @acceptedFormatsOverride="image/*" />
     </label>
 
     {{#if imageUrl}}
-      {{d-button
-        action=(action "trash")
-        class="btn-danger pad-left no-text"
-        icon="far-trash-alt"
-        type="button"
-      }}
+      <DButton @action={{action "trash"}} @class="btn-danger pad-left no-text" @icon="far-trash-alt" @type="button" />
 
-      {{d-button
-        icon="discourse-expand"
-        title="expand"
-        type="button"
-        class="image-uploader-lightbox-btn no-text"
-        action=(action "toggleLightbox")
-        disabled=loadingLightbox
-      }}
+      <DButton @icon="discourse-expand" @title="expand" @type="button" @class="image-uploader-lightbox-btn no-text" @action={{action "toggleLightbox"}} @disabled={{loadingLightbox}} />
     {{/if}}
 
     <span class="btn {{unless uploading "hidden"}}">{{i18n "upload_selector.uploading"}} {{uploadProgress}}%</span>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-avatar-flair.hbs b/app/assets/javascripts/discourse/app/templates/components/user-avatar-flair.hbs
index cf88fa58040..6cfdaa4e287 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-avatar-flair.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-avatar-flair.hbs
@@ -1,8 +1,3 @@
 {{#if flair}}
-  {{avatar-flair
-    flairName=flair.flairName
-    flairUrl=flair.flairUrl
-    flairBgColor=flair.flairBgColor
-    flairColor=flair.flairColor
-  }}
+  <AvatarFlair @flairName={{flair.flairName}} @flairUrl={{flair.flairUrl}} @flairBgColor={{flair.flairBgColor}} @flairColor={{flair.flairColor}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs b/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
index 5d89b20eb6b..9fce4fc5f95 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
@@ -1,7 +1,7 @@
 <a class="user-card-badge-link" href={{this.badgeUrl}}>
-  {{#badge-button badge=@badge}}
+  <BadgeButton @badge={{@badge}}>
     {{#if this.showGrantCount}}
       <span class="count">(&times;&nbsp;{{@count}})</span>
     {{/if}}
-  {{/badge-button}}
+  </BadgeButton>
 </a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
index 89e805b1c8a..079ebdb24ee 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
@@ -1,5 +1,5 @@
 {{#if this.visible}}
-  {{plugin-outlet name="before-user-card-content" args=(hash user=this.user)}}
+  <PluginOutlet @name="before-user-card-content" @args={{hash user=this.user}} />
   <div class="card-content">
     {{#if this.loading}}
       <div class="card-row first-row">
@@ -29,9 +29,9 @@
             <a href={{this.user.path}} {{action "showUser" this.user}} class="card-huge-avatar">{{bound-avatar this.user "huge"}}</a>
           {{/if}}
 
-          {{user-avatar-flair user=this.user}}
+          <UserAvatarFlair @user={{this.user}} />
 
-          {{plugin-outlet name="user-card-avatar-flair" connectorTagName="div" args=(hash user=this.user) tagName="div"}}
+          <PluginOutlet @name="user-card-avatar-flair" @connectorTagName="div" @args={{hash user=this.user}} @tagName="div" />
         </div>
         <div class="names">
           <h1 class="{{this.staff}} {{this.newUser}} {{if this.nameFirst "full-name" "username"}}">
@@ -48,7 +48,7 @@
               </a>
             {{/if}}
           </h1>
-          {{plugin-outlet name="user-card-after-username" connectorTagName="div" args=(hash user=this.user showUser=(action "showUser" this.user))}}
+          <PluginOutlet @name="user-card-after-username" @connectorTagName="div" @args={{hash user=this.user showUser=(action "showUser" this.user)}} />
           {{#if this.nameFirst}}
             <h2 class="username">{{this.user.username}}</h2>
           {{else}}
@@ -65,58 +65,33 @@
           {{#if this.hasStatus}}
             <h3 class="user-status">{{html-safe this.userStatusEmoji}} {{this.user.status.description}}</h3>
           {{/if}}
-          {{plugin-outlet name="user-card-post-names" connectorTagName="div" args=(hash user=this.user) tagName="div"}}
+          <PluginOutlet @name="user-card-post-names" @connectorTagName="div" @args={{hash user=this.user}} @tagName="div" />
         </div>
         <ul class="usercard-controls">
           {{#if this.user.can_send_private_message_to_user}}
             <li class="compose-pm">
-              {{d-button
-              class="btn-primary"
-              action=(action "composePM" this.user this.post)
-              icon="envelope"
-              label="user.private_message"}}
+              <DButton @class="btn-primary" @action={{action "composePM" this.user this.post}} @icon="envelope" @label="user.private_message" />
             </li>
           {{/if}}
-          {{plugin-outlet
-          name="user-card-below-message-button" connectorTagName="li"
-          args=(hash user=this.user close=(action "close"))
-          tagName=""}}
+          <PluginOutlet @name="user-card-below-message-button" @connectorTagName="li" @args={{hash user=this.user close=(action "close")}} @tagName="" />
           {{#if this.showFilter}}
             <li>
-              {{d-button
-              class="btn-default"
-              action=(action "filterPosts" this.user)
-              icon="filter"
-              translatedLabel=this.filterPostsLabel}}
+              <DButton @class="btn-default" @action={{action "filterPosts" this.user}} @icon="filter" @translatedLabel={{this.filterPostsLabel}} />
             </li>
           {{/if}}
           {{#if this.hasUserFilters}}
             <li>
-              {{d-button
-              action=(action "cancelFilter")
-              icon="times"
-              label="topic.filters.cancel"}}
+              <DButton @action={{action "cancelFilter"}} @icon="times" @label="topic.filters.cancel" />
             </li>
           {{/if}}
           {{#if this.showDelete}}
             <li>
-              {{d-button
-              class="btn-danger"
-              action=(action "deleteUser")
-              actionParam=this.user
-              icon="exclamation-triangle"
-              label="admin.user.delete"}}
+              <DButton @class="btn-danger" @action={{action "deleteUser"}} @actionParam={{this.user}} @icon="exclamation-triangle" @label="admin.user.delete" />
             </li>
           {{/if}}
-          {{plugin-outlet
-            name="user-card-additional-buttons" connectorTagName="div"
-            args=(hash user=this.user close=(action "close"))
-            tagName="li"}}
+          <PluginOutlet @name="user-card-additional-buttons" @connectorTagName="div" @args={{hash user=this.user close=(action "close")}} @tagName="li" />
         </ul>
-        {{plugin-outlet
-        name="user-card-additional-controls" connectorTagName="div"
-        args=(hash user=this.user close=(action "close"))
-       }}
+        <PluginOutlet @name="user-card-additional-controls" @connectorTagName="div" @args={{hash user=this.user close=(action "close")}} />
       </div>
 
       {{#if this.user.profile_hidden}}
@@ -147,9 +122,9 @@
           {{else}}
             {{#if this.user.bio_excerpt}}
               <div class="bio">
-                {{#html-with-links}}
+                <HtmlWithLinks>
                   {{html-safe this.user.bio_excerpt}}
-                {{/html-with-links}}
+                </HtmlWithLinks>
               </div>
             {{/if}}
           {{/if}}
@@ -160,7 +135,7 @@
         <div class="card-row">
           <div class="featured-topic">
             <span class="desc">{{i18n "user.featured_topic"}}</span>
-            {{#link-to "topic" this.user.featured_topic.slug this.user.featured_topic.id }}{{html-safe (replace-emoji this.user.featured_topic.fancy_title)}}{{/link-to}}
+            <LinkTo @route="topic" @models={{array this.user.featured_topic.slug this.user.featured_topic.id}}>{{html-safe (replace-emoji this.user.featured_topic.fancy_title)}}</LinkTo>
           </div>
         </div>
       {{/if}}
@@ -192,7 +167,7 @@
                 <span>{{this.formattedUserLocalTime}}</span>
               </span>
             {{/if}}
-            {{plugin-outlet name="user-card-location-and-website" tagName="span" connectorTagName="div" args=(hash user=this.user)}}
+            <PluginOutlet @name="user-card-location-and-website" @tagName="span" @connectorTagName="div" @args={{hash user=this.user}} />
           </div>
         </div>
       {{/if}}
@@ -221,19 +196,14 @@
                 {{#if this.user.email}}
                   {{this.user.email}}
                 {{else}}
-                  {{d-button
-                    action=(action "checkEmail")
-                    actionParam=this.user
-                    icon="far-envelope"
-                    label="admin.users.check_email.text"
-                    class="btn-primary"}}
+                  <DButton @action={{action "checkEmail"}} @actionParam={{this.user}} @icon="far-envelope" @label="admin.users.check_email.text" @class="btn-primary" />
                 {{/if}}
               </h3>
             {{/if}}
-            {{plugin-outlet name="user-card-metadata" connectorTagName="div" args=(hash user=this.user)}}
+            <PluginOutlet @name="user-card-metadata" @connectorTagName="div" @args={{hash user=this.user}} />
           </div>
         {{/unless}}
-        {{plugin-outlet name="user-card-after-metadata" connectorTagName="div" args=(hash user=this.user)}}
+        <PluginOutlet @name="user-card-after-metadata" @connectorTagName="div" @args={{hash user=this.user}} />
       </div>
 
       {{#if this.publicUserFields}}
@@ -257,20 +227,20 @@
         </div>
       {{/if}}
 
-      {{plugin-outlet name="user-card-before-badges" connectorTagName="div" args=(hash user=this.user)}}
+      <PluginOutlet @name="user-card-before-badges" @connectorTagName="div" @args={{hash user=this.user}} />
 
       {{#if this.showBadges}}
         <div class="card-row">
           {{#if this.user.featured_user_badges}}
             <div class="badge-section">
               {{#each this.user.featured_user_badges as |ub|}}
-                {{user-badge badge=ub.badge user=this.user}}
+                <UserBadge @badge={{ub.badge}} @user={{this.user}} />
               {{/each}}
               {{#if this.showMoreBadges}}
                 <span class="more-user-badges">
-                  {{#link-to "user.badges" this.user}}
+                  <LinkTo @route="user.badges" @model={{this.user}}>
                     {{i18n "badges.more_badges" count=this.moreBadgesCount}}
-                  {{/link-to}}
+                  </LinkTo>
                 </span>
               {{/if}}
             </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs b/app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs
index d0e67af3caf..5ada05e5fbd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs
@@ -6,7 +6,7 @@
 
 <div class="controls">
   <label class="control-label checkbox-label">
-    {{input id=(concat "user-" this.elementId) checked=this.value type="checkbox"}}
+    <Input @id={{concat "user-" this.elementId}} @checked={{this.value}} @type="checkbox" />
     <span>
       {{html-safe this.field.description}} {{#unless this.field.name}}{{#if this.field.required}}<span class="required">*</span>{{/if}}{{/unless}}
     </span>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs b/app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs
index 540b3f9756e..3ac7a135aa0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs
@@ -6,16 +6,8 @@
 </label>
 
 <div class="controls">
-  {{combo-box
-    id=(concat "user-" this.elementId)
-    content=this.field.options
-    valueProperty=null
-    nameProperty=null
-    value=this.value
-    onChange=(action (mut this.value))
-    options=(hash
+  <ComboBox @id={{concat "user-" this.elementId}} @content={{this.field.options}} @valueProperty={{null}} @nameProperty={{null}} @value={{this.value}} @onChange={{action (mut this.value)}} @options={{hash
       none=this.noneLabel
-    )
-  }}
+    }} />
   <div class="instructions">{{html-safe this.field.description}}</div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs b/app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs
index 250206d8197..3799fd33f7e 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs
@@ -6,16 +6,8 @@
 </label>
 
 <div class="controls">
-  {{multi-select
-    id=(concat "user-" this.elementId)
-    content=this.field.options
-    valueProperty=null
-    nameProperty=null
-    value=this.value
-    onChange=(action (mut this.value))
-    options=(hash
+  <MultiSelect @id={{concat "user-" this.elementId}} @content={{this.field.options}} @valueProperty={{null}} @nameProperty={{null}} @value={{this.value}} @onChange={{action (mut this.value)}} @options={{hash
       none=this.noneLabel
-    )
-  }}
+    }} />
   <div class="instructions">{{html-safe this.field.description}}</div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs b/app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs
index 81c9439cb6a..6f41348587b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs
@@ -3,6 +3,6 @@
   {{#if this.field.required}}<span class="required">*</span>{{/if}}
 </label>
 <div class="controls">
-  {{input id=(concat "user-" this.elementId) value=this.value maxlength=this.site.user_field_max_length}}
+  <Input @id={{concat "user-" this.elementId}} @value={{this.value}} @maxlength={{this.site.user_field_max_length}} />
   <div class="instructions">{{html-safe this.field.description}}</div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-info.hbs b/app/assets/javascripts/discourse/app/templates/components/user-info.hbs
index f22d4c5c425..e0bf9b0ea97 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-info.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-info.hbs
@@ -2,7 +2,7 @@
   <div class="user-image">
     <div class="user-image-inner">
       <a href={{this.userPath}} data-user-card={{@user.username}}>{{avatar @user imageSize="large"}}</a>
-      {{user-avatar-flair user=@user}}
+      <UserAvatarFlair @user={{@user}} />
     </div>
   </div>
 {{/if}}
@@ -27,7 +27,7 @@
         {{if nameFirst (format-username @user.username) @user.name}}
       {{/if}}
     </span>
-    {{plugin-outlet name="after-user-name" tagName="span" connectorTagName="span" args=(hash user=user)}}
+    <PluginOutlet @name="after-user-name" @tagName="span" @connectorTagName="span" @args={{hash user=user}} />
   </div>
   <div class="title">{{@user.title}}</div>
 
@@ -39,4 +39,4 @@
 
 </div>
 
-{{plugin-outlet name="after-user-info" tagName="span" connectorTagName="div" args=(hash user=user)}}
+<PluginOutlet @name="after-user-info" @tagName="span" @connectorTagName="div" @args={{hash user=user}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule-day.hbs b/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule-day.hbs
index b03f1672287..cbf03f76ac4 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule-day.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule-day.hbs
@@ -1,22 +1,12 @@
 <tr class="day {{dayLabel}}">
   <td class="day-label">{{dayLabel}}</td>
   <td class="starts-at">
-    {{combo-box
-      valueProperty="value"
-      content=startTimeOptions
-      value=startTimeValue
-      onChange=onChangeStartTime
-    }}
+    <ComboBox @valueProperty="value" @content={{startTimeOptions}} @value={{startTimeValue}} @onChange={{onChangeStartTime}} />
   </td>
   {{#if endTimeOptions}}
     <td class="to">{{i18n "user.notification_schedule.to"}}</td>
     <td class="ends-at">
-      {{combo-box
-        valueProperty="value"
-        content=endTimeOptions
-        value=endTimeValue
-        onChange=onChangeEndTime
-      }}
+      <ComboBox @valueProperty="value" @content={{endTimeOptions}} @value={{endTimeValue}} @onChange={{onChangeEndTime}} />
     </td>
   {{/if}}
 </tr>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule.hbs b/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule.hbs
index acc1486e76c..f06312b45e6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-notification-schedule.hbs
@@ -1,8 +1,6 @@
 <div class="control-group notification-schedule">
   <label class="control-label">{{i18n "user.notification_schedule.title"}}</label>
-  {{preference-checkbox
-      labelKey="user.notification_schedule.label"
-      checked=model.user_notification_schedule.enabled}}
+  <PreferenceCheckbox @labelKey="user.notification_schedule.label" @checked={{model.user_notification_schedule.enabled}} />
 
   {{#if model.user_notification_schedule.enabled}}
     <div class="instruction">{{i18n "user.notification_schedule.tip"}}</div>
@@ -10,15 +8,7 @@
     <table class="notification-schedule-table">
       <tbody class="notification-schedule-tbody">
         {{#each days as |day|}}
-          {{user-notification-schedule-day
-            day=day.day
-            startTimeOptions=day.startTimeOptions
-            startTimeValue=day.startTimeValue
-            onChangeStartTime=day.onChangeStartTime
-            endTimeOptions=day.endTimeOptions
-            endTimeValue=day.endTimeValue
-            onChangeEndTime=day.onChangeEndTime
-          }}
+          <UserNotificationScheduleDay @day={{day.day}} @startTimeOptions={{day.startTimeOptions}} @startTimeValue={{day.startTimeValue}} @onChangeStartTime={{day.onChangeStartTime}} @endTimeOptions={{day.endTimeOptions}} @endTimeValue={{day.endTimeValue}} @onChangeEndTime={{day.onChangeEndTime}} />
         {{/each}}
       </tbody>
     </table>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs b/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs
index 6d663cc29bc..4bb2e2a7ea6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-profile-avatar.hbs
@@ -1,5 +1,5 @@
 <div class="user-profile-avatar">
   {{bound-avatar @user "huge"}}
-  {{user-avatar-flair user=@user}}
-  {{plugin-outlet name="user-profile-avatar-flair" connectorTagName="div" args=(hash model=@user) tagName="div"}}
+  <UserAvatarFlair @user={{@user}} />
+  <PluginOutlet @name="user-profile-avatar-flair" @connectorTagName="div" @args={{hash model=@user}} @tagName="div" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-status-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/user-status-picker.hbs
index 046feaf844a..d1b6d1002d0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-status-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-status-picker.hbs
@@ -22,9 +22,4 @@
       {{on "blur" this.blur}} />
   </div>
 </div>
-{{emoji-picker
-  isActive=this.emojiPickerIsActive
-  emojiSelected=(action "emojiSelected")
-  onEmojiPickerClose=(action "onEmojiPickerOutsideClick")
-  placement="bottom"
-}}
+<EmojiPicker @isActive={{this.emojiPickerIsActive}} @emojiSelected={{action "emojiSelected"}} @onEmojiPickerClose={{action "onEmojiPickerOutsideClick"}} @placement="bottom" />
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-stream-item.hbs b/app/assets/javascripts/discourse/app/templates/components/user-stream-item.hbs
index a894a019bfb..7e94ee17226 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-stream-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-stream-item.hbs
@@ -4,11 +4,11 @@
   {{#if @item.draftType}}
     <span class="draft-type">{{html-safe @item.draftType}}</span>
   {{else}}
-    {{expand-post item=@item}}
+    <ExpandPost @item={{@item}} />
   {{/if}}
   <div class="stream-topic-details">
     <div class="stream-topic-title">
-      {{topic-status topic=@item disableActions=true}}
+      <TopicStatus @topic={{@item}} @disableActions={{true}} />
       <span class="title">
         {{#if @item.postUrl}}
           <a href={{@item.postUrl}}>{{html-safe @item.title}}</a>
@@ -28,7 +28,7 @@
     </span>
   {{/if}}
 
-  {{plugin-outlet name="user-stream-item-header" tagName="span" connectorTagName="div" args=(hash item=@item)}}
+  <PluginOutlet @name="user-stream-item-header" @tagName="span" @connectorTagName="div" @args={{hash item=@item}} />
 </div>
 
 {{#if this.actionDescription}}
@@ -51,12 +51,7 @@
     {{d-icon child.icon class="icon"}}
     {{#each child.items as |grandChild|}}
       {{#if grandChild.removableBookmark}}
-        {{d-button
-          class="btn-default remove-bookmark"
-          action=(action @removeBookmark grandChild)
-          icon="times"
-          label="bookmarks.remove"
-        }}
+        <DButton @class="btn-default remove-bookmark" @action={{action @removeBookmark grandChild}} @icon="times" @label="bookmarks.remove" />
       {{else}}
         <a href={{grandChild.userUrl}} data-user-card={{grandChild.username}} class="avatar-link"><div class="avatar-wrapper">{{avatar grandChild imageSize="tiny" extraClasses="actor" ignoreTitle="true" avatarTemplatePath="acting_avatar_template"}}</div></a>
         {{#if grandChild.edit_reason}} &mdash; <span class="edit-reason">{{grandChild.edit_reason}}</span>{{/if}}
@@ -67,7 +62,7 @@
 
 {{#if @item.editableDraft}}
   <div class="user-stream-item-draft-actions">
-    {{d-button action=@resumeDraft actionParam=@item icon="pencil-alt" label="drafts.resume" class="btn-default resume-draft"}}
-    {{d-button action=@removeDraft actionParam=@item icon="far-trash-alt" class="btn-danger remove-draft"}}
+    <DButton @action={{@resumeDraft}} @actionParam={{@item}} @icon="pencil-alt" @label="drafts.resume" @class="btn-default resume-draft" />
+    <DButton @action={{@removeDraft}} @actionParam={{@item}} @icon="far-trash-alt" @class="btn-danger remove-draft" />
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-stream.hbs b/app/assets/javascripts/discourse/app/templates/components/user-stream.hbs
index b9a007f4ddd..19d9abcb1a7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-stream.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-stream.hbs
@@ -1,8 +1,3 @@
 {{#each @stream.content as |item|}}
-  {{user-stream-item
-      item=item
-      removeBookmark=(action "removeBookmark")
-      resumeDraft=(action "resumeDraft")
-      removeDraft=(action "removeDraft")
-  }}
+  <UserStreamItem @item={{item}} @removeBookmark={{action "removeBookmark"}} @resumeDraft={{action "resumeDraft"}} @removeDraft={{action "removeDraft"}} />
 {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-summary-category-search.hbs b/app/assets/javascripts/discourse/app/templates/components/user-summary-category-search.hbs
index a0e1f3f0e0e..c643b8288d1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-summary-category-search.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-summary-category-search.hbs
@@ -1,7 +1,7 @@
 {{#if @count}}
-  {{#link-to "full-page-search" (query-params q=this.searchParams)}}
+  <LinkTo @route="full-page-search" @query={{hash q=this.searchParams}}>
     {{@count}}
-  {{/link-to}}
+  </LinkTo>
 {{else}}
   &ndash;
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-summary-topics-list.hbs b/app/assets/javascripts/discourse/app/templates/components/user-summary-topics-list.hbs
index d7e60c03aca..f27d5fc84e9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-summary-topics-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-summary-topics-list.hbs
@@ -6,9 +6,9 @@
   </ul>
   {{#if this.hasMore}}
     <p>
-      {{#link-to (concat "userActivity." @type) @user class="more"}}
+      <LinkTo @route={{concat "userActivity." @type}} @model={{@user}} class="more">
         {{i18n (concat "user.summary.more_" @type)}}
-      {{/link-to}}
+      </LinkTo>
     </p>
   {{/if}}
 {{else}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-summary-user.hbs b/app/assets/javascripts/discourse/app/templates/components/user-summary-user.hbs
index 6213d66c83f..3331fe2fc4d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-summary-user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-summary-user.hbs
@@ -1,4 +1,4 @@
-{{#user-info user=@user}}
+<UserInfo @user={{@user}}>
   {{d-icon @icon}}
   <span class={{@countClass}}>{{number @user.count}}</span>
-{{/user-info}}
+</UserInfo>
diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index 71d136501cb..3542d7cfd88 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -1,35 +1,19 @@
-{{#composer-body
-  composer=model
-  showPreview=showPreview
-  openIfDraft=(action "openIfDraft")
-  typed=(action "typed")
-  cancelled=(action "cancelled")
-  save=(action "save")
-}}
+<ComposerBody @composer={{model}} @showPreview={{showPreview}} @openIfDraft={{action "openIfDraft"}} @typed={{action "typed"}} @cancelled={{action "cancelled"}} @save={{action "save"}}>
   <div class="grippie"></div>
 
   {{#if visible}}
-    {{composer-messages
-      composer=model
-      messageCount=messageCount
-      addLinkLookup=(action "addLinkLookup")
-    }}
+    <ComposerMessages @composer={{model}} @messageCount={{messageCount}} @addLinkLookup={{action "addLinkLookup"}} />
 
     {{#if model.viewOpenOrFullscreen}}
       <div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags" "without-tags"}}">
-        {{plugin-outlet name="composer-open" tagName="span" connectorTagName="div" args=(hash model=model)}}
+        <PluginOutlet @name="composer-open" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
         <div class="reply-to">
           {{#unless model.viewFullscreen}}
             <div class="reply-details">
-              {{composer-action-title
-                model=model
-                openComposer=(action "openComposer")
-                closeComposer=(action "closeComposer")
-                canWhisper=canWhisper
-              }}
+              <ComposerActionTitle @model={{model}} @openComposer={{action "openComposer"}} @closeComposer={{action "closeComposer"}} @canWhisper={{canWhisper}} />
 
-              {{plugin-outlet name="composer-action-after" args=(hash model=model)}}
+              <PluginOutlet @name="composer-action-after" @args={{hash model=model}} />
 
               {{#unless site.mobileView}}
                 {{#if model.unlistTopic}}
@@ -43,67 +27,28 @@
               {{/unless}}
 
               {{#if canEdit}}
-                {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason icon="info-circle" class="display-edit-reason"}}
-                  {{text-field value=editReason id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
-                {{/link-to-input}}
+                <LinkToInput @onClick={{action "displayEditReason"}} @showInput={{showEditReason}} @icon="info-circle" @class="display-edit-reason">
+                  <TextField @value={{editReason}} @id="edit-reason" @maxlength="255" @placeholderKey="composer.edit_reason_placeholder" />
+                </LinkToInput>
               {{/if}}
             </div>
           {{/unless}}
 
-          {{plugin-outlet name="before-composer-controls" args=(hash model=model)}}
+          <PluginOutlet @name="before-composer-controls" @args={{hash model=model}} />
 
-          {{composer-toggles
-            composeState=model.composeState
-            showToolbar=showToolbar
-            toggleComposer=(action "toggle")
-            toggleToolbar=(action "toggleToolbar")
-            toggleFullscreen=(action "fullscreenComposer")
-            disableTextarea=disableTextarea
-          }}
+          <ComposerToggles @composeState={{model.composeState}} @showToolbar={{showToolbar}} @toggleComposer={{action "toggle"}} @toggleToolbar={{action "toggleToolbar"}} @toggleFullscreen={{action "fullscreenComposer"}} @disableTextarea={{disableTextarea}} />
         </div>
 
-        {{#composer-editor
-          topic=topic
-          composer=model
-          lastValidatedAt=lastValidatedAt
-          canWhisper=canWhisper
-          storeToolbarState=(action "storeToolbarState")
-          onPopupMenuAction=(action "onPopupMenuAction")
-          showUploadModal=(route-action "showUploadSelector")
-          popupMenuOptions=popupMenuOptions
-          draftStatus=model.draftStatus
-          isUploading=isUploading
-          isProcessingUpload=isProcessingUpload
-          allowUpload=allowUpload
-          uploadIcon=uploadIcon
-          isCancellable=isCancellable
-          uploadProgress=uploadProgress
-          groupsMentioned=(action "groupsMentioned")
-          cannotSeeMention=(action "cannotSeeMention")
-          hereMention=(action "hereMention")
-          importQuote=(action "importQuote")
-          togglePreview=(action "togglePreview")
-          processPreview=showPreview
-          showToolbar=showToolbar
-          afterRefresh=(action "afterRefresh")
-          focusTarget=focusTarget
-          disableTextarea=disableTextarea
-        }}
+        <ComposerEditor @topic={{topic}} @composer={{model}} @lastValidatedAt={{lastValidatedAt}} @canWhisper={{canWhisper}} @storeToolbarState={{action "storeToolbarState"}} @onPopupMenuAction={{action "onPopupMenuAction"}} @showUploadModal={{route-action "showUploadSelector"}} @popupMenuOptions={{popupMenuOptions}} @draftStatus={{model.draftStatus}} @isUploading={{isUploading}} @isProcessingUpload={{isProcessingUpload}} @allowUpload={{allowUpload}} @uploadIcon={{uploadIcon}} @isCancellable={{isCancellable}} @uploadProgress={{uploadProgress}} @groupsMentioned={{action "groupsMentioned"}} @cannotSeeMention={{action "cannotSeeMention"}} @hereMention={{action "hereMention"}} @importQuote={{action "importQuote"}} @togglePreview={{action "togglePreview"}} @processPreview={{showPreview}} @showToolbar={{showToolbar}} @afterRefresh={{action "afterRefresh"}} @focusTarget={{focusTarget}} @disableTextarea={{disableTextarea}}>
           <div class="composer-fields">
             {{#unless model.viewFullscreen}}
               {{#if model.canEditTitle}}
                 {{#if model.creatingPrivateMessage}}
                   <div class="user-selector">
-                    {{composer-user-selector
-                      topicId=topicModel.id
-                      recipients=model.targetRecipients
-                      hasGroups=model.hasTargetGroups
-                      focusTarget=focusTarget
-                      class=(concat "users-input" (if showWarning " can-warn"))
-                    }}
+                    <ComposerUserSelector @topicId={{topicModel.id}} @recipients={{model.targetRecipients}} @hasGroups={{model.hasTargetGroups}} @focusTarget={{focusTarget}} @class={{concat "users-input" (if showWarning " can-warn")}} />
                     {{#if showWarning}}
                       <label class="add-warning">
-                        {{input type="checkbox" checked=model.isWarning}}
+                        <Input @type="checkbox" @checked={{model.isWarning}} />
                         <span>{{i18n "composer.add_warning"}}</span>
                       </label>
                     {{/if}}
@@ -111,57 +56,43 @@
                 {{/if}}
 
                 <div class="title-and-category {{if showPreview "with-preview"}}">
-                  {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
+                  <ComposerTitle @composer={{model}} @lastValidatedAt={{lastValidatedAt}} @focusTarget={{focusTarget}} />
 
                   {{#if model.showCategoryChooser}}
                     <div class="category-input">
-                      {{category-chooser
-                        value=model.categoryId
-                        onChange=(action (mut model.categoryId))
-                        options=(hash
+                      <CategoryChooser @value={{model.categoryId}} @onChange={{action (mut model.categoryId)}} @options={{hash
                           disabled=disableCategoryChooser
                           scopedCategoryId=scopedCategoryId
                           prioritizedCategoryId=prioritizedCategoryId
-                        )
-                      }}
-                      {{popup-input-tip validation=categoryValidation}}
+                        }} />
+                      <PopupInputTip @validation={{categoryValidation}} />
                     </div>
                   {{/if}}
 
                   {{#if canEditTags}}
-                    {{mini-tag-chooser
-                      value=model.tags
-                      onChange=(action (mut model.tags))
-                      options=(hash
+                    <MiniTagChooser @value={{model.tags}} @onChange={{action (mut model.tags)}} @options={{hash
                         disabled=disableTagsChooser
                         categoryId=model.categoryId
                         minimum=model.minimumRequiredTags
-                      )
-                    }}
-                    {{popup-input-tip validation=tagValidation}}
+                      }} />
+                    <PopupInputTip @validation={{tagValidation}} />
                   {{/if}}
                 </div>
               {{/if}}
 
-              {{plugin-outlet name="composer-fields" tagName="span" connectorTagName="div" args=(hash model=model showPreview=showPreview)}}
+              <PluginOutlet @name="composer-fields" @tagName="span" @connectorTagName="div" @args={{hash model=model showPreview=showPreview}} />
             {{/unless}}
           </div>
-        {{/composer-editor}}
+        </ComposerEditor>
 
-        {{plugin-outlet name="composer-after-composer-editor" tagName="span" args=(hash model=model)}}
+        <PluginOutlet @name="composer-after-composer-editor" @tagName="span" @args={{hash model=model}} />
 
         <div class="submit-panel">
-          {{plugin-outlet name="composer-fields-below" tagName="span" connectorTagName="div" args=(hash model=model)}}
+          <PluginOutlet @name="composer-fields-below" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
           <div class="save-or-cancel">
             {{#unless model.viewFullscreen}}
-              {{composer-save-button
-                action=(action "save")
-                icon=saveIcon
-                label=saveLabel
-                forwardEvent=true
-                disableSubmit=disableSubmit
-              }}
+              <ComposerSaveButton @action={{action "save"}} @icon={{saveIcon}} @label={{saveLabel}} @forwardEvent={{true}} @disableSubmit={{disableSubmit}} />
 
               {{#if site.mobileView}}
                 <a href {{action "cancel"}} title={{i18n "cancel"}} class="cancel">
@@ -217,11 +148,11 @@
               {{/if}}
             </div>
 
-            {{plugin-outlet name="composer-after-save-or-cancel" tagName="span" args=(hash model=model)}}
+            <PluginOutlet @name="composer-after-save-or-cancel" @tagName="span" @args={{hash model=model}} />
           </div>
 
           {{#if site.mobileView}}
-            {{plugin-outlet name="composer-mobile-buttons-bottom" tagName="span" args=(hash model=model)}}
+            <PluginOutlet @name="composer-mobile-buttons-bottom" @tagName="span" @args={{hash model=model}} />
 
             {{#if allowUpload}}
               <a id="mobile-file-upload" class="btn btn-default no-text mobile-file-upload {{if isUploading "hidden"}}"  aria-label={{i18n "composer.upload_title"}}>
@@ -234,15 +165,10 @@
             </a>
 
             {{#if showPreview}}
-              {{d-button action=(action "togglePreview") class="hide-preview" ariaLabel="composer.hide_preview" icon="pencil-alt"}}
+              <DButton @action={{action "togglePreview"}} @class="hide-preview" @ariaLabel="composer.hide_preview" @icon="pencil-alt" />
             {{/if}}
           {{else}}
-            {{d-button
-              action=(action "togglePreview")
-              translatedTitle=toggleText
-              icon="angle-double-left"
-              class=(concat "btn-flat btn-mini-toggle toggle-preview " (unless showPreview "active"))
-              }}
+            <DButton @action={{action "togglePreview"}} @translatedTitle={{toggleText}} @icon="angle-double-left" @class={{concat "btn-flat btn-mini-toggle toggle-preview " (unless showPreview "active")}} />
           {{/if}}
         </div>
       </div>
@@ -263,12 +189,7 @@
         {{/if}}
       </div>
 
-      {{composer-toggles
-        composeState=model.composeState
-        toggleFullscreen=(action "openIfDraft")
-        toggleComposer=(action "toggle")
-        toggleToolbar=(action "toggleToolbar")
-      }}
+      <ComposerToggles @composeState={{model.composeState}} @toggleFullscreen={{action "openIfDraft"}} @toggleComposer={{action "toggle"}} @toggleToolbar={{action "toggleToolbar"}} />
     {{/if}}
   {{/if}}
-{{/composer-body}}
+</ComposerBody>
diff --git a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
index c76de1b3b1b..bd9be1b1f9e 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
@@ -3,10 +3,5 @@
 {{html-safe message.body}}
 
 {{#if currentUser.can_invite_to_forum}}
-  {{d-button
-    class="btn-primary"
-    label="footer_nav.share"
-    icon="link"
-    action=(action shareModal)
-  }}
+  <DButton @class="btn-primary" @label="footer_nav.share" @icon="link" @action={{action shareModal}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
index 3a34bde5528..5ce1030afb6 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
@@ -2,9 +2,4 @@
 
 {{html-safe message.body}}
 
-{{d-button
-  class="btn-primary"
-  label="user.private_message"
-  icon="envelope"
-  action=(action switchPM message)
-}}
+<DButton @class="btn-primary" @label="user.private_message" @icon="envelope" @action={{action switchPM message}} />
diff --git a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
index eefe3880cec..98a0dfd388b 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
@@ -2,5 +2,5 @@
 <h3>{{i18n "composer.similar_topics"}}</h3>
 
 <ul class="topics">
-  {{mount-widget widget="search-result-topic" args=(hash results=message.similarTopics)}}
+  <MountWidget @widget="search-result-topic" @args={{hash results=message.similarTopics}} />
 </ul>
diff --git a/app/assets/javascripts/discourse/app/templates/discovery.hbs b/app/assets/javascripts/discourse/app/templates/discovery.hbs
index b71dba0b36a..1ce665e6084 100644
--- a/app/assets/javascripts/discourse/app/templates/discovery.hbs
+++ b/app/assets/javascripts/discourse/app/templates/discovery.hbs
@@ -1,42 +1,41 @@
 <div class="container">
-  {{discourse-banner user=currentUser banner=site.banner}}
+  <DiscourseBanner @user={{currentUser}} @banner={{site.banner}} />
   {{#unless viewingCategoriesList}}
-    {{category-read-only-banner category=category readOnly=navigationCategory.cannotCreateTopicOnCategory}}
+    <CategoryReadOnlyBanner @category={{category}} @readOnly={{navigationCategory.cannotCreateTopicOnCategory}} />
   {{/unless}}
 </div>
 
-{{plugin-outlet name="discovery-list-controls-above" tagName="span" connectorTagName="div"}}
+<PluginOutlet @name="discovery-list-controls-above" @tagName="span" @connectorTagName="div" />
 
 <div class="list-controls">
-  {{plugin-outlet name="discovery-navigation-bar-above" connectorTagName="div"}}
+  <PluginOutlet @name="discovery-navigation-bar-above" @connectorTagName="div" />
   <div class="container">
     {{outlet "navigation-bar"}}
   </div>
 </div>
 
-{{conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}} />
 
-{{plugin-outlet name="discovery-above" tagName="span" connectorTagName="div"}}
+<PluginOutlet @name="discovery-above" @tagName="span" @connectorTagName="div" />
 
 <div class="container list-container {{if loading "hidden"}}">
   <div class="row">
     <div class="full-width">
       <div id="header-list-area">
         {{outlet "header-list-container"}}
-        {{plugin-outlet name="header-list-container-bottom" args=(hash category=category)}}
+        <PluginOutlet @name="header-list-container-bottom" @args={{hash category=category}} />
       </div>
     </div>
   </div>
   <div class="row">
     <div class="full-width">
-      {{plugin-outlet name="before-list-area"}}
+      <PluginOutlet @name="before-list-area" />
       <div id="list-area">
-        {{plugin-outlet name="discovery-list-container-top" tagName="" connectorTagName="span"
-                        args=(hash category=category listLoading=loading)}}
+        <PluginOutlet @name="discovery-list-container-top" @tagName="" @connectorTagName="span" @args={{hash category=category listLoading=loading}} />
         {{outlet "list-container"}}
       </div>
     </div>
   </div>
 </div>
 
-{{plugin-outlet name="discovery-below" tagName="span" connectorTagName="div"}}
+<PluginOutlet @name="discovery-below" @tagName="span" @connectorTagName="div" />
diff --git a/app/assets/javascripts/discourse/app/templates/discovery/categories.hbs b/app/assets/javascripts/discourse/app/templates/discovery/categories.hbs
index 8ffe641e472..6fe7c64c541 100644
--- a/app/assets/javascripts/discourse/app/templates/discovery/categories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/discovery/categories.hbs
@@ -1,10 +1,10 @@
-{{plugin-outlet name="above-discovery-categories" connectorTagName="div" args=(hash categories=model.categories categoryPageStyle=categoryPageStyle topics=model.topics)}}
+<PluginOutlet @name="above-discovery-categories" @connectorTagName="div" @args={{hash categories=model.categories categoryPageStyle=categoryPageStyle topics=model.topics}} />
 
-{{#discovery-categories refresh=(action "refresh")}}
+<DiscoveryCategories @refresh={{action "refresh"}}>
   {{#if topicTrackingState.hasIncoming}}
     <div class="show-more {{if hasTopics "has-topics"}}">
       <div role="button" class="alert alert-info clickable" {{action "showInserted"}}>
-        {{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
+        <CountI18n @key="topic_count_" @suffix={{topicTrackingState.filter}} @count={{topicTrackingState.incomingCount}} />
       </div>
     </div>
   {{/if}}
@@ -12,6 +12,6 @@
   {{component categoryPageStyle
               categories=model.categories
               topics=model.topics}}
-{{/discovery-categories}}
+</DiscoveryCategories>
 
-{{plugin-outlet name="below-discovery-categories" connectorTagName="div" args=(hash categories=model.categories categoryPageStyle=categoryPageStyle topics=model.topics)}}
+<PluginOutlet @name="below-discovery-categories" @connectorTagName="div" @args={{hash categories=model.categories categoryPageStyle=categoryPageStyle topics=model.topics}} />
diff --git a/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
index 946d599382c..259594a8186 100644
--- a/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/discovery/topics.hbs
@@ -2,91 +2,51 @@
   <div class="alert alert-info">{{redirectedReason}}</div>
 {{/if}}
 
-{{topic-dismiss-buttons position="top" selectedTopics=selected
-model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+<TopicDismissButtons @position="top" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
 {{#if model.sharedDrafts}}
-  {{topic-list
-    class="shared-drafts"
-    listTitle="shared_drafts.title"
-    top=top
-    hideCategory="true"
-    category=category
-    topics=model.sharedDrafts
-    discoveryList=true}}
+  <TopicList @class="shared-drafts" @listTitle="shared_drafts.title" @top={{top}} @hideCategory="true" @category={{category}} @topics={{model.sharedDrafts}} @discoveryList={{true}} />
 {{/if}}
 
-{{#discovery-topics-list
-  model=model
-  refresh=(action "refresh")
-  loadingComplete=(action "loadingComplete")
-  incomingCount=topicTrackingState.incomingCount
-  autoAddTopicsToBulkSelect=autoAddTopicsToBulkSelect
-  bulkSelectEnabled=bulkSelectEnabled
-  addTopicsToBulkSelect=(action "addTopicsToBulkSelect")
-  as |discoveryTopicList|}}
+<DiscoveryTopicsList @model={{model}} @refresh={{action "refresh"}} @loadingComplete={{action "loadingComplete"}} @incomingCount={{topicTrackingState.incomingCount}} @autoAddTopicsToBulkSelect={{autoAddTopicsToBulkSelect}} @bulkSelectEnabled={{bulkSelectEnabled}} @addTopicsToBulkSelect={{action "addTopicsToBulkSelect"}} as |discoveryTopicList|>
   {{#if top}}
     <div class="top-lists">
-      {{period-chooser period=period action=(action "changePeriod") fullDay=false}}
+      <PeriodChooser @period={{period}} @action={{action "changePeriod"}} @fullDay={{false}} />
     </div>
   {{else}}
     {{#if topicTrackingState.hasIncoming}}
       <div class="show-more {{if hasTopics "has-topics"}}">
         <a tabindex="0" href {{action "showInserted"}} class="alert alert-info clickable">
-          {{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
+          <CountI18n @key="topic_count_" @suffix={{topicTrackingState.filter}} @count={{topicTrackingState.incomingCount}} />
         </a>
       </div>
     {{/if}}
   {{/if}}
-  {{plugin-outlet name="before-topic-list" tagName="span" connectorTagName="div" args=(hash category=category)}}
+  <PluginOutlet @name="before-topic-list" @tagName="span" @connectorTagName="div" @args={{hash category=category}} />
 
   {{#if hasTopics}}
-    {{topic-list
-      highlightLastVisited=true
-      top=top
-      showTopicPostBadges=showTopicPostBadges
-      showPosters=true
-      canBulkSelect=canBulkSelect
-      changeSort=(route-action "changeSort")
-      toggleBulkSelect=(action "toggleBulkSelect")
-      updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")
-      hideCategory=model.hideCategory
-      order=order
-      ascending=ascending
-      bulkSelectEnabled=bulkSelectEnabled
-      bulkSelectAction=(action "refresh")
-      selected=selected
-      expandGloballyPinned=expandGloballyPinned
-      expandAllPinned=expandAllPinned
-      category=category
-      topics=model.topics
-      discoveryList=true
-      scrollOnLoad=true
-      onScroll=discoveryTopicList.saveScrollPosition
-      focusLastVisitedTopic=true
-    }}
+    <TopicList @highlightLastVisited={{true}} @top={{top}} @showTopicPostBadges={{showTopicPostBadges}} @showPosters={{true}} @canBulkSelect={{canBulkSelect}} @changeSort={{route-action "changeSort"}} @toggleBulkSelect={{action "toggleBulkSelect"}} @updateAutoAddTopicsToBulkSelect={{action "updateAutoAddTopicsToBulkSelect"}} @hideCategory={{model.hideCategory}} @order={{order}} @ascending={{ascending}} @bulkSelectEnabled={{bulkSelectEnabled}} @bulkSelectAction={{action "refresh"}} @selected={{selected}} @expandGloballyPinned={{expandGloballyPinned}} @expandAllPinned={{expandAllPinned}} @category={{category}} @topics={{model.topics}} @discoveryList={{true}} @scrollOnLoad={{true}} @onScroll={{discoveryTopicList.saveScrollPosition}} @focusLastVisitedTopic={{true}} />
   {{/if}}
 
-  {{plugin-outlet name="after-topic-list" tagName="span" connectorTagName="div" args=(hash category=category)}}
-{{/discovery-topics-list}}
+  <PluginOutlet @name="after-topic-list" @tagName="span" @connectorTagName="div" @args={{hash category=category}} />
+</DiscoveryTopicsList>
 
 <footer class="topic-list-bottom">
-  {{conditional-loading-spinner condition=model.loadingMore}}
+  <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
   {{#if allLoaded}}
-    {{topic-dismiss-buttons position="bottom" selectedTopics=selected
-    model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+    <TopicDismissButtons @position="bottom" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
-    {{#footer-message education=footerEducation message=footerMessage}}
+    <FooterMessage @education={{footerEducation}} @message={{footerMessage}}>
       {{#if latest}}
         {{#if canCreateTopicOnCategory}}
-          {{discourse-linked-text action=(route-action "createTopic") text="topic.suggest_create_topic"}}
+          <DiscourseLinkedText @action={{route-action "createTopic"}} @text="topic.suggest_create_topic" />
         {{/if}}
       {{else if top}}
-        {{#link-to "discovery.categories"}}{{i18n "topic.browse_all_categories"}}{{/link-to}}, {{#link-to "discovery.latest"}}{{i18n "topic.view_latest_topics"}}{{/link-to}} {{i18n "or"}} {{i18n "filters.top.other_periods"}}
-        {{top-period-buttons period=period action=(action "changePeriod")}}
+        <LinkTo @route="discovery.categories">{{i18n "topic.browse_all_categories"}}</LinkTo>, <LinkTo @route="discovery.latest">{{i18n "topic.view_latest_topics"}}</LinkTo> {{i18n "or"}} {{i18n "filters.top.other_periods"}}
+        <TopPeriodButtons @period={{period}} @action={{action "changePeriod"}} />
       {{else}}
-        {{#link-to "discovery.categories"}} {{i18n "topic.browse_all_categories"}}{{/link-to}} {{i18n "or"}} {{#link-to "discovery.latest"}}{{i18n "topic.view_latest_topics"}}{{/link-to}}
+        <LinkTo @route="discovery.categories"> {{i18n "topic.browse_all_categories"}}</LinkTo> {{i18n "or"}} <LinkTo @route="discovery.latest">{{i18n "topic.view_latest_topics"}}</LinkTo>
       {{/if}}
-    {{/footer-message}}
+    </FooterMessage>
   {{/if}}
 </footer>
diff --git a/app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs b/app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs
index 6837440bf17..f9fa38b6853 100644
--- a/app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs
+++ b/app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs
@@ -3,36 +3,25 @@
     <div class="edit-category-title">
       <h2>{{title}}</h2>
       {{#if model.id}}
-        {{bread-crumbs
-          categories=site.categoriesList
-          category=model
-          noSubcategories=model.noSubcategories
-          editingCategory=true
-          editingCategoryTab=selectedTab
-        }}
+        <BreadCrumbs @categories={{site.categoriesList}} @category={{model}} @noSubcategories={{model.noSubcategories}} @editingCategory={{true}} @editingCategoryTab={{selectedTab}} />
       {{/if}}
     </div>
     {{#unless mobileView}}
       {{#if model.id}}
-        {{d-button
-          class="category-back"
-          action=(action "goBack")
-          label="category.back"
-          icon="caret-left"
-        }}
+        <DButton @class="category-back" @action={{action "goBack"}} @label="category.back" @icon="caret-left" />
       {{/if}}
     {{/unless}}
   </div>
 
   <div class="edit-category-nav">
     <ul class="nav nav-stacked">
-      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="general"}}
-      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="security"}}
-      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="settings"}}
-      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="images"}}
-      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="topic-template"}}
+      <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="general" />
+      <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="security" />
+      <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="settings" />
+      <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="images" />
+      <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="topic-template" />
       {{#if siteSettings.tagging_enabled}}
-        {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="tags"}}
+        <EditCategoryTab @panels={{panels}} @selectedTab={{selectedTab}} @params={{parentParams}} @tab="tags" />
       {{/if}}
     </ul>
   </div>
@@ -52,25 +41,13 @@
   {{/if}}
 
   <div class="edit-category-footer">
-    {{d-button id="save-category" class="btn-primary" disabled=disabled action=(action "saveCategory") label=saveLabel}}
+    <DButton @id="save-category" @class="btn-primary" @disabled={{disabled}} @action={{action "saveCategory"}} @label={{saveLabel}} />
 
     {{#if model.can_delete}}
-      {{d-button
-        class="btn-danger"
-        disabled=deleteDisabled
-        action=(action "deleteCategory")
-        icon="far-trash-alt"
-        label="category.delete"
-      }}
+      <DButton @class="btn-danger" @disabled={{deleteDisabled}} @action={{action "deleteCategory"}} @icon="far-trash-alt" @label="category.delete" />
     {{else if model.id}}
       <div class="disable-info">
-        {{d-button
-          disabled=deleteDisabled
-          class="btn-default"
-          action=(action "toggleDeleteTooltip")
-          icon="question-circle"
-          label="category.delete"
-        }}
+        <DButton @disabled={{deleteDisabled}} @class="btn-default" @action={{action "toggleDeleteTooltip"}} @icon="question-circle" @label="category.delete" />
       </div>
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/email-login.hbs b/app/assets/javascripts/discourse/app/templates/email-login.hbs
index 24e1f319fe3..772d627a377 100644
--- a/app/assets/javascripts/discourse/app/templates/email-login.hbs
+++ b/app/assets/javascripts/discourse/app/templates/email-login.hbs
@@ -14,23 +14,12 @@
       {{#if model.can_login}}
         {{#if secondFactorRequired }}
           {{#if model.security_key_required }}
-            {{#security-key-form
-              allowedCredentialIds=model.allowed_credential_ids
-              challenge=model.security_key_challenge
-              showSecurityKey=model.security_key_required
-              showSecondFactor=false
-              secondFactorMethod=secondFactorMethod
-              otherMethodAllowed=secondFactorRequired
-              action=(action "authenticateSecurityKey")}}
-            {{/security-key-form}}
+            <SecurityKeyForm @allowedCredentialIds={{model.allowed_credential_ids}} @challenge={{model.security_key_challenge}} @showSecurityKey={{model.security_key_required}} @showSecondFactor={{false}} @secondFactorMethod={{secondFactorMethod}} @otherMethodAllowed={{secondFactorRequired}} @action={{action "authenticateSecurityKey"}}>
+            </SecurityKeyForm>
           {{else}}
-            {{#second-factor-form
-              secondFactorMethod=secondFactorMethod
-              secondFactorToken=secondFactorToken
-              backupEnabled=model.backup_codes_enabled
-              isLogin=true}}
-              {{second-factor-input value=secondFactorToken secondFactorMethod=secondFactorMethod backupEnabled=backupEnabled}}
-            {{/second-factor-form}}
+            <SecondFactorForm @secondFactorMethod={{secondFactorMethod}} @secondFactorToken={{secondFactorToken}} @backupEnabled={{model.backup_codes_enabled}} @isLogin={{true}}>
+              <SecondFactorInput @value={{secondFactorToken}} @secondFactorMethod={{secondFactorMethod}} @backupEnabled={{backupEnabled}} />
+            </SecondFactorForm>
           {{/if}}
         {{else}}
           <h2>{{i18n "email_login.confirm_title" site_name=siteSettings.title}}</h2>
@@ -38,11 +27,7 @@
         {{/if}}
 
         {{#unless model.security_key_required }}
-          {{d-button
-            label="email_login.confirm_button"
-            action=(action "finishLogin")
-            type="submit"
-            class="btn-primary"}}
+          <DButton @label="email_login.confirm_button" @action={{action "finishLogin"}} @type="submit" @class="btn-primary" />
         {{/unless}}
       {{/if}}
     </form>
diff --git a/app/assets/javascripts/discourse/app/templates/exception.hbs b/app/assets/javascripts/discourse/app/templates/exception.hbs
index 7e3ef7252b8..0b658f238c9 100644
--- a/app/assets/javascripts/discourse/app/templates/exception.hbs
+++ b/app/assets/javascripts/discourse/app/templates/exception.hbs
@@ -19,9 +19,9 @@
       </div>
       <div class="buttons">
         {{#each enabledButtons as |buttonData|}}
-          {{d-button icon=buttonData.icon action=buttonData.action label=buttonData.key class=buttonData.classes}}
+          <DButton @icon={{buttonData.icon}} @action={{buttonData.action}} @label={{buttonData.key}} @class={{buttonData.classes}} />
         {{/each}}
-        {{conditional-loading-spinner condition=loading}}
+        <ConditionalLoadingSpinner @condition={{loading}} />
       </div>
     </div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
index 1fb8cb40768..8256a2a2749 100644
--- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
@@ -1,5 +1,5 @@
-{{#d-section pageClass="search" class="search-container"}}
-  {{scroll-tracker name="full-page-search" tag=searchTerm class="hidden"}}
+<DSection @pageClass="search" @class="search-container">
+  <ScrollTracker @name="full-page-search" @tag={{searchTerm}} @class="hidden" />
 
   <div class="search-header" role="search">
     <h1 class="search-page-heading">
@@ -12,50 +12,24 @@
       {{/if}}
     </h1>
     <div class="search-bar">
-      {{search-text-field
-        value=searchTerm
-        class="full-page-search search no-blur search-query"
-        aria-label=(i18n "search.search_term_label")
-        enter=(action "search" (hash collapseFilters=true))
-        hasAutofocus=hasAutofocus
-        aria-controls="search-result-count"
-      }}
-      {{combo-box
-        id="search-type"
-        value=search_type
-        content=searchTypes
-        onChange=(action (mut search_type))
-        options=(hash
+      <SearchTextField @value={{searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{hasAutofocus}} @aria-controls="search-result-count" />
+      <ComboBox @id="search-type" @value={{search_type}} @content={{searchTypes}} @onChange={{action (mut search_type)}} @options={{hash
           castInteger=true
-        )
-      }}
-      {{d-button
-        action=(action "search" (hash collapseFilters=true))
-        icon="search"
-        label="search.search_button"
-        class="btn-primary search-cta"
-        ariaLabel="search.search_button"
-        disabled=searchButtonDisabled
-      }}
+        }} />
+      <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{searchButtonDisabled}} />
     </div>
     {{#if usingDefaultSearchType}}
       {{!-- context is only provided when searching from mobile view --}}
       {{#if context}}
         <div class="search-context">
           <label>
-            {{input type="checkbox" name="searchContext" checked=searchContextEnabled}} {{searchContextDescription}}
+            <Input @type="checkbox" @name="searchContext" @checked={{searchContextEnabled}} /> {{searchContextDescription}}
           </label>
         </div>
       {{/if}}
 
       <div class="search-filters">
-        {{search-advanced-options
-          searchTerm=(readonly searchTerm)
-          onChangeSearchTerm=(action (mut searchTerm))
-          search=(action "search" (hash collapseFilters=true))
-          searchButtonDisabled=searchButtonDisabled
-          expandFilters=expandFilters
-        }}
+        <SearchAdvancedOptions @searchTerm={{readonly searchTerm}} @onChangeSearchTerm={{action (mut searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{searchButtonDisabled}} @expandFilters={{expandFilters}} />
       </div>
     {{/if}}
 
@@ -74,29 +48,19 @@
       {{#if usingDefaultSearchType}}
         <div class={{searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
           {{#if canBulkSelect}}
-            {{d-button icon="list" class="btn-default bulk-select" title="topics.bulk.toggle" action=(action "toggleBulkSelect")}}
+            <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
             {{#if selected}}
-              {{d-button class="btn-default bulk-select-btn" selected=selected action=(action "showBulkActions") icon="wrench"}}
+              <DButton @class="btn-default bulk-select-btn" @selected={{selected}} @action={{action "showBulkActions"}} @icon="wrench" />
             {{/if}}
           {{/if}}
 
           {{#if bulkSelectEnabled}}
             {{#if hasUnselectedResults}}
-              {{d-button
-                icon="check-square"
-                class="btn-default"
-                action=(action "selectAll")
-                label="search.select_all"
-              }}
+              <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
             {{/if}}
 
             {{#if hasSelection}}
-              {{d-button
-                icon="far-square"
-                class="btn-default"
-                action=(action "clearAll")
-                label="search.clear_all"
-              }}
+              <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
             {{/if}}
           {{/if}}
 
@@ -104,37 +68,25 @@
             <label>
               {{i18n "search.sort_by"}}
             </label>
-            {{combo-box
-              value=sortOrder
-              content=sortOrders
-              onChange=(action (mut sortOrder))
-              id="search-sort-by"
-              options=(hash
+            <ComboBox @value={{sortOrder}} @content={{sortOrders}} @onChange={{action (mut sortOrder)}} @id="search-sort-by" @options={{hash
                 castInteger=true
-              )
-            }}
+              }} />
           </div>
         </div>
       {{/if}}
     {{/if}}
 
-    {{plugin-outlet name="full-page-search-below-search-info" tagName="span" connectorTagName="div" args=(hash search=searchTerm)}}
+    <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=searchTerm}} />
 
     {{#if searching}}
       {{loading-spinner size="medium"}}
     {{else}}
       <div class="search-results" role="region">
-        {{#load-more selector=".fps-result" action=(action "loadMore")}}
+        <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
           {{#if usingDefaultSearchType}}
-            {{search-result-entries
-              posts=model.posts
-              bulkSelectEnabled=bulkSelectEnabled
-              selected=selected
-              highlightQuery=highlightQuery
-              searchLogId=model.grouped_search_result.search_log_id
-            }}
+            <SearchResultEntries @posts={{model.posts}} @bulkSelectEnabled={{bulkSelectEnabled}} @selected={{selected}} @highlightQuery={{highlightQuery}} @searchLogId={{model.grouped_search_result.search_log_id}} />
 
-            {{#conditional-loading-spinner condition=loading}}
+            <ConditionalLoadingSpinner @condition={{loading}}>
               {{#unless hasResults}}
                 {{#if searchActive}}
                   <h3>{{i18n "search.no_results"}}</h3>
@@ -158,7 +110,7 @@
                       {{/if}}
                     </div>
 
-                    {{google-search searchTerm=searchTerm}}
+                    <GoogleSearch @searchTerm={{searchTerm}} />
                   {{/if}}
                 {{/if}}
               {{/unless}}
@@ -174,9 +126,9 @@
                   {{/if}}
                 </h3>
               {{/if}}
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           {{else}}
-            {{#conditional-loading-spinner condition=loading}}
+            <ConditionalLoadingSpinner @condition={{loading}}>
               {{#if hasResults}}
                 {{#if model.categories.length}}
                   <h4 class="category-heading">
@@ -208,7 +160,7 @@
                 {{#if model.users}}
                   <div class="user-items">
                     {{#each model.users as |user|}}
-                      {{#user-link user=user class="fps-user-item"}}
+                      <UserLink @user={{user}} @class="fps-user-item">
                         {{avatar user imageSize="large"}}
 
                         <div class="user-titles">
@@ -222,7 +174,7 @@
                             {{user.username}}
                           </span>
                         </div>
-                      {{/user-link}}
+                      </UserLink>
                     {{/each}}
                   </div>
                 {{/if}}
@@ -231,10 +183,10 @@
                   <h3>{{i18n "search.no_results"}}</h3>
                 {{/if}}
               {{/if}}
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           {{/if}}
-        {{/load-more}}
+        </LoadMore>
       </div>
     {{/if}}
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/group-activity-posts.hbs b/app/assets/javascripts/discourse/app/templates/group-activity-posts.hbs
index 8e833dc151e..47f023d7a19 100644
--- a/app/assets/javascripts/discourse/app/templates/group-activity-posts.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group-activity-posts.hbs
@@ -1,10 +1,10 @@
-{{#load-more selector=".user-stream-item" action=(action "loadMore")}}
+<LoadMore @selector=".user-stream-item" @action={{action "loadMore"}}>
   <div class="user-stream">
     {{#each model as |post|}}
-      {{group-post post=post}}
+      <GroupPost @post={{post}} />
     {{else}}
       <div>{{i18n emptyText}}</div>
     {{/each}}
   </div>
-  {{conditional-loading-spinner condition=loading}}
-{{/load-more}}
+  <ConditionalLoadingSpinner @condition={{loading}} />
+</LoadMore>
diff --git a/app/assets/javascripts/discourse/app/templates/group-activity-topics.hbs b/app/assets/javascripts/discourse/app/templates/group-activity-topics.hbs
index 596ddb19415..882a7d18334 100644
--- a/app/assets/javascripts/discourse/app/templates/group-activity-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group-activity-topics.hbs
@@ -1,5 +1,4 @@
-{{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list tr" action=(action "loadMore")}}
-  {{basic-topic-list topicList=model
-                     showPosters=true}}
-  {{conditional-loading-spinner condition=model.loadingMore}}
-{{/load-more}}
+<LoadMore @class="paginated-topics-list" @selector=".paginated-topics-list .topic-list tr" @action={{action "loadMore"}}>
+  <BasicTopicList @topicList={{model}} @showPosters={{true}} />
+  <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
+</LoadMore>
diff --git a/app/assets/javascripts/discourse/app/templates/group-index.hbs b/app/assets/javascripts/discourse/app/templates/group-index.hbs
index 71c929e1379..a90c72e7511 100644
--- a/app/assets/javascripts/discourse/app/templates/group-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group-index.hbs
@@ -1,65 +1,46 @@
 <section class="user-content">
   <div class="group-members-actions">
     {{#if model.can_see_members}}
-      {{text-field
-        value=filterInput
-        placeholderKey=filterPlaceholder
-        autocomplete="off"
-        class="group-username-filter no-blur"
-      }}
+      <TextField @value={{filterInput}} @placeholderKey={{filterPlaceholder}} @autocomplete="off" @class="group-username-filter no-blur" />
     {{/if}}
 
     {{#if canManageGroup}}
       <div class="group-members-manage">
-        {{d-button
-          icon="plus"
-          action=(route-action "showAddMembersModal")
-          label="groups.manage.add_members"
-          class="btn-default group-members-add"
-        }}
+        <DButton @icon="plus" @action={{route-action "showAddMembersModal"}} @label="groups.manage.add_members" @class="btn-default group-members-add" />
 
         {{#if currentUser.can_invite_to_forum}}
-          {{d-button
-            icon="plus"
-            action=(route-action "showInviteModal")
-            label="groups.manage.invite_members"
-            class="btn-default group-members-add"
-          }}
+          <DButton @icon="plus" @action={{route-action "showInviteModal"}} @label="groups.manage.invite_members" @class="btn-default group-members-add" />
         {{/if}}
       </div>
     {{/if}}
   </div>
 
   {{#if hasMembers}}
-    {{#load-more selector=".group-members tr" action=(action "loadMore")}}
+    <LoadMore @selector=".group-members tr" @action={{action "loadMore"}}>
       <table class={{if isBulk "group-members sticky-header" "group-members"}}>
         <thead>
           <tr>
             <th class="bulk-select">
               {{#if canManageGroup}}
-                {{flat-button class="bulk-select" icon="list" action=(action "toggleBulkSelect") title="topics.bulk.toggle"}}
+                <FlatButton @class="bulk-select" @icon="list" @action={{action "toggleBulkSelect"}} @title="topics.bulk.toggle" />
               {{/if}}
             </th>
             {{#if isBulk}}
               <th class="bulk-select-buttons">
                 <span class="bulk-select-buttons-wrap">
                   {{#if bulkSelection}}
-                    {{group-member-dropdown
-                      bulkSelection=bulkSelection
-                      canAdminGroup=model.can_admin_group
-                      onChange=(action "actOnSelection" bulkSelection)
-                    }}
+                    <GroupMemberDropdown @bulkSelection={{bulkSelection}} @canAdminGroup={{model.can_admin_group}} @onChange={{action "actOnSelection" bulkSelection}} />
                   {{/if}}
-                  {{d-button action=(action "bulkSelectAll") label="topics.bulk.select_all"}}
-                  {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}}
+                  <DButton @action={{action "bulkSelectAll"}} @label="topics.bulk.select_all" />
+                  <DButton @action={{action "bulkClearAll"}} @label="topics.bulk.clear_all" />
                 </span>
               </th>
             {{/if}}
-            {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username" automatic=true}}
+            <TableHeaderToggle @order={{order}} @asc={{asc}} @field="username_lower" @labelKey="username" @class="username" @automatic={{true}} />
             <th class="group-owner"></th>
-            {{table-header-toggle order=order asc=asc field="added_at" labelKey="groups.member_added" automatic=true}}
-            {{table-header-toggle order=order asc=asc field="last_posted_at" labelKey="last_post" automatic=true}}
-            {{table-header-toggle order=order asc=asc field="last_seen_at" labelKey="last_seen" automatic=true}}
+            <TableHeaderToggle @order={{order}} @asc={{asc}} @field="added_at" @labelKey="groups.member_added" @automatic={{true}} />
+            <TableHeaderToggle @order={{order}} @asc={{asc}} @field="last_posted_at" @labelKey="last_post" @automatic={{true}} />
+            <TableHeaderToggle @order={{order}} @asc={{asc}} @field="last_seen_at" @labelKey="last_seen" @automatic={{true}} />
             <th></th>
           </tr>
         </thead>
@@ -69,12 +50,12 @@
             <tr>
               {{#if isBulk}}
                 <td class="bulk-select">
-                  {{input type="checkbox" class="bulk-select" click=(action "selectMember" m)}}
+                  <Input @type="checkbox" class="bulk-select" @click={{action "selectMember" m}} />
                 </td>
               {{/if}}
 
               <td class="avatar" colspan="2">
-                {{user-info user=m skipName=skipName}}
+                <UserInfo @user={{m}} @skipName={{skipName}} />
               </td>
 
               <td class="group-owner">
@@ -97,11 +78,7 @@
 
               <td>
                 {{#if canManageGroup}}
-                  {{group-member-dropdown
-                    member=m
-                    canAdminGroup=model.can_admin_group
-                    onChange=(action "actOnGroup" m)
-                  }}
+                  <GroupMemberDropdown @member={{m}} @canAdminGroup={{model.can_admin_group}} @onChange={{action "actOnGroup" m}} />
                 {{/if}}
                 {{!-- group parameter is used by plugins --}}
               </td>
@@ -109,9 +86,9 @@
           {{/each}}
         </tbody>
       </table>
-    {{/load-more}}
+    </LoadMore>
 
-    {{conditional-loading-spinner condition=loading}}
+    <ConditionalLoadingSpinner @condition={{loading}} />
   {{else}}
     <br>
 
diff --git a/app/assets/javascripts/discourse/app/templates/group-requests.hbs b/app/assets/javascripts/discourse/app/templates/group-requests.hbs
index b2f8d03ddfb..709808f2d92 100644
--- a/app/assets/javascripts/discourse/app/templates/group-requests.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group-requests.hbs
@@ -1,19 +1,15 @@
 <section class="user-content">
 
   <div class="group-members-actions">
-    {{text-field
-      value=filterInput
-      placeholderKey=filterPlaceholder
-      class="group-username-filter no-blur"
-    }}
+    <TextField @value={{filterInput}} @placeholderKey={{filterPlaceholder}} @class="group-username-filter no-blur" />
   </div>
 
   {{#if hasRequesters}}
-    {{#load-more selector=".group-members tr" action=(action "loadMore")}}
+    <LoadMore @selector=".group-members tr" @action={{action "loadMore"}}>
       <table class="group-members">
         <thead>
-          {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" automatic=true}}
-          {{table-header-toggle order=order asc=asc field="requested_at" labelKey="groups.member_requested" automatic=true}}
+          <TableHeaderToggle @order={{order}} @asc={{asc}} @field="username_lower" @labelKey="username" @automatic={{true}} />
+          <TableHeaderToggle @order={{order}} @asc={{asc}} @field="requested_at" @labelKey="groups.member_requested" @automatic={{true}} />
           <th>{{i18n "groups.requests.reason"}}</th>
           <th></th>
           <th></th>
@@ -23,7 +19,7 @@
           {{#each model.requesters as |m|}}
             <tr>
               <td class="avatar">
-                {{user-info user=m skipName=skipName}}
+                <UserInfo @user={{m}} @skipName={{skipName}} />
               </td>
               <td>
                 <span class="text">{{bound-date m.requested_at}}</span>
@@ -34,12 +30,12 @@
                   {{i18n "groups.requests.undone"}}
                 {{else if m.request_accepted}}
                   {{i18n "groups.requests.accepted"}}
-                  {{d-button action=(action "undoAcceptRequest") actionParam=m label="undo"}}
+                  <DButton @action={{action "undoAcceptRequest"}} @actionParam={{m}} @label="undo" />
                 {{else if m.request_denied}}
                   {{i18n "groups.requests.denied"}}
                 {{else}}
-                  {{d-button action=(action "acceptRequest") actionParam=m label="groups.requests.accept" class="btn-primary"}}
-                  {{d-button action=(action "denyRequest") actionParam=m label="groups.requests.deny" class="btn-danger"}}
+                  <DButton @action={{action "acceptRequest"}} @actionParam={{m}} @label="groups.requests.accept" @class="btn-primary" />
+                  <DButton @action={{action "denyRequest"}} @actionParam={{m}} @label="groups.requests.deny" @class="btn-danger" />
                 {{/if}}
               </td>
               <td></td>
@@ -47,9 +43,9 @@
           {{/each}}
         </tbody>
       </table>
-    {{/load-more}}
+    </LoadMore>
 
-    {{conditional-loading-spinner condition=loading}}
+    <ConditionalLoadingSpinner @condition={{loading}} />
   {{else}}
     <div>{{i18n "groups.empty.requests"}}</div>
   {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/group.hbs b/app/assets/javascripts/discourse/app/templates/group.hbs
index 37acced902f..4fd57e67e37 100644
--- a/app/assets/javascripts/discourse/app/templates/group.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group.hbs
@@ -1,4 +1,4 @@
-{{plugin-outlet name="before-group-container" tagName="span" connectorTagName="div" args=(hash group=model)}}
+<PluginOutlet @name="before-group-container" @tagName="span" @connectorTagName="div" @args={{hash group=model}} />
 
 <div class="container group group-{{model.name}}">
   {{#if showTooltip}}
@@ -11,12 +11,7 @@
     <div class="group-info">
       {{#if (or model.flair_icon model.flair_url model.flair_bg_color)}}
         <div class="group-avatar-flair">
-          {{avatar-flair
-            flairName=model.name
-            flairUrl=(or model.flair_icon model.flair_url)
-            flairBgColor=model.flair_bg_color
-            flairColor=model.flair_color
-          }}
+          <AvatarFlair @flairName={{model.name}} @flairUrl={{or model.flair_icon model.flair_url}} @flairBgColor={{model.flair_bg_color}} @flairColor={{model.flair_color}} />
         </div>
       {{/if}}
 
@@ -27,42 +22,22 @@
       </div>
 
       <div class="group-details-button">
-        {{group-membership-button
-          tagName=""
-          model=model
-          showLogin=(route-action "showLogin")
-        }}
+        <GroupMembershipButton @tagName="" @model={{model}} @showLogin={{route-action "showLogin"}} />
 
         {{#if currentUser.admin}}
           {{#if model.automatic}}
-            {{d-button
-              action=(action "toggleDeleteTooltip")
-              class="btn-default"
-              icon="question-circle"
-              label="admin.groups.delete"
-            }}
+            <DButton @action={{action "toggleDeleteTooltip"}} @class="btn-default" @icon="question-circle" @label="admin.groups.delete" />
           {{else}}
-            {{d-button
-              action=(action "destroyGroup")
-              disabled=destroying
-              icon="trash-alt"
-              class="btn-danger"
-              label="admin.groups.delete"
-            }}
+            <DButton @action={{action "destroyGroup"}} @disabled={{destroying}} @icon="trash-alt" @class="btn-danger" @label="admin.groups.delete" />
           {{/if}}
         {{/if}}
 
         {{#if displayGroupMessageButton}}
-          {{d-button
-            action=(action "messageGroup")
-            class="btn-primary group-message-button"
-            icon="envelope"
-            label="groups.message"
-          }}
+          <DButton @action={{action "messageGroup"}} @class="btn-primary group-message-button" @icon="envelope" @label="groups.message" />
         {{/if}}
       </div>
 
-      {{plugin-outlet name="group-details-after" tagName="span" connectorTagName="div" args=(hash model=model)}}
+      <PluginOutlet @name="group-details-after" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
     </div>
 
     {{#if model.bio_cooked}}
@@ -77,7 +52,7 @@
   <div class="user-content-wrapper">
     <section class="user-primary-navigation">
       <div class="container">
-        {{group-navigation group=model currentPath=currentPath tabs=tabs}}
+        <GroupNavigation @group={{model}} @currentPath={{currentPath}} @tabs={{tabs}} />
       </div>
     </section>
 
diff --git a/app/assets/javascripts/discourse/app/templates/group/activity.hbs b/app/assets/javascripts/discourse/app/templates/group/activity.hbs
index c5229c99a78..f6201260381 100644
--- a/app/assets/javascripts/discourse/app/templates/group/activity.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/activity.hbs
@@ -1,14 +1,14 @@
 <section class="user-secondary-navigation">
-  {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked"}}
+  <MobileNav @class="activity-nav" @desktopClass="action-list activity-list nav-stacked">
     {{#if model.can_see_members}}
-      {{group-activity-filter filter="posts" categoryId=category_id}}
-      {{group-activity-filter filter="topics" categoryId=category_id}}
+      <GroupActivityFilter @filter="posts" @categoryId={{category_id}} />
+      <GroupActivityFilter @filter="topics" @categoryId={{category_id}} />
     {{/if}}
     {{#if siteSettings.enable_mentions}}
-      {{group-activity-filter filter="mentions" categoryId=category_id}}
+      <GroupActivityFilter @filter="mentions" @categoryId={{category_id}} />
     {{/if}}
-    {{plugin-outlet name="group-activity-bottom" connectorTagName="li"}}
-  {{/mobile-nav}}
+    <PluginOutlet @name="group-activity-bottom" @connectorTagName="li" />
+  </MobileNav>
 </section>
 <section class="user-content">
   {{outlet}}
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage.hbs b/app/assets/javascripts/discourse/app/templates/group/manage.hbs
index 478eb75a4fc..b952bcba209 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage.hbs
@@ -1,13 +1,13 @@
 <section class="user-secondary-navigation">
-  {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked"}}
+  <MobileNav @class="activity-nav" @desktopClass="action-list activity-list nav-stacked">
     {{#each tabs as |tab|}}
       <li>
-        {{#link-to tab.route model.name}}
+        <LinkTo @route={{tab.route}} @model={{model.name}}>
           {{i18n tab.title}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/each}}
-  {{/mobile-nav}}
+  </MobileNav>
 </section>
 <section class="user-content">
   {{outlet}}
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/categories.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/categories.hbs
index 23de93eb10c..b0020b951b8 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/categories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/categories.hbs
@@ -7,11 +7,7 @@
   <div class="control-group">
     <label>{{d-icon "d-watching"}} {{i18n "groups.notifications.watching.title"}}</label>
 
-    {{category-selector
-      categories=model.watchingCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.watchingCategories))
-    }}
+    <CategorySelector @categories={{model.watchingCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.watchingCategories)}} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.categories.watched_categories_instructions"}}
@@ -21,11 +17,7 @@
   <div class="control-group">
     <label>{{d-icon "d-tracking"}} {{i18n "groups.notifications.tracking.title"}}</label>
 
-    {{category-selector
-      categories=model.trackingCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.trackingCategories))
-    }}
+    <CategorySelector @categories={{model.trackingCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.trackingCategories)}} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.categories.tracked_categories_instructions"}}
@@ -35,11 +27,7 @@
   <div class="control-group">
     <label>{{d-icon "d-watching-first"}} {{i18n "groups.notifications.watching_first_post.title"}}</label>
 
-    {{category-selector
-      categories=model.watchingFirstPostCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.watchingFirstPostCategories))
-    }}
+    <CategorySelector @categories={{model.watchingFirstPostCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.watchingFirstPostCategories)}} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.categories.watching_first_post_categories_instructions"}}
@@ -49,11 +37,7 @@
   <div class="control-group">
     <label>{{d-icon "d-regular"}} {{i18n "groups.notifications.regular.title"}}</label>
 
-    {{category-selector
-      categories=model.regularCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.regularCategories))
-    }}
+    <CategorySelector @categories={{model.regularCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.regularCategories)}} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.categories.regular_categories_instructions"}}
@@ -63,16 +47,12 @@
   <div class="control-group">
     <label>{{d-icon "d-muted"}} {{i18n "groups.notifications.muted.title"}}</label>
 
-    {{category-selector
-      categories=model.mutedCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.mutedCategories))
-    }}
+    <CategorySelector @categories={{model.mutedCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.mutedCategories)}} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.categories.muted_categories_instructions"}}
     </div>
   </div>
 
-  {{group-manage-save-button model=model}}
+  <GroupManageSaveButton @model={{model}} />
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/email.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/email.hbs
index 394dd2df081..cc68e68dfe7 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/email.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/email.hbs
@@ -1 +1 @@
-{{group-manage-email-settings group=model}}
+<GroupManageEmailSettings @group={{model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/interaction.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/interaction.hbs
index 8879b9000c2..14a48dcc0d0 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/interaction.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/interaction.hbs
@@ -1,4 +1,4 @@
 <form class="groups-form form-vertical">
-  {{groups-form-interaction-fields model=model}}
-  {{group-manage-save-button model=model}}
+  <GroupsFormInteractionFields @model={{model}} />
+  <GroupManageSaveButton @model={{model}} />
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/logs.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/logs.hbs
index a1243286340..5026681e0d2 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/logs.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/logs.hbs
@@ -1,12 +1,12 @@
 {{#if model.logs}}
   <div class="group-manage-logs-controls">
-    {{group-manage-logs-filter clearFilter=(action "clearFilter") value=filters.action type="action"}}
-    {{group-manage-logs-filter clearFilter=(action "clearFilter") value=filters.acting_user type="acting_user"}}
-    {{group-manage-logs-filter clearFilter=(action "clearFilter") value=filters.target_user type="target_user"}}
-    {{group-manage-logs-filter clearFilter=(action "clearFilter") value=filters.subject type="subject"}}
+    <GroupManageLogsFilter @clearFilter={{action "clearFilter"}} @value={{filters.action}} @type="action" />
+    <GroupManageLogsFilter @clearFilter={{action "clearFilter"}} @value={{filters.acting_user}} @type="acting_user" />
+    <GroupManageLogsFilter @clearFilter={{action "clearFilter"}} @value={{filters.target_user}} @type="target_user" />
+    <GroupManageLogsFilter @clearFilter={{action "clearFilter"}} @value={{filters.subject}} @type="subject" />
   </div>
 
-  {{#load-more selector=".group-manage-logs .group-manage-logs-row" action=(action "loadMore")}}
+  <LoadMore @selector=".group-manage-logs .group-manage-logs-row" @action={{action "loadMore"}}>
     <table class="group-manage-logs">
       <thead>
         <th>{{i18n "groups.manage.logs.action"}}</th>
@@ -18,16 +18,14 @@
       </thead>
 
       <tbody>
-        {{#each model.logs as |log|}}
-          {{group-manage-logs-row
-              log=log
-              filters=filters}}
+        {{#each model.logs as |logItem|}}
+          <GroupManageLogsRow @log={{logItem}} @filters={{filters}} />
         {{/each}}
       </tbody>
     </table>
-  {{/load-more}}
+  </LoadMore>
 
-  {{conditional-loading-spinner condition=loading}}
+  <ConditionalLoadingSpinner @condition={{loading}} />
 {{else}}
   <div>{{i18n "groups.empty.logs"}}</div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/membership.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/membership.hbs
index bb0a12982fe..3e674156e9c 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/membership.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/membership.hbs
@@ -1,4 +1,4 @@
 <form class="groups-form form-vertical">
-  {{groups-form-membership-fields model=model}}
-  {{group-manage-save-button model=model}}
+  <GroupsFormMembershipFields @model={{model}} />
+  <GroupManageSaveButton @model={{model}} />
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/profile.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/profile.hbs
index 4c4ab73ba1d..d89c3f37aef 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/profile.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/profile.hbs
@@ -1,4 +1,4 @@
 <form class="groups-form form-vertical">
-  {{groups-form-profile-fields model=model disableSave=saving}}
-  {{group-manage-save-button model=model saving=saving}}
+  <GroupsFormProfileFields @model={{model}} @disableSave={{saving}} />
+  <GroupManageSaveButton @model={{model}} @saving={{saving}} />
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/group/manage/tags.hbs b/app/assets/javascripts/discourse/app/templates/group/manage/tags.hbs
index 74a2ba061d0..a0e25b4d63d 100644
--- a/app/assets/javascripts/discourse/app/templates/group/manage/tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/manage/tags.hbs
@@ -1,6 +1,6 @@
 <form class="groups-form form-vertical groups-notifications-form">
 
-  {{plugin-outlet name="before-manage-group-tags" connectorTagName="div" args=(hash model=model)}}
+  <PluginOutlet @name="before-manage-group-tags" @connectorTagName="div" @args={{hash model=model}} />
 
   <div class="control-group">
     <label class="control-label">{{i18n "groups.manage.tags.long_title"}}</label>
@@ -10,15 +10,9 @@
   <div class="control-group">
     <label>{{d-icon "d-watching"}} {{i18n "groups.notifications.watching.title"}}</label>
 
-    {{tag-chooser
-      tags=model.watching_tags
-      blacklist=selectedTags
-      everyTag=true
-      unlimitedTagCount=true
-      options=(hash
+    <TagChooser @tags={{model.watching_tags}} @blacklist={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
         allowAny=false
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.tags.watched_tags_instructions"}}
@@ -28,15 +22,9 @@
   <div class="control-group">
     <label>{{d-icon "d-tracking"}} {{i18n "groups.notifications.tracking.title"}}</label>
 
-    {{tag-chooser
-      tags=model.tracking_tags
-      blacklist=selectedTags
-      everyTag=true
-      unlimitedTagCount=true
-      options=(hash
+    <TagChooser @tags={{model.tracking_tags}} @blacklist={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
         allowAny=false
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.tags.tracked_tags_instructions"}}
@@ -46,15 +34,9 @@
   <div class="control-group">
     <label>{{d-icon "d-watching-first"}} {{i18n "groups.notifications.watching_first_post.title"}}</label>
 
-    {{tag-chooser
-      tags=model.watching_first_post_tags
-      blacklist=selectedTags
-      everyTag=true
-      unlimitedTagCount=true
-      options=(hash
+    <TagChooser @tags={{model.watching_first_post_tags}} @blacklist={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
         allowAny=false
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.tags.watching_first_post_tags_instructions"}}
@@ -64,15 +46,9 @@
   <div class="control-group">
     <label>{{d-icon "d-regular"}} {{i18n "groups.notifications.regular.title"}}</label>
 
-    {{tag-chooser
-      tags=model.regular_tags
-      blacklist=selectedTags
-      everyTag=true
-      unlimitedTagCount=true
-      options=(hash
+    <TagChooser @tags={{model.regular_tags}} @blacklist={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
         allowAny=false
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.tags.regular_tags_instructions"}}
@@ -82,20 +58,14 @@
   <div class="control-group">
     <label>{{d-icon "d-muted"}} {{i18n "groups.notifications.muted.title"}}</label>
 
-    {{tag-chooser
-      tags=model.muted_tags
-      blacklist=selectedTags
-      everyTag=true
-      unlimitedTagCount=true
-      options=(hash
+    <TagChooser @tags={{model.muted_tags}} @blacklist={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
         allowAny=false
-      )
-    }}
+      }} />
 
     <div class="control-instructions">
       {{i18n "groups.manage.tags.muted_tags_instructions"}}
     </div>
   </div>
 
-  {{group-manage-save-button model=model}}
+  <GroupManageSaveButton @model={{model}} />
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/group/messages.hbs b/app/assets/javascripts/discourse/app/templates/group/messages.hbs
index 69e370971c9..3bf0d2f105e 100644
--- a/app/assets/javascripts/discourse/app/templates/group/messages.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group/messages.hbs
@@ -1,16 +1,16 @@
 <section class="user-secondary-navigation">
-  {{#mobile-nav class="messages-nav" desktopClass="nav-stacked action-list"}}
+  <MobileNav @class="messages-nav" @desktopClass="nav-stacked action-list">
     <li>
-      {{#link-to "group.messages.inbox" model.name}}
+      <LinkTo @route="group.messages.inbox" @model={{model.name}}>
         {{i18n "user.messages.inbox"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li>
-      {{#link-to "group.messages.archive" model.name}}
+      <LinkTo @route="group.messages.archive" @model={{model.name}}>
         {{i18n "user.messages.archive"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
-  {{/mobile-nav}}
+  </MobileNav>
 </section>
 <section class="user-content">
   {{outlet}}
diff --git a/app/assets/javascripts/discourse/app/templates/groups/index.hbs b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
index 6b5003d8ef9..e1f98d44279 100644
--- a/app/assets/javascripts/discourse/app/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
@@ -1,59 +1,38 @@
-{{plugin-outlet name="before-groups-index-container" connectorTagName="div"}}
+<PluginOutlet @name="before-groups-index-container" @connectorTagName="div" />
 
-{{#d-section pageClass="groups"}}
+<DSection @pageClass="groups">
   <div class="groups-header">
     {{#if currentUser.can_create_group}}
-      {{d-button
-        action=(action "new")
-        class="btn-default groups-header-new pull-right"
-        icon="plus"
-        label="admin.groups.new.title"
-      }}
+      <DButton @action={{action "new"}} @class="btn-default groups-header-new pull-right" @icon="plus" @label="admin.groups.new.title" />
     {{/if}}
 
     <div class="groups-header-filters">
-      {{input
-        value=(readonly filter)
-        placeholderKey="groups.index.all"
-        class="groups-header-filters-name no-blur"
-        input=(action "onFilterChanged" value="target.value")
-      }}
+      <Input @value={{readonly filter}} @placeholderKey="groups.index.all" class="groups-header-filters-name no-blur" @input={{action "onFilterChanged" value="target.value"}} />
 
-      {{combo-box
-        value=type
-        content=types
-        class="groups-header-filters-type"
-        onChange=(action (mut type))
-        options=(hash
+      <ComboBox @value={{type}} @content={{types}} @class="groups-header-filters-type" @onChange={{action (mut type)}} @options={{hash
           clearable=true
           none="groups.index.filter"
-        )
-      }}
+        }} />
     </div>
   </div>
 
-  {{#conditional-loading-spinner condition=isLoading}}
+  <ConditionalLoadingSpinner @condition={{isLoading}}>
     {{#if groups}}
-      {{#load-more selector=".groups-boxes .group-box" action=(action "loadMore")}}
+      <LoadMore @selector=".groups-boxes .group-box" @action={{action "loadMore"}}>
         <div class="container">
           <div class="groups-boxes">
             {{#each groups as |group|}}
-              {{#link-to "group.members" group.name classNames=(concat "group-box " group.name)}}
+              <LinkTo @route="group.members" @model={{group.name}} @classNames={{concat "group-box " group.name}}>
                 <div class="group-box-inner">
                   <div class="group-info-wrapper">
                     {{#if group.flair_url}}
                       <span class="group-avatar-flair">
-                        {{avatar-flair
-                          flairName=group.name
-                          flairUrl=group.flair_url
-                          flairBgColor=group.flair_bg_color
-                          flairColor=group.flair_color
-                        }}
+                        <AvatarFlair @flairName={{group.name}} @flairUrl={{group.flair_url}} @flairBgColor={{group.flair_bg_color}} @flairColor={{group.flair_color}} />
                       </span>
                     {{/if}}
 
                     <span class="group-info">
-                      {{groups-info group=group}}
+                      <GroupsInfo @group={{group}} />
                       <div class="group-user-count">{{d-icon "user"}}{{group.user_count}}</div>
                     </span>
                   </div>
@@ -61,7 +40,7 @@
                   <div class="group-description">{{html-safe group.bio_excerpt}}</div>
 
                   <div class="group-membership">
-                    {{#group-membership-button tagName="" model=group showLogin=(route-action "showLogin")}}
+                    <GroupMembershipButton @tagName="" @model={{group}} @showLogin={{route-action "showLogin"}}>
                       {{#if group.is_group_owner}}
                         <span class="is-group-owner">
                           {{d-icon "shield-alt"}}
@@ -85,23 +64,23 @@
                           {{i18n "groups.index.closed"}}
                         {{/if}}
                       {{/if}}
-                    {{/group-membership-button}}
+                    </GroupMembershipButton>
 
-                    {{plugin-outlet name="group-index-box-after" tagName="span" connectorTagName="div" args=(hash model=group)}}
+                    <PluginOutlet @name="group-index-box-after" @tagName="span" @connectorTagName="div" @args={{hash model=group}} />
                   </div>
                 </div>
-              {{/link-to}}
+              </LinkTo>
             {{/each}}
           </div>
         </div>
-      {{/load-more}}
+      </LoadMore>
 
-      {{conditional-loading-spinner condition=groups.loadingMore}}
+      <ConditionalLoadingSpinner @condition={{groups.loadingMore}} />
     {{else}}
       <p>{{i18n "groups.index.empty"}}</p>
     {{/if}}
-  {{/conditional-loading-spinner}}
+  </ConditionalLoadingSpinner>
 
-{{/d-section}}
+</DSection>
 
-{{plugin-outlet name="after-groups-index-container" connectorTagName="div"}}
+<PluginOutlet @name="after-groups-index-container" @connectorTagName="div" />
diff --git a/app/assets/javascripts/discourse/app/templates/groups/new.hbs b/app/assets/javascripts/discourse/app/templates/groups/new.hbs
index fbb44248f03..d8ad9c70705 100644
--- a/app/assets/javascripts/discourse/app/templates/groups/new.hbs
+++ b/app/assets/javascripts/discourse/app/templates/groups/new.hbs
@@ -1,53 +1,36 @@
-{{#d-section pageClass="groups-new"}}
+<DSection @pageClass="groups-new">
   <h1>{{i18n "admin.groups.new.title"}}</h1>
 
   <hr>
 
   <form class="groups-form form-vertical">
-    {{#groups-form-profile-fields model=model disableSave=saving}}
+    <GroupsFormProfileFields @model={{model}} @disableSave={{saving}}>
       <div class="control-group">
         <label class="control-label" for="owner-selector">{{i18n "admin.groups.add_owners"}}</label>
 
-        {{email-group-user-chooser
-          class="input-xxlarge"
-          id="owner-selector"
-          value=splitOwnerUsernames
-          onChange=(action "updateOwnerUsernames")
-          options=(hash
+        <EmailGroupUserChooser @class="input-xxlarge" @id="owner-selector" @value={{splitOwnerUsernames}} @onChange={{action "updateOwnerUsernames"}} @options={{hash
             filterPlaceholder="groups.selector_placeholder"
-          )
-        }}
+          }} />
       </div>
 
       <div class="control-group">
         <label class="control-label" for="member-selector">{{i18n "groups.members.title"}}</label>
 
-        {{email-group-user-chooser
-          class="input-xxlarge"
-          id="member-selector"
-          value=splitUsernames
-          onChange=(action "updateUsernames")
-          options=(hash
+        <EmailGroupUserChooser @class="input-xxlarge" @id="member-selector" @value={{splitUsernames}} @onChange={{action "updateUsernames"}} @options={{hash
             filterPlaceholder="groups.selector_placeholder"
-          )
-        }}
+          }} />
       </div>
-    {{/groups-form-profile-fields}}
+    </GroupsFormProfileFields>
 
-    {{groups-form-membership-fields model=model}}
-    {{groups-form-interaction-fields model=model}}
+    <GroupsFormMembershipFields @model={{model}} />
+    <GroupsFormInteractionFields @model={{model}} />
 
     <div class="control-group buttons">
-      {{d-button
-        action=(action "save")
-        type="submit"
-        disabled=saving
-        class="btn btn-primary group-form-save"
-        label="admin.groups.new.create"}}
+      <DButton @action={{action "save"}} @type="submit" @disabled={{saving}} @class="btn btn-primary group-form-save" @label="admin.groups.new.create" />
 
-      {{#link-to "groups"}}
+      <LinkTo @route="groups">
         {{i18n "cancel"}}
-      {{/link-to}}
+      </LinkTo>
     </div>
   </form>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/hide-modal.hbs b/app/assets/javascripts/discourse/app/templates/hide-modal.hbs
index 69c2e656d9f..8f30d9581c4 100644
--- a/app/assets/javascripts/discourse/app/templates/hide-modal.hbs
+++ b/app/assets/javascripts/discourse/app/templates/hide-modal.hbs
@@ -1 +1 @@
-{{hide-modal-trigger}}
+<HideModalTrigger />
diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index a5554b07dd7..85b23213642 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="invite"}}
+<DSection @pageClass="invite">
   <div class="container invites-show clearfix">
     <div class="login-welcome-header">
       <h1 class="login-title">{{welcomeTitle}}</h1>
@@ -21,7 +21,7 @@
             </div>
           {{else}}
             <p>{{i18n "invites.invited_by"}}</p>
-            <p>{{user-info user=invitedBy}}</p>
+            <p><UserInfo @user={{invitedBy}} /></p>
 
             {{#if associateHtml}}
               <p class="create-account-associate-link">
@@ -42,10 +42,10 @@
               {{! authOptions are present once the user has followed the OmniAuth flow (e.g. twitter/google/etc) }}
               {{#if authOptions}}
                 {{#unless isInviteLink}}
-                  {{input-tip validation=emailValidation id="account-email-validation"}}
+                  <InputTip @validation={{emailValidation}} @id="account-email-validation" />
                 {{/unless}}
               {{else}}
-                {{login-buttons externalLogin=(action "externalLogin")}}
+                <LoginButtons @externalLogin={{action "externalLogin"}} />
               {{/if}}
             {{/if}}
 
@@ -59,29 +59,29 @@
               <form>
                 {{#if isInviteLink}}
                   <div class="input email-input input-group">
-                    {{input type="email" value=email id="new-account-email" name="email" class=(value-entered email) autofocus="autofocus" disabled=externalAuthsOnly}}
+                    <Input @type="email" @value={{email}} @id="new-account-email" @name="email" class={{value-entered email}} @autofocus="autofocus" @disabled={{externalAuthsOnly}} />
                     <label class="alt-placeholder" for="new-account-email">
                       {{i18n "user.email.title"}}
                       <span class="required">*</span>
                     </label>
-                    {{input-tip validation=emailValidation id="account-email-validation"}}
+                    <InputTip @validation={{emailValidation}} @id="account-email-validation" />
                     <div class="instructions">{{i18n "user.email.instructions"}}</div>
                   </div>
                 {{/if}}
 
                 <div class="input username-input input-group">
-                  {{input value=accountUsername class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}}
+                  <Input @value={{accountUsername}} class={{value-entered accountUsername}} @id="new-account-username" @name="username" @maxlength={{maxUsernameLength}} @autocomplete="off" />
                   <label class="alt-placeholder" for="new-account-username">
                     {{i18n "user.username.title"}}
                     <span class="required">*</span>
                   </label>
-                  {{input-tip validation=usernameValidation id="username-validation"}}
+                  <InputTip @validation={{usernameValidation}} @id="username-validation" />
                   <div class="instructions">{{i18n "user.username.instructions"}}</div>
                 </div>
 
                 {{#if fullnameRequired}}
                   <div class="input name-input input-group">
-                    {{input value=accountName class=(value-entered accountName) id="new-account-name" name="name"}}
+                    <Input @value={{accountName}} class={{value-entered accountName}} @id="new-account-name" @name="name" />
                     <label class="alt-placeholder" for="new-account-name">
                       {{i18n "invites.name_label"}}
                       {{#if siteSettings.full_name_required}}
@@ -94,12 +94,12 @@
 
                 {{#unless externalAuthsOnly}}
                   <div class="input password-input input-group">
-                    {{password-field value=accountPassword class=(value-entered accountPassword) type="password" id="new-account-password" capsLockOn=capsLockOn}}
+                    <PasswordField @value={{accountPassword}} @class={{value-entered accountPassword}} @type="password" @id="new-account-password" @capsLockOn={{capsLockOn}} />
                     <label class="alt-placeholder" for="new-account-password">
                       {{i18n "invites.password_label"}}
                       <span class="required">*</span>
                     </label>
-                    {{input-tip validation=passwordValidation}}
+                    <InputTip @validation={{passwordValidation}} />
                     <div class="instructions">
                       {{passwordInstructions}}
                       <div class="caps-lock-warning {{unless capsLockOn "invisible"}}">
@@ -113,19 +113,13 @@
                   <div class="user-fields">
                     {{#each userFields as |f|}}
                       <div class="input-group">
-                        {{user-field field=f.field value=f.value class=(value-entered f.value)}}
+                        <UserField @field={{f.field}} @value={{f.value}} @class={{value-entered f.value}} />
                       </div>
                     {{/each}}
                   </div>
                 {{/if}}
 
-                {{d-button
-                  class="btn-primary"
-                  action=(action "submit")
-                  type="submit"
-                  disabled=submitDisabled
-                  label="invites.accept_invite"
-                }}
+                <DButton @class="btn-primary" @action={{action "submit"}} @type="submit" @disabled={{submitDisabled}} @label="invites.accept_invite" />
 
                 {{#if errorMessage}}
                   <br><br>
@@ -138,4 +132,4 @@
       </div>
     </div>
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/login-preferences.hbs b/app/assets/javascripts/discourse/app/templates/login-preferences.hbs
index 6eb0b5d1d4a..7c213b37789 100644
--- a/app/assets/javascripts/discourse/app/templates/login-preferences.hbs
+++ b/app/assets/javascripts/discourse/app/templates/login-preferences.hbs
@@ -3,5 +3,5 @@
 
   <p style="margin-top: 1em">{{i18n "login.preferences"}}</p>
 
-  {{d-button class="btn-primary" action=(route-action "showLogin") label="log_in"}}
+  <DButton @class="btn-primary" @action={{route-action "showLogin"}} @label="log_in" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
index e17d6aeba9c..56f05d87ac9 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
@@ -2,7 +2,7 @@
   {{#if filteredCategories}}
     <div class="category-list {{if showTopics "with-topics"}}">
       {{#each filteredCategories as |c|}}
-        {{parent-category-row category=c showTopics=showTopics}}
+        <ParentCategoryRow @category={{c}} @showTopics={{showTopics}} />
       {{/each}}
     </div>
   {{/if}}
@@ -17,7 +17,7 @@
       </a>
       <div class="category-list {{if showTopics "with-topics"}} {{unless showMutedCategories "hidden"}}">
         {{#each mutedCategories as |c|}}
-          {{parent-category-row category=c showTopics=showTopics listType="muted"}}
+          <ParentCategoryRow @category={{c}} @showTopics={{showTopics}} @listType="muted" />
         {{/each}}
       </div>
     </div>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-with-featured-topics.hbs
index b62e4a8fb54..75eaa9bb810 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-with-featured-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-with-featured-topics.hbs
@@ -1,2 +1 @@
-{{categories-only categories=categories
-                  showTopics="true"}}
+<CategoriesOnly @categories={{categories}} @showTopics="true" />
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/directory-item.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/directory-item.hbs
index 8560f19c970..16dbb7f8177 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/directory-item.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/directory-item.hbs
@@ -1,4 +1,4 @@
-{{user-info user=item.user}}
+<UserInfo @user={{item.user}} />
 
 {{#each columns as |column|}}
   {{#if (directory-column-is-user-field column=column)}}
@@ -29,5 +29,5 @@
 {{/each}}
 
 {{#if showTimeRead}}
-  {{user-stat value=item.time_read label="directory.time_read" type="duration"}}
+  <UserStat @value={{item.time_read}} @label="directory.time_read" @type="duration" />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/navigation-bar.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/navigation-bar.hbs
index 64b1f5c72ee..b89975d8281 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/navigation-bar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/navigation-bar.hbs
@@ -7,8 +7,8 @@
 {{#if expanded}}
   <ul class="drop">
     {{#each navItems as |navItem|}}
-      {{navigation-item content=navItem filterMode=filterMode category=category class=(concat "nav-item_" navItem.name)}}
+      <NavigationItem @content={{navItem}} @filterMode={{filterMode}} @category={{category}} @class={{concat "nav-item_" navItem.name}} />
     {{/each}}
-    {{plugin-outlet name="extra-nav-item" connectorTagName="li" args=(hash category=category filterMode=filterMode)}}
+    <PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=category filterMode=filterMode}} />
   </ul>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs
index 2dbbebb13df..3a31bc04313 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row.hbs
@@ -1,11 +1,11 @@
 {{#unless isHidden}}
-  {{plugin-outlet name="category-list-above-each-category" args=(hash category=category)}}
+  <PluginOutlet @name="category-list-above-each-category" @args={{hash category=category}} />
   <div data-category-id={{category.id}} data-notification-level={{category.notificationLevelString}} style={{border-color category.color}} class="category-list-item category {{if isMuted "muted"}}">
     <table class="topic-list">
       <tbody>
         <tr>
           <th class="main-link">
-            {{category-title-link category=category}}
+            <CategoryTitleLink @category={{category}} />
           </th>
         </tr>
         {{#if category.description_excerpt}}
@@ -18,20 +18,20 @@
         {{#unless isMuted}}
           {{#if showTopics}}
             {{#each category.topics as |t|}}
-              {{mobile-category-topic topic=t}}
+              <MobileCategoryTopic @topic={{t}} />
             {{/each}}
           {{/if}}
         {{/unless}}
         {{#if category.isGrandParent}}
           {{#each category.subcategories as |subcategory|}}
-            {{sub-category-row category=subcategory listType=listType}}
+            <SubCategoryRow @category={{subcategory}} @listType={{listType}} />
           {{/each}}
         {{else if category.subcategories}}
           <tr class="subcategories-list">
             <td>
               <div class="subcategories">
                 {{#each category.subcategories as |subcategory|}}
-                  {{sub-category-item category=subcategory listType=listType}}
+                  <SubCategoryItem @category={{subcategory}} @listType={{listType}} />
                 {{/each}}
               </div>
             </td>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/sub-category-row.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/sub-category-row.hbs
index 0551f8240b5..d89c3f17715 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/sub-category-row.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/sub-category-row.hbs
@@ -1,12 +1,12 @@
 {{#unless isHidden}}
   <tr data-category-id={{category.id}} style={{border-color category.color}} class="subcategory-list-item category {{if isMuted "muted"}}">
     <td>
-      {{category-title-link tagName="h4" category=category}}
+      <CategoryTitleLink @tagName="h4" @category={{category}} />
       <div class="subcategories-list">
         {{#if category.subcategories}}
           <div class="subcategories">
             {{#each category.subcategories as |subcategory|}}
-              {{sub-category-item category=subcategory listType=listType}}
+              <SubCategoryItem @category={{subcategory}} @listType={{listType}} />
             {{/each}}
           </div>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs
index 85e44924a6e..73f4f15d5b5 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/subcategories-with-featured-topics.hbs
@@ -1,15 +1,15 @@
 {{#each categories as |category|}}
   <div class="category-list subcategory-list with-topics">
     <div class="parent-category">
-      {{category-title-link category=category}}
+      <CategoryTitleLink @category={{category}} />
       <span class="stat" title={{category.statTitle}}>{{html-safe category.stat}}</span>
     </div>
     <div class="subcategories">
       {{#each category.subcategories as |subCategory|}}
-        {{parent-category-row category=subCategory showTopics=true}}
+        <ParentCategoryRow @category={{subCategory}} @showTopics={{true}} />
       {{else}}
         {{!-- No subcategories... so just show the parent to avoid confusion --}}
-        {{parent-category-row category=category showTopics=true}}
+        <ParentCategoryRow @category={{category}} @showTopics={{true}} />
       {{/each}}
     </div>
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/discovery/topics.hbs b/app/assets/javascripts/discourse/app/templates/mobile/discovery/topics.hbs
index 932a7dffdb3..e1a7871a907 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/discovery/topics.hbs
@@ -1,52 +1,39 @@
-{{topic-dismiss-buttons position="top" selectedTopics=selected
-model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+<TopicDismissButtons @position="top" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
-{{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount as |discoveryTopicList|}}
+<DiscoveryTopicsList @model={{model}} @refresh={{action "refresh"}} @incomingCount={{topicTrackingState.incomingCount}} as |discoveryTopicList|>
   {{#if top}}
     <div class="top-lists">
-      {{period-chooser period=period action=(action "changePeriod") fullDay=false}}
+      <PeriodChooser @period={{period}} @action={{action "changePeriod"}} @fullDay={{false}} />
     </div>
   {{else}}
     {{#if topicTrackingState.hasIncoming}}
       <a href {{action "showInserted"}} class="alert alert-info clickable">
-        {{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
+        <CountI18n @key="topic_count_" @suffix={{topicTrackingState.filter}} @count={{topicTrackingState.incomingCount}} />
       </a>
     {{/if}}
   {{/if}}
 
   {{#if hasTopics}}
-    {{topic-list
-      highlightLastVisited=true
-      showPosters=true
-      hideCategory=model.hideCategory
-      order=order
-      ascending=ascending
-      topics=model.topics
-      expandGloballyPinned=expandGloballyPinned
-      expandAllPinned=expandAllPinned
-      scrollOnLoad=true
-      onScroll=discoveryTopicList.saveScrollPosition
-      category=category}}
+    <TopicList @highlightLastVisited={{true}} @showPosters={{true}} @hideCategory={{model.hideCategory}} @order={{order}} @ascending={{ascending}} @topics={{model.topics}} @expandGloballyPinned={{expandGloballyPinned}} @expandAllPinned={{expandAllPinned}} @scrollOnLoad={{true}} @onScroll={{discoveryTopicList.saveScrollPosition}} @category={{category}} />
   {{/if}}
-{{/discovery-topics-list}}
+</DiscoveryTopicsList>
 
 <footer class="topic-list-bottom">
-  {{conditional-loading-spinner condition=model.loadingMore}}
+  <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
   {{#if allLoaded}}
-    {{topic-dismiss-buttons position="bottom" selectedTopics=selected
-    model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+    <TopicDismissButtons @position="bottom" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
-    {{#footer-message education=footerEducation message=footerMessage}}
+    <FooterMessage @education={{footerEducation}} @message={{footerMessage}}>
       {{#if latest}}
         {{#if canCreateTopicOnCategory}}
-          {{discourse-linked-text action=(route-action "createTopic") text="topic.suggest_create_topic"}}
+          <DiscourseLinkedText @action={{route-action "createTopic"}} @text="topic.suggest_create_topic" />
         {{/if}}
       {{else if top}}
-        {{#link-to "discovery.categories"}}{{i18n "topic.browse_all_categories"}}{{/link-to}}, {{#link-to "discovery.latest"}}{{i18n "topic.view_latest_topics"}}{{/link-to}} {{i18n "or"}} {{i18n "filters.top.other_periods"}}
-        {{top-period-buttons period=period action=(action "changePeriod")}}
+        <LinkTo @route="discovery.categories">{{i18n "topic.browse_all_categories"}}</LinkTo>, <LinkTo @route="discovery.latest">{{i18n "topic.view_latest_topics"}}</LinkTo> {{i18n "or"}} {{i18n "filters.top.other_periods"}}
+        <TopPeriodButtons @period={{period}} @action={{action "changePeriod"}} />
       {{else}}
-        {{#link-to "discovery.categories"}} {{i18n "topic.browse_all_categories"}}{{/link-to}} {{i18n "or"}} {{#link-to "discovery.latest"}}{{i18n "topic.view_latest_topics"}}{{/link-to}}
+        <LinkTo @route="discovery.categories"> {{i18n "topic.browse_all_categories"}}</LinkTo> {{i18n "or"}} <LinkTo @route="discovery.latest">{{i18n "topic.view_latest_topics"}}</LinkTo>
       {{/if}}
-    {{/footer-message}}
+    </FooterMessage>
   {{/if}}
 </footer>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/group-index.hbs b/app/assets/javascripts/discourse/app/templates/mobile/group-index.hbs
index cb5bf2d6e48..2117f96d716 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/group-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/group-index.hbs
@@ -1,28 +1,18 @@
 <section class="user-content">
-  {{text-field
-    value=filterInput
-    placeholderKey=filterPlaceholder
-    autocomplete="off"
-    class="group-username-filter no-blur"
-  }}
+  <TextField @value={{filterInput}} @placeholderKey={{filterPlaceholder}} @autocomplete="off" @class="group-username-filter no-blur" />
 
   <div class="group-members-manage">
     {{#if canManageGroup}}
-      {{d-button
-        icon="plus"
-        label="groups.manage.add_members"
-        class="group-members-add"
-        action=(route-action "showAddMembersModal")
-      }}
+      <DButton @icon="plus" @label="groups.manage.add_members" @class="group-members-add" @action={{route-action "showAddMembersModal"}} />
     {{/if}}
   </div>
 
   {{#if hasMembers}}
-    {{#load-more selector=".group-members .user-info" action=(action "loadMore")}}
+    <LoadMore @selector=".group-members .user-info" @action={{action "loadMore"}}>
       <div class="group-members">
         {{#each model.members as |user|}}
           <div class="group-member">
-            {{#user-info user=user skipName=skipName}}
+            <UserInfo @user={{user}} @skipName={{skipName}}>
               {{#if user.owner}}<strong class="group-owner-label">{{i18n "groups.owner"}}</strong>{{/if}}
 
               <div class="group-member-info">
@@ -36,19 +26,15 @@
               </div>
 
               {{#if canManageGroup}}
-                {{group-member-dropdown
-                  member=user
-                  canAdminGroup=model.can_admin_group
-                  onChange=(action "actOnGroup" user)
-                }}
+                <GroupMemberDropdown @member={{user}} @canAdminGroup={{model.can_admin_group}} @onChange={{action "actOnGroup" user}} />
               {{/if}}
-            {{/user-info}}
+            </UserInfo>
           </div>
         {{/each}}
       </div>
-    {{/load-more}}
+    </LoadMore>
 
-    {{conditional-loading-spinner condition=loading}}
+    <ConditionalLoadingSpinner @condition={{loading}} />
   {{else}}
     <br>
 
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs
index 723520e47ce..5d2c879dbdf 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs
@@ -1,19 +1,19 @@
-{{#login-modal loginName=loginName loginPassword=loginPassword secondFactorToken=secondFactorToken action=(action "login")}}
-  {{plugin-outlet name="login-before-modal-body" connectorTagName="div"}}
-  {{#d-modal-body class=modalBodyClasses}}
+<LoginModal @loginName={{loginName}} @loginPassword={{loginPassword}} @secondFactorToken={{secondFactorToken}} @action={{action "login"}}>
+  <PluginOutlet @name="login-before-modal-body" @connectorTagName="div" />
+  <DModalBody @class={{modalBodyClasses}}>
     <div class="login-welcome-header">
       <h1 class="login-title">{{i18n "login.header_title"}}</h1> <img src={{wavingHandURL}} alt="" class="waving-hand">
       <p class="login-subheader">{{i18n "login.subheader_title"}}</p>
     </div>
     {{#if showLoginButtons}}
-      {{login-buttons externalLogin=(action "externalLogin")}}
+      <LoginButtons @externalLogin={{action "externalLogin"}} />
     {{/if}}
 
     {{#if canLoginLocal}}
       <form id="login-form" method="post">
         <div id="credentials" class={{credentialsClass}}>
           <div class="input-group">
-            {{input value=loginName class=(value-entered loginName) type="email" id="login-account-name" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus"}}
+            <Input @value={{loginName}} class={{value-entered loginName}} @type="email" @id="login-account-name" @autocorrect="off" @autocapitalize="off" @disabled={{showSecondFactor}} @autofocus="autofocus" />
             <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
             {{#if showLoginWithEmailLink}}
               <a href id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
@@ -22,54 +22,37 @@
             {{/if}}
           </div>
           <div class="input-group">
-            {{input value=loginPassword class=(value-entered loginPassword) type="password" id="login-account-password" maxlength="200" disabled=showSecondFactor}}
+            <Input @value={{loginPassword}} class={{value-entered loginPassword}} @type="password" @id="login-account-password" @maxlength="200" @disabled={{showSecondFactor}} />
             <label class="alt-placeholder" for="login-account-password">{{i18n "login.password"}}</label>
             <a href id="forgot-password-link" {{action "showForgotPassword"}}>{{i18n "forgot_password.action"}}</a>
           </div>
         </div>
-        {{#second-factor-form
-          secondFactorMethod=secondFactorMethod
-          secondFactorToken=secondFactorToken
-          class=secondFactorClass
-          backupEnabled=backupEnabled
-          isLogin=true}}
+        <SecondFactorForm @secondFactorMethod={{secondFactorMethod}} @secondFactorToken={{secondFactorToken}} @class={{secondFactorClass}} @backupEnabled={{backupEnabled}} @isLogin={{true}}>
           {{#if showSecurityKey}}
-            {{#security-key-form
-              allowedCredentialIds=securityKeyAllowedCredentialIds
-              challenge=securityKeyChallenge
-              showSecurityKey=showSecurityKey
-              showSecondFactor=showSecondFactor
-              secondFactorMethod=secondFactorMethod
-              otherMethodAllowed=otherMethodAllowed
-              action=(action "authenticateSecurityKey")}}
-            {{/security-key-form}}
+            <SecurityKeyForm @allowedCredentialIds={{securityKeyAllowedCredentialIds}} @challenge={{securityKeyChallenge}} @showSecurityKey={{showSecurityKey}} @showSecondFactor={{showSecondFactor}} @secondFactorMethod={{secondFactorMethod}} @otherMethodAllowed={{otherMethodAllowed}} @action={{action "authenticateSecurityKey"}}>
+            </SecurityKeyForm>
           {{else}}
-            {{second-factor-input value=secondFactorToken inputId="login-second-factor" secondFactorMethod=secondFactorMethod backupEnabled=backupEnabled}}
+            <SecondFactorInput @value={{secondFactorToken}} @inputId="login-second-factor" @secondFactorMethod={{secondFactorMethod}} @backupEnabled={{backupEnabled}} />
           {{/if}}
-        {{/second-factor-form}}
+        </SecondFactorForm>
       </form>
     {{/if}}
 
-  {{/d-modal-body}}
+  </DModalBody>
 
   <div class="modal-footer">
     {{#if canLoginLocal}}
       {{#unless showSecurityKey }}
-        {{d-button action=(action "login")
-          id="login-button"
-          icon="unlock"
-          label=loginButtonLabel
-          disabled=loginDisabled
-          class="btn-large btn-primary"}}
+        <DButton @action={{action "login"}} @id="login-button" @icon="unlock" @label={{loginButtonLabel}} @disabled={{loginDisabled}} @class="btn-large btn-primary" />
       {{/unless}}
 
       {{#if showSignupLink}}
-        {{d-button class="btn-large" id="new-account-link" action=(route-action "showCreateAccount") label="create_account.title"}}
+        <DButton @class="btn-large" @id="new-account-link" @action={{route-action "showCreateAccount"}} @label="create_account.title" />
       {{/if}}
     {{/if}}
   </div>
 
-  {{plugin-outlet name="login-after-modal-footer" connectorTagName="div"}}
+  <PluginOutlet @name="login-after-modal-footer" @connectorTagName="div" />
 
   <div class={{alertClass}} id="login-alert">{{alert}}</div>
-{{/login-modal}}
+</LoginModal>
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
index 7620665dda3..3117bd9c9bd 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
@@ -1,10 +1,10 @@
-{{#load-more selector=".directory .user" action=(action "loadMore")}}
+<LoadMore @selector=".directory .user" @action={{action "loadMore"}}>
   <div class="container">
     <div class="users-directory directory">
-      {{plugin-outlet name="users-top" tagName="span" connectorTagName="div" args=(hash model=model)}}
+      <PluginOutlet @name="users-top" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
       <div class="directory-controls">
-        {{period-chooser period=period onChange=(action (mut period)) fullDay=false}}
+        <PeriodChooser @period={{period}} @onChange={{action (mut period)}} @fullDay={{false}} />
         {{#if lastUpdatedAt}}
           <div class="directory-last-updated">
             {{i18n "directory.last_updated"}}
@@ -12,44 +12,29 @@
           </div>
         {{/if}}
         <div class="inline-form full-width">
-          {{input
-            value=(readonly nameInput)
-            input=(action "onUsernameFilterChanged" value="target.value")
-            placeholderKey="directory.filter_name"
-            class="filter-name no-blur"
-          }}
-          {{combo-box
-            class="directory-group-selector"
-            value=group
-            content=groupOptions
-            onChange=(action groupChanged)
-            options=(hash none="directory.group.all")
-          }}
+          <Input @value={{readonly nameInput}} @input={{action "onUsernameFilterChanged" value="target.value"}} @placeholderKey="directory.filter_name" class="filter-name no-blur" />
+          <ComboBox @class="directory-group-selector" @value={{group}} @content={{groupOptions}} @onChange={{action groupChanged}} @options={{hash none="directory.group.all"}} />
           {{#if currentUser.staff}}
-            {{d-button
-              icon="wrench"
-              action=(action "showEditColumnsModal")
-              class="btn-default open-edit-columns-btn"
-            }}
+            <DButton @icon="wrench" @action={{action "showEditColumnsModal"}} @class="btn-default open-edit-columns-btn" />
           {{/if}}
         </div>
-        {{plugin-outlet name="users-directory-controls" args=(hash model=model)}}
+        <PluginOutlet @name="users-directory-controls" @args={{hash model=model}} />
       </div>
 
-      {{#conditional-loading-spinner condition=isLoading}}
+      <ConditionalLoadingSpinner @condition={{isLoading}}>
         {{#if model.length}}
           <div class="total-rows">{{i18n "directory.total_rows" count=model.totalRows}}</div>
           {{#each model as |item|}}
-            {{directory-item tagName="div" class="user" item=item columns=columns showTimeRead=showTimeRead}}
+            <DirectoryItem @tagName="div" @class="user" @item={{item}} @columns={{columns}} @showTimeRead={{showTimeRead}} />
           {{/each}}
 
-          {{conditional-loading-spinner condition=model.loadingMore}}
+          <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
         {{else}}
           <div class="clearfix"></div>
           <p>{{i18n "directory.no_results"}}</p>
         {{/if}}
-      {{/conditional-loading-spinner}}
+      </ConditionalLoadingSpinner>
 
     </div>
   </div>
-{{/load-more}}
+</LoadMore>
diff --git a/app/assets/javascripts/discourse/app/templates/modal.hbs b/app/assets/javascripts/discourse/app/templates/modal.hbs
index 44b6f315125..11092780411 100644
--- a/app/assets/javascripts/discourse/app/templates/modal.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal.hbs
@@ -1,13 +1,3 @@
-{{#d-modal
-  modalClass=modalClass
-  title=title
-  titleAriaElementId=titleAriaElementId
-  subtitle=subtitle
-  panels=panels
-  selectedPanel=selectedPanel
-  onSelectPanel=onSelectPanel
-  class="hidden"
-  errors=errors
-  closeModal=(route-action "closeModal")}}
+<DModal @modalClass={{modalClass}} @title={{title}} @titleAriaElementId={{titleAriaElementId}} @subtitle={{subtitle}} @panels={{panels}} @selectedPanel={{selectedPanel}} @onSelectPanel={{onSelectPanel}} @class="hidden" @errors={{errors}} @closeModal={{route-action "closeModal"}}>
   {{outlet "modalBody"}}
-{{/d-modal}}
+</DModal>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/activation-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/activation-edit.hbs
index 55a759f088c..a378a5da9a0 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/activation-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/activation-edit.hbs
@@ -1,11 +1,8 @@
-{{#d-modal-body}}
-  {{activation-email-form email=newEmail}}
-{{/d-modal-body}}
+<DModalBody>
+  <ActivationEmailForm @email={{newEmail}} />
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "changeEmail")
-             label="login.submit_new_email"
-             disabled=submitDisabled
-             class="btn-primary"}}
-  {{d-button action=(route-action "closeModal") label="close"}}
+  <DButton @action={{action "changeEmail"}} @label="login.submit_new_email" @disabled={{submitDisabled}} @class="btn-primary" />
+  <DButton @action={{route-action "closeModal"}} @label="close" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/activation-resent.hbs b/app/assets/javascripts/discourse/app/templates/modal/activation-resent.hbs
index 69281580406..650caef45c2 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/activation-resent.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/activation-resent.hbs
@@ -1,5 +1,5 @@
-{{#d-modal-body}}
+<DModalBody>
   {{html-safe (i18n "login.sent_activation_email_again" currentEmail=currentEmail)}}
-{{/d-modal-body}}
+</DModalBody>
 
-{{modal-footer-close closeModal=(route-action "closeModal")}}
+<ModalFooterClose @closeModal={{route-action "closeModal"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/modal/associate-account-confirm.hbs b/app/assets/javascripts/discourse/app/templates/modal/associate-account-confirm.hbs
index af4bc0825f7..c8364fdabef 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/associate-account-confirm.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/associate-account-confirm.hbs
@@ -1,9 +1,6 @@
-{{#d-modal-body
-    rawTitle=(
-      i18n "user.associated_accounts.confirm_modal_title"
+<DModalBody @rawTitle={{i18n "user.associated_accounts.confirm_modal_title"
       provider=(i18n (concat "login." model.provider_name ".name"))
-    )
-}}
+    }}>
   {{#if model.error}}
     <div class="alert alert-error">
       {{model.error}}
@@ -28,9 +25,9 @@
           provider=(i18n (concat "login." model.provider_name ".name"))}}
     {{/if}}
   </p>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button label="user.associated_accounts.connect" action=(action "finishConnect") class="btn-primary" icon="plug"}}
-  {{d-button label="user.associated_accounts.cancel" action=(action "closeModal")}}
+  <DButton @label="user.associated_accounts.connect" @action={{action "finishConnect"}} @class="btn-primary" @icon="plug" />
+  <DButton @label="user.associated_accounts.cancel" @action={{action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/auth-token.hbs b/app/assets/javascripts/discourse/app/templates/modal/auth-token.hbs
index 11d8da0bf66..28d7007a212 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/auth-token.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/auth-token.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="user.auth_tokens.was_this_you"}}
+<DModalBody @title="user.auth_tokens.was_this_you">
   <div>
     <p>{{i18n "user.auth_tokens.was_this_you_description"}}</p>
     <p>{{html-safe (i18n "user.second_factor.extended_description")}}</p>
@@ -27,13 +27,9 @@
       {{/if}}
     </div>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(action "highlightSecure")
-    icon="lock"
-    label="user.auth_tokens.secure_account"}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DButton @class="btn-primary" @action={{action "highlightSecure"}} @icon="lock" @label="user.auth_tokens.secure_account" />
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs b/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
index e7dd9107d19..a63759bdd5a 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/avatar-selector.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}}
+<DModalBody @title="user.change_avatar.title" @class="avatar-selector">
   {{#if showSelectableAvatars}}
     <div class="selectable-avatars">
       {{#each selectableAvatars as |avatar|}}
@@ -14,31 +14,27 @@
   {{#if showAvatarUploader}}
     {{#if user.use_logo_small_as_avatar}}
       <div class="avatar-choice">
-        {{radio-button id="logo-small" name="logo" value="logo" selection=selected}}
+        <RadioButton @id="logo-small" @name="logo" @value="logo" @selection={{selected}} />
         <label class="radio" for="logo-small">{{bound-avatar-template siteSettings.site_logo_small_url "large"}} {{html-safe (i18n "user.change_avatar.logo_small")}}</label>
       </div>
     {{/if}}
     <div class="avatar-choice">
-      {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}}
+      <RadioButton @id="system-avatar" @name="avatar" @value="system" @selection={{selected}} />
       <label class="radio" for="system-avatar">{{bound-avatar-template user.system_avatar_template "large"}} {{html-safe (i18n "user.change_avatar.letter_based")}}</label>
     </div>
     {{#if allowAvatarUpload}}
       <div class="avatar-choice">
-        {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
+        <RadioButton @id="gravatar" @name="avatar" @value="gravatar" @selection={{selected}} />
         <label class="radio" for="gravatar">{{bound-avatar-template user.gravatar_avatar_template "large"}} <span>{{html-safe (i18n "user.change_avatar.gravatar" gravatarName=gravatarName gravatarBaseUrl=gravatarBaseUrl gravatarLoginUrl=gravatarLoginUrl)}} {{user.email}}</span></label>
 
-        {{d-button action=(action "refreshGravatar")
-                   translatedTitle=(i18n "user.change_avatar.refresh_gravatar_title" gravatarName=gravatarName)
-                   disabled=gravatarRefreshDisabled
-                   icon="sync"
-                   class="btn-default avatar-selector-refresh-gravatar"}}
+        <DButton @action={{action "refreshGravatar"}} @translatedTitle={{i18n "user.change_avatar.refresh_gravatar_title" gravatarName=gravatarName}} @disabled={{gravatarRefreshDisabled}} @icon="sync" @class="btn-default avatar-selector-refresh-gravatar" />
 
         {{#if gravatarFailed}}
           <p class="error">{{I18n "user.change_avatar.gravatar_failed" gravatarName=gravatarName}}</p>
         {{/if}}
       </div>
       <div class="avatar-choice">
-        {{radio-button id="uploaded-avatar" name="avatar" value="custom" selection=selected}}
+        <RadioButton @id="uploaded-avatar" @name="avatar" @value="custom" @selection={{selected}} />
         <label class="radio" for="uploaded-avatar">
           {{#if user.custom_avatar_template}}
             {{bound-avatar-template user.custom_avatar_template "large"}}
@@ -47,21 +43,15 @@
             {{i18n "user.change_avatar.uploaded_avatar_empty"}}
           {{/if}}
         </label>
-        {{avatar-uploader user_id=user.id
-                          uploadedAvatarTemplate=user.custom_avatar_template
-                          uploadedAvatarId=user.custom_avatar_upload_id
-                          uploading=uploading
-                          class="avatar-uploader"
-                          id="avatar-uploader"
-                          done=(action "uploadComplete")}}
+        <AvatarUploader @user_id={{user.id}} @uploadedAvatarTemplate={{user.custom_avatar_template}} @uploadedAvatarId={{user.custom_avatar_upload_id}} @uploading={{uploading}} @class="avatar-uploader" @id="avatar-uploader" @done={{action "uploadComplete"}} />
       </div>
     {{/if}}
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 
 {{#if showAvatarUploader}}
   <div class="modal-footer">
-    {{d-button action=(action "saveAvatarSelection") class="btn-primary" disabled=submitDisabled label="save"}}
-    {{d-modal-cancel close=(route-action "closeModal")}}
+    <DButton @action={{action "saveAvatarSelection"}} @class="btn-primary" @disabled={{submitDisabled}} @label="save" />
+    <DModalCancel @close={{route-action "closeModal"}} />
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/bookmark.hbs b/app/assets/javascripts/discourse/app/templates/modal/bookmark.hbs
index b50137ab303..18c2b327427 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/bookmark.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/bookmark.hbs
@@ -1,8 +1,3 @@
-{{#d-modal-body id="bookmark-reminder-modal"}}
-  {{bookmark model=model
-    afterSave=afterSave
-    afterDelete=afterDelete
-    onCloseWithoutSaving=onCloseWithoutSaving
-    registerOnCloseHandler=(action "registerOnCloseHandler")
-    closeModal=(action "closeModal")}}
-{{/d-modal-body}}
+<DModalBody @id="bookmark-reminder-modal">
+  <Bookmark @model={{model}} @afterSave={{afterSave}} @afterDelete={{afterDelete}} @onCloseWithoutSaving={{onCloseWithoutSaving}} @registerOnCloseHandler={{action "registerOnCloseHandler"}} @closeModal={{action "closeModal"}} />
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/bulk-actions-buttons.hbs b/app/assets/javascripts/discourse/app/templates/modal/bulk-actions-buttons.hbs
index 0217263bd77..32979326694 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/bulk-actions-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/bulk-actions-buttons.hbs
@@ -1,5 +1,5 @@
 <div class="bulk-buttons">
   {{#each buttons as |button|}}
-    {{d-button action=(action button.action) label=button.label icon=button.icon class=button.class}}
+    <DButton @action={{action button.action}} @label={{button.label}} @icon={{button.icon}} @class={{button.class}} />
   {{/each}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/bulk-change-category.hbs b/app/assets/javascripts/discourse/app/templates/modal/bulk-change-category.hbs
index 005b266389a..a8a8cdbce25 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/bulk-change-category.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/bulk-change-category.hbs
@@ -1,12 +1,9 @@
 <p>{{i18n "topics.bulk.choose_new_category"}}</p>
 
 <p>
-  {{category-chooser
-    value=newCategoryId
-    onChange=(action (mut newCategoryId))
-  }}
+  <CategoryChooser @value={{newCategoryId}} @onChange={{action (mut newCategoryId)}} />
 </p>
 
-{{#conditional-loading-spinner condition=loading}}
-  {{d-button action=(action "changeCategory") label="topics.bulk.change_category"}}
-{{/conditional-loading-spinner}}
+<ConditionalLoadingSpinner @condition={{loading}}>
+  <DButton @action={{action "changeCategory"}} @label="topics.bulk.change_category" />
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/bulk-notification-level.hbs b/app/assets/javascripts/discourse/app/templates/modal/bulk-notification-level.hbs
index 5a40fd79389..cc5eeb579ea 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/bulk-notification-level.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/bulk-notification-level.hbs
@@ -2,14 +2,11 @@
   {{#each notificationLevels as |level|}}
     <div class="controls">
       <label class="radio notification-level-radio">
-        {{radio-button value=level.id name="notification_level" selection=notificationLevelId}} <strong>{{level.name}}</strong>
+        <RadioButton @value={{level.id}} @name="notification_level" @selection={{notificationLevelId}} /> <strong>{{level.name}}</strong>
         <div class="description">{{html-safe level.description}}</div>
       </label>
     </div>
   {{/each}}
 </div>
 
-{{d-button
-  disabled=disabled
-  action=(action "changeNotificationLevel")
-  label="topics.bulk.change_notification_level"}}
+<DButton @disabled={{disabled}} @action={{action "changeNotificationLevel"}} @label="topics.bulk.change_notification_level" />
diff --git a/app/assets/javascripts/discourse/app/templates/modal/change-owner.hbs b/app/assets/javascripts/discourse/app/templates/modal/change-owner.hbs
index e56941d0cf8..d913d9c6ac6 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/change-owner.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/change-owner.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="change-ownership"}}
+<DModalBody @class="change-ownership">
   <span>
     {{html-safe (i18n (if selectedPostsUsername "topic.change_owner.instructions" "topic.change_owner.instructions_without_old_user")
         count=selectedPostsCount
@@ -9,22 +9,13 @@
 
   <form>
     <label></label>
-    {{email-group-user-chooser
-      value=newOwner
-      autofocus=true
-      onChange=(action "updateNewOwner")
-      options=(hash
+    <EmailGroupUserChooser @value={{newOwner}} @autofocus={{true}} @onChange={{action "updateNewOwner"}} @options={{hash
         maximum=1
         filterPlaceholder="topic.change_owner.placeholder"
-      )
-    }}
+      }} />
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(action "changeOwnershipOfPosts")
-    disabled=buttonDisabled
-    label=(if saving "saving" "topic.change_owner.action")}}
+  <DButton @class="btn-primary" @action={{action "changeOwnershipOfPosts"}} @disabled={{buttonDisabled}} @label={{if saving "saving" "topic.change_owner.action"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/change-post-notice.hbs b/app/assets/javascripts/discourse/app/templates/modal/change-post-notice.hbs
index 3a6269ce326..50b066aa22f 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/change-post-notice.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/change-post-notice.hbs
@@ -1,11 +1,11 @@
-{{#d-modal-body title=(if model.notice "post.controls.change_post_notice" "post.controls.add_post_notice")}}
-  <form>{{textarea value=notice}}</form>
-{{/d-modal-body}}
+<DModalBody @title={{if model.notice "post.controls.change_post_notice" "post.controls.add_post_notice"}}>
+  <form><Textarea @value={{notice}} /></form>
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary" label=(if saving "saving" "save") action=(action "setNotice" notice) disabled=disabled}}
+  <DButton @class="btn-primary" @label={{if saving "saving" "save"}} @action={{action "setNotice" notice}} @disabled={{disabled}} />
   {{#if model.notice}}
-    {{d-button class="btn-danger" label="post.controls.delete_post_notice" action=(action "setNotice") disabled=saving}}
+    <DButton @class="btn-danger" @label="post.controls.delete_post_notice" @action={{action "setNotice"}} @disabled={{saving}} />
   {{/if}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/change-timestamp.hbs b/app/assets/javascripts/discourse/app/templates/modal/change-timestamp.hbs
index 268a4465015..4b918dee3c3 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/change-timestamp.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/change-timestamp.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="change-timestamp"}}
+<DModalBody @class="change-timestamp">
   <p>
     {{i18n "topic.change_timestamp.instructions"}}
   </p>
@@ -8,21 +8,14 @@
   </p>
 
   <form>
-    {{date-picker-past
-      value=(readonly date)
-      containerId="date-container"
-      onSelect=(action (mut date))}}
+    <DatePickerPast @value={{readonly date}} @containerId="date-container" @onSelect={{action (mut date)}} />
 
-    {{input type="time" value=time}}
+    <Input @type="time" @value={{time}} />
   </form>
 
   <div id="date-container"></div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer change-timestamp-footer">
-  {{d-button
-    class="btn-primary"
-    disabled=buttonDisabled
-    action=(action "changeTimestamp")
-    translatedLabel=buttonTitle}}
+  <DButton @class="btn-primary" @disabled={{buttonDisabled}} @action={{action "changeTimestamp"}} @translatedLabel={{buttonTitle}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs
index 314a5478f52..7ddf3e0d025 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs
@@ -1,16 +1,13 @@
-{{#d-modal-body title="topic.make_public.title"}}
+<DModalBody @title="topic.make_public.title">
 
   <div class="instructions">
     {{i18n "topic.make_public.choose_category"}}
   </div>
-  {{category-chooser
-    value=publicCategoryId
-    onChange=(action (mut publicCategoryId))
-  }}
+  <CategoryChooser @value={{publicCategoryId}} @onChange={{action (mut publicCategoryId)}} />
 
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary" action=(action "makePublic") label="composer.modal_ok" disabled=saving}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DButton @class="btn-primary" @action={{action "makePublic"}} @label="composer.modal_ok" @disabled={{saving}} />
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
index ddb5cf59b9a..9befefccb7e 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
@@ -1,7 +1,7 @@
-{{#create-account email=accountEmail disabled=submitDisabled action=(action "createAccount")}}
+<CreateAccount @email={{accountEmail}} @disabled={{submitDisabled}} @action={{action "createAccount"}}>
   {{#unless complete}}
-    {{plugin-outlet name="create-account-before-modal-body" tagName="span" connectorTagName="div"}}
-    {{#d-modal-body class=modalBodyClasses preventModalAlertHiding=true}}
+    <PluginOutlet @name="create-account-before-modal-body" @tagName="span" @connectorTagName="div" />
+    <DModalBody @class={{modalBodyClasses}} @preventModalAlertHiding={{true}}>
       <div class="create-account-form">
         <div class="login-welcome-header" id="create-account-title">
           <h1 class="login-title">{{i18n "create_account.header_title"}}</h1> <img src={{wavingHandURL}} alt="" class="waving-hand">
@@ -17,40 +17,19 @@
                 </div>
               {{/if}}
               <div class="input-group create-account-email">
-                {{input
-                  type="email"
-                  disabled=emailDisabled
-                  value=accountEmail
-                  id="new-account-email"
-                  name="email"
-                  class=(value-entered accountEmail)
-                  autofocus="autofocus"
-                  focusOut=(action "checkEmailAvailability")
-                  aria-describedby="account-email-validation"
-                  aria-invalid=emailValidation.failed
-                }}
+                <Input @type="email" @disabled={{emailDisabled}} @value={{accountEmail}} @id="new-account-email" @name="email" class={{value-entered accountEmail}} @autofocus="autofocus" @focusOut={{action "checkEmailAvailability"}} @aria-describedby="account-email-validation" @aria-invalid={{emailValidation.failed}} />
                 <label class="alt-placeholder" for="new-account-email">
                   {{i18n "user.email.title"}}
                   {{~#if userFields~}}
                     <span class="required">*</span>
                   {{/if}}
                 </label>
-                {{input-tip validation=emailValidation id="account-email-validation"}}
+                <InputTip @validation={{emailValidation}} @id="account-email-validation" />
                 <span class="more-info">{{i18n "user.email.instructions"}}</span>
               </div>
 
               <div class="input-group">
-                {{input
-                  value=accountUsername
-                  disabled=usernameDisabled
-                  class=(value-entered accountUsername)
-                  id="new-account-username"
-                  name="username"
-                  maxlength=maxUsernameLength
-                  aria-describedby="username-validation"
-                  aria-invalid=usernameValidation.failed
-                  autocomplete="off"
-                }}
+                <Input @value={{accountUsername}} @disabled={{usernameDisabled}} class={{value-entered accountUsername}} @id="new-account-username" @name="username" @maxlength={{maxUsernameLength}} @aria-describedby="username-validation" @aria-invalid={{usernameValidation.failed}} @autocomplete="off" />
                 <label class="alt-placeholder" for="new-account-username">
                   {{i18n "user.username.title"}}
                   {{~#if userFields~}}
@@ -58,20 +37,13 @@
                   {{/if}}
                 </label>
 
-                {{input-tip validation=usernameValidation id="username-validation"}}
+                <InputTip @validation={{usernameValidation}} @id="username-validation" />
                 <span class="more-info">{{i18n "user.username.instructions"}}</span>
               </div>
 
               <div class="input-group">
                 {{#if fullnameRequired}}
-                  {{text-field
-                    disabled=nameDisabled
-                    value=accountName
-                    id="new-account-name"
-                    class=(value-entered accountName)
-                    aria-describedby="fullname-validation"
-                    aria-invalid=nameValidation.failed
-                  }}
+                  <TextField @disabled={{nameDisabled}} @value={{accountName}} @id="new-account-name" @class={{value-entered accountName}} @aria-describedby="fullname-validation" @aria-invalid={{nameValidation.failed}} />
                   <label class="alt-placeholder" for="new-account-name">
                     {{i18n "user.name.title"}}
                     {{#if siteSettings.full_name_required}}
@@ -81,34 +53,22 @@
                     {{/if}}
                   </label>
 
-                  {{input-tip validation=nameValidation id="fullname-validation"}}
+                  <InputTip @validation={{nameValidation}} @id="fullname-validation" />
                   <span class="more-info">{{nameInstructions}}</span>
                 {{/if}}
               </div>
 
-              {{plugin-outlet
-                  name="create-account-before-password"
-                  args=(hash
+              <PluginOutlet @name="create-account-before-password" @args={{hash
                     accountName=accountName
                     accountUsername=accountUsername
                     accountPassword=accountPassword
                     userFields=userFields
                     authOptions=authOptions
-                  )
-              }}
+                  }} />
 
               <div class="input-group">
                 {{#if passwordRequired}}
-                  {{password-field
-                    value=accountPassword
-                    class=(value-entered accountPassword)
-                    type="password"
-                    id="new-account-password"
-                    autocomplete="current-password"
-                    capsLockOn=capsLockOn
-                    aria-describedby="password-validation"
-                    aria-invalid=passwordValidation.failed
-                  }}
+                  <PasswordField @value={{accountPassword}} @class={{value-entered accountPassword}} @type="password" @id="new-account-password" @autocomplete="current-password" @capsLockOn={{capsLockOn}} @aria-describedby="password-validation" @aria-invalid={{passwordValidation.failed}} />
                   <label class="alt-placeholder" for="new-account-password">
                     {{i18n "user.password.title"}}
                     {{~#if userFields~}}
@@ -116,7 +76,7 @@
                     {{/if}}
                   </label>
 
-                  {{input-tip validation=passwordValidation id="password-validation"}}
+                  <InputTip @validation={{passwordValidation}} @id="password-validation" />
                   <span class="more-info">{{passwordInstructions}}</span>
                   <div class="caps-lock-warning {{unless capsLockOn " hidden"}}">
                     {{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
@@ -125,28 +85,25 @@
 
                 <div class="password-confirmation">
                   <label for="new-account-password-confirmation">{{i18n "user.password_confirmation.title"}}</label>
-                  {{honeypot-input id="new-account-confirmation" autocomplete="new-password" value=accountHoneypot}}
-                  {{input value=accountChallenge id="new-account-challenge"}}
+                  <HoneypotInput @id="new-account-confirmation" @autocomplete="new-password" @value={{accountHoneypot}} />
+                  <Input @value={{accountChallenge}} @id="new-account-challenge" />
                 </div>
               </div>
 
               {{#if requireInviteCode }}
                 <div class="input-group">
-                  {{input value=inviteCode class=(value-entered inviteCode) id="inviteCode"}}
+                  <Input @value={{inviteCode}} class={{value-entered inviteCode}} @id="inviteCode" />
                   <label class="alt-placeholder" for="invite-code">{{i18n "user.invite_code.title"}}</label>
                   <span class="more-info">{{i18n "user.invite_code.instructions"}}</span>
                 </div>
               {{/if}}
 
-              {{plugin-outlet
-                name="create-account-after-password"
-                args=(hash
+              <PluginOutlet @name="create-account-after-password" @args={{hash
                   accountName=accountName
                   accountUsername=accountUsername
                   accountPassword=accountPassword
                   userFields=userFields
-                )
-              }}
+                }} />
 
               {{#if userFields}}
                 <div class="user-fields">
@@ -155,8 +112,7 @@
                       {{!-- adding the value-entered class here to
                       be able to detect if the user field has a value
                       entered --}}
-                      {{user-field field=f.field value=f.value
-                      class=(value-entered f.value)}}
+                      <UserField @field={{f.field}} @value={{f.value}} @class={{value-entered f.value}} />
                     </div>
                   {{/each}}
                 </div>
@@ -165,16 +121,10 @@
           </div>
 
           <div class="modal-footer">
-            {{d-button
-              class="btn-large btn-primary"
-              action=(action "createAccount")
-              disabled=submitDisabled
-              label="create_account.title"
-              isLoading=formSubmitted
-            }}
+            <DButton @class="btn-large btn-primary" @action={{action "createAccount"}} @disabled={{submitDisabled}} @label="create_account.title" @isLoading={{formSubmitted}} />
 
             {{#unless hasAuthOptions}}
-              {{d-button class="btn-large" id="login-link" action=(route-action "showLogin") disabled=formSubmitted label="log_in"}}
+              <DButton @class="btn-large" @id="login-link" @action={{route-action "showLogin"}} @disabled={{formSubmitted}} @label="log_in" />
             {{/unless}}
 
             <div class="disclaimer">
@@ -182,12 +132,12 @@
             </div>
           </div>
 
-          {{plugin-outlet name="create-account-after-modal-footer" connectorTagName="div"}}
+          <PluginOutlet @name="create-account-after-modal-footer" @connectorTagName="div" />
 
         {{/if}}
         {{#unless hasAuthOptions}}
           <div class="create-account-login-buttons">
-            {{login-buttons externalLogin=(action "externalLogin")}}
+            <LoginButtons @externalLogin={{action "externalLogin"}} />
           </div>
         {{/unless}}
 
@@ -195,6 +145,6 @@
           {{loading-spinner size="large"}}
         {{/if}}
       </div>
-    {{/d-modal-body}}
+    </DModalBody>
   {{/unless}}
-{{/create-account}}
+</CreateAccount>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs
index de9fae04377..30d55b36dd6 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-invite-bulk.hbs
@@ -1,5 +1,5 @@
-{{#create-invite-uploader as |status|}}
-  {{#d-modal-body title="user.invited.bulk_invite.text"}}
+<CreateInviteUploader as |status|>
+  <DModalBody @title="user.invited.bulk_invite.text">
     {{#if status.uploaded}}
       {{i18n "user.invited.bulk_invite.success"}}
     {{else}}
@@ -7,22 +7,13 @@
 
       <input id="csv-file" disabled={{status.uploading}} type="file" accept=".csv">
     {{/if}}
-  {{/d-modal-body}}
+  </DModalBody>
 
   <div class="modal-footer">
     {{#unless status.uploaded}}
-      {{d-button
-        icon=(if isEmail "envelope" "link")
-        translatedLabel=(if status.uploading (i18n "user.invited.bulk_invite.progress" progress=status.uploadProgress)
-                                             (i18n "user.invited.bulk_invite.text"))
-        class="btn-primary"
-        action=status.startUpload
-        disabled=status.submitDisabled
-      }}
+      <DButton @icon={{if isEmail "envelope" "link"}} @translatedLabel={{if status.uploading (i18n "user.invited.bulk_invite.progress" progress=status.uploadProgress) (i18n "user.invited.bulk_invite.text")}} @class="btn-primary" @action={{status.startUpload}} @disabled={{status.submitDisabled}} />
     {{/unless}}
 
-    {{d-button label="close"
-              class="btn-primary"
-              action=(route-action "closeModal")}}
+    <DButton @label="close" @class="btn-primary" @action={{route-action "closeModal"}} />
   </div>
-{{/create-invite-uploader}}
+</CreateInviteUploader>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
index eee3bd1233b..006c70a493b 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
@@ -4,13 +4,8 @@
       <div class="input-group invite-link">
         <label for="invite-link">{{html-safe flashText}} {{i18n "user.invited.invite.instructions"}}</label>
         <div class="link-share-container">
-          {{input
-            name="invite-link"
-            class="invite-link"
-            value=invite.link
-            readonly=true
-          }}
-          {{copy-button selector="input.invite-link" copied=(action "copied")}}
+          <Input @name="invite-link" class="invite-link" @value={{invite.link}} @readonly={{true}} />
+          <CopyButton @selector="input.invite-link" @copied={{action "copied"}} />
         </div>
       </div>
     {{else}}
@@ -19,19 +14,14 @@
   </div>
 {{/if}}
 
-{{#d-modal-body title=(if editing "user.invited.invite.edit_title" "user.invited.invite.new_title")}}
+<DModalBody @title={{if editing "user.invited.invite.edit_title" "user.invited.invite.new_title"}}>
   <form>
     {{#if editing}}
       <div class="input-group invite-link">
         <label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
         <div class="link-share-container">
-          {{input
-            name="invite-link"
-            class="invite-link"
-            value=invite.link
-            readonly=true
-          }}
-          {{copy-button selector="input.invite-link" copied=(action "copied")}}
+          <Input @name="invite-link" class="invite-link" @value={{invite.link}} @readonly={{true}} />
+          <CopyButton @selector="input.invite-link" @copied={{action "copied"}} />
         </div>
       </div>
     {{/if}}
@@ -48,17 +38,9 @@
         {{/if}}
       </label>
       <div class="invite-email-container">
-        {{input
-          id="invite-email"
-          value=buffered.emailOrDomain
-          placeholderKey="user.invited.invite.email_or_domain_placeholder"
-        }}
+        <Input @id="invite-email" @value={{buffered.emailOrDomain}} @placeholderKey="user.invited.invite.email_or_domain_placeholder" />
         {{#if capabilities.hasContactPicker}}
-          {{d-button
-            icon="address-book"
-            action=(action "searchContact")
-            class="btn-primary open-contact-picker"
-          }}
+          <DButton @icon="address-book" @action={{action "searchContact"}} @class="btn-primary open-contact-picker" />
         {{/if}}
       </div>
     </div>
@@ -66,69 +48,41 @@
     {{#if isLink}}
       <div class="input-group invite-max-redemptions">
         <label for="invite-max-redemptions">{{d-icon "users"}}{{i18n "user.invited.invite.max_redemptions_allowed"}}</label>
-        {{input
-          id="invite-max-redemptions"
-          type="number"
-          value=buffered.max_redemptions_allowed
-          min="1"
-          max=maxRedemptionsAllowedLimit
-        }}
+        <Input @id="invite-max-redemptions" @type="number" @value={{buffered.max_redemptions_allowed}} @min="1" @max={{maxRedemptionsAllowedLimit}} />
       </div>
     {{/if}}
 
     {{#if isEmail}}
       <div class="input-group invite-custom-message">
         <label for="invite-message">{{i18n "user.invited.invite.custom_message"}}</label>
-        {{textarea id="invite-message" value=buffered.custom_message}}
+        <Textarea @id="invite-message" @value={{buffered.custom_message}} />
       </div>
     {{/if}}
 
     {{#if currentUser.staff}}
       <div class="input-group invite-to-topic">
         <label for="invite-topic">{{d-icon "hand-point-right"}}{{i18n "user.invited.invite.invite_to_topic"}}</label>
-        {{topic-chooser
-          value=buffered.topicId
-          content=topics
-          onChange=(action "onChangeTopic")
-          options=(hash
+        <TopicChooser @value={{buffered.topicId}} @content={{topics}} @onChange={{action "onChangeTopic"}} @options={{hash
             additionalFilters="status:public"
-          )
-        }}
+          }} />
       </div>
     {{else if buffered.topicTitle}}
       <div class="input-group invite-to-topic">
         <label for="invite-topic">{{d-icon "hand-point-right"}}{{i18n "user.invited.invite.invite_to_topic"}}</label>
-        {{input
-          name="invite-topic"
-          class="invite-topic"
-          value=buffered.topicTitle
-          readonly=true
-        }}
+        <Input @name="invite-topic" class="invite-topic" @value={{buffered.topicTitle}} @readonly={{true}} />
       </div>
     {{/if}}
 
     {{#if canInviteToGroup}}
       <div class="input-group invite-to-groups">
         <label>{{d-icon "users"}}{{i18n "user.invited.invite.add_to_groups"}}</label>
-        {{group-chooser
-          content=allGroups
-          value=buffered.groupIds
-          labelProperty="name"
-          onChange=(action (mut buffered.groupIds))
-        }}
+        <GroupChooser @content={{allGroups}} @value={{buffered.groupIds}} @labelProperty="name" @onChange={{action (mut buffered.groupIds)}} />
       </div>
     {{/if}}
 
     {{#if currentUser.staff}}
       <div class="input-group invite-expires-at">
-        {{future-date-input
-          displayLabelIcon="far-clock"
-          displayLabel=(i18n "user.invited.invite.expires_at")
-          customShortcuts=timeShortcuts
-          clearable=true
-          input=buffered.expires_at
-          onChangeInput=(action (mut buffered.expires_at))
-        }}
+        <FutureDateInput @displayLabelIcon="far-clock" @displayLabel={{i18n "user.invited.invite.expires_at"}} @customShortcuts={{timeShortcuts}} @clearable={{true}} @input={{buffered.expires_at}} @onChangeInput={{action (mut buffered.expires_at)}} />
       </div>
     {{else}}
       <div class="input-group input-expires-at">
@@ -136,22 +90,10 @@
       </div>
     {{/if}}
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    icon="link"
-    label="user.invited.invite.save_invite"
-    class="btn-primary save-invite"
-    action=(action "saveInvite")
-  }}
+  <DButton @icon="link" @label="user.invited.invite.save_invite" @class="btn-primary save-invite" @action={{action "saveInvite"}} />
 
-  {{d-button
-    icon="envelope"
-    label=(if invite.emailed "user.invited.reinvite" "user.invited.invite.send_invite_email")
-    class="btn-primary send-invite"
-    action=(action "saveInvite" true)
-    title=(unless isEmail "user.invited.invite.send_invite_email_instructions")
-    disabled=(not isEmail)
-  }}
+  <DButton @icon="envelope" @label={{if invite.emailed "user.invited.reinvite" "user.invited.invite.send_invite_email"}} @class="btn-primary send-invite" @action={{action "saveInvite" true}} @title={{unless isEmail "user.invited.invite.send_invite_email_instructions"}} @disabled={{not isEmail}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/delete-topic-confirm.hbs b/app/assets/javascripts/discourse/app/templates/modal/delete-topic-confirm.hbs
index 5c52f7ac8f8..65328df6640 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/delete-topic-confirm.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/delete-topic-confirm.hbs
@@ -1,13 +1,8 @@
-{{#d-modal-body}}
+<DModalBody>
   <p>{{i18n "post.controls.delete_topic_confirm_modal" count=siteSettings.min_topic_views_for_delete_confirm}}</p>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "deleteTopic")
-             disabled=deletingTopic
-             translatedLabel=buttonTitle
-             class="btn-danger"}}
-  {{d-button action=(route-action "closeModal")
-             label="post.controls.delete_topic_confirm_modal_no"
-             class="btn-primary"}}
+  <DButton @action={{action "deleteTopic"}} @disabled={{deletingTopic}} @translatedLabel={{buttonTitle}} @class="btn-danger" />
+  <DButton @action={{route-action "closeModal"}} @label="post.controls.delete_topic_confirm_modal_no" @class="btn-primary" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/delete-topic-disallowed.hbs b/app/assets/javascripts/discourse/app/templates/modal/delete-topic-disallowed.hbs
index b6ab282d380..e5adfab6267 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/delete-topic-disallowed.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/delete-topic-disallowed.hbs
@@ -1,6 +1,6 @@
-{{#d-modal-body}}
+<DModalBody>
   <p>{{html-safe (i18n "post.controls.delete_topic_disallowed_modal")}}</p>
-{{/d-modal-body}}
+</DModalBody>
 <div class="modal-footer">
-  {{d-button action=(route-action "closeModal") class="btn-primary" label="close"}}
+  <DButton @action={{route-action "closeModal"}} @class="btn-primary" @label="close" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs b/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs
index 207cf43ccc7..a8bdc27904a 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs
@@ -1,13 +1,13 @@
-{{#d-modal-body headerClass="hidden"}}
+<DModalBody @headerClass="hidden">
   <div class="instructions">
     {{i18n "post.cancel_composer.confirm"}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button icon="far-trash-alt" label="post.cancel_composer.discard" class="btn-danger discard-draft" action=(action "destroyDraft")}}
+  <DButton @icon="far-trash-alt" @label="post.cancel_composer.discard" @class="btn-danger discard-draft" @action={{action "destroyDraft"}} />
   {{#if model.canSaveDraft}}
-    {{d-button label="post.cancel_composer.save_draft" class="save-draft" action=(action "saveDraftAndClose")}}
+    <DButton @label="post.cancel_composer.save_draft" @class="save-draft" @action={{action "saveDraftAndClose"}} />
   {{/if}}
-  {{d-button label="post.cancel_composer.keep_editing" class="keep-editing" action=(action "dismissModal")}}
+  <DButton @label="post.cancel_composer.keep_editing" @class="keep-editing" @action={{action "dismissModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs b/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs
index ea948b48bcc..e49cf22bb08 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs
@@ -1,15 +1,8 @@
-{{#d-modal-body headerClass="hidden" class="dismiss-notification-confirmation"}}
+<DModalBody @headerClass="hidden" @class="dismiss-notification-confirmation">
   {{i18n "notifications.dismiss_confirmation.body" count=count}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    icon="check"
-    class="btn-primary"
-    action=(action "dismiss")
-    label="notifications.dismiss_confirmation.dismiss"}}
-  {{d-button
-    action=(route-action "closeModal")
-    label="notifications.dismiss_confirmation.cancel"
-    class="btn-default"}}
+  <DButton @icon="check" @class="btn-primary" @action={{action "dismiss"}} @label="notifications.dismiss_confirmation.dismiss" />
+  <DButton @action={{route-action "closeModal"}} @label="notifications.dismiss_confirmation.cancel" @class="btn-default" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/dismiss-read.hbs b/app/assets/javascripts/discourse/app/templates/modal/dismiss-read.hbs
index b295e1f4292..b99f6e200cc 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/dismiss-read.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/dismiss-read.hbs
@@ -1,14 +1,9 @@
-{{#d-modal-body}}
+<DModalBody>
   <p>
-    {{preference-checkbox labelKey="topics.bulk.also_dismiss_topics" checked=dismissTopics}}
+    <PreferenceCheckbox @labelKey="topics.bulk.also_dismiss_topics" @checked={{dismissTopics}} />
   </p>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(route-action "dismissReadTopics" dismissTopics)
-    icon="check"
-    id="dismiss-read-confirm"
-    label="topics.bulk.dismiss"}}
+  <DButton @class="btn-primary" @action={{route-action "dismissReadTopics" dismissTopics}} @icon="check" @id="dismiss-read-confirm" @label="topics.bulk.dismiss" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs b/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
index fd0d43cc8cf..c3b0001cec2 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
@@ -1,22 +1,19 @@
-{{#d-modal-body title="do_not_disturb.title"}}
-  {{#tap-tile-grid activeTile=duration as |grid|}}
-    {{#tap-tile class="do-not-disturb-tile" tileId="30" activeTile=grid.activeTile onChange=(action "setDuration")}}
+<DModalBody @title="do_not_disturb.title">
+  <TapTileGrid @activeTile={{duration}} as |grid|>
+    <TapTile @class="do-not-disturb-tile" @tileId="30" @activeTile={{grid.activeTile}} @onChange={{action "setDuration"}}>
       {{i18n "do_not_disturb.options.half_hour"}}
-    {{/tap-tile}}
-    {{#tap-tile class="do-not-disturb-tile" tileId="60" activeTile=grid.activeTile onChange=(action "setDuration")}}
+    </TapTile>
+    <TapTile @class="do-not-disturb-tile" @tileId="60" @activeTile={{grid.activeTile}} @onChange={{action "setDuration"}}>
       {{i18n "do_not_disturb.options.one_hour"}}
-    {{/tap-tile}}
-    {{#tap-tile class="do-not-disturb-tile" tileId="120" activeTile=grid.activeTile onChange=(action "setDuration")}}
+    </TapTile>
+    <TapTile @class="do-not-disturb-tile" @tileId="120" @activeTile={{grid.activeTile}} @onChange={{action "setDuration"}}>
       {{i18n "do_not_disturb.options.two_hours"}}
-    {{/tap-tile}}
-    {{#tap-tile class="do-not-disturb-tile" tileId="tomorrow" activeTile=grid.activeTile onChange=(action "setDuration")}}
+    </TapTile>
+    <TapTile @class="do-not-disturb-tile" @tileId="tomorrow" @activeTile={{grid.activeTile}} @onChange={{action "setDuration"}}>
       {{i18n "do_not_disturb.options.tomorrow"}}
-    {{/tap-tile}}
-  {{/tap-tile-grid}}
+    </TapTile>
+  </TapTileGrid>
 
-  {{d-button
-    action=(action "navigateToNotificationSchedule")
-    label="do_not_disturb.set_schedule"
-  }}
+  <DButton @action={{action "navigateToNotificationSchedule"}} @label="do_not_disturb.set_schedule" />
 
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/download-calendar.hbs b/app/assets/javascripts/discourse/app/templates/modal/download-calendar.hbs
index 68f5236ef77..5fc3df141a8 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/download-calendar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/download-calendar.hbs
@@ -1,27 +1,15 @@
 <div>
-  {{#d-modal-body title="download_calendar.title"}}
+  <DModalBody @title="download_calendar.title">
     <div class="control-group">
       <div class="ics">
         <label class="radio" for="ics">
-          {{radio-button
-            name="select-calendar"
-            id="ics"
-            value="ics"
-            selection=selectedCalendar
-            onChange=(action (mut selectedCalendar))
-          }}
+          <RadioButton @name="select-calendar" @id="ics" @value="ics" @selection={{selectedCalendar}} @onChange={{action (mut selectedCalendar)}} />
           {{i18n "download_calendar.save_ics"}}
         </label>
       </div>
       <div class="google">
         <label class="radio" for="google">
-          {{radio-button
-            name="select-calendar"
-            id="google"
-            value="google"
-            selection=selectedCalendar
-            onChange=(action (mut selectedCalendar))
-          }}
+          <RadioButton @name="select-calendar" @id="google" @value="google" @selection={{selectedCalendar}} @onChange={{action (mut selectedCalendar)}} />
           {{i18n "download_calendar.save_google"}}
         </label>
       </div>
@@ -29,17 +17,13 @@
 
     <div class="control-group remember">
       <label>
-        {{input type="checkbox" checked=remember}} <span>{{i18n "download_calendar.remember"}}</span>
+        <Input @type="checkbox" @checked={{remember}} /> <span>{{i18n "download_calendar.remember"}}</span>
       </label>
       <span>{{i18n "download_calendar.remember_explanation"}}</span>
     </div>
-  {{/d-modal-body}}
+  </DModalBody>
   <div class="modal-footer">
-    {{d-button
-      class="btn-primary"
-      action=(action "downloadCalendar")
-      label="download_calendar.download"
-    }}
-    {{d-modal-cancel close=(route-action "closeModal")}}
+    <DButton @class="btn-primary" @action={{action "downloadCalendar"}} @label="download_calendar.download" />
+    <DModalCancel @close={{route-action "closeModal"}} />
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs b/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
index aca17261fd5..2f7131e338c 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/edit-slow-mode.hbs
@@ -1,57 +1,37 @@
-{{#d-modal-body title="topic.slow_mode_update.title" autoFocus=false}}
+<DModalBody @title="topic.slow_mode_update.title" @autoFocus={{false}}>
   <div class="control-group">
     <label class="slow-mode-label">{{i18n "topic.slow_mode_update.description"}}</label>
   </div>
 
   <div class="control-group">
     <label class="slow-mode-label">{{i18n "topic.slow_mode_update.select"}}</label>
-    {{combo-box
-      class="slow-mode-type"
-      content=slowModes
-      value=selectedSlowMode
-      onChange=(action "setSlowModeDuration")
-    }}
+    <ComboBox @class="slow-mode-type" @content={{slowModes}} @value={{selectedSlowMode}} @onChange={{action "setSlowModeDuration"}} />
   </div>
 
   {{#if showCustomSelect}}
     <div class="control-group">
       <label class="slow-mode-label">{{i18n "topic.slow_mode_update.hours"}}</label>
-      {{input value=hours type="number" class="input-small"}}
+      <Input @value={{hours}} @type="number" class="input-small" />
 
       <label class="slow-mode-label">{{i18n "topic.slow_mode_update.minutes"}}</label>
-      {{input value=minutes type="number" class="input-small"}}
+      <Input @value={{minutes}} @type="number" class="input-small" />
 
       <label class="slow-mode-label">{{i18n "topic.slow_mode_update.seconds"}}</label>
-      {{input value=seconds type="number" class="input-small"}}
+      <Input @value={{seconds}} @type="number" class="input-small" />
     </div>
   {{/if}}
 
   <div class="control-group">
-    {{future-date-input
-      class="enabled-until"
-      label="topic.slow_mode_update.enabled_until"
-      labelClasses="slow-mode-label"
-      customShortcuts=timeShortcuts
-      clearable=true
-      input=model.slow_mode_enabled_until
-      onChangeInput=(action (mut model.slow_mode_enabled_until))
-    }}
+    <FutureDateInput @class="enabled-until" @label="topic.slow_mode_update.enabled_until" @labelClasses="slow-mode-label" @customShortcuts={{timeShortcuts}} @clearable={{true}} @input={{model.slow_mode_enabled_until}} @onChangeInput={{action (mut model.slow_mode_enabled_until)}} />
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary"
-      disabled=submitDisabled
-      icon="hourglass-start"
-      label=saveButtonLabel
-      action=(action "enableSlowMode")}}
+  <DButton @class="btn-primary" @disabled={{submitDisabled}} @icon="hourglass-start" @label={{saveButtonLabel}} @action={{action "enableSlowMode"}} />
 
-  {{conditional-loading-spinner size="small" condition=loading}}
+  <ConditionalLoadingSpinner @size="small" @condition={{loading}} />
 
   {{#if model.slow_mode_seconds}}
-    {{d-button class="btn-danger"
-               action=(action "disableSlowMode")
-               disabled=submitDisabled
-               label="topic.slow_mode_update.remove"}}
+    <DButton @class="btn-danger" @action={{action "disableSlowMode"}} @disabled={{submitDisabled}} @label="topic.slow_mode_update.remove" />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/edit-topic-timer.hbs b/app/assets/javascripts/discourse/app/templates/modal/edit-topic-timer.hbs
index 60386d1d9cb..9ccf87d47da 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/edit-topic-timer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/edit-topic-timer.hbs
@@ -1,25 +1,14 @@
-{{#d-modal-body title="topic.topic_status_update.title" autoFocus="false" id="topic-timer-modal"}}
-  {{edit-topic-timer-form
-    topic=model
-    topicTimer=topicTimer
-    timerTypes=publicTimerTypes
-    onChangeStatusType=(action "onChangeStatusType")
-    onChangeInput=(action "onChangeInput")
-  }}
+<DModalBody @title="topic.topic_status_update.title" @autoFocus="false" @id="topic-timer-modal">
+  <EditTopicTimerForm @topic={{model}} @topicTimer={{topicTimer}} @timerTypes={{publicTimerTypes}} @onChangeStatusType={{action "onChangeStatusType"}} @onChangeInput={{action "onChangeInput"}} />
 
   <div class="modal-footer control-group edit-topic-timer-buttons">
-    {{d-button class="btn-primary"
-        disabled=saveDisabled
-        label="topic.topic_status_update.save"
-        action=(action "saveTimer")}}
+    <DButton @class="btn-primary" @disabled={{saveDisabled}} @label="topic.topic_status_update.save" @action={{action "saveTimer"}} />
 
-    {{conditional-loading-spinner size="small" condition=loading}}
+    <ConditionalLoadingSpinner @size="small" @condition={{loading}} />
 
     {{#if topicTimer.execute_at}}
-      {{d-button class="pull-right btn-danger"
-          action=(action "removeTimer")
-          label="topic.topic_status_update.remove"}}
+      <DButton @class="pull-right btn-danger" @action={{action "removeTimer"}} @label="topic.topic_status_update.remove" />
     {{/if}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
diff --git a/app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs b/app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs
index 7fe81183a0b..74e6f0e00cb 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="directory.edit_columns.title"}}
+<DModalBody @title="directory.edit_columns.title">
   {{#if loading}}
     {{loading-spinner size="large"}}
   {{else}}
@@ -7,7 +7,7 @@
         <div class="edit-directory-column">
           <div class="left-content">
             <label class="column-name">
-              {{input type="checkbox" checked=column.enabled}}
+              <Input @type="checkbox" @checked={{column.enabled}} />
               {{#if (directory-column-is-automatic column=column)}}
                 {{directory-table-header-title field=column.name labelKey=labelKey icon=column.icon}}
               {{else if (directory-column-is-user-field column=column)}}
@@ -18,33 +18,17 @@
             </label>
           </div>
           <div class="right-content">
-            {{d-button
-              icon="arrow-up"
-              class="button-secondary move-column-up"
-              action=(action "moveUp" column)
-            }}
-            {{d-button
-              icon="arrow-down"
-              class="button-secondary"
-              action=(action "moveDown" column)
-            }}
+            <DButton @icon="arrow-up" @class="button-secondary move-column-up" @action={{action "moveUp" column}} />
+            <DButton @icon="arrow-down" @class="button-secondary" @action={{action "moveDown" column}} />
           </div>
         </div>
       {{/each}}
     </div>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    label="directory.edit_columns.save"
-    action=(action "save")
-  }}
+  <DButton @class="btn-primary" @label="directory.edit_columns.save" @action={{action "save"}} />
 
-  {{d-button
-    class="btn-secondary reset-to-default"
-    label="directory.edit_columns.reset_to_default"
-    action=(action "resetToDefault")
-  }}
+  <DButton @class="btn-secondary reset-to-default" @label="directory.edit_columns.reset_to_default" @action={{action "resetToDefault"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/explain-reviewable.hbs b/app/assets/javascripts/discourse/app/templates/modal/explain-reviewable.hbs
index 27ad4bf86cd..85c6ec69f37 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/explain-reviewable.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/explain-reviewable.hbs
@@ -1,5 +1,5 @@
-{{#d-modal-body class="explain-reviewable"}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody @class="explain-reviewable">
+  <ConditionalLoadingSpinner @condition={{loading}}>
     <table>
       <tbody>
         <tr>
@@ -9,11 +9,11 @@
         {{#each reviewableExplanation.scores as |s|}}
           <tr>
             <td>
-              {{score-value value="1.0" tagName=""}}
-              {{score-value value=s.type_bonus label="type_bonus" tagName=""}}
-              {{score-value value=s.take_action_bonus label="take_action_bonus" tagName=""}}
-              {{score-value value=s.trust_level_bonus label="trust_level_bonus" tagName=""}}
-              {{score-value value=s.user_accuracy_bonus label="user_accuracy_bonus" tagName=""}}
+              <ScoreValue @value="1.0" @tagName="" />
+              <ScoreValue @value={{s.type_bonus}} @label="type_bonus" @tagName="" />
+              <ScoreValue @value={{s.take_action_bonus}} @label="take_action_bonus" @tagName="" />
+              <ScoreValue @value={{s.trust_level_bonus}} @label="trust_level_bonus" @tagName="" />
+              <ScoreValue @value={{s.user_accuracy_bonus}} @label="user_accuracy_bonus" @tagName="" />
             </td>
             <td class="sum">{{float s.score}}</td>
           </tr>
@@ -42,10 +42,10 @@
       </tbody>
     </table>
 
-  {{/conditional-loading-spinner}}
+  </ConditionalLoadingSpinner>
 
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(route-action "closeModal") label="close"}}
+  <DButton @action={{route-action "closeModal"}} @label="close" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/feature-topic-on-profile.hbs b/app/assets/javascripts/discourse/app/templates/modal/feature-topic-on-profile.hbs
index a53e8745a55..47bae104427 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/feature-topic-on-profile.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/feature-topic-on-profile.hbs
@@ -1,16 +1,7 @@
-{{#d-modal-body class="feature-topic-on-profile" id="choosing-topic"}}
-  {{choose-topic currentTopicId=model.featured_topic.id
-    selectedTopicId=newFeaturedTopicId
-    additionalFilters="status:public"
-    label="user.feature_topic_on_profile.search_label"
-    topicChangedCallback=(action "newTopicSelected")
-    loadOnInit=true
-  }}
-{{/d-modal-body}}
+<DModalBody @class="feature-topic-on-profile" @id="choosing-topic">
+  <ChooseTopic @currentTopicId={{model.featured_topic.id}} @selectedTopicId={{newFeaturedTopicId}} @additionalFilters="status:public" @label="user.feature_topic_on_profile.search_label" @topicChangedCallback={{action "newTopicSelected"}} @loadOnInit={{true}} />
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "save")
-    class="btn-primary save-featured-topic-on-profile"
-    disabled=noTopicSelected
-    label="user.feature_topic_on_profile.save"}}
+  <DButton @action={{action "save"}} @class="btn-primary save-featured-topic-on-profile" @disabled={{noTopicSelected}} @label="user.feature_topic_on_profile.save" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
index 351c3136c98..eadb34ee9ff 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
@@ -1,37 +1,37 @@
-{{#d-modal-body class="feature-topic"}}
+<DModalBody @class="feature-topic">
   {{#if model.pinned_at}}
     <div class="feature-section">
       <div class="desc">
         {{#if model.pinned_globally}}
           <p>
-            {{#conditional-loading-spinner size="small" condition=loading}}
+            <ConditionalLoadingSpinner @size="small" @condition={{loading}}>
               {{#if pinnedGloballyCount}}
                 {{html-safe (i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount)}}
               {{else}}
                 {{html-safe (i18n "topic.feature_topic.not_pinned_globally")}}
               {{/if}}
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           </p>
           <p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
         {{else}}
           <p>
-            {{#conditional-loading-spinner size="small" condition=loading}}
+            <ConditionalLoadingSpinner @size="small" @condition={{loading}}>
               {{html-safe alreadyPinnedMessage}}
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           </p>
           <p>{{i18n "topic.feature_topic.pin_note"}}</p>
         {{/if}}
         <p>{{html-safe unPinMessage}}</p>
-        <p>{{d-button action=(action "unpin") icon="thumbtack" label="topic.feature.unpin" class="btn-primary"}}</p>
+        <p><DButton @action={{action "unpin"}} @icon="thumbtack" @label="topic.feature.unpin" @class="btn-primary" /></p>
       </div>
     </div>
   {{else}}
     <div class="feature-section">
       <div class="desc">
         <p>
-          {{#conditional-loading-spinner size="small" condition=loading}}
+          <ConditionalLoadingSpinner @size="small" @condition={{loading}}>
             {{html-safe alreadyPinnedMessage}}
-          {{/conditional-loading-spinner}}
+          </ConditionalLoadingSpinner>
         </p>
         <p>
           {{i18n "topic.feature_topic.pin_note"}}
@@ -41,31 +41,21 @@
             {{html-safe pinMessage}}
           </p>
           <p class="with-validation">
-            {{future-date-input
-              class="pin-until"
-              clearable=true
-              input=model.pinnedInCategoryUntil
-              onChangeInput=(action (mut model.pinnedInCategoryUntil))
-            }}
-            {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
+            <FutureDateInput @class="pin-until" @clearable={{true}} @input={{model.pinnedInCategoryUntil}} @onChangeInput={{action (mut model.pinnedInCategoryUntil)}} />
+            <PopupInputTip @validation={{pinInCategoryValidation}} @shownAt={{pinInCategoryTipShownAt}} />
           </p>
         {{else}}
           <p class="with-validation">
             {{html-safe pinMessage}}
             <span>
               {{d-icon "far-clock"}}
-              {{future-date-input
-                class="pin-until"
-                clearable=true
-                input=model.pinnedInCategoryUntil
-                onChangeInput=(action (mut model.pinnedInCategoryUntil))
-              }}
-              {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
+              <FutureDateInput @class="pin-until" @clearable={{true}} @input={{model.pinnedInCategoryUntil}} @onChangeInput={{action (mut model.pinnedInCategoryUntil)}} />
+              <PopupInputTip @validation={{pinInCategoryValidation}} @shownAt={{pinInCategoryTipShownAt}} />
             </span>
           </p>
         {{/if}}
         <p>
-          {{d-button action=(action "pin") icon="thumbtack" label="topic.feature.pin" class="btn-primary"}}
+          <DButton @action={{action "pin"}} @icon="thumbtack" @label="topic.feature.pin" @class="btn-primary" />
         </p>
       </div>
     </div>
@@ -73,13 +63,13 @@
       <div class="feature-section">
         <div class="desc">
           <p>
-            {{#conditional-loading-spinner size="small" condition=loading}}
+            <ConditionalLoadingSpinner @size="small" @condition={{loading}}>
               {{#if pinnedGloballyCount}}
                 {{html-safe (i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount)}}
               {{else}}
                 {{html-safe (i18n "topic.feature_topic.not_pinned_globally")}}
               {{/if}}
-            {{/conditional-loading-spinner}}
+            </ConditionalLoadingSpinner>
           </p>
           <p>
             {{i18n "topic.feature_topic.global_pin_note"}}
@@ -89,31 +79,21 @@
               {{i18n "topic.feature_topic.pin_globally"}}
             </p>
             <p class="with-validation">
-              {{future-date-input
-                class="pin-until"
-                clearable=true
-                input=model.pinnedGloballyUntil
-                onChangeInput=(action (mut model.pinnedGloballyUntil))
-              }}
-              {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
+              <FutureDateInput @class="pin-until" @clearable={{true}} @input={{model.pinnedGloballyUntil}} @onChangeInput={{action (mut model.pinnedGloballyUntil)}} />
+              <PopupInputTip @validation={{pinGloballyValidation}} @shownAt={{pinGloballyTipShownAt}} />
             </p>
           {{else}}
             <p class="with-validation">
               {{i18n "topic.feature_topic.pin_globally"}}
               <span>
                 {{d-icon "far-clock"}}
-                {{future-date-input
-                  class="pin-until"
-                  clearable=true
-                  input=model.pinnedGloballyUntil
-                  onChangeInput=(action (mut model.pinnedGloballyUntil))
-                }}
-                {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
+                <FutureDateInput @class="pin-until" @clearable={{true}} @input={{model.pinnedGloballyUntil}} @onChangeInput={{action (mut model.pinnedGloballyUntil)}} />
+                <PopupInputTip @validation={{pinGloballyValidation}} @shownAt={{pinGloballyTipShownAt}} />
               </span>
             </p>
           {{/if}}
           <p>
-            {{d-button action=(action "pinGlobally") icon="thumbtack" label="topic.feature.pin_globally" class="btn-primary"}}
+            <DButton @action={{action "pinGlobally"}} @icon="thumbtack" @label="topic.feature.pin_globally" @class="btn-primary" />
           </p>
         </div>
       </div>
@@ -123,13 +103,13 @@
     <div class="feature-section">
       <div class="desc">
         <p>
-          {{#conditional-loading-spinner size="small" condition=loading}}
+          <ConditionalLoadingSpinner @size="small" @condition={{loading}}>
             {{#if bannerCount}}
               {{html-safe (i18n "topic.feature_topic.banner_exists")}}
             {{else}}
               {{html-safe (i18n "topic.feature_topic.no_banner_exists")}}
             {{/if}}
-          {{/conditional-loading-spinner}}
+          </ConditionalLoadingSpinner>
         </p>
         <p>
           {{i18n "topic.feature_topic.banner_note"}}
@@ -143,15 +123,15 @@
         </p>
         <p>
           {{#if model.isBanner}}
-            {{d-button action=(action "removeBanner") icon="thumbtack" label="topic.feature.remove_banner" class="btn-primary"}}
+            <DButton @action={{action "removeBanner"}} @icon="thumbtack" @label="topic.feature.remove_banner" @class="btn-primary" />
           {{else}}
-            {{d-button action=(action "makeBanner") icon="thumbtack" label="topic.feature.make_banner" class="btn-primary make-banner"}}
+            <DButton @action={{action "makeBanner"}} @icon="thumbtack" @label="topic.feature.make_banner" @class="btn-primary make-banner" />
           {{/if}}
         </p>
       </div>
     </div>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 <div class="modal-footer">
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/flag.hbs b/app/assets/javascripts/discourse/app/templates/modal/flag.hbs
index 62c4a63deab..f50159e0917 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/flag.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/flag.hbs
@@ -1,64 +1,27 @@
-{{#d-modal-body class="flag-modal-body" title=title submitOnEnter=false}}
+<DModalBody @class="flag-modal-body" @title={{title}} @submitOnEnter={{false}}>
   <form>
-    {{#flag-selection nameKey=selected.name_key flags=flagsAvailable as |f|}}
-      {{flag-action-type
-        flag=f
-        message=message
-        isWarning=isWarning
-        selectedFlag=selected
-        username=model.username
-        staffFlagsAvailable=staffFlagsAvailable
-        changePostActionType=(action "changePostActionType")
-      }}
-    {{/flag-selection}}
+    <FlagSelection @nameKey={{selected.name_key}} @flags={{flagsAvailable}} as |f|>
+      <FlagActionType @flag={{f}} @message={{message}} @isWarning={{isWarning}} @selectedFlag={{selected}} @username={{model.username}} @staffFlagsAvailable={{staffFlagsAvailable}} @changePostActionType={{action "changePostActionType"}} />
+    </FlagSelection>
   </form>
 
-  {{plugin-outlet name="flag-modal-bottom" connectorTagName="div" args=(hash post=model)}}
-{{/d-modal-body}}
+  <PluginOutlet @name="flag-modal-bottom" @connectorTagName="div" @args={{hash post=model}} />
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(action "createFlag")
-    disabled=submitDisabled
-    title="flagging.submit_tooltip"
-    icon=submitIcon
-    label=submitLabel
-  }}
+  <DButton @class="btn-primary" @action={{action "createFlag"}} @disabled={{submitDisabled}} @title="flagging.submit_tooltip" @icon={{submitIcon}} @label={{submitLabel}} />
 
   {{#if canSendWarning}}
-    {{d-button
-      class="btn-danger"
-      action=(action "createFlagAsWarning")
-      disabled=submitDisabled
-      icon="exclamation-triangle"
-      label="flagging.official_warning"
-    }}
+    <DButton @class="btn-danger" @action={{action "createFlagAsWarning"}} @disabled={{submitDisabled}} @icon="exclamation-triangle" @label="flagging.official_warning" />
   {{/if}}
 
   {{#if canTakeAction}}
-    {{reviewable-bundled-action
-        bundle=flagActions
-        performAction=(action "takeAction")
-        reviewableUpdating=submitDisabled
-    }}
+    <ReviewableBundledAction @bundle={{flagActions}} @performAction={{action "takeAction"}} @reviewableUpdating={{submitDisabled}} />
 
-    {{d-button
-      class="btn-danger"
-      action=(action "flagForReview")
-      disabled=cantFlagForReview
-      icon="exclamation-triangle"
-      label="flagging.flag_for_review"
-    }}
+    <DButton @class="btn-danger" @action={{action "flagForReview"}} @disabled={{cantFlagForReview}} @icon="exclamation-triangle" @label="flagging.flag_for_review" />
   {{/if}}
 
   {{#if showDeleteSpammer}}
-    {{d-button
-      class="btn-danger"
-      action=(action "deleteSpammer")
-      disabled=submitDisabled
-      icon="exclamation-triangle"
-      label="flagging.delete_spammer"
-    }}
+    <DButton @class="btn-danger" @action={{action "deleteSpammer"}} @disabled={{submitDisabled}} @icon="exclamation-triangle" @label="flagging.delete_spammer" />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/forgot-password.hbs b/app/assets/javascripts/discourse/app/templates/modal/forgot-password.hbs
index ccaa83d673e..9adbbaa7ff5 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/forgot-password.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/forgot-password.hbs
@@ -1,35 +1,25 @@
 <form>
-  {{#d-modal-body class="forgot-password-modal"}}
+  <DModalBody @class="forgot-password-modal">
     {{#if offerHelp}}
       {{html-safe offerHelp}}
     {{else}}
       {{#if siteSettings.hide_email_address_taken}}
         <label for="username-or-email">{{i18n "forgot_password.invite_no_username"}}</label>
-        {{text-field value=accountEmailOrUsername placeholderKey="email" id="username-or-email" autocorrect="off" autocapitalize="off"}}
+        <TextField @value={{accountEmailOrUsername}} @placeholderKey="email" @id="username-or-email" @autocorrect="off" @autocapitalize="off" />
       {{else}}
         <label for="username-or-email">{{i18n "forgot_password.invite"}}</label>
-        {{text-field value=accountEmailOrUsername placeholderKey="login.email_placeholder" id="username-or-email" autocorrect="off" autocapitalize="off"}}
+        <TextField @value={{accountEmailOrUsername}} @placeholderKey="login.email_placeholder" @id="username-or-email" @autocorrect="off" @autocapitalize="off" />
       {{/if}}
     {{/if}}
-  {{/d-modal-body}}
+  </DModalBody>
   <div class="modal-footer">
     {{#if offerHelp}}
-      {{d-button class="btn-large btn-primary"
-                 label="forgot_password.button_ok"
-                 type="submit"
-                 action=(action "ok")}}
+      <DButton @class="btn-large btn-primary" @label="forgot_password.button_ok" @type="submit" @action={{action "ok"}} />
       {{#unless helpSeen}}
-        {{d-button class="btn-large"
-                   label="forgot_password.button_help"
-                   icon="question-circle"
-                   action=(action "help")}}
+        <DButton @class="btn-large" @label="forgot_password.button_help" @icon="question-circle" @action={{action "help"}} />
       {{/unless}}
     {{else}}
-      {{d-button action=(action "resetPassword")
-                 label="forgot_password.reset"
-                 disabled=submitDisabled
-                 class="btn-primary forgot-password-reset"
-                 type="submit"}}
+      <DButton @action={{action "resetPassword"}} @label="forgot_password.reset" @disabled={{submitDisabled}} @class="btn-primary forgot-password-reset" @type="submit" />
     {{/if}}
   </div>
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
index 89e2fbe49a3..18c2a737f77 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-code.hbs
@@ -1,5 +1,5 @@
-{{#d-modal-body}}
+<DModalBody>
   <pre>
     <code class={{codeClasses}}>{{code}}</code>
   </pre>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
index 37a0cf25fc8..c16f985b994 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/fullscreen-table.hbs
@@ -1,3 +1,3 @@
-{{#d-modal-body}}
+<DModalBody>
   {{tableHtml}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/grant-badge.hbs b/app/assets/javascripts/discourse/app/templates/modal/grant-badge.hbs
index edfb21507b2..d661c1fa10b 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/grant-badge.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/grant-badge.hbs
@@ -1,27 +1,18 @@
-{{#d-modal-body class="grant-badge"}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody @class="grant-badge">
+  <ConditionalLoadingSpinner @condition={{loading}}>
     {{#if noGrantableBadges}}
       <p>{{i18n "admin.badges.no_badges"}}</p>
     {{else}}
       <p>
-        {{combo-box
-          value=selectedBadgeId
-          content=grantableBadges
-          onChange=(action (mut selectedBadgeId))
-          options=(hash
+        <ComboBox @value={{selectedBadgeId}} @content={{grantableBadges}} @onChange={{action (mut selectedBadgeId)}} @options={{hash
             filterable=true
             none="badges.none"
-          )
-        }}
+          }} />
       </p>
     {{/if}}
-  {{/conditional-loading-spinner}}
-{{/d-modal-body}}
+  </ConditionalLoadingSpinner>
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    disabled=buttonDisabled
-    action=(action "grantBadge")
-    label="admin.badges.grant"}}
+  <DButton @class="btn-primary" @disabled={{buttonDisabled}} @action={{action "grantBadge"}} @label="admin.badges.grant" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs b/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
index 8769840814e..ef8d1fc1532 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
@@ -1,25 +1,21 @@
-{{#d-modal-body rawTitle=rawTitle}}
+<DModalBody @rawTitle={{rawTitle}}>
   <form class="form-vertical group-add-members">
     <p>{{i18n "groups.add_members.description"}}</p>
 
     <div class="input-group">
-      {{email-group-user-chooser
-        value=usernamesAndEmails
-        onChange=(action "setUsernamesAndEmails")
-        options=(hash
+      <EmailGroupUserChooser @value={{usernamesAndEmails}} @onChange={{action "setUsernamesAndEmails"}} @options={{hash
           allowEmails=currentUser.can_invite_to_forum
           filterPlaceholder=(if currentUser.can_invite_to_forum
                              "groups.add_members.usernames_or_emails_placeholder"
                              "groups.add_members.usernames_placeholder"
                             )
-        )
-      }}
+        }} />
     </div>
 
     {{#if model.can_admin_group}}
       <div class="input-group">
         <label>
-          {{input id="set-owner" type="checkbox" checked=setOwner disabled=emails}}
+          <Input @id="set-owner" @type="checkbox" @checked={{setOwner}} @disabled={{emails}} />
           {{i18n "groups.add_members.set_owner"}}
         </label>
       </div>
@@ -27,17 +23,13 @@
 
     <div class="input-group">
       <label>
-        {{input type="checkbox" checked=notifyUsers disabled=(and (not usernames) emails)}}
+        <Input @type="checkbox" @checked={{notifyUsers}} @disabled={{and (not usernames) emails}} />
         {{i18n "groups.add_members.notify_users"}}
       </label>
     </div>
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "addMembers")
-      class="add btn-primary"
-      icon="plus"
-      disabled=(or loading (not usernamesAndEmails))
-      label="groups.add"}}
+  <DButton @action={{action "addMembers"}} @class="add btn-primary" @icon="plus" @disabled={{or loading (not usernamesAndEmails)}} @label="groups.add" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs b/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs
index 1bb030c8422..a500578cd90 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/group-default-notifications.hbs
@@ -1,8 +1,8 @@
-{{#d-modal-body title="groups.default_notifications.modal_title"}}
+<DModalBody @title="groups.default_notifications.modal_title">
   {{i18n "groups.default_notifications.modal_description" count=model.count}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button action=(action "updateExistingUsers") class="btn-primary" label="groups.default_notifications.modal_yes"}}
-  {{d-button action=(action "cancel") label="groups.default_notifications.modal_no"}}
+  <DButton @action={{action "updateExistingUsers"}} @class="btn-primary" @label="groups.default_notifications.modal_yes" />
+  <DButton @action={{action "cancel"}} @label="groups.default_notifications.modal_no" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/history.hbs b/app/assets/javascripts/discourse/app/templates/modal/history.hbs
index be1052de294..4924977cf8d 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/history.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/history.hbs
@@ -1,11 +1,11 @@
-{{#d-modal-body title=modalTitleKey maxHeight="70%"}}
+<DModalBody @title={{modalTitleKey}} @maxHeight="70%">
   <div id="revision">
     <div id="revision-details">
       {{d-icon "pencil-alt"}}
-      {{#link-to "user" model.username}}
+      <LinkTo @route="user" @model={{model.username}}>
         {{bound-avatar-template model.avatar_template "small"}} {{model.username}}
-      {{/link-to}}
-      {{plugin-outlet name="revision-user-details-after" args=(hash model=model)}}
+      </LinkTo>
+      <PluginOutlet @name="revision-user-details-after" @args={{hash model=model}} />
       <span class="date">{{bound-date model.created_at}}</span>
       {{#if model.edit_reason}}
         &mdash; <span class="edit-reason">{{model.edit_reason}}</span>
@@ -16,10 +16,10 @@
           &rarr; {{bound-avatar-template model.user_changes.current.avatar_template "small"}} {{model.user_changes.current.username}}
         {{/if}}
         {{#if model.wiki_changes}}
-          &mdash; {{disabled-icon icon="far-edit" disabled=wikiDisabled}}
+          &mdash; <DisabledIcon @icon="far-edit" @disabled={{wikiDisabled}} />
         {{/if}}
         {{#if model.post_type_changes}}
-          &mdash; {{disabled-icon icon="shield-alt" disabled=postTypeDisabled}}
+          &mdash; <DisabledIcon @icon="shield-alt" @disabled={{postTypeDisabled}} />
         {{/if}}
         {{#if model.category_id_changes}}
           &mdash; {{html-safe previousCategory}} &rarr; {{html-safe currentCategory}}
@@ -66,12 +66,12 @@
       {{/if}}
       {{#if model.wiki_changes}}
         <div class="row">
-          {{disabled-icon icon="far-edit" disabled=wikiDisabled}}
+          <DisabledIcon @icon="far-edit" @disabled={{wikiDisabled}} />
         </div>
       {{/if}}
       {{#if model.post_type_changes}}
         <div class="row">
-          {{disabled-icon icon="shield-alt" disabled=postTypeDisabled}}
+          <DisabledIcon @icon="shield-alt" @disabled={{postTypeDisabled}} />
         </div>
       {{/if}}
       {{#if model.category_id_changes}}
@@ -101,45 +101,42 @@
       </div>
     {{/if}}
 
-    {{plugin-outlet name="post-revisions" tagName="span" connectorTagName="div" args=(hash model=model)}}
+    <PluginOutlet @name="post-revisions" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-    {{#links-redirect class="row"}}
+    <LinksRedirect @class="row">
       {{html-safe bodyDiff}}
-    {{/links-redirect}}
+    </LinksRedirect>
   </div>
-{{/d-modal-body}}
+</DModalBody>
 {{#if topicController}}
   <div class="modal-footer">
     <div id="revision-controls">
-      {{d-button class="btn-default" action=(action "loadFirstVersion") icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
-      {{d-button class="btn-default" action=(action "loadPreviousVersion") icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
+      <DButton @class="btn-default" @action={{action "loadFirstVersion"}} @icon="fast-backward" @title="post.revisions.controls.first" @disabled={{loadFirstDisabled}} />
+      <DButton @class="btn-default" @action={{action "loadPreviousVersion"}} @icon="backward" @title="post.revisions.controls.previous" @disabled={{loadPreviousDisabled}} />
       <div id="revision-numbers" class={{unless displayRevisions "invisible"}}>
-        {{#conditional-loading-spinner condition=loading size="small"}}
+        <ConditionalLoadingSpinner @condition={{loading}} @size="small">
           {{html-safe revisionsText}}
-        {{/conditional-loading-spinner}}
+        </ConditionalLoadingSpinner>
       </div>
-      {{d-button class="btn-default" action=(action "loadNextVersion") icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
-      {{d-button class="btn-default" action=(action "loadLastVersion") icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
+      <DButton @class="btn-default" @action={{action "loadNextVersion"}} @icon="forward" @title="post.revisions.controls.next" @disabled={{loadNextDisabled}} />
+      <DButton @class="btn-default" @action={{action "loadLastVersion"}} @icon="fast-forward" @title="post.revisions.controls.last" @disabled={{loadLastDisabled}} />
     </div>
 
     <div id="revision-footer-buttons">
       {{#if displayEdit}}
-        {{d-button action=(action "editPost")
-            icon="pencil-alt"
-            class="btn-default"
-            label=editButtonLabel}}
+        <DButton @action={{action "editPost"}} @icon="pencil-alt" @class="btn-default" @label={{editButtonLabel}} />
       {{/if}}
 
       {{#if displayRevert}}
-        {{d-button action=(action "revertToVersion") icon="undo" translatedLabel=revertToRevisionText class="btn-danger" disabled=loading}}
+        <DButton @action={{action "revertToVersion"}} @icon="undo" @translatedLabel={{revertToRevisionText}} @class="btn-danger" @disabled={{loading}} />
       {{/if}}
 
       {{#if displayHide}}
-        {{d-button action=(action "hideVersion") icon="far-eye-slash" label="post.revisions.controls.hide" class="btn-danger" disabled=loading}}
+        <DButton @action={{action "hideVersion"}} @icon="far-eye-slash" @label="post.revisions.controls.hide" @class="btn-danger" @disabled={{loading}} />
       {{/if}}
 
       {{#if displayShow}}
-        {{d-button action=(action "showVersion") icon="far-eye" label="post.revisions.controls.show" class="btn-default" disabled=loading}}
+        <DButton @action={{action "showVersion"}} @icon="far-eye" @label="post.revisions.controls.show" @class="btn-default" @disabled={{loading}} />
       {{/if}}
     </div>
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs b/app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs
index 170e9530a7a..453b1d35dc4 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs
@@ -1,29 +1,16 @@
-{{#d-modal-body title="user.user_notifications.ignore_duration_title" autoFocus="false"}}
+<DModalBody @title="user.user_notifications.ignore_duration_title" @autoFocus="false">
   <div class="controls tracking-controls">
     <label>{{d-icon "far-eye-slash" class="icon"}} {{i18n "user.user_notifications.ignore_duration_username"}}</label>
-    {{email-group-user-chooser
-      value=ignoredUsername
-      onChange=(action "updateIgnoredUsername")
-      options=(hash
+    <EmailGroupUserChooser @value={{ignoredUsername}} @onChange={{action "updateIgnoredUsername"}} @options={{hash
         excludeCurrentUser=true
         maximum=1
-      )
-    }}
+      }} />
   </div>
-  {{future-date-input
-    label="user.user_notifications.ignore_duration_when"
-    input=(readonly ignoredUntil)
-    customShortcuts=timeShortcuts
-    includeDateTime=false
-    onChangeInput=(action (mut ignoredUntil))
-  }}
+  <FutureDateInput @label="user.user_notifications.ignore_duration_when" @input={{readonly ignoredUntil}} @customShortcuts={{timeShortcuts}} @includeDateTime={{false}} @onChangeInput={{action (mut ignoredUntil)}} />
   <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary"
-             disabled=saveDisabled
-             label="user.user_notifications.ignore_duration_save"
-             action=(action "ignore")}}
-  {{conditional-loading-spinner size="small" condition=loading}}
+  <DButton @class="btn-primary" @disabled={{saveDisabled}} @label="user.user_notifications.ignore_duration_save" @action={{action "ignore"}} />
+  <ConditionalLoadingSpinner @size="small" @condition={{loading}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/ignore-duration.hbs b/app/assets/javascripts/discourse/app/templates/modal/ignore-duration.hbs
index 9825c0b511f..8f461e9d786 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/ignore-duration.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/ignore-duration.hbs
@@ -1,19 +1,10 @@
-{{#d-modal-body title="user.user_notifications.ignore_duration_title" autoFocus="false"}}
-  {{future-date-input
-    label="user.user_notifications.ignore_duration_when"
-    input=ignoredUntil
-    customShortcuts=timeShortcuts
-    includeDateTime=false
-    onChangeInput=(action (mut ignoredUntil))
-  }}
+<DModalBody @title="user.user_notifications.ignore_duration_title" @autoFocus="false">
+  <FutureDateInput @label="user.user_notifications.ignore_duration_when" @input={{ignoredUntil}} @customShortcuts={{timeShortcuts}} @includeDateTime={{false}} @onChangeInput={{action (mut ignoredUntil)}} />
   <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary ignore-duration-save"
-             disabled=saveDisabled
-             label="user.user_notifications.ignore_duration_save"
-             action=(action "ignore")}}
+  <DButton @class="btn-primary ignore-duration-save" @disabled={{saveDisabled}} @label="user.user_notifications.ignore_duration_save" @action={{action "ignore"}} />
 
-  {{conditional-loading-spinner size="small" condition=loading}}
+  <ConditionalLoadingSpinner @size="small" @condition={{loading}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs b/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
index c589e643bfd..bc6fb841c67 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/insert-hyperlink.hbs
@@ -1,13 +1,7 @@
-{{#d-modal-body title="composer.link_dialog_title" class="insert-link"}}
+<DModalBody @title="composer.link_dialog_title" @class="insert-link">
   <form id="insert-hyperlink-form" {{action "ok" on="submit"}}>
     <div class="inputs">
-      {{text-field
-        value=linkUrl
-        placeholderKey="composer.link_url_placeholder"
-        class="link-url"
-        key-up=(action "search")
-        autofocus="autofocus"
-      }}
+      <TextField @value={{linkUrl}} @placeholderKey="composer.link_url_placeholder" @class="link-url" @key-up={{action "search"}} @autofocus="autofocus" />
       {{#if searchLoading}}
         {{loading-spinner}}
       {{/if}}
@@ -20,7 +14,7 @@
               onclick={{action "linkClick"}}
               data-title={{result.fancy_title}}
             >
-              {{topic-status topic=result disableActions=true}}
+              <TopicStatus @topic={{result}} @disableActions={{true}} />
               {{replace-emoji result.fancy_title}}
               <div class="search-category">
                 {{#if result.category.parentCategory}}
@@ -35,23 +29,13 @@
       {{/if}}
     </div>
     <div class="inputs">
-      {{text-field value=linkText placeholderKey="composer.link_optional_text" class="link-text"}}
+      <TextField @value={{linkText}} @placeholderKey="composer.link_optional_text" @class="link-text" />
     </div>
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    class="btn-primary"
-    label="composer.modal_ok"
-    action=(action "ok")
-    type="submit"
-    form="insert-hyperlink-form"
-  }}
+  <DButton @class="btn-primary" @label="composer.modal_ok" @action={{action "ok"}} @type="submit" @form="insert-hyperlink-form" />
 
-  {{d-button
-    class="btn-danger"
-    label="composer.modal_cancel"
-    action=(action "cancel")
-  }}
+  <DButton @class="btn-danger" @label="composer.modal_cancel" @action={{action "cancel"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/json-schema-editor.hbs b/app/assets/javascripts/discourse/app/templates/modal/json-schema-editor.hbs
index adeea5a5edb..76b9859c311 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/json-schema-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/json-schema-editor.hbs
@@ -1 +1 @@
-{{json-editor model=this.model saveChangesCallback=(action "saveChanges") tagName=""}}
+<JsonEditor @model={{this.model}} @saveChangesCallback={{action "saveChanges"}} @tagName="" />
diff --git a/app/assets/javascripts/discourse/app/templates/modal/jump-to-post.hbs b/app/assets/javascripts/discourse/app/templates/modal/jump-to-post.hbs
index 401d143b0f8..804c39bdd33 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/jump-to-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/jump-to-post.hbs
@@ -1,15 +1,9 @@
-{{#d-modal-body title="topic.progress.jump_prompt_long"}}
+<DModalBody @title="topic.progress.jump_prompt_long">
 
   <div class="jump-to-post-form">
     <div class="jump-to-post-control">
       <span class="index">#</span>
-      {{input
-        id="post-jump"
-        type="number"
-        value=postNumber
-        insert-newline=(action "jump")
-        autofocus="true"
-      }}
+      <Input @id="post-jump" @type="number" @value={{postNumber}} @insert-newline={{action "jump"}} @autofocus="true" />
       <span class="input-hint-text post-number">
         {{i18n "topic.progress.jump_prompt_of" count=filteredPostsCount}}
       </span>
@@ -26,12 +20,12 @@
       <span class="input-hint-text post-date">
         {{i18n "topic.progress.jump_prompt_to_date"}}
       </span>
-      {{date-picker id="post-date" class="date-input" value=postDate defaultDate="YYYY-MM-DD"}}
+      <DatePicker @id="post-date" @class="date-input" @value={{postDate}} @defaultDate="YYYY-MM-DD" />
     </div>
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary" action=(action "jump") label="composer.modal_ok"}}
-  {{d-modal-cancel close=(route-action "closeModal")}}
+  <DButton @class="btn-primary" @action={{action "jump"}} @label="composer.modal_ok" />
+  <DModalCancel @close={{route-action "closeModal"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs b/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs
index 97036766f71..ee0d40f57ca 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/keyboard-shortcuts-help.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body id="keyboard-shortcuts-help"}}
+<DModalBody @id="keyboard-shortcuts-help">
   {{#each-in shortcuts as |category shortcutCategory|}}
     <section class="shortcut-category span-{{shortcutCategory.count}} shortcut-category-{{category}}">
       <h4>{{i18n (concat "keyboard_shortcuts_help." category ".title")}}</h4>
@@ -9,4 +9,4 @@
       </ul>
     </section>
   {{/each-in}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
index 9bf027c98ec..a7e055d3a69 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/login.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
@@ -1,6 +1,6 @@
-{{#login-modal loginName=loginName loginPassword=loginPassword secondFactorToken=secondFactorToken action=(action "login")}}
-  {{plugin-outlet name="login-before-modal-body" connectorTagName="div"}}
-  {{#d-modal-body class=modalBodyClasses}}
+<LoginModal @loginName={{loginName}} @loginPassword={{loginPassword}} @secondFactorToken={{secondFactorToken}} @action={{action "login"}}>
+  <PluginOutlet @name="login-before-modal-body" @connectorTagName="div" />
+  <DModalBody @class={{modalBodyClasses}}>
 
     {{#if canLoginLocal}}
       <div class="login-left-side">
@@ -11,7 +11,7 @@
         <form id="login-form" method="post">
           <div id="credentials" class={{credentialsClass}}>
             <div class="input-group">
-              {{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus" tabindex="1"}}
+              <Input @value={{loginName}} @type="email" @id="login-account-name" class={{value-entered loginName}} @autocomplete="username" @autocorrect="off" @autocapitalize="off" @disabled={{showSecondFactor}} @autofocus="autofocus" @tabindex="1" />
               <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
               {{#if showLoginWithEmailLink}}
                 <a href class={{if loginName "" "no-login-filled"}} tabindex="3"  id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
@@ -20,57 +20,32 @@
               {{/if}}
             </div>
             <div class="input-group">
-              {{input value=loginPassword type="password" class=(value-entered loginPassword) id="login-account-password" autocomplete="current-password" maxlength="200" capsLockOn=capsLockOn disabled=disableLoginFields tabindex="1"}}
+              <Input @value={{loginPassword}} @type="password" class={{value-entered loginPassword}} @id="login-account-password" @autocomplete="current-password" @maxlength="200" @capsLockOn={{capsLockOn}} @disabled={{disableLoginFields}} @tabindex="1" />
               <label class="alt-placeholder" for="login-account-password">{{i18n "login.password"}}</label>
               <a href id="forgot-password-link" tabindex="3" {{action "forgotPassword"}}>{{i18n "forgot_password.action"}}</a>
               <div class="caps-lock-warning {{unless capsLockOn "hidden"}}">{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}</div>
             </div>
           </div>
-          {{#second-factor-form
-            secondFactorMethod=secondFactorMethod
-            secondFactorToken=secondFactorToken
-            class=secondFactorClass
-            backupEnabled=backupEnabled
-            isLogin=true}}
+          <SecondFactorForm @secondFactorMethod={{secondFactorMethod}} @secondFactorToken={{secondFactorToken}} @class={{secondFactorClass}} @backupEnabled={{backupEnabled}} @isLogin={{true}}>
             {{#if showSecurityKey}}
-              {{#security-key-form
-                allowedCredentialIds=securityKeyAllowedCredentialIds
-                challenge=securityKeyChallenge
-                showSecurityKey=showSecurityKey
-                showSecondFactor=showSecondFactor
-                secondFactorMethod=secondFactorMethod
-                otherMethodAllowed=otherMethodAllowed
-                action=(action "authenticateSecurityKey")}}
-              {{/security-key-form}}
+              <SecurityKeyForm @allowedCredentialIds={{securityKeyAllowedCredentialIds}} @challenge={{securityKeyChallenge}} @showSecurityKey={{showSecurityKey}} @showSecondFactor={{showSecondFactor}} @secondFactorMethod={{secondFactorMethod}} @otherMethodAllowed={{otherMethodAllowed}} @action={{action "authenticateSecurityKey"}}>
+              </SecurityKeyForm>
             {{else}}
-              {{second-factor-input value=secondFactorToken inputId="login-second-factor" secondFactorMethod=secondFactorMethod backupEnabled=backupEnabled}}
+              <SecondFactorInput @value={{secondFactorToken}} @inputId="login-second-factor" @secondFactorMethod={{secondFactorMethod}} @backupEnabled={{backupEnabled}} />
             {{/if}}
-          {{/second-factor-form}}
+          </SecondFactorForm>
         </form>
         <div class="modal-footer">
           {{#if canLoginLocal}}
             {{#unless showSecurityKey }}
-              {{d-button
-                action=(action "login")
-                id="login-button"
-                form="login-form"
-                icon="unlock"
-                label=loginButtonLabel
-                disabled=loginDisabled
-                class="btn btn-large btn-primary"
-                tabindex="2"}}
+              <DButton @action={{action "login"}} @id="login-button" @form="login-form" @icon="unlock" @label={{loginButtonLabel}} @disabled={{loginDisabled}} @class="btn btn-large btn-primary" @tabindex="2" />
             {{/unless}}
 
             {{#if showSignupLink}}
-              {{d-button
-                class="btn-large"
-                id="new-account-link"
-                action=(action "createAccount")
-                label="create_account.title"
-                tabindex="3"}}
+              <DButton @class="btn-large" @id="new-account-link" @action={{action "createAccount"}} @label="create_account.title" @tabindex="3" />
             {{/if}}
           {{/if}}
-          {{conditional-loading-spinner condition=showSpinner size="small"}}
+          <ConditionalLoadingSpinner @condition={{showSpinner}} @size="small" />
         </div>
       </div>
     {{/if}}
@@ -85,12 +60,12 @@
       {{/if}}
 
       <div class="login-right-side">
-        {{login-buttons externalLogin=(action "externalLogin")}}
+        <LoginButtons @externalLogin={{action "externalLogin"}} />
       </div>
     {{/if}}
-  {{/d-modal-body}}
+  </DModalBody>
 
-  {{plugin-outlet name="login-after-modal-footer" connectorTagName="div"}}
+  <PluginOutlet @name="login-after-modal-footer" @connectorTagName="div" />
 
   <div class={{alertClass}} id="login-alert">{{alert}}</div>
-{{/login-modal}}
+</LoginModal>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/move-to-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/move-to-topic.hbs
index 777684f5fcf..ee8f3f79a40 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/move-to-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/move-to-topic.hbs
@@ -1,16 +1,16 @@
-{{#d-modal-body id="choosing-topic"}}
+<DModalBody @id="choosing-topic">
 
   {{#if model.isPrivateMessage}}
     <div class="radios">
       {{#if canSplitToPM}}
         <label class="radio-label" for="move-to-new-message">
-          {{radio-button id="move-to-new-message" name="move-to-entity" value="new_message" selection=selection}}
+          <RadioButton @id="move-to-new-message" @name="move-to-entity" @value="new_message" @selection={{selection}} />
           <b>{{i18n "topic.move_to_new_message.radio_label"}}</b>
         </label>
       {{/if}}
 
       <label class="radio-label" for="move-to-existing-message">
-        {{radio-button id="move-to-existing-message" name="move-to-entity" value="existing_message" selection=selection}}
+        <RadioButton @id="move-to-existing-message" @name="move-to-entity" @value="existing_message" @selection={{selection}} />
         <b>{{i18n "topic.move_to_existing_message.radio_label"}}</b>
       </label>
     </div>
@@ -20,11 +20,11 @@
         <p>{{html-safe (i18n "topic.move_to_new_message.instructions" count=selectedPostsCount)}}</p>
         <form>
           <label>{{i18n "topic.move_to_new_message.message_title"}}</label>
-          {{text-field value=topicName placeholderKey="composer.title_placeholder" id="split-topic-name"}}
+          <TextField @value={{topicName}} @placeholderKey="composer.title_placeholder" @id="split-topic-name" />
 
           {{#if canTagMessages}}
             <label>{{i18n "tagging.tags"}}</label>
-            {{tag-chooser tags=tags}}
+            <TagChooser @tags={{tags}} />
           {{/if}}
         </form>
       {{/if}}
@@ -33,14 +33,10 @@
     {{#if existingMessage}}
       <p>{{html-safe (i18n "topic.move_to_existing_message.instructions" count=selectedPostsCount)}}</p>
       <form>
-        {{choose-message currentTopicId=model.id selectedTopicId=selectedTopicId}}
+        <ChooseMessage @currentTopicId={{model.id}} @selectedTopicId={{selectedTopicId}} />
 
         <label>{{i18n "topic.move_to_new_message.participants"}}</label>
-        {{email-group-user-chooser
-          class="participant-selector"
-          value=participants
-          onChange=(action (mut participants))
-        }}
+        <EmailGroupUserChooser @class="participant-selector" @value={{participants}} @onChange={{action (mut participants)}} />
       </form>
     {{/if}}
 
@@ -49,19 +45,19 @@
     <div class="radios">
       {{#if canSplitTopic}}
         <label class="radio-label" for="move-to-new-topic">
-          {{radio-button id="move-to-new-topic" name="move-to-entity" value="new_topic" selection=selection}}
+          <RadioButton @id="move-to-new-topic" @name="move-to-entity" @value="new_topic" @selection={{selection}} />
           <b>{{i18n "topic.split_topic.radio_label"}}</b>
         </label>
       {{/if}}
 
       <label class="radio-label" for="move-to-existing-topic">
-        {{radio-button id="move-to-existing-topic" name="move-to-entity" value="existing_topic" selection=selection}}
+        <RadioButton @id="move-to-existing-topic" @name="move-to-entity" @value="existing_topic" @selection={{selection}} />
         <b>{{i18n "topic.merge_topic.radio_label"}}</b>
       </label>
 
       {{#if canSplitToPM}}
         <label class="radio-label" for="move-to-new-message">
-          {{radio-button id="move-to-new-message" name="move-to-entity" value="new_message" selection=selection}}
+          <RadioButton @id="move-to-new-message" @name="move-to-entity" @value="new_message" @selection={{selection}} />
           <b>{{i18n "topic.move_to_new_message.radio_label"}}</b>
         </label>
       {{/if}}
@@ -70,7 +66,7 @@
     {{#if existingTopic}}
       <p>{{html-safe (i18n "topic.merge_topic.instructions" count=selectedPostsCount)}}</p>
       <form>
-        {{choose-topic currentTopicId=model.id selectedTopicId=selectedTopicId}}
+        <ChooseTopic @currentTopicId={{model.id}} @selectedTopicId={{selectedTopicId}} />
       </form>
     {{/if}}
 
@@ -79,17 +75,13 @@
         <p>{{html-safe (i18n "topic.split_topic.instructions" count=selectedPostsCount)}}</p>
         <form>
           <label>{{i18n "topic.split_topic.topic_name"}}</label>
-          {{text-field value=topicName placeholderKey="composer.title_placeholder" id="split-topic-name"}}
+          <TextField @value={{topicName}} @placeholderKey="composer.title_placeholder" @id="split-topic-name" />
 
           <label>{{i18n "categories.category"}}</label>
-          {{category-chooser
-            value=categoryId
-            class="small"
-            onChange=(action (mut categoryId))
-          }}
+          <CategoryChooser @value={{categoryId}} @class="small" @onChange={{action (mut categoryId)}} />
           {{#if canAddTags}}
             <label>{{i18n "tagging.tags"}}</label>
-            {{tag-chooser tags=tags categoryId=categoryId}}
+            <TagChooser @tags={{tags}} @categoryId={{categoryId}} />
           {{/if}}
         </form>
       {{/if}}
@@ -100,19 +92,19 @@
         <p>{{html-safe (i18n "topic.move_to_new_message.instructions" count=selectedPostsCount)}}</p>
         <form>
           <label>{{i18n "topic.move_to_new_message.message_title"}}</label>
-          {{text-field value=topicName placeholderKey="composer.title_placeholder" id="split-topic-name"}}
+          <TextField @value={{topicName}} @placeholderKey="composer.title_placeholder" @id="split-topic-name" />
 
           {{#if canTagMessages}}
             <label>{{i18n "tagging.tags"}}</label>
-            {{tag-chooser tags=tags}}
+            <TagChooser @tags={{tags}} />
           {{/if}}
         </form>
       {{/if}}
     {{/if}}
   {{/if}}
 
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary" disabled=buttonDisabled action=(action "performMove") icon="sign-out-alt" translatedLabel=buttonTitle}}
+  <DButton @class="btn-primary" @disabled={{buttonDisabled}} @action={{action "performMove"}} @icon="sign-out-alt" @translatedLabel={{buttonTitle}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/not-activated.hbs b/app/assets/javascripts/discourse/app/templates/modal/not-activated.hbs
index 16adb4032de..2240533f090 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/not-activated.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/not-activated.hbs
@@ -1,8 +1,7 @@
-{{#d-modal-body}}
+<DModalBody>
   {{html-safe (i18n "login.not_activated" sentTo=sentTo)}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{activation-controls sendActivationEmail=(action "sendActivationEmail")
-                        editActivationEmail=(action "editActivationEmail")}}
+  <ActivationControls @sendActivationEmail={{action "sendActivationEmail"}} @editActivationEmail={{action "editActivationEmail"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/post-enqueued.hbs b/app/assets/javascripts/discourse/app/templates/modal/post-enqueued.hbs
index d34557528ee..f1edd542f47 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/post-enqueued.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/post-enqueued.hbs
@@ -1,8 +1,8 @@
-{{#d-modal-body}}
+<DModalBody>
   <p>{{i18n "review.approval.description"}}</p>
 
   <p>{{html-safe (i18n "review.approval.pending_posts" count=model.pending_count)}}</p>
-{{/d-modal-body}}
+</DModalBody>
 <div class="modal-footer">
-  {{d-button action=(route-action "closeModal") class="btn-primary" label="review.approval.ok"}}
+  <DButton @action={{route-action "closeModal"}} @class="btn-primary" @label="review.approval.ok" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/publish-page.hbs b/app/assets/javascripts/discourse/app/templates/modal/publish-page.hbs
index 94e16b22faa..862755a2b7a 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/publish-page.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/publish-page.hbs
@@ -1,38 +1,28 @@
-{{#d-modal-body}}
+<DModalBody>
   {{#if unpublished}}
     <p>{{i18n "topic.publish_page.unpublished"}}</p>
   {{else}}
-    {{#conditional-loading-spinner condition=initializing}}
+    <ConditionalLoadingSpinner @condition={{initializing}}>
       <p class="publish-description">{{i18n "topic.publish_page.description"}}</p>
 
       <form>
         <div class="controls">
           <label>{{i18n "topic.publish_page.slug"}}</label>
-          {{text-field
-            value=publishedPage.slug
-            onChange=(action "checkSlug")
-            onChangeImmediate=(action "startCheckSlug")
-            disabled=existing
-            class="publish-slug"
-          }}
+          <TextField @value={{publishedPage.slug}} @onChange={{action "checkSlug"}} @onChangeImmediate={{action "startCheckSlug"}} @disabled={{existing}} @class="publish-slug" />
         </div>
 
         <div class="controls">
           <label>{{i18n "topic.publish_page.public"}}</label>
 
           <p class="description">
-            {{input
-              type="checkbox"
-              checked=(readonly publishedPage.public)
-              click=(action "onChangePublic" value="target.checked")
-            }}
+            <Input @type="checkbox" @checked={{readonly publishedPage.public}} @click={{action "onChangePublic" value="target.checked"}} />
             {{i18n "topic.publish_page.public_description"}}
           </p>
         </div>
       </form>
 
       <div class="publish-url">
-        {{conditional-loading-spinner condition=checking}}
+        <ConditionalLoadingSpinner @condition={{checking}} />
 
         {{#if existing}}
           <div class="current-url">
@@ -55,30 +45,18 @@
         {{/if}}
 
       </div>
-    {{/conditional-loading-spinner}}
+    </ConditionalLoadingSpinner>
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
   {{#if showUnpublish}}
-    {{d-button
-      label="topic.publish_page.unpublish"
-      icon="trash-alt"
-      class="btn-danger"
-      isLoading=unpublishing
-      action=(action "unpublish")
-    }}
+    <DButton @label="topic.publish_page.unpublish" @icon="trash-alt" @class="btn-danger" @isLoading={{unpublishing}} @action={{action "unpublish"}} />
 
-    {{d-button class="close-publish-page" icon="times" label="close" action=(action "closeModal")}}
+    <DButton @class="close-publish-page" @icon="times" @label="close" @action={{action "closeModal"}} />
   {{else if unpublished}}
-    {{d-button label="topic.publish_page.publishing_settings" action=(action "startNew")}}
+    <DButton @label="topic.publish_page.publishing_settings" @action={{action "startNew"}} />
   {{else}}
-    {{d-button
-      label="topic.publish_page.publish"
-      class="btn-primary publish-page"
-      icon="file"
-      disabled=disabled
-      isLoading=saving
-      action=(action "publish") }}
+    <DButton @label="topic.publish_page.publish" @class="btn-primary publish-page" @icon="file" @disabled={{disabled}} @isLoading={{saving}} @action={{action "publish"}} />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/raw-email.hbs b/app/assets/javascripts/discourse/app/templates/modal/raw-email.hbs
index cce4c69cdb6..9f21a5c4f44 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/raw-email.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/raw-email.hbs
@@ -1,43 +1,31 @@
-{{#d-modal-body title="raw_email.title" class="incoming-email-modal" maxHeight="80%"}}
+<DModalBody @title="raw_email.title" @class="incoming-email-modal" @maxHeight="80%">
   <div class="incoming-email-tabs">
-    {{d-button action=(action "displayRaw")
-               label="post.raw_email.displays.raw.button"
-               title="post.raw_email.displays.raw.title"
-               class=(if showRawEmail "active")
-    }}
+    <DButton @action={{action "displayRaw"}} @label="post.raw_email.displays.raw.button" @title="post.raw_email.displays.raw.title" @class={{if showRawEmail "active"}} />
 
     {{#if textPart}}
-      {{d-button action=(action "displayTextPart")
-                 label="post.raw_email.displays.text_part.button"
-                 title="post.raw_email.displays.text_part.title"
-                 class=(if showTextPart "active")
-      }}
+      <DButton @action={{action "displayTextPart"}} @label="post.raw_email.displays.text_part.button" @title="post.raw_email.displays.text_part.title" @class={{if showTextPart "active"}} />
     {{/if}}
 
     {{#if htmlPart}}
-      {{d-button action=(action "displayHtmlPart")
-                 label="post.raw_email.displays.html_part.button"
-                 title="post.raw_email.displays.html_part.title"
-                 class=(if showHtmlPart "active")
-      }}
+      <DButton @action={{action "displayHtmlPart"}} @label="post.raw_email.displays.html_part.button" @title="post.raw_email.displays.html_part.title" @class={{if showHtmlPart "active"}} />
     {{/if}}
   </div>
 
   <div class="incoming-email-content">
     {{#if showRawEmail}}
       {{#if rawEmail}}
-        {{textarea value=rawEmail}}
+        <Textarea @value={{rawEmail}} />
       {{else}}
         {{i18n "raw_email.not_available"}}
       {{/if}}
     {{/if}}
 
     {{#if showTextPart}}
-      {{textarea value=textPart}}
+      <Textarea @value={{textPart}} />
     {{/if}}
 
     {{#if showHtmlPart}}
-      {{iframed-html html=htmlPart className="incoming-email-html-part"}}
+      <IframedHtml @html={{htmlPart}} @className="incoming-email-html-part" />
     {{/if}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/reject-reason-reviewable.hbs b/app/assets/javascripts/discourse/app/templates/modal/reject-reason-reviewable.hbs
index e43f90c8b57..bd1c939b3ee 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/reject-reason-reviewable.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/reject-reason-reviewable.hbs
@@ -1,17 +1,14 @@
-{{#d-modal-body class="explain-reviewable"}}
-  {{textarea value=rejectReason}}
+<DModalBody @class="explain-reviewable">
+  <Textarea @value={{rejectReason}} />
   <div class="control-group">
     <label>
-      {{input type="checkbox"
-        class="inline"
-        checked=sendEmail
-      }}
+      <Input @type="checkbox" class="inline" @checked={{sendEmail}} />
       {{i18n "review.reject_reason.send_email"}}
     </label>
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button icon="trash-alt" class="btn-danger" action=(action "perform") label="admin.user.delete"}}
-  {{d-button action=(route-action "closeModal") label="cancel" class="cancel"}}
+  <DButton @icon="trash-alt" @class="btn-danger" @action={{action "perform"}} @label="admin.user.delete" />
+  <DButton @action={{route-action "closeModal"}} @label="cancel" @class="cancel" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/reorder-categories.hbs b/app/assets/javascripts/discourse/app/templates/modal/reorder-categories.hbs
index 6b2a8f26ef7..6152a2822e5 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/reorder-categories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/reorder-categories.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class="reorder-categories full-height-modal" title="categories.reorder.title"}}
+<DModalBody @class="reorder-categories full-height-modal" @title="categories.reorder.title">
   <div id="rc-scroll-anchor"></div>
   <table>
     <thead>
@@ -15,17 +15,17 @@
           </td>
 
           <td>
-            {{number-field number=(readonly cat.position) change=(action "change" cat)}}
-            {{d-button class="btn-default no-text" action=(action "moveUp") actionParam=cat icon="arrow-up"}}
-            {{d-button class="btn-default no-text" action=(action "moveDown") actionParam=cat icon="arrow-down"}}
+            <NumberField @number={{readonly cat.position}} @change={{action "change" cat}} />
+            <DButton @class="btn-default no-text" @action={{action "moveUp"}} @actionParam={{cat}} @icon="arrow-up" />
+            <DButton @class="btn-default no-text" @action={{action "moveDown"}} @actionParam={{cat}} @icon="arrow-down" />
           </td>
         </tr>
       {{/each}}
     </tbody>
   </table>
   <div id="rc-scroll-bottom"></div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button class="btn-primary" action=(action "save") label="categories.reorder.save"}}
+  <DButton @class="btn-primary" @action={{action "save"}} @label="categories.reorder.save" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/request-group-membership-form.hbs b/app/assets/javascripts/discourse/app/templates/modal/request-group-membership-form.hbs
index 4340f03ee1a..03c6ed189fb 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/request-group-membership-form.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/request-group-membership-form.hbs
@@ -1,21 +1,18 @@
 <form class="request-group-membership-form">
-  {{#d-modal-body rawTitle=title}}
+  <DModalBody @rawTitle={{title}}>
     <div class="control-group">
       <label>
         {{i18n "groups.membership_request.reason"}}
       </label>
 
-      {{expanding-text-area value=reason}}
+      <ExpandingTextArea @value={{reason}} />
     </div>
-  {{/d-modal-body}}
+  </DModalBody>
 
   <div class="modal-footer">
-    {{d-button class="btn-primary"
-        disabled=disableSubmit
-        label="groups.membership_request.submit"
-        action=(action "requestMember")}}
+    <DButton @class="btn-primary" @disabled={{disableSubmit}} @label="groups.membership_request.submit" @action={{action "requestMember"}} />
 
-    {{d-modal-cancel close=(route-action "closeModal")}}
-    {{conditional-loading-spinner size="small" condition=loading}}
+    <DModalCancel @close={{route-action "closeModal"}} />
+    <ConditionalLoadingSpinner @size="small" @condition={{loading}} />
   </div>
 </form>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-security-key.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-security-key.hbs
index 641a21e1c71..e2814580fab 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-security-key.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-security-key.hbs
@@ -1,5 +1,5 @@
-{{#d-modal-body}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody>
+  <ConditionalLoadingSpinner @condition={{loading}}>
     {{#if errorMessage}}
       <div class="control-group">
         <div class="controls">
@@ -16,19 +16,16 @@
 
     <div class="control-group">
       <div class="controls">
-        {{input value=securityKeyName id="security-key-name" placeholder="security key name"}}
+        <Input @value={{securityKeyName}} @id="security-key-name" placeholder="security key name" />
       </div>
     </div>
 
     <div class="control-group">
       <div class="controls">
         {{#unless webauthnUnsupported}}
-          {{d-button
-            class="btn-primary add-security-key"
-            action=(action "registerSecurityKey")
-            label="user.second_factor.security_key.register"}}
+          <DButton @class="btn-primary add-security-key" @action={{action "registerSecurityKey"}} @label="user.second_factor.security_key.register" />
         {{/unless}}
       </div>
     </div>
-  {{/conditional-loading-spinner}}
-{{/d-modal-body}}
+  </ConditionalLoadingSpinner>
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
index 0caeb9d26af..034912dc828 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
@@ -1,5 +1,5 @@
-{{#d-modal-body}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody>
+  <ConditionalLoadingSpinner @condition={{loading}}>
     {{#if errorMessage}}
       <div class="control-group">
         <div class="controls">
@@ -32,30 +32,19 @@
     <div class="control-group">
       <label class="control-label input-prepend">{{i18n "user.second_factor.name"}}</label>
       <div class="controls">
-        {{second-factor-input value=secondFactorName inputId="second-factor-name" placeholder=(i18n "user.second_factor.totp.default_name")}}
+        <SecondFactorInput @value={{secondFactorName}} @inputId="second-factor-name" @placeholder={{i18n "user.second_factor.totp.default_name"}} />
       </div>
 
       <label class="control-label input-prepend">{{i18n "user.second_factor.label"}}</label>
       <div class="controls">
-        {{text-field
-          class="second-factor-token-input"
-          maxlength=6
-          value=secondFactorToken
-          inputId="second-factor-token"
-          placeholder="123456"
-          autocorrect="off"
-          autocapitalize="off"
-          autofocus="autofocus"}}
+        <TextField @class="second-factor-token-input" @maxlength={{6}} @value={{secondFactorToken}} @inputId="second-factor-token" @placeholder="123456" @autocorrect="off" @autocapitalize="off" @autofocus="autofocus" />
       </div>
     </div>
 
     <div class="control-group">
       <div class="controls">
-        {{d-button
-          class="btn-primary add-totp"
-          action=(action "enableSecondFactor")
-          label="enable"}}
+        <DButton @class="btn-primary add-totp" @action={{action "enableSecondFactor"}} @label="enable" />
       </div>
     </div>
-  {{/conditional-loading-spinner}}
-{{/d-modal-body}}
+  </ConditionalLoadingSpinner>
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-backup-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-backup-edit.hbs
index 1d3e96142bb..29abdc30cc6 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-backup-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-backup-edit.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body}}
+<DModalBody>
   <section class="user-preferences solo-preference  second-factor-backup-preferences">
     <form class="form-horizontal">
       {{#if successMessage}}
@@ -19,30 +19,14 @@
 
       <div class="actions">
         {{#if backupEnabled}}
-          {{d-button
-            class="btn-primary"
-            icon="redo"
-            action=(action "generateSecondFactorCodes")
-            type="submit"
-            isLoading=loading
-            label="user.second_factor_backup.regenerate"}}
-          {{d-button
-            class="btn-danger"
-            icon="ban"
-            action=(action "disableSecondFactorBackup")
-            disabled=loading
-            label="user.second_factor_backup.disable"}}
+          <DButton @class="btn-primary" @icon="redo" @action={{action "generateSecondFactorCodes"}} @type="submit" @isLoading={{loading}} @label="user.second_factor_backup.regenerate" />
+          <DButton @class="btn-danger" @icon="ban" @action={{action "disableSecondFactorBackup"}} @disabled={{loading}} @label="user.second_factor_backup.disable" />
         {{else}}
-          {{d-button
-            class="btn-primary"
-            action=(action "generateSecondFactorCodes")
-            type="submit"
-            disabled=loading
-            label="user.second_factor_backup.enable"}}
+          <DButton @class="btn-primary" @action={{action "generateSecondFactorCodes"}} @type="submit" @disabled={{loading}} @label="user.second_factor_backup.enable" />
         {{/if}}
       </div>
 
-      {{#conditional-loading-section isLoading=loading}}
+      <ConditionalLoadingSection @isLoading={{loading}}>
         {{#if backupCodes}}
           <h3>{{i18n "user.second_factor_backup.codes.title"}}</h3>
 
@@ -50,11 +34,9 @@
             {{i18n "user.second_factor_backup.codes.description"}}
           </p>
 
-          {{backup-codes
-            copyBackupCode=(action "copyBackupCode")
-            backupCodes=backupCodes}}
+          <BackupCodes @copyBackupCode={{action "copyBackupCode"}} @backupCodes={{backupCodes}} />
         {{/if}}
-      {{/conditional-loading-section}}
+      </ConditionalLoadingSection>
     </form>
   </section>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
index e93efb1105d..1031dc7c31b 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
@@ -1,23 +1,13 @@
-{{#d-modal-body}}
+<DModalBody>
   <form class="form-horizontal">
     <div class="input-group">
       <label for="security-key-name">{{i18n "user.second_factor.security_key.edit_description"}}</label>
-      {{input name="security-key-name" type="text" value=model.name}}
+      <Input @name="security-key-name" @type="text" @value={{model.name}} />
     </div>
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    action=(action "editSecurityKey")
-    class="btn-primary"
-    label="user.second_factor.security_key.save"
-  }}
-  {{d-button
-    action=(action "disableSecurityKey")
-    class="btn-danger no-text"
-    icon="trash-alt"
-    aria-label="user.second_factor.disable"
-    title="user.second_factor.disable"
-  }}
+  <DButton @action={{action "editSecurityKey"}} @class="btn-primary" @label="user.second_factor.security_key.save" />
+  <DButton @action={{action "disableSecurityKey"}} @class="btn-danger no-text" @icon="trash-alt" @aria-label="user.second_factor.disable" @title="user.second_factor.disable" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
index a5fa63f5863..6ac110e9aac 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
@@ -1,23 +1,13 @@
-{{#d-modal-body}}
+<DModalBody>
   <form class="form-horizontal">
     <div class="input-group">
       <label for="authenticator-name">{{i18n "user.second_factor.edit_description"}}</label>
-      {{input name="authenticator-name" type="text" value=model.name}}
+      <Input @name="authenticator-name" @type="text" @value={{model.name}} />
     </div>
   </form>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    action=(action "editSecondFactor")
-    class="btn-primary"
-    label="user.second_factor.save"
-  }}
-  {{d-button
-    action=(action "disableSecondFactor")
-    class="btn-danger no-text"
-    icon="trash-alt"
-    aria-label="user.second_factor.disable"
-    title="user.second_factor.disable"
-  }}
+  <DButton @action={{action "editSecondFactor"}} @class="btn-primary" @label="user.second_factor.save" />
+  <DButton @action={{action "disableSecondFactor"}} @class="btn-danger no-text" @icon="trash-alt" @aria-label="user.second_factor.disable" @title="user.second_factor.disable" />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/share-and-invite.hbs b/app/assets/javascripts/discourse/app/templates/modal/share-and-invite.hbs
index 5ebdcfb42a4..3d33f99a391 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/share-and-invite.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/share-and-invite.hbs
@@ -1,3 +1,3 @@
-{{#d-modal-body}}
-  {{modal-panel panel=modal.selectedPanel}}
-{{/d-modal-body}}
+<DModalBody>
+  <ModalPanel @panel={{modal.selectedPanel}} />
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
index bd3d19425e8..df999825f5f 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
@@ -1,60 +1,33 @@
-{{#d-modal-body
-  rawTitle=(if post (i18n "post.share.title" post_number=post.post_number) (i18n "topic.share.title"))
-  rawSubtitle=(if post displayDate)
-}}
+<DModalBody @rawTitle={{if post (i18n "post.share.title" post_number=post.post_number) (i18n "topic.share.title")}} @rawSubtitle={{if post displayDate}}>
   <form>
     <div class="input-group invite-link">
       <label for="invite-link">
         {{if post (i18n "post.share.instructions" post_number=post.post_number) (i18n "topic.share.instructions")}}
       </label>
       <div class="link-share-container">
-        {{input
-          name="invite-link"
-          class="invite-link"
-          value=url
-          readonly=true
-        }}
-        {{copy-button selector="input.invite-link"}}
+        <Input @name="invite-link" class="invite-link" @value={{url}} @readonly={{true}} />
+        <CopyButton @selector="input.invite-link" />
       </div>
     </div>
 
     <div class="link-share-actions">
       <div class="sources">
         {{#each sources as |s|}}
-          {{share-source source=s title=topic.title action=(action "share")}}
+          <ShareSource @source={{s}} @title={{topic.title}} @action={{action "share"}} />
         {{/each}}
 
         {{#if allowInvites}}
-          {{d-button
-            class="btn-default invite"
-            label="topic.share.invite_users"
-            icon="user-plus"
-            action=(action "inviteUsers")
-          }}
+          <DButton @class="btn-default invite" @label="topic.share.invite_users" @icon="user-plus" @action={{action "inviteUsers"}} />
         {{/if}}
 
         {{#if topic.details.can_reply_as_new_topic}}
           {{#if topic.isPrivateMessage}}
-            {{d-button
-              action=(action "replyAsNewTopic")
-              class="btn-default new-topic"
-              icon="plus"
-              aria-label="post.reply_as_new_private_message"
-              title="post.reply_as_new_private_message"
-              label="user.new_private_message"
-            }}
+            <DButton @action={{action "replyAsNewTopic"}} @class="btn-default new-topic" @icon="plus" @aria-label="post.reply_as_new_private_message" @title="post.reply_as_new_private_message" @label="user.new_private_message" />
           {{else}}
-            {{d-button
-              action=(action "replyAsNewTopic")
-              class="btn-default new-topic"
-              icon="plus"
-              aria-label="post.reply_as_new_topic"
-              title="post.reply_as_new_topic"
-              label="topic.create"
-            }}
+            <DButton @action={{action "replyAsNewTopic"}} @class="btn-default new-topic" @icon="plus" @aria-label="post.reply_as_new_topic" @title="post.reply_as_new_topic" @label="topic.create" />
           {{/if}}
         {{/if}}
       </div>
     </div>
   </form>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs b/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
index e16263c1baf..2dfdae890d7 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
@@ -1,3 +1,3 @@
-{{#d-modal-body title="tagging.upload"}}
+<DModalBody @title="tagging.upload">
   {{tags-uploader refresh=(route-action "triggerRefresh") closeModal=(route-action "closeModal") id="tags-uploader"}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/topic-bulk-actions.hbs b/app/assets/javascripts/discourse/app/templates/modal/topic-bulk-actions.hbs
index f973233739b..80c7bd6175b 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/topic-bulk-actions.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/topic-bulk-actions.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body}}
+<DModalBody>
   <p>{{html-safe (i18n "topics.bulk.selected" count=model.topics.length)}}</p>
   {{outlet "bulkOutlet"}}
-{{/d-modal-body}}
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/user-status.hbs b/app/assets/javascripts/discourse/app/templates/modal/user-status.hbs
index 4a3f263d19d..9e766e62076 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/user-status.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/user-status.hbs
@@ -1,21 +1,14 @@
-{{#d-modal-body}}
-  {{#conditional-loading-spinner condition=loading}}
+<DModalBody>
+  <ConditionalLoadingSpinner @condition={{loading}}>
     <div class="control-group">
-      {{user-status-picker emoji=emoji description=description}}
+      <UserStatusPicker @emoji={{emoji}} @description={{description}} />
     </div>
     <div class="modal-footer control-group">
-      {{d-button
-        label="user_status.save"
-        class="btn-primary"
-        disabled=(not statusIsSet)
-        action=(action "saveAndClose")}}
-      {{d-modal-cancel close=(action "closeModal")}}
+      <DButton @label="user_status.save" @class="btn-primary" @disabled={{not statusIsSet}} @action={{action "saveAndClose"}} />
+      <DModalCancel @close={{action "closeModal"}} />
       {{#if showDeleteButton}}
-        {{d-button
-          icon="trash-alt"
-          class="delete-status btn-danger"
-          action=(action "delete")}}
+        <DButton @icon="trash-alt" @class="delete-status btn-danger" @action={{action "delete"}} />
       {{/if}}
     </div>
-  {{/conditional-loading-spinner}}
-{{/d-modal-body}}
+  </ConditionalLoadingSpinner>
+</DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/navigation/categories.hbs b/app/assets/javascripts/discourse/app/templates/navigation/categories.hbs
index e3953ae91cf..16cbed57efc 100644
--- a/app/assets/javascripts/discourse/app/templates/navigation/categories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/navigation/categories.hbs
@@ -1,10 +1,3 @@
-{{#d-section bodyClass="navigation-categories" class="navigation-container"}}
-  {{d-navigation
-    filterType="categories"
-    showCategoryAdmin=showCategoryAdmin
-    createCategory=(route-action "createCategory")
-    reorderCategories=(route-action "reorderCategories")
-    canCreateTopic=canCreateTopic
-    hasDraft=currentUser.has_topic_draft
-    createTopic=(route-action "createTopic")}}
-{{/d-section}}
+<DSection @bodyClass="navigation-categories" @class="navigation-container">
+  <DNavigation @filterType="categories" @showCategoryAdmin={{showCategoryAdmin}} @createCategory={{route-action "createCategory"}} @reorderCategories={{route-action "reorderCategories"}} @canCreateTopic={{canCreateTopic}} @hasDraft={{currentUser.has_topic_draft}} @createTopic={{route-action "createTopic"}} />
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/navigation/category.hbs b/app/assets/javascripts/discourse/app/templates/navigation/category.hbs
index de4d5d2d4b4..945a54cf87f 100644
--- a/app/assets/javascripts/discourse/app/templates/navigation/category.hbs
+++ b/app/assets/javascripts/discourse/app/templates/navigation/category.hbs
@@ -1,37 +1,19 @@
-{{add-category-tag-classes category=category}}
+<AddCategoryTagClasses @category={{category}} />
 
 <section class="category-heading">
   {{#if category.uploaded_logo.url}}
-    {{cdn-img
-      src=category.uploaded_logo.url
-      class="category-logo"
-      width=category.uploaded_logo.width
-      height=category.uploaded_logo.height
-      alt=""
-    }}
+    <CdnImg @src={{category.uploaded_logo.url}} @class="category-logo" @width={{category.uploaded_logo.width}} @height={{category.uploaded_logo.height}} @alt="" />
 
     {{#if category.description}}
       <p>{{dir-span category.description htmlSafe="true"}}</p>
     {{/if}}
   {{/if}}
 
-  {{plugin-outlet name="category-heading" tagName="span" connectorTagName="div" args=(hash category=category)}}
+  <PluginOutlet @name="category-heading" @tagName="span" @connectorTagName="div" @args={{hash category=category}} />
 </section>
 
-{{#d-section class="navigation-container category-navigation"}}
-  {{d-navigation
-    category=category
-    filterMode=filterMode
-    noSubcategories=noSubcategories
-    canCreateTopic=canCreateTopic
-    createTopic=(route-action "createTopic")
-    createTopicDisabled=cannotCreateTopicOnCategory
-    hasDraft=currentUser.has_topic_draft
-    editCategory=(route-action "editCategory" category)
-  }}
+<DSection @class="navigation-container category-navigation">
+  <DNavigation @category={{category}} @filterMode={{filterMode}} @noSubcategories={{noSubcategories}} @canCreateTopic={{canCreateTopic}} @createTopic={{route-action "createTopic"}} @createTopicDisabled={{cannotCreateTopicOnCategory}} @hasDraft={{currentUser.has_topic_draft}} @editCategory={{route-action "editCategory" category}} />
 
-  {{plugin-outlet
-    name="category-navigation" connectorTagName="div"
-    args=(hash category=category)
-  }}
-{{/d-section}}
+  <PluginOutlet @name="category-navigation" @connectorTagName="div" @args={{hash category=category}} />
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/navigation/default.hbs b/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
index 27fb2beb5a6..fc74d69ee40 100644
--- a/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
+++ b/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
@@ -1,8 +1,3 @@
-{{#d-section bodyClass="navigation-topics" class="navigation-container" scrollTop=false}}
-  {{d-navigation
-    filterMode=filterMode
-    canCreateTopic=canCreateTopic
-    hasDraft=currentUser.has_topic_draft
-    createTopic=(route-action "createTopic")
-    skipCategoriesNavItem=skipCategoriesNavItem}}
-{{/d-section}}
+<DSection @bodyClass="navigation-topics" @class="navigation-container" @scrollTop={{false}}>
+  <DNavigation @filterMode={{filterMode}} @canCreateTopic={{canCreateTopic}} @hasDraft={{currentUser.has_topic_draft}} @createTopic={{route-action "createTopic"}} @skipCategoriesNavItem={{skipCategoriesNavItem}} />
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/password-reset.hbs b/app/assets/javascripts/discourse/app/templates/password-reset.hbs
index 656f0ae7a58..5c3faaa94e1 100644
--- a/app/assets/javascripts/discourse/app/templates/password-reset.hbs
+++ b/app/assets/javascripts/discourse/app/templates/password-reset.hbs
@@ -22,33 +22,22 @@
             <br>
           {{/if}}
           {{#if securityKeyRequired }}
-            {{#security-key-form
-              allowedCredentialIds=model.allowed_credential_ids
-              challenge=model.security_key_challenge
-              showSecurityKey=model.security_key_required
-              showSecondFactor=false
-              secondFactorMethod=secondFactorMethod
-              otherMethodAllowed=otherMethodAllowed
-              action=(action "authenticateSecurityKey")}}
-            {{/security-key-form}}
+            <SecurityKeyForm @allowedCredentialIds={{model.allowed_credential_ids}} @challenge={{model.security_key_challenge}} @showSecurityKey={{model.security_key_required}} @showSecondFactor={{false}} @secondFactorMethod={{secondFactorMethod}} @otherMethodAllowed={{otherMethodAllowed}} @action={{action "authenticateSecurityKey"}}>
+            </SecurityKeyForm>
           {{else}}
-            {{#second-factor-form
-              secondFactorMethod=secondFactorMethod
-              secondFactorToken=secondFactorToken
-              backupEnabled=backupEnabled
-              isLogin=false}}
-              {{second-factor-input value=secondFactorToken inputId="second-factor" secondFactorMethod=secondFactorMethod backupEnabled=backupEnabled}}
-            {{/second-factor-form}}
+            <SecondFactorForm @secondFactorMethod={{secondFactorMethod}} @secondFactorToken={{secondFactorToken}} @backupEnabled={{backupEnabled}} @isLogin={{false}}>
+              <SecondFactorInput @value={{secondFactorToken}} @inputId="second-factor" @secondFactorMethod={{secondFactorMethod}} @backupEnabled={{backupEnabled}} />
+            </SecondFactorForm>
           {{/if}}
           {{#unless securityKeyRequired }}
-            {{d-button action=(action "submit") class="btn-primary" label="submit" type="submit"}}
+            <DButton @action={{action "submit"}} @class="btn-primary" @label="submit" @type="submit" />
           {{/unless}}
         {{else}}
           <h2>{{i18n "user.change_password.choose"}}</h2>
 
           <div class="input">
-            {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn autofocus="autofocus"}}
-            &nbsp;{{input-tip validation=passwordValidation}}
+            <PasswordField @value={{accountPassword}} @type="password" @id="new-account-password" @capsLockOn={{capsLockOn}} @autofocus="autofocus" />
+            &nbsp;<InputTip @validation={{passwordValidation}} />
           </div>
 
           <div class="instructions">
@@ -57,7 +46,7 @@
             </div>
           </div>
 
-          {{d-button action=(action "submit") class="btn-primary" label="user.change_password.set_password" type="submit"}}
+          <DButton @action={{action "submit"}} @class="btn-primary" @label="user.change_password.set_password" @type="submit" />
         {{/if}}
       </form>
     {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences-email.hbs b/app/assets/javascripts/discourse/app/templates/preferences-email.hbs
index 002b3906dd8..439f04f26f9 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences-email.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences-email.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-preferences" tagName=""}}
+<DSection @pageClass="user-preferences" @tagName="">
   <section class="user-preferences solo-preference">
     <form class="form-horizontal">
 
@@ -28,8 +28,8 @@
         <div class="control-group">
           <label class="control-label">{{i18n "user.email.title"}}</label>
           <div class="controls">
-            {{text-field value=newEmail id="change-email" classNames="input-xxlarge" autofocus="autofocus"}}
-            {{input-tip validation=emailValidation}}
+            <TextField @value={{newEmail}} @id="change-email" @classNames="input-xxlarge" @autofocus="autofocus" />
+            <InputTip @validation={{emailValidation}} />
           </div>
           <div class="controls">
             <div class="instructions">
@@ -44,17 +44,11 @@
 
         <div class="control-group">
           <div class="controls">
-            {{d-button
-              class="btn-primary"
-              action=(action "saveEmail")
-              type="submit"
-              disabled=saveDisabled
-              translatedLabel=saveButtonText
-            }}
+            <DButton @class="btn-primary" @action={{action "saveEmail"}} @type="submit" @disabled={{saveDisabled}} @translatedLabel={{saveButtonText}} />
           </div>
         </div>
       {{/if}}
 
     </form>
   </section>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences-second-factor.hbs b/app/assets/javascripts/discourse/app/templates/preferences-second-factor.hbs
index 5adb85f9566..2683bc42071 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences-second-factor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences-second-factor.hbs
@@ -1,6 +1,6 @@
-{{#d-section pageClass="user-preferences" tagName=""}}
+<DSection @pageClass="user-preferences" @tagName="">
   <section class="user-preferences solo-preference second-factor">
-    {{#conditional-loading-spinner condition=loading}}
+    <ConditionalLoadingSpinner @condition={{loading}}>
       <form class="form-horizontal">
         {{#if showEnforcedNotice}}
           <div class="control-group">
@@ -30,11 +30,7 @@
           <div class="control-group totp">
             <div class="controls">
               <h2>{{i18n "user.second_factor.totp.title"}}</h2>
-              {{d-button action=(action "createTotp")
-                class="btn-primary new-totp"
-                icon="plus"
-                disabled=loading
-                label="user.second_factor.totp.add"}}
+              <DButton @action={{action "createTotp"}} @class="btn-primary new-totp" @icon="plus" @disabled={{loading}} @label="user.second_factor.totp.add" />
               {{#each totps as |totp|}}
                 <div class="second-factor-item">
                   {{#if totp.name}}
@@ -44,13 +40,7 @@
                   {{/if}}
 
                   {{#if isCurrentUser}}
-                    {{d-button action=(action "editSecondFactor" totp)
-                      class="btn-default btn-small btn-icon pad-left no-text edit"
-                      disabled=loading
-                      icon="pencil-alt"
-                      aria-label="user.second_factor.edit"
-                      title="user.second_factor.edit"
-                    }}
+                    <DButton @action={{action "editSecondFactor" totp}} @class="btn-default btn-small btn-icon pad-left no-text edit" @disabled={{loading}} @icon="pencil-alt" @aria-label="user.second_factor.edit" @title="user.second_factor.edit" />
                   {{/if}}
                 </div>
               {{/each}}
@@ -60,11 +50,7 @@
           <div class="control-group security-key">
             <div class="controls">
               <h2>{{i18n "user.second_factor.security_key.title"}}</h2>
-              {{d-button action=(action "createSecurityKey")
-                class="btn-primary new-security-key"
-                icon="plus"
-                disabled=loading
-                label="user.second_factor.security_key.add"}}
+              <DButton @action={{action "createSecurityKey"}} @class="btn-primary new-security-key" @icon="plus" @disabled={{loading}} @label="user.second_factor.security_key.add" />
               {{#each security_keys as |security_key|}}
                 <div class="second-factor-item">
                   {{#if security_key.name}}
@@ -74,13 +60,7 @@
                   {{/if}}
 
                   {{#if isCurrentUser}}
-                    {{d-button action=(action "editSecurityKey" security_key)
-                      class="btn-default btn-small btn-icon pad-left no-text edit"
-                      disabled=loading
-                      icon="pencil-alt"
-                      aria-label="user.second_factor.edit"
-                      title="user.second_factor.edit"
-                    }}
+                    <DButton @action={{action "editSecurityKey" security_key}} @class="btn-default btn-small btn-icon pad-left no-text edit" @disabled={{loading}} @icon="pencil-alt" @aria-label="user.second_factor.edit" @title="user.second_factor.edit" />
                   {{/if}}
                 </div>
               {{/each}}
@@ -98,13 +78,7 @@
                 {{/if}}
 
                 {{#if isCurrentUser}}
-                  {{d-button action=(action "editSecondFactorBackup")
-                    class="btn-default btn-small btn-icon pad-left no-text edit edit-2fa-backup"
-                    disabled=loading
-                    icon="pencil-alt"
-                    aria-label="user.second_factor.edit"
-                    title="user.second_factor.edit"
-                  }}
+                  <DButton @action={{action "editSecondFactorBackup"}} @class="btn-default btn-small btn-icon pad-left no-text edit edit-2fa-backup" @disabled={{loading}} @icon="pencil-alt" @aria-label="user.second_factor.edit" @title="user.second_factor.edit" />
                 {{/if}}
               {{else}}
                 {{i18n "user.second_factor_backup.enable_prerequisites"}}
@@ -116,12 +90,7 @@
             {{#unless showEnforcedNotice}}
               <div class="control-group">
                 <div class="controls">
-                  {{d-button
-                    class="btn-danger"
-                    icon="ban"
-                    action=(action "disableAllSecondFactors")
-                    disabled=loading
-                    label="user.second_factor.disable_all"}}
+                  <DButton @class="btn-danger" @icon="ban" @action={{action "disableAllSecondFactors"}} @disabled={{loading}} @label="user.second_factor.disable_all" />
                 </div>
               </div>
             {{/unless}}
@@ -132,11 +101,7 @@
 
             <div class="controls">
               <div>
-                {{text-field value=password
-                  id="password"
-                  type="password"
-                  classNames="input-large"
-                  autofocus="autofocus"}}
+                <TextField @value={{password}} @id="password" @type="password" @classNames="input-large" @autofocus="autofocus" />
               </div>
               <div class="instructions">
                 {{i18n "user.second_factor.confirm_password_description"}}
@@ -146,15 +111,10 @@
 
           <div class="control-group">
             <div class="controls">
-              {{d-button
-                class="btn-primary"
-                type="submit"
-                action=(action "confirmPassword")
-                disabled=loading
-                label="continue"}}
+              <DButton @class="btn-primary" @type="submit" @action={{action "confirmPassword"}} @disabled={{loading}} @label="continue" />
 
               {{#unless showEnforcedNotice}}
-                {{cancel-link route="preferences.account" args=model.username}}
+                <CancelLink @route="preferences.account" @args={{model.username}} />
               {{/unless}}
             </div>
             <div class="controls" style="margin-top: 5px">
@@ -166,6 +126,6 @@
           </div>
         {{/if}}
       </form>
-    {{/conditional-loading-spinner}}
+    </ConditionalLoadingSpinner>
   </section>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences-username.hbs b/app/assets/javascripts/discourse/app/templates/preferences-username.hbs
index 6f0f758028f..0df5b239a34 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences-username.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences-username.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-preferences" tagName=""}}
+<DSection @pageClass="user-preferences" @tagName="">
   <section class="user-preferences  solo-preference">
     <form class="form-horizontal">
 
@@ -11,7 +11,7 @@
       <div class="control-group">
         <label for="change_username" class="control-label">{{i18n "user.username.title"}}</label>
         <div class="controls">
-          {{text-field value=newUsername id="change_username" classNames="input-xxlarge" maxlength=maxLength autofocus="autofocus" insert-newline="changeUsername"}}
+          <TextField @value={{newUsername}} @id="change_username" @classNames="input-xxlarge" @maxlength={{maxLength}} @autofocus="autofocus" @insert-newline="changeUsername" />
         </div>
         <div class="instructions controls">
           <p>
@@ -25,17 +25,11 @@
 
       <div class="control-group">
         <div class="controls">
-          {{d-button
-            class="btn-primary"
-            action=(action "changeUsername")
-            type="submit"
-            disabled=saveDisabled
-            translatedLabel=saveButtonText
-          }}
+          <DButton @class="btn-primary" @action={{action "changeUsername"}} @type="submit" @disabled={{saveDisabled}} @translatedLabel={{saveButtonText}} />
           {{#if saved}}{{i18n "saved"}}{{/if}}
         </div>
       </div>
 
     </form>
   </section>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences.hbs b/app/assets/javascripts/discourse/app/templates/preferences.hbs
index 0d4c6446578..2f700b313bb 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs
@@ -1,53 +1,53 @@
-{{#d-section pageClass="user-preferences" class="user-secondary-navigation"}}
-  {{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
+<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
+  <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
     <li class="nav-account">
-      {{#link-to "preferences.account"}}
+      <LinkTo @route="preferences.account">
         {{i18n "user.preferences_nav.account"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li class="nav-security">
-      {{#link-to "preferences.security"}}
+      <LinkTo @route="preferences.security">
         {{i18n "user.preferences_nav.security"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li class="nav-profile">
-      {{#link-to "preferences.profile"}}
+      <LinkTo @route="preferences.profile">
         {{i18n "user.preferences_nav.profile"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li class="nav-emails">
-      {{#link-to "preferences.emails"}}
+      <LinkTo @route="preferences.emails">
         {{i18n "user.preferences_nav.emails"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li class="nav-notifications">
-      {{#link-to "preferences.notifications"}}
+      <LinkTo @route="preferences.notifications">
         {{i18n "user.preferences_nav.notifications"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     {{#if model.can_change_tracking_preferences}}
       <li class="indent nav-categories">
-        {{#link-to "preferences.categories"}}
+        <LinkTo @route="preferences.categories">
           {{i18n "user.preferences_nav.categories"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
     <li class="indent nav-users">
-      {{#link-to "preferences.users"}}
+      <LinkTo @route="preferences.users">
         {{i18n "user.preferences_nav.users"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     {{#if (and model.can_change_tracking_preferences siteSettings.tagging_enabled)}}
       <li class="indent nav-tags">
-        {{#link-to "preferences.tags"}}
+        <LinkTo @route="preferences.tags">
           {{i18n "user.preferences_nav.tags"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
     <li class="nav-interface">
-      {{#link-to "preferences.interface"}}
+      <LinkTo @route="preferences.interface">
         {{i18n "user.preferences_nav.interface"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     {{#if this.currentUser.experimental_sidebar_enabled}}
       <li class="indent nav-sidebar">
@@ -57,21 +57,21 @@
       </li>
     {{/if}}
 
-    {{plugin-outlet name="user-preferences-nav-under-interface" tagName="span" connectorTagName="div" args=(hash model=model)}}
+    <PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
     {{#if model.userApiKeys}}
       <li class="nav-apps">
-        {{#link-to "preferences.apps"}}
+        <LinkTo @route="preferences.apps">
           {{i18n "user.preferences_nav.apps"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
-    {{plugin-outlet name="user-preferences-nav" tagName="span" connectorTagName="li" args=(hash model=model)}}
-  {{/mobile-nav}}
-{{/d-section}}
+    <PluginOutlet @name="user-preferences-nav" @tagName="span" @connectorTagName="li" @args={{hash model=model}} />
+  </MobileNav>
+</DSection>
 
 <section class="user-content user-preferences">
-  {{plugin-outlet name="above-user-preferences" tagName="span" connectorTagName="div" args=(hash model=model)}}
+  <PluginOutlet @name="above-user-preferences" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
   <form class="form-vertical">
     {{outlet}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/account.hbs b/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
index c6671525f11..2642e11e28b 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/account.hbs
@@ -3,9 +3,9 @@
   <div class="controls">
     <span class="static">{{model.username}}</span>
     {{#if model.can_edit_username}}
-      {{#link-to "preferences.username" name=(i18n "user.username.edit") class="btn btn-default btn-small btn-icon pad-left no-text"}}
+      <LinkTo @route="preferences.username" @name={{i18n "user.username.edit"}} class="btn btn-default btn-small btn-icon pad-left no-text">
         {{d-icon "pencil-alt"}}
-      {{/link-to}}
+      </LinkTo>
     {{/if}}
   </div>
   {{#if siteSettings.enable_mentions}}
@@ -21,7 +21,7 @@
     <div class="controls">
       {{! we want the "huge" version even though we're downsizing it in CSS }}
       {{bound-avatar model "huge"}}
-      {{d-button action=(route-action "showAvatarSelector") actionParam=model class="btn-default pad-left" icon="pencil-alt"}}
+      <DButton @action={{route-action "showAvatarSelector"}} @actionParam={{model}} @class="btn-default pad-left" @icon="pencil-alt" />
     </div>
   </div>
 {{/unless}}
@@ -35,9 +35,7 @@
           {{#each emails as |email|}}
             <div class="row email">
               {{#if model.can_edit_email}}
-                {{email-dropdown email=email
-                                setPrimaryEmail=(action "setPrimaryEmail")
-                                destroyEmail=(action "destroyEmail")}}
+                <EmailDropdown @email={{email}} @setPrimaryEmail={{action "setPrimaryEmail"}} @destroyEmail={{action "destroyEmail"}} />
               {{/if}}
 
               <div class="email-first">{{email.email}}</div>
@@ -64,15 +62,15 @@
         </div>
 
         {{#if model.can_edit_email}}
-          {{#link-to "preferences.email" (query-params new=1) class="pull-right"}}
+          <LinkTo @route="preferences.email" @query={{hash new=1}} class="pull-right">
             {{d-icon "plus"}} {{i18n "user.email.add_email"}}
-          {{/link-to}}
+          </LinkTo>
         {{/if}}
       {{else}}
         <div class="controls">
           <span class="static">{{model.email}}</span>
           {{#if model.can_edit_email}}
-            {{#link-to "preferences.email" class="btn btn-default btn-small btn-icon pad-left no-text"}}{{d-icon "pencil-alt"}}{{/link-to}}
+            <LinkTo @route="preferences.email" class="btn btn-default btn-small btn-icon pad-left no-text">{{d-icon "pencil-alt"}}</LinkTo>
           {{/if}}
         </div>
       {{/if}}
@@ -85,7 +83,7 @@
       </div>
     {{else}}
       <div class="controls">
-        {{d-button action=(route-action "checkEmail") class="btn-default" actionParam=model title="admin.users.check_email.title" icon="far-envelope" label="admin.users.check_email.text"}}
+        <DButton @action={{route-action "checkEmail"}} @class="btn-default" @actionParam={{model}} @title="admin.users.check_email.title" @icon="far-envelope" @label="admin.users.check_email.text" />
       </div>
     {{/if}}
   </div>
@@ -104,7 +102,7 @@
                 <td>{{authProvider.account.description}}</td>
                 <td>
                   {{#if authProvider.method.can_revoke}}
-                    {{d-button action=(action "revokeAccount") actionParam=authProvider.account title="user.associated_accounts.revoke" class="btn-danger no-text" icon="trash-alt" disabled=(get revoking authProvider.method.name) }}
+                    <DButton @action={{action "revokeAccount"}} @actionParam={{authProvider.account}} @title="user.associated_accounts.revoke" @class="btn-danger no-text" @icon="trash-alt" @disabled={{get revoking authProvider.method.name}} />
                   {{/if}}
                 </td>
               </tr>
@@ -113,7 +111,7 @@
                 <td>{{authProvider.method.prettyName}}</td>
                 <td colspan="2">
                   {{#if authProvider.method.can_connect}}
-                    {{d-button action=(action "connectAccount") actionParam=authProvider.method label="user.associated_accounts.connect" class="btn-default" icon="plug" disabled=disableConnectButtons}}
+                    <DButton @action={{action "connectAccount"}} @actionParam={{authProvider.method}} @label="user.associated_accounts.connect" @class="btn-default" @icon="plug" @disabled={{disableConnectButtons}} />
                   {{else}}
                     {{i18n "user.associated_accounts.not_connected"}}
                   {{/if}}
@@ -125,7 +123,7 @@
       </table>
     {{else}}
       <div class="controls">
-        {{d-button action=(route-action "checkEmail") actionParam=model title="admin.users.check_email.title" icon="far-envelope" label="admin.users.check_email.text"}}
+        <DButton @action={{route-action "checkEmail"}} @actionParam={{model}} @title="admin.users.check_email.title" @icon="far-envelope" @label="admin.users.check_email.text" />
       </div>
     {{/if}}
   </div>
@@ -136,7 +134,7 @@
     <label class="control-label">{{i18n "user.name.title"}}</label>
     <div class="controls">
       {{#if model.can_edit_name}}
-        {{text-field value=newNameInput classNames="input-xxlarge" maxlength="255"}}
+        <TextField @value={{newNameInput}} @classNames="input-xxlarge" @maxlength="255" />
       {{else}}
         <span class="static">{{model.name}}</span>
       {{/if}}
@@ -151,14 +149,9 @@
   <div class="control-group pref-title">
     <label class="control-label">{{i18n "user.title.title"}}</label>
     <div class="controls">
-      {{combo-box
-        value=newTitleInput
-        content=model.availableTitles
-        onChange=(action (mut newTitleInput))
-        options=(hash
+      <ComboBox @value={{newTitleInput}} @content={{model.availableTitles}} @onChange={{action (mut newTitleInput)}} @options={{hash
           none="user.title.none"
-        )
-      }}
+        }} />
     </div>
     <div class="instructions">
       {{i18n "user.title.instructions"}}
@@ -170,14 +163,9 @@
   <div class="control-group pref-flair">
     <label class="control-label">{{i18n "user.flair.title"}}</label>
     <div class="controls">
-      {{flair-chooser
-        value=newFlairGroupId
-        content=model.availableFlairs
-        onChange=(action (mut newFlairGroupId))
-        options=(hash
+      <FlairChooser @value={{newFlairGroupId}} @content={{model.availableFlairs}} @onChange={{action (mut newFlairGroupId)}} @options={{hash
           none="user.flair.none"
-        )
-      }}
+        }} />
     </div>
     <div class="instructions">
       {{i18n "user.flair.instructions"}}
@@ -189,32 +177,28 @@
   <div class="control-group pref-primary-group">
     <label class="control-label">{{i18n "user.primary_group.title"}}</label>
     <div class="controls">
-      {{combo-box
-        value=newPrimaryGroupInput
-        content=model.filteredGroups
-        options=(hash
+      <ComboBox @value={{newPrimaryGroupInput}} @content={{model.filteredGroups}} @options={{hash
           none="user.primary_group.none"
-        )
-      }}
+        }} />
     </div>
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-preferences-account" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-account" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
 {{#if canSaveUser}}
-  {{save-controls model=model action=(action "save") saved=saved}}
+  <SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
 {{/if}}
 
 {{#if model.canDeleteAccount}}
   <div class="control-group delete-account">
     <br>
     <div class="controls">
-      {{d-button action=(action "delete") disabled=deleteDisabled class="btn-danger" icon="far-trash-alt" label="user.delete_account"}}
+      <DButton @action={{action "delete"}} @disabled={{deleteDisabled}} @class="btn-danger" @icon="far-trash-alt" @label="user.delete_account" />
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/apps.hbs b/app/assets/javascripts/discourse/app/templates/preferences/apps.hbs
index c29e13c56b3..6ab924598c1 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/apps.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/apps.hbs
@@ -6,9 +6,9 @@
         <div>
           <span>{{key.application_name}}</span>
           {{#if key.revoked}}
-            {{d-button action=(route-action "undoRevokeApiKey") actionParam=key class="btn" label="user.undo_revoke_access"}}
+            <DButton @action={{route-action "undoRevokeApiKey"}} @actionParam={{key}} @class="btn" @label="user.undo_revoke_access" />
           {{else}}
-            {{d-button action=(route-action "revokeApiKey") actionParam=key class="btn" label="user.revoke_access"}}
+            <DButton @action={{route-action "revokeApiKey"}} @actionParam={{key}} @class="btn" @label="user.revoke_access" />
           {{/if}}
           <p>
             <ul>
@@ -25,4 +25,4 @@
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-preferences-apps" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-preferences-apps" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/categories.hbs b/app/assets/javascripts/discourse/app/templates/preferences/categories.hbs
index 78e9926555d..855a0b2e8a9 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/categories.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/categories.hbs
@@ -6,11 +6,7 @@
     {{#if canSee}}
       <a class="show-tracking" href={{model.watchingTopicsPath}}>{{i18n "user.tracked_topics_link"}}</a>
     {{/if}}
-    {{category-selector
-      categories=model.watchedCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.watchedCategories))
-    }}
+    <CategorySelector @categories={{model.watchedCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.watchedCategories)}} />
   </div>
   <div class="instructions">{{i18n "user.watched_categories_instructions"}}</div>
 
@@ -19,32 +15,20 @@
     {{#if canSee}}
       <a class="show-tracking" href={{model.trackingTopicsPath}}>{{i18n "user.tracked_topics_link"}}</a>
     {{/if}}
-    {{category-selector
-      categories=model.trackedCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.trackedCategories))
-    }}
+    <CategorySelector @categories={{model.trackedCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.trackedCategories)}} />
   </div>
   <div class="instructions">{{i18n "user.tracked_categories_instructions"}}</div>
 
   <div class="controls tracking-controls">
     <label>{{d-icon "d-watching-first"}} {{i18n "user.watched_first_post_categories"}}</label>
-    {{category-selector
-      categories=model.watchedFirstPostCategories
-      blockedCategories=selectedCategories
-      onChange=(action (mut model.watchedFirstPostCategories))
-    }}
+    <CategorySelector @categories={{model.watchedFirstPostCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.watchedFirstPostCategories)}} />
   </div>
   <div class="instructions">{{i18n "user.watched_first_post_categories_instructions"}}</div>
 
   {{#if siteSettings.mute_all_categories_by_default}}
     <div class="controls tracking-controls">
       <label>{{d-icon "d-regular"}} {{i18n "user.regular_categories"}}</label>
-      {{category-selector
-        categories=model.regularCategories
-        blockedCategories=selectedCategories
-        onChange=(action (mut model.regularCategories))
-      }}
+      <CategorySelector @categories={{model.regularCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.regularCategories)}} />
     </div>
     <div class="instructions">{{i18n "user.regular_categories_instructions"}}</div>
   {{else}}
@@ -53,24 +37,20 @@
       {{#if canSee}}
         <a class="show-tracking" href={{model.mutedTopicsPath}}>{{i18n "user.tracked_topics_link"}}</a>
       {{/if}}
-      {{category-selector
-        categories=model.mutedCategories
-        blockedCategories=selectedCategories
-        onChange=(action (mut model.mutedCategories))
-      }}
+      <CategorySelector @categories={{model.mutedCategories}} @blockedCategories={{selectedCategories}} @onChange={{action (mut model.mutedCategories)}} />
     </div>
     <div class="instructions">{{i18n (if hideMutedTags "user.muted_categories_instructions" "user.muted_categories_instructions_dont_hide")}}</div>
   {{/if}}
 </div>
 
-{{plugin-outlet name="user-preferences-categories" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-categories" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
 {{#if canSave}}
-  {{save-controls model=model action=(action "save") saved=saved}}
+  <SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
 {{else}}
   {{i18n "user.no_category_access"}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs b/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
index 0d7f54528a7..0d7bcb6d901 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/emails.hbs
@@ -10,13 +10,7 @@
 
   <div class="controls controls-dropdown">
     <label for="user-email-messages-level">{{i18n "user.email_messages_level"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=emailLevelOptions
-      value=model.user_option.email_messages_level
-      id="user-email-messages-level"
-      onChange=(action (mut model.user_option.email_messages_level))
-    }}
+    <ComboBox @valueProperty="value" @content={{emailLevelOptions}} @value={{model.user_option.email_messages_level}} @id="user-email-messages-level" @onChange={{action (mut model.user_option.email_messages_level)}} />
     {{#if emailMessagesLevelAway}}
       <div class="instructions">{{emailFrequencyInstructions}}</div>
     {{/if}}
@@ -24,13 +18,7 @@
 
   <div class="controls controls-dropdown">
     <label for="user-email-level">{{i18n "user.email_level.title"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=emailLevelOptions
-      value=model.user_option.email_level
-      id="user-email-level"
-      onChange=(action (mut model.user_option.email_level))
-    }}
+    <ComboBox @valueProperty="value" @content={{emailLevelOptions}} @value={{model.user_option.email_level}} @id="user-email-level" @onChange={{action (mut model.user_option.email_level)}} />
     {{#if emailLevelAway}}
       <div class="instructions">{{emailFrequencyInstructions}}</div>
     {{/if}}
@@ -38,35 +26,24 @@
 
   <div class="controls controls-dropdown">
     <label>{{i18n "user.email_previous_replies.title"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=previousRepliesOptions
-      value=model.user_option.email_previous_replies
-      onChange=(action (mut model.user_option.email_previous_replies))
-    }}
+    <ComboBox @valueProperty="value" @content={{previousRepliesOptions}} @value={{model.user_option.email_previous_replies}} @onChange={{action (mut model.user_option.email_previous_replies)}} />
   </div>
-  {{preference-checkbox labelKey="user.email_in_reply_to" checked=model.user_option.email_in_reply_to}}
+  <PreferenceCheckbox @labelKey="user.email_in_reply_to" @checked={{model.user_option.email_in_reply_to}} />
 
-  {{plugin-outlet name="user-preferences-emails-pref-email-settings" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+  <PluginOutlet @name="user-preferences-emails-pref-email-settings" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 </div>
 
 {{#unless siteSettings.disable_digest_emails}}
   <div class="control-group pref-activity-summary">
     <label class="control-label">{{i18n "user.email_activity_summary"}}</label>
-    {{preference-checkbox labelKey="user.email_digests.title" disabled=model.user_option.mailing_list_mode checked=model.user_option.email_digests}}
+    <PreferenceCheckbox @labelKey="user.email_digests.title" @disabled={{model.user_option.mailing_list_mode}} @checked={{model.user_option.email_digests}} />
     {{#if model.user_option.email_digests}}
       <div class="controls controls-dropdown">
-        {{combo-box
-          valueProperty="value"
-          content=digestFrequencies
-          value=model.user_option.digest_after_minutes
-          onChange=(action (mut model.user_option.digest_after_minutes))
-          options=(hash
+        <ComboBox @valueProperty="value" @content={{digestFrequencies}} @value={{model.user_option.digest_after_minutes}} @onChange={{action (mut model.user_option.digest_after_minutes)}} @options={{hash
             filterable=true
-          )
-        }}
+          }} />
       </div>
-      {{preference-checkbox labelKey="user.include_tl0_in_digests" disabled=model.user_option.mailing_list_mode checked=model.user_option.include_tl0_in_digests}}
+      <PreferenceCheckbox @labelKey="user.include_tl0_in_digests" @disabled={{model.user_option.mailing_list_mode}} @checked={{model.user_option.include_tl0_in_digests}} />
     {{/if}}
   </div>
 {{/unless}}
@@ -74,25 +51,20 @@
 {{#unless siteSettings.disable_mailing_list_mode}}
   <div class="control-group pref-mailing-list-mode">
     <label class="control-label">{{i18n "user.mailing_list_mode.label"}}</label>
-    {{preference-checkbox labelKey="user.mailing_list_mode.enabled" checked=model.user_option.mailing_list_mode}}
+    <PreferenceCheckbox @labelKey="user.mailing_list_mode.enabled" @checked={{model.user_option.mailing_list_mode}} />
     <div class="instructions">{{html-safe (i18n "user.mailing_list_mode.instructions")}}</div>
     {{#if model.user_option.mailing_list_mode}}
       <div class="controls controls-dropdown">
-        {{combo-box
-          valueProperty="value"
-          content=mailingListModeOptions
-          value=model.user_option.mailing_list_mode_frequency
-          onChange=(action (mut model.user_option.mailing_list_mode_frequency))
-        }}
+        <ComboBox @valueProperty="value" @content={{mailingListModeOptions}} @value={{model.user_option.mailing_list_mode_frequency}} @onChange={{action (mut model.user_option.mailing_list_mode_frequency)}} />
       </div>
     {{/if}}
   </div>
 {{/unless}}
 
-{{plugin-outlet name="user-preferences-emails" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-emails" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-{{save-controls model=model action=(action "save") saved=saved}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
index bbf00ca9008..87b60d295ee 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
@@ -1,20 +1,17 @@
-{{plugin-outlet name="user-preferences-interface-top" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-interface-top" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 {{#if showThemeSelector}}
   <div class="control-group theme">
     <label class="control-label">{{i18n "user.theme"}}</label>
     <div class="controls">
-      {{combo-box
-        content=userSelectableThemes
-        value=themeId
-      }}
+      <ComboBox @content={{userSelectableThemes}} @value={{themeId}} />
     </div>
     {{#if themeIdChanged}}
       <p class="alert alert-success save-theme-alert">{{i18n "user.save_to_change_theme" save_text=(i18n "save") }}</p>
     {{/if}}
     {{#if showThemeSetDefault}}
       <div class="controls">
-        {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}
+        <PreferenceCheckbox @labelKey="user.theme_default_on_all_devices" @checked={{makeThemeDefault}} />
       </div>
     {{/if}}
   </div>
@@ -28,25 +25,17 @@
         <div class="instructions">{{i18n "user.color_schemes.regular" }}</div>
       {{/if}}
       <div class="controls">
-        {{combo-box
-          content=userSelectableColorSchemes
-          value=selectedColorSchemeId
-          onChange=(action "loadColorScheme")
-          options=(hash
+        <ComboBox @content={{userSelectableColorSchemes}} @value={{selectedColorSchemeId}} @onChange={{action "loadColorScheme"}} @options={{hash
             translatedNone=selectedColorSchemeNoneLabel
             autoInsertNoneItem=showColorSchemeNoneItem
-          )
-        }}
+          }} />
       </div>
     </div>
     {{#if showDarkColorSchemeSelector}}
       <div class="control-subgroup dark-color-scheme">
         <div class="instructions">{{i18n "user.color_schemes.dark" }}</div>
         <div class="controls">
-          {{combo-box
-            content=userSelectableDarkColorSchemes
-            value=selectedDarkColorSchemeId
-            onChange=(action "loadDarkColorScheme")}}
+          <ComboBox @content={{userSelectableDarkColorSchemes}} @value={{selectedDarkColorSchemeId}} @onChange={{action "loadDarkColorScheme"}} />
         </div>
       </div>
 
@@ -57,11 +46,11 @@
 
     {{#if previewingColorScheme}}
       {{#if previewingColorScheme}}
-        {{d-button action=(action "undoColorSchemePreview") label="user.color_schemes.undo" icon="undo" class="btn-default btn-small undo-preview"}}
+        <DButton @action={{action "undoColorSchemePreview"}} @label="user.color_schemes.undo" @icon="undo" @class="btn-default btn-small undo-preview" />
       {{/if}}
 
       <div class="controls color-scheme-checkbox">
-        {{preference-checkbox labelKey="user.color_scheme_default_on_all_devices" checked=makeColorSchemeDefault}}
+        <PreferenceCheckbox @labelKey="user.color_scheme_default_on_all_devices" @checked={{makeColorSchemeDefault}} />
       </div>
     {{/if}}
   </fieldset>
@@ -71,7 +60,7 @@
   <div class="control-group dark-mode">
     <label class="control-label">{{i18n "user.dark_mode"}}</label>
     <div class="controls">
-      {{preference-checkbox labelKey="user.dark_mode_enable" checked=enableDarkMode}}
+      <PreferenceCheckbox @labelKey="user.dark_mode_enable" @checked={{enableDarkMode}} />
     </div>
   </div>
 {{/if}}
@@ -79,17 +68,11 @@
 <div class="control-group text-size">
   <label for="text-size-selector" class="control-label">{{i18n "user.text_size.title"}}</label>
   <div class="controls">
-    {{combo-box
-      id="text-size-selector"
-      valueProperty="value"
-      content=textSizes
-      value=textSize
-      onChange=(action "selectTextSize")
-    }}
+    <ComboBox @id="text-size-selector" @valueProperty="value" @content={{textSizes}} @value={{textSize}} @onChange={{action "selectTextSize"}} />
   </div>
   {{#if showTextSetDefault}}
     <div class="controls">
-      {{preference-checkbox labelKey="user.text_size_default_on_all_devices" checked=makeTextSizeDefault}}
+      <PreferenceCheckbox @labelKey="user.text_size_default_on_all_devices" @checked={{makeTextSizeDefault}} />
     </div>
   {{/if}}
 </div>
@@ -98,18 +81,10 @@
   <div class="control-group pref-locale">
     <label for="locale-selector" class="control-label">{{i18n "user.locale.title"}}</label>
     <div class="controls">
-      {{combo-box
-        id="locale-selector"
-        valueProperty="value"
-        langProperty="value"
-        content=availableLocales
-        value=model.locale
-        onChange=(action (mut model.locale))
-        options=(hash
+      <ComboBox @id="locale-selector" @valueProperty="value" @langProperty="value" @content={{availableLocales}} @value={{model.locale}} @onChange={{action (mut model.locale)}} @options={{hash
           filterable=true
           none="user.locale.default"
-        )
-      }}
+        }} />
     </div>
     <div class="instructions">
       {{i18n "user.locale.instructions"}}
@@ -120,46 +95,34 @@
 <div class="control-group home">
   <label for="home-selector" class="control-label">{{i18n "user.home"}}</label>
   <div class="controls">
-    {{combo-box
-      id="home-selector"
-      content=userSelectableHome
-      valueProperty="value"
-      value=homepageId
-      onChange=(action (mut model.user_option.homepage_id))
-    }}
+    <ComboBox @id="home-selector" @content={{userSelectableHome}} @valueProperty="value" @value={{homepageId}} @onChange={{action (mut model.user_option.homepage_id)}} />
   </div>
 </div>
 
 <fieldset class="control-group other">
   <legend class="control-label">{{i18n "user.other_settings"}}</legend>
 
-  {{preference-checkbox labelKey="user.external_links_in_new_tab" checked=model.user_option.external_links_in_new_tab class="pref-external-links"}}
-  {{preference-checkbox labelKey="user.enable_quoting" checked=model.user_option.enable_quoting class="pref-enable-quoting"}}
-  {{preference-checkbox labelKey="user.enable_defer" checked=model.user_option.enable_defer class="pref-defer-undread"}}
+  <PreferenceCheckbox @labelKey="user.external_links_in_new_tab" @checked={{model.user_option.external_links_in_new_tab}} @class="pref-external-links" />
+  <PreferenceCheckbox @labelKey="user.enable_quoting" @checked={{model.user_option.enable_quoting}} @class="pref-enable-quoting" />
+  <PreferenceCheckbox @labelKey="user.enable_defer" @checked={{model.user_option.enable_defer}} @class="pref-defer-unread" />
   {{#if siteSettings.automatically_unpin_topics}}
-    {{preference-checkbox labelKey="user.automatically_unpin_topics" checked=model.user_option.automatically_unpin_topics  class="pref-auto-unpin"}}
+    <PreferenceCheckbox @labelKey="user.automatically_unpin_topics" @checked={{model.user_option.automatically_unpin_topics}} @class="pref-auto-unpin" />
   {{/if}}
   {{#if siteSettings.allow_users_to_hide_profile}}
-    {{preference-checkbox labelKey="user.hide_profile_and_presence" checked=model.user_option.hide_profile_and_presence  class="pref-hide-profile"}}
+    <PreferenceCheckbox @labelKey="user.hide_profile_and_presence" @checked={{model.user_option.hide_profile_and_presence}} @class="pref-hide-profile" />
   {{/if}}
-  {{preference-checkbox labelKey="user.dynamic_favicon" checked=model.user_option.dynamic_favicon  class="pref-dynamic-favicon"}}
+  <PreferenceCheckbox @labelKey="user.dynamic_favicon" @checked={{model.user_option.dynamic_favicon}} @class="pref-dynamic-favicon" />
   <div class="controls controls-dropdown pref-page-title">
     <label for="user-title-count-mode">{{i18n "user.title_count_mode.title"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=titleCountModes
-      value=model.user_option.title_count_mode
-      id="user-title-count-mode"
-      onChange=(action (mut model.user_option.title_count_mode))
-    }}
+    <ComboBox @valueProperty="value" @content={{titleCountModes}} @value={{model.user_option.title_count_mode}} @id="user-title-count-mode" @onChange={{action (mut model.user_option.title_count_mode)}} />
   </div>
-  {{preference-checkbox labelKey="user.skip_new_user_tips.description" checked=model.user_option.skip_new_user_tips  class="pref-new-user-tips"}}
+  <PreferenceCheckbox @labelKey="user.skip_new_user_tips.description" @checked={{model.user_option.skip_new_user_tips}} @class="pref-new-user-tips" />
 </fieldset>
 
-{{plugin-outlet name="user-preferences-interface" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-interface" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-{{save-controls model=model action=(action "save") saved=saved}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs b/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
index e399f2cfdc5..63d7be97ad7 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/notifications.hbs
@@ -3,73 +3,50 @@
 
   <div class="controls controls-dropdown">
     <label>{{i18n "user.new_topic_duration.label"}}</label>
-    {{combo-box
-      class="duration"
-      valueProperty="value"
-      content=considerNewTopicOptions
-      value=model.user_option.new_topic_duration_minutes
-      onChange=(action (mut model.user_option.new_topic_duration_minutes))
-    }}
+    <ComboBox @class="duration" @valueProperty="value" @content={{considerNewTopicOptions}} @value={{model.user_option.new_topic_duration_minutes}} @onChange={{action (mut model.user_option.new_topic_duration_minutes)}} />
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n "user.auto_track_topics"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=autoTrackDurations
-      value=model.user_option.auto_track_topics_after_msecs
-      onChange=(action (mut model.user_option.auto_track_topics_after_msecs))
-    }}
+    <ComboBox @valueProperty="value" @content={{autoTrackDurations}} @value={{model.user_option.auto_track_topics_after_msecs}} @onChange={{action (mut model.user_option.auto_track_topics_after_msecs)}} />
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n "user.notification_level_when_replying"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=notificationLevelsForReplying
-      value=model.user_option.notification_level_when_replying
-      onChange=(action (mut model.user_option.notification_level_when_replying))
-    }}
+    <ComboBox @valueProperty="value" @content={{notificationLevelsForReplying}} @value={{model.user_option.notification_level_when_replying}} @onChange={{action (mut model.user_option.notification_level_when_replying)}} />
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n "user.like_notification_frequency.title"}}</label>
-    {{combo-box
-      valueProperty="value"
-      content=likeNotificationFrequencies
-      value=model.user_option.like_notification_frequency
-      onChange=(action (mut model.user_option.like_notification_frequency))
-    }}
+    <ComboBox @valueProperty="value" @content={{likeNotificationFrequencies}} @value={{model.user_option.like_notification_frequency}} @onChange={{action (mut model.user_option.like_notification_frequency)}} />
   </div>
 </div>
 
 {{#unless capabilities.isIOS}}
   <div class="control-group desktop-notifications">
     <label class="control-label">{{i18n "user.desktop_notifications.label"}}</label>
-    {{desktop-notification-config}}
+    <DesktopNotificationConfig />
     <div class="instructions">{{i18n "user.desktop_notifications.each_browser_note"}}</div>
-    {{plugin-outlet name="user-preferences-desktop-notifications" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+    <PluginOutlet @name="user-preferences-desktop-notifications" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
   </div>
 {{/unless}}
 
-{{user-notification-schedule model=model}}
+<UserNotificationSchedule @model={{model}} />
 
 {{#if siteSettings.enable_personal_messages}}
   <div class="control-group private-messages">
     <label class="control-label">{{i18n "user.private_messages"}}</label>
 
     <div class="controls">
-      {{preference-checkbox
-          labelKey="user.allow_private_messages"
-          checked=model.user_option.allow_private_messages}}
+      <PreferenceCheckbox @labelKey="user.allow_private_messages" @checked={{model.user_option.allow_private_messages}} />
     </div>
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-preferences-notifications" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-notifications" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-{{save-controls model=model action=(action "save") saved=saved}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs b/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
index 656d14cf274..31384e6400c 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/profile.hbs
@@ -2,26 +2,22 @@
   <div class="control-group pref-bio">
     <label class="control-label">{{i18n "user.bio"}}</label>
     <div class="controls bio-composer input-xxlarge">
-      {{d-editor value=model.bio_raw}}
+      <DEditor @value={{model.bio_raw}} />
     </div>
   </div>
 {{/if}}
 
 <div class="control-group pref-timezone">
   <label class="control-label">{{i18n "user.timezone"}}</label>
-  {{timezone-input
-    value=model.user_option.timezone
-    onChange=(action (mut model.user_option.timezone))
-    class="input-xxlarge"
-  }}
-  {{d-button class="btn-default" icon="globe" label="user.use_current_timezone" action=(action "useCurrentTimezone") }}
+  <TimezoneInput @value={{model.user_option.timezone}} @onChange={{action (mut model.user_option.timezone)}} @class="input-xxlarge" />
+  <DButton @class="btn-default" @icon="globe" @label="user.use_current_timezone" @action={{action "useCurrentTimezone"}} />
 </div>
 
 {{#if model.can_change_location}}
   <div class="control-group pref-location">
     <label class="control-label">{{i18n "user.location"}}</label>
     <div class="controls">
-      {{input type="text" value=model.location class="input-xxlarge" id="edit-location"}}
+      <Input @type="text" @value={{model.location}} class="input-xxlarge" @id="edit-location" />
     </div>
   </div>
 {{/if}}
@@ -30,14 +26,14 @@
   <div class="control-group pref-website">
     <label class="control-label">{{i18n "user.website"}}</label>
     <div class="controls">
-      {{input type="text" value=model.website class="input-xxlarge"}}
+      <Input @type="text" @value={{model.website}} class="input-xxlarge" />
     </div>
   </div>
 {{/if}}
 
 {{#each userFields as |uf|}}
   <div class="control-group">
-    {{user-field field=uf.field value=uf.value}}
+    <UserField @field={{uf.field}} @value={{uf.value}} />
   </div>
 {{/each}}
 <div class="clearfix"></div>
@@ -47,11 +43,7 @@
     <div class="control-group pref-profile-bg">
       <label class="control-label">{{i18n "user.change_profile_background.title"}}</label>
       <div class="controls">
-        {{uppy-image-uploader
-          imageUrl=model.profile_background_upload_url
-          type="profile_background"
-          id="profile-background-uploader"
-        }}
+        <UppyImageUploader @imageUrl={{model.profile_background_upload_url}} @type="profile_background" @id="profile-background-uploader" />
       </div>
       <div class="instructions">
         {{i18n "user.change_profile_background.instructions"}}
@@ -62,11 +54,7 @@
     <div class="control-group pref-profile-bg">
       <label class="control-label">{{i18n "user.change_card_background.title"}}</label>
       <div class="controls">
-        {{uppy-image-uploader
-          imageUrl=model.card_background_upload_url
-          type="card_background"
-          id="profile-card-background-uploader"
-        }}
+        <UppyImageUploader @imageUrl={{model.card_background_upload_url}} @type="card_background" @id="profile-card-background-uploader" />
       </div>
       <div class="instructions">
         {{i18n "user.change_card_background.instructions"}}
@@ -80,20 +68,16 @@
     <label class="control-label">{{i18n "user.featured_topic"}}</label>
     {{#if model.featured_topic}}
       <label class="featured-topic-link">
-        {{#link-to "topic" model.featured_topic.slug model.featured_topic.id}}
+        <LinkTo @route="topic" @models={{array model.featured_topic.slug model.featured_topic.id}}>
           {{html-safe (replace-emoji model.featured_topic.fancy_title)}}
-        {{/link-to}}
+        </LinkTo>
       </label>
     {{/if}}
 
     <div>
-      {{d-button action=(action "showFeaturedTopicModal")
-        class="btn-default feature-topic-on-profile-btn"
-        label="user.feature_topic_on_profile.open_search"}}
+      <DButton @action={{action "showFeaturedTopicModal"}} @class="btn-default feature-topic-on-profile-btn" @label="user.feature_topic_on_profile.open_search" />
       {{#if model.featured_topic}}
-        {{d-button action=(action "clearFeaturedTopicFromProfile")
-          class="btn-danger clear-feature-topic-on-profile-btn"
-          label="user.feature_topic_on_profile.clear.title"}}
+        <DButton @action={{action "clearFeaturedTopicFromProfile"}} @class="btn-danger clear-feature-topic-on-profile-btn" @label="user.feature_topic_on_profile.clear.title" />
       {{/if}}
     </div>
     <div class="instructions">
@@ -106,13 +90,7 @@
   <div class="control-group">
     <label class="control-label">{{i18n "download_calendar.default_calendar"}}</label>
     <div>
-      {{combo-box
-        valueProperty="value"
-        content=calendarOptions
-        value=model.user_option.default_calendar
-        id="user-default-calendar"
-        onChange=(action (mut model.user_option.default_calendar))
-      }}
+      <ComboBox @valueProperty="value" @content={{calendarOptions}} @value={{model.user_option.default_calendar}} @id="user-default-calendar" @onChange={{action (mut model.user_option.default_calendar)}} />
     </div>
     <div class="instructions">
       {{i18n "download_calendar.default_calendar_instruction"}}
@@ -120,12 +98,12 @@
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-preferences-profile" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-profile" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
-{{plugin-outlet name="user-custom-preferences" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-preferences" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-{{save-controls model=model action=(action "save") saved=saved}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/security.hbs b/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
index 21a412a9400..af4f412e717 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/security.hbs
@@ -24,9 +24,9 @@
     {{/unless}}
     <div class="controls pref-second-factor">
       {{#if isCurrentUser}}
-        {{#link-to "preferences.second-factor" class="btn btn-default"}}
+        <LinkTo @route="preferences.second-factor" class="btn btn-default">
           {{d-icon "lock"}} <span>{{i18n "user.second_factor.enable"}}</span>
-        {{/link-to}}
+        </LinkTo>
       {{/if}}
     </div>
   </div>
@@ -41,9 +41,7 @@
         <div class="row auth-token">
           <div class="auth-token-icon">{{d-icon token.icon}}</div>
           {{#unless token.is_active}}
-            {{auth-token-dropdown token=token
-                                  revokeAuthToken=(action "revokeAuthToken")
-                                  showToken=(action "showToken")}}
+            <AuthTokenDropdown @token={{token}} @revokeAuthToken={{action "revokeAuthToken"}} @showToken={{action "showToken"}} />
           {{/unless}}
           <div class="auth-token-first">
             {{html-safe (i18n "user.auth_tokens.device_location" device=token.device ip=token.client_ip location=token.location)}}
@@ -73,8 +71,8 @@
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-preferences-security" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+<PluginOutlet @name="user-preferences-security" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
 <br>
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/tags.hbs b/app/assets/javascripts/discourse/app/templates/preferences/tags.hbs
index e22d9c54d94..6d4138f5ac5 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/tags.hbs
@@ -4,45 +4,27 @@
 
     <div class="controls tracking-controls">
       <label>{{d-icon "d-watching" class="icon watching"}} {{i18n "user.watched_tags"}}</label>
-      {{tag-chooser
-        tags=model.watched_tags
-        blockedTags=selectedTags
-        everyTag=true
-        unlimitedTagCount=true
-        options=(hash
+      <TagChooser @tags={{model.watched_tags}} @blockedTags={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
           allowAny=false
-        )
-      }}
+        }} />
     </div>
 
     <div class="instructions">{{i18n "user.watched_tags_instructions"}}</div>
 
     <div class="controls tracking-controls">
       <label>{{d-icon "d-tracking" class="icon tracking"}} {{i18n "user.tracked_tags"}}</label>
-      {{tag-chooser
-        tags=model.tracked_tags
-        blockedTags=selectedTags
-        everyTag=true
-        unlimitedTagCount=true
-        options=(hash
+      <TagChooser @tags={{model.tracked_tags}} @blockedTags={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
           allowAny=false
-        )
-      }}
+        }} />
     </div>
 
     <div class="instructions">{{i18n "user.tracked_tags_instructions"}}</div>
 
     <div class="controls tracking-controls">
       <label>{{d-icon "d-watching-first" class="icon watching-first-post"}} {{i18n "user.watched_first_post_tags"}}</label>
-      {{tag-chooser
-        tags=model.watching_first_post_tags
-        blockedTags=selectedTags
-        everyTag=true
-        unlimitedTagCount=true
-        options=(hash
+      <TagChooser @tags={{model.watching_first_post_tags}} @blockedTags={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
           allowAny=false
-        )
-      }}
+        }} />
     </div>
 
     <div class="instructions">
@@ -51,24 +33,18 @@
 
     <div class="controls tracking-controls">
       <label>{{d-icon "d-muted" class="icon muted"}} {{i18n "user.muted_tags"}}</label>
-      {{tag-chooser
-        tags=model.muted_tags
-        blockedTags=selectedTags
-        everyTag=true
-        unlimitedTagCount=true
-        options=(hash
+      <TagChooser @tags={{model.muted_tags}} @blockedTags={{selectedTags}} @everyTag={{true}} @unlimitedTagCount={{true}} @options={{hash
           allowAny=false
-        )
-      }}
+        }} />
     </div>
     <div class="instructions">{{i18n "user.muted_tags_instructions"}}</div>
   </div>
 
-  {{plugin-outlet name="user-preferences-tags" tagName="span" connectorTagName="div" args=(hash model=model save=(action "save"))}}
+  <PluginOutlet @name="user-preferences-tags" @tagName="span" @connectorTagName="div" @args={{hash model=model save=(action "save")}} />
 
   <br>
 
-  {{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+  <PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-  {{save-controls model=model action=(action "save") saved=saved}}
+  <SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/users.hbs b/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
index f76320ef13d..ed0acfafedd 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/users.hbs
@@ -3,7 +3,7 @@
   <div class="control-group user-ignore">
     <div class="controls tracking-controls user-notifications">
       <label>{{d-icon "far-eye-slash" class="icon"}} {{i18n "user.ignored_users"}}</label>
-      {{ignored-user-list model=model items=model.ignored_usernames saving=saved}}
+      <IgnoredUserList @model={{model}} @items={{model.ignored_usernames}} @saving={{saved}} />
     </div>
   </div>
 {{/if}}
@@ -14,13 +14,9 @@
       {{d-icon "d-muted" class="icon"}}
       <span>{{i18n "user.muted_users"}}</span>
     </label>
-    {{user-chooser
-      value=mutedUsernames
-      onChange=(action "onChangeMutedUsernames")
-      options=(hash
+    <UserChooser @value={{mutedUsernames}} @onChange={{action "onChangeMutedUsernames"}} @options={{hash
         excludeCurrentUser=true
-      )
-    }}
+      }} />
   </div>
   <div class="instructions">{{i18n "user.muted_users_instructions"}}</div>
 </div>
@@ -28,26 +24,19 @@
 {{#if siteSettings.enable_personal_messages}}
   <div class="control-group user-allow-pm">
     <div class="controls">
-      {{preference-checkbox
-          labelKey="user.allow_private_messages_from_specific_users"
-          checked=model.user_option.enable_allowed_pm_users
-          disabled=disableAllowPmUsersSetting}}
+      <PreferenceCheckbox @labelKey="user.allow_private_messages_from_specific_users" @checked={{model.user_option.enable_allowed_pm_users}} @disabled={{disableAllowPmUsersSetting}} />
     </div>
     {{#if allowPmUsersEnabled}}
       <div class="controls tracking-controls">
-        {{user-chooser
-          value=allowedPmUsernames
-          onChange=(action "onChangeAllowedPmUsernames")
-          options=(hash
+        <UserChooser @value={{allowedPmUsernames}} @onChange={{action "onChangeAllowedPmUsernames"}} @options={{hash
             excludeCurrentUser=true
-          )
-        }}
+          }} />
       </div>
       <div class="instructions">{{i18n "user.allowed_pm_users_instructions"}}</div>
     {{/if}}
   </div>
 {{/if}}
 
-{{plugin-outlet name="user-custom-controls" tagName="span" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="user-custom-controls" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-{{#save-controls model=model action=(action "save") saved=saved}}{{/save-controls}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}}></SaveControls>
diff --git a/app/assets/javascripts/discourse/app/templates/review-index.hbs b/app/assets/javascripts/discourse/app/templates/review-index.hbs
index 2a13c4772b8..2ddee875b09 100644
--- a/app/assets/javascripts/discourse/app/templates/review-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-index.hbs
@@ -1,14 +1,14 @@
 <div class="reviewable-container">
   <div class="reviewable-list">
     {{#if reviewables}}
-      {{#load-more selector=".reviewable-item" action=(action "loadMore")}}
+      <LoadMore @selector=".reviewable-item" @action={{action "loadMore"}}>
         <div class="reviewables">
           {{#each reviewables as |r|}}
-            {{reviewable-item reviewable=r remove=(action "remove")}}
+            <ReviewableItem @reviewable={{r}} @remove={{action "remove"}} />
           {{/each}}
         </div>
-      {{/load-more}}
-      {{conditional-loading-spinner condition=reviewables.loadingMore}}
+      </LoadMore>
+      <ConditionalLoadingSpinner @condition={{reviewables.loadingMore}} />
     {{else}}
       <div class="no-review">
         {{i18n "review.none"}}
@@ -19,117 +19,73 @@
   <div class="reviewable-filters">
     <div class="reviewable-filter">
       <label class="filter-label">{{i18n "review.filters.status"}}</label>
-      {{combo-box
-        value=filterStatus
-        content=statuses
-        onChange=(action (mut filterStatus))
-      }}
+      <ComboBox @value={{filterStatus}} @content={{statuses}} @onChange={{action (mut filterStatus)}} />
     </div>
 
     {{#if filtersExpanded}}
 
-      {{plugin-outlet name="above-review-filters" tagName="span" connectorTagName="div" args=(hash model=model additionalFilters=additionalFilters)}}
+      <PluginOutlet @name="above-review-filters" @tagName="span" @connectorTagName="div" @args={{hash model=model additionalFilters=additionalFilters}} />
 
       <div class="reviewable-filter">
         <label class="filter-label">{{i18n "review.filters.type.title"}}</label>
-        {{combo-box
-          value=filterType
-          content=allTypes
-          onChange=(action (mut filterType))
-          options=(hash
+        <ComboBox @value={{filterType}} @content={{allTypes}} @onChange={{action (mut filterType)}} @options={{hash
             none="review.filters.type.all"
-          )
-        }}
+          }} />
       </div>
 
       <div class="reviewable-filter">
         <label class="filter-label">{{i18n "review.filters.priority.title"}}</label>
-        {{combo-box
-          value=filterPriority
-          content=priorities
-          onChange=(action (mut filterPriority))
-        }}
+        <ComboBox @value={{filterPriority}} @content={{priorities}} @onChange={{action (mut filterPriority)}} />
       </div>
 
       <div class="reviewable-filter">
         <label class="filter-label">{{i18n "review.filters.category"}}</label>
-        {{category-chooser
-          value=filterCategoryId
-          onChange=(action (mut filterCategoryId))
-          options=(hash
+        <CategoryChooser @value={{filterCategoryId}} @onChange={{action (mut filterCategoryId)}} @options={{hash
             none="review.filters.all_categories"
-          )
-        }}
+          }} />
       </div>
 
       <div class="reviewable-filter topic-filter">
         {{i18n "review.filtered_reviewed_by"}}
-        {{email-group-user-chooser
-          value=filterReviewedBy
-          onChange=(action "updateFilterReviewedBy")
-          options=(hash
+        <EmailGroupUserChooser @value={{filterReviewedBy}} @onChange={{action "updateFilterReviewedBy"}} @options={{hash
             maximum=1
             excludeCurrentUser=false
             fullWidthWrap=true
-          )
-        }}
+          }} />
       </div>
 
       <div class="reviewable-filter topic-filter">
         {{i18n "review.filtered_user"}}
-        {{email-group-user-chooser
-          value=filterUsername
-          onChange=(action "updateFilterUsername")
-          class="user-selector"
-          options=(hash
+        <EmailGroupUserChooser @value={{filterUsername}} @onChange={{action "updateFilterUsername"}} @class="user-selector" @options={{hash
             maximum=1
             excludeCurrentUser=false
             fullWidthWrap=true
-          )
-        }}
+          }} />
       </div>
 
       {{#if filterTopic}}
         <div class="reviewable-filter topic-filter">
           {{i18n "review.filtered_topic"}}
-          {{d-button class="btn-default" label="review.show_all_topics" icon="times" action=(action "resetTopic")}}
+          <DButton @class="btn-default" @label="review.show_all_topics" @icon="times" @action={{action "resetTopic"}} />
         </div>
       {{/if}}
 
       <div class="reviewable-filter date-range">
         {{i18n "review.date_filter"}}
-        {{date-time-input-range
-          from=filterFromDate
-          to=filterToDate
-          onChange=setRange
-          showFromTime=false
-          showToTime=false
-        }}
+        <DateTimeInputRange @from={{filterFromDate}} @to={{filterToDate}} @onChange={{setRange}} @showFromTime={{false}} @showToTime={{false}} />
       </div>
 
       <div class="reviewable-filter sort-order">
         {{i18n "review.order_by"}}
-        {{combo-box
-          value=filterSortOrder
-          content=sortOrders
-          onChange=(action (mut filterSortOrder))
-        }}
+        <ComboBox @value={{filterSortOrder}} @content={{sortOrders}} @onChange={{action (mut filterSortOrder)}} />
       </div>
     {{/if}}
 
     <div class="reviewable-filters-actions">
-      {{d-button
-        icon="sync"
-        label="review.filters.refresh"
-        class="btn-primary refresh"
-        action=(action "refresh")}}
+      <DButton @icon="sync" @label="review.filters.refresh" @class="btn-primary refresh" @action={{action "refresh"}} />
 
       {{#if site.mobileView}}
-        {{d-button
-          label="show_help"
-          icon=toggleFiltersIcon
-          class="btn-default expand-secondary-filters"
-          action=(action "toggleFilters")}}
+        <DButton @label="show_help" @icon={{toggleFiltersIcon}} @class="btn-default expand-secondary-filters" @action={{action "toggleFilters"}} />
       {{/if}}
     </div>
   </div>
diff --git a/app/assets/javascripts/discourse/app/templates/review-settings.hbs b/app/assets/javascripts/discourse/app/templates/review-settings.hbs
index 5e66a60aff4..46361571a6a 100644
--- a/app/assets/javascripts/discourse/app/templates/review-settings.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-settings.hbs
@@ -5,11 +5,7 @@
     <div class="reviewable-score-type">
       <div class="title">{{rst.title}}</div>
       <div class="field">
-        {{combo-box
-          value=rst.reviewable_priority
-          content=settings.reviewable_priorities
-          onChange=(action (mut rst.reviewable_priority))
-        }}
+        <ComboBox @value={{rst.reviewable_priority}} @content={{settings.reviewable_priorities}} @onChange={{action (mut rst.reviewable_priority)}} />
       </div>
     </div>
   {{/each}}
@@ -17,12 +13,7 @@
   <div class="reviewable-score-type">
     <div class="title"></div>
     <div class="field">
-      {{d-button
-        icon="check"
-        label="review.settings.save_changes"
-        class="btn-primary save-settings"
-        action=(action "save")
-        disabled=saving}}
+      <DButton @icon="check" @label="review.settings.save_changes" @class="btn-primary save-settings" @action={{action "save"}} @disabled={{saving}} />
 
       {{#if saved}}
         <span class="saved">{{i18n "review.settings.saved"}}</span>
diff --git a/app/assets/javascripts/discourse/app/templates/review-show.hbs b/app/assets/javascripts/discourse/app/templates/review-show.hbs
index 6014a7d4d83..f4d03bb8ff4 100644
--- a/app/assets/javascripts/discourse/app/templates/review-show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-show.hbs
@@ -1 +1 @@
-{{reviewable-item reviewable=reviewable}}
+<ReviewableItem @reviewable={{reviewable}} />
diff --git a/app/assets/javascripts/discourse/app/templates/review-topics.hbs b/app/assets/javascripts/discourse/app/templates/review-topics.hbs
index 6bce3533544..71ed48e57b7 100644
--- a/app/assets/javascripts/discourse/app/templates/review-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-topics.hbs
@@ -11,7 +11,7 @@
         <tr class="reviewable-topic">
           <td class="topic-title">
             <div class="combined-title">
-              {{topic-status topic=rt}}
+              <TopicStatus @topic={{rt}} />
               <a href={{rt.relative_url}} rel="noopener noreferrer" target="_blank">{{replace-emoji rt.fancy_title}}</a>
             </div>
           </td>
@@ -22,11 +22,11 @@
             {{i18n "review.topics.unique_users" count=rt.stats.unique_users}}
           </td>
           <td class="reviewable-details">
-            {{reviewable-claimed-topic topicId=rt.id claimedBy=rt.claimed_by}}
-            {{#link-to "review.index" (query-params topic_id=rt.id) class="btn btn-primary btn-small"}}
+            <ReviewableClaimedTopic @topicId={{rt.id}} @claimedBy={{rt.claimed_by}} />
+            <LinkTo @route="review.index" @query={{hash topic_id=rt.id}} class="btn btn-primary btn-small">
               {{d-icon "list"}}
               <span>{{i18n "review.topics.details"}}</span>
-            {{/link-to}}
+            </LinkTo>
           </td>
         </tr>
       {{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/review.hbs b/app/assets/javascripts/discourse/app/templates/review.hbs
index 6077454af2b..88d11a41cff 100644
--- a/app/assets/javascripts/discourse/app/templates/review.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review.hbs
@@ -1,9 +1,9 @@
 <div class="reviewable">
   <ul class="nav nav-pills reviewable-title">
-    {{nav-item route="review.index" label="review.view_all"}}
-    {{nav-item route="review.topics" label="review.grouped_by_topic"}}
+    <NavItem @route="review.index" @label="review.view_all" />
+    <NavItem @route="review.topics" @label="review.grouped_by_topic" />
     {{#if currentUser.admin}}
-      {{nav-item route="review.settings" label="review.settings.title" icon="wrench"}}
+      <NavItem @route="review.settings" @label="review.settings.title" @icon="wrench" />
     {{/if}}
   </ul>
 
diff --git a/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs b/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs
index 606879871a1..42870b58cfb 100644
--- a/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs
+++ b/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs
@@ -9,28 +9,12 @@
   <p>{{secondFactorDescription}}</p>
   {{#if showSecurityKeyForm}}
     <div id="security-key">
-      {{d-button
-        action=(action "authenticateSecurityKey")
-        icon="key"
-        id="security-key-authenticate-button"
-        label="login.security_key_authenticate"
-        type="button"
-        class="btn btn-large btn-primary"
-      }}
+      <DButton @action={{action "authenticateSecurityKey"}} @icon="key" @id="security-key-authenticate-button" @label="login.security_key_authenticate" @type="button" @class="btn btn-large btn-primary" />
     </div>
   {{else if (or showTotpForm showBackupCodesForm)}}
     <form class={{inputFormClass}}>
-      {{second-factor-input
-        value=secondFactorToken
-        secondFactorMethod=shownSecondFactorMethod
-        onTokenInput=(action "onTokenInput")
-      }}
-      {{d-button
-        action=(action "authenticateToken")
-        class="btn-primary"
-        label="submit"
-        type="submit"
-      }}
+      <SecondFactorInput @value={{secondFactorToken}} @secondFactorMethod={{shownSecondFactorMethod}} @onTokenInput={{action "onTokenInput"}} />
+      <DButton @action={{action "authenticateToken"}} @class="btn-primary" @label="submit" @type="submit" />
     </form>
   {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/selected-posts.hbs b/app/assets/javascripts/discourse/app/templates/selected-posts.hbs
index a3d300f673b..832e6046c34 100644
--- a/app/assets/javascripts/discourse/app/templates/selected-posts.hbs
+++ b/app/assets/javascripts/discourse/app/templates/selected-posts.hbs
@@ -1,14 +1 @@
-{{selected-posts
-  selectedPostsCount=selectedPostsCount
-  canSelectAll=canSelectAll
-  canDeselectAll=canDeselectAll
-  canDeleteSelected=canDeleteSelected
-  canMergeTopic=canMergeTopic
-  canChangeOwner=canChangeOwner
-  canMergePosts=canMergePosts
-  toggleMultiSelect=(action "toggleMultiSelect")
-  mergePosts=(action "mergePosts")
-  deleteSelected=(action "deleteSelected")
-  deselectAll=(action "deselectAll")
-  selectAll=(action "selectAll")
-}}
+<SelectedPosts @selectedPostsCount={{selectedPostsCount}} @canSelectAll={{canSelectAll}} @canDeselectAll={{canDeselectAll}} @canDeleteSelected={{canDeleteSelected}} @canMergeTopic={{canMergeTopic}} @canChangeOwner={{canChangeOwner}} @canMergePosts={{canMergePosts}} @toggleMultiSelect={{action "toggleMultiSelect"}} @mergePosts={{action "mergePosts"}} @deleteSelected={{action "deleteSelected"}} @deselectAll={{action "deselectAll"}} @selectAll={{action "selectAll"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/static.hbs b/app/assets/javascripts/discourse/app/templates/static.hbs
index ab523d7daf6..f6b35c75b0b 100644
--- a/app/assets/javascripts/discourse/app/templates/static.hbs
+++ b/app/assets/javascripts/discourse/app/templates/static.hbs
@@ -1,24 +1,24 @@
-{{#d-section bodyClass=bodyClass class="container"}}
-  {{#watch-read action=(action "markFaqRead") path=model.path}}
+<DSection @bodyClass={{bodyClass}} @class="container">
+  <WatchRead @action={{action "markFaqRead"}} @path={{model.path}}>
     <div class="contents clearfix body-page">
 
-      {{plugin-outlet name="above-static" tagName="span" connectorTagName="div"}}
+      <PluginOutlet @name="above-static" @tagName="span" @connectorTagName="div" />
 
       {{html-safe model.html}}
 
-      {{plugin-outlet name="below-static" connectorTagName="div"}}
+      <PluginOutlet @name="below-static" @connectorTagName="div" />
 
       {{#if anyButtons}}
         <div class="body-page-button-container">
           {{#if showSignupButton}}
-            {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}}
+            <DButton @action={{route-action "showCreateAccount"}} @class="btn-primary sign-up-button" @label="sign_up" />
           {{/if}}
 
           {{#if showLoginButton}}
-            {{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}}
+            <DButton @action={{route-action "showLogin"}} @class="btn-primary login-button" @icon="user" @label="log_in" />
           {{/if}}
         </div>
       {{/if}}
     </div>
-  {{/watch-read}}
-{{/d-section}}
+  </WatchRead>
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs
index 31f2b720fa2..f98dcdced40 100644
--- a/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs
@@ -1,4 +1,4 @@
 <div class="tag-group-content">
   <h3>{{i18n "tagging.groups.edit_title"}}</h3>
-  {{tag-groups-form model=model onDestroy=(action "onDestroy")}}
+  <TagGroupsForm @model={{model}} @onDestroy={{action "onDestroy"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs
index c89053199df..773ca5179ee 100644
--- a/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs
@@ -11,9 +11,9 @@
   </section>
   <section>
     {{#unless model}}
-      {{#link-to "tagGroups.new" class="btn btn-primary"}}
+      <LinkTo @route="tagGroups.new" class="btn btn-primary">
         {{d-icon "plus"}} {{i18n "tagging.groups.new"}}
-      {{/link-to}}
+      </LinkTo>
     {{/unless}}
   </section>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs
index e59ca7a4634..6f163edbba8 100644
--- a/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs
@@ -1,4 +1,4 @@
 <div class="tag-group-content">
   <h3>{{i18n "tagging.groups.new_title"}}</h3>
-  {{tag-groups-form model=model onSave=(action "onSave")}}
+  <TagGroupsForm @model={{model}} @onSave={{action "onSave"}} />
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups.hbs
index b147874f743..0a9ead67498 100644
--- a/app/assets/javascripts/discourse/app/templates/tag-groups.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tag-groups.hbs
@@ -12,19 +12,14 @@
         <ul>
           {{#each model as |tagGroup|}}
             <li>
-              {{#link-to "tagGroups.edit" tagGroup}}
+              <LinkTo @route="tagGroups.edit" @model={{tagGroup}}>
                 {{tagGroup.name}}
-              {{/link-to}}
+              </LinkTo>
             </li>
           {{/each}}
         </ul>
 
-        {{d-button
-          class="btn-default"
-          action=(action "newTagGroup")
-          icon="plus"
-          label="tagging.groups.new"
-        }}
+        <DButton @class="btn-default" @action={{action "newTagGroup"}} @icon="plus" @label="tagging.groups.new" />
       </div>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/tag/show.hbs b/app/assets/javascripts/discourse/app/templates/tag/show.hbs
index 1d08c56a8c6..1b9cb779f2a 100644
--- a/app/assets/javascripts/discourse/app/templates/tag/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tag/show.hbs
@@ -1,116 +1,73 @@
-{{#d-section tagName="" pageClass="tags" bodyClass=(concat "tag-" tag.id (if category.slug (concat " category-" category.slug)) ""  (if additionalTags " tags-intersection"))}}
+<DSection @tagName="" @pageClass="tags" @bodyClass={{concat "tag-" tag.id (if category.slug (concat " category-" category.slug)) "" (if additionalTags " tags-intersection")}}>
   <div class="container">
-    {{discourse-banner user=currentUser banner=site.banner}}
+    <DiscourseBanner @user={{currentUser}} @banner={{site.banner}} />
   </div>
 
-  {{plugin-outlet name="discovery-list-controls-above" tagName="span" connectorTagName="div"}}
+  <PluginOutlet @name="discovery-list-controls-above" @tagName="span" @connectorTagName="div" />
 
   <div class="list-controls">
-    {{plugin-outlet name="discovery-navigation-bar-above" connectorTagName="div"}}
+    <PluginOutlet @name="discovery-navigation-bar-above" @connectorTagName="div" />
     <div class="container">
       <section class="navigation-container tag-navigation">
-        {{d-navigation
-          filterMode=filterMode
-          canCreateTopic=canCreateTopic
-          hasDraft=currentUser.has_topic_draft
-          createTopic=(route-action "createTopic")
-          category=category
-          tag=tag
-          noSubcategories=noSubcategories
-          tagNotification=tagNotification
-          additionalTags=additionalTags
-          showInfo=showInfo
-          canCreateTopicOnTag=canCreateTopicOnTag
-          changeTagNotificationLevel=(action "changeTagNotificationLevel")
-          toggleInfo=(action "toggleInfo")
-        }}
+        <DNavigation @filterMode={{filterMode}} @canCreateTopic={{canCreateTopic}} @hasDraft={{currentUser.has_topic_draft}} @createTopic={{route-action "createTopic"}} @category={{category}} @tag={{tag}} @noSubcategories={{noSubcategories}} @tagNotification={{tagNotification}} @additionalTags={{additionalTags}} @showInfo={{showInfo}} @canCreateTopicOnTag={{canCreateTopicOnTag}} @changeTagNotificationLevel={{action "changeTagNotificationLevel"}} @toggleInfo={{action "toggleInfo"}} />
 
-        {{plugin-outlet
-          name="tag-navigation"
-          connectorTagName="div"
-          args=(hash category=category tag=tag)
-        }}
+        <PluginOutlet @name="tag-navigation" @connectorTagName="div" @args={{hash category=category tag=tag}} />
       </section>
     </div>
   </div>
 
   {{#if showInfo}}
-    {{tag-info tag=tag list=list deleteAction=(action "deleteTag")}}
+    <TagInfo @tag={{tag}} @list={{list}} @deleteAction={{action "deleteTag"}} />
   {{/if}}
 
-  {{plugin-outlet name="discovery-list-container-top" tagName="span" connectorTagName="div" args=(hash category=category)}}
+  <PluginOutlet @name="discovery-list-container-top" @tagName="span" @connectorTagName="div" @args={{hash category=category}} />
 
-  {{topic-dismiss-buttons position="top" selectedTopics=selected
-    model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+  <TopicDismissButtons @position="top" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
-  {{plugin-outlet name="discovery-above" tagName="span" connectorTagName="div"}}
+  <PluginOutlet @name="discovery-above" @tagName="span" @connectorTagName="div" />
 
   <div class="container list-container">
     <div class="row">
       <div class="full-width">
-        {{plugin-outlet name="before-list-area"}}
+        <PluginOutlet @name="before-list-area" />
         <div id="list-area">
           {{#unless loading}}
-            {{#discovery-topics-list
-              model=list
-              refresh=(action "refresh")
-              autoAddTopicsToBulkSelect=autoAddTopicsToBulkSelect
-              bulkSelectEnabled=bulkSelectEnabled
-              addTopicsToBulkSelect=(action "addTopicsToBulkSelect")
-              as |discoveryTopicList|
-            }}
+            <DiscoveryTopicsList @model={{list}} @refresh={{action "refresh"}} @autoAddTopicsToBulkSelect={{autoAddTopicsToBulkSelect}} @bulkSelectEnabled={{bulkSelectEnabled}} @addTopicsToBulkSelect={{action "addTopicsToBulkSelect"}} as |discoveryTopicList|>
               {{#if top}}
                 <div class="top-lists">
-                  {{period-chooser period=period action=(action "changePeriod") fullDay=false}}
+                  <PeriodChooser @period={{period}} @action={{action "changePeriod"}} @fullDay={{false}} />
                 </div>
               {{else}}
                 {{#if topicTrackingState.hasIncoming}}
                   <div class="show-more {{if hasTopics "has-topics"}}">
                     <a tabindex="0" href {{action "showInserted"}} class="alert alert-info clickable">
-                      {{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
+                      <CountI18n @key="topic_count_" @suffix={{topicTrackingState.filter}} @count={{topicTrackingState.incomingCount}} />
                     </a>
                   </div>
                 {{/if}}
               {{/if}}
 
               {{#if list.topics}}
-                {{topic-list
-                  topics=list.topics
-                  canBulkSelect=canBulkSelect
-                  toggleBulkSelect=(action "toggleBulkSelect")
-                  bulkSelectEnabled=bulkSelectEnabled
-                  bulkSelectAction=(action "refresh")
-                  updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")
-                  selected=selected
-                  category=category
-                  showPosters=true
-                  order=order
-                  ascending=ascending
-                  changeSort=(action "changeSort")
-                  onScroll=discoveryTopicList.saveScrollPosition
-                  scrollOnLoad=true
-                  focusLastVisitedTopic=true
-                }}
+                <TopicList @topics={{list.topics}} @canBulkSelect={{canBulkSelect}} @toggleBulkSelect={{action "toggleBulkSelect"}} @bulkSelectEnabled={{bulkSelectEnabled}} @bulkSelectAction={{action "refresh"}} @updateAutoAddTopicsToBulkSelect={{action "updateAutoAddTopicsToBulkSelect"}} @selected={{selected}} @category={{category}} @showPosters={{true}} @order={{order}} @ascending={{ascending}} @changeSort={{action "changeSort"}} @onScroll={{discoveryTopicList.saveScrollPosition}} @scrollOnLoad={{true}} @focusLastVisitedTopic={{true}} />
               {{/if}}
-            {{/discovery-topics-list}}
+            </DiscoveryTopicsList>
 
             <footer class="topic-list-bottom">
-              {{topic-dismiss-buttons position="bottom" selectedTopics=selected
-              model=model showResetNew=showResetNew showDismissRead=showDismissRead resetNew=(action "resetNew")}}
+              <TopicDismissButtons @position="bottom" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
               {{#unless list.canLoadMore}}
-                {{#footer-message education=footerEducation message=footerMessage}}
-                  {{#link-to "tags"}} {{i18n "topic.browse_all_tags"}}{{/link-to}} {{i18n "or"}} {{#link-to "discovery.latest"}}{{i18n "topic.view_latest_topics"}}{{/link-to}}.
-                {{/footer-message}}
+                <FooterMessage @education={{footerEducation}} @message={{footerMessage}}>
+                  <LinkTo @route="tags"> {{i18n "topic.browse_all_tags"}}</LinkTo> {{i18n "or"}} <LinkTo @route="discovery.latest">{{i18n "topic.view_latest_topics"}}</LinkTo>.
+                </FooterMessage>
               {{/unless}}
             </footer>
           {{/unless}}
 
-          {{conditional-loading-spinner condition=list.loadingMore}}
+          <ConditionalLoadingSpinner @condition={{list.loadingMore}} />
         </div>
       </div>
     </div>
   </div>
 
-  {{plugin-outlet name="discovery-below" tagName="span" connectorTagName="div"}}
-{{/d-section}}
+  <PluginOutlet @name="discovery-below" @tagName="span" @connectorTagName="div" />
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/tags.hbs b/app/assets/javascripts/discourse/app/templates/tags.hbs
index f1017e67587..aac6e929228 100644
--- a/app/assets/javascripts/discourse/app/templates/tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tags.hbs
@@ -1,3 +1,3 @@
-{{#d-section pageClass="tags" tagName=""}}
+<DSection @pageClass="tags" @tagName="">
   {{outlet}}
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/tags/index.hbs b/app/assets/javascripts/discourse/app/templates/tags/index.hbs
index 0eefd546028..905cf45a959 100644
--- a/app/assets/javascripts/discourse/app/templates/tags/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tags/index.hbs
@@ -1,17 +1,17 @@
 <div class="container">
-  {{discourse-banner user=currentUser banner=site.banner}}
+  <DiscourseBanner @user={{currentUser}} @banner={{site.banner}} />
 </div>
 
 <div class="list-controls">
   <div class="container tags-controls">
     {{#if canAdminTags}}
-      {{tags-admin-dropdown actionsMapping=actionsMapping}}
+      <TagsAdminDropdown @actionsMapping={{actionsMapping}} />
     {{/if}}
     <h2>{{i18n "tagging.tags"}}</h2>
   </div>
 </div>
 
-{{plugin-outlet name="tags-below-title" connectorTagName="div" tagName="div" args=(hash model=model)}}
+<PluginOutlet @name="tags-below-title" @connectorTagName="div" @tagName="div" @args={{hash model=model}} />
 
 <div class="tag-sort-options">
   {{i18n "tagging.sort_by"}}
@@ -23,14 +23,14 @@
 
 <div class="all-tag-lists">
   {{#each model.extras.categories as |category|}}
-    {{tag-list tags=category.tags sortProperties=sortProperties categoryId=category.id}}
+    <TagList @tags={{category.tags}} @sortProperties={{sortProperties}} @categoryId={{category.id}} />
   {{/each}}
 
   {{#each model.extras.tag_groups as |tagGroup|}}
-    {{tag-list tags=tagGroup.tags sortProperties=sortProperties tagGroupName=tagGroup.name}}
+    <TagList @tags={{tagGroup.tags}} @sortProperties={{sortProperties}} @tagGroupName={{tagGroup.name}} />
   {{/each}}
 
   {{#if model}}
-    {{tag-list tags=model sortProperties=sortProperties titleKey=otherTagsTitleKey}}
+    <TagList @tags={{model}} @sortProperties={{sortProperties}} @titleKey={{otherTagsTitleKey}} />
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index dd268baff07..58a69497400 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -1,52 +1,44 @@
-{{#discourse-topic multiSelect=multiSelect enteredAt=enteredAt topic=model hasScrolled=hasScrolled}}
+<DiscourseTopic @multiSelect={{multiSelect}} @enteredAt={{enteredAt}} @topic={{model}} @hasScrolled={{hasScrolled}}>
   {{#if model}}
-    {{add-category-tag-classes category=model.category tags=model.tags}}
-    {{add-topic-status-classes topic=model}}
+    <AddCategoryTagClasses @category={{model.category}} @tags={{model.tags}} />
+    <AddTopicStatusClasses @topic={{model}} />
     <div class="container">
-      {{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
+      <DiscourseBanner @user={{currentUser}} @banner={{site.banner}} @overlay={{hasScrolled}} @hide={{model.errorLoading}} />
     </div>
   {{/if}}
 
   {{#if showSharedDraftControls}}
-    {{shared-draft-controls topic=model}}
+    <SharedDraftControls @topic={{model}} />
   {{/if}}
 
-  {{plugin-outlet name="topic-above-post-stream" tagName="span" connectorTagName="div" args=(hash model=model editFirstPost=(action "editFirstPost"))}}
+  <PluginOutlet @name="topic-above-post-stream" @tagName="span" @connectorTagName="div" @args={{hash model=model editFirstPost=(action "editFirstPost")}} />
 
   {{#if model.postStream.loaded}}
     {{#if model.postStream.firstPostPresent}}
-      {{#topic-title cancelled=(action "cancelEditingTopic") save=(action "finishedEditingTopic") model=model}}
+      <TopicTitle @cancelled={{action "cancelEditingTopic"}} @save={{action "finishedEditingTopic"}} @model={{model}}>
         {{#if editingTopic}}
           <div class="edit-topic-title">
-            {{private-message-glyph shouldShow=model.isPrivateMessage tagName=""}}
+            <PrivateMessageGlyph @shouldShow={{model.isPrivateMessage}} @tagName="" />
 
-            {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
+            <TextField @id="edit-title" @value={{buffered.title}} @maxlength={{siteSettings.max_topic_title_length}} @autofocus="true" />
 
             {{#if showCategoryChooser}}
-              {{category-chooser
-                class="small"
-                value=buffered.category_id
-                onChange=(action "topicCategoryChanged")
-              }}
+              <CategoryChooser @class="small" @value={{buffered.category_id}} @onChange={{action "topicCategoryChanged"}} />
             {{/if}}
 
             {{#if canEditTags}}
-              {{mini-tag-chooser
-                value=buffered.tags
-                onChange=(action "topicTagsChanged")
-                options=(hash
+              <MiniTagChooser @value={{buffered.tags}} @onChange={{action "topicTagsChanged"}} @options={{hash
                   filterable=true
                   categoryId=buffered.category_id
                   minimum=minimumRequiredTags
-                )
-              }}
+                }} />
             {{/if}}
 
-            {{plugin-outlet name="edit-topic" tagName="span" connectorTagName="div" args=(hash model=model buffered=buffered)}}
+            <PluginOutlet @name="edit-topic" @tagName="span" @connectorTagName="div" @args={{hash model=model buffered=buffered}} />
 
             <div class="edit-controls">
-              {{d-button action=(action "finishedEditingTopic") class="btn-primary submit-edit" icon="check" ariaLabel="composer.save_edit"}}
-              {{d-button action=(action "cancelEditingTopic") class="btn-default cancel-edit" icon="times" ariaLabel="composer.cancel"}}
+              <DButton @action={{action "finishedEditingTopic"}} @class="btn-primary submit-edit" @icon="check" @ariaLabel="composer.save_edit" />
+              <DButton @action={{action "cancelEditingTopic"}} @class="btn-default cancel-edit" @icon="times" @ariaLabel="composer.cancel" />
 
               {{#if canRemoveTopicFeaturedLink}}
                 <a href {{action "removeFeaturedLink"}} class="remove-featured-link" title={{i18n "composer.remove_featured_link"}}>
@@ -61,20 +53,14 @@
           <h1 data-topic-id={{model.id}}>
             {{#unless model.is_warning}}
               {{#if siteSettings.enable_personal_messages}}
-                {{private-message-glyph
-                  shouldShow=model.isPrivateMessage
-                  href=pmPath
-                  title="topic_statuses.personal_message.title"
-                  ariaLabel="user.messages.inbox"
-                  tagName=""
-                }}
+                <PrivateMessageGlyph @shouldShow={{model.isPrivateMessage}} @href={{pmPath}} @title="topic_statuses.personal_message.title" @ariaLabel="user.messages.inbox" @tagName="" />
               {{else}}
-                {{private-message-glyph shouldShow=model.isPrivateMessage tagName=""}}
+                <PrivateMessageGlyph @shouldShow={{model.isPrivateMessage}} @tagName="" />
               {{/if}}
             {{/unless}}
 
             {{#if model.details.loaded}}
-              {{topic-status topic=model}}
+              <TopicStatus @topic={{model}} />
               <a href={{model.url}} {{action "jumpTop"}} class="fancy-title">
                 {{html-safe model.fancyTitle}}
               </a>
@@ -85,9 +71,9 @@
             {{/if}}
           </h1>
 
-          {{topic-category topic=model class="topic-category"}}
+          <TopicCategory @topic={{model}} @class="topic-category" />
         {{/if}}
-      {{/topic-title}}
+      </TopicTitle>
 
       {{#if model.publishedPage}}
         <div class="published-page-notice">
@@ -101,11 +87,7 @@
             </div>
           </div>
           <div class="controls">
-            {{d-button
-              icon="file"
-              label="topic.publish_page.publishing_settings"
-              action=(route-action "showPagePublish")
-            }}
+            <DButton @icon="file" @label="topic.publish_page.publishing_settings" @action={{route-action "showPagePublish"}} />
           </div>
         </div>
       {{/if}}
@@ -114,147 +96,41 @@
 
     <div class="container posts">
       <div class="selected-posts {{unless multiSelect "hidden"}}">
-        {{selected-posts
-          selectedPostsCount=selectedPostsCount
-          canSelectAll=canSelectAll
-          canDeselectAll=canDeselectAll
-          canDeleteSelected=canDeleteSelected
-          canMergeTopic=canMergeTopic
-          canChangeOwner=canChangeOwner
-          canMergePosts=canMergePosts
-          toggleMultiSelect=(action "toggleMultiSelect")
-          mergePosts=(action "mergePosts")
-          deleteSelected=(action "deleteSelected")
-          deselectAll=(action "deselectAll")
-          selectAll=(action "selectAll")
-        }}
+        <SelectedPosts @selectedPostsCount={{selectedPostsCount}} @canSelectAll={{canSelectAll}} @canDeselectAll={{canDeselectAll}} @canDeleteSelected={{canDeleteSelected}} @canMergeTopic={{canMergeTopic}} @canChangeOwner={{canChangeOwner}} @canMergePosts={{canMergePosts}} @toggleMultiSelect={{action "toggleMultiSelect"}} @mergePosts={{action "mergePosts"}} @deleteSelected={{action "deleteSelected"}} @deselectAll={{action "deselectAll"}} @selectAll={{action "selectAll"}} />
       </div>
 
-      {{plugin-outlet name="above-timeline" connectorTagName="div"}}
+      <PluginOutlet @name="above-timeline" @connectorTagName="div" />
 
-      {{#topic-navigation class="topic-navigation" topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
-        {{plugin-outlet name="topic-navigation" connectorTagName="div" args=(hash topic=model)}}
+      <TopicNavigation @class="topic-navigation" @topic={{model}} @jumpToDate={{action "jumpToDate"}} @jumpToIndex={{action "jumpToIndex"}} as |info|>
+        <PluginOutlet @name="topic-navigation" @connectorTagName="div" @args={{hash topic=model}} />
 
         {{#if info.renderTimeline}}
-          {{topic-timeline
-            topic=model
-            notificationLevel=model.details.notification_level
-            prevEvent=info.prevEvent
-            fullscreen=info.topicProgressExpanded
-            enteredIndex=enteredIndex
-            loading=model.postStream.loading
-            jumpToPost=(action "jumpToPost")
-            jumpTop=(action "jumpTop")
-            jumpBottom=(action "jumpBottom")
-            jumpEnd=(action "jumpEnd")
-            jumpToPostPrompt=(action "jumpToPostPrompt")
-            jumpToIndex=(action "jumpToIndex")
-            replyToPost=(action "replyToPost")
-            showSummary=(action "showSummary")
-            toggleMultiSelect=(action "toggleMultiSelect")
-            showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
-            deleteTopic=(action "deleteTopic")
-            recoverTopic=(action "recoverTopic")
-            toggleClosed=(action "toggleClosed")
-            toggleArchived=(action "toggleArchived")
-            toggleVisibility=(action "toggleVisibility")
-            showTopicTimerModal=(route-action "showTopicTimerModal")
-            showFeatureTopic=(route-action "showFeatureTopic")
-            showChangeTimestamp=(route-action "showChangeTimestamp")
-            resetBumpDate=(action "resetBumpDate")
-            convertToPublicTopic=(action "convertToPublicTopic")
-            convertToPrivateMessage=(action "convertToPrivateMessage")}}
+          <TopicTimeline @topic={{model}} @notificationLevel={{model.details.notification_level}} @prevEvent={{info.prevEvent}} @fullscreen={{info.topicProgressExpanded}} @enteredIndex={{enteredIndex}} @loading={{model.postStream.loading}} @jumpToPost={{action "jumpToPost"}} @jumpTop={{action "jumpTop"}} @jumpBottom={{action "jumpBottom"}} @jumpEnd={{action "jumpEnd"}} @jumpToPostPrompt={{action "jumpToPostPrompt"}} @jumpToIndex={{action "jumpToIndex"}} @replyToPost={{action "replyToPost"}} @showSummary={{action "showSummary"}} @toggleMultiSelect={{action "toggleMultiSelect"}} @showTopicSlowModeUpdate={{route-action "showTopicSlowModeUpdate"}} @deleteTopic={{action "deleteTopic"}} @recoverTopic={{action "recoverTopic"}} @toggleClosed={{action "toggleClosed"}} @toggleArchived={{action "toggleArchived"}} @toggleVisibility={{action "toggleVisibility"}} @showTopicTimerModal={{route-action "showTopicTimerModal"}} @showFeatureTopic={{route-action "showFeatureTopic"}} @showChangeTimestamp={{route-action "showChangeTimestamp"}} @resetBumpDate={{action "resetBumpDate"}} @convertToPublicTopic={{action "convertToPublicTopic"}} @convertToPrivateMessage={{action "convertToPrivateMessage"}} />
         {{else}}
-          {{#topic-progress
-            prevEvent=info.prevEvent
-            topic=model
-            expanded=info.topicProgressExpanded
-            jumpToPost=(action "jumpToPost")}}
-            {{plugin-outlet name="before-topic-progress" tagName="span" connectorTagName="div" args=(hash model=model jumpToPost=(action "jumpToPost"))}}
-            {{topic-admin-menu-button
-              topic=model
-              openUpwards="true"
-              rightSide="true"
-              toggleMultiSelect=(action "toggleMultiSelect")
-              showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
-              deleteTopic=(action "deleteTopic")
-              recoverTopic=(action "recoverTopic")
-              toggleClosed=(action "toggleClosed")
-              toggleArchived=(action "toggleArchived")
-              toggleVisibility=(action "toggleVisibility")
-              showTopicTimerModal=(route-action "showTopicTimerModal")
-              showFeatureTopic=(route-action "showFeatureTopic")
-              showChangeTimestamp=(route-action "showChangeTimestamp")
-              resetBumpDate=(action "resetBumpDate")
-              convertToPublicTopic=(action "convertToPublicTopic")
-              convertToPrivateMessage=(action "convertToPrivateMessage")}}
-          {{/topic-progress}}
+          <TopicProgress @prevEvent={{info.prevEvent}} @topic={{model}} @expanded={{info.topicProgressExpanded}} @jumpToPost={{action "jumpToPost"}}>
+            <PluginOutlet @name="before-topic-progress" @tagName="span" @connectorTagName="div" @args={{hash model=model jumpToPost=(action "jumpToPost")}} />
+            <TopicAdminMenuButton @topic={{model}} @openUpwards="true" @rightSide="true" @toggleMultiSelect={{action "toggleMultiSelect"}} @showTopicSlowModeUpdate={{route-action "showTopicSlowModeUpdate"}} @deleteTopic={{action "deleteTopic"}} @recoverTopic={{action "recoverTopic"}} @toggleClosed={{action "toggleClosed"}} @toggleArchived={{action "toggleArchived"}} @toggleVisibility={{action "toggleVisibility"}} @showTopicTimerModal={{route-action "showTopicTimerModal"}} @showFeatureTopic={{route-action "showFeatureTopic"}} @showChangeTimestamp={{route-action "showChangeTimestamp"}} @resetBumpDate={{action "resetBumpDate"}} @convertToPublicTopic={{action "convertToPublicTopic"}} @convertToPrivateMessage={{action "convertToPrivateMessage"}} />
+          </TopicProgress>
         {{/if}}
-      {{/topic-navigation}}
+      </TopicNavigation>
 
       <div class="row">
         <section class="topic-area" id="topic" data-topic-id={{model.id}}>
 
           <div class="posts-wrapper">
-            {{conditional-loading-spinner condition=model.postStream.loadingAbove}}
+            <ConditionalLoadingSpinner @condition={{model.postStream.loadingAbove}} />
 
-            {{plugin-outlet name="topic-above-posts" tagName="span" connectorTagName="div" args=(hash model=model)}}
+            <PluginOutlet @name="topic-above-posts" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
             {{#unless model.postStream.loadingFilter}}
-              {{scrolling-post-stream
-                posts=postsToRender
-                canCreatePost=model.details.can_create_post
-                multiSelect=multiSelect
-                selectedPostsCount=selectedPostsCount
-                filteredPostsCount=model.postStream.filteredPostsCount
-                selectedQuery=selectedQuery
-                gaps=model.postStream.gaps
-                showReadIndicator=model.show_read_indicator
-                streamFilters=model.postStream.streamFilters
-                lastReadPostNumber=userLastReadPostNumber
-                highestPostNumber=highestPostNumber
-                showFlags=(action "showPostFlags")
-                editPost=(action "editPost")
-                showHistory=(route-action "showHistory")
-                showLogin=(route-action "showLogin")
-                showRawEmail=(route-action "showRawEmail")
-                deletePost=(action "deletePost")
-                permanentlyDeletePost=(action "permanentlyDeletePost")
-                recoverPost=(action "recoverPost")
-                expandHidden=(action "expandHidden")
-                toggleBookmark=(action "toggleBookmark")
-                togglePostType=(action "togglePostType")
-                rebakePost=(action "rebakePost")
-                changePostOwner=(action "changePostOwner")
-                grantBadge=(action "grantBadge")
-                changeNotice=(action "changeNotice")
-                lockPost=(action "lockPost")
-                unlockPost=(action "unlockPost")
-                unhidePost=(action "unhidePost")
-                replyToPost=(action "replyToPost")
-                toggleWiki=(action "toggleWiki")
-                showSummary=(action "showSummary")
-                cancelFilter=(action "cancelFilter")
-                removeAllowedUser=(action "removeAllowedUser")
-                removeAllowedGroup=(action "removeAllowedGroup")
-                topVisibleChanged=(action "topVisibleChanged")
-                currentPostChanged=(action "currentPostChanged")
-                currentPostScrolled=(action "currentPostScrolled")
-                bottomVisibleChanged=(action "bottomVisibleChanged")
-                togglePostSelection=(action "togglePostSelection")
-                selectReplies=(action "selectReplies")
-                selectBelow=(action "selectBelow")
-                fillGapBefore=(action "fillGapBefore")
-                fillGapAfter=(action "fillGapAfter")
-                showInvite=(route-action "showInvite")
-                showPagePublish=(route-action "showPagePublish")}}
+              <ScrollingPostStream @posts={{postsToRender}} @canCreatePost={{model.details.can_create_post}} @multiSelect={{multiSelect}} @selectedPostsCount={{selectedPostsCount}} @filteredPostsCount={{model.postStream.filteredPostsCount}} @selectedQuery={{selectedQuery}} @gaps={{model.postStream.gaps}} @showReadIndicator={{model.show_read_indicator}} @streamFilters={{model.postStream.streamFilters}} @lastReadPostNumber={{userLastReadPostNumber}} @highestPostNumber={{highestPostNumber}} @showFlags={{action "showPostFlags"}} @editPost={{action "editPost"}} @showHistory={{route-action "showHistory"}} @showLogin={{route-action "showLogin"}} @showRawEmail={{route-action "showRawEmail"}} @deletePost={{action "deletePost"}} @permanentlyDeletePost={{action "permanentlyDeletePost"}} @recoverPost={{action "recoverPost"}} @expandHidden={{action "expandHidden"}} @toggleBookmark={{action "toggleBookmark"}} @togglePostType={{action "togglePostType"}} @rebakePost={{action "rebakePost"}} @changePostOwner={{action "changePostOwner"}} @grantBadge={{action "grantBadge"}} @changeNotice={{action "changeNotice"}} @lockPost={{action "lockPost"}} @unlockPost={{action "unlockPost"}} @unhidePost={{action "unhidePost"}} @replyToPost={{action "replyToPost"}} @toggleWiki={{action "toggleWiki"}} @showSummary={{action "showSummary"}} @cancelFilter={{action "cancelFilter"}} @removeAllowedUser={{action "removeAllowedUser"}} @removeAllowedGroup={{action "removeAllowedGroup"}} @topVisibleChanged={{action "topVisibleChanged"}} @currentPostChanged={{action "currentPostChanged"}} @currentPostScrolled={{action "currentPostScrolled"}} @bottomVisibleChanged={{action "bottomVisibleChanged"}} @togglePostSelection={{action "togglePostSelection"}} @selectReplies={{action "selectReplies"}} @selectBelow={{action "selectBelow"}} @fillGapBefore={{action "fillGapBefore"}} @fillGapAfter={{action "fillGapAfter"}} @showInvite={{route-action "showInvite"}} @showPagePublish={{route-action "showPagePublish"}} />
             {{/unless}}
 
-            {{conditional-loading-spinner condition=model.postStream.loadingBelow}}
+            <ConditionalLoadingSpinner @condition={{model.postStream.loadingBelow}} />
           </div>
           <div id="topic-bottom"></div>
 
-          {{#conditional-loading-spinner condition=model.postStream.loadingFilter}}
+          <ConditionalLoadingSpinner @condition={{model.postStream.loadingFilter}}>
             {{#if loadedAllPosts}}
 
               {{#if model.pending_posts}}
@@ -270,18 +146,14 @@
                         </span>
                       </div>
                       <div class="post-contents-wrapper">
-                        {{reviewable-created-by user=currentUser tagName=""}}
+                        <ReviewableCreatedBy @user={{currentUser}} @tagName="" />
                         <div class="post-contents">
-                          {{reviewable-created-by-name user=currentUser tagName=""}}
+                          <ReviewableCreatedByName @user={{currentUser}} @tagName="" />
                           <div class="post-body">{{cook-text pending.raw}}</div>
                         </div>
                       </div>
                       <div class="reviewable-actions">
-                        {{d-button
-                          class="btn-danger"
-                          label="review.delete"
-                          icon="trash-alt"
-                          action=(action "deletePending" pending) }}
+                        <DButton @class="btn-danger" @label="review.delete" @icon="trash-alt" @action={{action "deletePending" pending}} />
                       </div>
                     </div>
                   {{/each}}
@@ -294,45 +166,24 @@
                     {{html-safe (i18n "review.topic_has_pending" count=model.queued_posts_count)}}
                   </div>
 
-                  {{#link-to "review" (query-params topic_id=model.id type="ReviewableQueuedPost" status="pending")}}
+                  <LinkTo @route="review" @query={{hash topic_id=model.id type="ReviewableQueuedPost" status="pending"}}>
                     {{i18n "review.view_pending"}}
-                  {{/link-to}}
+                  </LinkTo>
                 </div>
               {{/if}}
 
-              {{slow-mode-info topic=model user=currentUser tagName=""}}
+              <SlowModeInfo @topic={{model}} @user={{currentUser}} @tagName="" />
 
-              {{topic-timer-info
-                  topicClosed=model.closed
-                  statusType=model.topic_timer.status_type
-                  executeAt=model.topic_timer.execute_at
-                  basedOnLastPost=model.topic_timer.based_on_last_post
-                  durationMinutes=model.topic_timer.duration_minutes
-                  categoryId=model.topic_timer.category_id
-                  showTopicTimerModal=(route-action "showTopicTimerModal")
-                  removeTopicTimer=(action "removeTopicTimer" model.topic_timer.status_type "topic_timer")}}
+              <TopicTimerInfo @topicClosed={{model.closed}} @statusType={{model.topic_timer.status_type}} @executeAt={{model.topic_timer.execute_at}} @basedOnLastPost={{model.topic_timer.based_on_last_post}} @durationMinutes={{model.topic_timer.duration_minutes}} @categoryId={{model.topic_timer.category_id}} @showTopicTimerModal={{route-action "showTopicTimerModal"}} @removeTopicTimer={{action "removeTopicTimer" model.topic_timer.status_type "topic_timer"}} />
 
               {{#if showSelectedPostsAtBottom}}
                 <div class="selected-posts {{unless multiSelect "hidden"}} {{if showSelectedPostsAtBottom "hidden"}}">
-                  {{selected-posts
-                    selectedPostsCount=selectedPostsCount
-                    canSelectAll=canSelectAll
-                    canDeselectAll=canDeselectAll
-                    canDeleteSelected=canDeleteSelected
-                    canMergeTopic=canMergeTopic
-                    canChangeOwner=canChangeOwner
-                    canMergePosts=canMergePosts
-                    toggleMultiSelect=(action "toggleMultiSelect")
-                    mergePosts=(action "mergePosts")
-                    deleteSelected=(action "deleteSelected")
-                    deselectAll=(action "deselectAll")
-                    selectAll=(action "selectAll")
-                  }}
+                  <SelectedPosts @selectedPostsCount={{selectedPostsCount}} @canSelectAll={{canSelectAll}} @canDeselectAll={{canDeselectAll}} @canDeleteSelected={{canDeleteSelected}} @canMergeTopic={{canMergeTopic}} @canChangeOwner={{canChangeOwner}} @canMergePosts={{canMergePosts}} @toggleMultiSelect={{action "toggleMultiSelect"}} @mergePosts={{action "mergePosts"}} @deleteSelected={{action "deleteSelected"}} @deselectAll={{action "deselectAll"}} @selectAll={{action "selectAll"}} />
                 </div>
               {{/if}}
 
             {{/if}}
-          {{/conditional-loading-spinner}}
+          </ConditionalLoadingSpinner>
 
         </section>
       </div>
@@ -341,52 +192,32 @@
     {{#if loadedAllPosts}}
       {{#if session.showSignupCta}}
         {{! replace "Log In to Reply" with the infobox }}
-        {{signup-cta}}
+        <SignupCta />
       {{else}}
         {{#if currentUser}}
-          {{plugin-outlet name="topic-above-footer-buttons" tagName="span" connectorTagName="div" args=(hash model=model)}}
+          <PluginOutlet @name="topic-above-footer-buttons" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
 
-          {{topic-footer-buttons
-            topic=model
-            toggleMultiSelect=(action "toggleMultiSelect")
-            showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
-            deleteTopic=(action "deleteTopic")
-            recoverTopic=(action "recoverTopic")
-            toggleClosed=(action "toggleClosed")
-            toggleArchived=(action "toggleArchived")
-            toggleVisibility=(action "toggleVisibility")
-            showTopicTimerModal=(route-action "showTopicTimerModal")
-            showFeatureTopic=(route-action "showFeatureTopic")
-            showChangeTimestamp=(route-action "showChangeTimestamp")
-            resetBumpDate=(action "resetBumpDate")
-            convertToPublicTopic=(action "convertToPublicTopic")
-            convertToPrivateMessage=(action "convertToPrivateMessage")
-            toggleBookmark=(action "toggleBookmark")
-            showFlagTopic=(route-action "showFlagTopic")
-            toggleArchiveMessage=(action "toggleArchiveMessage")
-            editFirstPost=(action "editFirstPost")
-            deferTopic=(action "deferTopic")
-            replyToPost=(action "replyToPost")}}
+          <TopicFooterButtons @topic={{model}} @toggleMultiSelect={{action "toggleMultiSelect"}} @showTopicSlowModeUpdate={{route-action "showTopicSlowModeUpdate"}} @deleteTopic={{action "deleteTopic"}} @recoverTopic={{action "recoverTopic"}} @toggleClosed={{action "toggleClosed"}} @toggleArchived={{action "toggleArchived"}} @toggleVisibility={{action "toggleVisibility"}} @showTopicTimerModal={{route-action "showTopicTimerModal"}} @showFeatureTopic={{route-action "showFeatureTopic"}} @showChangeTimestamp={{route-action "showChangeTimestamp"}} @resetBumpDate={{action "resetBumpDate"}} @convertToPublicTopic={{action "convertToPublicTopic"}} @convertToPrivateMessage={{action "convertToPrivateMessage"}} @toggleBookmark={{action "toggleBookmark"}} @showFlagTopic={{route-action "showFlagTopic"}} @toggleArchiveMessage={{action "toggleArchiveMessage"}} @editFirstPost={{action "editFirstPost"}} @deferTopic={{action "deferTopic"}} @replyToPost={{action "replyToPost"}} />
         {{else}}
           <div id="topic-footer-buttons">
-            {{d-button icon="reply" class="btn-primary pull-right" action=(route-action "showLogin") label="topic.reply.title"}}
+            <DButton @icon="reply" @class="btn-primary pull-right" @action={{route-action "showLogin"}} @label="topic.reply.title" />
           </div>
         {{/if}}
       {{/if}}
 
-      {{plugin-outlet name="topic-above-suggested" tagName="span" connectorTagName="div" args=(hash model=model)}}
+      <PluginOutlet @name="topic-above-suggested" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
       <div class="{{if model.relatedMessages.length "related-messages-wrapper"}} {{if model.suggestedTopics.length "suggested-topics-wrapper"}}">
         {{#if model.relatedMessages.length}}
-          {{related-messages topic=model}}
+          <RelatedMessages @topic={{model}} />
         {{/if}}
         {{#if model.suggestedTopics.length}}
-          {{suggested-topics topic=model}}
+          <SuggestedTopics @topic={{model}} />
         {{/if}}
       </div>
     {{/if}}
   {{else}}
     <div class="container">
-      {{#conditional-loading-spinner condition=noErrorYet}}
+      <ConditionalLoadingSpinner @condition={{noErrorYet}}>
         {{#if model.errorHtml}}
           <div class="not-found">{{html-safe model.errorHtml}}</div>
         {{else}}
@@ -394,23 +225,17 @@
             <div>{{model.errorMessage}}</div>
             {{#if model.noRetry}}
               {{#unless currentUser}}
-                {{d-button action=(route-action "showLogin") class="btn-primary topic-retry" icon="user" label="log_in"}}
+                <DButton @action={{route-action "showLogin"}} @class="btn-primary topic-retry" @icon="user" @label="log_in" />
               {{/unless}}
             {{else}}
-              {{d-button action=(action "retryLoading") class="btn-primary topic-retry" icon="sync" label="errors.buttons.again"}}
+              <DButton @action={{action "retryLoading"}} @class="btn-primary topic-retry" @icon="sync" @label="errors.buttons.again" />
             {{/if}}
           </div>
-          {{conditional-loading-spinner condition=retrying}}
+          <ConditionalLoadingSpinner @condition={{retrying}} />
         {{/if}}
-      {{/conditional-loading-spinner}}
+      </ConditionalLoadingSpinner>
     </div>
   {{/if}}
 
-  {{quote-button
-    quoteState=quoteState
-    selectText=(action "selectText")
-    editPost=(action "editPost")
-    topic=model
-    composerVisible=composer.visible
-  }}
-{{/discourse-topic}}
+  <QuoteButton @quoteState={{quoteState}} @selectText={{action "selectText"}} @editPost={{action "editPost"}} @topic={{model}} @composerVisible={{composer.visible}} />
+</DiscourseTopic>
diff --git a/app/assets/javascripts/discourse/app/templates/user-card.hbs b/app/assets/javascripts/discourse/app/templates/user-card.hbs
index fc75dbece53..16abdbbe714 100644
--- a/app/assets/javascripts/discourse/app/templates/user-card.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-card.hbs
@@ -2,15 +2,6 @@
   <div class="card-cloak hidden"></div>
 {{/if}}
 
-{{user-card-contents
-  topic=topic.model
-  showUser=(action "showUser")
-  filterPosts=(action "filterPosts")
-  composePrivateMessage=(route-action "composePrivateMessage")
-  createNewMessageViaParams=(route-action "createNewMessageViaParams")}}
+<UserCardContents @topic={{topic.model}} @showUser={{action "showUser"}} @filterPosts={{action "filterPosts"}} @composePrivateMessage={{route-action "composePrivateMessage"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} />
 
-{{group-card-contents
-  topic=topic.model
-  showUser=(action "showUser")
-  showGroup=(action "showGroup")
-  createNewMessageViaParams=(route-action "createNewMessageViaParams")}}
+<GroupCardContents @topic={{topic.model}} @showUser={{action "showUser"}} @showGroup={{action "showGroup"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} />
diff --git a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
index 4c5aeb8fa95..714209863b3 100644
--- a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
@@ -1,18 +1,18 @@
-{{#d-section pageClass="user-invites" tagName=""}}
+<DSection @pageClass="user-invites" @tagName="">
   {{#if canInviteToForum}}
-    {{#load-more class="user-content" selector=".user-invite-list tr" action=(action "loadMore")}}
-      {{#d-section class="user-additional-controls"}}
+    <LoadMore @class="user-content" @selector=".user-invite-list tr" @action={{action "loadMore"}}>
+      <DSection @class="user-additional-controls">
         {{#if showSearch}}
           <div class="user-invite-search">
-            <form>{{text-field value=searchTerm placeholderKey="user.invited.search"}}</form>
+            <form><TextField @value={{searchTerm}} @placeholderKey="user.invited.search" /></form>
           </div>
         {{/if}}
-        {{#d-section class="user-invite-buttons"}}
-          {{d-button class="btn-default" icon="plus" action=(action "createInvite") label="user.invited.create"}}
+        <DSection @class="user-invite-buttons">
+          <DButton @class="btn-default" @icon="plus" @action={{action "createInvite"}} @label="user.invited.create" />
           {{#if canBulkInvite}}
             {{#if siteSettings.allow_bulk_invite}}
               {{#unless site.mobileView}}
-                {{d-button class="btn-flat" icon="upload" action=(action "createInviteCsv") label="user.invited.bulk_invite.text"}}
+                <DButton @class="btn-flat" @icon="upload" @action={{action "createInviteCsv"}} @label="user.invited.bulk_invite.text" />
               {{/unless}}
             {{/if}}
           {{/if}}
@@ -23,22 +23,22 @@
                   {{i18n "user.invited.removed_all"}}
                 </span>
               {{else}}
-                {{d-button icon="times" action=(action "destroyAllExpired") label="user.invited.remove_all"}}
+                <DButton @icon="times" @action={{action "destroyAllExpired"}} @label="user.invited.remove_all" />
               {{/if}}
             {{/if}}
 
             {{#if invitePending}}
               {{#if reinvitedAll}}
                 <span class="reinvited-all">
-                  {{d-button icon="check" disabled=true label="user.invited.reinvited_all"}}
+                  <DButton @icon="check" @disabled={{true}} @label="user.invited.reinvited_all" />
                 </span>
               {{else if hasEmailInvites}}
-                {{d-button class="btn-default" icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}}
+                <DButton @class="btn-default" @icon="sync" @action={{action "reinviteAll"}} @label="user.invited.reinvite_all" />
               {{/if}}
             {{/if}}
           {{/if}}
-        {{/d-section}}
-      {{/d-section}}
+        </DSection>
+      </DSection>
       <section>
         {{#if model.invites}}
           {{#if inviteRedeemed}}
@@ -61,8 +61,8 @@
                 {{#each model.invites as |invite|}}
                   <tr>
                     <td>
-                      {{#link-to "user" invite.user}}{{avatar invite.user imageSize="tiny"}}{{/link-to}}
-                      {{#link-to "user" invite.user}}{{invite.user.username}}{{/link-to}}
+                      <LinkTo @route="user" @model={{invite.user}}>{{avatar invite.user imageSize="tiny"}}</LinkTo>
+                      <LinkTo @route="user" @model={{invite.user}}>{{invite.user.username}}</LinkTo>
                     </td>
                     <td>{{format-date invite.redeemed_at}}</td>
                     {{#if model.can_see_invite_details}}
@@ -128,8 +128,8 @@
                     </td>
 
                     <td class="invite-actions">
-                      {{d-button class="btn-default" icon="pencil-alt" action=(action "editInvite" invite) title="user.invited.edit"}}
-                      {{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}
+                      <DButton @class="btn-default" @icon="pencil-alt" @action={{action "editInvite" invite}} @title="user.invited.edit" />
+                      <DButton @icon="trash-alt" @class="cancel" @action={{action "destroyInvite" invite}} @title={{if invite.destroyed "user.invited.removed" "user.invited.remove"}} />
                     </td>
                   </tr>
                 {{/each}}
@@ -137,7 +137,7 @@
             </table>
           {{/if}}
 
-          {{conditional-loading-spinner condition=invitesLoading}}
+          <ConditionalLoadingSpinner @condition={{invitesLoading}} />
         {{else}}
           <div class="user-invite-none">
             {{#if canBulkInvite}}
@@ -148,10 +148,10 @@
           </div>
         {{/if}}
       </section>
-    {{/load-more}}
+    </LoadMore>
   {{else}}
     <div class="alert alert-error invite-error">
       {{model.error}}
     </div>
   {{/if}}
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/user-invited.hbs b/app/assets/javascripts/discourse/app/templates/user-invited.hbs
index f038f9418d7..783c130bd6a 100644
--- a/app/assets/javascripts/discourse/app/templates/user-invited.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-invited.hbs
@@ -1,11 +1,11 @@
 {{#if can_see_invite_details}}
-  {{#d-section class="user-secondary-navigation" pageClass="user-invites"}}
-    {{#mobile-nav class="invites-nav" desktopClass="nav-stacked action-list"}}
-      {{nav-item route="userInvited.show" routeParam="pending" i18nLabel=pendingLabel}}
-      {{nav-item route="userInvited.show" routeParam="expired" i18nLabel=expiredLabel}}
-      {{nav-item route="userInvited.show" routeParam="redeemed" i18nLabel=redeemedLabel}}
-    {{/mobile-nav}}
-  {{/d-section}}
+  <DSection @class="user-secondary-navigation" @pageClass="user-invites">
+    <MobileNav @class="invites-nav" @desktopClass="nav-stacked action-list">
+      <NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{pendingLabel}} />
+      <NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{expiredLabel}} />
+      <NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{redeemedLabel}} />
+    </MobileNav>
+  </DSection>
 {{/if}}
 
 {{outlet}}
diff --git a/app/assets/javascripts/discourse/app/templates/user-private-messages-tags.hbs b/app/assets/javascripts/discourse/app/templates/user-private-messages-tags.hbs
index 68c054b801b..3d8233bf035 100644
--- a/app/assets/javascripts/discourse/app/templates/user-private-messages-tags.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-private-messages-tags.hbs
@@ -21,5 +21,5 @@
 <hr>
 
 {{#if model}}
-  {{tag-list tags=model sortProperties=sortProperties titleKey="tagging.all_tags" isPrivateMessage=true tagsForUser=tagsForUser}}
+  <TagList @tags={{model}} @sortProperties={{sortProperties}} @titleKey="tagging.all_tags" @isPrivateMessage={{true}} @tagsForUser={{tagsForUser}} />
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
index 21f989da460..38320de86ef 100644
--- a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
@@ -4,45 +4,21 @@
     @body={{model.emptyState.body}}
   />
 {{else}}
-  {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list .topic-list-item" action=(action "loadMore")}}
-    {{topic-dismiss-buttons
-      position="top"
-      selectedTopics=selected
-      model=model
-      showResetNew=showResetNew
-      showDismissRead=showDismissRead
-      resetNew=(action "resetNew")}}
+  <LoadMore @class="paginated-topics-list" @selector=".paginated-topics-list .topic-list .topic-list-item" @action={{action "loadMore"}}>
+    <TopicDismissButtons @position="top" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
     {{#if (gt incomingCount 0)}}
       <div class="show-mores">
         <a tabindex="0" href {{action "showInserted"}} class="alert alert-info clickable">
-          {{count-i18n key="topic_count_" suffix="latest" count=incomingCount}}
+          <CountI18n @key="topic_count_" @suffix="latest" @count={{incomingCount}} />
         </a>
       </div>
     {{/if}}
 
-    {{basic-topic-list topicList=model
-      hideCategory=hideCategory
-      showPosters=showPosters
-      bulkSelectEnabled=bulkSelectEnabled
-      bulkSelectAction=(action "refresh")
-      selected=selected
-      tagsForUser=tagsForUser
-      onScroll=saveScrollPosition
-      canBulkSelect=canBulkSelect
-      scrollOnLoad=true
-      toggleBulkSelect=(action "toggleBulkSelect")
-      updateAutoAddTopicsToBulkSelect=(action "updateAutoAddTopicsToBulkSelect")
-    }}
+    <BasicTopicList @topicList={{model}} @hideCategory={{hideCategory}} @showPosters={{showPosters}} @bulkSelectEnabled={{bulkSelectEnabled}} @bulkSelectAction={{action "refresh"}} @selected={{selected}} @tagsForUser={{tagsForUser}} @onScroll={{saveScrollPosition}} @canBulkSelect={{canBulkSelect}} @scrollOnLoad={{true}} @toggleBulkSelect={{action "toggleBulkSelect"}} @updateAutoAddTopicsToBulkSelect={{action "updateAutoAddTopicsToBulkSelect"}} />
 
-    {{topic-dismiss-buttons
-      position="bottom"
-      selectedTopics=selected
-      model=model
-      showResetNew=showResetNew
-      showDismissRead=showDismissRead
-      resetNew=(action "resetNew")}}
+    <TopicDismissButtons @position="bottom" @selectedTopics={{selected}} @model={{model}} @showResetNew={{showResetNew}} @showDismissRead={{showDismissRead}} @resetNew={{action "resetNew"}} />
 
-    {{conditional-loading-spinner condition=model.loadingMore}}
-  {{/load-more}}
+    <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
+  </LoadMore>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs
index a95ce0cede6..88577a3c47c 100644
--- a/app/assets/javascripts/discourse/app/templates/user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user.hbs
@@ -1,6 +1,6 @@
-{{plugin-outlet name="above-user-profile" connectorTagName="div" args=(hash model=model)}}
+<PluginOutlet @name="above-user-profile" @connectorTagName="div" @args={{hash model=model}} />
 <div class="container {{if viewingSelf "viewing-self"}} {{if model.profile_hidden "profile-hidden"}} {{primaryGroup}}">
-  {{#d-section class="user-main"}}
+  <DSection @class="user-main">
     <section class="{{if collapsedInfo "collapsed-info"}} about {{if hasProfileBackgroundUrl "has-background" "no-background"}}" >
       {{#unless collapsedInfo}}
         {{#if showStaffCounters}}
@@ -10,24 +10,24 @@
             {{/if}}
             {{#if model.number_of_flagged_posts}}
               <div>
-                {{#link-to "review" (query-params username=model.username status="all" type="ReviewableFlaggedPost")}}
+                <LinkTo @route="review" @query={{hash username=model.username status="all" type="ReviewableFlaggedPost"}}>
                   <span class="flagged-posts">{{model.number_of_flagged_posts}}</span>{{i18n "user.staff_counters.flagged_posts"}}
-                {{/link-to}}
+                </LinkTo>
               </div>
             {{/if}}
             {{#if model.number_of_rejected_posts}}
               <div>
-                {{#link-to "review" (query-params username=model.username status="rejected" type="ReviewableQueuedPost")}}
+                <LinkTo @route="review" @query={{hash username=model.username status="rejected" type="ReviewableQueuedPost"}}>
                   <span class="flagged-posts">{{model.number_of_rejected_posts}}</span>{{i18n "user.staff_counters.rejected_posts"}}
-                {{/link-to}}
+                </LinkTo>
               </div>
             {{/if}}
 
             {{#if model.number_of_deleted_posts}}
               <div>
-                {{#link-to "user.deletedPosts" model}}
+                <LinkTo @route="user.deletedPosts" @model={{model}}>
                   <span class="deleted-posts">{{model.number_of_deleted_posts}}</span>{{i18n "user.staff_counters.deleted_posts"}}
-                {{/link-to}}
+                </LinkTo>
               </div>
             {{/if}}
             {{#if model.number_of_suspensions}}
@@ -39,9 +39,9 @@
             {{/if}}
             {{#if model.warnings_received_count}}
               <div>
-                {{#link-to "userPrivateMessages.warnings" model}}
+                <LinkTo @route="userPrivateMessages.warnings" @model={{model}}>
                   <span class="warnings-received">{{model.warnings_received_count}}</span>{{i18n "user.staff_counters.warnings_received"}}
-                {{/link-to}}
+                </LinkTo>
               </div>
             {{/if}}
           </div>
@@ -50,45 +50,28 @@
       {{/unless}}
       <div class="details">
         <div class="primary">
-          {{plugin-outlet name="before-user-profile-avatar" args=(hash model=model)}}
-          {{user-profile-avatar user=model tagName=""}}
+          <PluginOutlet @name="before-user-profile-avatar" @args={{hash model=model}} />
+          <UserProfileAvatar @user={{model}} @tagName="" />
           <section class="controls">
             <ul>
               {{#if model.can_send_private_message_to_user}}
                 <li>
-                  {{d-button class="btn-primary compose-pm"
-                    action=(route-action "composePrivateMessage" model)
-                    icon="envelope"
-                    label="user.private_message"}}
+                  <DButton @class="btn-primary compose-pm" @action={{route-action "composePrivateMessage" model}} @icon="envelope" @label="user.private_message" />
                 </li>
               {{/if}}
               {{#if canMuteOrIgnoreUser}}
                 <li>
-                  {{user-notifications-dropdown
-                      user=model
-                      value=userNotificationLevel
-                      updateNotificationLevel=(action "updateNotificationLevel")
-                  }}
+                  <UserNotificationsDropdown @user={{model}} @value={{userNotificationLevel}} @updateNotificationLevel={{action "updateNotificationLevel"}} />
                 </li>
               {{/if}}
               {{#if currentUser.staff}}
                 <li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}<span class="d-button-label">{{i18n "admin.user.show_admin_profile"}}</span></a></li>
               {{/if}}
-              {{plugin-outlet name="user-profile-controls"
-                              connectorTagName="li"
-                              args=(hash model=model)}}
+              <PluginOutlet @name="user-profile-controls" @connectorTagName="li" @args={{hash model=model}} />
 
               {{#if canExpandProfile}}
                 <li>
-                  {{d-button
-                    ariaExpanded=collapsedInfoState.isExpanded
-                    ariaLabel=collapsedInfoState.ariaLabel
-                    ariaControls="collapsed-info-panel"
-                    class="btn-default"
-                    label=(concat "user." collapsedInfoState.label)
-                    icon=collapsedInfoState.icon
-                    action=(action collapsedInfoState.action)
-                  }}
+                  <DButton @ariaExpanded={{collapsedInfoState.isExpanded}} @ariaLabel={{collapsedInfoState.ariaLabel}} @ariaControls="collapsed-info-panel" @class="btn-default" @label={{concat "user." collapsedInfoState.label}} @icon={{collapsedInfoState.icon}} @action={{action collapsedInfoState.action}} />
                 </li>
               {{/if}}
             </ul>
@@ -104,13 +87,13 @@
               {{#if model.title}}
                 <h3>{{model.title}}</h3>
               {{/if}}
-              {{plugin-outlet name="user-post-names" tagName="span" connectorTagName="div" args=(hash model=model)}}
+              <PluginOutlet @name="user-post-names" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
             </div>
 
             {{#if showFeaturedTopic}}
               <h3 class="featured-topic">
                 <span>{{i18n "user.featured_topic"}}</span>
-                {{#link-to "topic" model.featured_topic.slug model.featured_topic.id}}{{html-safe (replace-emoji model.featured_topic.fancy_title)}}{{/link-to}}
+                <LinkTo @route="topic" @models={{array model.featured_topic.slug model.featured_topic.id}}>{{html-safe (replace-emoji model.featured_topic.fancy_title)}}</LinkTo>
               </h3>
             {{/if}}
 
@@ -127,7 +110,7 @@
                   {{/if}}
                 </div>
               {{/if}}
-              {{plugin-outlet name="user-location-and-website" tagName="span" connectorTagName="div" args=(hash model=model)}}
+              <PluginOutlet @name="user-location-and-website" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
             </h3>
 
             <div class='bio'>
@@ -148,9 +131,9 @@
                 </div>
               {{/if}}
               {{#if isNotSuspendedOrIsStaff}}
-                {{#html-with-links}}
+                <HtmlWithLinks>
                   {{html-safe model.bio_cooked}}
-                {{/html-with-links}}
+                </HtmlWithLinks>
               {{/if}}
             </div>
 
@@ -171,16 +154,15 @@
                   {{/if}}
                 {{/each}}
 
-                {{plugin-outlet name="user-profile-public-fields" tagName="span" connectorTagName="div"
-                                args=(hash publicUserFields=publicUserFields
-                                      model=model)}}
+                <PluginOutlet @name="user-profile-public-fields" @tagName="span" @connectorTagName="div" @args={{hash publicUserFields=publicUserFields
+                                      model=model}} />
               </div>
             {{/if}}
 
-            {{plugin-outlet name="user-profile-primary" tagName="span" connectorTagName="div" args=(hash model=model)}}
+            <PluginOutlet @name="user-profile-primary" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
           </div>
         </div>
-        {{plugin-outlet name="user-profile-above-collapsed-info" args=(hash model=model collapsedInfo=collapsedInfo)}}
+        <PluginOutlet @name="user-profile-above-collapsed-info" @args={{hash model=model collapsedInfo=collapsedInfo}} />
         {{#unless collapsedInfo}}
           <div class='secondary' id='collapsed-info-panel'>
             <dl>
@@ -197,7 +179,7 @@
                 <div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
               {{/if}}
               {{#if model.invited_by}}
-                <div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
+                <div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by"><LinkTo @route="user" @model={{model.invited_by}}>{{model.invited_by.username}}</LinkTo></dd></div>
               {{/if}}
               {{#if model.trust_level}}
                 <div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
@@ -208,7 +190,7 @@
                   {{#if model.email}}
                     {{model.email}}
                   {{else}}
-                    {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
+                    <DButton @action={{route-action "checkEmail"}} @actionParam={{model}} @icon="far-envelope" @label="admin.users.check_email.text" @class="btn-primary" />
                   {{/if}}
                 </dd>
                 </div>
@@ -217,55 +199,55 @@
                 <div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
                 <dd class='groups'>
                   {{#each model.displayGroups as |group|}}
-                    <span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
+                    <span><LinkTo @route="group" @model={{group.name}} class="group-link">{{group.name}}</LinkTo></span>
                   {{/each}}
 
-                  {{#link-to "groups" (query-params username=model.username)}}
+                  <LinkTo @route="groups" @query={{hash username=model.username}}>
                     ...
-                  {{/link-to}}
+                  </LinkTo>
                 </dd>
                 </div>
               {{/if}}
 
               {{#if canDeleteUser}}
-                <div class='pull-right'>{{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
+                <div class='pull-right'><DButton @action={{action "adminDelete"}} @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" /></div>
               {{/if}}
             </dl>
-            {{plugin-outlet name="user-profile-secondary" tagName="span" connectorTagName="div" args=(hash model=model)}}
+            <PluginOutlet @name="user-profile-secondary" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
           </div>
         {{/unless}}
       </div>
     </section>
     <div class='user-content-wrapper'>
       <section class="user-primary-navigation">
-        {{#mobile-nav class='main-nav' desktopClass="nav nav-pills user-nav"}}
+        <MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
           {{#unless model.profile_hidden}}
-            <li class="summary">{{#link-to 'user.summary'}}{{i18n 'user.summary.title'}}{{/link-to}}</li>
-            <li class="activity">{{#link-to 'userActivity'}}{{i18n 'user.activity_stream'}}{{/link-to}}</li>
+            <li class="summary"><LinkTo @route="user.summary">{{i18n 'user.summary.title'}}</LinkTo></li>
+            <li class="activity"><LinkTo @route="userActivity">{{i18n 'user.activity_stream'}}</LinkTo></li>
           {{/unless}}
           {{#if showNotificationsTab}}
             <li class="user-notifications">
-              {{#link-to 'userNotifications'}}
+              <LinkTo @route="userNotifications">
                 {{d-icon "comment" class="glyph"}}{{i18n 'user.notifications'}}
-              {{/link-to}}
+              </LinkTo>
             </li>
           {{/if}}
           {{#if showPrivateMessages}}
-            <li class="private-messages">{{#link-to 'userPrivateMessages'}}{{d-icon "far-envelope"}}{{i18n 'user.private_messages'}}{{/link-to}}</li>
+            <li class="private-messages"><LinkTo @route="userPrivateMessages">{{d-icon "far-envelope"}}{{i18n 'user.private_messages'}}</LinkTo></li>
           {{/if}}
           {{#if canInviteToForum}}
-            <li class="invited">{{#link-to 'userInvited'}}{{d-icon "user-plus"}}{{i18n 'user.invited.title'}}{{/link-to}}</li>
+            <li class="invited"><LinkTo @route="userInvited">{{d-icon "user-plus"}}{{i18n 'user.invited.title'}}</LinkTo></li>
           {{/if}}
           {{#if showBadges}}
-            <li class="badges">{{#link-to 'user.badges'}}{{d-icon "certificate"}}{{i18n 'badges.title'}}{{/link-to}}</li>
+            <li class="badges"><LinkTo @route="user.badges">{{d-icon "certificate"}}{{i18n 'badges.title'}}</LinkTo></li>
           {{/if}}
-          {{plugin-outlet name="user-main-nav" tagName="span" connectorTagName="div" tagName='' connectorTagName='li' args=(hash model=model)}}
+          <PluginOutlet @name="user-main-nav" @tagName="span" @connectorTagName="div" @tagName="" @connectorTagName="li" @args={{hash model=model}} />
           {{#if model.can_edit}}
-            <li class="preferences">{{#link-to 'preferences'}}{{d-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>
+            <li class="preferences"><LinkTo @route="preferences">{{d-icon "cog"}}{{i18n 'user.preferences'}}</LinkTo></li>
           {{/if}}
-        {{/mobile-nav}}
+        </MobileNav>
       </section>
     {{outlet}}
   </div>
-  {{/d-section}}
+  </DSection>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/user/activity.hbs b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
index 26ddb03eef4..1ab5ded3e8f 100644
--- a/app/assets/javascripts/discourse/app/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
@@ -1,45 +1,41 @@
-{{#d-section pageClass="user-activity" class="user-secondary-navigation" scrollTop=false}}
+<DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}>
   <nav role="navigation">
-    {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked"}}
-      {{#d-navigation-item route="userActivity.index"}}{{i18n "user.filters.all"}}{{/d-navigation-item}}
-      {{#d-navigation-item route="userActivity.topics"}}{{i18n "user_action_groups.4"}}{{/d-navigation-item}}
-      {{#d-navigation-item route="userActivity.replies"}}{{i18n "user_action_groups.5"}}{{/d-navigation-item}}
+    <MobileNav @class="activity-nav" @desktopClass="action-list activity-list nav-stacked">
+      <DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem>
+      <DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem>
+      <DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem>
 
       {{#if user.showRead}}
-        {{#d-navigation-item route="userActivity.read" title=(i18n "user.read_help")}}
+        <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
           {{i18n "user.read"}}
-        {{/d-navigation-item}}
+        </DNavigationItem>
       {{/if}}
 
       {{#if user.showDrafts}}
-        {{#d-navigation-item route="userActivity.drafts"}}
+        <DNavigationItem @route="userActivity.drafts">
           {{draftLabel}}
-        {{/d-navigation-item}}
+        </DNavigationItem>
       {{/if}}
 
       {{#if (gt model.pending_posts_count 0)}}
-        {{#d-navigation-item route="userActivity.pending"}}
+        <DNavigationItem @route="userActivity.pending">
           {{pendingLabel}}
-        {{/d-navigation-item}}
+        </DNavigationItem>
       {{/if}}
 
-      {{#d-navigation-item route="userActivity.likesGiven"}}{{i18n "user_action_groups.1"}}{{/d-navigation-item}}
+      <DNavigationItem @route="userActivity.likesGiven">{{i18n "user_action_groups.1"}}</DNavigationItem>
 
       {{#if user.showBookmarks}}
-        {{#d-navigation-item route="userActivity.bookmarks"}}{{i18n "user_action_groups.3"}}{{/d-navigation-item}}
+        <DNavigationItem @route="userActivity.bookmarks">{{i18n "user_action_groups.3"}}</DNavigationItem>
       {{/if}}
 
-      {{plugin-outlet
-        name="user-activity-bottom" tagName="span"
-        connectorTagName="li"
-        args=(hash model=model)
-      }}
-    {{/mobile-nav}}
+      <PluginOutlet @name="user-activity-bottom" @tagName="span" @connectorTagName="li" @args={{hash model=model}} />
+    </MobileNav>
   </nav>
-{{/d-section}}
+</DSection>
 {{#if canDownloadPosts}}
   <section class="user-additional-controls">
-    {{d-button action=(action "exportUserArchive") class="btn-default" label="user.download_archive.button_text" icon="download"}}
+    <DButton @action={{action "exportUserArchive"}} @class="btn-default" @label="user.download_archive.button_text" @icon="download" />
   </section>
 {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/user/badges.hbs b/app/assets/javascripts/discourse/app/templates/user/badges.hbs
index 2a865c1c3c2..b6bffb1403b 100644
--- a/app/assets/javascripts/discourse/app/templates/user/badges.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/badges.hbs
@@ -1,21 +1,12 @@
-{{#d-section pageClass="user-badges" class="user-content"}}
+<DSection @pageClass="user-badges" @class="user-content">
   <p class="favorite-count">
     {{i18n "badges.favorite_count" count=this.favoriteBadges.length max=siteSettings.max_favorite_badges}}
   </p>
 
   <div class="badge-group-list">
     {{#each sortedBadges as |ub|}}
-      {{badge-card
-        badge=ub.badge
-        count=ub.count
-        canFavorite=ub.can_favorite
-        isFavorite=ub.is_favorite
-        username=username
-        canFavoriteMoreBadges=canFavoriteMoreBadges
-        onFavoriteClick=(action "favorite" ub)
-        filterUser="true"
-      }}
+      <BadgeCard @badge={{ub.badge}} @count={{ub.count}} @canFavorite={{ub.can_favorite}} @isFavorite={{ub.is_favorite}} @username={{username}} @canFavoriteMoreBadges={{canFavoriteMoreBadges}} @onFavoriteClick={{action "favorite" ub}} @filterUser="true" />
     {{/each}}
-    {{plugin-outlet name="after-user-profile-badges" args=(hash user=user.model)}}
+    <PluginOutlet @name="after-user-profile-badges" @args={{hash user=user.model}} />
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs b/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
index d9d8583c66f..43699404483 100644
--- a/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
@@ -1,4 +1,4 @@
-{{#conditional-loading-spinner condition=loading}}
+<ConditionalLoadingSpinner @condition={{loading}}>
   {{#if permissionDenied}}
     <div class="alert alert-info">{{i18n "bookmarks.list_permission_denied"}}</div>
   {{else if userDoesNotHaveBookmarks}}
@@ -8,29 +8,13 @@
     />
   {{else}}
     <div class="inline-form full-width bookmark-search-form">
-      {{input type="text"
-        value=searchTerm
-        placeholder=(i18n "bookmarks.search_placeholder")
-        enter=(action "search")
-        id="bookmark-search"
-        autocomplete="off"
-      }}
-      {{d-button
-        class="btn-primary"
-        action=(action "search")
-        type="button"
-        icon="search"
-      }}
+      <Input @type="text" @value={{searchTerm}} placeholder={{i18n "bookmarks.search_placeholder"}} @enter={{action "search"}} @id="bookmark-search" @autocomplete="off" />
+      <DButton @class="btn-primary" @action={{action "search"}} @type="button" @icon="search" />
     </div>
     {{#if nothingFound}}
       <div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div>
     {{else}}
-      {{bookmark-list
-        loadMore=(action "loadMore")
-        reload=(action "reload")
-        loadingMore=loadingMore
-        content=model.bookmarks
-      }}
+      <BookmarkList @loadMore={{action "loadMore"}} @reload={{action "reload"}} @loadingMore={{loadingMore}} @content={{model.bookmarks}} />
     {{/if}}
   {{/if}}
-{{/conditional-loading-spinner}}
+</ConditionalLoadingSpinner>
diff --git a/app/assets/javascripts/discourse/app/templates/user/messages.hbs b/app/assets/javascripts/discourse/app/templates/user/messages.hbs
index db701785f80..f8c1cbb2f7f 100644
--- a/app/assets/javascripts/discourse/app/templates/user/messages.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/messages.hbs
@@ -1,67 +1,67 @@
-{{#d-section class="user-secondary-navigation" pageClass="user-messages"}}
-  {{#mobile-nav class="messages-nav" desktopClass="nav-stacked action-list"}}
+<DSection @class="user-secondary-navigation" @pageClass="user-messages">
+  <MobileNav @class="messages-nav" @desktopClass="nav-stacked action-list">
     <li>
-      {{#link-to "userPrivateMessages.index" model}}
+      <LinkTo @route="userPrivateMessages.index" @model={{model}}>
         {{i18n "user.messages.inbox"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
 
     {{#if isPersonal}}
       <li class="archive">
-        {{#link-to "userPrivateMessages.sent" model}}
+        <LinkTo @route="userPrivateMessages.sent" @model={{model}}>
           {{i18n "user.messages.sent"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
 
       {{#if viewingSelf}}
         <li class="archive">
-          {{#link-to "userPrivateMessages.new" model class="new"}}
+          <LinkTo @route="userPrivateMessages.new" @model={{model}} class="new">
             {{newLinkText}}
-          {{/link-to}}
+          </LinkTo>
         </li>
 
         <li class="archive">
-          {{#link-to "userPrivateMessages.unread" model class="unread"}}
+          <LinkTo @route="userPrivateMessages.unread" @model={{model}} class="unread">
             {{unreadLinkText}}
-          {{/link-to}}
+          </LinkTo>
         </li>
       {{/if}}
 
       <li class="archive">
-        {{#link-to "userPrivateMessages.archive" model}}
+        <LinkTo @route="userPrivateMessages.archive" @model={{model}}>
           {{i18n "user.messages.archive"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
 
     {{#each model.groups as |group|}}
       {{#if group.has_messages}}
         <li>
-          {{#link-to "userPrivateMessages.group" group.name}}
+          <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
             {{d-icon "users"}}
             {{capitalize-string group.name}}
-          {{/link-to}}
+          </LinkTo>
         </li>
 
         {{#if (and isGroup (eq groupFilter group.name))}}
           {{#if viewingSelf}}
             <li class="archive">
-              {{#link-to "userPrivateMessages.groupNew" group.name class="new"}}
+              <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
                 {{newLinkText}}
-              {{/link-to}}
+              </LinkTo>
             </li>
 
             <li class="archive">
-              {{#link-to "userPrivateMessages.groupUnread" group.name class="unread"}}
+              <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
                 {{unreadLinkText}}
-              {{/link-to}}
+              </LinkTo>
             </li>
           {{/if}}
 
           <li class="archive">
-            {{#link-to "userPrivateMessages.groupArchive" group.name}}
+            <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
               {{i18n "user.messages.archive"}}
-            {{/link-to}}
+            </LinkTo>
           </li>
         {{/if}}
       {{/if}}
@@ -69,35 +69,32 @@
 
     {{#if pmTaggingEnabled}}
       <li class="tags">
-        {{#link-to "userPrivateMessages.tags" model}}
+        <LinkTo @route="userPrivateMessages.tags" @model={{model}}>
           {{i18n "user.messages.tags"}}
-        {{/link-to}}
+        </LinkTo>
 
         {{#if tagId}}
           <li class="archive">
-            {{#link-to "userPrivateMessages.tagsShow" tagId}}
+            <LinkTo @route="userPrivateMessages.tagsShow" @model={{tagId}}>
               {{tagId}}
-            {{/link-to}}
+            </LinkTo>
           </li>
         {{/if}}
       </li>
     {{/if}}
 
-    {{plugin-outlet name="user-messages-nav" tagName="span" connectorTagName="li" args=(hash model=model)}}
-  {{/mobile-nav}}
-{{/d-section}}
+    <PluginOutlet @name="user-messages-nav" @tagName="span" @connectorTagName="li" @args={{hash model=model}} />
+  </MobileNav>
+</DSection>
 
 {{#unless site.mobileView}}
   <section class="user-additional-controls">
     {{#if group}}
-      {{group-notifications-button
-        value=group.group_user.notification_level
-        onChange=(action "changeGroupNotificationLevel")
-      }}
+      <GroupNotificationsButton @value={{group.group_user.notification_level}} @onChange={{action "changeGroupNotificationLevel"}} />
     {{/if}}
 
     {{#if showNewPM}}
-      {{d-button class="btn-primary new-private-message" action=(route-action "composePrivateMessage") icon="envelope" label="user.new_private_message"}}
+      <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
     {{/if}}
   </section>
 {{/unless}}
@@ -105,11 +102,7 @@
 <section class="user-content">
   <div class="list-actions">
     {{#if (and site.mobileView showNewPM)}}
-      {{d-button
-        class="btn-primary new-private-message"
-        action=(route-action "composePrivateMessage")
-        icon="envelope"
-        label="user.new_private_message"}}
+      <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
     {{/if}}
   </div>
 
diff --git a/app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs b/app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs
index d1a35c252f0..fbc1be3e8f1 100644
--- a/app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs
@@ -13,13 +13,13 @@
   />
 {{else}}
   <div class="user-notifications-filter">
-    {{notifications-filter value=filter onChange=(action (mut filter))}}
+    <NotificationsFilter @value={{filter}} @onChange={{action (mut filter)}} />
   </div>
 
   {{#if nothingFound}}
     <div class="alert alert-info">{{i18n "notifications.empty"}}</div>
   {{else}}
-    {{user-notifications-large notifications=model}}
-    {{conditional-loading-spinner condition=loading}}
+    <UserNotificationsLarge @notifications={{model}} />
+    <ConditionalLoadingSpinner @condition={{loading}} />
   {{/if}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
index b4a4b1a639c..f626b3522ff 100644
--- a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
@@ -1,56 +1,46 @@
-{{#d-section pageClass="user-notifications" class="user-secondary-navigation"}}
-  {{#mobile-nav class="notifications-nav" desktopClass="notification-list action-list nav-stacked"}}
+<DSection @pageClass="user-notifications" @class="user-secondary-navigation">
+  <MobileNav @class="notifications-nav" @desktopClass="notification-list action-list nav-stacked">
     <li>
-      {{#link-to "userNotifications.index"}}
+      <LinkTo @route="userNotifications.index">
         {{i18n "user.filters.all"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li>
-      {{#link-to "userNotifications.responses"}}
+      <LinkTo @route="userNotifications.responses">
         {{i18n "user_action_groups.6"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     <li>
-      {{#link-to "userNotifications.likesReceived"}}
+      <LinkTo @route="userNotifications.likesReceived">
         {{i18n "user_action_groups.2"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
     {{#if siteSettings.enable_mentions}}
       <li>
-        {{#link-to "userNotifications.mentions"}}
+        <LinkTo @route="userNotifications.mentions">
           {{i18n "user_action_groups.7"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
     <li>
-      {{#link-to "userNotifications.edits"}}
+      <LinkTo @route="userNotifications.edits">
         {{i18n "user_action_groups.11"}}
-      {{/link-to}}
+      </LinkTo>
     </li>
-    {{plugin-outlet
-      name="user-notifications-bottom" tagName="span"
-      connectorTagName="li"
-      args=(hash model=model)}}
-  {{/mobile-nav}}
+    <PluginOutlet @name="user-notifications-bottom" @tagName="span" @connectorTagName="li" @args={{hash model=model}} />
+  </MobileNav>
 
-{{/d-section}}
+</DSection>
 
 {{#if model}}
   <section class="user-additional-controls">
-    {{d-button
-      title="user.dismiss_notifications_tooltip"
-      class="btn btn-default dismiss-notifications"
-      action=(action "resetNew")
-      label="user.dismiss_notifications"
-      icon="check"
-      disabled=allNotificationsRead
-    }}
+    <DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{allNotificationsRead}} />
   </section>
 {{/if}}
 
 <section class="user-content">
-  {{#load-more class="notification-history user-stream" selector=".user-stream .notification" action=(action "loadMore")}}
+  <LoadMore @class="notification-history user-stream" @selector=".user-stream .notification" @action={{action "loadMore"}}>
     {{outlet}}
-    {{conditional-loading-spinner condition=model.loadingMore}}
-  {{/load-more}}
+    <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
+  </LoadMore>
 </section>
diff --git a/app/assets/javascripts/discourse/app/templates/user/posts.hbs b/app/assets/javascripts/discourse/app/templates/user/posts.hbs
index b1743bf0771..384e96d0057 100644
--- a/app/assets/javascripts/discourse/app/templates/user/posts.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/posts.hbs
@@ -1 +1 @@
-{{user-stream stream=model}}
+<UserStream @stream={{model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/user/stream.hbs b/app/assets/javascripts/discourse/app/templates/user/stream.hbs
index 32c237787d3..7b5b7247734 100644
--- a/app/assets/javascripts/discourse/app/templates/user/stream.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/stream.hbs
@@ -8,4 +8,4 @@
     />
   {{/if}}
 {{/if}}
-{{user-stream stream=model.stream}}
+<UserStream @stream={{model.stream}} />
diff --git a/app/assets/javascripts/discourse/app/templates/user/summary.hbs b/app/assets/javascripts/discourse/app/templates/user/summary.hbs
index c88a13d817a..70bcac97fb6 100644
--- a/app/assets/javascripts/discourse/app/templates/user/summary.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/summary.hbs
@@ -1,81 +1,73 @@
-{{#d-section pageClass="user-summary" tagName=""}}
+<DSection @pageClass="user-summary" @tagName="">
   <div class="user-content">
-    {{plugin-outlet name="above-user-summary-stats" args=(hash model=model user=user)}}
+    <PluginOutlet @name="above-user-summary-stats" @args={{hash model=model user=user}} />
     {{#if model.can_see_summary_stats}}
       <div class="top-section stats-section">
         <h3 class="stats-title">{{i18n "user.summary.stats"}}</h3>
         <ul>
           <li class="stats-days-visited">
-            {{user-stat value=model.days_visited label="user.summary.days_visited"}}
+            <UserStat @value={{model.days_visited}} @label="user.summary.days_visited" />
           </li>
           <li class="stats-time-read">
-            {{user-stat value=timeRead label="user.summary.time_read" rawTitle=(i18n "user.summary.time_read_title" duration=timeReadMedium) type="string"}}
+            <UserStat @value={{timeRead}} @label="user.summary.time_read" @rawTitle={{i18n "user.summary.time_read_title" duration=timeReadMedium}} @type="string" />
           </li>
           {{#if showRecentTimeRead}}
             <li class="stats-recent-read">
-              {{user-stat value=recentTimeRead label="user.summary.recent_time_read" rawTitle=(i18n "user.summary.recent_time_read_title" duration=recentTimeReadMedium) type="string"}}
+              <UserStat @value={{recentTimeRead}} @label="user.summary.recent_time_read" @rawTitle={{i18n "user.summary.recent_time_read_title" duration=recentTimeReadMedium}} @type="string" />
             </li>
           {{/if}}
           <li class="stats-topics-entered">
-            {{user-stat value=model.topics_entered label="user.summary.topics_entered"}}
+            <UserStat @value={{model.topics_entered}} @label="user.summary.topics_entered" />
           </li>
           <li class="stats-posts-read">
-            {{user-stat value=model.posts_read_count label="user.summary.posts_read"}}
+            <UserStat @value={{model.posts_read_count}} @label="user.summary.posts_read" />
           </li>
           <li class="stats-likes-given linked-stat">
-            {{#link-to "userActivity.likesGiven"}}
-              {{user-stat value=model.likes_given icon="heart" label="user.summary.likes_given"}}
-            {{/link-to}}
+            <LinkTo @route="userActivity.likesGiven">
+              <UserStat @value={{model.likes_given}} @icon="heart" @label="user.summary.likes_given" />
+            </LinkTo>
           </li>
           <li class="stats-likes-received">
-            {{user-stat value=model.likes_received icon="heart" label="user.summary.likes_received"}}
+            <UserStat @value={{model.likes_received}} @icon="heart" @label="user.summary.likes_received" />
           </li>
           {{#if model.bookmark_count}}
             <li class="stats-bookmark-count linked-stat">
-              {{#link-to "userActivity.bookmarks"}}
-                {{user-stat value=model.bookmark_count label="user.summary.bookmark_count"}}
-              {{/link-to}}
+              <LinkTo @route="userActivity.bookmarks">
+                <UserStat @value={{model.bookmark_count}} @label="user.summary.bookmark_count" />
+              </LinkTo>
             </li>
           {{/if}}
           <li class="stats-topic-count linked-stat">
-            {{#link-to "userActivity.topics"}}
-              {{user-stat value=model.topic_count label="user.summary.topic_count"}}
-            {{/link-to}}
+            <LinkTo @route="userActivity.topics">
+              <UserStat @value={{model.topic_count}} @label="user.summary.topic_count" />
+            </LinkTo>
           </li>
           <li class="stats-post-count linked-stat">
-            {{#link-to "userActivity.replies"}}
-              {{user-stat value=model.post_count label="user.summary.post_count"}}
-            {{/link-to}}
+            <LinkTo @route="userActivity.replies">
+              <UserStat @value={{model.post_count}} @label="user.summary.post_count" />
+            </LinkTo>
           </li>
-          {{plugin-outlet name="user-summary-stat" connectorTagName="li" args=(hash model=model user=user)}}
+          <PluginOutlet @name="user-summary-stat" @connectorTagName="li" @args={{hash model=model user=user}} />
         </ul>
       </div>
     {{/if}}
 
     <div class="top-section">
-      {{#user-summary-section title="top_replies" class="replies-section pull-left"}}
-        {{#user-summary-topics-list type="replies" items=model.replies user=user as |reply|}}
-          {{user-summary-topic
-            createdAt=reply.createdAt
-            topic=reply.topic
-            likes=reply.like_count
-            url=reply.url}}
-        {{/user-summary-topics-list}}
-      {{/user-summary-section}}
+      <UserSummarySection @title="top_replies" @class="replies-section pull-left">
+        <UserSummaryTopicsList @type="replies" @items={{model.replies}} @user={{user}} as |reply|>
+          <UserSummaryTopic @createdAt={{reply.createdAt}} @topic={{reply.topic}} @likes={{reply.like_count}} @url={{reply.url}} />
+        </UserSummaryTopicsList>
+      </UserSummarySection>
 
-      {{#user-summary-section title="top_topics" class="topics-section pull-right"}}
-        {{#user-summary-topics-list type="topics" items=model.topics user=user as |topic|}}
-          {{user-summary-topic
-            createdAt=topic.created_at
-            topic=topic
-            likes=topic.like_count
-            url=topic.url}}
-        {{/user-summary-topics-list}}
-      {{/user-summary-section}}
+      <UserSummarySection @title="top_topics" @class="topics-section pull-right">
+        <UserSummaryTopicsList @type="topics" @items={{model.topics}} @user={{user}} as |topic|>
+          <UserSummaryTopic @createdAt={{topic.created_at}} @topic={{topic}} @likes={{topic.like_count}} @url={{topic.url}} />
+        </UserSummaryTopicsList>
+      </UserSummarySection>
     </div>
 
     <div class="top-section">
-      {{#user-summary-section title="top_links" class="links-section pull-left"}}
+      <UserSummarySection @title="top_links" @class="links-section pull-left">
         {{#if model.links.length}}
           <ul>
             {{!-- template-lint-disable --}}
@@ -97,32 +89,32 @@
         {{else}}
           <p>{{i18n "user.summary.no_links"}}</p>
         {{/if}}
-      {{/user-summary-section}}
+      </UserSummarySection>
 
-      {{#user-summary-section title="most_replied_to_users" class="summary-user-list replied-section pull-right"}}
-        {{#user-summary-users-list none="no_replies" users=model.most_replied_to_users as |user|}}
-          {{user-summary-user user=user icon="reply" countClass="replies"}}
-        {{/user-summary-users-list}}
-      {{/user-summary-section}}
+      <UserSummarySection @title="most_replied_to_users" @class="summary-user-list replied-section pull-right">
+        <UserSummaryUsersList @none="no_replies" @users={{model.most_replied_to_users}} as |user|>
+          <UserSummaryUser @user={{user}} @icon="reply" @countClass="replies" />
+        </UserSummaryUsersList>
+      </UserSummarySection>
     </div>
 
     <div class="top-section most-liked-section">
-      {{#user-summary-section title="most_liked_by" class="summary-user-list liked-by-section pull-left"}}
-        {{#user-summary-users-list none="no_likes" users=model.most_liked_by_users as |user|}}
-          {{user-summary-user user=user icon="heart" countClass="likes"}}
-        {{/user-summary-users-list}}
-      {{/user-summary-section}}
+      <UserSummarySection @title="most_liked_by" @class="summary-user-list liked-by-section pull-left">
+        <UserSummaryUsersList @none="no_likes" @users={{model.most_liked_by_users}} as |user|>
+          <UserSummaryUser @user={{user}} @icon="heart" @countClass="likes" />
+        </UserSummaryUsersList>
+      </UserSummarySection>
 
-      {{#user-summary-section title="most_liked_users" class="summary-user-list liked-section pull-right"}}
-        {{#user-summary-users-list none="no_likes" users=model.most_liked_users as |user|}}
-          {{user-summary-user user=user icon="heart" countClass="likes"}}
-        {{/user-summary-users-list}}
-      {{/user-summary-section}}
+      <UserSummarySection @title="most_liked_users" @class="summary-user-list liked-section pull-right">
+        <UserSummaryUsersList @none="no_likes" @users={{model.most_liked_users}} as |user|>
+          <UserSummaryUser @user={{user}} @icon="heart" @countClass="likes" />
+        </UserSummaryUsersList>
+      </UserSummarySection>
     </div>
 
     {{#if model.top_categories.length}}
       <div class="top-section top-categories-section">
-        {{#user-summary-section title="top_categories" class="summary-category-list pull-left"}}
+        <UserSummarySection @title="top_categories" @class="summary-category-list pull-left">
           <table>
             <thead>
               <th class="category-link"></th>
@@ -136,16 +128,16 @@
                     {{category-link category allowUncategorized="true" hideParent=false}}
                   </td>
                   <td class="topic-count">
-                    {{user-summary-category-search user=user category=category count=category.topic_count}}
+                    <UserSummaryCategorySearch @user={{user}} @category={{category}} @count={{category.topic_count}} />
                   </td>
                   <td class="reply-count">
-                    {{user-summary-category-search user=user category=category count=category.post_count}}
+                    <UserSummaryCategorySearch @user={{user}} @category={{category}} @count={{category.post_count}} />
                   </td>
                 </tr>
               {{/each}}
             </tbody>
           </table>
-        {{/user-summary-section}}
+        </UserSummarySection>
       </div>
     {{/if}}
 
@@ -156,20 +148,20 @@
         {{#if model.badges}}
           <div class="badge-group-list">
             {{#each model.badges as |badge|}}
-              {{badge-card badge=badge count=badge.count username=user.username_lower}}
+              <BadgeCard @badge={{badge}} @count={{badge.count}} @username={{user.username_lower}} />
             {{/each}}
-            {{plugin-outlet name="after-user-summary-badges" args=(hash model=model user=user)}}
+            <PluginOutlet @name="after-user-summary-badges" @args={{hash model=model user=user}} />
           </div>
         {{else}}
           <p>{{i18n "user.summary.no_badges"}}</p>
         {{/if}}
 
         {{#if moreBadges}}
-          {{#link-to "user.badges" user class="more"}}
+          <LinkTo @route="user.badges" @model={{user}} class="more">
             {{i18n "user.summary.more_badges"}}
-          {{/link-to}}
+          </LinkTo>
         {{/if}}
       </div>
     {{/if}}
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/users.hbs b/app/assets/javascripts/discourse/app/templates/users.hbs
index aa0aeaf0ef1..ccff2998c46 100644
--- a/app/assets/javascripts/discourse/app/templates/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/users.hbs
@@ -1,11 +1,11 @@
-{{#d-section pageClass="users"}}
-  {{#load-more selector=".directory tbody tr" action=(action "loadMore")}}
+<DSection @pageClass="users">
+  <LoadMore @selector=".directory tbody tr" @action={{action "loadMore"}}>
     <div class="container">
       <div class="users-directory directory">
-        {{plugin-outlet name="users-top" tagName="span" connectorTagName="div" args=(hash model=model)}}
+        <PluginOutlet @name="users-top" @tagName="span" @connectorTagName="div" @args={{hash model=model}} />
         <div class="directory-controls">
           <div class="period-controls">
-            {{period-chooser period=period onChange=(action (mut period)) fullDay=false}}
+            <PeriodChooser @period={{period}} @onChange={{action (mut period)}} @fullDay={{false}} />
             {{#if lastUpdatedAt}}
               <div class="directory-last-updated">
                 {{i18n "directory.last_updated"}}
@@ -19,45 +19,30 @@
                 {{i18n "directory.total_rows" count=model.totalRows}}
               {{/if}}
             </label>
-            {{input
-              value=(readonly nameInput)
-              input=(action "onUsernameFilterChanged" value="target.value")
-              placeholderKey="directory.filter_name"
-              class="filter-name no-blur"
-            }}
+            <Input @value={{readonly nameInput}} @input={{action "onUsernameFilterChanged" value="target.value"}} @placeholderKey="directory.filter_name" class="filter-name no-blur" />
             {{#if showGroupFilter}}
-              {{combo-box
-                class="directory-group-selector"
-                value=group
-                content=groupOptions
-                onChange=(action groupChanged)
-                options=(hash
+              <ComboBox @class="directory-group-selector" @value={{group}} @content={{groupOptions}} @onChange={{action groupChanged}} @options={{hash
                   none="directory.group.all"
-                )
-              }}
+                }} />
             {{/if}}
             {{#if currentUser.staff}}
-              {{d-button
-                icon="wrench"
-                action=(action "showEditColumnsModal")
-                class="btn-default open-edit-columns-btn"
-              }}
+              <DButton @icon="wrench" @action={{action "showEditColumnsModal"}} @class="btn-default open-edit-columns-btn" />
             {{/if}}
-            {{plugin-outlet name="users-directory-controls" args=(hash model=model)}}
+            <PluginOutlet @name="users-directory-controls" @args={{hash model=model}} />
           </div>
         </div>
 
-        {{#conditional-loading-spinner condition=isLoading}}
+        <ConditionalLoadingSpinner @condition={{isLoading}}>
           {{#if model.length}}
-            {{directory-table items=model columns=columns showTimeRead=showTimeRead order=order asc=asc}}
-            {{conditional-loading-spinner condition=model.loadingMore}}
+            <DirectoryTable @items={{model}} @columns={{columns}} @showTimeRead={{showTimeRead}} @order={{order}} @asc={{asc}} />
+            <ConditionalLoadingSpinner @condition={{model.loadingMore}} />
           {{else}}
             <div class="clearfix"></div>
             <p>{{i18n "directory.no_results"}}</p>
           {{/if}}
-        {{/conditional-loading-spinner}}
+        </ConditionalLoadingSpinner>
 
       </div>
     </div>
-  {{/load-more}}
-{{/d-section}}
+  </LoadMore>
+</DSection>
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-kit/addon/templates/components/combo-box/combo-box-header.hbs
index 4517a8a0d58..e67854ae271 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/combo-box/combo-box-header.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/combo-box/combo-box-header.hbs
@@ -8,12 +8,7 @@
   }}
 
   {{#if shouldDisplayClearableButton}}
-    {{d-button
-      class="btn-clear"
-      icon="times"
-      action=selectKit.onClearSelection
-      ariaLabel="clear_input"
-    }}
+    <DButton @class="btn-clear" @icon="times" @action={{selectKit.onClearSelection}} @ariaLabel="clear_input" />
   {{/if}}
 
   {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/flair-row.hbs b/app/assets/javascripts/select-kit/addon/templates/components/flair-row.hbs
index f4bdb2aa30b..4a638c6d6fd 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/flair-row.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/flair-row.hbs
@@ -1,10 +1,5 @@
 {{#if item.url}}
-  {{avatar-flair
-    flairName=item.name
-    flairUrl=item.url
-    flairBgColor=item.bgColor
-    flairColor=item.color
-  }}
+  <AvatarFlair @flairName={{item.name}} @flairUrl={{item.url}} @flairBgColor={{item.bgColor}} @flairColor={{item.color}} />
 {{/if}}
 
 <span>{{label}}</span>
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/mini-tag-chooser/selected-collection.hbs b/app/assets/javascripts/select-kit/addon/templates/components/mini-tag-chooser/selected-collection.hbs
index 8b280a41512..274fd89929f 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/mini-tag-chooser/selected-collection.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/mini-tag-chooser/selected-collection.hbs
@@ -1,16 +1,9 @@
 {{#if tags}}
   <div class="mini-tag-chooser-selected-collection selected-tags">
     {{#each tags as |tag|}}
-      {{#d-button
-        translatedTitle=tag.value
-        icon="times"
-        action=(action selectKit.deselect)
-        actionParam=tag.value
-        class=tag.classNames
-        tabindex=0
-      }}
+      <DButton @translatedTitle={{tag.value}} @icon="times" @action={{action selectKit.deselect}} @actionParam={{tag.value}} @class={{tag.classNames}} @tabindex={{0}}>
         {{discourse-tag tag.value noHref=true}}
-      {{/d-button}}
+      </DButton>
     {{/each}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/multi-select.hbs b/app/assets/javascripts/select-kit/addon/templates/components/multi-select.hbs
index c5ad03fa1e4..388d91b6b97 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/multi-select.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/multi-select.hbs
@@ -7,7 +7,7 @@
     id=(concat selectKit.uniqueID "-header")
   }}
 
-  {{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
+  <SelectKit::SelectKitBody @selectKit={{selectKit}} @id={{concat selectKit.uniqueID "-body"}}>
     {{component selectKit.options.filterComponent
       selectKit=selectKit
       id=(concat selectKit.uniqueID "-filter")
@@ -51,5 +51,5 @@
         {{/if}}
       {{/if}}
     {{/if}}
-  {{/select-kit/select-kit-body}}
+  </SelectKit::SelectKitBody>
 {{/unless}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/multi-select/multi-select-header.hbs b/app/assets/javascripts/select-kit/addon/templates/components/multi-select/multi-select-header.hbs
index b45cfd1c7a0..b728e6bf3cd 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/multi-select/multi-select-header.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/multi-select/multi-select-header.hbs
@@ -3,7 +3,7 @@
     {{d-icon icon}}
   {{/each}}
 
-  {{multi-select/format-selected-content content=selectedContent selectKit=selectKit}}
+  <MultiSelect::FormatSelectedContent @content={{selectedContent}} @selectKit={{selectKit}} />
 
   {{d-icon caretIcon class="caret-icon"}}
 </div>
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/pinned-button.hbs b/app/assets/javascripts/select-kit/addon/templates/components/pinned-button.hbs
index 91bfe147ff6..46079b12093 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/pinned-button.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/pinned-button.hbs
@@ -1,4 +1,4 @@
 <p class="reason">
-  {{pinned-options value=pinned topic=topic}}
+  <PinnedOptions @value={{pinned}} @topic={{topic}} />
   <span class="text">{{html-safe reasonText}}</span>
 </p>
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs b/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
index d213fed5a8f..6b0da3675d4 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs
@@ -1,21 +1,6 @@
 {{#unless isHidden}}
   {{!-- filter-input-search prevents 1password from attempting autocomplete --}}
-  {{input
-    tabindex=0
-    class="filter-input"
-    placeholder=placeholder
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    name="filter-input-search"
-    spellcheck=false
-    value=(readonly selectKit.filter)
-    input=(action "onInput")
-    paste=(action "onPaste")
-    keyDown=(action "onKeydown")
-    keyUp=(action "onKeyup")
-    type="search"
-  }}
+  <Input @tabindex={{0}} class="filter-input" placeholder={{placeholder}} @autocomplete="off" @autocorrect="off" @autocapitalize="off" @name="filter-input-search" @spellcheck={{false}} @value={{readonly selectKit.filter}} @input={{action "onInput"}} @paste={{action "onPaste"}} @keyDown={{action "onKeydown"}} @keyUp={{action "onKeyup"}} @type="search" />
 
   {{#if selectKit.options.filterIcon}}
     {{d-icon selectKit.options.filterIcon class="filter-icon"}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/selected-choice-category.hbs b/app/assets/javascripts/select-kit/addon/templates/components/selected-choice-category.hbs
index 3014c035585..834e57e557a 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/selected-choice-category.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/selected-choice-category.hbs
@@ -1,3 +1,3 @@
-{{#selected-choice item=item selectKit=selectKit extraClass=extraClass}}
+<SelectedChoice @item={{item}} @selectKit={{selectKit}} @extraClass={{extraClass}}>
   {{badge}}
-{{/selected-choice}}
+</SelectedChoice>
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs b/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
index ef6c82086bf..d17e7fc76e4 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
@@ -9,13 +9,7 @@
     </span>
 
     {{#if shouldDisplayClearableButton}}
-      {{d-button
-        class="btn-clear"
-        icon="times"
-        action=selectKit.deselect
-        actionParam=item
-        ariaLabel="clear_input"
-      }}
+      <DButton @class="btn-clear" @icon="times" @action={{selectKit.deselect}} @actionParam={{item}} @ariaLabel="clear_input" />
     {{/if}}
   </div>
 {{else}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/single-select.hbs b/app/assets/javascripts/select-kit/addon/templates/components/single-select.hbs
index d10c76954f1..d296124b4ab 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/single-select.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/single-select.hbs
@@ -7,7 +7,7 @@
     id=(concat selectKit.uniqueID "-header")
   }}
 
-  {{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
+  <SelectKit::SelectKitBody @selectKit={{selectKit}} @id={{concat selectKit.uniqueID "-body"}}>
     {{component selectKit.options.filterComponent
       selectKit=selectKit
       id=(concat selectKit.uniqueID "-filter")
@@ -40,5 +40,5 @@
         {{/if}}
       {{/if}}
     {{/if}}
-  {{/select-kit/select-kit-body}}
+  </SelectKit::SelectKitBody>
 {{/unless}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs b/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs
index 0d1e594fc18..8c683d1ca66 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs
@@ -1,28 +1,18 @@
 {{#if appendReason}}
   <p class="reason">
-    {{topic-notifications-options
-      value=notificationLevel
-      topic=topic
-      onChange=(action "changeTopicNotificationLevel")
-      options=(hash
+    <TopicNotificationsOptions @value={{notificationLevel}} @topic={{topic}} @onChange={{action "changeTopicNotificationLevel"}} @options={{hash
         icon=icon
         showFullTitle=showFullTitle
         showCaret=showCaret
         headerAriaLabel=(i18n "topic.notifications.title")
-      )
-    }}
+      }} />
     <span class="text">{{html-safe notificationReasonText}}</span>
   </p>
 {{else}}
-  {{topic-notifications-options
-    value=notificationLevel
-    topic=topic
-    onChange=(action "changeTopicNotificationLevel")
-    options=(hash
+  <TopicNotificationsOptions @value={{notificationLevel}} @topic={{topic}} @onChange={{action "changeTopicNotificationLevel"}} @options={{hash
       icon=icon
       showFullTitle=showFullTitle
       showCaret=showCaret
       headerAriaLabel=(i18n "topic.notifications.title")
-    )
-  }}
+    }} />
 {{/if}}
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/topic-row.hbs b/app/assets/javascripts/select-kit/addon/templates/components/topic-row.hbs
index 3e143e0cbdb..0cea321a49f 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/topic-row.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/topic-row.hbs
@@ -1,4 +1,4 @@
-{{topic-status topic=item disableActions=true}}
+<TopicStatus @topic={{item}} @disableActions={{true}} />
 <div class="topic-title">{{replace-emoji item.fancy_title}}</div>
 <div class="topic-categories">
   {{bound-category-link item.category
diff --git a/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs
index 5c829fb9dc2..ab0f13c5c6a 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs
@@ -2,22 +2,17 @@
 {{#if users}}
   <div class="users-list">
     {{#each users as |user|}}
-      {{invite-list-user user=user roles=roles removeUser=(action "removeUser")}}
+      <InviteListUser @user={{user}} @roles={{roles}} @removeUser={{action "removeUser"}} />
     {{/each}}
   </div>
 {{/if}}
 
 <div class="new-user">
   <div class="text-field {{if invalid "invalid"}}">
-    {{input class="invite-email wizard-focusable" value=inviteEmail placeholder="user@example.com" tabindex="9"}}
+    <Input class="invite-email wizard-focusable" @value={{inviteEmail}} placeholder="user@example.com" @tabindex="9" />
   </div>
 
-  {{combo-box
-    value=inviteRole
-    content=roles
-    nameProperty="label"
-    onChange=(action (mut inviteRole))
-  }}
+  <ComboBox @value={{inviteRole}} @content={{roles}} @nameProperty="label" @onChange={{action (mut inviteRole)}} />
 
   <button type="button" class="wizard-btn small add-user" {{action "addUser"}}>
     {{d-icon "plus"}}{{i18n "wizard.invites.add_user"}}
diff --git a/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs b/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs
index 08a83fcce83..a9600e6bb5f 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs
@@ -4,10 +4,7 @@
     </canvas>
   </div>
   <div class="preview-area homepage-preview">
-    {{homepage-preview
-      wizard=wizard
-      step=step
-    }}
+    <HomepagePreview @wizard={{wizard}} @step={{step}} />
   </div>
 </div>
 
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkbox.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkbox.hbs
index dddf1b81e49..e2dc7c95db9 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkbox.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkbox.hbs
@@ -1,8 +1,4 @@
 <label>
-  {{input
-    type="checkbox"
-    class="wizard-checkbox"
-    checked=field.value
-  }}
+  <Input @type="checkbox" class="wizard-checkbox" @checked={{field.value}} />
   {{field.placeholder}}
 </label>
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs
index fa8427ac192..bff62b8e21f 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs
@@ -1,10 +1,7 @@
 {{#each field.choices as |c|}}
   <div class="checkbox-field-choice {{fieldClass}}">
     <label id={{c.id}} value={{c.label}}>
-      {{input type="checkbox"
-            class="wizard-checkbox"
-            click=(action "changed" value="target")
-            checked=c.checked}}
+      <Input @type="checkbox" class="wizard-checkbox" @click={{action "changed" value="target"}} @checked={{c.checked}} />
       {{#if c.icon}}
         {{d-icon c.icon}}
       {{/if}}
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-radio.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-radio.hbs
index 1e2bc2a0ba4..11fedc91cf3 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-radio.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-radio.hbs
@@ -1,12 +1,7 @@
 {{#each field.choices as |choice|}}
   <div class="radio-field-choice {{fieldClass}}">
     <div class="radio-area">
-      {{radio-button
-        selection=field.value
-        value=choice.id
-        name=choice.label
-        onChange=(action "changed")
-      }}
+      <RadioButton @selection={{field.value}} @value={{choice.id}} @name={{choice.label}} @onChange={{action "changed"}} />
 
       <span class="radio-label">
         {{#if choice.icon}}
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-text.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-text.hbs
index 77d7602575d..24ffee721dd 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-text.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-text.hbs
@@ -1 +1 @@
-{{input id=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex="9"}}
+<Input @id={{field.id}} @value={{field.value}} class={{fieldClass}} placeholder={{field.placeholder}} @tabindex="9" />
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-textarea.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-textarea.hbs
index 063db210e4a..3a48e492503 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-textarea.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-textarea.hbs
@@ -1 +1 @@
-{{textarea id=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex="9"}}
+<Textarea @id={{field.id}} @value={{field.value}} class={{fieldClass}} placeholder={{field.placeholder}} @tabindex="9" />
diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs
index 3ad38fc34b1..15e49ddd48b 100644
--- a/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-step.hbs
@@ -13,16 +13,12 @@
     {{/if}}
   </div>
 
-  {{#wizard-step-form step=step}}
+  <WizardStepForm @step={{step}}>
     {{#if includeSidebar}}
       <div class="wizard-fields-sidebar">
         {{#each step.fields as |field|}}
           {{#if field.show_in_sidebar}}
-            {{wizard-field
-              field=field
-              step=step
-              wizard=wizard
-            }}
+            <WizardField @field={{field}} @step={{step}} @wizard={{wizard}} />
           {{/if}}
         {{/each}}
       </div>
@@ -30,15 +26,11 @@
     <div class="wizard-fields-main">
       {{#each step.fields as |field|}}
         {{#unless field.show_in_sidebar}}
-          {{wizard-field
-            field=field
-            step=step
-            wizard=wizard
-          }}
+          <WizardField @field={{field}} @step={{step}} @wizard={{wizard}} />
         {{/unless}}
       {{/each}}
     </div>
-  {{/wizard-step-form}}
+  </WizardStepForm>
 </div>
 
 <div class="wizard-step-footer">
diff --git a/app/assets/javascripts/wizard/addon/templates/step.hbs b/app/assets/javascripts/wizard/addon/templates/step.hbs
index 69bacff68d4..c3276fe5b4f 100644
--- a/app/assets/javascripts/wizard/addon/templates/step.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/step.hbs
@@ -1,6 +1 @@
-{{wizard-step
-  step=step
-  wizard=wizard
-  goNext=(action "goNext")
-  goBack=(action "goBack")
-}}
+<WizardStep @step={{step}} @wizard={{wizard}} @goNext={{action "goNext"}} @goBack={{action "goBack"}} />
diff --git a/app/assets/javascripts/wizard/addon/templates/wizard.hbs b/app/assets/javascripts/wizard/addon/templates/wizard.hbs
index 3449dd35754..3ab8b2a2e2c 100644
--- a/app/assets/javascripts/wizard/addon/templates/wizard.hbs
+++ b/app/assets/javascripts/wizard/addon/templates/wizard.hbs
@@ -1,6 +1,6 @@
 <div id="wizard-main">
   {{#if showCanvas}}
-    {{wizard-canvas}}
+    <WizardCanvas />
   {{/if}}
 
   <div class="wizard-column">