Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bin
 
 
 
 
 
 

README.md

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

You can’t perform that action at this time.