Svelte / Svelte Kit 自分用メモ
phi@rabeeroutes にある同じ種類のページ間を遷移すると load は呼ばれるが, script タグ内の処理は実行されない
例えば /routes/posts/[id].svelte というファイルを作って
/posts/a から /posts/b に遷移する.
すると <script context="module"> ~ </script> で定義している load は呼ばれるが, <script> ~ </script> の処理は一切実行されない
meta 情報とかも更新されないのでどうしたものか...
2022/02/13
リアクティブを活用することで解決!
<script>
export let post;
$: title = `${post.id}. ${post.title}`;
</script>
<div>{post.id}. {post.title}</div>
<div>{title}</div>
そのやり取り
開発者の方々がすごく親切で助かりました.
2022/02/05 18:00
SvelteKit 側の問題かもしれない
おそらく root のもつ components をベースにレンダリングしているが, components[1] に入ってる reoutes component が同じ場合, 再レンダリングがされないのが原因っぽい
とりあえず root.svelte に
+ <svelte:options accessors={true}/>
を追加して, renderer.js のこのコードの直前 に以下のコードを入れれば改善した
+ this.root.components = [];
this.root.$set(navigation_result.props);
2022/02/05 18:16
こっちのほうがスマートかも
root.svelte 修正する必要もない
+ this.root.$set({
+ components: [],
+ });
+ await tick();
this.root.$set(navigation_result.props);
SvelteKit をバージョンアップしたら config.kit.target is no longer required, and should be removed というエラーが...
yarn し直したら以下のエラーが出るように...
config.kit.target is no longer required, and should be removed
原因と対応方法
メッセージの通り, svelte.config.js の config.kit.target を削除すれば OK
- // hydrate the <div id="svelte"> element in src/app.html
- target: '#svelte',
SvelteKit わりとビルドバージョンアップで動かなくなることあるので要注意!
Memo
この辺のバージョンアップで変わったっぽい
- version "1.0.0-next.252"
- resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.252.tgz#8b469bd74acb12a087c65e08e85e6d3ce2daae0c"
- integrity sha512-cUreghq9H4WZyqwR/whBP1w+IQbR/VYKCmOduBYykj1lSeVZrUIlX+usxpNTtOCmekP7RPGDhQHfYyb58FbD3g==
+ version "1.0.0-next.260"
+ resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.260.tgz#3e3c26f59c439744db54a48742ee07ac071114db"
+ integrity sha512-0EEkGD0BpZdgRm9UoOnldS8iDFFhT2ixN3oQ/9DblGKNo7cz/FEQmKoYYIOOVYI3XyurwccWORPEpTTA4l9Oew==
SvelteKit の app.html で使えるテンプレート変数
-
%svelte.head%... head の内容を展開してくれる -
%svelte.body%... body の内容を展開してくれる -
%svelte.assets%... assets ディレクトリへのパスが入ってる. 相対パスなのであまり使わないほうが良いかも -
%svelte.nonce%... ランダムな値. query につけてキャッシュ無効にしたりってのに使う？
以下該当コード
phi@rabeeSvelte で pug まわりの置換やってるコード
phi@rabeeSvelteKit で, pug 上で変数展開使ってると npm run package した際にエラーになる
<template lang='pug'>
svelte:component({...props})
</template>
今のところ直接の回避方法はなさそうなので html で書く...
<svelte:component {...props} />
svelte-kit build で NODE_ENV が設定されていないとデフォで production が割り当てられる
phi@rabeeSvelteKit を render.com にデプロイする方法
adapter を変更する
adapter-node にする
render.com の設定
npm の場合
- Build Command に
npm install && npm run build - Start Command に
node build/index.js
yarn の場合
- Build Command に
yarn && yarn build - Start Command に
node build/index.js
npm run preview は公開時のコマンドとしては非推奨なので使わない
ref
phi@rabeeSvelte のコンポーネントに対してクラスを設定する方法
<script>
// root 用のクラス
let className;
export { className as class };
</script>
<div class='{className}'></div>
<component class='hoge foo bar'></component>
<style>
:global(.hoge) {
color: red;
}
</style>
phi@rabeecurrent component の取得方法
import { get_current_component, onMount } from "svelte/internal";
let component = get_current_component();
登録されてるイベントとかは以下の感じで参照できる
let component = get_current_component();
onMount(() => {
console.log(component.$$.callbacks);
});
多分 svelte/internal から引っ張ってきてるので非推奨