🐙

SvelteKit お試し編、CMS表示系など

2021/06/12に公開

概要:

SvelteKit正式リリースがまだ先で、未定のようなのですが。

入手できる内容で、試した内容となります。

  • 下記の通常インストールで、demo / todoを参考にしました
  • jsonファイルを読み込む例となります。

環境

  • sveltekit: next 版
  • svelte:  3.34.0
  • node : 14.17

関連

https://kit.svelte.dev/

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;
};


参考のコード

https://github.com/kuc-arc-f/sveltekit_1cms

....

Discussion