🐙
SvelteKit お試し編、CMS表示系など
概要:
SvelteKit正式リリースがまだ先で、未定のようなのですが。
入手できる内容で、試した内容となります。
- 下記の通常インストールで、demo / todoを参考にしました
- jsonファイルを読み込む例となります。
環境
- sveltekit: next 版
- svelte: 3.34.0
- node : 14.17
関連
https://github.com/sveltejs/kit
https://svelte.dev/blog/sveltekit-beta
表示系の処理
- index :
https://gist.github.com/kuc-arc-f/1e3f19734249417f95676b1002c6d7cd
sapperの、preloadが無くなり。loadで初期の処理のようです。
fetchで、api通信可能でした
index.svelte
export const load = async ({ fetch }) => {
const res = await fetch('/posts.json');
if (res.ok) {
const posts = await res.json();
return {
props: { posts: posts.items }
};
}
const { message } = await res.json();
return {
error: new Error(message)
};
};
</script>
<script>
import { scale } from 'svelte/transition';
import { flip } from 'svelte/animate';
export let posts;
//var cfg = Config.get_config()
// console.log(cfg)
</script>
<style>
</style>
<svelte:head>
<title>Posts</title>
</svelte:head>
<!-- -->
<div class="body_main_wrap">
<h1>Posts</h1>
<hr />
{#each posts as item}
<a href={`/posts/${item.save_id}`}><h3>{item.title}</h3>
</a>
ID : {item.id}
<a href={`/posts/${item.save_id}`} class="btn">[ show ]
</a>
<hr />
{/each}
</div>
- API / index.json.js
fetch で、JSONファイルを読込、.svelteレスポンスは、
status=200, body=JS配列を設定すると。通信できました
index.json.js
export const get = async (request) => {
var cfg = Config.get_config()
const res = await fetch( cfg.MY_JSON_URL);
const posts = await res.json();
if (res.status === 404) {
return { body: [] };
}
var ret = {
status : 200,
body : posts,
}
return ret;
};
参考のコード
....
Discussion