12 |
14 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: {
3 | enabled: !process.env.ROLLUP_WATCH,
4 | mode: 'all',
5 | content: ['./**/**/*.html', './**/**/*.svelte'],
6 |
7 | options: {
8 | whitelistPatterns: [/svelte-/],
9 | defaultExtractor: (content) =>
10 | [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
11 | },
12 | },
13 | darkMode: false, // or 'media' or 'class'
14 | theme: {
15 | extend: {},
16 | },
17 | variants: {
18 | extend: {},
19 | },
20 | plugins: [],
21 | }
22 |
--------------------------------------------------------------------------------
/src/store/book/index.ts:
--------------------------------------------------------------------------------
1 | import { writable, derived } from 'svelte/store'
2 | import type { BookItem } from '../../repositories/book'
3 |
4 | const useBookStore = () => {
5 | const { subscribe, set, update } = writable
14 |
15 |
16 |
17 |
18 | Svelteを使ってアプリケーションを作成1から作成することができます。
19 | 以下のことが学べます。
20 |
21 | - Svelteの基礎文法
22 | - Svelteのルーティング
23 | - Svelteのストア
24 |
25 | HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。
26 |
--------------------------------------------------------------------------------
/src/repositories/book/types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Google Books APIのレスポンス
3 | */
4 | export interface Result {
5 | items: BookItem[];
6 | kind: string;
7 | totalItems: number;
8 | }
9 |
10 | /**
11 | * 本の情報
12 | */
13 | export interface BookItem {
14 | id: string;
15 | volumeInfo: {
16 | title: string;
17 | authors?: string[];
18 | publishedDate?: string;
19 | description?: string;
20 | publisher?: string;
21 | imageLinks?: {
22 | smallThumbnail: string;
23 | thumbnail: string;
24 | };
25 | pageCount: number;
26 | previewLink?: string;
27 | };
28 | saleInfo?: {
29 | listPrice: {
30 | amount: number;
31 | };
32 | };
33 | }
34 |
35 | /**
36 | * query parameters
37 | */
38 | export interface Params {
39 | q: string;
40 | startIndex?: number;
41 | }
42 |
43 | export interface BookRepositoryInterface {
44 | get(params: Params): Promise
27 | {#await promise}
28 |
39 |
--------------------------------------------------------------------------------
/src/components/Header.svelte:
--------------------------------------------------------------------------------
1 |
29 |
31 | {:then}
32 |
3 |
4 | ブックレビュー App
5 |
6 |
28 |
29 |
17 |
--------------------------------------------------------------------------------
/src/components/BookInfo.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
18 |
19 |
20 |
29 |
21 |
22 |
28 | {book.volumeInfo.title}
23 |
24 | 25 | {description} 26 |
27 |
21 |
22 |
--------------------------------------------------------------------------------
/src/pages/SearchBook.svelte:
--------------------------------------------------------------------------------
1 |
49 |
50 |
53 |
23 | ![thumnail]()
24 |
25 |
26 |
61 |
62 |
27 |
31 | 28 | {book.volumeInfo.title} 29 |
30 |
32 |
60 | -
33 |
54 | {#if empty}
55 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import commonjs from '@rollup/plugin-commonjs';
3 | import resolve from '@rollup/plugin-node-resolve';
4 | import livereload from 'rollup-plugin-livereload';
5 | import { terser } from 'rollup-plugin-terser';
6 | import sveltePreprocess from 'svelte-preprocess';
7 | import typescript from '@rollup/plugin-typescript';
8 | import css from 'rollup-plugin-css-only';
9 |
10 | const production = !process.env.ROLLUP_WATCH;
11 |
12 | function serve() {
13 | let server;
14 |
15 | function toExit() {
16 | if (server) server.kill(0);
17 | }
18 |
19 | return {
20 | writeBundle() {
21 | if (server) return;
22 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
23 | stdio: ['ignore', 'inherit', 'inherit'],
24 | shell: true
25 | });
26 |
27 | process.on('SIGTERM', toExit);
28 | process.on('exit', toExit);
29 | }
30 | };
31 | }
32 |
33 | export default {
34 | input: 'src/main.ts',
35 | output: {
36 | sourcemap: true,
37 | format: 'iife',
38 | name: 'app',
39 | file: 'public/build/bundle.js'
40 | },
41 | plugins: [
42 | svelte({
43 | preprocess: sveltePreprocess({ postcss: true }),
44 | compilerOptions: {
45 | // enable run-time checks when not in production
46 | dev: !production
47 | }
48 | }),
49 | // we'll extract any component CSS out into
50 | // a separate file - better for performance
51 | css({ output: 'bundle.css' }),
52 |
53 | // If you have external dependencies installed from
54 | // npm, you'll most likely need these plugins. In
55 | // some cases you'll need additional configuration -
56 | // consult the documentation for details:
57 | // https://github.com/rollup/plugins/tree/master/packages/commonjs
58 | resolve({
59 | browser: true,
60 | dedupe: ['svelte']
61 | }),
62 | commonjs(),
63 | typescript({
64 | sourceMap: !production,
65 | inlineSources: !production
66 | }),
67 |
68 | // In dev mode, call `npm run start` once
69 | // the bundle has been generated
70 | !production && serve(),
71 |
72 | // Watch the `public` directory and refresh the
73 | // browser on changes when not in production
74 | !production && livereload('public'),
75 |
76 | // If we're building for production (npm run build
77 | // instead of npm run dev), minify
78 | production && terser()
79 | ],
80 | watch: {
81 | clearScreen: false
82 | }
83 | };
84 |
--------------------------------------------------------------------------------
検索結果が見つかりませんでした。
56 | {:else}
57 |
58 | {#each $books as book (book.id)}
59 |
62 |
66 |
68 | {:catch e}
69 |
70 | {e.message}
71 |
72 | {/await}
73 |