Svelteメモ

!README-svelte.md

Svelte Memo

Svelte

import type { Post } from 'src/types';のように型情報だけインポート。

// eslint.cjs
rules: {
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    // for svelte
    "@typescript-eslint/consistent-type-imports": [
      "error",
      { prefer: "type-imports" },
    ],
  },

参考

http:localohost:5000を開くと403

degitでは、デフォルトでhttp://localhost:5000/が使用されます。macOS Monterey以降を使用している場合は、AirPlay Receiverがポート5000を使用しているので正しく動作しません。

portを明示する

"start": "sirv public --no-clear --port 8080"

参考

Sveltekit

propsを定義するところはload関数でpropsをアウトプットしたscriptタグとは別に作る。最初わからなかった。

<script context="module" lang="ts">
	import type { Load } from '@sveltejs/kit';
	import type { Post } from 'src/types';

	export const load: Load = async ({ fetch }) => {
		const response = await fetch('https://jsonplaceholder.typicode.com/posts');
		const posts = (await response.json()) as Post[];
		return {
			props: {
				posts: response.ok && posts
			}
		};
	};
  
  //　これはダメ
  export let posts: Post[];
</script>

index.svelte

01-index.svelte

<script context="module" lang="ts">
	import type { Load } from '@sveltejs/kit';
	import type { Post } from 'src/types';

	export const load: Load = async ({ fetch }) => {
		const response = await fetch('https://jsonplaceholder.typicode.com/posts');
		const posts = (await response.json()) as Post[];
		return {
			props: {
				posts: response.ok && posts
			}
		};
	};
</script>

<script lang="ts">
	export let posts: Post[];
</script>

<ul class="post-list">
	{#each posts as post}
		<li><a href={`posts/${post.id}`} class="post-link">{post.title}</a></li>
	{/each}
</ul>

<style>
	.post-list {
		list-style-type: decimal;
	}

	.post-list > li {
		margin-top: 10px;
	}

	.post-link {
		color: #000;
		text-decoration: none;
	}

	.post-link:hover {
		text-decoration: underline;
	}
</style>