昨日
、若いが非常に有望な
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) {
アクションは、ディレクティブが適用される要素とそれに渡されたデータを最初のパラメーターとして受け取る関数です。 この関数は、必要な
destroy（）メソッドを持つオブジェクトを返す必要があり
ます 。このメソッドは、要素が
DOMから削除されるときに呼び出され
ます 。 また、オブジェクトにはオプションの
update（）メソッドを含めることができます。このメソッドは、アクションに関連付けられたデータが変更されるたびに呼び出されます。
一般に、
DOMを直接操作する必要がある場合（過去の
Svelte反応性）、アクションを使用すると、これを便利に行うことができ、これらの変更を同期するメカニズムを提供できます。
新しいライフサイクルフック
以前のバージョンでは、
oncreate（）と
ondestroy（）の 2つのフックしかあり
ませんでした 。 また、状態を操作する2つのフックが追加されました。
export default { onstate({ changed, current, previous }) {
ご覧のとおり、各フックは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) {
になっています export function eventHandler(node, callback) {
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へようこそ 。 よろしくお願いします！