SvelteJS：2番目のバージョンのリリース

昨日、若いが非常に有望なSvelteJSフレームワークの2番目のバージョンがリリースされました 。 バージョンはメジャーです。つまり、新機能と修正されたバグだけでなく、対応する「重大な変更」も含まれています。 新しいバージョンが開発者に提供する新しい機能と、 Svelteがさらに良くなった理由を猫の下で読んでください。





突然、何らかの未知の理由で、 Svelteが何であり、 「まだ別のjavascriptフレームワーク」ではない理由がわからない場合。 それが何であるかをよりよく理解するために、最初に追いつくことをお勧めします。

新しいテンプレート構文

新しいバージョンで最も明白でグローバルな変更は、テンプレートの構文の根本的な変更です。 リッチは最終的に、より簡潔なバージョンを支持して、「口ひげ」のような構文を取り除くことにしました。



だった

{{#if foo}} {{bar}} {{else}} {{baz}} {{/if}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

 {#if foo} {bar} {:else} {baz} {/if}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明らかに、構文は視覚的に単純で簡潔になりました。 変更は、特別なSvelte要素を含む、テンプレート内のすべてのデザインに影響しました。



だった

 <:Component {foo ? Red : Blue} name="thing" /> {{#if foo}} <:Self /> {{/if}} <:Window on:keydown="handleKey(event)" /> <:Head> <title>{{post.title}} • My blog</title> </:Head>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

 <svelte:component this="{foo ? Red : Blue}" name="thing"/> {#if foo} <svelte:self/> {/if} <svelte:window on:keydown="handleKey(event)" /> <svelte:head> <title>{post.title} • My blog</title> </svelte:head>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以前の特殊要素の構文はあまりにも珍しく、ほとんどのコードエディターはその強調表示に対処できませんでした。 新しい構文はXML 名前空間の構文に似ており、編集者がよりよく認識します。



Richに敬意を払い、すべての変更がコミュニティと活発に議論されたことに個別に注意しなければなりません。 私の提案の一部は構文の最終バージョンに含まれており、パーサーの簡素化にも貢献しているようです。



一般に、構文には多くの変更があり、 Svelteコンポーネントの自動アップグレード用に特別に作成されたsvelte-upgradeユーティリティ用でない場合、これは新しいバージョンへの移行の問題になる可能性があります。 変更点の完全なリストはそこにあります。



グッド、リッチ！ さようなら「口ひげ」！

ES6のみ

Svelteは主にコンパイラであるため、以前のバージョンの最終コードがES5でコンパイルされたことにまず注意する価値があります。 したがって、 IE11および他の「プログレッシブ」バージョンのブラウザーをサポートするために、 BabelやBubléなどのトランスパイラーと通信する必要はありませんでした。



しかし、2018年には、コンパイラーがより最適でコンパクトなコードを生成できるように、 ES5サポートを放棄することが決定されました。 つまり、SvelteはES6でコンポーネントをコンパイルするようになりました。古いバージョンのサポートが必要な場合は、トランスパイラーを使用する必要があります。



私自身もこのアプローチを完全にサポートしています。 さらに、 BabelをWebpackまたはRollupに接続することは誰にとっても難しいことではないと確信しています。 特に、 Svelteを使用せずにSvelteを使用しても機能しないと考える場合。 ;-)

アクション

私はまだこの機能がアクションと呼ばれる理由を理解していませんが、私はネイティブスピーカーがよりよく知っていると決めました。 個人的には-これは明らかな名前ではありません。



いずれにしても、この機能は便利です。 実際、これは要素がDOMでレンダリングされるときに起動する一種のフックです。 このために、新しい使用ディレクティブが導入されました。

 <img src="placeholder.jpg" use:lazyload="{ src: 'giant-photo.jpg' }">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動作の対応するセクション：

 export default { actions: { lazyload(node, data) { // do something return { update(data) {}, destroy() {} } } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アクションは、ディレクティブが適用される要素とそれに渡されたデータを最初のパラメーターとして受け取る関数です。 この関数は、必要なdestroy（）メソッドを持つオブジェクトを返す必要があります 。このメソッドは、要素がDOMから削除されるときに呼び出されます 。 また、オブジェクトにはオプションのupdate（）メソッドを含めることができます。このメソッドは、アクションに関連付けられたデータが変更されるたびに呼び出されます。



一般に、 DOMを直接操作する必要がある場合（過去のSvelte反応性）、アクションを使用すると、これを便利に行うことができ、これらの変更を同期するメカニズムを提供できます。

新しいライフサイクルフック

以前のバージョンでは、 oncreate（）とondestroy（）の 2つのフックしかありませんでした 。 また、状態を操作する2つのフックが追加されました。

 export default { onstate({ changed, current, previous }) { //   oncreate(),   ,    }, onupdate({ changed, current, previous }) { //   oncreate(),   ,  DOM      } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、各フックは3つのプロパティを持つオブジェクトを受け入れます。

• 変更済み -ストーリー内で変更されたキーが含まれます。 確認に使用
• 現在 -変更された状態
• 前 -前の状態

次のように使用できます。

 export default { onstate({ changed: { foo }, current, previous }) { if (foo) { console.log('foo has changed from %s to %s', previous.foo, current.foo); } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

またはこのように：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この重要な変更により、 observe（）メソッドはカーネルからsvelte-extrasアドオンパッケージに移動されました。 したがって、前の構文が気に入った場合は、このパッケージの対応するメソッドを単純に接続できます。

 import { observe } from 'svelte-extras'; export default { methods: { observe }, oncreate() { this.observe('foo', (current, previous) => {...}); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Rollupの作成者であるRichがツリー シェイキングのファンであることを思い出すと、このアプローチはすぐに明らかになります。

スプレッド属性

はい、私は知っています、これはJSXによってスパイされましたが、これは本質を変えません。 多くの人が賛成票を投じましたが、今ではスベルトも次のことができます。

 <Child {...childProps} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他の変更

一部の既存のAPIフレームワークで重要な変更が行われました。 主なものは次のとおりです。

get（）メソッドはパラメーターを受け取らず、常にコンポーネントの状態全体を返します。

だった

 const foo = this.get('foo'); const bar = this.get('bar');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

 const { foo, bar } = this.get();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは楽しく、 破壊的な割り当てを使用して必要なプロパティを決定できます。 さらに、このメソッドは、以前のバージョンではオブジェクトのみを使用していたset（）メソッドの拮抗薬により類似したものになりました。

 this.set({ foo: 1 }); const { foo } = this.get();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般的に、 SvelteはインターフェースでROROを使用する傾向が強まっているという印象を受けます。 ES6への完全な移行は、これにのみ貢献します。

同じ観察により、計算されたプロパティの新しい構文が確認されます。

だった

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一見、これは奇妙であまり役に立たない変更です（ROROを除く）が、実際には次のステップはコンポーネントの状態全体に依存する計算されたプロパティを作成する可能性です。 たとえば、ほぼ同じ方法で、フィルタリングまたはその他の操作、およびspread-attributeを使用して子コンポーネントに転送する場合（これは機能しません）：

 <Child {...props}/> <script> import Child from './Child.html'; export default { components: { Child }, computed: { props: state => { const { unwanted, alsoUnwanted, ...props } = state; return props; } } }; </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くの人がこれがいかにクールかを理解していると思います。 Rich Gachがこの機能をすぐに使用できることを願っています。

一貫性を保つ ために、カスタムイベントハンドラーはティアダウン（）ではなくdestroy（）を返すようになりました。

だった

 export function eventHandler(node, callback) { //... return { teardown() {} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

 export function eventHandler(node, callback) { //... return { destroy() {} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Svelteはコンポーネントの属性値を型にキャストしなくなりました

次に、式を使用して文字列以外の型を明示的に指定する必要があります。 最も重要なのは数字です：



だった

 <Counter start="1"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

 <Counter start="1"/> <!--  --> <Counter start="{1}"/> <!--  -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その意味は明確だと思います。 賢明な決定。

テンプレートでは、ストアメソッドを$プレフィックス経由で呼び出すことができます。

だった

 <button on:click="store.set({ clicked: true })">click me</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

になっています

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以前のバージョンでは、ストアからのデータのみが$プレフィックスを介して利用可能でした 。

ツドゥシュカ

明確にするために、彼は彼自身の「男」を打ち切りました。 その中で、私はこのタスクに適用できる新しいSvelte機能の最大値を反映しようとしました。



小さな人は、タスクをCRUDし、永続状態（ストレージ、バックエンドなど）との非同期相互作用をエミュレートし、1つのパラメーター（todoリストのタイプ（仕事、家族、趣味）、および軽いアニメーション）に従ってクエリを実行する方法を知っています。 それは原始的に機能し、素早く書かれています。 私が愛するすべて））））



→ タッチ



それだけです、ありがとうございます！ 良い金曜日と週末をお過ごしください！

更新：

Svelteに興味があり、その開発をフォローしたい方-ロシア語の電報チャネルSvelteJSへようこそ 。 よろしくお願いします！