Take a quick look at the new version.

Note:The originalAs the framework continues to evolve, some elements may no longer be applicable.

We first discussed version V2 on Svelte’s Issue tracker about a year ago, and now it’s time to make some major changes.

Our motto is “step by step, old by new”.

… Okay, I made a mistake. Looks like I’m gonna turn over a new leaf.

This post explains what’s changed, what’s changed, why and how to deal with it.

To make a long story short, look at the outline

We go through every change in detail, but if you’re still having trouble, ask for help in our friendly Discord chat room.

  • Install Svelte V2 from NPM

  • Upgrade your template with svelte-upgrade

  • Remove the call to the Component. observe method or add the observe method from svelte-extras

  • Rewrite the call to component.get(‘foo’) to component.get().foo

  • Return destroy instead of Teardown from your custom event handler

  • Make sure that no strings with numeric values are passed to the component as props

The latest template syntax

The most obvious change is that we have made some improvements to the template syntax.

One of the things we often get is, “Gee, Mustache again” or “Gee, it’s Handlebars.”

In the early days of Web development, many developers used string-based templating systems, but they seemed to hate templating.

Since Svelte also uses this {{expression}} syntax, many people assume that we have some of the same limitations, such as strange scoping rules, or the inability to use JavaScript expressions freely.

Tip: If you need to display a ‘{‘ character, it can simply be represented as ‘{‘.

In addition, JSX proves that the use of double braces is unnecessary.

So we made the template more… Well, Svelte uses a single curly brace to enclose the expression.

It should be said that the results seem to be more relaxed and enjoyable to type:

<h1>Hello {name}! </h1>Copy the code

Of course there are some other newer ones as well.

The good news is that you don’t need to manually change them one by one, just run svelte-upgrade on the code base:

npx svelte-upgrade v2 src
Copy the code

This assumes that any.html file in the SRC directory is a widget.

The source and destination directories can be specified at your discretion. For example, you can update the Sapper application with NPX svelte-upgrade v2 routes.

For a complete list of changes, step over to the README document for Svelte-Upgrade.

Calculate attribute

One thing that people are often confused about with Svelte is how the calculated properties work.

To review, if you have a component like this…

export default {
  computed: {
    d: (a, b, c) => a = b + c
​  }
};
Copy the code

… Svelte first examines the parameters of the function in order to figure out what parameters D depends on, and then it automatically writes code that updates D by injecting new values into the function when those values change.

Cool!!!!

Because it allows you to get complex values from the component’s input without worrying about when you need to recalculate them, it’s also weird to use.

JavaScript syntax does not support this.

In v2, we use deconstruction instead:

export default {
  computed: {
    d: ({ a, b, c }) => a = b + c
  }
};
Copy the code

The Svelte compiler still knows which value D depends on, but instead of injecting the value, it drops the entire component state object into each calculated property.

Note: You don’t need to make this change manually either, just run svelte-upgrade on the component, as shown above.

IE11, sorry, keep it to yourself

Svelte V1 generates ES5 code so that you are not forced to use translators.

But it’s 2018, and almost all browsers support modern JavaScript. If we can get rid of the constraints of ES5, we can generate much more streamlined code.

However, if you still need friendly support for IE11, you can always use an interpreter like Babel or Buble.

New lifecycle Hook

In addition to onCreate and onDestroy, Svelte V2 adds two lifecycle functions to respond to state changes:

Export default {onState ({changed, current, previous}) {// Trigger before oncreate and when status changes}, onupdate({changed, current, previous}) Previous}) {// triggered after onCreate and when the DOM is updated after a state change}};Copy the code

You can also write code to listen for these events:

component.on('state', ({ changed, current, previous }) => {
  // ...
});
Copy the code

component.observe

With the new lifecycle function, we no longer need component.observe(…) Methods:

Export default {oncreate() {this.observe('foo', foo => {console.log('foo is now ${foo} '); // Export default {oncreate() {this.observe('foo', foo => {console.log('foo is now ${foo} '); }); }}; // export default {onstate({changed, current}) {if (changed. Foo) {console.log(' foo is now ${current. }}};Copy the code

This reduces the amount of code Svelte generates and gives you more flexibility.

For example, it is now very easy to respond to these actions when any one of several properties changes, such as redrawing the canvas without releasing the observer.

But if you really like to use component.observe(…) You can support this with Svelte-Extras.

import { observe } from 'svelte-extras';
​
export default {
  methods: {
    observe
  }
​};
Copy the code

component.get

This method no longer accepts the optional key argument — instead, it returns the entire state object altogether:

// const foo = this.get('foo'); const bar = this.get('bar'); // const {foo, bar} = this.get();Copy the code

This change may seem annoying at first, but it’s in the right direction:

In addition to other special cases, we will explore this aspect more fully in the future, and it may play a better role in the type system.

event_handler.destroy

If your application has a custom event handler, it must return a destroy method instead of a Teardown method. This aligns the event handler with the component’s API.

The type is no longer strictly required

Previously, values of numeric types passed to components were treated as pure numbers:

​<Counter start='1' />
Copy the code

This can lead to unexpected behavior. It has now been changed.

If you need to pass a literal number, you can use the expression directly:

<Counter start={1} />
Copy the code

Compiler changes

In most cases, you never have to deal with the compiler directly, so you don’t really need any compiler countermeasures.

However, it is worth noting that the compiler API has also changed.

Now the compiler will return JS, CSS, AST and STATS instead of objects with a bunch of attributes:

​const { js, css, ast, stats } = svelte.compile(source, options);
Copy the code

Js and CSS are {code, map} objects, where code is the code string and map stands for sourcemap.

The AST is an abstract syntax tree for the component, and the STATS object contains metadata and compilation information about the component.

There used to be a svelte.validate method to check if your component was valid.

It has been removed, however, so if you only need to check the component without actually compiling it, just pass the generate: false option.

I still need help with my application

Hopefully, this has covered all the possible problems, and the update should be a breeze for you.

If you find any bugs or unfinished items in this Discord chat room, or send them back to us in the Issue tracker.

——-

< The End >

– Bright and clean, waiting for the days to change