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
