ピン留めされたアイテム

routes にある同じ種類のページ間を遷移すると 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);

phi@rabee

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==

phi@rabee

SvelteKit の app.html で使えるテンプレート変数

%svelte.head% ... head の内容を展開してくれる
%svelte.body% ... body の内容を展開してくれる
%svelte.assets% ... assets ディレクトリへのパスが入ってる. 相対パスなのであまり使わないほうが良いかも
%svelte.nonce% ... ランダムな値. query につけてキャッシュ無効にしたりってのに使う？

以下該当コード

phi@rabee

Svelte で pug まわりの置換やってるコード

phi@rabee

SvelteKit で, pug 上で変数展開使ってると npm run package した際にエラーになる

<template lang='pug'>
  svelte:component({...props})
</template>

今のところ直接の回避方法はなさそうなので html で書く...

<svelte:component {...props} />

phi@rabee

svelte-kit build で NODE_ENV が設定されていないとデフォで production が割り当てられる

phi@rabee

SvelteKit を 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@rabee

Svelte のコンポーネントに対してクラスを設定する方法

コンポーネント側

<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@rabee

current 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 から引っ張ってきてるので非推奨