svelte-upgrade

svelte-upgrade

Upgrade your Svelte templates for compatibility with version 2.

To update all the templates in the src directory:

npx svelte-upgrade v2 src

To update an individual component:

npx svelte-upgrade v2 MyComponent.html

To specify a different output location, instead of writing in place, use the --output (or -o) flag.

If files will be overwritten, you'll be prompted for confirmation. Use --force or -f to bypass the prompt.

Configuring the compiler

Prior to the release of Svelte v2, it is possible to opt in to the new syntax by passing the parser: 'v2' option to the compiler, either directly or via your rollup-plugin-svelte or svelte-loader options.

Svelte v2 syntax changes

Single-curly tags

<!-- before -->
<div class="item {{active ? 'highlighted' : ''}}">
  {{name}}
</div>

<!-- after -->
<div class="item {active ? 'highlighted' : ''}">
  {name}
</div>

Control flow

<!-- before -->
{{#if foo}}
  <p>foo</p>
{{elseif bar}}
  <p>bar</p>
{{else}}
  <p>neither foo nor bar</p>
{{/if}}

<!-- after -->
{#if foo}
  <p>foo</p>
{:elseif bar}
  <p>bar</p>
{:else}
  <p>neither foo nor bar</p>
{/if}

Keyed each blocks

<!-- before -->
<ul>
  {{#each cats as cat @name}}
    <li><a target='_blank' href={{cat.video}}>{{cat.name}}</a></li>
  {{/each}}
</ul>

<!-- after -->
<ul>
  {#each cats as cat (cat.name)}
    <li><a target='_blank' href={cat.video}>{cat.name}</a></li>
  {/each}
</ul>

Built-in elements

<!-- before -->
<:Window on:resize='handleResize()'/>

<!-- after -->
<svelte:window on:resize='handleResize()'/>

Dynamic components

<!-- before -->
<:Component {Thing}/>

<!-- after -->
<svelte:component this={Thing}/>

Shorthand properties

<!-- before -->
<Foo :bar/>

<!-- after -->
<Foo {bar}/>

HTML

<!-- before -->
<div class='blog-post'>
  {{{post.content}}}
</div>

<!-- after -->
<div class='blog-post'>
  {@html post.content}
</div>

Store methods in event handlers

<!-- before -->
<button on:click="store.set({ clicked: true })">click me</button>

<!-- after -->
<button on:click="$set({ clicked: true })">click me</button>

License

LIL