sveltejs/svelte-upgrade

Name: svelte-upgrade

Owner: Svelte

Description: Upgrade your Svelte templates for version 2

Created: 2018-04-12 03:55:29.0

Updated: 2018-05-01 08:58:45.0

Pushed: 2018-04-21 00:19:50.0

Homepage: null

Size: 60

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

svelte-upgrade

Upgrade your Svelte templates for compatibility with version 2.

To update all the templates in the src directory:

svelte-upgrade v2 src

To update an individual component:

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 -->
 class="item {{active ? 'highlighted' : ''}}">
name}}
v>

 after -->
 class="item {active ? 'highlighted' : ''}">
ame}
v>
Control flow
 before -->
f foo}}
>foo</p>
seif bar}}
>bar</p>
se}}
>neither foo nor bar</p>
f}}

 after -->
 foo}
>foo</p>
seif bar}
>bar</p>
se}
>neither foo nor bar</p>
}
Keyed each blocks
 before -->

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

 after -->

each cats as cat (cat.name)}
<li><a target='_blank' href={cat.video}>{cat.name}</a></li>
each}
>
Built-in elements
 before -->
ndow on:resize='handleResize()'/>

 after -->
lte:window on:resize='handleResize()'/>
Dynamic components
 before -->
mponent {Thing}/>

 after -->
lte:component this={Thing}/>
Shorthand properties
 before -->
 :bar/>

 after -->
 {bar}/>
HTML
 before -->
 class='blog-post'>
{post.content}}}
v>

 after -->
 class='blog-post'>
html post.content}
v>
Store methods in event handlers
 before -->
ton on:click="store.set({ clicked: true })">click me</button>

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

LIL


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.