npx degit sarioglu/svelte-tailwindcss-template svelte-book-review-app
cd svelte-book-review-app

node scripts/setupTypeScript.js

npm install

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
- import sveltePreprocess from 'svelte-preprocess';
 
const production = !process.env.ROLLUP_WATCH;
 
function serve() {
	let server;
 
	function toExit() {
		if (server) server.kill(0);
	}
 
	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});
 
			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}
 
export default {
	input: 'src/main.ts',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			preprocess: sveltePreprocess({ postcss: true }),
-			preprocess: sveltePreprocess(),
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),
 
		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		typescript({
			sourceMap: !production,
			inlineSources: !production
		}),
 
		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),
 
		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),
 
		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

npm run dev

<script lang="ts">
	import Tailwindcss from './Tailwindcss.svelte';
 
	export let name: string;
</script>
 
<Tailwindcss />
<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
 
<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
 
	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
 
	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

import App from './App.svelte';
 
const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});
 
export default app;

import App from './App.svelte';
 
const app = new App({
	target: document.body,
	props: {
		name: 'svelte'
	}
});
 
export default app;

<header class="top-0 lef-0 w-full z-40 bg-gray-900 shadow fixed border-b border-gray-200">
  <div class="container mx-auto px-6 h-16 flex justify-between items-center">
    <span class="font-semibold text-xl text-white tracking-tight">
      ブックレビュー App
    </span>
  </div>
</header>

<script lang="ts">
  import Tailwindcss from './Tailwindcss.svelte';
  import Header from './components/Header.svelte'
 
	export let name: string;
</script>
 
<Tailwindcss />
<Header />
<main class="pt-16">
  <div class="container mx-auto px-6 my-4">
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
  </div>
</main>

rm public/global.css

npm install svelte-spa-router

import SearchBook from '../pages/SearchBook.svelte'
 
export const routes = {
  '/': SearchBook,
}

<div>
  本を探す
</div>

<script lang="ts">
  import Tailwindcss from './Tailwindcss.svelte';
  import Header from './components/Header.svelte'
  import Router from 'svelte-spa-router'
  import { routes } from './router'
</script>
 
<Tailwindcss />
<Header />
<main class="pt-16">
  <div class="container mx-auto px-6 my-4">
    <Router {routes} />
  </div>
</main>

<Router routes="{routes}" /> <Router {routes} />

npm install axios

import axios from 'axios'
 
const httpClient = axios.create({
  baseURL: 'https://www.googleapis.com/books/v1/volumes'
})
 
export { httpClient }

/**
 * Google Books APIのレスポンス
 */
export interface Result {
  items: BookItem[];
  kind: string;
  totalItems: number;
}
 
/**
 * 本の情報
 */
export interface BookItem {
  id: string;
  volumeInfo: {
    title: string;
    authors?: string[];
    publishedDate?: string;
    description?: string;
    publisher?: string;
    imageLinks?: {
      smallThumbnail: string;
      thumbnail: string;
    };
    pageCount: number;
    previewLink?: string;
  };
  saleInfo?: {
    listPrice: {
      amount: number;
    };
  };
}
 
/**
 * query parameters
 */
export interface Params {
  q: string;
  startIndex?: number;
}
 
export interface BookRepositoryInterface {
  get(params: Params): Promise<Result>;
  find(id: string): Promise<BookItem>;
}

import type { BookItem, BookRepositoryInterface, Params, Result } from './types'
import { httpClient } from '../httpClient'
 
export class BookRepository implements BookRepositoryInterface {
  async get(params: Params) {
    const { data } = await httpClient.get<Result>('/', { params })
    return data
  }
 
  async find(id: string) {
    const { data } = await httpClient.get<BookItem>(`/${id}`)
    return data
  }
}

export * from './types'
export * from './BookRepository'

import { BookRepository, BookRepositoryInterface } from './book'
 
export const BOOK = Symbol('book')
 
export interface Repositories {
  [BOOK]: BookRepositoryInterface;
}
 
export default {
  [BOOK]: new BookRepository()
} as Repositories

import RepositoryFactory { BOOK } from '../repositories/RepositoryFactory.ts'
 
const BookRepository = RepositoryFactory[BOOK]
 
const book = async BookRespotirosy.get(id)

import { BookRepository, BookRepositoryInterface, MockBookRepository } from './book'
 
export const BOOK = Symbol('book')
 
export interface Repositories {
  [BOOK]: BookRepositoryInterface;
}
 
const isMock = process.env.NODE_ENV === 'test'
 
export default {
  [BOOK]: isMock ? new MockBookRepository() new BookRepository()
} as Repositories

<div class="shadow flex">
  <input class="w-full rounded p-2" type="text" placeholder="Search...">
  <button class="bg-white w-auto flex justify-end items-center text-blue-500 p-2 hover:text-blue-400">
    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
      <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </button>
</div>

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
</script>
 
<form>
  <SearchBar />
</from>

<script lang="ts">
+  export let value = '' // propsが渡されなかった時の初期値を定義できます。
</script>
 
<div class="shadow flex">
-  <input class="w-full rounded p-2" type="text" placeholder="Search...">
+  <input {value} class="w-full rounded p-2" type="text" placeholder="Search...">
  <button class="bg-white w-auto flex justify-end items-center text-blue-500 p-2 hover:text-blue-400">
    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
      <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </button>
</div>

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
 
  let q = 'JavaScript'
</script>
 
<form>
  <SearchBar value={q} />
</form>
 
<div class="text-center mt-4">
  { q }
</div>

<script lang="ts">
  export let value = ''
</script>
 
<div class="shadow flex">
-  <input {value} class="w-full rounded p-2" type="text" placeholder="Search...">
+  <input bind:value class="w-full rounded p-2" type="text" placeholder="Search...">
  <button class="bg-white w-auto flex justify-end items-center text-blue-500 p-2 hover:text-blue-400">
    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
      <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </button>
</div>

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
 
  let q = 'JavaScript'
</script>
 
<form>
-  <SearchBar value={q} />
+  <SearchBar bind:value={q} />
</form>
 
<div class="text-center mt-4">
  { q }
</div>

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
 
  let q = 'JavaScript'
 
+  const handleSubmit = () => {
+    console.log('handleSubmit')
+    console.log(q)
+  }
</script>
 
- <form>
+ <form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
 
<div class="text-center mt-4">
  { q }
</div>

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
  import type { BookItem, Result } from '../repositories/book';
  import RepositoryFactory, { BOOK } from '../repositories/RepositoryFactory'
  const BookRepository = RepositoryFactory[BOOK]
 
  let q = ''
  let empty = false
  let books: BookItem[] = []
  let promise: Promise<void>
 
  const handleSubmit = () => {
    if (!q.trim()) return
    promise = getBooks()
  }
 
  const getBooks = async () => {
    books = []
    empty = false
    const result = await BookRepository.get({ q })
    empty = result.totalItems === 0
    books = result.items
  }
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
 
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
    {#each books as book (book.id)}
      <div>{book.volumeInfo.title}</div>
    {/each}
  {/if}
  {#await promise}
    <div>loading...</div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

{#each todos as todo}
<p>{todo.text}</p>
{:else}
<p>No tasks today!</p>
{/each}

<svg class="animate-spin h-20 w-20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>

<script lang="ts">
  // 省略
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
 
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
    {#each books as book (book.id)}
      <div>{book.volumeInfo.title}</div>
    {/each}
  {/if}
  {#await promise}
    <div class="flex justify-center">
      <Spinner />
    </div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

<script lang="ts">
  import type { BookItem } from '../repositories/book'
  export let book: BookItem
 
  $: src = book.volumeInfo.imageLinks
    ? book.volumeInfo.imageLinks.smallThumbnail
    : 'http://placehold.jp/eeeeee/cccccc/160x120.png?text=No%20Image'
 
  $: description = book.volumeInfo.description
    ? `${book.volumeInfo.description.slice(0, 100)}...`
    : ''
 
</script>
 
<div class="w-full sm:flex">
  <div class="h-96 sm:h-auto sm:w-48 flex-none bg-cover rounded-t sm:rounded-t-none sm:rounded-l text-center overflow-hidden" style={`background-image: url('${src}')`}>
  </div>
  <div class="border-r border-b border-l border-grey-light sm:border-l-0 sm:border-t sm:border-grey-light bg-white rounded-b sm:rounded-b-none sm:rounded-r p-4 flex flex-col justify-between leading-normal w-100 sm:w-9/12 lg:w-7/12">
    <div class="my-4">
      <div class="text-black font-bold text-xl mb-2">{book.volumeInfo.title}</div>
      <p class="text-grey-darker text-sm break-words w-9/12 m-auto">
        {description}
      </p>
    </div>
  </div>
</div>

<script lang="ts">
  // 省略
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
 
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
    {#each books as book (book.id)}
      <BookCard {book} />
      {/each}
  </div>
  {/if}
  {#await promise}
-    <div>{book.volumeInfo.title}</div>
+    <div class="flex justify-center">
+      <Spinner />
*    </div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

npm i svelte-infinite-scroll

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
  import Spinner from '../components/Spinner.svelte'
  import BookCard from '../components/BookCard.svelte'
  import type { BookItem } from '../repositories/book';
  import RepositoryFactory, { BOOK } from '../repositories/RepositoryFactory'
+  import InfiniteScroll from "svelte-infinite-scroll"
  const BookRepository = RepositoryFactory[BOOK]
 
  let q = ''
  let empty = false
  let books: BookItem[] = []
  let promise: Promise<void>
 
  const handleSubmit = () => {
    if (!q.trim()) return
    promise = getBooks()
  }
 
  const getBooks = async () => {
    books = []
    empty = false
    const result = await BookRepository.get({ q })
    empty = result.totalItems === 0
    books = result.items
  }
 
+  const handleLoadMore = () => {
+    console.log('handleLoadMore')
+  }
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
    {#each books as book (book.id)}
      <BookCard {book} />
    {/each}
  </div>
+  <InfiniteScroll window on:loadMore={handleLoadMore} />
  {/if}
  {#await promise}
    <div class="flex justify-center">
      <Spinner />
    </div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

let startIndex = 0;

const handleLoadMore = () => {
  startIndex += 10;
  promise = getNextPage();
};
 
const getNextPage = async () => {
  const result = await BookRepository.get({ q, startIndex });
 
  // 取得データが既に存在するものを含む可能性があるので、idでフィルタリングしてます。
  const bookIds = books.map((book) => book.id);
  const filteredItems = result.items.filter((item) => {
    return !bookIds.includes(item.id);
  });
  books = [...books, ...filteredItems];
};

  const getBooks = async () => {
    books = []
    empty = false
+    startIndex = 0
    const result = await BookRepository.get({ q })
    empty = result.totalItems === 0
    books = result.items
  }

+  let totalItems = 0
 
+  $: hasMore = totalItems > books.length
 
 const getBooks = async () => {
   books = []
   empty = false
   startIndex = 0
   const result = await BookRepository.get({ q, startIndex })
   empty = result.totalItems === 0
+    totalItems = result.totalItems
   books = result.items
 }
 
 // 省略
 
 // <InfiniteScroll>にhasMoreをpropsとして渡す
 <InfiniteScroll window threshold={100} on:loadMore={handleLoadMore} {hasMore} />

import { writable } from 'svelte/store'
import type { BookItem } from '../../repositories/book'
 
const dummyBooks = [
  {
    id: '1',
    volumeInfo: {
      title: 'title1',
      description: 'lorem ipsm'
    }
  },
  {
    id: '2',
    volumeInfo: {
      title: 'title2',
      description: 'lorem ipsm'
    }
  },
  {
    id: '3',
    volumeInfo: {
      title: 'title3',
      description: 'lorem ipsm'
    }
  },
] as BookItem[]
 
export const books = writable<BookItem[]>(dummyBooks)

<script lang="ts">
  import BookCard from '../components/BookCard.svelte'
  import { books } from '../store/book'
  import { onDestroy } from 'svelte'
  import type { BookItem } from '../repositories/book'
 
  let _books: BookItem[]
 
  const unsubscribe = books.subscribe(value => _books = value)
 
  onDestroy(unsubscribe)
</script>
 
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
  {#each _books as book (book.id)}
    <BookCard {book} />
  {/each}
</div>

<script lang="ts">
  import BookCard from '../components/BookCard.svelte'
  import { books } from '../store/book'
 
</script>
 
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
  {#each $books as book (book.id)}
    <BookCard {book} />
  {/each}
</div>

import { writable } from 'svelte/store'
import type { BookItem } from '../../repositories/book'
 
export const books = writable<BookItem[]>([])

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
  import Spinner from '../components/Spinner.svelte'
  import BookCard from '../components/BookCard.svelte'
-  import type { BookItem } from '../repositories/book';
  import RepositoryFactory, { BOOK } from '../repositories/RepositoryFactory'
  import InfiniteScroll from "svelte-infinite-scroll"
+ import { books } from '../store/book'
  const BookRepository = RepositoryFactory[BOOK]
 
  let q = ''
  let empty = false
-  let books: BookItem[] = []
  let promise: Promise<void>
  let totalItems = 0
  let startIndex = 0
 
  $: hasMore = totalItems > $books.length
 
  const handleSubmit = () => {
    if (!q.trim()) return
    promise = getbooks()
  }
 
  const getBooks = async () => {
-    books = []
+    $books = []
    empty = false
    startIndex = 0
    const result = await BookRepository.get({ q, startIndex })
    empty = result.totalItems === 0
    totalItems = result.totalItems
-    books = result.itmem
+    $books = result.items
  }
 
  const handleLoadMore = () => {
    startIndex += 10
    promise = getNextPage()
  }
 
  const getNextPage = async () => {
    const result = await BookRepository.get({ q, startIndex })
 
    // 取得データが既に存在するものを含む可能性があるので、フィルタリングしてます。
-    const bookIds = books.map(book => book.id)
+    const bookIds = $books.map(book => book.id)
    const filteredItems = result.items.filter(item => {
      return !bookIds.includes(item.id)
    })
-    $books = [...$books, ...filteredItems]
+    $books = [...$books, ...filteredItems]
  }
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
-    {#each books as book (book.id}
+    {#each $books as book (book.id)}
      <BookCard {book} />
    {/each}
  </div>
  <InfiniteScroll window threshold={100} on:loadMore={handleLoadMore} {hasMore} />
  {/if}
  {#await promise}
    <div class="flex justify-center">
      <Spinner />
    </div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

import { writable } from 'svelte/store'
import type { BookItem } from '../../repositories/book'
 
const useBookStore = () => {
  const { subscribe } = writable<BookItem[]>([])
  return { subscribe }
}
 
export const books = useBookStore()

import { writable } from 'svelte/store'
import type { BookItem } from '../../repositories/book'
 
const useBookStore = () => {
  const { subscribe, set, update } = writable<BookItem[]>([])
  const reset = () => set([])
  const add = (newBooks: BookItem[]) => update((books: BookItem[]) => {
    return [...books, ...newBooks]
  })
  return {
    subscribe,
    reset,
    add
  }
}
 
export const books = useBookStore()

<script lang="ts">
  import SearchBar from '../components/SearchBar.svelte'
  import Spinner from '../components/Spinner.svelte'
  import BookCard from '../components/BookCard.svelte'
  import RepositoryFactory, { BOOK } from '../repositories/RepositoryFactory'
  import InfiniteScroll from "svelte-infinite-scroll"
  import { books } from '../store/book'
  const BookRepository = RepositoryFactory[BOOK]
 
  let q = ''
  let empty = false
  let promise: Promise<void>
  let totalItems = 0
  let startIndex = 0
 
  $: hasMore = totalItems > $books.length
 
  const handleSubmit = () => {
    if (!q.trim()) return
    promise = getbooks()
  }
 
  const getbooks = async () => {
-    $books = []
+    books.reset()
    empty = false
    startIndex = 0
    const result = await BookRepository.get({ q, startIndex })
    empty = result.totalItems === 0
    totalItems = result.totalItems
-    $books = retuls.items
+    books.add(result.items)
  }
 
  const handleLoadMore = () => {
    startIndex += 10
    promise = getNextPage()
  }
 
  const getNextPage = async () => {
    const result = await BookRepository.get({ q, startIndex })
 
    // 取得データが既に存在するものを含む可能性があるので、フィルタリングしてます。
    const bookIds = $books.map(book => book.id)
    const filteredItems = result.items.filter(item => {
      return !bookIds.includes(item.id)
    })
-    $books = [...$books, ...filterdItems]
+    books.add(filteredItems)
  }
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <SearchBar bind:value={q} />
</form>
<div class="text-center mt-4">
  {#if empty}
    <div>検索結果が見つかりませんでした。</div>
  {:else}
  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
    {#each $books as book (book.id)}
      <BookCard {book} />
    {/each}
  </div>
  <InfiniteScroll window threshold={100} on:loadMore={handleLoadMore} {hasMore} />
  {/if}
  {#await promise}
    <div class="flex justify-center">
      <Spinner />
    </div>
    {:catch e}
      <span class="text-red-600 text-sm">
        {e.message}
      </span>
  {/await}
</div>

import SearchBook from '../pages/SearchBook.svelte'
+ import DetailsBook from '../pages/DetailsBook.svelte'
 
export const routes = {
  '/': SearchBook,
+  '/books/:id': DetailsBook,
}

<script lang="ts">
  type Params = { id: string }
  export let params: Params
</script>
 
<div>
  { params.id }
</div>

<script lang="ts">
  import type { BookItem } from '../repositories/book'
+  import { link } from 'svelte-spa-router'
  export let book: BookItem
 
  $: src = book.volumeInfo.imageLinks
    ? book.volumeInfo.imageLinks.smallThumbnail
    : 'http://placehold.jp/eeeeee/cccccc/160x120.png?text=No%20Image'
 
  $: description = book.volumeInfo.description
    ? `${book.volumeInfo.description.slice(0, 100)}...`
    : ''
 
</script>
 
<div class="w-full sm:flex">
  <div class="h-96 sm:h-auto sm:w-48 flex-none bg-cover rounded-t sm:rounded-t-none sm:rounded-l text-center overflow-hidden" style={`background-image: url('${src}')`}>
  </div>
  <div class="border-r border-b border-l border-grey-light sm:border-l-0 sm:border-t sm:border-grey-light bg-white rounded-b sm:rounded-b-none sm:rounded-r p-4 flex flex-col justify-between leading-normal w-100 sm:w-9/12 lg:w-7/12">
    <div class="my-4">
+      <a href={`/books/${book.id}`} use:link>
+        <div class="text-black font-bold text-xl mb-2">{book.volumeInfo.title}</div>
+      </a>
      <p class="text-grey-darker text-sm break-words w-9/12 m-auto">
        {description}
      </p>
    </div>
  </div>
</div>

- import { writable } from 'svelte/store'
+ import { writable, derived } from 'svelte/store'
import type { BookItem } from '../../repositories/book'
 
const useBookStore = () => {
  const { subscribe, set, update } = writable<BookItem[]>([])
  const reset = () => set([])
  const add = (newBooks: BookItem[]) => update((books: BookItem[]) => {
    return [...books, ...newBooks]
  })
 
  return {
    subscribe,
    reset,
    add
  }
}
 
export const books = useBookStore()
 
+ export const find = (id: string) => {
+  return derived(books, $books => $books.find(book => book.id === id))
+ }

<script lang="ts">
  import Spinner from "../components/Spinner.svelte";
  import type { Readable } from "svelte/store";
  import type { BookItem } from "../repositories/book";
  import RepositoryFactory, { BOOK } from "../repositories/RepositoryFactory";
  import { find, books } from "../store/book";
  const BookRepository = RepositoryFactory[BOOK];
 
  type Params = { id: string };
  export let params: Params;
  let book: Readable<BookItem>;
  let promise: Promise<void>;
 
  const findById = async (id: string) => {
    const book = await BookRepository.find(id);
    books.add([book]);
  };
 
  book = find(params.id);
  if (!$book) {
    promise = findById(params.id);
  }
</script>
 
<div>
  {#await promise}
    <div class="flex justify-center">
      <Spinner />
    </div>
  {:then}
    {$book.volumeInfo.title}
  {:catch e}
    <span class="text-red-600 text-sm">
      {e.message}
    </span>
  {/await}
</div>

<script lang="ts">
  import Row from './Row.svelte'
  import type { BookItem } from "../repositories/book";
  export let book: BookItem
 
  const formatter = new Intl.NumberFormat('ja-JP', {
    style: 'currency',
    currency: 'JPY'
  })
  $: price = book.saleInfo?.listPrice?.amount
    ? formatter.format(book.saleInfo.listPrice.amount)
    : ''
 
  $: src = book.volumeInfo.imageLinks
    ? book.volumeInfo.imageLinks.thumbnail
    : 'http://placehold.jp/eeeeee/cccccc/160x120.png?text=No%20Image'
 
</script>
 
<div class="grid grid-cols-1 gap-2 md:grid-cols-3">
 
  <div class="cente">
    <img class="h-72 w-auto mx-auto" {src} alt="thumnail">
  </div>
  <div class="bg-white shadow overflow-hidden sm:rounded-lg col-span-2">
    <div class="px-4 py-5 sm:px-6">
      <h3 class="text-black font-bold text-xl mb-2">
        {book.volumeInfo.title}
      </h3>
    </div>
    <div class="border-t border-gray-200">
      <dl>
        <Row dt="著者">
          {book.volumeInfo.authors?.join(',')}
        </Row>
        <Row dt="概要">
          {book.volumeInfo.description}
        </Row>
        <Row dt="価格">
          {price}
        </Row>
        <Row dt="ページ数">
          {book.volumeInfo.pageCount}
        </Row>
        <Row dt="出版日">
          {book.volumeInfo.publishedDate}
        </Row>
        <Row dt="出版社">
          {book.volumeInfo.publisher}
        </Row>
        <Row dt="プレビュー">
          {#if book.volumeInfo.previewLink}
            <a href={book.volumeInfo.previewLink} class="text-blue-400">
              {book.volumeInfo.previewLink}
            </a>
          {/if}
        </Row>
      </dl>
    </div>
  </div>
</div>

<script lang="ts">
  export let dt: string
</script>
 
<div class="bg-gray-50 border-b border-gray-200 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
  <dt class="text-sm font-medium text-gray-500">
    {dt}
  </dt>
  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
    <slot />
  </dd>
</div>