├── m04-build-your-first-svelte-components ├── demo │ └── after │ │ └── svelte-library │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── README.md │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ │ ├── rollup.config.js │ │ └── src │ │ ├── App.svelte │ │ ├── common │ │ ├── BookCover.svelte │ │ ├── Button.svelte │ │ └── api.js │ │ ├── library │ │ ├── BookGrid.svelte │ │ ├── Heart.svelte │ │ └── Library.svelte │ │ └── main.js └── snippets │ ├── 01-font-link.txt │ ├── 02-global-css.txt │ ├── 03-favicon.png │ ├── 04-title-greeting-css.txt │ ├── 05-button-css.txt │ ├── 06-books-list.txt │ ├── 07-book-grid-css.txt │ ├── 08-is-valid-url.txt │ ├── 09-book-cover-css.txt │ ├── 10-heart-svelte.txt │ ├── 11-npm-scripts-dev.txt │ ├── 12-db.json │ └── 13-api-js.txt ├── m05-add-interactivity-svelte-uis ├── demo │ ├── after │ │ └── svelte-library │ │ │ ├── .gitignore │ │ │ ├── .nvmrc │ │ │ ├── README.md │ │ │ ├── db.json │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.png │ │ │ ├── global.css │ │ │ └── index.html │ │ │ ├── rollup.config.js │ │ │ └── src │ │ │ ├── App.svelte │ │ │ ├── common │ │ │ ├── BackButtonRow.svelte │ │ │ ├── BookCover.svelte │ │ │ ├── Button.svelte │ │ │ ├── Header.svelte │ │ │ └── api.js │ │ │ ├── detail │ │ │ └── Detail.svelte │ │ │ ├── library │ │ │ ├── BookGrid.svelte │ │ │ ├── Heart.svelte │ │ │ └── Library.svelte │ │ │ └── main.js │ └── before │ │ └── svelte-library │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── README.md │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ │ ├── rollup.config.js │ │ └── src │ │ ├── App.svelte │ │ ├── common │ │ ├── BookCover.svelte │ │ ├── Button.svelte │ │ └── api.js │ │ ├── library │ │ ├── BookGrid.svelte │ │ ├── Heart.svelte │ │ └── Library.svelte │ │ └── main.js └── snippets │ ├── 01-BackButtonRow.svelte │ ├── 02-Header.svelte │ ├── 03-detail.txt │ └── 04-book-cover-readonly.txt └── m06-bind-forms-data-svelte ├── demo ├── after │ └── svelte-library │ │ ├── .gitignore │ │ ├── .nvmrc │ │ ├── README.md │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ │ ├── rollup.config.js │ │ └── src │ │ ├── App.svelte │ │ ├── common │ │ ├── BackButtonRow.svelte │ │ ├── BookCover.svelte │ │ ├── Button.svelte │ │ ├── Header.svelte │ │ └── api.js │ │ ├── create │ │ ├── Create.svelte │ │ └── TextInput.svelte │ │ ├── detail │ │ └── Detail.svelte │ │ ├── library │ │ ├── BookGrid.svelte │ │ ├── Heart.svelte │ │ └── Library.svelte │ │ └── main.js └── before │ └── svelte-library │ ├── .gitignore │ ├── .nvmrc │ ├── README.md │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.png │ ├── global.css │ └── index.html │ ├── rollup.config.js │ └── src │ ├── App.svelte │ ├── common │ ├── BackButtonRow.svelte │ ├── BookCover.svelte │ ├── Button.svelte │ ├── Header.svelte │ └── api.js │ ├── detail │ └── Detail.svelte │ ├── library │ ├── BookGrid.svelte │ ├── Heart.svelte │ └── Library.svelte │ └── main.js └── snippets ├── 01-create-page.txt ├── 02-textinput-css.txt └── 03-getrandomint-function.txt /m04-build-your-first-svelte-components/demo/after/svelte-library/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/.nvmrc: -------------------------------------------------------------------------------- 1 | 13.6.0 2 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/README.md: -------------------------------------------------------------------------------- 1 | *Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 35 | 36 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 37 | 38 | 39 | ## Building and running in production mode 40 | 41 | To create an optimised version of the app: 42 | 43 | ```bash 44 | npm run build 45 | ``` 46 | 47 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 48 | 49 | 50 | ## Single-page app mode 51 | 52 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 53 | 54 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 55 | 56 | ```js 57 | "start": "sirv public --single" 58 | ``` 59 | 60 | 61 | ## Deploying to the web 62 | 63 | ### With [now](https://zeit.co/now) 64 | 65 | Install `now` if you haven't already: 66 | 67 | ```bash 68 | npm install -g now 69 | ``` 70 | 71 | Then, from within your project folder: 72 | 73 | ```bash 74 | cd public 75 | now deploy --name my-project 76 | ``` 77 | 78 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 79 | 80 | ### With [surge](https://surge.sh/) 81 | 82 | Install `surge` if you haven't already: 83 | 84 | ```bash 85 | npm install -g surge 86 | ``` 87 | 88 | Then, from within your project folder: 89 | 90 | ```bash 91 | npm run build 92 | surge public my-project.surge.sh 93 | ``` 94 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "books": [ 3 | { 4 | "id": 1, 5 | "title": "Little Women", 6 | "author": "Louisa May Alcott", 7 | "cover": "", 8 | "about": "Sisters learn to live in gratitude for each other.", 9 | "variation": 0 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Fahrenheit 451", 14 | "author": "Ray Bradbury", 15 | "cover": "", 16 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 17 | "variation": 1 18 | }, 19 | { 20 | "id": 3, 21 | "title": "Grapes of Wrath", 22 | "author": "John Steinbeck", 23 | "cover": "", 24 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 25 | "variation": 2 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ] 44 | } 45 | 46 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "run-p dev:server dev:client", 7 | "dev:client": "rollup -c -w", 8 | "dev:server": "json-server --watch db.json", 9 | "start": "sirv public" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^11.0.0", 13 | "@rollup/plugin-node-resolve": "^6.0.0", 14 | "json-server": "^0.15.1", 15 | "npm-run-all": "^4.1.5", 16 | "rollup": "^1.20.0", 17 | "rollup-plugin-livereload": "^1.0.0", 18 | "rollup-plugin-svelte": "^5.0.3", 19 | "rollup-plugin-terser": "^5.1.2", 20 | "svelte": "^3.0.0" 21 | }, 22 | "dependencies": { 23 | "sirv-cli": "^0.4.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/svelte-getting-started/96ebae1900f48bab5c32f637e7171966e7f66442/m04-build-your-first-svelte-components/demo/after/svelte-library/public/favicon.png -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.4em; 41 | margin: 0 0 0.5em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type='range'] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | color: #333; 57 | background-color: #f4f4f4; 58 | outline: none; 59 | } 60 | 61 | button:disabled { 62 | color: #999; 63 | } 64 | 65 | button:not(:disabled):active { 66 | background-color: #ddd; 67 | } 68 | 69 | button:focus { 70 | border-color: #666; 71 | } 72 | 73 | :root { 74 | --colorFg: #533721; 75 | --colorFgInverse: #fff; 76 | --colorBg: #eedec9; 77 | --colorCta: #e64224; 78 | 79 | --spacingXSmall: 0.25rem; 80 | --spacingSmall: 0.5rem; 81 | --spacingMedium: 1rem; 82 | --spacingLarge: 1.5rem; 83 | --spacingXLarge: 2rem; 84 | 85 | --typeFaceDefault: 'Open Sans', sans-serif; 86 | --typeLineHeightTight: 1em; 87 | --typeSizeSmall: 0.75rem; 88 | --typeSizeDefault: 16px; 89 | --typeSizeMedium: 1rem; 90 | --typeSizeLarge: 1.5rem; 91 | --typeSizeXLarge: 3rem; 92 | --typeSizeXXLarge: 4rem; 93 | --typeWeightDefault: 400; 94 | --typeWeightBold: 800; 95 | } 96 | 97 | html, 98 | body { 99 | background: var(--colorBg); 100 | color: var(--colorFg); 101 | font-family: var(--typeFaceDefault); 102 | font-size: var(--typeSizeDefault); 103 | margin: 0; 104 | padding: 0; 105 | } 106 | 107 | h1, 108 | h2, 109 | h3, 110 | h4, 111 | h5, 112 | h6 { 113 | margin: 0; 114 | } 115 | 116 | input, 117 | button, 118 | textarea { 119 | margin-bottom: 0; 120 | } 121 | 122 | @media (min-width: 70rem) { 123 | :root { 124 | --typeSizeDefault: 24px; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Library 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import livereload from 'rollup-plugin-livereload' 5 | import { terser } from 'rollup-plugin-terser' 6 | 7 | const production = !process.env.ROLLUP_WATCH 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file — better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css') 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration — 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: importee => 36 | importee === 'svelte' || importee.startsWith('svelte/') 37 | }), 38 | commonjs(), 39 | 40 | // In dev mode, call `npm run start` once 41 | // the bundle has been generated 42 | !production && serve(), 43 | 44 | // Watch the `public` directory and refresh the 45 | // browser on changes when not in production 46 | !production && livereload('public'), 47 | 48 | // If we're building for production (npm run build 49 | // instead of npm run dev), minify 50 | production && terser() 51 | ], 52 | watch: { 53 | clearScreen: false 54 | } 55 | } 56 | 57 | function serve() { 58 | let started = false 59 | 60 | return { 61 | writeBundle() { 62 | if (!started) { 63 | started = true 64 | 65 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 66 | stdio: ['ignore', 'inherit', 'inherit'], 67 | shell: true 68 | }) 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/common/BookCover.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 96 | 97 | 101 | 104 | {book.title || ''} 105 | {book.author || ''} 106 | 107 | 108 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/common/Button.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/common/api.js: -------------------------------------------------------------------------------- 1 | export const bookApiUrl = 'http://localhost:3000/books' 2 | 3 | export function httpGet(path) { 4 | return req(path) 5 | } 6 | 7 | export function httpPost(path, data) { 8 | return req(path, 'POST', data) 9 | } 10 | 11 | export function httpPut(path, data) { 12 | return req(path, 'PUT', data) 13 | } 14 | 15 | async function req(path, method = 'GET', data) { 16 | const res = await fetch(bookApiUrl + path, { 17 | method, 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: data && JSON.stringify(data) 22 | }) 23 | const json = await res.json() 24 | return { ok: res.ok, data: json } 25 | } 26 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/library/BookGrid.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 42 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/library/Heart.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
<3
19 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/library/Library.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | 34 |
35 | Welcome to the 36 |

Library

37 |
38 | 39 |

40 | This is a library for the people. Welcome. Read the books here. Be inspired. 41 | Go home, and share them with your family. 42 |

43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/demo/after/svelte-library/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/01-font-link.txt: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/02-global-css.txt: -------------------------------------------------------------------------------- 1 | :root { 2 | --colorFg: #533721; 3 | --colorFgInverse: #fff; 4 | --colorBg: #eedec9; 5 | --colorCta: #e64224; 6 | 7 | --spacingXSmall: 0.25rem; 8 | --spacingSmall: 0.5rem; 9 | --spacingMedium: 1rem; 10 | --spacingLarge: 1.5rem; 11 | --spacingXLarge: 2rem; 12 | 13 | --typeFaceDefault: 'Open Sans', sans-serif; 14 | --typeLineHeightTight: 1em; 15 | --typeSizeSmall: 0.75rem; 16 | --typeSizeDefault: 16px; 17 | --typeSizeMedium: 1rem; 18 | --typeSizeLarge: 1.5rem; 19 | --typeSizeXLarge: 3rem; 20 | --typeSizeXXLarge: 4rem; 21 | --typeWeightDefault: 400; 22 | --typeWeightBold: 800; 23 | } 24 | 25 | html, 26 | body { 27 | background: var(--colorBg); 28 | color: var(--colorFg); 29 | font-family: var(--typeFaceDefault); 30 | font-size: var(--typeSizeDefault); 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | h1, 36 | h2, 37 | h3, 38 | h4, 39 | h5, 40 | h6 { 41 | margin: 0; 42 | } 43 | 44 | input, 45 | button, 46 | textarea { 47 | margin-bottom: 0; 48 | } 49 | 50 | @media (min-width: 70rem) { 51 | :root { 52 | --typeSizeDefault: 24px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/03-favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/svelte-getting-started/96ebae1900f48bab5c32f637e7171966e7f66442/m04-build-your-first-svelte-components/snippets/03-favicon.png -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/04-title-greeting-css.txt: -------------------------------------------------------------------------------- 1 | header { 2 | margin: var(--spacingMedium) 0 var(--spacingLarge) 0; 3 | text-transform: uppercase; 4 | } 5 | .preamble { 6 | display: block; 7 | } 8 | h1 { 9 | font-size: var(--typeSizeXXLarge); 10 | font-weight: var(--typeWeightBold); 11 | line-height: var(--typeLineHeightTight); 12 | } 13 | 14 | .greeting { 15 | font-size: var(--typeSizeSmall); 16 | } 17 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/05-button-css.txt: -------------------------------------------------------------------------------- 1 | .button { 2 | background: var(--colorCta); 3 | border: none; 4 | border-radius: calc( 5 | (2 * (var(--spacingSmall) * 1.5) + var(--typeLineHeightTight)) / 2 6 | ); 7 | color: var(--colorFgInverse); 8 | cursor: pointer; 9 | display: inline-block; 10 | font-size: var(--typeSizeSmall); 11 | font-weight: var(--typeWeightBold); 12 | line-height: var(--typeLineHeightTight); 13 | margin: 0; 14 | padding: calc(var(--spacingSmall) * 1.5) var(--spacingLarge); 15 | text-overflow: ellipsis; 16 | text-transform: uppercase; 17 | transition: filter 150ms; 18 | white-space: nowrap; 19 | } 20 | .button:hover, 21 | .button:focus { 22 | filter: brightness(115%); 23 | outline: none; 24 | text-decoration: none; 25 | } 26 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/06-books-list.txt: -------------------------------------------------------------------------------- 1 | const books = [ 2 | { 3 | "id": 1, 4 | "title": "Little Women", 5 | "author": "Louisa May Alcott", 6 | "cover": "", 7 | "about": "Sisters learn to live in gratitude for each other.", 8 | "variation": 0 9 | }, 10 | { 11 | "id": 2, 12 | "title": "Fahrenheit 451", 13 | "author": "Ray Bradbury", 14 | "cover": "", 15 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 16 | "variation": 1 17 | }, 18 | { 19 | "id": 3, 20 | "title": "Grapes of Wrath", 21 | "author": "John Steinbeck", 22 | "cover": "", 23 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 24 | "variation": 2, 25 | "favorite": true 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ]; 44 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/07-book-grid-css.txt: -------------------------------------------------------------------------------- 1 | ul { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); 4 | grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); 5 | grid-auto-rows: 12.8rem; 6 | gap: var(--spacingMedium); 7 | list-style: none; 8 | max-width: 100%; 9 | padding: 0; 10 | } 11 | li { 12 | position: relative; 13 | display: flex; 14 | } 15 | .heart { 16 | position: absolute; 17 | bottom: calc(-1 * var(--spacingSmall)); 18 | right: calc(-1 * var(--spacingSmall)); 19 | } 20 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/08-is-valid-url.txt: -------------------------------------------------------------------------------- 1 | function isValidUrl(url) { 2 | return url && /http.+\.(jpg|png|gif)$/.test(url); 3 | } 4 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/09-book-cover-css.txt: -------------------------------------------------------------------------------- 1 | .book { 2 | --bg: #f5c839; 3 | --bgDark: #f3b131; 4 | --bgLight: #ffde77; 5 | 6 | background: #fff; 7 | border-radius: 4px; 8 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); 9 | position: relative; 10 | transition: all 550ms; 11 | width: 100%; 12 | } 13 | 14 | .book--variation-1 { 15 | --bg: #ea7025; 16 | --bgDark: #d7480b; 17 | --bgLight: #fb9c61; 18 | } 19 | .book--variation-2 { 20 | --bg: #76c267; 21 | --bgDark: #57b356; 22 | --bgLight: #a6e69a; 23 | } 24 | 25 | .book--interactive { 26 | border: none; 27 | cursor: pointer; 28 | } 29 | .book--interactive:hover, 30 | .book--interactive:focus { 31 | filter: brightness(90%); 32 | outline: none; 33 | } 34 | 35 | .cover, 36 | .title, 37 | .author { 38 | display: block; 39 | } 40 | .cover { 41 | background-image: linear-gradient( 42 | to right, 43 | var(--bgLight) 10%, 44 | var(--bg) 20% 45 | ); 46 | background-size: cover; 47 | background-repeat: no-repeat; 48 | border-radius: 4px; 49 | color: #000; 50 | font-size: var(--typeSizeLarge); 51 | height: 100%; 52 | left: 0; 53 | overflow: hidden; 54 | position: absolute; 55 | text-align: left; 56 | text-transform: uppercase; 57 | text-shadow: 2px 2px 0 #fff; 58 | top: 0; 59 | transition: all 300ms; 60 | width: 100%; 61 | } 62 | .book--no-cover .cover::before { 63 | background: linear-gradient(to right, var(--bg) 50%, var(--bgDark)); 64 | content: " "; 65 | height: 100%; 66 | left: 0; 67 | position: absolute; 68 | top: 0; 69 | width: 10%; 70 | } 71 | .book--interactive:hover .cover, 72 | .book--interactive:focus .cover { 73 | box-shadow: 0.375rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25); 74 | transform: translate(0.0625rem, -0.3125rem) skew(0, -5deg) scaleX(1.02); 75 | } 76 | .title { 77 | font-size: var(--typeSizeXLarge); 78 | font-weight: var(--typeWeightBold); 79 | line-height: var(--typeLineHeightTight); 80 | margin: 3rem 0 var(--spacingMedium) calc(10% + var(--spacingSmall)); 81 | } 82 | .author { 83 | letter-spacing: 0.25em; 84 | margin-left: calc(10% + var(--spacingSmall)); 85 | } 86 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/10-heart-svelte.txt: -------------------------------------------------------------------------------- 1 | 17 | 18 |
<3
19 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/11-npm-scripts-dev.txt: -------------------------------------------------------------------------------- 1 | "dev": "run-p dev:server dev:client", 2 | "dev:client": "rollup -c -w", 3 | "dev:server": "json-server --watch db.json", 4 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/12-db.json: -------------------------------------------------------------------------------- 1 | { 2 | "books": [ 3 | { 4 | "id": 1, 5 | "title": "Little Women", 6 | "author": "Louisa May Alcott", 7 | "cover": "", 8 | "about": "Sisters learn to live in gratitude for each other.", 9 | "variation": 0 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Fahrenheit 451", 14 | "author": "Ray Bradbury", 15 | "cover": "", 16 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 17 | "variation": 1 18 | }, 19 | { 20 | "id": 3, 21 | "title": "Grapes of Wrath", 22 | "author": "John Steinbeck", 23 | "cover": "", 24 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 25 | "variation": 2 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ] 44 | } 45 | 46 | -------------------------------------------------------------------------------- /m04-build-your-first-svelte-components/snippets/13-api-js.txt: -------------------------------------------------------------------------------- 1 | export const bookApiUrl = 'http://localhost:3000/books' 2 | 3 | export function httpGet(path) { 4 | return req(path) 5 | } 6 | 7 | export function httpPost(path, data) { 8 | return req(path, 'POST', data) 9 | } 10 | 11 | export function httpPut(path, data) { 12 | return req(path, 'PUT', data) 13 | } 14 | 15 | async function req(path, method = 'GET', data) { 16 | const res = await fetch(bookApiUrl + path, { 17 | method, 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: data && JSON.stringify(data) 22 | }) 23 | const json = await res.json() 24 | return { ok: res.ok, data: json } 25 | } 26 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/.nvmrc: -------------------------------------------------------------------------------- 1 | 13.6.0 2 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/README.md: -------------------------------------------------------------------------------- 1 | *Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 35 | 36 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 37 | 38 | 39 | ## Building and running in production mode 40 | 41 | To create an optimised version of the app: 42 | 43 | ```bash 44 | npm run build 45 | ``` 46 | 47 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 48 | 49 | 50 | ## Single-page app mode 51 | 52 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 53 | 54 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 55 | 56 | ```js 57 | "start": "sirv public --single" 58 | ``` 59 | 60 | 61 | ## Deploying to the web 62 | 63 | ### With [now](https://zeit.co/now) 64 | 65 | Install `now` if you haven't already: 66 | 67 | ```bash 68 | npm install -g now 69 | ``` 70 | 71 | Then, from within your project folder: 72 | 73 | ```bash 74 | cd public 75 | now deploy --name my-project 76 | ``` 77 | 78 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 79 | 80 | ### With [surge](https://surge.sh/) 81 | 82 | Install `surge` if you haven't already: 83 | 84 | ```bash 85 | npm install -g surge 86 | ``` 87 | 88 | Then, from within your project folder: 89 | 90 | ```bash 91 | npm run build 92 | surge public my-project.surge.sh 93 | ``` 94 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "books": [ 3 | { 4 | "id": 1, 5 | "title": "Little Women", 6 | "author": "Louisa May Alcott", 7 | "cover": "", 8 | "about": "Sisters learn to live in gratitude for each other.", 9 | "variation": 0 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Fahrenheit 451", 14 | "author": "Ray Bradbury", 15 | "cover": "", 16 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 17 | "variation": 1 18 | }, 19 | { 20 | "id": 3, 21 | "title": "Grapes of Wrath", 22 | "author": "John Steinbeck", 23 | "cover": "", 24 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 25 | "variation": 2 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ] 44 | } 45 | 46 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "run-p dev:server dev:client", 7 | "dev:client": "rollup -c -w", 8 | "dev:server": "json-server --watch db.json", 9 | "start": "sirv public --single" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^11.0.0", 13 | "@rollup/plugin-node-resolve": "^6.0.0", 14 | "json-server": "^0.15.1", 15 | "npm-run-all": "^4.1.5", 16 | "rollup": "^1.20.0", 17 | "rollup-plugin-livereload": "^1.0.0", 18 | "rollup-plugin-svelte": "^5.0.3", 19 | "rollup-plugin-terser": "^5.1.2", 20 | "svelte": "^3.0.0" 21 | }, 22 | "dependencies": { 23 | "sirv-cli": "^0.4.4", 24 | "svelte-routing": "^1.4.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/svelte-getting-started/96ebae1900f48bab5c32f637e7171966e7f66442/m05-add-interactivity-svelte-uis/demo/after/svelte-library/public/favicon.png -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.4em; 41 | margin: 0 0 0.5em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type='range'] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | color: #333; 57 | background-color: #f4f4f4; 58 | outline: none; 59 | } 60 | 61 | button:disabled { 62 | color: #999; 63 | } 64 | 65 | button:not(:disabled):active { 66 | background-color: #ddd; 67 | } 68 | 69 | button:focus { 70 | border-color: #666; 71 | } 72 | 73 | :root { 74 | --colorFg: #533721; 75 | --colorFgInverse: #fff; 76 | --colorBg: #eedec9; 77 | --colorCta: #e64224; 78 | 79 | --spacingXSmall: 0.25rem; 80 | --spacingSmall: 0.5rem; 81 | --spacingMedium: 1rem; 82 | --spacingLarge: 1.5rem; 83 | --spacingXLarge: 2rem; 84 | 85 | --typeFaceDefault: 'Open Sans', sans-serif; 86 | --typeLineHeightTight: 1em; 87 | --typeSizeSmall: 0.75rem; 88 | --typeSizeDefault: 16px; 89 | --typeSizeMedium: 1rem; 90 | --typeSizeLarge: 1.5rem; 91 | --typeSizeXLarge: 3rem; 92 | --typeSizeXXLarge: 4rem; 93 | --typeWeightDefault: 400; 94 | --typeWeightBold: 800; 95 | } 96 | 97 | html, 98 | body { 99 | background: var(--colorBg); 100 | color: var(--colorFg); 101 | font-family: var(--typeFaceDefault); 102 | font-size: var(--typeSizeDefault); 103 | margin: 0; 104 | padding: 0; 105 | } 106 | 107 | h1, 108 | h2, 109 | h3, 110 | h4, 111 | h5, 112 | h6 { 113 | margin: 0; 114 | } 115 | 116 | input, 117 | button, 118 | textarea { 119 | margin-bottom: 0; 120 | } 121 | 122 | @media (min-width: 70rem) { 123 | :root { 124 | --typeSizeDefault: 24px; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Library 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import livereload from 'rollup-plugin-livereload' 5 | import { terser } from 'rollup-plugin-terser' 6 | 7 | const production = !process.env.ROLLUP_WATCH 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file — better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css') 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration — 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: importee => 36 | importee === 'svelte' || importee.startsWith('svelte/') 37 | }), 38 | commonjs(), 39 | 40 | // In dev mode, call `npm run start` once 41 | // the bundle has been generated 42 | !production && serve(), 43 | 44 | // Watch the `public` directory and refresh the 45 | // browser on changes when not in production 46 | !production && livereload('public'), 47 | 48 | // If we're building for production (npm run build 49 | // instead of npm run dev), minify 50 | production && terser() 51 | ], 52 | watch: { 53 | clearScreen: false 54 | } 55 | } 56 | 57 | function serve() { 58 | let started = false 59 | 60 | return { 61 | writeBundle() { 62 | if (!started) { 63 | started = true 64 | 65 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 66 | stdio: ['ignore', 'inherit', 'inherit'], 67 | shell: true 68 | }) 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/common/BackButtonRow.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/common/BookCover.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 99 | 100 | {#if interactive} 101 | 106 | 109 | {book.title || ''} 110 | {book.author || ''} 111 | 112 | 113 | {:else} 114 |
117 |
120 |
121 |

{book.title || ''}

122 |
123 |
{book.author || ''}
124 |
125 |
126 | {/if} 127 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/common/Button.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | {#if to} 36 | 37 | 38 | 39 | {:else} 40 | 43 | {/if} 44 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/common/Header.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 21 | 22 | {#if element === 'h1'} 23 |

24 | 25 |

26 | {:else if element === 'h2'} 27 |

28 | 29 |

30 | {/if} 31 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/common/api.js: -------------------------------------------------------------------------------- 1 | export const bookApiUrl = 'http://localhost:3000/books' 2 | 3 | export function httpGet(path) { 4 | return req(path) 5 | } 6 | 7 | export function httpPost(path, data) { 8 | return req(path, 'POST', data) 9 | } 10 | 11 | export function httpPut(path, data) { 12 | return req(path, 'PUT', data) 13 | } 14 | 15 | async function req(path, method = 'GET', data) { 16 | const res = await fetch(bookApiUrl + path, { 17 | method, 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: data && JSON.stringify(data) 22 | }) 23 | const json = await res.json() 24 | return { ok: res.ok, data: json } 25 | } 26 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/detail/Detail.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 | 50 | 51 | 52 | 53 |
Discover
54 | 55 |
56 |
57 | 58 |
59 | 62 |
63 |
64 |
65 |
About
66 |

{book.about}

67 |
68 |
69 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/library/BookGrid.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 42 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/library/Heart.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
<3
19 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/library/Library.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | 34 |
35 | Welcome to the 36 |

Library

37 |
38 | 39 |

40 | This is a library for the people. Welcome. Read the books here. Be inspired. 41 | Go home, and share them with your family. 42 |

43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/after/svelte-library/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/.nvmrc: -------------------------------------------------------------------------------- 1 | 13.6.0 2 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/README.md: -------------------------------------------------------------------------------- 1 | *Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 35 | 36 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 37 | 38 | 39 | ## Building and running in production mode 40 | 41 | To create an optimised version of the app: 42 | 43 | ```bash 44 | npm run build 45 | ``` 46 | 47 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 48 | 49 | 50 | ## Single-page app mode 51 | 52 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 53 | 54 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 55 | 56 | ```js 57 | "start": "sirv public --single" 58 | ``` 59 | 60 | 61 | ## Deploying to the web 62 | 63 | ### With [now](https://zeit.co/now) 64 | 65 | Install `now` if you haven't already: 66 | 67 | ```bash 68 | npm install -g now 69 | ``` 70 | 71 | Then, from within your project folder: 72 | 73 | ```bash 74 | cd public 75 | now deploy --name my-project 76 | ``` 77 | 78 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 79 | 80 | ### With [surge](https://surge.sh/) 81 | 82 | Install `surge` if you haven't already: 83 | 84 | ```bash 85 | npm install -g surge 86 | ``` 87 | 88 | Then, from within your project folder: 89 | 90 | ```bash 91 | npm run build 92 | surge public my-project.surge.sh 93 | ``` 94 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "books": [ 3 | { 4 | "id": 1, 5 | "title": "Little Women", 6 | "author": "Louisa May Alcott", 7 | "cover": "", 8 | "about": "Sisters learn to live in gratitude for each other.", 9 | "variation": 0 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Fahrenheit 451", 14 | "author": "Ray Bradbury", 15 | "cover": "", 16 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 17 | "variation": 1 18 | }, 19 | { 20 | "id": 3, 21 | "title": "Grapes of Wrath", 22 | "author": "John Steinbeck", 23 | "cover": "", 24 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 25 | "variation": 2 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ] 44 | } 45 | 46 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "run-p dev:server dev:client", 7 | "dev:client": "rollup -c -w", 8 | "dev:server": "json-server --watch db.json", 9 | "start": "sirv public" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^11.0.0", 13 | "@rollup/plugin-node-resolve": "^6.0.0", 14 | "json-server": "^0.15.1", 15 | "npm-run-all": "^4.1.5", 16 | "rollup": "^1.20.0", 17 | "rollup-plugin-livereload": "^1.0.0", 18 | "rollup-plugin-svelte": "^5.0.3", 19 | "rollup-plugin-terser": "^5.1.2", 20 | "svelte": "^3.0.0" 21 | }, 22 | "dependencies": { 23 | "sirv-cli": "^0.4.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/svelte-getting-started/96ebae1900f48bab5c32f637e7171966e7f66442/m05-add-interactivity-svelte-uis/demo/before/svelte-library/public/favicon.png -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.4em; 41 | margin: 0 0 0.5em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type='range'] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | color: #333; 57 | background-color: #f4f4f4; 58 | outline: none; 59 | } 60 | 61 | button:disabled { 62 | color: #999; 63 | } 64 | 65 | button:not(:disabled):active { 66 | background-color: #ddd; 67 | } 68 | 69 | button:focus { 70 | border-color: #666; 71 | } 72 | 73 | :root { 74 | --colorFg: #533721; 75 | --colorFgInverse: #fff; 76 | --colorBg: #eedec9; 77 | --colorCta: #e64224; 78 | 79 | --spacingXSmall: 0.25rem; 80 | --spacingSmall: 0.5rem; 81 | --spacingMedium: 1rem; 82 | --spacingLarge: 1.5rem; 83 | --spacingXLarge: 2rem; 84 | 85 | --typeFaceDefault: 'Open Sans', sans-serif; 86 | --typeLineHeightTight: 1em; 87 | --typeSizeSmall: 0.75rem; 88 | --typeSizeDefault: 16px; 89 | --typeSizeMedium: 1rem; 90 | --typeSizeLarge: 1.5rem; 91 | --typeSizeXLarge: 3rem; 92 | --typeSizeXXLarge: 4rem; 93 | --typeWeightDefault: 400; 94 | --typeWeightBold: 800; 95 | } 96 | 97 | html, 98 | body { 99 | background: var(--colorBg); 100 | color: var(--colorFg); 101 | font-family: var(--typeFaceDefault); 102 | font-size: var(--typeSizeDefault); 103 | margin: 0; 104 | padding: 0; 105 | } 106 | 107 | h1, 108 | h2, 109 | h3, 110 | h4, 111 | h5, 112 | h6 { 113 | margin: 0; 114 | } 115 | 116 | input, 117 | button, 118 | textarea { 119 | margin-bottom: 0; 120 | } 121 | 122 | @media (min-width: 70rem) { 123 | :root { 124 | --typeSizeDefault: 24px; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Library 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import livereload from 'rollup-plugin-livereload' 5 | import { terser } from 'rollup-plugin-terser' 6 | 7 | const production = !process.env.ROLLUP_WATCH 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file — better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css') 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration — 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: importee => 36 | importee === 'svelte' || importee.startsWith('svelte/') 37 | }), 38 | commonjs(), 39 | 40 | // In dev mode, call `npm run start` once 41 | // the bundle has been generated 42 | !production && serve(), 43 | 44 | // Watch the `public` directory and refresh the 45 | // browser on changes when not in production 46 | !production && livereload('public'), 47 | 48 | // If we're building for production (npm run build 49 | // instead of npm run dev), minify 50 | production && terser() 51 | ], 52 | watch: { 53 | clearScreen: false 54 | } 55 | } 56 | 57 | function serve() { 58 | let started = false 59 | 60 | return { 61 | writeBundle() { 62 | if (!started) { 63 | started = true 64 | 65 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 66 | stdio: ['ignore', 'inherit', 'inherit'], 67 | shell: true 68 | }) 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/common/BookCover.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 96 | 97 | 101 | 104 | {book.title || ''} 105 | {book.author || ''} 106 | 107 | 108 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/common/Button.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/common/api.js: -------------------------------------------------------------------------------- 1 | export const bookApiUrl = 'http://localhost:3000/books' 2 | 3 | export function httpGet(path) { 4 | return req(path) 5 | } 6 | 7 | export function httpPost(path, data) { 8 | return req(path, 'POST', data) 9 | } 10 | 11 | export function httpPut(path, data) { 12 | return req(path, 'PUT', data) 13 | } 14 | 15 | async function req(path, method = 'GET', data) { 16 | const res = await fetch(bookApiUrl + path, { 17 | method, 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: data && JSON.stringify(data) 22 | }) 23 | const json = await res.json() 24 | return { ok: res.ok, data: json } 25 | } 26 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/library/BookGrid.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 |
    31 | {#each books as book} 32 |
  • 33 | 34 | {#if book.favorite} 35 |
    36 | 37 |
    38 | {/if} 39 |
    • 40 | {/each} 41 |
42 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/library/Heart.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
<3
19 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/library/Library.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | 34 |
35 | Welcome to the 36 |

Library

37 |
38 | 39 |

40 | This is a library for the people. Welcome. Read the books here. Be inspired. 41 | Go home, and share them with your family. 42 |

43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/demo/before/svelte-library/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/snippets/01-BackButtonRow.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/snippets/02-Header.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 21 | 22 | {#if element === 'h1'} 23 |

24 | 25 |

26 | {:else if element === 'h2'} 27 |

28 | 29 |

30 | {/if} 31 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/snippets/03-detail.txt: -------------------------------------------------------------------------------- 1 | 19 | 20 | 39 | 40 | 41 | 42 |
Discover
43 | 44 |
45 |
46 | 47 |
48 | 49 |
50 |
51 |
52 |
About
53 |

{book.about}

54 |
55 |
56 | -------------------------------------------------------------------------------- /m05-add-interactivity-svelte-uis/snippets/04-book-cover-readonly.txt: -------------------------------------------------------------------------------- 1 |
4 |
7 |
8 |

{book.title || ''}

9 |
10 |
{book.author || ''}
11 |
12 |
13 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/.nvmrc: -------------------------------------------------------------------------------- 1 | 13.6.0 2 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/README.md: -------------------------------------------------------------------------------- 1 | *Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 35 | 36 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 37 | 38 | 39 | ## Building and running in production mode 40 | 41 | To create an optimised version of the app: 42 | 43 | ```bash 44 | npm run build 45 | ``` 46 | 47 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 48 | 49 | 50 | ## Single-page app mode 51 | 52 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 53 | 54 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 55 | 56 | ```js 57 | "start": "sirv public --single" 58 | ``` 59 | 60 | 61 | ## Deploying to the web 62 | 63 | ### With [now](https://zeit.co/now) 64 | 65 | Install `now` if you haven't already: 66 | 67 | ```bash 68 | npm install -g now 69 | ``` 70 | 71 | Then, from within your project folder: 72 | 73 | ```bash 74 | cd public 75 | now deploy --name my-project 76 | ``` 77 | 78 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 79 | 80 | ### With [surge](https://surge.sh/) 81 | 82 | Install `surge` if you haven't already: 83 | 84 | ```bash 85 | npm install -g surge 86 | ``` 87 | 88 | Then, from within your project folder: 89 | 90 | ```bash 91 | npm run build 92 | surge public my-project.surge.sh 93 | ``` 94 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "books": [ 3 | { 4 | "id": 1, 5 | "title": "Little Women", 6 | "author": "Louisa May Alcott", 7 | "cover": "", 8 | "about": "Sisters learn to live in gratitude for each other.", 9 | "variation": 0 10 | }, 11 | { 12 | "id": 2, 13 | "title": "Fahrenheit 451", 14 | "author": "Ray Bradbury", 15 | "cover": "", 16 | "about": "Enter a dystopian future where books with ideas are dangerous, controlled and burned.", 17 | "variation": 1 18 | }, 19 | { 20 | "id": 3, 21 | "title": "Grapes of Wrath", 22 | "author": "John Steinbeck", 23 | "cover": "", 24 | "about": "Thousands set out from the dust bowl to California in search of better fortunes", 25 | "variation": 2 26 | }, 27 | { 28 | "id": 4, 29 | "title": "To Kill a Mocking Bird", 30 | "author": "Harper Lee", 31 | "cover": "https://i.imgur.com/BPmn7bUm.jpg", 32 | "about": "A girl learns to trust the wisdom of her father and not be dismayed by the prejudice around here.", 33 | "variation": 0 34 | }, 35 | { 36 | "id": 5, 37 | "title": "Moby Dick", 38 | "author": "Hermann Melville", 39 | "cover": "", 40 | "about": "Man hunts whale with a vengeance. In the end, he's the last man stand. I guess he won.", 41 | "variation": 1 42 | } 43 | ] 44 | } 45 | 46 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "run-p dev:server dev:client", 7 | "dev:client": "rollup -c -w", 8 | "dev:server": "json-server --watch db.json", 9 | "start": "sirv public --single" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^11.0.0", 13 | "@rollup/plugin-node-resolve": "^6.0.0", 14 | "json-server": "^0.15.1", 15 | "npm-run-all": "^4.1.5", 16 | "rollup": "^1.20.0", 17 | "rollup-plugin-livereload": "^1.0.0", 18 | "rollup-plugin-svelte": "^5.0.3", 19 | "rollup-plugin-terser": "^5.1.2", 20 | "svelte": "^3.0.0" 21 | }, 22 | "dependencies": { 23 | "sirv-cli": "^0.4.4", 24 | "svelte-routing": "^1.4.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/svelte-getting-started/96ebae1900f48bab5c32f637e7171966e7f66442/m06-bind-forms-data-svelte/demo/after/svelte-library/public/favicon.png -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.4em; 41 | margin: 0 0 0.5em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type='range'] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | color: #333; 57 | background-color: #f4f4f4; 58 | outline: none; 59 | } 60 | 61 | button:disabled { 62 | color: #999; 63 | } 64 | 65 | button:not(:disabled):active { 66 | background-color: #ddd; 67 | } 68 | 69 | button:focus { 70 | border-color: #666; 71 | } 72 | 73 | :root { 74 | --colorFg: #533721; 75 | --colorFgInverse: #fff; 76 | --colorBg: #eedec9; 77 | --colorCta: #e64224; 78 | 79 | --spacingXSmall: 0.25rem; 80 | --spacingSmall: 0.5rem; 81 | --spacingMedium: 1rem; 82 | --spacingLarge: 1.5rem; 83 | --spacingXLarge: 2rem; 84 | 85 | --typeFaceDefault: 'Open Sans', sans-serif; 86 | --typeLineHeightTight: 1em; 87 | --typeSizeSmall: 0.75rem; 88 | --typeSizeDefault: 16px; 89 | --typeSizeMedium: 1rem; 90 | --typeSizeLarge: 1.5rem; 91 | --typeSizeXLarge: 3rem; 92 | --typeSizeXXLarge: 4rem; 93 | --typeWeightDefault: 400; 94 | --typeWeightBold: 800; 95 | } 96 | 97 | html, 98 | body { 99 | background: var(--colorBg); 100 | color: var(--colorFg); 101 | font-family: var(--typeFaceDefault); 102 | font-size: var(--typeSizeDefault); 103 | margin: 0; 104 | padding: 0; 105 | } 106 | 107 | h1, 108 | h2, 109 | h3, 110 | h4, 111 | h5, 112 | h6 { 113 | margin: 0; 114 | } 115 | 116 | input, 117 | button, 118 | textarea { 119 | margin-bottom: 0; 120 | } 121 | 122 | @media (min-width: 70rem) { 123 | :root { 124 | --typeSizeDefault: 24px; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Library 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import livereload from 'rollup-plugin-livereload' 5 | import { terser } from 'rollup-plugin-terser' 6 | 7 | const production = !process.env.ROLLUP_WATCH 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file — better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css') 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration — 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: importee => 36 | importee === 'svelte' || importee.startsWith('svelte/') 37 | }), 38 | commonjs(), 39 | 40 | // In dev mode, call `npm run start` once 41 | // the bundle has been generated 42 | !production && serve(), 43 | 44 | // Watch the `public` directory and refresh the 45 | // browser on changes when not in production 46 | !production && livereload('public'), 47 | 48 | // If we're building for production (npm run build 49 | // instead of npm run dev), minify 50 | production && terser() 51 | ], 52 | watch: { 53 | clearScreen: false 54 | } 55 | } 56 | 57 | function serve() { 58 | let started = false 59 | 60 | return { 61 | writeBundle() { 62 | if (!started) { 63 | started = true 64 | 65 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 66 | stdio: ['ignore', 'inherit', 'inherit'], 67 | shell: true 68 | }) 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/common/BackButtonRow.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/common/BookCover.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 99 | 100 | {#if interactive} 101 | 106 | 109 | {book.title || ''} 110 | {book.author || ''} 111 | 112 | 113 | {:else} 114 |
117 |
120 |
121 |

{book.title || ''}

122 |
123 |
{book.author || ''}
124 |
125 |
126 | {/if} 127 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/common/Button.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | {#if to} 36 | 37 | 38 | 39 | {:else} 40 | 43 | {/if} 44 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/common/Header.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 21 | 22 | {#if element === 'h1'} 23 |

24 | 25 |

26 | {:else if element === 'h2'} 27 |

28 | 29 |

30 | {/if} 31 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/common/api.js: -------------------------------------------------------------------------------- 1 | export const bookApiUrl = 'http://localhost:3000/books' 2 | 3 | export function httpGet(path) { 4 | return req(path) 5 | } 6 | 7 | export function httpPost(path, data) { 8 | return req(path, 'POST', data) 9 | } 10 | 11 | export function httpPut(path, data) { 12 | return req(path, 'PUT', data) 13 | } 14 | 15 | async function req(path, method = 'GET', data) { 16 | const res = await fetch(bookApiUrl + path, { 17 | method, 18 | headers: { 19 | 'Content-Type': 'application/json' 20 | }, 21 | body: data && JSON.stringify(data) 22 | }) 23 | const json = await res.json() 24 | return { ok: res.ok, data: json } 25 | } 26 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/create/Create.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | 60 | 61 | 62 | 63 |
Create
64 | 65 |
66 |
67 | 68 | 69 | 70 | 71 |
72 | 73 |
74 |
75 | 76 |
77 |
Preview
78 |
79 | 80 |
81 |
82 |
83 | -------------------------------------------------------------------------------- /m06-bind-forms-data-svelte/demo/after/svelte-library/src/create/TextInput.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | 29 |