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 --> {{name}} <!-- after --> {name}
Control flow
<!-- before -->{{#if foo}} foo{{elseif bar}} bar{{else}} neither foo nor bar{{/if}} <!-- after -->{#if foo} foo{:elseif bar} bar{:else} neither foo nor bar{/if}
Keyed each blocks
<!-- before --> {{#each cats as cat @name}} {{cat.name}} {{/each}} <!-- after --> {#each cats as cat (cat.name)} {cat.name} {/each}
Built-in elements
<!-- before --> <!-- after -->
Dynamic components
<!-- before --> <!-- after -->
Shorthand properties
<!-- before --> <!-- after -->
HTML
<!-- before --> {{{post.content}}} <!-- after --> {@html post.content}
Store methods in event handlers
<!-- before -->click me <!-- after -->click me