remove all instances of string coercion (#240)

routes/_components/AutoplayVideo.html

@@ -1,6 +1,6 @@
 <video
   class="autoplay-video {{className || ''}}"
-  aria-label="{{ariaLabel || ''}}"
+  aria-label={{ariaLabel || ''}}
   style="background-image: url({{poster}});"
   :poster
   :width

routes/_components/Avatar.html

@@ -1,22 +1,22 @@
 {{#if error}}
-<svg class="{{computedClass}}" aria-hidden="true">
+<svg class={{computedClass}} aria-hidden="true">
   <use xlink:href="#fa-user" />
 </svg>
 {{elseif $autoplayGifs}}
   <img
-    class="{{computedClass}}"
+    class={{computedClass}}
     aria-hidden="true"
     alt=""
-    src="{{account.avatar}}"
+    src={{account.avatar}}
     on:imgLoad="set({loaded: true})"
     on:imgLoadError="set({error: true})" />
 {{else}}
   <NonAutoplayImg
-    className="{{computedClass}}"
+    className={{computedClass}}
     ariaHidden="true"
     alt=""
-    src="{{account.avatar}}"
+    src={{account.avatar}}
-    staticSrc="{{account.avatar_static}}"
+    staticSrc={{account.avatar_static}}
     :isLink
     on:imgLoad="set({loaded: true})"
     on:imgLoadError="set({error: true})"

routes/_components/DynamicPageBanner.html

@@ -1,7 +1,7 @@
 <div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
   {{#if icon}}
   <svg class="dynamic-page-banner-svg">
-    <use xlink:href="{{icon}}" />
+    <use xlink:href={{icon}} />
   </svg>
   {{/if}}
   <h1 class="dynamic-page-title">{{title}}</h1>

routes/_components/ExternalLink.html

@@ -1,7 +1,7 @@
 <a rel="nofollow noopener"
    target="_blank"
-   href="{{href}}"
+   href={{href}}
-   aria-label="{{ariaLabel || ''}}"
+   aria-label={{ariaLabel || ''}}
    class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
   <slot></slot>{{#if showIcon}}
     <svg class="external-link-svg">

routes/_components/IconButton.html

@@ -1,27 +1,27 @@
 {{#if delegateKey}}
   <button type="button"
-          title="{{label}}"
+          title={{label}}
-          aria-label="{{label}}"
+          aria-label={{label}}
-          aria-pressed="{{pressable ? !!pressed : ''}}"
+          aria-pressed={{pressable ? !!pressed : ''}}
-          class="{{computedClass}}"
+          class={{computedClass}}
           :disabled
-          delegate-key="{{delegateKey}}"
+          delegate-key={{delegateKey}}
-          focus-key="{{focusKey || ''}}" >
+          focus-key={{focusKey || ''}} >
     <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href="{{href}}" />
+      <use xlink:href={{href}} />
     </svg>
   </button>
 {{else}}
   <button type="button"
-          title="{{label}}"
+          title={{label}}
-          aria-label="{{label}}"
+          aria-label={{label}}
-          aria-pressed="{{pressable ? !!pressed : ''}}"
+          aria-pressed={{pressable ? !!pressed : ''}}
-          class="{{computedClass}}"
+          class={{computedClass}}
-          focus-key="{{focusKey || ''}}"
+          focus-key={{focusKey || ''}}
           :disabled
           on:click >
     <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href="{{href}}" />
+      <use xlink:href={{href}} />
     </svg>
   </button>
 {{/if}}

routes/_components/LazyImage.html

@@ -3,10 +3,10 @@
   {{#if displaySrc}}
     <img
       class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
-      aria-hidden="{{ariaHidden || ''}}"
+      aria-hidden={{ariaHidden || ''}}
-      alt="{{alt || ''}}"
+      alt={{alt || ''}}
-      title="{{alt || ''}}"
+      title={{alt || ''}}
-      src="{{displaySrc}}"
+      src={{displaySrc}}
       :width
       :height
     />

routes/_components/Nav.html

@@ -20,7 +20,7 @@
       </li>
     {{elseif $pinnedPage.startsWith('/lists/')}}
       <li class="main-nav-li">
-        <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
+        <NavItem :page name="lists" href={{$pinnedPage}} svg="#fa-bars" label={{$pinnedListTitle}} />
       </li>
     {{/if}}
 		<li class="main-nav-li">

routes/_components/NavItem.html

@@ -1,12 +1,12 @@
 <a class='main-nav-link {{selected ? "selected" : ""}}'
-   aria-label='{{ariaLabel}}'
+   aria-label={{ariaLabel}}
-   aria-current="{{selected}}"
+   aria-current={{selected}}
    on:click="onClick(event)"
    :href >
   {{#if name === 'notifications'}}
     <div class="nav-link-svg-wrapper">
       <svg class="nav-link-svg">
-        <use xlink:href="{{svg}}" />
+        <use xlink:href={{svg}} />
       </svg>
       {{#if $hasNotifications}}
         <span class="nav-link-notifications" aria-hidden="true">
@@ -16,7 +16,7 @@
     </div>
   {{else}}
     <svg class="nav-link-svg">
-      <use xlink:href="{{svg}}" />
+      <use xlink:href={{svg}} />
     </svg>
   {{/if}}
   <span class="nav-link-label">{{label}}</span>

routes/_components/NonAutoplayGifv.html

@@ -4,8 +4,8 @@
 >
   {{#if playing}}
     <AutoplayVideo
-      className="{{class}}"
+      className={{class}}
-      ariaLabel="{{label}}"
+      ariaLabel={{label}}
       :poster
       :src
       :width
@@ -13,17 +13,17 @@
       />
   {{else}}
     <LazyImage
-      alt="{{label || ''}}"
+      alt={{label || ''}}
-      title="{{label || ''}}"
+      title={{label || ''}}
-      src="{{staticSrc}}"
+      src={{staticSrc}}
-      fallback="{{oneTransparentPixel}}"
+      fallback={{oneTransparentPixel}}
       :width
       :height
       background="var(--loading-bg)"
-      className="{{class}}"
+      className={{class}}
     />
   {{/if}}
-  <PlayVideoIcon className="{{playing ? 'hidden' : ''}}"/>
+  <PlayVideoIcon className={{playing ? 'hidden' : ''}}/>
 </div>
 <style>
   .non-autoplay-gifv {

routes/_components/NonAutoplayImg.html

@@ -1,17 +1,17 @@
 {{#if staticSrc === src}}
-  <img class="{{className || ''}}"
+  <img class={{className || ''}}
-       aria-hidden="{{ariaHidden}}"
+       aria-hidden={{ariaHidden}}
-       alt="{{alt || ''}}"
+       alt={{alt || ''}}
-       title="{{alt || ''}}"
+       title={{alt || ''}}
-       src="{{src}}"
+       src={{src}}
        on:imgLoad
        on:imgLoadError />
 {{else}}
   <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
-       aria-hidden="{{ariaHidden}}"
+       aria-hidden={{ariaHidden}}
-       alt="{{alt || ''}}"
+       alt={{alt || ''}}
-       title="{{alt || ''}}"
+       title={{alt || ''}}
-       src="{{staticSrc}}"
+       src={{staticSrc}}
        on:imgLoad
        on:imgLoadError
        on:mouseover="onMouseOver(event)"

routes/_components/TimelineHomePage.html

@@ -3,12 +3,12 @@
      without a div wrapper due to sticky-positioned compose button.
      TODO: this is a bit hacky due to code duplication
  -->
-<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
+<div class="timeline-home-page" aria-busy={{hideTimeline}}>
   {{#if hidePage}}
     <LoadingPage />
   {{/if}}
   {{#if $currentVerifyCredentials }}
-    <ComposeBox realm="home" hidden="{{hidePage}}"/>
+    <ComposeBox realm="home" hidden={{hidePage}}/>
   {{/if}}
   <div class="timeline-home-anchor-container">
     {{#if !hidePage && hideTimeline}}

routes/_components/TimelinePage.html

@@ -1,4 +1,4 @@
-<div class="timeline-page" aria-busy="{{hideTimeline}}">
+<div class="timeline-page" aria-busy={{hideTimeline}}>
   {{#if hidePage}}
     <LoadingPage />
   {{/if}}

routes/_components/Toast.html

@@ -1,4 +1,4 @@
-<div class="toast-modal {{shown ? 'shown' : ''}}" role="alert" aria-hidden="{{shown}}">
+<div class="toast-modal {{shown ? 'shown' : ''}}" role="alert" aria-hidden={{shown}}>
   <div class="toast-container">
     {{text}}
   </div>

routes/_components/community/PageList.html

@@ -1,6 +1,6 @@
 <div class="page-list-wrapper">
   {{#if label}}
-  <ul class="page-list" aria-label="{{label}}">
+  <ul class="page-list" aria-label={{label}}>
     <slot></slot>
   </ul>
   {{else}}

routes/_components/community/PageListItem.html

@@ -1,15 +1,15 @@
 <li class="page-list-item">
   <a :href>
     <svg class="page-list-item-svg">
-      <use xlink:href="{{icon}}" />
+      <use xlink:href={{icon}} />
     </svg>
     <span aria-label="{{label}} {{$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}}">
       {{label}}
     </span>
     {{#if pinnable}}
       <IconButton pressable="true"
-                  pressed="{{$pinnedPage === href}}"
+                  pressed={{$pinnedPage === href}}
-                  label="{{$pinnedPage === href ? 'Unpin timeline' : 'Pin timeline'}}"
+                  label={{$pinnedPage === href ? 'Unpin timeline' : 'Pin timeline'}}
                   href="#fa-thumb-tack"
                   on:click="onPinClick(event)" />
     {{/if}}

routes/_components/compose/ComposeAuthor.html

@@ -1,7 +1,7 @@
 <a href="/accounts/{{verifyCredentials.id}}"
    class="compose-box-avatar"
    aria-label="Profile for {{verifyCredentials.display_name || verifyCredentials.acct}}">
-  <Avatar account="{{verifyCredentials}}" size="small"/>
+  <Avatar account={{verifyCredentials}} size="small"/>
 </a>
 <a class="compose-box-display-name" href="/accounts/{{verifyCredentials.id}}">
   {{verifyCredentials.display_name || verifyCredentials.acct}}

routes/_components/compose/ComposeAutosuggest.html

@@ -1,7 +1,7 @@
 <div class="compose-autosuggest {{shown ? 'shown' : ''}} {{realm === 'dialog' ? 'is-dialog' : ''}}"
        aria-hidden="true" >
   <ComposeAutosuggestionList
-    items="{{searchResults}}"
+    items={{searchResults}}
     on:click="onClick(event)"
     :type
     :selected

routes/_components/compose/ComposeAutosuggestionList.html

@@ -9,7 +9,7 @@
         <Avatar
           className="compose-autosuggest-list-item-avatar"
           size="small"
-          account="{{item}}"
+          account={{item}}
         />
         <span class="compose-autosuggest-list-display-name">
             {{item.display_name || item.acct}}
@@ -18,7 +18,7 @@
             {{'@' + item.acct}}
         </span>
         {{else}}
-          <img src="{{$autoplayGifs ? item.url : item.static_url}}"
+          <img src={{$autoplayGifs ? item.url : item.static_url}}
                class="compose-autosuggest-list-item-icon"
                alt="{{':' + item.shortcode + ':'}}"
           />

routes/_components/compose/ComposeButton.html

@@ -1,9 +1,9 @@
 <div class="compose-box-button-halo">
   <button class="primary compose-box-button"
           :disabled
-          aria-label="{{sticky ? 'Compose' : 'Toot!'}}"
+          aria-label={{sticky ? 'Compose' : 'Toot!'}}
           on:click>
-    <span class="{{$postingStatus || sticky ? 'hidden' : ''}}">
+    <span class={{$postingStatus || sticky ? 'hidden' : ''}}>
       Toot!
     </span>
     <div class="compose-box-button-spinner"

routes/_components/compose/ComposeLengthIndicator.html

@@ -1,5 +1,5 @@
 <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
-      aria-label="{{lengthLabel}}">
+      aria-label={{lengthLabel}}>
       {{lengthToDisplayDeferred || '0'}}
     </span>
 <style>

routes/_components/compose/ComposeMediaItem.html

@@ -1,5 +1,5 @@
 <div class="compose-media">
-  <img src="{{mediaItem.data.preview_url}}" alt="{{mediaItem.file.name}}"/>
+  <img src={{mediaItem.data.preview_url}} alt={{mediaItem.file.name}}/>
   <div class="compose-media-delete">
     <button class="compose-media-delete-button"
             aria-label="Delete {{mediaItem.file.name}}"

routes/_components/compose/ComposeToolbar.html

@@ -6,23 +6,23 @@
       on:click="onEmojiClick()"
     />
     <IconButton
-      svgClassName="{{$uploadingMedia ? 'spin' : ''}}"
+      svgClassName={{$uploadingMedia ? 'spin' : ''}}
       label="Add media"
-      href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
+      href={{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}
       on:click="onMediaClick()"
-      disabled="{{$uploadingMedia || (media.length === 4)}}"
+      disabled={{$uploadingMedia || (media.length === 4)}}
     />
     <IconButton
       label="Adjust privacy (currently {{postPrivacy.label}})"
-      href="{{postPrivacy.icon}}"
+      href={{postPrivacy.icon}}
       on:click="onPostPrivacyClick()"
     />
     <IconButton
-      label="{{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}"
+      label={{contentWarningShown ? 'Remove content warning' : 'Add content warning'}}
       href="#fa-exclamation-triangle"
       on:click="onContentWarningClick()"
       pressable="true"
-      pressed="{{contentWarningShown}}"
+      pressed={{contentWarningShown}}
     />
   </div>
   <input ref:input

routes/_components/dialog/components/EmojiDialog.html

@@ -10,7 +10,7 @@
         {{#each emojis as emoji}}
           <li class="custom-emoji">
             <button type="button" on:click="onClickEmoji(emoji)">
-              <img src="{{$autoplayGifs ? emoji.url : emoji.static_url}}"
+              <img src={{$autoplayGifs ? emoji.url : emoji.static_url}}
                    alt=":{{emoji.shortcode}}:"
                    title=":{{emoji.shortcode}}:"
               />

routes/_components/dialog/components/GenericDialogList.html

@@ -3,12 +3,12 @@
   <li class="generic-dialog-list-item">
     <button class="generic-dialog-list-button" on:click="fire('click', item)">
       <svg class="generic-dialog-list-item-svg">
-        <use xlink:href="{{item.icon}}" />
+        <use xlink:href={{item.icon}} />
       </svg>
       <span>
             {{item.label}}
           </span>
-      <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}">
+      <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden={{!item.selected}}>
         <use xlink:href="#fa-check" />
       </svg>
     </button>

routes/_components/dialog/components/ImageDialog.html

@@ -15,11 +15,11 @@
     />
   {{else}}
     <img
-      src="{{src}}"
+      src={{src}}
-      width="{{width}}"
+      width={{width}}
-      height="{{height}}"
+      height={{height}}
-      alt="{{description || ''}}"
+      alt={{description || ''}}
-      title="{{description || ''}}"
+      title={{description || ''}}
     />
   {{/if}}
 </ModalDialog>

routes/_components/dialog/components/ModalDialog.html

@@ -1,10 +1,10 @@
-<div class="{{backdropClass}}"
+<div class={{backdropClass}}
      tabindex="-1"
      data-a11y-dialog-hide
 ></div>
-<div class="{{contentsClass}}"
+<div class={{contentsClass}}
      role="dialog"
-     aria-label="{{label || ''}}"
+     aria-label={{label || ''}}
      ref:node
 >
   <div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};">

routes/_components/profile/AccountProfileDetails.html

@@ -9,7 +9,7 @@
   </div>
   <a class="account-profile-details-item"
      href='/accounts/{{account.id}}/follows'
-     aria-label="{{followingLabel}}"
+     aria-label={{followingLabel}}
   >
     <span class="account-profile-details-item-title">
       Follows
@@ -20,7 +20,7 @@
   </a>
   <a class="account-profile-details-item"
      href='/accounts/{{account.id}}/followers'
-     aria-label="{{followersLabel}}"
+     aria-label={{followersLabel}}
   >
     <span class="account-profile-details-item-title">
       Followers

routes/_components/profile/AccountProfileFollow.html

@@ -1,9 +1,9 @@
 <div class="account-profile-follow {{shown ? 'shown' : ''}}">
   <IconButton
-    label="{{followLabel}}"
+    label={{followLabel}}
-    href="{{followIcon}}"
+    href={{followIcon}}
     pressable="true"
-    pressed="{{following}}"
+    pressed={{following}}
     big="true"
     on:click="onFollowButtonClick(event)"
     ref:icon

routes/_components/profile/AccountProfileHeader.html

@@ -2,7 +2,7 @@
   <Avatar :account size="big" />
 </div>
 <div class="account-profile-name">
-  <ExternalLink href="{{account.url}}"
+  <ExternalLink href={{account.url}}
                 showIcon="true"
                 normalIconColor="true"
                 ariaLabel="{{account.display_name || account.acct}} (opens in new window)"

routes/_components/pseudoVirtualList/PseudoVirtualList.html

@@ -1,15 +1,15 @@
 <div class="pseudo-virtual-list" on:initialized ref:node>
   {{#each wrappedItems as wrappedItem, i @item}}
     <PseudoVirtualListLazyItem
-      component="{{component}}"
+      component={{component}}
-      index="{{i}}"
+      index={{i}}
-      length="{{wrappedItems.length}}"
+      length={{wrappedItems.length}}
-      makeProps="{{makeProps}}"
+      makeProps={{makeProps}}
-      key="{{wrappedItem.item}}"
+      key={{wrappedItem.item}}
-      intersectionObserver="{{intersectionObserver}}"
+      intersectionObserver={{intersectionObserver}}
-      isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
+      isIntersecting={{isIntersecting(wrappedItem.item, $intersectionStates)}}
-      isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
+      isCached={{isCached(wrappedItem.item, $intersectionStates)}}
-      height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
+      height={{getHeight(wrappedItem.item, $intersectionStates)}}
     />
   {{/each}}
 </div>

routes/_components/pseudoVirtualList/PseudoVirtualListItem.html

@@ -1,13 +1,13 @@
 <div class="pseudo-virtual-list-item"
-     aria-hidden="{{hide}}"
+     aria-hidden={{hide}}
-     pseudo-virtual-list-key="{{key}}"
+     pseudo-virtual-list-key={{key}}
      style="height: {{shouldHide ? `${height}px` : ''}};"
      ref:node>
   {{#if !shouldHide}}
     <:Component {component}
-                virtualProps="{{props}}"
+                virtualProps={{props}}
-                virtualIndex="{{index}}"
+                virtualIndex={{index}}
-                virtualLength="{{length}}"
+                virtualLength={{length}}
     />
   {{/if}}
 </div>

routes/_components/search/AccountSearchResult.html

@@ -11,9 +11,9 @@
       <div class="search-result-account-buttons">
         {{#each actions as action}}
           <IconButton
-            label="{{action.label}}"
+            label={{action.label}}
             on:click="onButtonClick(event, action, account.id)"
-            href="{{action.icon}}"
+            href={{action.icon}}
             big="true"
           />
         {{/each}}

routes/_components/search/Search.html

@@ -7,7 +7,7 @@
            required
            bind:value="$queryInSearch">
   </div>
-  <button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}">
+  <button type="submit" class="primary search-button" aria-label="Search" disabled={{$searchLoading}}>
     <svg class="search-button-svg">
       <use xlink:href="#fa-search" />
     </svg>

routes/_components/search/SearchResult.html

@@ -1,5 +1,5 @@
 <li class="search-result">
-  <a href="{{href}}" class="search-result-anchor">
+  <a href={{href}} class="search-result-anchor">
     <slot></slot>
   </a>
 </li>

routes/_components/search/SearchResults.html

@@ -6,7 +6,7 @@
     <AccountSearchResult :account />
   {{/each}}
   {{#each $searchResults.statuses as status, index}}
-  <StatusSearchResult :status :index length="{{$searchResults.statuses.length}}"/>
+  <StatusSearchResult :status :index length={{$searchResults.statuses.length}}/>
   {{/each}}
 </ul>
 <style>

routes/_components/search/StatusSearchResult.html

@@ -1,7 +1,7 @@
 <SearchResult href="/statuses/{{status.id}}">
   <Status :index :length
           timelineType="search" timelineValue="search"
-          status="{{status}}" />
+          status={{status}} />
 </SearchResult>
 <style>
 </style>

routes/_components/settings/SettingsList.html

@@ -1,6 +1,6 @@
 <div class="settings-list-wrapper">
   {{#if label}}
-  <ul class="settings-list" aria-label="{{label}}">
+  <ul class="settings-list" aria-label={{label}}>
     <slot></slot>
   </ul>
   {{else}}

routes/_components/settings/SettingsListItem.html

@@ -2,15 +2,15 @@
   <a :href>
     {{#if icon}}
     <svg class="settings-list-item-svg">
-      <use xlink:href="{{icon}}" />
+      <use xlink:href={{icon}} />
     </svg>
     {{/if}}
     {{#if ariaLabel}}
-    <span aria-label="{{ariaLabel}}" class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
+    <span aria-label={{ariaLabel}} class={{offsetForIcon ? 'offset-for-icon' : ''}}>
       {{label}}
     </span>
     {{else}}
-    <span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
+    <span class={{offsetForIcon ? 'offset-for-icon' : ''}}>
       {{label}}
     </span>
     {{/if}}

routes/_components/settings/SettingsNav.html

@@ -2,11 +2,11 @@
   <ul>
     {{#each navItems as navItem}}
     <li>
-      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
+      <SettingsNavItem :page name={{navItem.name}} href={{navItem.href}} label={{navItem.label}} />
     </li>
     {{/each}}
     <li>
-      <SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
+      <SettingsNavItem :page name={{page}} href="/{{page}}" :label />
     </li>
   </ul>
 </nav>

routes/_components/settings/SettingsNavItem.html

@@ -1,4 +1,7 @@
-<a class='settings-nav-item {{getCurrentClass(page, name)}}' aria-label='{{getAriaLabel(page, name, label)}}' href='{{href}}'>
+<a class="settings-nav-item {{getCurrentClass(page, name)}}"
+   aria-label={{getAriaLabel(page, name, label)}}
+   :href
+>
   {{label}}
 </a>
 <style>

routes/_components/status/Media.html

@@ -2,59 +2,59 @@
   <button type="button"
           class="play-video-button"
           aria-label="Play video: {{description}}"
-          delegate-key="{{delegateKey}}"
+          delegate-key={{delegateKey}}
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;">
     <PlayVideoIcon />
     <LazyImage
-      alt="{{description}}"
+      alt={{description}}
-      title="{{description}}"
+      title={{description}}
-      src="{{previewUrl}}"
+      src={{previewUrl}}
-      fallback="{{oneTransparentPixel}}"
+      fallback={{oneTransparentPixel}}
-      width="{{inlineWidth}}"
+      width={{inlineWidth}}
-      height="{{inlineHeight}}"
+      height={{inlineHeight}}
       background="var(--loading-bg)"
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
     />
   </button>
 {{else}}
   <button type="button"
           class="show-image-button"
           aria-label="Show image: {{description}}"
-          title="{{description}}"
+          title={{description}}
-          delegate-key="{{delegateKey}}"
+          delegate-key={{delegateKey}}
           on:mouseover="set({mouseover: event})"
           style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
   >
   {{#if type === 'gifv' && $autoplayGifs}}
     <AutoplayVideo
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
       ariaLabel="Animated GIF: {{description}}"
-      poster="{{previewUrl}}"
+      poster={{previewUrl}}
-      src="{{url}}"
+      src={{url}}
-      width="{{inlineWidth}}"
+      width={{inlineWidth}}
-      height="{{inlineHeight}}"
+      height={{inlineHeight}}
     />
   {{elseif type === 'gifv' && !$autoplayGifs}}
     <NonAutoplayGifv
-      class="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      class={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
       label="Animated GIF: {{description}}"
-      poster="{{previewUrl}}"
+      poster={{previewUrl}}
-      src="{{url}}"
+      src={{url}}
-      staticSrc="{{previewUrl}}"
+      staticSrc={{previewUrl}}
-      width="{{inlineWidth}}"
+      width={{inlineWidth}}
-      height="{{inlineHeight}}"
+      height={{inlineHeight}}
-      playing="{{mouseover}}"
+      playing={{mouseover}}
     />
   {{else}}
     <LazyImage
-      alt="{{description}}"
+      alt={{description}}
-      title="{{description}}"
+      title={{description}}
-      src="{{previewUrl}}"
+      src={{previewUrl}}
-      fallback="{{oneTransparentPixel}}"
+      fallback={{oneTransparentPixel}}
-      width="{{inlineWidth}}"
+      width={{inlineWidth}}
-      height="{{inlineHeight}}"
+      height={{inlineHeight}}
       background="var(--loading-bg)"
-      className="{{noNativeWidthHeight ? 'no-native-width-height' : ''}}"
+      className={{noNativeWidthHeight ? 'no-native-width-height' : ''}}
     />
   {{/if}}
 </button>

routes/_components/status/Notification.html

@@ -1,13 +1,13 @@
 {{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
   <Status :index :length :timelineType :timelineValue :focusSelector
-          status="{{notification.status}}"
+          status={{notification.status}}
           :notification
           on:recalculateHeight
   />
 {{else}}
   <article class="notification-article"
            tabindex="0"
-           aria-posinset="{{index}}" aria-setsize="{{length}}" >
+           aria-posinset={{index}} aria-setsize={{length}} >
     <StatusHeader :notification :notificationId :status :statusId :timelineType
                   :account :accountId :uuid isStatusInNotification="true" />
   </article>

routes/_components/status/Status.html

@@ -1,10 +1,10 @@
-<article class="{{className}}"
+<article class={{className}}
          tabindex="0"
-         delegate-key="{{delegateKey}}"
+         delegate-key={{delegateKey}}
-         focus-key="{{delegateKey}}"
+         focus-key={{delegateKey}}
-         aria-posinset="{{index}}"
+         aria-posinset={{index}}
-         aria-setsize="{{length}}"
+         aria-setsize={{length}}
-         aria-label="{{ariaLabel}}"
+         aria-label={{ariaLabel}}
          on:recalculateHeight>
   {{#if showHeader}}
     <StatusHeader {{...params}} />
@@ -19,7 +19,7 @@
     <StatusSpoiler {{...params}} on:recalculateHeight />
   {{/if}}
   {{#if showContent || contentPreloaded}}
-    <StatusContent {{...params}} shown="{{showContent}}"/>
+    <StatusContent {{...params}} shown={{showContent}}/>
   {{/if}}
   {{#if showMedia }}
     <StatusMediaAttachments {{...params}} on:recalculateHeight />

routes/_components/status/StatusAuthorName.html

@@ -1,7 +1,7 @@
 <a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
    href="/accounts/{{originalAccountId}}"
    title="{{'@' + originalAccount.acct}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
 >
   {{originalAccount.display_name || originalAccount.username}}
 </a>

routes/_components/status/StatusComposeBox.html

@@ -1,12 +1,12 @@
 <div class="status-article-compose-box">
-  <ComposeBox realm="{{originalStatusId}}"
+  <ComposeBox realm={{originalStatusId}}
               size="slim"
               autoFocus="true"
               hideBottomBorder="true"
               isReply="true"
-              replyVisibility="{{visibility}}"
+              replyVisibility={{visibility}}
-              replySpoiler="{{spoilerText}}"
+              replySpoiler={{spoilerText}}
-              inReplyToUuid="{{uuid}}"
+              inReplyToUuid={{uuid}}
   />
 </div>
 <style>

routes/_components/status/StatusContent.html

@@ -1,4 +1,4 @@
-<div class="{{computedClass}}" ref:node>
+<div class={{computedClass}} ref:node>
     {{{massagedContent}}}
 </div>
 <style>

routes/_components/status/StatusDetails.html

@@ -1,14 +1,14 @@
 <div class="status-details">
   <ExternalLink className="status-absolute-date"
-                href="{{originalStatus.url}}"
+                href={{originalStatus.url}}
                 showIcon="true"
                 ariaLabel="{{formattedDate}} (opens in new window)"
   >
-    <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
+    <time datetime={{createdAtDate}} title={{formattedDate}}>{{formattedDate}}</time>
   </ExternalLink>
   <a class="status-favs-reblogs"
      href="/statuses/{{originalStatusId}}/reblogs"
-     aria-label="{{reblogsLabel}}">
+     aria-label={{reblogsLabel}}>
     <svg class="status-favs-reblogs-svg">
       <use xlink:href="#fa-retweet"/>
     </svg>
@@ -16,7 +16,7 @@
   </a>
   <a class="status-favs-reblogs"
      href="/statuses/{{originalStatusId}}/favorites"
-     aria-label="{{favoritesLabel}}">
+     aria-label={{favoritesLabel}}>
     <svg class="status-favs-reblogs-svg">
       <use xlink:href="#fa-star" />
     </svg>

routes/_components/status/StatusHeader.html

@@ -3,7 +3,7 @@
     <Avatar :account size="extra-small"/>
   </div>
   <svg class="status-header-svg">
-    <use xlink:href="{{icon}}"/>
+    <use xlink:href={{icon}}/>
   </svg>
   <span class="status-header-span">
     {{#if timelineType === 'pinned'}}
@@ -12,7 +12,7 @@
       <a href="/accounts/{{accountId}}"
          class="status-header-a"
          title="{{'@' + account.acct}}"
-         focus-key="{{focusKey}}" >
+         focus-key={{focusKey}} >
         {{account.display_name || account.username}}
       </a>
       {{#if notification && notification.type === 'reblog'}}

routes/_components/status/StatusMediaAttachments.html

@@ -5,7 +5,7 @@
   <button type="button"
           class="status-sensitive-media-button"
           aria-label="Hide sensitive media"
-          delegate-key="{{delegateKey}}" >
+          delegate-key={{delegateKey}} >
     <div class="svg-wrapper">
       <svg class="status-sensitive-media-svg">
         <use xlink:href="#fa-eye-slash" />
@@ -17,7 +17,7 @@
     <button type="button"
             class="status-sensitive-media-button"
             aria-label="Show sensitive media"
-            delegate-key="{{delegateKey}}" >
+            delegate-key={{delegateKey}} >
 
       <div class="status-sensitive-media-warning">
         <span>Sensitive content. Click to show.</span>

routes/_components/status/StatusRelativeDate.html

@@ -1,8 +1,8 @@
 <a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
    href="/statuses/{{originalStatusId}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
 >
-  <time datetime={{createdAtDate}} title="{{relativeDate}}"
+  <time datetime={{createdAtDate}} title={{relativeDate}}
         aria-label="{{relativeDate}} – click to show thread">
     {{relativeDate}}
   </time>

routes/_components/status/StatusSidebar.html

@@ -1,6 +1,6 @@
 <a class="status-sidebar size-{{size}}"
    href="/accounts/{{originalAccountId}}"
-   focus-key="{{focusKey}}"
+   focus-key={{focusKey}}
    aria-hidden="true"
 >
   <Avatar account={{originalAccount}}

routes/_components/status/StatusSpoiler.html

@@ -2,7 +2,7 @@
   <p>{{{massagedSpoilerText}}}</p>
 </div>
 <div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
-  <button type="button" delegate-key="{{delegateKey}}">
+  <button type="button" delegate-key={{delegateKey}}>
     {{spoilerShown ? 'Show less' : 'Show more'}}
   </button>
 </div>

routes/_components/status/StatusToolbar.html

@@ -1,34 +1,34 @@
 <div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
   <IconButton
     className="status-toolbar-reply-button"
-    label="{{replyLabel}}"
+    label={{replyLabel}}
     pressable="true"
-    pressed="{{replyShown}}"
+    pressed={{replyShown}}
     href="#fa-reply"
-    delegateKey="{{replyKey}}"
+    delegateKey={{replyKey}}
-    focusKey="{{replyKey}}"
+    focusKey={{replyKey}}
     />
   <IconButton
-    label="{{reblogLabel}}"
+    label={{reblogLabel}}
-    pressable="{{!reblogDisabled}}"
+    pressable={{!reblogDisabled}}
-    pressed="{{reblogged}}"
+    pressed={{reblogged}}
-    disabled="{{reblogDisabled}}"
+    disabled={{reblogDisabled}}
-    href="{{reblogIcon}}"
+    href={{reblogIcon}}
-    delegateKey="{{reblogKey}}"
+    delegateKey={{reblogKey}}
     ref:reblogIcon
   />
   <IconButton
     label="Favorite"
     pressable="true"
-    pressed="{{favorited}}"
+    pressed={{favorited}}
     href="#fa-star"
-    delegateKey="{{favoriteKey}}"
+    delegateKey={{favoriteKey}}
     ref:favoriteIcon
   />
   <IconButton
     label="Show more options"
     href="#fa-ellipsis-h"
-    delegateKey="{{optionsKey}}"
+    delegateKey={{optionsKey}}
   />
 </div>
 <style>

routes/_components/timeline/MoreHeaderVirtualWrapper.html

@@ -1,5 +1,5 @@
-<MoreHeader count="{{virtualProps.count}}"
+<MoreHeader count={{virtualProps.count}}
-            onClick="{{virtualProps.onClick}}"
+            onClick={{virtualProps.onClick}}
 />
 <script>
   import MoreHeader from './MoreHeader.html'

routes/_components/timeline/NotificationVirtualListItem.html

@@ -1,10 +1,10 @@
 <Notification
-  notification="{{virtualProps.notification}}"
+  notification={{virtualProps.notification}}
-  timelineType="{{virtualProps.timelineType}}"
+  timelineType={{virtualProps.timelineType}}
-  timelineValue="{{virtualProps.timelineValue}}"
+  timelineValue={{virtualProps.timelineValue}}
-  focusSelector="{{virtualProps.focusSelector}}"
+  focusSelector={{virtualProps.focusSelector}}
-  index="{{virtualIndex}}"
+  index={{virtualIndex}}
-  length="{{virtualLength}}"
+  length={{virtualLength}}
   on:recalculateHeight />
 <script>
   import Notification from '../status/Notification.html'

routes/_components/timeline/PinnedStatuses.html

@@ -2,9 +2,9 @@
   {{#each pinnedStatuses as status, index @id}}
     <Status :status
             timelineType="pinned"
-            timelineValue="{{accountId}}"
+            timelineValue={{accountId}}
             :index
-            length="{{pinnedStatuses.length}}"
+            length={{pinnedStatuses.length}}
     />
   {{/each}}
 </div>

routes/_components/timeline/StatusVirtualListItem.html

@@ -1,9 +1,9 @@
-<Status status="{{virtualProps.status}}"
+<Status status={{virtualProps.status}}
-        timelineType="{{virtualProps.timelineType}}"
+        timelineType={{virtualProps.timelineType}}
-        timelineValue="{{virtualProps.timelineValue}}"
+        timelineValue={{virtualProps.timelineValue}}
-        focusSelector="{{virtualProps.focusSelector}}"
+        focusSelector={{virtualProps.focusSelector}}
-        index="{{virtualIndex}}"
+        index={{virtualIndex}}
-        length="{{virtualLength}}"
+        length={{virtualLength}}
         on:recalculateHeight />
 <script>
   import Status from '../status/Status.html'

routes/_components/timeline/Timeline.html

@@ -7,15 +7,15 @@
   {{#await componentsPromise}}
   {{then result}}
     <:Component {result.listComponent}
-                component="{{result.listItemComponent}}"
+                component={{result.listItemComponent}}
                 realm="{{$currentInstance + '/' + timeline}}"
                 containerQuery=".container"
                 :makeProps
-                items="{{$timelineItemIds}}"
+                items={{$timelineItemIds}}
-                showFooter="{{$timelineInitialized && $runningUpdate}}"
+                showFooter={{$timelineInitialized && $runningUpdate}}
-                footerComponent="{{LoadingFooter}}"
+                footerComponent={{LoadingFooter}}
-                showHeader="{{$showHeader}}"
+                showHeader={{$showHeader}}
-                headerComponent="{{MoreHeaderVirtualWrapper}}"
+                headerComponent={{MoreHeaderVirtualWrapper}}
                 :headerProps
                 :scrollToItem
                 on:scrollToBottom="onScrollToBottom()"

routes/_components/virtualList/VirtualList.html

@@ -2,19 +2,19 @@
   <div class="virtual-list"
        style="height: {{$height}}px;"
        ref:node >
-    <VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
+    <VirtualListHeader component={{headerComponent}} virtualProps={{headerProps}} shown={{$showHeader}}/>
     {{#if $visibleItems}}
       {{#each $visibleItems as visibleItem @key}}
         <VirtualListLazyItem :component
-                             offset="{{visibleItem.offset}}"
+                             offset={{visibleItem.offset}}
-                             makeProps="{{makeProps}}"
+                             makeProps={{makeProps}}
-                             key="{{visibleItem.key}}"
+                             key={{visibleItem.key}}
-                             index="{{visibleItem.index}}"
+                             index={{visibleItem.index}}
         />
       {{/each}}
     {{/if}}
     {{#if $showFooter}}
-      <VirtualListFooter component="{{footerComponent}}" />
+      <VirtualListFooter component={{footerComponent}} />
     {{/if}}
   </div>
 </VirtualListContainer>

routes/_components/virtualList/VirtualListItem.html

@@ -1,12 +1,12 @@
 <div class="virtual-list-item {{shown ? 'shown' : ''}}"
-     aria-hidden="{{!shown}}"
+     aria-hidden={{!shown}}
-     virtual-list-key="{{key}}"
+     virtual-list-key={{key}}
      ref:node
      style="transform: translateY({{offset}}px);" >
   <:Component {component}
-              virtualProps="{{props}}"
+              virtualProps={{props}}
-              virtualIndex="{{index}}"
+              virtualIndex={{index}}
-              virtualLength="{{$length}}"
+              virtualLength={{$length}}
               on:recalculateHeight="doRecalculateHeight()"/>
 </div>
 <style>

routes/_pages/accounts/[accountId].html

@@ -2,12 +2,12 @@
   <TimelinePage timeline="account/{{params.accountId}}">
     <DynamicPageBanner title="" />
     {{#if $currentAccountProfile && $currentVerifyCredentials}}
-    <AccountProfile account="{{$currentAccountProfile}}"
+    <AccountProfile account={{$currentAccountProfile}}
-                    relationship="{{$currentAccountRelationship}}"
+                    relationship={{$currentAccountRelationship}}
-                    verifyCredentials="{{$currentVerifyCredentials}}"
+                    verifyCredentials={{$currentVerifyCredentials}}
     />
     {{/if}}
-    <PinnedStatuses accountId="{{params.accountId}}" />
+    <PinnedStatuses accountId={{params.accountId}} />
   </TimelinePage>
 {{else}}
   <HiddenFromSSR>

routes/_pages/community/index.html

@@ -32,7 +32,7 @@
     <PageList label="Lists">
       {{#each $lists as list}}
       <PageListItem href="/lists/{{list.id}}"
-                    label="{{list.title}}"
+                    label={{list.title}}
                     icon="#fa-bars"
                     pinnable="true"
       />

routes/_pages/lists/[listId].html

@@ -1,7 +1,7 @@
 {{#if $isUserLoggedIn}}
   <TimelinePage timeline="list/{{params.listId}}">
     {{#if $pinnedPage !== `/lists/${params.listId}`}}
-      <DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
+      <DynamicPageBanner title={{listTitle}} icon="#fa-bars"/>
     {{/if}}
   </TimelinePage>
 {{else}}

routes/_pages/pinned.html

@@ -5,7 +5,7 @@
   {{elseif statuses && statuses.length}}
   <ul class="pinned-toots-results">
     {{#each statuses as status, index}}
-    <StatusSearchResult :status :index length="{{statuses.length}}" />
+    <StatusSearchResult :status :index length={{statuses.length}} />
     {{/each}}
   </ul>
   {{/if}}

routes/_pages/settings/instances/[instanceName].html

@@ -1,12 +1,12 @@
-<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
+<SettingsLayout page='settings/instances/{{params.instanceName}}' label={{params.instanceName}}>
   <h1 class="instance-name-h1">{{params.instanceName}}</h1>
 
   {{#if verifyCredentials}}
     <h2>Logged in as:</h2>
     <div class="acct-current-user">
-      <Avatar account="{{verifyCredentials}}" className="acct-avatar" size="big"/>
+      <Avatar account={{verifyCredentials}} className="acct-avatar" size="big"/>
       <ExternalLink className="acct-handle"
-                    href="{{verifyCredentials.url}}">
+                    href={{verifyCredentials.url}}>
         {{'@' + verifyCredentials.acct}}
       </ExternalLink>
       <span class="acct-display-name">{{verifyCredentials.display_name || verifyCredentials.acct}}</span>
@@ -16,7 +16,7 @@
       {{#each themes as theme}}
         <div class="theme-group">
           <input type="radio" id="choice-theme-{{theme.name}}"
-                 value="{{theme.name}}" checked="$currentTheme === theme.name"
+                 value={{theme.name}} checked="$currentTheme === theme.name"
                  bind:group="selectedTheme" on:change="onThemeChange()">
           <label for="choice-theme-{{theme.name}}">{{theme.label}}</label>
         </div>

routes/_pages/settings/instances/add.html

@@ -20,7 +20,7 @@
            bind:value='$instanceNameInSearch' placeholder='' required
     >
     <button class="primary" type="submit" id="submitButton"
-            disabled="{{!$instanceNameInSearch || $logInToInstanceLoading}}">
+            disabled={{!$instanceNameInSearch || $logInToInstanceLoading}}>
       Add instance
     </button>
   </form>

routes/_pages/settings/instances/index.html

@@ -5,10 +5,10 @@
   <p>Instances you've logged in to:</p>
   <SettingsList label="Instances">
     {{#each $loggedInInstancesAsList as instance}}
-      <SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
+      <SettingsListItem offsetForIcon={{instance.name !== $currentInstance}}
-                        icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
+                        icon={{instance.name === $currentInstance ? '#fa-star' : ''}}
                         href="/settings/instances/{{instance.name}}"
-                        label="{{instance.name}}"
+                        label={{instance.name}}
                         ariaLabel="{{instance.name}} {{instance.name === $currentInstance ? '(current instance)' : ''}}" />
     {{/each}}
   </SettingsList>