Skip to content

sveltejs/svelte-upgrade

Repository files navigation

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

About

Upgrade your Svelte templates for version 2

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •  
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy