Open2021/03/13にコメント追加2

svelte メモ

TypeScript

Svelte

Snowpack

succie

環境構築

ライブラリ

svelte を dependencies にするのか devDependencies にするのか迷ったが
svelte がコンパイラである点 (runtime に影響しない) や svelte の公式 template では devDependencies にあるため devDependencies に追加。

$ npm i --save-dev svelte svelte-check svelte-preprocess snowpack @snowpack/plugin-svelte @snowpack/plugin-typescript typescript

svelte: svelte 本体
svelte-check: 使っていない css とか a11y とか js/ts のコンパイルエラーをチェックツール
svelte-preprocess: js/css/html しか解釈できない svelte に ts や scss とかも解釈できるようにするやつ
snowpack: ビルドツール。esbuild 使ってて高速だったり Sveltekit でも使われるので採用
@snowpack/plugin-svelte: snowpack で svelte をビルドするためのプラグイン
@snowpack/plugin-typescript: snowpack で型チェックするためのプラグイン
typescript: javascript に型を追加したやつ

snowpack の設定ファイル

snowpack.config.js

module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/' }
  },
  plugins: ['@snowpack/plugin-svelte', '@snowpack/plugin-typescript'],
  packageOptions: {
    source: 'remote',
    types: true
  }
};

Streaming Imports を使うために packageOptions を編集。
開発中とビルド時に (デフォルトでは) skypack からライブラリをオンデマンドで取得するモード。
ローカル上にライブラリをダウンロードしなくて済むのでよき。

svelte の設定ファイル

svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: 'typescript',
      style: 'sass'
    }
  })
};

succie

Reactivity

変数

react で言う state は svelte では let で宣言する。
その変数が変わるたびに自動的にDOMを更新する。
他の部分から計算される必要がある場合は $: variableName のように宣言することでリアラティブな宣言が可能。

この例では count が変化するたびに double も再計算される

let count = 0;
$: doubled = count * 2;

Statement

変数だけではなくブロックそのものをリアラティブにすることも可能。
count が変化するたびに呼ばれる。
（ブロック内に使用されていない state が変化しても実行されないっぽい）

$: if (count > 10) {
  console.log(`${count} is over 10`);
}

配列やオブジェクト

svelte は割り当てによってDOMの更新を行うため、push や splice などの配列メソッドを使用しても、自動的に更新は行われない。
そのため、数値を配列に追加するような処理は以下のようにしないといけない

let numbers: number[] = [];

function addNumber() {
  numbers = [...numbers, numbers.length + 1];
}