upgrade to svelte 2.0

package.json

@@ -77,9 +77,9 @@
     "shrink-ray-current": "2.1.0",
     "stringz": "1.0.0",
     "style-loader": "0.21.0",
-    "svelte": "1.64.1",
+    "svelte": "2.4.1",
     "svelte-extras": "2.0.2",
-    "svelte-loader": "2.8.1",
+    "svelte-loader": "2.9.0",
     "svelte-transitions": "1.1.1",
     "svgo": "1.0.5",
     "timeago.js": "3.0.2",

routes/_components/AccountsListPage.html

@@ -1,17 +1,17 @@
 <div class="accounts-page">
-  {{#if loading}}
+  {#if loading}
     <LoadingPage />
-  {{elseif accounts && accounts.length}}
+  {:elseif accounts && accounts.length}
     <ul class="accounts-results">
-      {{#each accounts as account}}
+      {#each accounts as account}
         <AccountSearchResult
-          :account
-          actions={{accountActions}}
+          {account}
+          actions={accountActions}
           on:click="onClickAction(event)"
         />
-      {{/each}}
+      {/each}
     </ul>
-  {{/if}}
+  {/if}
 </div>
 <style>
   .accounts-page {

routes/_components/AutoplayVideo.html

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

routes/_components/Avatar.html

@@ -1,27 +1,27 @@
-{{#if error}}
-<svg class={{computedClass}} aria-hidden="true">
+{#if error}
+<svg class={computedClass} aria-hidden="true">
   <use xlink:href="#fa-user" />
 </svg>
-{{elseif $autoplayGifs}}
+{: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}}
+{:else}
   <NonAutoplayImg
-    className={{computedClass}}
+    className={computedClass}
     ariaHidden="true"
     alt=""
-    src={{account.avatar}}
-    staticSrc={{account.avatar_static}}
-    :isLink
+    src={account.avatar}
+    staticSrc={account.avatar_static}
+    {isLink}
     on:imgLoad="set({loaded: true})"
     on:imgLoadError="set({error: true})"
   />
-{{/if}}
+{/if}
 <style>
   :global(.avatar) {
     border-radius: 4px;
@@ -82,7 +82,7 @@
     }),
     store: () => store,
     computed: {
-      computedClass: (className, loaded, size) => (classname(
+      computedClass: ({ className, loaded, size }) => (classname(
         'avatar',
         className,
         loaded && 'loaded',

routes/_components/DynamicPageBanner.html

@@ -1,10 +1,10 @@
-<div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
-  {{#if icon}}
+<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>
+  {/if}
+  <h1 class="dynamic-page-title">{title}</h1>
   <button type="button"
           class="dynamic-page-go-back"
           on:click="onGoBack(event)">Back</button>

routes/_components/ExternalLink.html

@@ -1,13 +1,13 @@
 <a rel="nofollow noopener"
    target="_blank"
-   :href
-   aria-label={{ariaLabel}}
-   class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
-  <slot></slot>{{#if showIcon}}
+   {href}
+   aria-label={ariaLabel}
+   class="{className || ''} {showIcon ? 'external-link-with-icon' : ''} {normalIconColor ? 'normal-icon-color' : ''}">
+  <slot></slot>{#if showIcon}
     <svg class="external-link-svg">
       <use xlink:href="#fa-external-link" />
     </svg>
-  {{/if}}</a>
+  {/if}</a>
 <style>
   .external-link-with-icon {
     display: inline-flex;

routes/_components/IconButton.html

@@ -1,30 +1,30 @@
-{{#if delegateKey}}
+{#if delegateKey}
   <button type="button"
-          title={{label}}
-          aria-label={{label}}
-          aria-pressed={{pressable ? !!pressed : ''}}
-          class={{computedClass}}
-          :disabled
-          delegate-key={{delegateKey}}
-          focus-key={{focusKey || ''}} >
-    <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href={{href}} />
+          title={label}
+          aria-label={label}
+          aria-pressed={pressable ? !!pressed : ''}
+          class={computedClass}
+          {disabled}
+          delegate-key={delegateKey}
+          focus-key={focusKey || ''} >
+    <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
+      <use xlink:href={href} />
     </svg>
   </button>
-{{else}}
+{:else}
   <button type="button"
-          title={{label}}
-          aria-label={{label}}
-          aria-pressed={{pressable ? !!pressed : ''}}
-          class={{computedClass}}
-          focus-key={{focusKey || ''}}
-          :disabled
+          title={label}
+          aria-label={label}
+          aria-pressed={pressable ? !!pressed : ''}
+          class={computedClass}
+          focus-key={focusKey || ''}
+          {disabled}
           on:click >
-    <svg class="icon-button-svg {{svgClassName || ''}}" ref:svg>
-      <use xlink:href={{href}} />
+    <svg class="icon-button-svg {svgClassName || ''}" ref:svg>
+      <use xlink:href={href} />
     </svg>
   </button>
-{{/if}}
+{/if}
 <style>
   .icon-button {
     padding: 6px 10px;
@@ -118,7 +118,7 @@
     }),
     store: () => store,
     computed: {
-      computedClass: (pressable, pressed, big, muted, className) => {
+      computedClass: ({ pressable, pressed, big, muted, className }) => {
         return classname(
           'icon-button',
           !pressable && 'not-pressable',

routes/_components/Layout.html

@@ -1,12 +1,12 @@
-<Nav :page />
+<Nav {page} />
 
 <div class="container" tabindex="0" ref:container>
   <main>
     <slot></slot>
   </main>
-  {{#if !$isUserLoggedIn && page === 'home'}}
+  {#if !$isUserLoggedIn && page === 'home'}
     <InformationalFooter />
-  {{/if}}
+  {/if}
 </div>
 <script>
   import Nav from './Nav.html'

routes/_components/LazyImage.html

@@ -1,16 +1,16 @@
 <div class="lazy-image"
-     style="width: {{width}}px; height: {{height}}px; background: {{background}};">
-  {{#if displaySrc}}
+     style="width: {width}px; height: {height}px; background: {background};">
+  {#if displaySrc}
     <img
-      class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
-      aria-hidden={{ariaHidden || ''}}
-      alt={{alt || ''}}
-      title={{alt || ''}}
-      src={{displaySrc}}
-      :width
-      :height
+      class="{hidden ? 'hidden' : ''} {className || ''}"
+      aria-hidden={ariaHidden || ''}
+      alt={alt || ''}
+      title={alt || ''}
+      src={displaySrc}
+      {width}
+      {height}
     />
-  {{/if}}
+  {/if}
 </div>
 <style>
   .lazy-image {

routes/_components/LazyPage.html

@@ -1,6 +1,6 @@
-{{#if revealed}}
-  <:Component {pageComponent} :params />
-{{/if}}
+{#if revealed}
+  <svelte:component this={pageComponent} {params} />
+{/if}
 <script>
   // On the very first page load, avoid doing a "reveal" because
   // it leads to a flash between when the SSR is shown, the two frame we hide it,

routes/_components/LoadingMask.html

@@ -1,9 +1,9 @@
-<div class="loading-mask-container {{shown ? 'loading-mask-container-shown' : ''}}">
-  {{#if shown}}
+<div class="loading-mask-container {shown ? 'loading-mask-container-shown' : ''}">
+  {#if shown}
     <div class="loading-mask">
       <LoadingSpinner maskStyle="true"/>
     </div>
-  {{/if}}
+  {/if}
 </div>
 <style>
   .loading-mask-container {
@@ -37,7 +37,7 @@
   export default {
     store: () => store,
     computed: {
-      shown: ($logInToInstanceLoading) => $logInToInstanceLoading
+      shown: ({ $logInToInstanceLoading }) => $logInToInstanceLoading
     },
     components: {
       LoadingSpinner

routes/_components/LoadingPage.html

@@ -1,4 +1,4 @@
-<div class="loading-page {{shown ? '' : 'hidden'}}">
+<div class="loading-page {shown ? '' : 'hidden'}">
   <LoadingSpinner />
 </div>
 <style>

routes/_components/LoadingSpinner.html

@@ -1,5 +1,5 @@
-<svg class="loading-spinner-icon spin {{maskStyle ? 'mask-style' : ''}}"
-     style="width: {{size}}px; height: {{size}}px;"
+<svg class="loading-spinner-icon spin {maskStyle ? 'mask-style' : ''}"
+     style="width: {size}px; height: {size}px;"
      aria-label="Loading"
 >
   <use xlink:href="#fa-spinner" />

routes/_components/Nav.html

@@ -1,36 +1,36 @@
 <nav class="main-nav">
 	<ul class="main-nav-ul">
 		<li class="main-nav-li">
-      <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
+      <NavItem {page} name="home" href="/" svg="#pinafore-logo" label="Home" />
 		</li>
 		<li class="main-nav-li">
-      <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
+      <NavItem {page} name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
 		</li>
-    {{#if $pinnedPage === '/local'}}
+    {#if $pinnedPage === '/local'}
       <li class="main-nav-li">
-        <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
+        <NavItem {page} name="local" href="/local" svg="#fa-users" label="Local" />
       </li>
-    {{elseif $pinnedPage === '/federated'}}
+    {:elseif $pinnedPage === '/federated'}
       <li class="main-nav-li">
-        <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
+        <NavItem {page} name="federated" href="/federated" svg="#fa-globe" label="Federated" />
       </li>
-    {{elseif $pinnedPage === '/favorites'}}
+    {:elseif $pinnedPage === '/favorites'}
       <li class="main-nav-li">
-        <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
+        <NavItem {page} name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
       </li>
-    {{elseif $pinnedPage.startsWith('/lists/')}}
+    {: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}}
+    {/if}
 		<li class="main-nav-li">
-      <NavItem :page name="community" href="/community" svg="#fa-comments" label="Community" />
+      <NavItem {page} name="community" href="/community" svg="#fa-comments" label="Community" />
 		</li>
     <li class="main-nav-li">
-      <NavItem :page name="search" href="/search" svg="#fa-search" label="Search" />
+      <NavItem {page} name="search" href="/search" svg="#fa-search" label="Search" />
     </li>
 	  <li class="main-nav-li">
-      <NavItem :page name="settings" href="/settings" svg="#fa-gear" label="Settings" />
+      <NavItem {page} name="settings" href="/settings" svg="#fa-gear" label="Settings" />
 		</li>
 	</ul>
 </nav>