├── Ch6_Code_Practical_Svelte
    ├── contact form
    │   ├── contact - markup block.txt
    │   └── contact - script block.txt
    ├── one at a time
    │   └── audio player code.txt
    └── coffee selector
    │   └── app.svelte.txt
├── .gitattributes
├── 9781484273739.jpg
├── Ch1_Code_Practical_Svelte
    ├── .gitignore
    ├── public
    │   ├── favicon.png
    │   ├── index.html
    │   └── global.css
    ├── src
    │   ├── main.js
    │   └── App.svelte
    ├── package.json
    ├── rollup.config.js
    ├── README.md
    ├── scripts
    │   └── setupTypeScript.js
    └── package-lock.json
├── Ch5_Code_Practical_Svelte
    ├── adding a modal
    │   ├── styling.txt
    │   └── home.svelte.txt
    ├── forwarding events
    │   ├── outer.svelte.txt
    │   ├── app.svelte.txt
    │   └── inner.svelte.txt
    ├── instrumenting the DOM
    │   ├── app.svelte - markup.txt
    │   └── app.svelte.txt
    ├── exploring event handlers
    │   └── app.svelte.txt
    ├── creating custom actions - part 2
    │   └── app.svelte.txt
    ├── adding event modifiers
    │   ├── app.svelte - markup.txt
    │   ├── app.svelte.txt
    │   └── app.svelte - styling.txt
    ├── lifecycle methods - part 2
    │   └── app.svelte.txt
    ├── creating custom actions - part 1
    │   └── app.svelte.txt
    └── lifecycle methods - part 1
    │   └── app.svelte.txt
├── Ch2_Code_Practical_Svelte
    ├── images
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── cart.png
    │   ├── logo.png
    │   ├── trash.png
    │   ├── 1_large.png
    │   ├── 2_large.png
    │   ├── 3_large.png
    │   ├── 4_large.png
    │   ├── 5_large.png
    │   ├── 6_large.png
    │   ├── banner.jpg
    │   ├── instagram.svg
    │   ├── facebook.svg
    │   ├── twitter.svg
    │   ├── shoppingcart.svg
    │   └── logo.svg
    └── src
    │   ├── components
    │       ├── Button.svelte
    │       ├── CartLength.svelte
    │       ├── index.js
    │       ├── Header.svelte
    │       ├── Footer.svelte
    │       ├── Products.svelte
    │       ├── Product.svelte
    │       └── Cart.svelte
    │   ├── App.svelte
    │   └── pages
    │       ├── About.svelte
    │       ├── Coffee.svelte
    │       └── Home.svelte
├── Ch3_Code_Practical_Svelte
    ├── operating stores
    │   ├── stores.js.txt
    │   └── app.svelte.txt
    ├── passing props
    │   ├── button.svelte.txt
    │   └── app.svelte.txt
    ├── making use of context
    │   ├── child.svelte.txt
    │   └── app.svelte.txt
    └── adding derived stores
    │   ├── Header.svelte - updated version.txt
    │   └── stores.js - updated version.txt
├── Ch9_Code_Practical_Svelte
    ├── Demo banner
    │   ├── Demo banner - markup.txt
    │   └── Demo banner - styling.txt
    └── Automating deployment
    │   └── ghpages.txt
├── Ch11_Code_Practical_Svelte
    ├── custom easing using css
    │   ├── app.svelte - markup.txt
    │   └── app.svelte - css.txt
    ├── modal fade
    │   └── Modal.svelte.txt
    ├── image carousel
    │   └── Carousel.svelte.txt
    ├── learning a language
    │   └── App.svelte.txt
    └── custom easing using js
    │   └── demo custom easing.txt
├── Ch4_Code_Practical_Svelte
    ├── sourcing fake products
    │   ├── app.svelte.txt
    │   ├── app.svelte - markup.txt
    │   └── app.svelte - style.txt
    ├── creating a qr code
    │   ├── app.svelte - markup.txt
    │   └── app.svelte.txt
    ├── iterating through each block
    │   ├── app.svelte.txt
    │   ├── app.svelte - style.txt
    │   └── app.svelte - markup.txt
    ├── loading products
    │   └── code.txt
    ├── removing a selected item
    │   ├── app.svelte - style.txt
    │   ├── app.svelte.txt
    │   └── app.svelte - markup.txt
    └── adding login & out links
    │   └── code.txt
├── errata.md
├── Ch7_Code_Practical_Svelte
    ├── Fixing the errors
    │   └── Replacement Route block.txt
    ├── 3A - Header & footer
    │   ├── footer styling.txt
    │   ├── header markup.txt
    │   └── header styling.txt
    ├── 3C - Products, Product Pages and Cart
    │   ├── replacement each block code.txt
    │   ├── styling - product page.txt
    │   ├── styling - products page.txt
    │   └── styling - cart.txt
    ├── 3B - Buttons
    │   └── Button styling.txt
    ├── 2 - Pages
    │   └── Styling pages.txt
    ├── Preprocessing
    │   └── various code steps.txt
    └── 1 - Global styles
    │   └── Global styles.txt
├── Ch8_Code_Practical_Svelte
    ├── website tests
    │   ├── TestingStores.spec.js
    │   ├── ContentPages.spec.js
    │   ├── HomePage.spec.js
    │   └── Shop.spec.js
    ├── installing cypress
    │   └── installing cypress - code steps.txt
    ├── debugging svelte
    │   └── app.svelte.txt
    └── example test
    │   └── example1.spec.js
├── Ch12_Code_Practical_Svelte
    ├── taking it further
    │   └── __error.svelte.txt
    ├── layout template
    │   └── __layout.svelte
    └── styles
    │   └── styles.css
├── README.md
├── Contributing.md
└── LICENSE.txt


/Ch6_Code_Practical_Svelte/contact form/contact - markup block.txt:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/9781484273739.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/9781484273739.jpg


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 | 
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/adding a modal/styling.txt:
--------------------------------------------------------------------------------
1 | .modal-background { background-color: rgba(0, 0, 0, .7) !important; }


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/1.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/2.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/3.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/4.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/5.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/6.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/cart.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/logo.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/trash.png


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch1_Code_Practical_Svelte/public/favicon.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/1_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/1_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/2_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/2_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/3_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/3_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/4_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/4_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/5_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/5_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/6_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/6_large.png


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/practical-svelte/HEAD/Ch2_Code_Practical_Svelte/images/banner.jpg


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/operating stores/stores.js.txt:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store'
2 | export const username = writable('Guest');
3 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Button.svelte:
--------------------------------------------------------------------------------
1 | <style>
2 | …TO BE ADDED LATER…
3 | </style>
4 | 
5 | <button on:click>
6 |   <slot />
7 | </button>


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/forwarding events/outer.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   import Inner from './Inner.svelte';
3 | </script>
4 | 
5 | <Inner on:message/>
6 | 


--------------------------------------------------------------------------------
/Ch9_Code_Practical_Svelte/Demo banner/Demo banner - markup.txt:
--------------------------------------------------------------------------------
1 | <span>
2 |   This is a test site only - please note that no orders will be accepted
3 | </span>
4 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/CartLength.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import {cart} from "../stores.js";
3 | </script>
4 | 
5 | <p>There are {$cart.length} items in your cart</p>


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/instrumenting the DOM/app.svelte - markup.txt:
--------------------------------------------------------------------------------
1 | <button on:click={handleClick}>
2 |   Clicked {count} {count === 1 ? 'time' : 'times'}
3 | </button>
4 | 
5 | 


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/passing props/button.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   export let name;
3 |   export let handleClick;
4 | </script>
5 | 
6 | <button on:click={handleClick}>{name}</button>
7 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/instrumenting the DOM/app.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   let count = 0;
3 | 
4 |   function handleClick() {
5 |     // event handler code goes here
6 |     count += 1; 
7 |   }
8 | </script>


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/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;


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/custom easing using css/app.svelte - markup.txt:
--------------------------------------------------------------------------------
1 | <h2>
2 |   Transform a box using custom CSS
3 | </h2>
4 | <div style="height:225px">
5 |   <div class="scale-up-top cube">
6 | 	CSS
7 |   </div>
8 | </div>  
9 | 


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/making use of context/child.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   import {getContext} from 'svelte';
3 |   const state = getContext('state')
4 | </script>
5 | 
6 | <h1>
7 | 	This is the {$state.color} value
8 | </h1>
9 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/exploring event handlers/app.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   function handleClick(event) {
3 |     window.alert('Message from the click handler’);
4 |   }
5 | </script>
6 | <button on:click="{handleClick}">Click me</button>
7 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/creating custom actions - part 2/app.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   function tellMeAboutTheNode(node) {
3 |     console.log("Information: ", node.tagName);
4 |   }
5 | </script>
6 | 
7 | <h1 use:tellMeAboutTheNode>Hello Action!</h1>
8 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/sourcing fake products/app.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   const fetchImage = (async () => {
3 |     const response = await fetch('https://
4 | fakestoreapi.com/products/1');
5 |     return await response.json();
6 |   })()
7 | </script>
8 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/creating a qr code/app.svelte - markup.txt:
--------------------------------------------------------------------------------
 1 | <h1>
 2 |   A Random QR Code...
 3 | </h1>
 4 | {#if textPresent}
 5 |   <img src={API_URL} alt="qr-code"/><br>
 6 | {:else}
 7 |   <h2>
 8 |     Are you sure you can see me?
 9 |   </h2>
10 | {/if}
11 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/iterating through each block/app.svelte.txt:
--------------------------------------------------------------------------------
1 | <script>
2 |   let coffees = [
3 |     { id: 'coffee1', name: 'Peruvian Blend' },
4 |     { id: 'coffee2', name: 'African Inca' },
5 |     { id: 'coffee3', name: 'Ristretto' }
6 |   ];
7 | </script>
8 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/forwarding events/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Outer from './Outer.svelte';
 3 | 
 4 |   function handleMessage(event) {
 5 |     alert(event.detail.text);
 6 |   }
 7 | </script>
 8 | 
 9 | <Outer on:message={handleMessage}/>
10 | 
11 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/loading products/code.txt:
--------------------------------------------------------------------------------
 1 | npm install "@rollup/plugin-json" --save
 2 | 
 3 | 
 4 | import * as myjson from '../public/stock.json';
 5 | 
 6 | 
 7 |   {#await $products}
 8 |     <p>...loading products</p>
 9 |   {:then}
10 | 
11 |   {/await}
12 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/adding event modifiers/app.svelte - markup.txt:
--------------------------------------------------------------------------------
1 | <div on:click={() => console.log('Outer div')}>
2 |    <h1>Outer div</h1>
3 |    <div on:click|stopPropagation={() => console.log
4 | ('inner div')}>
5 |     <h1>Inner div</h1>
6 |   </div>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/Ch9_Code_Practical_Svelte/Demo banner/Demo banner - styling.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   span {
 3 |     background-color: #ff0000;
 4 |     color: #ffffff;
 5 |     text-align: center;
 6 |     padding: 5px 0;
 7 |     font-weight: bold;
 8 |     letter-spacing: 1px;
 9 |   }
10 | </style>
11 | 


--------------------------------------------------------------------------------
/errata.md:
--------------------------------------------------------------------------------
 1 | # Errata for *Practical Svelte*
 2 | 
 3 | On **page xx** [Summary of error]:
 4 |  
 5 | Details of error here. Highlight key pieces in **bold**.
 6 | 
 7 | ***
 8 | 
 9 | On **page xx** [Summary of error]:
10 |  
11 | Details of error here. Highlight key pieces in **bold**.
12 | 
13 | ***


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/sourcing fake products/app.svelte - markup.txt:
--------------------------------------------------------------------------------
 1 | <h1>My Fake Store</h1>
 2 | 
 3 | {#await fetchImage}
 4 |   <p>...loading products</p>
 5 | {:then data}
 6 |   <div>
 7 |       <img src={data.image} alt="product" />
 8 |       <span>{data.title}</span>
 9 |   </div>
10 | {/await}
11 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/adding event modifiers/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   function handleSubmit() {
 3 |     console.log("success");
 4 |   }
 5 | </script>
 6 | 
 7 | <form on:submit|preventDefault={handleSubmit}>
 8 |   <input type="text" placeholder="Name" />
 9 |   <button>submit</button>
10 | </form>
11 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/adding a modal/home.svelte.txt:
--------------------------------------------------------------------------------
 1 | <Modal on:close={close}>
 2 |   <h1>Get 10% off your first order!</h1>
 3 |   <p>
 4 |     <span>Use code 10PERCENT at checkout</span>
 5 |     <img src="images/3.png" alt="image3" />
 6 |   </p>
 7 |   <button on:click={close}>X</button>
 8 | </Modal>
 9 | 
10 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/creating a qr code/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   let inputText = "I love Svelte!";
 3 |   let textPresent = false;
 4 |   let API_URL = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
 5 | 
 6 |   if (inputText !== "") {
 7 |     textPresent = true;
 8 |     API_URL += inputText;
 9 |   }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/Fixing the errors/Replacement Route block.txt:
--------------------------------------------------------------------------------
1 |     <Route path="/"><Home/></Route>
2 |     <Route path="products"><Products /></Route>
3 |     <Route path="about"><About /></Route>
4 |     <Route path="coffee"><Coffee /></Route>
5 |     <Route path="contact"><Contact /></Route>
6 |     <Route path="/product/:id"><Product/></Route>
7 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/adding event modifiers/app.svelte - styling.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     padding: 1rem;
 4 |     border: 1px solid;
 5 |   }
 6 | 
 7 |   div:nth-child(1) { background-color: gainsboro; }
 8 | 	
 9 |   div:nth-child(2) {
10 |     background-color: grey;
11 |     color: white;
12 |     border: 1px solid black;
13 |   }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Products from "./Products.svelte";
2 | import Footer from "./Footer.svelte";
3 | import Header from "./Header.svelte";
4 | import Product from "./Product.svelte";
5 | import CartLength from "./CartLength.svelte";
6 | import Cart from "./Cart.svelte";
7 | 
8 | export { Products, Footer, Header, Product, CartLength, Cart }


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/website tests/TestingStores.spec.js:
--------------------------------------------------------------------------------
 1 | const getStore = () => cy.window().its('app.store')
 2 | 
 3 | describe('Testing stores in app', () => {
 4 |   it('can render correct value from product listing', () => {
 5 |     getStore().then(store => {
 6 |       store.set({ name: 'xxxxxx' })
 7 |     })
 8 | 
 9 |     cy.contains('XXX', 'XXXXXX!')
10 |   })
11 | })


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/lifecycle methods - part 2/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { beforeUpdate} from "svelte";
 3 |   let count = 1;
 4 | 
 5 |   beforeUpdate(function() {
 6 |     alert("You can see me before count value is updated");
 7 |   });
 8 | </script>
 9 | 
10 | <div>
11 |   <h1>{count}</h1>
12 |   <button on:click={() => count++}>Increment</button>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/creating custom actions - part 1/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { onMount } from "svelte";
 3 |   let node;
 4 | 
 5 |   function tellMeAboutTheNode(node) {
 6 |     console.log("Information: ", node.tagName);
 7 |   }
 8 | 
 9 |   onMount(() => {
10 |     tellMeAboutTheNode(node);
11 |   });
12 | </script>
13 | 
14 | <h1 bind:this={node}>Hello onMount!</h1>
15 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/forwarding events/inner.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher } from 'svelte';
 3 | 	  
 4 |   const dispatch = createEventDispatcher();
 5 | 	  
 6 |   function sayHello() {
 7 |     dispatch('message', {
 8 |       text: 'Hi, Alex!',
 9 |     });
10 |   }
11 |   </script>
12 | 
13 | <button on:click={sayHello}>
14 |   Click to say hello
15 | </button>
16 | 


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/making use of context/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import {setContext, getContext} from 'svelte';
 3 |   import {writable} from 'svelte/store';
 4 |   import Child from './Child.svelte';
 5 | 
 6 |   let state = writable({color: 'hotpink'});
 7 |   setContext('state', state);
 8 | 
 9 |   setTimeout(() => {$state = {color: 'red'}},2000);
10 | </script>
11 | 
12 | <Child />
13 | 


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/installing cypress/installing cypress - code steps.txt:
--------------------------------------------------------------------------------
 1 | files:module.exports = (on) => {
 2 |   const filePreprocessor = require('@bahmutov/cy-rollup')
 3 |   on('file:preprocessor', filePreprocessor())
 4 | }
 5 | 
 6 | 
 7 | {
 8 |   "experimentalComponentTesting": true,
 9 |   "componentFolder": "./src/components",
10 |   "testFiles": "**/*spec.js"
11 | }
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/iterating through each block/app.svelte - style.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   ul {
 3 |     list-style-type: none;
 4 |     display: grid;
 5 |     grid-template-columns: 1fr 1fr 1fr 1fr;
 6 |     grid-template-rows: 1fr 1fr 1fr;
 7 |     gap: 10px 10px;
 8 |   }
 9 | 	
10 |   li {
11 |     padding: 10px 5px;
12 |     border: 1px solid black;
13 |     text-align: center;
14 |   }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/operating stores/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { username } from './stores.js'
 3 | 	
 4 |   username.set('new username');
 5 |   const newUsername = 'Alex';
 6 | 	
 7 |   username.update(existing => {
 8 |     console.log(`Updating username from ${existing} to ${newUsername}`);
 9 |     return newUsername
10 |   })
11 | </script>
12 | <h1>
13 |   Hello, {newUsername}!
14 | </h1>
15 | 


--------------------------------------------------------------------------------
/Ch12_Code_Practical_Svelte/taking it further/__error.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script context="module">
 2 |   export function load({ error, status }) {
 3 |     return {
 4 |       props: {
 5 |         title: `${status}: ${error.message}`
 6 |       }
 7 |   };
 8 | }
 9 | </script>
10 |  
11 | <script>
12 |   export let title;
13 | </script>
14 |  
15 | <svelte:head>
16 |    <title>{title}</title>
17 | </svelte:head>
18 | 
19 | <h1>{title}</h1>


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/removing a selected item/app.svelte - style.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   ul { 
 3 |     list-style-type: none; 
 4 |     display: grid; 
 5 |     grid-template-columns: 1fr 1fr 1fr; 
 6 |     grid-template-rows: 1fr 1fr 1fr; 
 7 |     gap: 10px 10px; width: 200px;
 8 |   }
 9 | 	
10 |   li { 
11 |     padding: 10px 5px; 
12 |     border: 1px solid black;    
13 |     text-align: center; 
14 |   }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/iterating through each block/app.svelte - markup.txt:
--------------------------------------------------------------------------------
 1 | <h1>Coffees for Sale</h1>
 2 | <ul>
 3 |   {#each coffees as { id, name }, i}
 4 |     <!-- open each block -->
 5 |     <li>
 6 |       <a target="_blank" href="{id}">
 7 | 	    <img src="https://via.placeholder.com/150" alt="placeholder">
 8 |           <span>{name}</span>
 9 |       </a>
10 |       </li>
11 |     <!-- close each block -->
12 |   {/each}
13 | </ul>
14 | 


--------------------------------------------------------------------------------
/Ch9_Code_Practical_Svelte/Automating deployment/ghpages.txt:
--------------------------------------------------------------------------------
 1 | var ghpages = require('gh-pages');
 2 | 
 3 | ghpages.publish(
 4 |   'public', // path to public directory
 5 |   {
 6 |     branch: 'gh-pages',
 7 |     repo: 'https://github.com/username/
 8 | yourproject.git', 
 9 |     user: {
10 |       name: '<ADD YOUR NAME HERE>', 
11 |       email: '<ADD YOUR EMAIL ADDRESS HERE>'
12 |     }
13 |   },
14 |   () => {
15 |     console.log('Deploy Complete!')
16 |   }
17 | )
18 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3A - Header & footer/footer styling.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   footer { 
 3 |    background: linear-gradient(360deg, #594c59 0%, #343334 100%);    color: #fff; 
 4 |    display: flex; 
 5 |    justify-content: space-around; 
 6 | }
 7 | 
 8 |   footer > div { 
 9 |     min-height: 100px; 
10 |     display: flex;     
11 |     justify-content: center; 
12 |     flex-direction: column; 
13 |   }
14 | 
15 |   footer div span a { 
16 |     margin-right: 5px; 
17 |   }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/removing a selected item/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 | let coffees = [
 3 |   { id: 'coffee1', name: 'Peruvian Blend' },
 4 |   { id: 'coffee2', name: 'African Inca' },
 5 |   { id: 'coffee3', name: 'Ristretto' },
 6 |   { id: 'coffee4', name: 'Peruvian Blend Decaff' },
 7 |   { id: 'coffee5', name: 'African Inca Decaff' },
 8 |   { id: 'coffee6', name: 'Ristretto Decaff' }	
 9 | ];
10 | 
11 | function handleClick() {
12 |   coffees = coffees.slice(5,6)
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset='utf-8'>
 5 | 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 6 | 
 7 | 	<title>Svelte app</title>
 8 | 
 9 | 	<link rel='icon' type='image/png' href='/favicon.png'>
10 | 	<link rel='stylesheet' href='/global.css'>
11 | 	<link rel='stylesheet' href='/build/bundle.css'>
12 | 
13 | 	<script defer src='/build/bundle.js'></script>
14 | </head>
15 | 
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/debugging svelte/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	let user = {
 3 | 		firstname: 'Alex',
 4 | 		lastname: 'Libby'
 5 | 	};
 6 | 	
 7 | 	let fruit = {
 8 | 		name: 'apple',
 9 | 		price: '$1'
10 | 	};
11 | </script>
12 | 
13 | <input bind:value={user.firstname}>
14 | <input bind:value={user.lastname}>
15 | 
16 | <input bind:value={fruit.name}>
17 | <input bind:value={fruit.price}>
18 | 
19 | {@debug user, fruit}
20 | 
21 | <h1>Hello {user.firstname}!</h1>
22 | <p>
23 | 	Price of {fruit.name}: {fruit.price}
24 | </p>


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/removing a selected item/app.svelte - markup.txt:
--------------------------------------------------------------------------------
 1 | <h1>Coffees for Sale</h1>
 2 | <button on:click={() => handleClick()}>
 3 | 	Remove selected item(s)
 4 | </button>
 5 | <ul>
 6 |   {#each coffees as coffee (coffee.id)}
 7 |     <!-- open each block -->
 8 |     <li>
 9 |       <a target="_blank" href="{coffee.id}">
10 | 	    <img src="https://via.placeholder.com/150" alt="placeholder">
11 |         <span>{coffee.name}</span>
12 |       </a>
13 |       </li>
14 |     <!-- close each block -->
15 |   {/each}
16 | </ul>
17 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3C - Products, Product Pages and Cart/replacement each block code.txt:
--------------------------------------------------------------------------------
 1 |    {#each $products as product}
 2 |       <div>
 3 |         <div class="image" style="background-image: url({product.image})"></div>
 4 |         <h4><Link to="product/{product.id}">
 5 | {product.name}</Link></h4>
 6 |           <p>${product.price}</p>
 7 |         <div class="cta">
 8 |           <CTAButton on:click={() => addToCart(product)}>
 9 |             Add to cart
10 |           </CTAButton>
11 |         </div>
12 |       </div>
13 |     {/each}
14 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/sourcing fake products/app.svelte - style.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     width: 200px;
 4 |     border: 1px solid black;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     align-items: center;
 8 |     padding: 10px;
 9 |     animation: fadeIn ease 1s;
10 |   }	
11 | 	
12 |   @keyframes fadeIn {
13 |     0% {opacity:0;}
14 |     100% {opacity:1;}
15 |   }
16 | 	
17 |   img {
18 |     display: block;
19 |     width: 150px;
20 |     height: auto;
21 |   }
22 | 	
23 |   span {
24 |     text-align: center;
25 |   }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/Ch5_Code_Practical_Svelte/lifecycle methods - part 1/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { onMount } from 'svelte';
 3 | 
 4 |   let photos = [];
 5 | 
 6 |   onMount(async () => {
 7 |     const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=4`);
 8 |     photos = await res.json();
 9 |   });
10 | </script>
11 | 
12 | <style>
13 |   .photos { 
14 |     width: 100%; 
15 |     display: grid; 
16 |     grid-template-columns: repeat(2, 1fr); 
17 |     grid-gap: 8px; 
18 |   }
19 | 
20 |   figure, img { width: 100%; margin: 0; }
21 | </style>
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apress Source Code
 2 | 
 3 | This repository accompanies [*Practical Svelte*](https://www.apress.com/9781484273739) by Alex Libby (Apress, 2022).
 4 | 
 5 | [comment]: #cover
 6 | ![Cover image](9781484273739.jpg)
 7 | 
 8 | Download the files as a zip using the green button, or clone the repository to your machine using Git.
 9 | 
10 | ## Releases
11 | 
12 | Release v1.0 corresponds to the code in the published book, without corrections or updates.
13 | 
14 | ## Contributions
15 | 
16 | See the file Contributing.md for more information on how you can contribute to this repository.


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3A - Header & footer/header markup.txt:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <div>
 3 |     <span><InlineSVG src="/images/logo.svg" {...attributes} /></span>
 4 |     <span>Small Coffee Company</span>
 5 |   </div>
 6 |   <div>
 7 |     <div class="basket">
 8 |       {#if loggedIn}
 9 |         <div>Hi, {name} | Logout</div>
10 |       {:else}
11 |         <div>Hi, Guest | Login</div>
12 |       {/if}
13 |       <div><InlineSVG src="/images/shoppingcart.svg" {...attributesCart} /></div>
14 |     </div>
15 |     <div class="basketcount">{$cart.length} items: ${$totalprice}</div>
16 |   </div>
17 | </header>


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3C - Products, Product Pages and Cart/styling - product page.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #productdetails { 
 3 |     display: flex; 
 4 |     max-width: 800px;    
 5 |     margin: 0 auto; 
 6 |   }
 7 | 
 8 |   #productdetails div:nth-child(2) h2 { 
 9 |     text-align: right; 
10 |   }
11 | 
12 |   #productdetails div:nth-child(2) p:nth-child(1) {    
13 |     font-size: 36px; 
14 |     font-weight: bold; 
15 |     border-bottom: 1px solid grey; 
16 |     margin-bottom: 0; 
17 |   }
18 | 
19 |   #productdetails div:nth-child(2) p:nth-child(2) {    
20 |     color: lightgrey; 
21 |   }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3B - Buttons/Button styling.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   button { 
 3 |     background-color: #c59747; 
 4 |     border: none;    
 5 |     color: white; 
 6 |     padding: 10px 16px; 
 7 |     text-align: center; 
 8 |     text-decoration: none; 
 9 |     display: inline-block; 
10 |     font-size: 18px; 
11 |     width: 380px; 
12 |     letter-spacing: 2.4px;    
13 |     width: 175px; 
14 |     margin-top: 10px; 
15 |   }
16 | 
17 |   button:hover, button:active { 
18 |     background-color: #000000; 
19 |     color: #ffffff; 
20 |     box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.26); 
21 |   }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let name;
 3 | </script>
 4 | 
 5 | <main>
 6 | 	<h1>Hello {name}!</h1>
 7 | 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 8 | </main>
 9 | 
10 | <style>
11 | 	main {
12 | 		text-align: center;
13 | 		padding: 1em;
14 | 		max-width: 240px;
15 | 		margin: 0 auto;
16 | 	}
17 | 
18 | 	h1 {
19 | 		color: #ff3e00;
20 | 		text-transform: uppercase;
21 | 		font-size: 4em;
22 | 		font-weight: 100;
23 | 	}
24 | 
25 | 	@media (min-width: 640px) {
26 | 		main {
27 | 			max-width: none;
28 | 		}
29 | 	}
30 | </style>


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/passing props/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Button from "./Button.svelte";
 3 | 
 4 |   function Twitter() {
 5 |     console.log("Twitter button clicked");
 6 |   }
 7 |   function Instagram() {
 8 |     console.log("Instagram button clicked");
 9 |   }
10 | 
11 |   function Facebook() {
12 |     console.log("Facebook button clicked");
13 |   }
14 | </script>
15 | 
16 | <div>
17 |   <h1>Get me on social media!</h1>
18 |   <Button name="twitter" handleClick={Twitter} />
19 |   <Button name="instagram" handleClick={Instagram} />
20 |   <Button name="facebook" handleClick={Facebook} />
21 | </div>
22 | 


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/example test/example1.spec.js:
--------------------------------------------------------------------------------
 1 | beforeEach(() => {
 2 |   cy.visit("https://svelte.dev");
 3 | })
 4 | 
 5 | describe('Testing Svelte website front page', () => {
 6 |   it('shows 3 boxes', () => {
 7 |     cy.get('.box').should('have.length', 3);
 8 |   })
 9 | 
10 |   it('each box is of a different color', () => {
11 |     cy.get('.box:nth-child(1)').should('have.css', 'background-color', 'rgb(255, 62, 0)')
12 |     cy.get('.box:nth-child(2)').should('have.css', 'background-color', 'rgb(64, 179, 255)')
13 |     cy.get('.box:nth-child(3)').should('have.css', 'background-color', 'rgb(103, 103, 120)')
14 |   });
15 | })
16 | 


--------------------------------------------------------------------------------
/Ch12_Code_Practical_Svelte/layout template/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Header from '../components/Header.svelte';
 3 |   import Footer from '../components/Footer.svelte';
 4 |   import Disclaimer from '../components/Disclaimer.svelte';
 5 | </script>
 6 | 
 7 | <Header />
 8 | <Disclaimer />
 9 |   <nav>
10 |     <ul>
11 |       <li><a href="/.">Home</a></li>
12 |       <li><a href="/Products">Shop</a></li>
13 |       <li><a href="/About">About</a></li>
14 |       <li><a href="/Coffee">Coffee</a></li>
15 |       <li><a href="/Contact">Contact</a></li> 
16 |     </ul>
17 |   </nav>
18 |   <main>
19 |     <slot />
20 |   </main>
21 | <Footer />
22 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-app",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "build": "rollup -c",
 6 |     "dev": "rollup -c -w",
 7 |     "start": "sirv public"
 8 |   },
 9 |   "devDependencies": {
10 |     "@rollup/plugin-commonjs": "^17.0.0",
11 |     "@rollup/plugin-node-resolve": "^11.0.0",
12 |     "rollup": "^2.3.4",
13 |     "rollup-plugin-css-only": "^3.1.0",
14 |     "rollup-plugin-livereload": "^2.0.0",
15 |     "rollup-plugin-svelte": "^7.0.0",
16 |     "rollup-plugin-terser": "^7.0.0",
17 |     "svelte": "^3.0.0"
18 |   },
19 |   "dependencies": {
20 |     "sirv-cli": "^1.0.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/2 - Pages/Styling pages.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #content { 
 3 |     display: flex; 
 4 |     column-gap: 80px; 
 5 |   }
 6 |   
 7 |   .form, label { 
 8 |     display: flex; 
 9 |     flex-direction: column; 
10 |   }
11 |   
12 |   label { 
13 |     padding-top: 10px; 
14 |   }
15 |   
16 |   input { 
17 |     width: 380px; 
18 |     margin-right: 10px; 
19 |   }
20 |   
21 |   textarea { 
22 |     width: 380px; 
23 |   }
24 |   
25 |   .formformat { 
26 |     display: flex; 
27 |   }
28 |   
29 |   .invalid { 
30 |     border-color: red !important; 
31 |   }
32 |   
33 |   .submitbutton { 
34 |     display: flex; 
35 |   }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/Preprocessing/various code steps.txt:
--------------------------------------------------------------------------------
 1 | 1. Enter this:
 2 | 	  preprocess: [
 3 |             scss() 
 4 |           ]
 5 | 	}),
 6 | 
 7 | 
 8 | 2. Add to a new file as svelte.config.js:
 9 | const preprocess = require('svelte-preprocess');
10 | 
11 | module.exports = {
12 |   preprocess: preprocess(),
13 |   // ...other svelte options could go here
14 | };
15 | 
16 | 
17 | 3. The updated Sass code should look like this:
18 |     margin-top: 10px;  
19 | 
20 |     &:hover,
21 |     &:active { 
22 |       background-color: #000000;  
23 |       color: #ffffff;  
24 |       box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.26);  
25 |     }
26 |   }
27 | 


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3C - Products, Product Pages and Cart/styling - products page.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .product-list { 
 3 |     display: grid; 
 4 |     grid-template-columns: repeat(3, 1fr); 
 5 |     column-gap: 20px; 
 6 |     grid-row-gap: 20px; 
 7 |   }
 8 |   
 9 |   .product-list > div { 
10 |     border: 1px solid #c4c4c4;   
11 |     padding: 10px; 
12 |   }
13 |   
14 |   .image { 
15 |     height: 150px; 
16 |     width: auto; 
17 |     background-size: contain; 
18 |     background-position: center; 
19 |     background-repeat: no-repeat; 
20 |   }
21 | 
22 |   .cta { 
23 |     display: flex; 
24 |     justify-content: space-between; 
25 |   }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/Ch4_Code_Practical_Svelte/adding login & out links/code.txt:
--------------------------------------------------------------------------------
 1 | export let name;
 2 | 
 3 | 
 4 | import { setContext } from "svelte";
 5 | let loggedIn;
 6 | 
 7 | 
 8 | 
 9 | if (name == "") {
10 |   loggedIn = false;
11 | } else {
12 |   loggedIn = true;
13 | }
14 | 
15 | setContext('key', {
16 |   loggedIn
17 | });
18 | 
19 | 
20 | 
21 | 
22 | import { getContext } from "svelte";
23 | const { loggedIn } = getContext('key');
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | <div class="basket">
31 |   {#if loggedIn}
32 |     <div>Hi, {name} | Logout</div>
33 |   {:else}
34 |     <div>Hi, Guest | Login</div>
35 |   {/if}
36 |   <div><InlineSVG src="/images/shoppingcart.svg" {...attributesCart} /></div>
37 | </div>
38 | 
39 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Header.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { cart } from "../stores.js";  
 3 |   import InlineSVG from 'svelte-inline-svg';
 4 | 
 5 |   $: attributes = {
 6 |     width: 50,
 7 |     height: 50,
 8 |   }    
 9 | 
10 |   $: attributesCart = {
11 |     width: 30,
12 |     height: 30,
13 |   }
14 | </script>
15 | 
16 | <style>
17 | …TO BE ADDED LATER…
18 | </style>
19 | 
20 | 
21 | <header>
22 |   <div>
23 |     <span><InlineSVG src="/images/logo.svg" {...attributes} /></span>
24 |     <span>Small Coffee Company</span>
25 |   </div>
26 |   <div>
27 |     <span><InlineSVG src="/images/shoppingcart.svg" {...attributesCart} /></span>
28 |     <span>{$cart.length}</span>
29 |   </div>
30 | </header>
31 | 
32 | 


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Apress Source Code
 2 | 
 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers.
 4 | 
 5 | ## How to Contribute
 6 | 
 7 | 1. Make sure you have a GitHub account.
 8 | 2. Fork the repository for the relevant book.
 9 | 3. Create a new branch on which to make your change, e.g. 
10 | `git checkout -b my_code_contribution`
11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted.
12 | 5. Submit a pull request.
13 | 
14 | Thank you for your contribution!


--------------------------------------------------------------------------------
/Ch6_Code_Practical_Svelte/one at a time/audio player code.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import AudioPlayer from './AudioPlayer.svelte';
 3 | </script>
 4 | 
 5 | <AudioPlayer
 6 | src="https://sveltejs.github.io/assets/music/strauss.mp3"
 7 | 	title="The Blue Danube Waltz"
 8 | 	composer="Johann Strauss"
 9 | 	performer="European Archive"
10 | />
11 | 
12 | <AudioPlayer src="https://sveltejs.github.io/assets/music/holst.mp3"
13 | 	title="Mars, the Bringer of War"
14 | 	composer="Gustav Holst"
15 | 	performer="USAF Heritage of America Band"
16 | />
17 | 
18 | <AudioPlayer src="https://sveltejs.github.io/assets/music/beethoven.mp3"
19 | 	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
20 | 	composer="Ludwig van Beethoven"
21 | 	performer="European Archive"
22 | />


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3A - Header & footer/header styling.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   header { 
 3 |     background-color: black; 
 4 |     color: #fff;    
 5 |     display: flex; 
 6 |     justify-content: space-around; 
 7 |   }
 8 | 
 9 |   header > div { 
10 |     min-height: 100px; 
11 |     display: flex; 
12 |     align-items: center; 
13 |   }
14 | 
15 |   header > div > span:nth-child(2) { 
16 |     font-size: 30px; 
17 |     padding-left: 10px; 
18 |   }
19 | 
20 |   div.basket { 
21 |     display: flex; 
22 |   }
23 | 
24 |   div.basket > div:nth-child(1) {
25 |     margin-right: 10px;
26 |   }
27 | 
28 |   div.basketcount { 
29 |     background-color: #c59747;  
30 |     padding: 5px 10px; 
31 |     border-radius: 50px; 
32 |     margin: 0 0 15px 0px; 
33 |   }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Footer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import InlineSVG from 'svelte-inline-svg';
 3 | 
 4 |   $: attributes = {
 5 |     width: 30,
 6 |     height: 30,
 7 |     fill: "#fff",
 8 |   }  
 9 | </script>
10 | 
11 | <style>
12 | …TO BE ADDED LATER…
13 | </style>
14 | 
15 | <footer>
16 |   <div>
17 |     <span>&copy; Small Coffee Shop 2021</span>
18 |   </div>
19 |   <div>
20 |     <span>
21 |       <a href="https://facebook.com/smallcoffeeshop"><InlineSVG src="/images/facebook.svg" {...attributes} /></a>
22 |       <a href="https://instagram.com/smallcoffeeshop"><InlineSVG src="/images/instagram.svg" {...attributes} /></a>
23 |       <a href="https://Twitter.com/smallcoffeeshop"><InlineSVG src="/images/twitter.svg" {...attributes} /></a>      
24 |     </span>
25 |   </div>
26 | </footer>


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/3C - Products, Product Pages and Cart/styling - cart.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .title { 
 3 |     font-size: 24px; 
 4 |     font-weight: bold; 
 5 |   }
 6 | 
 7 |   .cart-list { 
 8 |     border: 2px solid; 
 9 |     padding: 10px;   
10 |     width: 330px; 
11 |     margin-left: 30px; 
12 |   }
13 | 
14 |   h4 { 
15 |     border-bottom: 1px solid #d7d7d7; 
16 |     padding: 21px; 
17 |     margin: 0; 
18 |   }
19 |  
20 |   .cart-item { 
21 |     display: grid; 
22 |     grid-template-columns: 50px 100px 50px 30px 30px 50px; 
23 |     border-bottom: 1px solid #d7d7d7; padding: 10px; 
24 |   }
25 |   
26 |   .cart-item > button { 
27 |     height: 25px; 
28 |   }
29 |   
30 |   .cart-item > span:nth-child(6) { 
31 |     padding-left: 15px; 
32 |   }
33 |   
34 |   .total { 
35 |     text-align: right; 
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/custom easing using css/app.svelte - css.txt:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   @-webkit-keyframes scale-up-top {
 3 |     0% {
 4 |       transform: scale(0.5);
 5 |       transform-origin: 50% 0%;
 6 |     }
 7 |     100% {
 8 |       transform: scale(1);
 9 |       transform-origin: 50% 0%;
10 |       }
11 |     }
12 |   @keyframes scale-up-top {
13 |     0% {
14 |       transform: scale(0.5);
15 |       transform-origin: 50% 0%;
16 |     }
17 |     100% {
18 |       transform: scale(1);
19 |       transform-origin: 50% 0%;
20 |     }
21 |     }
22 | 
23 | 	.cube{ background-color: gainsboro;	color: black;
24 | font-weight: bold; width: 100px; height: 100px; display: flex; justify-content: center;	align-items:center; margin-top: 10px; }
25 | 	
26 | 	.scale-up-top { animation: scale-up-top 2.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg id="regular" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m4.75 24h14.5c2.619 0 4.75-2.131 4.75-4.75v-14.5c0-2.619-2.131-4.75-4.75-4.75h-14.5c-2.619 0-4.75 2.131-4.75 4.75v14.5c0 2.619 2.131 4.75 4.75 4.75zm-3.25-19.25c0-1.792 1.458-3.25 3.25-3.25h14.5c1.792 0 3.25 1.458 3.25 3.25v14.5c0 1.792-1.458 3.25-3.25 3.25h-14.5c-1.792 0-3.25-1.458-3.25-3.25z"/><path d="m12 18.13c3.38 0 6.13-2.75 6.13-6.13s-2.75-6.13-6.13-6.13-6.13 2.75-6.13 6.13 2.75 6.13 6.13 6.13zm0-10.76c2.553 0 4.63 2.077 4.63 4.63s-2.077 4.63-4.63 4.63-4.63-2.077-4.63-4.63 2.077-4.63 4.63-4.63z"/><path d="m18.358 7.362c.986 0 1.729-.74 1.729-1.721 0-1.023-.782-1.721-1.728-1.721-.986 0-1.729.74-1.729 1.721 0 1.021.778 1.721 1.728 1.721zm.177-1.886c.316.279-.405.618-.405.166 0-.27.367-.2.405-.166z"/></svg>


--------------------------------------------------------------------------------
/Ch6_Code_Practical_Svelte/contact form/contact - script block.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import * as yup from 'yup';
 3 |   import {Form, Message, isInvalid} from 'svelte-yup';
 4 | 
 5 |   $: invalid = (name)=>{
 6 |       if(submitted){
 7 |           return isInvalid(schema, name, fields);
 8 |       }
 9 |       return false;
10 |   }
11 | 
12 |   let schema = yup.object().shape({
13 |     name: yup.string().required().max(30).label("Name"),
14 |     email: yup.string().required().email().label("Email address"),
15 |   });
16 | 
17 |   let fields = {email: "", name: "", yourmessage: ""};
18 |   let submitted = false;
19 |   let isValid;
20 |   
21 |   function formSubmit(){
22 |     submitted = true;
23 |     isValid = schema.isValidSync(fields);
24 |   
25 |     if(isValid){
26 |         alert('Everything is validated!');
27 |         console.log("Validated fields", fields);
28 |     }
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/facebook.svg:
--------------------------------------------------------------------------------
1 | <svg id="regular" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
2 |   <path d="m2.707 24h8.804c.414 0 .75-.336.75-.75 0-.16-.01-6.84-.011-7 0-.414-.336-.75-.75-.75h-2.25v-2.5h2.25c.414 0 .75-.336.75-.75v-2.817c0-2.444 1.989-4.433 4.433-4.433h2.067v2.5h-1.25c-.965 0-1.75.785-1.75 1.75v3c0 .414.336.75.75.75h3.04l-.625 2.5h-2.415c-.414 0-.75.336-.75.75v7c0 .414.336.75.75.75h4.793c1.493 0 2.707-1.214 2.707-2.707v-18.586c0-1.493-1.214-2.707-2.707-2.707h-18.586c-1.493 0-2.707 1.214-2.707 2.707v18.587c0 1.492 1.214 2.706 2.707 2.706zm-1.207-21.293c0-.666.541-1.207 1.207-1.207h18.587c.666 0 1.207.541 1.207 1.207v18.587c0 .666-.541 1.207-1.207 1.207h-4.044v-5.501h2.25c.344 0 .644-.234.728-.568l1-4c.118-.473-.239-.932-.728-.932h-3.25v-2.25c0-.136.114-.25.25-.25h2c.414 0 .75-.336.75-.75v-4c0-.414-.336-.75-.75-.75h-2.817c-3.271 0-5.933 2.662-5.933 5.933v2.067h-2.25c-.414 0-.75.336-.75.75v4c0 .414.336.75.75.75h2.25v5.5h-8.043c-.666 0-1.207-.541-1.207-1.207z" /></svg>


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Products, Footer, Header, Product, CartLength, Cart } from "./components";
 3 | 
 4 |   import About from "./pages/About.svelte";
 5 |   import Home from "./pages/Home.svelte";
 6 |   import Coffee from "./pages/Coffee.svelte";
 7 | 
 8 |   import { Router, Link, Route } from "svelte-routing";
 9 | 
10 |   export let url = "";   
11 |   export let name;
12 | </script>
13 | 
14 | <style>
15 | ...TO BE ADDED LATER...
16 | </style>
17 | 
18 | <Header name={name} />
19 | <Router url="{url}">
20 |   <nav>
21 |     <Link to="/">Home</Link>
22 |     <Link to="/products">Shop</Link>
23 |     <Link to="/about">Our Story</Link>
24 |     <Link to="/coffee">Our Coffee</Link>
25 |   </nav>
26 |   <main>
27 |     <Route path="/" component="{Home}" />
28 |     <Route path="products" component="{Products}" />
29 |     <Route path="about" component="{About}" />
30 |     <Route path="coffee" component="{Coffee}" />
31 |     <Route path="/product/:id" component="{Product}" />
32 |   </main>
33 | </Router>
34 | <Footer />


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/pages/About.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 | …TO BE ADDED LATER…
 3 | </style>
 4 | 
 5 | <section>
 6 |   <h2>About Us</h2>
 7 | 
 8 |   <!-- image from https://www.pexels.com/photo/beans-beverage-black-coffee-breakfast-373888/ -->
 9 |   <div id="banner">
10 |     <img src="images/banner.jpg" alt="banner" />
11 |   </div>
12 |     
13 |   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed odio id nulla gravida rhoncus. Suspendisse potenti. In volutpat nibh non tellus laoreet, vitae faucibus ipsum sollicitudin. Duis viverra pulvinar tempus. Phasellus odio nunc, imperdiet vitae diam quis, sollicitudin pretium massa. Donec molestie mauris id semper sagittis.</p>
14 |   <p>Vivamus euismod arcu non velit pulvinar, in egestas mauris tincidunt. Vivamus eget elit non est semper elementum. Quisque turpis elit, tristique eu elit at, rhoncus ullamcorper eros. Integer efficitur efficitur libero, venenatis rhoncus sapien posuere ut. Nulla semper, magna at luctus luctus, orci lacus scelerisque erat, id consequat quam mauris sed neque.</p>
15 | </section>


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Products.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import {products, cart} from "../stores.js";
 3 |   import Cart from "./Cart.svelte";  
 4 |   import Button from "./Button.svelte";
 5 | 
 6 |   export let location;
 7 |   
 8 |   const addToCart = (product) => {
 9 |     console.log("Added");
10 |     for (let item of $cart) {
11 |         if(item.id === product.id) {
12 |           product.quantity += 1
13 |           $cart = $cart;
14 |           return;
15 |         }
16 |     }
17 |     $cart = [...$cart, product]
18 |   }
19 | </script>
20 | 
21 | <style>
22 | …TO BE ADDED LATER…
23 | </style>
24 | 
25 | 
26 | <div class="product-list">
27 |   {#each $products as product}
28 |     <div>
29 |       <div class="image" style="background-image: url({product.image})"></div>
30 |       <h4><a href="product/{product.id}">{product.name}</a></h4>
31 |       <div class="cta">
32 |         <p>${product.price}</p>
33 |         <Button on:click={() => addToCart(product)}>
34 |           Add to cart
35 |         </Button>
36 |       </div>
37 |     </div>
38 |   {/each}
39 | </div>
40 | <Cart />


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/pages/Coffee.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 | …TO BE ADDED LATER…
 3 | </style>
 4 | 
 5 | <script>
 6 |   export let location;
 7 | </script>
 8 | 
 9 | <section>
10 |   <h1>Our Coffee</h1>
11 | 
12 |   <!-- image from https://www.pexels.com/photo/beans-beverage-black-coffee-breakfast-373888/ -->
13 |   <div id="banner">
14 |     <img src="images/banner.jpg" alt="banner" />
15 |   </div>
16 | 
17 |   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed odio id nulla gravida rhoncus. Suspendisse potenti. In volutpat nibh non tellus laoreet, vitae faucibus ipsum sollicitudin. Duis viverra pulvinar tempus. Phasellus odio nunc, imperdiet vitae diam quis, sollicitudin pretium massa. Donec molestie mauris id semper sagittis.</p>
18 |   <p>Vivamus euismod arcu non velit pulvinar, in egestas mauris tincidunt. Vivamus eget elit non est semper elementum. Quisque turpis elit, tristique eu elit at, rhoncus ullamcorper eros. Integer efficitur efficitur libero, venenatis rhoncus sapien posuere ut. Nulla semper, magna at luctus luctus, orci lacus scelerisque erat, id consequat quam mauris sed neque.</p>
19 | </section>


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/public/global.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | body {
 8 | 	color: #333;
 9 | 	margin: 0;
10 | 	padding: 8px;
11 | 	box-sizing: border-box;
12 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 | 
15 | a {
16 | 	color: rgb(0,100,200);
17 | 	text-decoration: none;
18 | }
19 | 
20 | a:hover {
21 | 	text-decoration: underline;
22 | }
23 | 
24 | a:visited {
25 | 	color: rgb(0,80,160);
26 | }
27 | 
28 | label {
29 | 	display: block;
30 | }
31 | 
32 | input, button, select, textarea {
33 | 	font-family: inherit;
34 | 	font-size: inherit;
35 | 	-webkit-padding: 0.4em 0;
36 | 	padding: 0.4em;
37 | 	margin: 0 0 0.5em 0;
38 | 	box-sizing: border-box;
39 | 	border: 1px solid #ccc;
40 | 	border-radius: 2px;
41 | }
42 | 
43 | input:disabled {
44 | 	color: #ccc;
45 | }
46 | 
47 | button {
48 | 	color: #333;
49 | 	background-color: #f4f4f4;
50 | 	outline: none;
51 | }
52 | 
53 | button:disabled {
54 | 	color: #999;
55 | }
56 | 
57 | button:not(:disabled):active {
58 | 	background-color: #ddd;
59 | }
60 | 
61 | button:focus {
62 | 	border-color: #666;
63 | }
64 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Product.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import {products, cart} from "../stores.js";
 3 |   import Button from "./Button.svelte";
 4 |   
 5 |   let individualID = document.location.pathname.split("/")[2];
 6 |   let individualName;
 7 |   
 8 |   const addToCart = (product) => {
 9 |     for(let item of $cart) {
10 |         if(item.id === product.id) {
11 |           product.quantity += 1
12 |           $cart = $cart;
13 |           return;
14 |         }
15 |     }
16 |     $cart = [...$cart, product]
17 |   }
18 | </script>
19 | 
20 | 
21 | <style>
22 | …TO BE ADDED LATER…
23 | </style>
24 | 
25 | 
26 | <a href="/products">{"<< Back to Shop"}</a>
27 | 
28 | <div id="productdetails">
29 |   {#each $products as product }
30 |     {#if product.id == individualID}
31 |       <div>
32 |         <p><img src="{product.large_image}" alt="{product.name}" /></p>
33 |       </div>
34 |       <div>
35 |         <p>{product.name}</p>
36 |         <p>SKU: {individualID}</p>
37 |         <p>{product.description}</p>
38 |         <h2>${product.price}</h2>
39 |         <Button on:click={() => addToCart(product)}>
40 |           Add to cart
41 |         </Button>
42 |       </div>
43 |     {/if}
44 |   {/each}
45 | </div>
46 | 
47 | 


--------------------------------------------------------------------------------
/Ch6_Code_Practical_Svelte/coffee selector/app.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   let a = 1;	
 3 |   let name = 'Guest';
 4 |   let grain = 'Coarse';
 5 |   let b = ['50g'];
 6 | 	
 7 |   let coffeeType = [
 8 |     'Coarse',
 9 |     'Fine',
10 |     'Wholebean'
11 |   ];	
12 | 
13 |   let sizes = [ '50g', '75g', '100g' ];
14 | </script>
15 | 
16 | <p>
17 |   Please enter your name: <input bind:value={name}>
18 | </p>
19 | 
20 | <h1>Hi {name}!</h1>
21 | <p>
22 |   This is what we have available in stock right now:
23 | </p>
24 | 
25 | <h2>
26 |   Grain
27 | </h2>
28 | <label>
29 |   <input type=radio bind:group={grain} value={'Coarse'}>
30 |   Coarse
31 | </label>
32 | 
33 | <label>
34 |   <input type=radio bind:group={grain} value={'Fine'}>
35 |   Fine
36 | </label>
37 | 
38 | <label>
39 |   <input type=radio bind:group={grain} value={'Whole Bean'}>
40 |   Whole Bean
41 | </label>
42 | 
43 | <h2>
44 |   Weight
45 | </h2>
46 | {#each sizes as bagSize}
47 |   <label>
48 |     <input type=checkbox bind:group={b} value={bagSize}>
49 |     {bagSize}
50 |    </label>
51 | {/each}
52 | 
53 | <p>
54 |   Number of bags required:
55 | </p>
56 | <label>
57 |   <input type=number bind:value={a} min=1 max=10>
58 | </label>
59 | 
60 | You've chosen {a} x {b} {a === 1? "bag": "bags"} of {grain} coffee
61 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg id="regular" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m.473 19.595c2.222 1.41 4.808 2.155 7.478 2.155 3.91 0 7.493-1.502 10.09-4.229 2.485-2.61 3.852-6.117 3.784-9.676.942-.806 2.05-2.345 2.05-3.845 0-.575-.624-.94-1.13-.647-.885.52-1.692.656-2.522.423-1.695-1.652-4.218-2-6.344-.854-1.858 1-2.891 2.83-2.798 4.83-3.139-.383-6.039-1.957-8.061-4.403-.332-.399-.962-.352-1.226.1-.974 1.668-.964 3.601-.117 5.162-.403.071-.652.41-.652.777 0 1.569.706 3.011 1.843 3.995-.212.204-.282.507-.192.777.5 1.502 1.632 2.676 3.047 3.264-1.539.735-3.241.98-4.756.794-.784-.106-1.171.948-.494 1.377zm7.683-1.914c.561-.431.263-1.329-.441-1.344-1.24-.026-2.369-.637-3.072-1.598.339-.022.69-.074 1.024-.164.761-.206.725-1.304-.048-1.459-1.403-.282-2.504-1.304-2.917-2.62.377.093.761.145 1.144.152.759.004 1.046-.969.427-1.376-1.395-.919-1.99-2.542-1.596-4.068 2.436 2.468 5.741 3.955 9.237 4.123.501.031.877-.44.767-.917-.475-2.059.675-3.502 1.91-4.167 1.222-.66 3.184-.866 4.688.712.447.471 1.955.489 2.722.31-.344.648-.873 1.263-1.368 1.609-.211.148-.332.394-.319.651.161 3.285-1.063 6.551-3.358 8.96-2.312 2.427-5.509 3.764-9.004 3.764-1.39 0-2.753-.226-4.041-.662 1.54-.298 3.003-.95 4.245-1.906z"/></svg>


--------------------------------------------------------------------------------
/Ch7_Code_Practical_Svelte/1 - Global styles/Global styles.txt:
--------------------------------------------------------------------------------
 1 | body { 
 2 |   display: flex; 
 3 |   flex-direction: column; 
 4 |   min-height: 100vh; 
 5 | }
 6 | 
 7 | a { 
 8 |   text-decoration: none; 
 9 |   font-weight: bold; 
10 | }
11 | 
12 | nav { 
13 |   background-color: #c59747; 
14 | }
15 | 
16 | nav>a,nav>a:visited { 
17 |   display: inline-flex; 
18 |   padding: 10px 15px; 
19 |   text-decoration: none; 
20 |   font-weight: bold;  
21 |   color: #552200; 
22 | }
23 | 
24 | nav>a:hover { 
25 |   color: #552200; 
26 |   text-decoration: none;  
27 |   border-bottom: 5px solid #552200; 
28 |   position: relative;
29 | }
30 | 
31 | a[aria-current="page"] { 
32 |   border-bottom: 5px solid #552200; 
33 |   position: relative; 
34 |   color: #ffffff; 
35 | }
36 | 
37 | section {  
38 |   max-width: 60rem; 
39 | }
40 | 
41 | #banner { 
42 |   margin: 20px auto; 
43 |   width: 50%; 
44 |   display: table; 
45 | }
46 | 
47 | .modal-background { 
48 |   background-color: rgba(0, 0, 0, .7) !important; 
49 | }
50 | 
51 | div.modal>div { 
52 |   display: flex; 
53 |   justify-content: center; 
54 | }
55 | 
56 | div.modal>div:nth-child(1) { 
57 |   justify-content: flex-end; 
58 | }
59 | 
60 | div.modal>div>button { 
61 |   background-color: #ffffff;
62 |   border: 1px solid #c4c4c4; 
63 |   font-weight: bold; 
64 |   font-size: 18px; 
65 | }
66 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/shoppingcart.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="40" height="40"><defs><path d="M102 459C102 487.05 124.95 510 153 510C181.05 510 204 487.05 204 459C204 430.95 181.05 408 153 408C124.95 408 102 430.95 102 459ZM0 51L51 51L142.8 244.8C121.38 281.52 109.48 301.92 107.1 306C104.55 313.65 102 323.85 102 331.5C102 359.55 124.95 382.5 153 382.5C173.4 382.5 275.4 382.5 459 382.5L459 331.5C281.52 331.5 182.92 331.5 163.2 331.5C160.65 331.5 158.1 328.95 158.1 326.4C158.1 326.23 158.1 325.38 158.1 323.85L181.05 280.5C294.27 280.5 357.17 280.5 369.75 280.5C390.15 280.5 405.45 270.3 413.1 255C422.28 238.42 495.72 105.82 504.9 89.25C510 84.15 510 81.6 510 76.5C510 61.2 499.8 51 484.5 51C459.34 51 333.54 51 107.1 51L84.15 0L0 0L0 51ZM357 459C357 487.05 379.95 510 408 510C436.05 510 459 487.05 459 459C459 430.95 436.05 408 408 408C379.95 408 357 430.95 357 459Z" id="b59eF838j"></path></defs><g><g><g><use xlink:href="#b59eF838j" opacity="1" fill="#ffffff" fill-opacity="1"></use><g><use xlink:href="#b59eF838j" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/pages/Home.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 | …TO BE ADDED LATER…
 3 | </style>
 4 | 
 5 | <section>
 6 |   <!-- image from https://www.pexels.com/photo/beans-beverage-black-coffee-breakfast-373888/ -->
 7 |   <span class="welcome">Welcome to Small Coffee Company - high quality great coffee, roasted with love in the heart of Yorkshire</span>
 8 |   <div id="banner">
 9 |     <img src="images/banner.jpg" alt="banner" />
10 |   </div>
11 | 
12 |   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed odio id nulla gravida rhoncus. Suspendisse potenti. In volutpat nibh non tellus laoreet, vitae faucibus ipsum sollicitudin. Duis viverra pulvinar tempus. Phasellus odio nunc, imperdiet vitae diam quis, sollicitudin pretium massa. Donec molestie mauris id semper sagittis.</p>
13 | 
14 |   <span class="welcome">New Arrivals</span>
15 |   <div id="newarrivals">
16 |     <img src="images/1.png" alt="image1" />
17 |     <img src="images/2.png" alt="image2" />
18 |     <img src="images/3.png" alt="image3" />
19 |   </div>
20 | 
21 |   <p>Vivamus euismod arcu non velit pulvinar, in egestas mauris tincidunt. Vivamus eget elit non est semper elementum. Quisque turpis elit, tristique eu elit at, rhoncus ullamcorper eros. Integer efficitur efficitur libero, venenatis rhoncus sapien posuere ut. Nulla semper, magna at luctus luctus, orci lacus scelerisque erat, id consequat quam mauris sed neque.</p>
22 | </section>


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Freeware License, some rights reserved
 2 | 
 3 | Copyright (c) 2022 Alex Libby
 4 | 
 5 | Permission is hereby granted, free of charge, to anyone obtaining a copy 
 6 | of this software and associated documentation files (the "Software"), 
 7 | to work with the Software within the limits of freeware distribution and fair use. 
 8 | This includes the rights to use, copy, and modify the Software for personal use. 
 9 | Users are also allowed and encouraged to submit corrections and modifications 
10 | to the Software for the benefit of other users.
11 | 
12 | It is not allowed to reuse,  modify, or redistribute the Software for 
13 | commercial use in any way, or for a user’s educational materials such as books 
14 | or blog articles without prior permission from the copyright holder. 
15 | 
16 | The above copyright notice and this permission notice need to be included 
17 | in all copies or substantial portions of the software.
18 | 
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 | AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25 | SOFTWARE.
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/src/components/Cart.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { cart } from "../stores.js";
 3 |   
 4 |   const removeItem = (product) => {
 5 |     for(let item of $cart) {
 6 |       if(item.id === product.id) {
 7 |         if(product.quantity > 1 ) {
 8 |           product.quantity -= 1
 9 |           $cart = $cart
10 |         } else {
11 |           $cart = $cart.filter((cartItem) => cartItem != product)
12 |         }
13 |         return;
14 |       }
15 |     }
16 |   }
17 |   
18 |   const addItem = (product) => {
19 |     for(let item of $cart) {
20 |       if(item.id === product.id) {
21 |         product.quantity += 1
22 |         $cart = $cart;
23 |         return;
24 |       }
25 |     }
26 |   }
27 | 
28 |   $: total = $cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
29 | </script>
30 | 
31 | <style>
32 | …TO BE ADDED LATER…
33 | </style>
34 | 
35 | <div class="cart-list">
36 | <span class="title">Cart</span>
37 |   <div class="total">
38 |     <h4>Total: $ {total}</h4>
39 |   </div>  
40 |   {#each $cart as item }
41 |     {#if item.quantity > 0}
42 |     <div class="cart-item">
43 |       <img width="50" src={item.image} alt={item.name}/>
44 |       <span>{item.name}</span>
45 |       <div>{item.quantity}
46 |         <button on:click={() => addItem(item)}>+</button>
47 |         <button on:click={() => removeItem(item)}>-</button>
48 |       </div>
49 |       <span>${item.price * item.quantity}</span>
50 |     </div>
51 |     {/if}
52 |   {/each}
53 | </div>
54 | 
55 | 


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/website tests/ContentPages.spec.js:
--------------------------------------------------------------------------------
 1 | describe('Testing Svelte website content pages', () => {
 2 |   it('Coffee page has correct content', () => {
 3 |     cy.visit("http://localhost:5000/coffee");
 4 | 
 5 |     cy.get('#banner > img').should('have.length', 1);  // banner image
 6 |     cy.get('h2').should('have.length', 1);
 7 |     cy.get('h2').contains('Our Coffee');  // title exists, and has correct text
 8 |   })
 9 | 
10 |   it('About page has correct content', () => {
11 |     cy.visit("http://localhost:5000/about");
12 | 
13 |     cy.get('#banner > img').should('have.length', 1);  // banner image
14 |     cy.get('h2').should('have.length', 1);
15 |     cy.get('h2').contains('About Us');  // title exists, and has correct text
16 |   })  
17 | 
18 |   it('can submit form from contact us page', () => {
19 |     cy.visit("http://localhost:5000/contact");
20 | 
21 |     cy.get('#banner > img').should('have.length', 1);  // banner image
22 |     cy.get('h2').should('have.length', 1);
23 |     cy.get('h2').contains('Contact Us');  // title exists, and has correct text    
24 | 
25 |     cy.get("form > span:nth-child(2) > input").type("Joe Customer") // Name
26 |     cy.get("form > span:nth-child(4) > input").type("joe.customer@example.com") // Email
27 |     cy.get("form > textarea").type("This is a test message") // Message
28 |     cy.get("button").click()
29 |     cy.on('window:alert', (txt) => {
30 |       //Mocha assertions
31 |       expect(txt).to.contains('Everything is validated!');
32 |    })    
33 |   }) 
34 | })


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/adding derived stores/Header.svelte - updated version.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { cart, totalprice } from "../stores.js";  
 3 |   import InlineSVG from 'svelte-inline-svg';
 4 | 
 5 |   $: attributes = {
 6 |     width: 50,
 7 |     height: 50,
 8 |   }    
 9 | 
10 |   $: attributesCart = {
11 |     width: 30,
12 |     height: 30,
13 |   }
14 | 
15 |   export let name = "Guest";
16 |   let loggedInText = "Hi, {name}";
17 | </script>
18 | 
19 | <style>
20 |   header {
21 |     background-color: black;
22 |     color: #fff;
23 |     display: flex;
24 |     justify-content: space-around;
25 |   }
26 | 
27 |   header > div {
28 |     min-height: 100px;
29 |     display: flex;
30 |     align-items: center;    
31 |   }
32 | 
33 |   header > div:nth-child(1) > div:nth-child(1) {
34 |     display: flex;
35 |   }
36 | 
37 |   header > div > div:nth-child(1) > span:nth-child(2) {
38 |     font-size: 30px;
39 |     padding-left: 10px;
40 |   }
41 | 
42 |   div.basketcount {
43 |     background-color: #c59747;
44 |     padding: 5px 10px;
45 |     border-radius: 50px;
46 |     margin: 0 0 15px 0px;
47 |   }
48 | 
49 |   div.basket > div:nth-child(1) {
50 |     margin-right: 10px;
51 |   }
52 | 
53 |   div.basket {
54 |     display: flex;
55 |   }
56 | </style>
57 | 
58 | <header>
59 |   <div>
60 |     <div>
61 |       <span><InlineSVG src="/images/logo.svg" {...attributes} /></span>
62 |       <span>Small Coffee Company</span>
63 |     </div>
64 |   </div>
65 |   <div>
66 |     <div class="basket">
67 |       <div>Hi, {name}</div>
68 |       <div><InlineSVG src="/images/shoppingcart.svg" {...attributesCart} /></div>
69 |     </div>
70 |     <div class="basketcount">{$cart.length} items: ${$totalprice}</div>
71 |   </div>
72 | </header>
73 | 
74 | 


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/modal fade/Modal.svelte.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher, onDestroy } from 'svelte';
 3 |   import { fade } from 'svelte/transition';
 4 | 
 5 |   const dispatch = createEventDispatcher();
 6 |   const close = () => dispatch('close');
 7 | 
 8 |   let modal;
 9 | 
10 |   const handle_keydown = e => {
11 |     if (e.key === 'Escape') {
12 |       close();
13 |       return;
14 |     }
15 | 
16 |     if (e.key === 'Tab') {
17 |       // trap focus
18 |       const nodes = modal.querySelectorAll('*');
19 |       const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
20 | 
21 |       let index = tabbable.indexOf(document.activeElement);
22 |       if (index === -1 && e.shiftKey) index = 0;
23 | 
24 |       index += tabbable.length + (e.shiftKey ? -1 : 1);
25 |       index %= tabbable.length;
26 | 
27 |       tabbable[index].focus();
28 |       e.preventDefault();
29 |     }
30 |   };
31 | 
32 |   const previously_focused = typeof document !== 'undefined' && document.activeElement;
33 | 
34 |   if (previously_focused) {
35 |     onDestroy(() => {
36 |       previously_focused.focus();
37 |     });
38 |   }
39 | </script>
40 | 
41 | <svelte:window on:keydown={handle_keydown}/>
42 | 
43 | <div class="modal-background" on:click={close}></div>
44 | 
45 | <div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
46 |   <slot name="header"></slot>
47 |   <slot></slot> 
48 | </div>
49 | 
50 | <style>
51 |   .modal-background {
52 |     position: fixed;
53 |     top: 0;
54 |     left: 0;
55 |     width: 100%;
56 |     height: 100%;
57 |     background: rgba(0,0,0,0.3);
58 |   }
59 | 
60 |   .modal {
61 |     position: absolute;
62 |     left: 50%;
63 |     top: 50%;
64 |     width: calc(100vw - 4em);
65 |     max-width: 32em;
66 |     max-height: calc(100vh - 4em);
67 |     overflow: auto;
68 |     transform: translate(-50%,-50%);
69 |     padding: 1em;
70 |     border-radius: 0.2em;
71 |     background: white;
72 |   }
73 | </style>


--------------------------------------------------------------------------------
/Ch12_Code_Practical_Svelte/styles/styles.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 |   box-sizing: border-box;
 12 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 13 | }
 14 | 
 15 | /** ADDED FOR DEMO **/
 16 | body {
 17 |   display: flex;
 18 |   flex-direction: column;
 19 |   min-height: 100vh;
 20 | }
 21 | 
 22 | section {
 23 |   max-width: 60rem;
 24 | }
 25 | 
 26 | #banner {
 27 |   margin: 20px auto;
 28 |   width: 50%;
 29 |   display: table;
 30 | }
 31 | 
 32 | div.modal>div {
 33 |   display: flex;
 34 |   justify-content: center;
 35 | }
 36 | 
 37 | div.modal>div:nth-child(1) {
 38 |   justify-content: flex-end;
 39 | }
 40 | 
 41 | div.modal>div>button {
 42 |   background-color: #ffffff;
 43 |   border: 1px solid #c4c4c4;
 44 |   font-weight: bold;
 45 |   font-size: 18px;
 46 | }
 47 | 
 48 | nav {
 49 |   background-color: #c59747;
 50 | }
 51 | 
 52 | nav ul {
 53 |   display: flex;
 54 |   align-items: start;
 55 |   list-style-type: none;
 56 |   margin: 0;
 57 |   width: 420px;
 58 |   margin-left: auto;
 59 |   margin-right: auto;
 60 | }
 61 | nav ul li {
 62 |   padding: 6px 0;
 63 | }
 64 | 
 65 | nav ul li a {
 66 |   position: relative;
 67 |   display: block;
 68 |   text-decoration: none;
 69 |   transition: 0.5s;
 70 |   padding: 5px 15px;
 71 |   font-weight: bold;
 72 |   color: #552200;  
 73 | }
 74 | 
 75 | nav ul li a::after {
 76 |   position: absolute;
 77 |   content: "";
 78 |   width: 100%;
 79 |   height: 3px;
 80 |   top: 100%;
 81 |   left: 0;
 82 |   background: #552200;
 83 |   transition: transform 0.5s;
 84 |   transform: scaleX(0);
 85 |   transform-origin: right;
 86 | }
 87 | 
 88 | nav ul li a:hover {
 89 |   color: #000000;
 90 | }
 91 | 
 92 | nav ul li a:hover::after {
 93 |   transform: scaleX(1);
 94 |   transform-origin: left;
 95 | }
 96 | 
 97 | /** FROM APP.SVELTE **/
 98 | main {
 99 |   display: flex;
100 |   margin-left: auto;
101 |   margin-right: auto;
102 |   padding: 20px;
103 |   max-width: 1040px;
104 | }


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/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 css from 'rollup-plugin-css-only';
 7 | 
 8 | const production = !process.env.ROLLUP_WATCH;
 9 | 
10 | function serve() {
11 | 	let server;
12 | 
13 | 	function toExit() {
14 | 		if (server) server.kill(0);
15 | 	}
16 | 
17 | 	return {
18 | 		writeBundle() {
19 | 			if (server) return;
20 | 			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
21 | 				stdio: ['ignore', 'inherit', 'inherit'],
22 | 				shell: true
23 | 			});
24 | 
25 | 			process.on('SIGTERM', toExit);
26 | 			process.on('exit', toExit);
27 | 		}
28 | 	};
29 | }
30 | 
31 | export default {
32 | 	input: 'src/main.js',
33 | 	output: {
34 | 		sourcemap: true,
35 | 		format: 'iife',
36 | 		name: 'app',
37 | 		file: 'public/build/bundle.js'
38 | 	},
39 | 	plugins: [
40 | 		svelte({
41 | 			compilerOptions: {
42 | 				// enable run-time checks when not in production
43 | 				dev: !production
44 | 			}
45 | 		}),
46 | 		// we'll extract any component CSS out into
47 | 		// a separate file - better for performance
48 | 		css({ output: 'bundle.css' }),
49 | 
50 | 		// If you have external dependencies installed from
51 | 		// npm, you'll most likely need these plugins. In
52 | 		// some cases you'll need additional configuration -
53 | 		// consult the documentation for details:
54 | 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
55 | 		resolve({
56 | 			browser: true,
57 | 			dedupe: ['svelte']
58 | 		}),
59 | 		commonjs(),
60 | 
61 | 		// In dev mode, call `npm run start` once
62 | 		// the bundle has been generated
63 | 		!production && serve(),
64 | 
65 | 		// Watch the `public` directory and refresh the
66 | 		// browser on changes when not in production
67 | 		!production && livereload('public'),
68 | 
69 | 		// If we're building for production (npm run build
70 | 		// instead of npm run dev), minify
71 | 		production && terser()
72 | 	],
73 | 	watch: {
74 | 		clearScreen: false
75 | 	}
76 | };
77 | 


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/website tests/HomePage.spec.js:
--------------------------------------------------------------------------------
 1 | import Disclaimer from '../../components/Disclaimer.svelte'
 2 | import Header from '../../components/Header.svelte'
 3 | import Homepage from '../../pages/Home.svelte'
 4 | import Footer from '../../components/Footer.svelte'
 5 | 
 6 | import { setContext } from "svelte"
 7 | import { mount } from 'cypress-svelte-unit-test'
 8 | 
 9 | describe('Run tests for Homepage', () => {
10 |   it('shows disclaimer at top of site', () => {
11 |     mount(Disclaimer, {
12 |       props: {
13 |         name: 'World',
14 |       },
15 |     })
16 | 
17 |     cy.contains('span', 'This is a test site only')
18 |   })
19 |   
20 |   it('header contains correct title', () => {
21 |     cy.reload()
22 |     cy.visit('http://localhost:5000')
23 |     cy.get('div.modal > div:nth-child(1) > button').click()
24 | 
25 |     cy.get('header > div > span:nth-child(2)').should('have.length', 1)
26 |     cy.contains('header > div > span:nth-child(2)', 'Small Coffee Company')
27 |   })
28 |   
29 |   it('homepage should show 3 new arrivals', () => {
30 |     mount(Homepage, {
31 |       props: {
32 |         title: 'New Arrivals',
33 |       },
34 |     })
35 |     
36 |     cy.get('button').click()
37 |     cy.get('#newarrivals img').should('have.length', 3)
38 |     cy.get('span.welcome').contains('New Arrivals')
39 |   })
40 |   
41 |   it('footer should have 3 social media icons', () => {
42 |     mount(Footer, {
43 |       props: {
44 |         name: 'World',
45 |       },
46 |     })
47 |   
48 |     let reference = 'footer > div:nth-child(2) > span > a'
49 | 
50 |     cy.get(reference).should('have.length', 3)
51 |     cy.get(reference + ':nth-child(1)').should('have.attr', 'href').and('include', 'https://facebook.com/smallcoffeecompany') // Facebook
52 |     cy.get(reference + ':nth-child(2)').should('have.attr', 'href').and('include', 'https://instagram.com/smallcoffeecompany') // Instagram
53 |     cy.get(reference + ':nth-child(3)').should('have.attr', 'href').and('include', 'https://twitter.com/smallcoffeecompany') // Twitter
54 |   })
55 |   
56 |   it('copyright exists and has correct text', () => {
57 |     mount(Footer, {
58 |       props: {
59 |         name: 'World',
60 |       },
61 |     })
62 | 
63 |     cy.get('footer > div > span').should.exist
64 |     cy.get('footer > div > span').contains('© Small Coffee Company 2021')
65 |   })
66 | })
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/Ch3_Code_Practical_Svelte/adding derived stores/stores.js - updated version.txt:
--------------------------------------------------------------------------------
 1 | import { readable, writable, derived } from "svelte/store";
 2 | 
 3 | let products = readable([{
 4 |     id: 1,
 5 |     name: "Italian House Blend",
 6 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
 7 |     image: "/images/1.png",
 8 |     large_image: "/images/1_large.png",
 9 |     price: 18,
10 |     quantity: 1
11 |   },
12 |   {
13 |     id: 2,
14 |     name: "Cuban Altura Lavado",
15 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
16 |     image: "/images/2.png",
17 |     large_image: "/images/2_large.png",
18 |     price: 18,
19 |     quantity: 1
20 |   },
21 |   {
22 |     id: 3,
23 |     name: "Indian Monsoon",
24 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
25 |     image: "/images/3.png",
26 |     large_image: "/images/3_large.png",
27 |     price: 18,
28 |     quantity: 1
29 |   },
30 |   {
31 |     id: 4,
32 |     name: "Robusta Uganda",
33 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
34 |     image: "/images/4.png",
35 |     large_image: "/images/4_large.png",
36 |     price: 18,
37 |     quantity: 1
38 |   },
39 |   {
40 |     id: 5,
41 |     name: "Yemen Matari",
42 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
43 |     image: "/images/5.png",
44 |     large_image: "/images/5_large.png",
45 |     price: 18,
46 |     quantity: 1
47 |   },
48 |   {
49 |     id: 6,
50 |     name: "Salvador Pacamara",
51 |     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
52 |     image: "/images/6.png",
53 |     large_image: "/images/6_large.png",
54 |     price: 18,
55 |     quantity: 1
56 |   }
57 | ]);
58 | 
59 | let cart = writable([])
60 | let totalprice = derived(
61 |   cart,
62 |   ($cart) => {
63 |     let price = 0
64 |     $cart.forEach(e => price = price + e.price)
65 |     return price
66 |   }
67 | );
68 | 
69 | 
70 | export { cart, products, totalprice }


--------------------------------------------------------------------------------
/Ch8_Code_Practical_Svelte/website tests/Shop.spec.js:
--------------------------------------------------------------------------------
 1 | describe('Products gallery page should display items', () => {
 2 |   it('product gallery displays six items', () => {
 3 |     cy.visit("http://localhost:5000/products")
 4 |     cy.get('main > div.product-list > div').should('have.length', 6)
 5 |   });
 6 | 
 7 |   // product 1
 8 |   it('product 1 should have the right details', () => {
 9 |     cy.get('div.product-list > div:nth-child(1) > h4').contains('Italian House Blend')  // Description
10 |     cy.get('div.product-list > div:nth-child(1) > p').contains('$18')  // Price
11 |     cy.get('div.product-list > div:nth-child(1) > div.image').should('have.css','background-image', 'url("http://localhost:5000/images/1.png")' )  // Image
12 |     cy.get('div.product-list > div:nth-child(1) > div.cta > button').contains('Add to cart')  // Add to cart button text
13 |     cy.get('div.product-list > div:nth-child(1) > h4 > a').should('have.attr', 'href').and('include', '/product/1') // Italian House Blend
14 |   })  
15 | });
16 | 
17 | describe('Product page should display correct information', () => {
18 |   it('product page should have the right details', () => {
19 |     cy.visit("http://localhost:5000/products")
20 |     cy.get('div.product-list > div:nth-child(1) > h4 > a').click()
21 |     cy.wait(5000)      
22 | 
23 |     cy.get('#productdetails > div:nth-child(2) > p:nth-child(1)').contains("Italian House Blend") // SKU
24 |     cy.get('#productdetails > div:nth-child(2) > p:nth-child(2)').contains("SKU: 1") // Product name
25 |     cy.get('#productdetails > div:nth-child(2) > h2').contains("$18") // Price
26 |     cy.get('#productdetails > div:nth-child(2) > p:nth-child(3)').contains("Lorem ipsum dolor sit amet") // Description 
27 |   });
28 | });
29 | 
30 | describe("Clicking add to cart adds correct number of items to basket", () => {
31 |   it('Cart should display X items when requested', () => {
32 |     cy.visit("http://localhost:5000/products")
33 |     cy.get('div.product-list > div:nth-child(1) > h4 > a').click()
34 |     cy.wait(5000)
35 |     
36 |     cy.get("button").click()
37 |     cy.wait(5000)
38 |     cy.get(".basketcount").contains("1 items: $18")
39 | 
40 | 
41 |     cy.get("body > main > section > a").click()
42 |     cy.wait(2000)
43 |     cy.get("div.basketcount").contains("1 items: $18")
44 |   });
45 | })
46 | 
47 | describe('clicking add to cart on two products shows correct number in basket', () => {
48 |   it('adding to basket shows 2 items in basket', () => {
49 |     cy.visit("http://localhost:5000/products")
50 |     
51 |     cy.get("div.product-list > div:nth-child(1) > div.cta > button").click()
52 |     cy.get("div.product-list > div:nth-child(2) > div.cta > button").click()
53 |     cy.get("div.cart-list > div.cart-item").should('have.length', 2);
54 |   })
55 | }) 


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/image carousel/Carousel.svelte.txt:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   let currId = 0;
  3 |   const images = [
  4 |     '/images/carousel1.jpg',
  5 |     '/images/carousel2.jpg',
  6 |     '/images/carousel3.jpg',
  7 |     '/images/carousel4.jpg',
  8 |     '/images/carousel5.jpg',
  9 |   ];
 10 |   
 11 |   const imgLen = images.length;
 12 | 
 13 |   let positionLeft = 0;
 14 |   const moveSlider = () => {
 15 |     positionLeft = currId * 100;
 16 |   };
 17 |   const next = () => {
 18 |     currId = currId === imgLen - 1 ? 0 : currId + 1;
 19 |     moveSlider();
 20 |   };
 21 |   
 22 |   const prev = () => {
 23 |     currId = currId === 0 ? imgLen - 1 : currId - 1;
 24 |     moveSlider();
 25 |   };
 26 |   
 27 |   const getIndex = (index) => {
 28 |     currId = index;
 29 |     moveSlider();
 30 |   };
 31 | 
 32 |   let interval = setInterval(next, 2000);
 33 |   const autoPlay = () => {
 34 |     interval = setInterval(next, 2000)
 35 |   }
 36 | 
 37 |   const stopPlay = () => {
 38 |     clearInterval(interval)
 39 |   }
 40 | </script>
 41 | 
 42 | <style>
 43 |   main {
 44 |     padding: 15px;
 45 |     text-align: center;
 46 |   }
 47 |   .container {
 48 |     position: relative;
 49 |     width: 100%;
 50 |     max-width: 640px;
 51 |     margin: 0 auto;
 52 |     overflow: hidden;
 53 |   }
 54 |   .slider {
 55 |     display: flex;
 56 |     position: relative;
 57 |     transition: left 0.5s;
 58 |   }
 59 |   .slider img {
 60 |     width: 100%;
 61 |     height: auto;
 62 |     object-fit: cover;
 63 |     flex-shrink: 0;
 64 |   }
 65 |   .arrow {
 66 |     display: flex;
 67 |     justify-content: space-between;
 68 |     align-items: center;
 69 |     position: absolute;
 70 |     width: 100%;
 71 |     height: 100%;
 72 |     top: 0;
 73 |   }
 74 |   .arrow button {
 75 |     margin-bottom: 0;
 76 |     padding: 12px;
 77 |     border: 0;
 78 |     background-color: rgba(255, 255, 255, 0.7);
 79 |     cursor: pointer;
 80 |   }
 81 |   .papagination {
 82 |     position: absolute;
 83 |     bottom: 0;
 84 |     padding-bottom: 8px;
 85 |     width: 100%;
 86 |     background-color: #000000;
 87 |   }
 88 |   .papagination button {
 89 |     margin: 0 4px;
 90 |     width: 14px;
 91 |     height: 14px;
 92 |     border: 0;
 93 |     border-radius: 50%;
 94 |     background-color: #c59747;
 95 |     text-align: center;
 96 |     cursor: pointer;
 97 |   }
 98 |   .papagination .active {
 99 |     background-color: #c2c2c2;
100 |   }
101 | </style>
102 | 
103 | <main>
104 |   <div on:mouseover={stopPlay} on:mouseleave={autoPlay} class="container">
105 |     <div class="slider" style="left: -{positionLeft}%;">
106 |       {#each images as img}
107 |         <img src={img} alt="" />
108 |       {/each}
109 |     </div>
110 |     <div class="arrow">
111 |       <button on:click={prev} class="prev">Prev</button>
112 |       <button on:click={next} class="next">Next</button>
113 |     </div>
114 |     <div class="papagination">
115 |       {#each images as _, i}
116 |         <button
117 |           class={currId === i ? 'active' : ''}
118 |           on:click={() => getIndex(i)}
119 |         />
120 |       {/each}
121 |     </div>
122 |   </div>
123 | </main>
124 | 


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/learning a language/App.svelte.txt:
--------------------------------------------------------------------------------
  1 | <script>
  2 |  import { quintOut } from 'svelte/easing';
  3 |  import { crossfade } from 'svelte/transition';
  4 |  import { flip } from 'svelte/animate';
  5 | 
  6 |   const [send, receive] = crossfade({
  7 |     fallback(node, params) {
  8 |     const style = getComputedStyle(node);
  9 | 	const transform = style.transform === 'none' ? '' : style.transform;
 10 | 
 11 |     return {
 12 |       duration: 600,
 13 |       easing: quintOut,
 14 |       css: t => `
 15 |         transform: ${transform} scale(${t});
 16 |         opacity: ${t}
 17 |       `
 18 |     };
 19 |   }
 20 |   });
 21 | 
 22 | 	const words = [
 23 |     { selected: false, value: "Ik" },
 24 |     { selected: false, value: "graag" },
 25 |     { selected: false, value: "Svelte" },
 26 |     { selected: false, value: "gebruik" },
 27 |     { selected: false, value: "echt" },		
 28 |     { selected: false, value: "is" },
 29 |     { selected: false, value: "het" },
 30 |     { selected: false, value: "graaf" },		
 31 |   ]
 32 |   let selected = []
 33 | </script>
 34 | 
 35 | <div class="words">
 36 |   <div class="destination">
 37 |     {#each selected as word (word.value)}
 38 |     <span 
 39 |       animate:flip 
 40 |       in:receive={{ key: word.value }}
 41 |         out:send={{ key: word.value }}
 42 |         class="word" 
 43 | 						on:click={() => {
 44 | 							word.selected = false;
 45 | 							selected = selected.filter(w => w.value !== word.value)
 46 | 						}}>{word.value}</span>
 47 | 		{/each}
 48 | 	</div>
 49 | 	<div class="origin">
 50 | 		{#each words.filter(w => !w.selected) as word (word.value)}
 51 | 			<span 
 52 | 						animate:flip 
 53 | 						in:receive={{ key: word.value }}
 54 | 						out:send={{ key: word.value }}
 55 | 						class="word" 
 56 | 						on:click={() => {
 57 | 							word.selected = true;
 58 | 							selected = [...selected, word];
 59 | 						}}>{word.value}</span>
 60 | 		{/each}
 61 | 	</div>
 62 | </div>
 63 | 
 64 | <style>
 65 | 	:global(body) {
 66 | 		display: flex;
 67 | 		flex-direction: column;
 68 |     flex: 0 0 100%;
 69 |   	margin: 0;
 70 |   	padding: 3rem 1rem;
 71 |   	background: #ffffff;
 72 |   	align-items: center;
 73 |     justify-content: flex-start;
 74 | 		color: #000000;
 75 | 	}
 76 | 	
 77 | 	.words {
 78 | 		display: flex;
 79 | 		flex-direction: column;
 80 | 		padding: 2rem;
 81 | 		border: 1px solid #596265;
 82 | 		border-radius: 1rem;
 83 | 		width: 350px;
 84 | 		max-width: 100%;
 85 | 	}
 86 | 
 87 | 	.destination {
 88 | 		display: flex;
 89 | 		flex-flow: row wrap;
 90 | 		align-items: flex-start;
 91 | 		margin: 0 0 4rem;
 92 | 		height: 5.5rem;
 93 | 		background: repeating-linear-gradient(to bottom, transparent 0, transparent 2.625rem, #596265 2.625rem, #596265 2.6875rem);
 94 | 	}
 95 | 	
 96 | 	.destination .word {
 97 | 		margin: 0 0.125rem 0.25rem;
 98 | 	}
 99 | 
100 | 	.origin {
101 | 		display: flex;
102 | 		flex-flow: row wrap;
103 | 		justify-content: center;
104 | 		align-items: flex-start;
105 | 		max-width: 275px;
106 | 		margin: 0 auto;
107 | 		row-gap: 5px;
108 |     column-gap: 5px;
109 | 	}
110 | 
111 | 	.word {
112 | 		background: #c0c0c0;
113 | 		border: 1px solid #596265;
114 | 		padding: 0.5rem;
115 | 		border-radius: 0.5rem;
116 | 		cursor: pointer;
117 | 		font-weight: 700;
118 | 	}
119 | </style>
120 | 


--------------------------------------------------------------------------------
/Ch11_Code_Practical_Svelte/custom easing using js/demo custom easing.txt:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { crossfade } from 'svelte/transition';
  3 | 
  4 |   function expoInOut(t) {
  5 | 	return t === 0.0 || t === 1.0
  6 | 		? t
  7 | 		: t < 0.5
  8 | 			? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
  9 | 			: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
 10 |   }
 11 | 	
 12 | 	const [send, receive] = crossfade({
 13 | 		duration: d => Math.sqrt(d * 200),
 14 | 
 15 | 		fallback(node, params) {
 16 | 			const style = getComputedStyle(node);
 17 | 			const transform = style.transform === 'none' ? '' : style.transform;
 18 | 
 19 | 			return {
 20 | 				duration: 600,
 21 | 				easing: expoInOut,
 22 | 				css: t => `
 23 | 					transform: ${transform} scale(${t});
 24 | 					opacity: ${t}
 25 | 				`
 26 | 			};
 27 | 		}
 28 | 	});
 29 | 
 30 | 	let uid = 1;
 31 | 
 32 | 	let todos = [
 33 | 		{ id: uid++, done: false, description: 'write some docs' },
 34 | 		{ id: uid++, done: false, description: 'start writing blog post' },
 35 | 		{ id: uid++, done: true,  description: 'buy some milk' },
 36 | 		{ id: uid++, done: false, description: 'mow the lawn' },
 37 | 		{ id: uid++, done: false, description: 'feed the turtle' },
 38 | 		{ id: uid++, done: false, description: 'fix some bugs' },
 39 | 	];
 40 | 
 41 | 	function add(input) {
 42 | 		const todo = {
 43 | 			id: uid++,
 44 | 			done: false,
 45 | 			description: input.value
 46 | 		};
 47 | 
 48 | 		todos = [todo, ...todos];
 49 | 		input.value = '';
 50 | 	}
 51 | 
 52 | 	function remove(todo) {
 53 | 		todos = todos.filter(t => t !== todo);
 54 | 	}
 55 | </script>
 56 | 
 57 | <div class='board'>
 58 | 	<div class='left'>
 59 | 		<h2>To do</h2>
 60 | 		{#each todos.filter(t => !t.done) as todo (todo.id)}
 61 | 			<label
 62 | 				in:receive="{{key: todo.id}}"
 63 | 				out:send="{{key: todo.id}}"
 64 | 			>
 65 | 				{todo.description}
 66 | 				<button on:click="{() => remove(todo)}">remove</button>
 67 | 			</label>
 68 | 		{/each}
 69 | 	</div>
 70 | </div>
 71 | 
 72 | <style>
 73 | 	.board {
 74 | 		display: grid;
 75 | 		grid-template-columns: 1fr 1fr;
 76 | 		grid-gap: 1em;
 77 | 		max-width: 36em;
 78 | 		margin: 0 auto;
 79 | 	}
 80 | 
 81 | 	h2 {
 82 | 		font-size: 2em;
 83 | 		font-weight: 200;
 84 | 		user-select: none;
 85 | 		margin: 0 0 0.5em 0;
 86 | 	}
 87 | 
 88 | 	label {
 89 | 		position: relative;
 90 | 		line-height: 1.2;
 91 | 		padding: 0.5em 2.5em 0.5em 2em;
 92 | 		margin: 0 0 0.5em 0;
 93 | 		border-radius: 2px;
 94 | 		user-select: none;
 95 | 		border: 1px solid hsl(240, 8%, 70%);
 96 | 		background-color:hsl(240, 8%, 93%);
 97 | 		color: #333;
 98 | 	}
 99 | 
100 | 	button {
101 | 		position: absolute;
102 | 		top: 0;
103 | 		right: 0.2em;
104 | 		width: 2em;
105 | 		height: 100%;
106 | 		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
107 | 		background-size: 1.4em 1.4em;
108 | 		border: none;
109 | 		opacity: 0;
110 | 		transition: opacity 0.2s;
111 | 		text-indent: -9999px;
112 | 		cursor: pointer;
113 | 	}
114 | 
115 | 	label:hover button {
116 | 		opacity: 1;
117 | 	}
118 | </style>
119 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/README.md:
--------------------------------------------------------------------------------
  1 | *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 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
 39 | 
 40 | ## Building and running in production mode
 41 | 
 42 | To create an optimised version of the app:
 43 | 
 44 | ```bash
 45 | npm run build
 46 | ```
 47 | 
 48 | 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).
 49 | 
 50 | 
 51 | ## Single-page app mode
 52 | 
 53 | 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.
 54 | 
 55 | 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:
 56 | 
 57 | ```js
 58 | "start": "sirv public --single"
 59 | ```
 60 | 
 61 | ## Using TypeScript
 62 | 
 63 | This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
 64 | 
 65 | ```bash
 66 | node scripts/setupTypeScript.js
 67 | ```
 68 | 
 69 | Or remove the script via:
 70 | 
 71 | ```bash
 72 | rm scripts/setupTypeScript.js
 73 | ```
 74 | 
 75 | ## Deploying to the web
 76 | 
 77 | ### With [Vercel](https://vercel.com)
 78 | 
 79 | Install `vercel` if you haven't already:
 80 | 
 81 | ```bash
 82 | npm install -g vercel
 83 | ```
 84 | 
 85 | Then, from within your project folder:
 86 | 
 87 | ```bash
 88 | cd public
 89 | vercel deploy --name my-project
 90 | ```
 91 | 
 92 | ### With [surge](https://surge.sh/)
 93 | 
 94 | Install `surge` if you haven't already:
 95 | 
 96 | ```bash
 97 | npm install -g surge
 98 | ```
 99 | 
100 | Then, from within your project folder:
101 | 
102 | ```bash
103 | npm run build
104 | surge public my-project.surge.sh
105 | ```
106 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/scripts/setupTypeScript.js:
--------------------------------------------------------------------------------
  1 | // @ts-check
  2 | 
  3 | /** This script modifies the project to support TS code in .svelte files like:
  4 | 
  5 |   <script lang="ts">
  6 |   	export let name: string;
  7 |   </script>
  8 |  
  9 |   As well as validating the code for CI.
 10 |   */
 11 | 
 12 | /**  To work on this script:
 13 |   rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
 14 | */
 15 | 
 16 | const fs = require("fs")
 17 | const path = require("path")
 18 | const { argv } = require("process")
 19 | 
 20 | const projectRoot = argv[2] || path.join(__dirname, "..")
 21 | 
 22 | // Add deps to pkg.json
 23 | const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
 24 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
 25 |   "svelte-check": "^1.0.0",
 26 |   "svelte-preprocess": "^4.0.0",
 27 |   "@rollup/plugin-typescript": "^6.0.0",
 28 |   "typescript": "^3.9.3",
 29 |   "tslib": "^2.0.0",
 30 |   "@tsconfig/svelte": "^1.0.0"
 31 | })
 32 | 
 33 | // Add script for checking
 34 | packageJSON.scripts = Object.assign(packageJSON.scripts, {
 35 |   "validate": "svelte-check"
 36 | })
 37 | 
 38 | // Write the package JSON
 39 | fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
 40 | 
 41 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
 42 | const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
 43 | const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
 44 | fs.renameSync(beforeMainJSPath, afterMainTSPath)
 45 | 
 46 | // Switch the app.svelte file to use TS
 47 | const appSveltePath = path.join(projectRoot, "src", "App.svelte")
 48 | let appFile = fs.readFileSync(appSveltePath, "utf8")
 49 | appFile = appFile.replace("<script>", '<script lang="ts">')
 50 | appFile = appFile.replace("export let name;", 'export let name: string;')
 51 | fs.writeFileSync(appSveltePath, appFile)
 52 | 
 53 | // Edit rollup config
 54 | const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
 55 | let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
 56 | 
 57 | // Edit imports
 58 | rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
 59 | import sveltePreprocess from 'svelte-preprocess';
 60 | import typescript from '@rollup/plugin-typescript';`)
 61 | 
 62 | // Replace name of entry point
 63 | rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
 64 | 
 65 | // Add preprocessor
 66 | rollupConfig = rollupConfig.replace(
 67 |   'compilerOptions:',
 68 |   'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
 69 | );
 70 | 
 71 | // Add TypeScript
 72 | rollupConfig = rollupConfig.replace(
 73 |   'commonjs(),',
 74 |   'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
 75 | );
 76 | fs.writeFileSync(rollupConfigPath, rollupConfig)
 77 | 
 78 | // Add TSConfig
 79 | const tsconfig = `{
 80 |   "extends": "@tsconfig/svelte/tsconfig.json",
 81 | 
 82 |   "include": ["src/**/*"],
 83 |   "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
 84 | }`
 85 | const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
 86 | fs.writeFileSync(tsconfigPath, tsconfig)
 87 | 
 88 | // Delete this script, but not during testing
 89 | if (!argv[2]) {
 90 |   // Remove the script
 91 |   fs.unlinkSync(path.join(__filename))
 92 | 
 93 |   // Check for Mac's DS_store file, and if it's the only one left remove it
 94 |   const remainingFiles = fs.readdirSync(path.join(__dirname))
 95 |   if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
 96 |     fs.unlinkSync(path.join(__dirname, '.DS_store'))
 97 |   }
 98 | 
 99 |   // Check if the scripts folder is empty
100 |   if (fs.readdirSync(path.join(__dirname)).length === 0) {
101 |     // Remove the scripts folder
102 |     fs.rmdirSync(path.join(__dirname))
103 |   }
104 | }
105 | 
106 | // Adds the extension recommendation
107 | fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
108 | fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
109 |   "recommendations": ["svelte.svelte-vscode"]
110 | }
111 | `)
112 | 
113 | console.log("Converted to TypeScript.")
114 | 
115 | if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
116 |   console.log("\nYou will need to re-run your dependency manager to get started.")
117 | }
118 | 


--------------------------------------------------------------------------------
/Ch2_Code_Practical_Svelte/images/logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0"?>
  2 | <svg
  3 |     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  4 |     xmlns="http://www.w3.org/2000/svg"
  5 |     xmlns:cc="http://creativecommons.org/ns#"
  6 |     xmlns:xlink="http://www.w3.org/1999/xlink"
  7 |     xmlns:dc="http://purl.org/dc/elements/1.1/"
  8 |     xmlns:svg="http://www.w3.org/2000/svg"
  9 |     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |     xmlns:ns1="http://sozi.baierouge.fr"
 12 |     id="Layer_1"
 13 |     xml:space="preserve"
 14 |     overflow="visible"
 15 |     viewBox="0 0 532.268 595.532"
 16 |     version="1.1"
 17 |     enable-background="new 0 0 532.268 595.532"
 18 |   ><defs
 19 |       id="defs99"
 20 |     >
 21 | <linearGradient
 22 |         id="linearGradient3185"
 23 |         y2="227"
 24 |         gradientUnits="userSpaceOnUse"
 25 |         x2="283.92"
 26 |         y1="226.3"
 27 |         x1="127.27"
 28 |       ><stop
 29 |           id="stop3181"
 30 |           stop-color="#803300"
 31 |           offset="0"
 32 |       /><stop
 33 |           id="stop3183"
 34 |           stop-color="#803300"
 35 |           stop-opacity="0"
 36 |           offset="1"
 37 |       /></linearGradient
 38 |     ></defs
 39 |   >
 40 | <path
 41 |       id="path5"
 42 |       d="m416.68 48.167c12.696-0.03 19.416 5.917 29 9 5.615 5.572 11.137 13.029 12 24 1.383 17.571-5.835 32.818-13 43-1.723 2.448-2.632 5.335-4 7-22.226 27.033-61.861 35.368-97 38 25.053-10.3 55.029-25.979 72-51 6.104-9 15.781-26.229 13-45-1.53-10.364-8.19-15.167-12-25.003z"
 43 |       fill-rule="evenodd"
 44 |       fill="#fff"
 45 |   /><path
 46 |       id="path7"
 47 |       d="m321.68 99.167c-19.546 9.167-42.515 10.209-61 18-11.59 4.885-23.982 11.51-34 19-9.478 7.087-17.819 19.201-23 33-2.75 7.322-4.07 14.068-5 25-37.25 5.083-82.069 2.598-102 25-1.56 16.893 5.132 25.535 12 34 6.776 18.929 11.748 38.409 18 57 6.283 18.683 15.095 35.832 21 54-24.273 1.957-58.063 5.106-82 15-12.59 5.204-22.991 10.731-23 24-33.336-93.773 3.144-189.14 54-240 19.662-19.662 41.975-35.606 69-48 1.157-0.531 3.252-1.209 5-2 4.163-1.882 11.442-6.003 18-8 29.332-8.929 69.023-18.434 110-12 7.54 1.18 14.01 4.739 23 5.997zm-125 10.003c-22.019 6.889-40.098 16.055-57 27-6.624 4.29-13.149 10.037-18 14-1.999 1.633-5.068 2.357-7 4-6.481 5.511-12.105 12.913-18 19-6.367 6.574-14.121 12.828-16 22 41.778 2.778 73.242-4.758 109-8 3.684-20.649 12.757-35.909 23-50 14.798-11.552 30.972-23.984 50-31 4.734-1.746 12.27 0.039 13-8-31.24-1.437-56.06 3.82-79 11zm-123 91c-7.042 16.292-17.772 28.895-22 48 15.735-0.402 30.327 0.34 45 1-0.399-8.091-7.83-9.992-9-17-2.313-13.85 9.463-22.677 17-30-11.4 0.4-18.726-3.27-30.997-2zm-25 56c-3.54 10.794-7.075 21.591-8 35 22.74 0.259 46.754-0.754 68 1-2.151-12.849-3.554-26.446-9-36h-50.997zm-11 45c0.639 9.973-1.729 16.938-1 27 27.18-1.994 59.666-1.136 87 0-3.069-9.932-7.575-18.425-11-28-29.452 0.99-52.53-0.34-74.997 1zm-1 37c0.037 10.856 3.214 14.549 3 24 32.212-0.455 67.048 1.715 95-3-0.202-9.798-6.928-13.072-8-22-26.08 2.13-69.487-0.4-89.997 1zm7 42c6.152-1.514 15.121-0.212 17-6h-19c-0.792 3.45 1.111 4.22 2 6z"
 48 |       fill-rule="evenodd"
 49 |       fill="#fff"
 50 |   /><path
 51 |       id="path9"
 52 |       d="m275.68 98.167c-0.73 8.039-8.266 6.254-13 8-19.028 7.016-35.202 19.448-50 31-10.243 14.091-19.316 29.351-23 50-35.758 3.242-67.222 10.778-109 8 1.879-9.172 9.633-15.426 16-22 5.895-6.087 11.519-13.489 18-19 1.932-1.643 5.001-2.367 7-4 4.851-3.963 11.376-9.71 18-14 16.902-10.945 34.981-20.111 57-27 22.94-7.18 47.76-12.437 79-11.003z"
 53 |       fill-rule="evenodd"
 54 |       fill="#520"
 55 |   /><path
 56 |       id="path11"
 57 |       d="m452.68 195.17c-53.594-0.586-100.7 1.05-152-1 15.548-7.199 35.729-5.521 56-8 19.98-2.443 38.953-6.58 55-13 5.339-2.136 10.229-5.619 16-7 4.741-1.135 11.654 8.914 15 13 4.56 5.56 8.35 10.25 10 16z"
 58 |       fill-rule="evenodd"
 59 |       fill="#520"
 60 |   /><path
 61 |       id="path13"
 62 |       d="m104.68 202.17c-7.537 7.323-19.313 16.15-17 30 1.17 7.008 8.601 8.909 9 17-14.673-0.66-29.265-1.402-45-1 4.228-19.105 14.958-31.708 22-48 12.274-1.27 19.6 2.4 31 2z"
 63 |       fill-rule="evenodd"
 64 |       fill="#520"
 65 |   /><path
 66 |       id="path15"
 67 |       d="m333.68 200.17h124c9.24 14.426 18.048 29.286 24 47-28.301 1.948-70.173 1-105 1-11.534 0-22.811 1.112-29-7 4.212-11.969 3.053-16.514 0-28-3.65-5.35-12.01-5.99-14-13z"
 68 |       fill-rule="evenodd"
 69 |       fill="#520"
 70 |   /><path
 71 |       id="path17"
 72 |       d="m111.68 220.17h3c5.558 12.959 23.05 18.7 38 19-0.684 3.492-6.612 2.144-10 2-4.341-0.185-10.255-1.204-14-2-2.44-0.519-6.546-1.343-8-2-4.327-1.955-7.787-7.878-10-13-0.12-1.8 1.23-2.11 1-4z"
 73 |       fill-rule="evenodd"
 74 |   /><path
 75 |       id="path19"
 76 |       d="m119.68 238.17c41.47 18.647 113.69 14.555 165 12-21.717 7.417-56.625 6.904-90 7-11.391 0.033-24.049-2.007-37-4-16.67-2.57-35.4-1.69-38-15z"
 77 |       fill-rule="evenodd"
 78 |   /><path
 79 |       id="path21"
 80 |       d="m484.68 255.17c2.71 11.957 7.43 21.904 8 36-36.568-0.6-80.344 1.24-112-1-0.935-14.398-6.523-24.144-13-33-0.184-0.851 0.39-0.943 1-1 0.81-0.19 0.997-1.003 2-1 22.27 0.1 78.39 2.34 114 0z"
 81 |       fill-rule="evenodd"
 82 |       fill="#520"
 83 |   /><path
 84 |       id="path23"
 85 |       d="m99.683 256.17c5.446 9.554 6.849 23.151 9 36-21.246-1.754-45.26-0.741-68-1 0.925-13.409 4.46-24.206 8-35h51.003z"
 86 |       fill-rule="evenodd"
 87 |       fill="#520"
 88 |   /><path
 89 |       id="path25"
 90 |       d="m135.68 256.17c4.646-0.979 6.037 1.296 9 2 8.552 1.329 19.429 1.158 30 3 4.06 0.708 9.925 1.672 12 5-17.094-1.239-36.103-0.564-51-4v-6z"
 91 |       fill-rule="evenodd"
 92 |   /><path
 93 |       id="path27"
 94 |       d="m136.68 267.17c7.807 1.401 16.517 4.175 26 5 5.474 0.476 13.994-2.51 17 4-16.684-0.003-29.369 2.53-43-3v-6z"
 95 |       fill-rule="evenodd"
 96 |   /><path
 97 |       id="path29"
 98 |       d="m282.68 378.17c8.766-28.901 22.823-52.51 31-82 15.255-3.412 12.638-24.696 35-21 4.299 4.391 6.913 7.359 6 17-1.788 18.885-17.591 33.674-31 45-0.993 0.839-1.014 3.076-2 4-0.716 0.67-3.873 1.064-5 2-3.985 3.309-12.09 7.769-17 12-7.61 6.56-10.32 17.82-17 23zm50-59c1.166-1.329 0.855-3.356 2-5 1.544-2.217 4.897-3.394 6-5 2.787-4.06 7.938-16.362 5-20-1.742 0.075-3.11-0.223-4-1-15.714 9.639-30.014 25.961-31 47 5.04-3.78 15.36-8.43 22-16z"
 99 |       fill-rule="evenodd"
100 |   /><path
101 |       id="path31"
102 |       d="m139.68 280.17c10.429 0.653 20.478 2.074 31 3 4.887 0.43 11.832-0.853 14 4-14.635-1.365-35.096 3.096-45-3v-4z"
103 |       fill-rule="evenodd"
104 |   /><path
105 |       id="path33"
106 |       d="m310.68 335.17c0.986-21.039 15.286-37.361 31-47 0.89 0.777 2.258 1.075 4 1 2.938 3.638-2.213 15.94-5 20-1.103 1.606-4.456 2.783-6 5-1.145 1.644-0.834 3.671-2 5-6.64 7.57-16.96 12.22-22 16z"
107 |       fill-rule="evenodd"
108 |       fill="#fff"
109 |   /><path
110 |       id="path35"
111 |       d="m141.68 291.17c16.277 4.256 32.784 2.293 46 6-1.261 3.732-6.861 1.923-10 2-9.941 0.243-23.163-0.182-34 0-0.98-2.35-1.75-4.92-2-8z"
112 |       fill-rule="evenodd"
113 |   /><path
114 |       id="path37"
115 |       d="m112.68 300.17c3.425 9.575 7.931 18.068 11 28-27.334-1.136-59.82-1.994-87 0-0.729-10.062 1.639-17.027 1-27 22.47-1.34 45.548-0.01 75-1z"
116 |       fill-rule="evenodd"
117 |       fill="#520"
118 |   /><path
119 |       id="path39"
120 |       d="m495.68 300.17c-0.638 9.645 0.974 21.223 0 28-38.234-1.575-83.456-0.853-126-1 2.444-8.615 9.115-15.857 9-24 0.86-0.807 0.594-2.739 2-3h115z"
121 |       fill-rule="evenodd"
122 |       fill="#520"
123 |   /><path
124 |       id="path41"
125 |       d="m145.68 304.17c16.124 2.097 29.046 1.429 43 5-0.761 3.694-6.203 1.908-9 2-9.283 0.303-21.915-0.227-32 0 0.11-3.11-3.14-2.86-2-7z"
126 |       fill-rule="evenodd"
127 |   /><path
128 |       id="path43"
129 |       d="m149.68 316.17c13.364 2.524 23.89 1.916 37 4-2.208 4.647-10.686 2.968-17 3-6.772 0.034-13.478 0.265-18-1 1.07-3.74-2.48-2.85-2-6z"
130 |       fill-rule="evenodd"
131 |   /><path
132 |       id="path45"
133 |       d="m154.68 327.17c7.629 2.101 15.118 2.202 24 3 3.145 0.282 8.449-0.021 10 3-2.537 3.691-9.675 1.972-15 2-5.886 0.031-12.045-0.024-17 0 0.27-3.6-1.84-4.82-2-8z"
134 |       fill-rule="evenodd"
135 |   /><path
136 |       id="path47"
137 |       d="m126.68 337.17c1.072 8.928 7.798 12.202 8 22-27.952 4.715-62.788 2.545-95 3 0.214-9.451-2.963-13.144-3-24 20.513-1.4 63.92 1.13 90-1z"
138 |       fill-rule="evenodd"
139 |       fill="#520"
140 |   /><path
141 |       id="path49"
142 |       d="m495.68 338.17c0.777 8.777-1.467 14.533-1 23-47.022 2.607-99.039-2.393-157 1 1.05-5.13 6.64-7.878 10-11 4.305-3.999 8.25-8.193 12-13 49.04-1.04 89.37 2.71 136 0z"
143 |       fill-rule="evenodd"
144 |       fill="#520"
145 |   /><path
146 |       id="path51"
147 |       d="m159.68 340.17c0.851-0.184 0.943 0.39 1 1 4.446-0.556 9.616 1.585 15 2 7.072 0.545 15.87-2.514 19 3-8.907 2.004-23.2 3.132-33 1-0.16-2.84-1.83-4.17-2-7z"
148 |       fill-rule="evenodd"
149 |   /><path
150 |       id="path53"
151 |       d="m166.68 354.17c10.747 2.92 26.489 0.845 38 3-3.826 4.43-12.18 3.432-19 4-5.531 0.461-10.662 1.682-16 1-1.27-2.4-3.65-3.69-3-8z"
152 |       fill-rule="evenodd"
153 |   /><path
154 |       id="path55"
155 |       d="m170.68 367.17c10.801 2.198 26.444-0.444 37 2-2.889 4.485-11.055 3.441-17 4-6.758 0.635-13.233 1.746-19 0 0.73-3.06-1.72-2.95-1-6z"
156 |       fill-rule="evenodd"
157 |   /><path
158 |       id="path57"
159 |       d="m488.68 374.17c0.512 4.178-0.558 6.775-2 9-16.852-6.815-43.47-3.863-63-8 3.548-1.777 8.4-2.888 13-3 3.412-0.084 6.501 1.773 10 2 11.57 0.75 25.73-0.85 42 0z"
160 |       fill-rule="evenodd"
161 |   /><path
162 |       id="path59"
163 |       d="m410.68 373.17c-4.013 4.271-12.393 4.786-19 7-8.432 2.825-14.554 7.543-26 6-10.238-1.38-16.887-10.366-27-11 0.443-0.891 0.878-1.788 2-2 18.8 0.26 43.41 2.27 70 0z"
164 |       fill-rule="evenodd"
165 |       fill="#520"
166 |   /><path
167 |       id="path61"
168 |       d="m41.683 374.17h19c-1.879 5.788-10.848 4.486-17 6-0.889-1.78-2.792-2.55-2-6z"
169 |       fill-rule="evenodd"
170 |       fill="#520"
171 |   /><path
172 |       id="path63"
173 |       d="m173.68 378.17c8.442 1.224 21.906 1.612 33 3-5.605 6.032-25.448 6.461-33 2v-5z"
174 |       fill-rule="evenodd"
175 |   /><path
176 |       id="path65"
177 |       d="m345.68 393.17c-8.001 3.946-18.168 9.203-29 12-7.689 1.985-18.944 0.536-22 9 4.574 2.093 12.454 0.88 15 5-3.107 4.726-11.184 3.394-17 5-4.474 1.235-14.503 3.383-22 4 8.549-5.784 15.853-12.813 16-27 11.771-0.771 20.679 1.321 32 1 0.82-10.153-12.562-6.105-20-8-0.959-3.044 4.163-7.533 5-12 15.46 2.21 29.84 5.49 42 11z"
178 |       fill-rule="evenodd"
179 |       fill="#fff"
180 |   /><path
181 |       id="path67"
182 |       d="m491.68 397.17c-6.755 29.012-24.493 58.329-42 80-1.336 1.653-2.683 3.318-4 5-5.84 7.453-13.839 15.929-22 23-5.181 4.489-10.205 7.208-16 12-3 2.48-5.78 6.991-11 8-5.34 1.031-12.284-1.964-20-3-7.587-1.019-13.644-0.391-18-5 1.05-16.573 24.876-7.478 36-12-2.046-3.779-7.255-2.576-11-3-12.892-1.457-26.168-0.317-44-2-5.969-0.563-13.367-0.697-19-2-9.619-2.225-17.109-10.81-25-16-13.555-1.434-27.467-1.852-39-4-6.929-1.291-15.039-3.082-18-10 5.156-7.096 22.905-3.837 33-5 12.357-1.423 24.657-6.107 36-9 10.293-2.625 18.825-4 28-7 7.184-2.349 14.331-4.825 22-8 3.788-1.568 7.629-2.568 11-4 3.364-1.429 6.519-4.589 10-6 3.24-1.313 7.403-0.914 11-2 1.496-0.451 2.547-1.604 4-2 4.584-1.25 9.98-2.463 15-4 2.669-0.817 6.489-1.155 8-4-0.773-3.188-6.141-1.309-8-1-7.105 1.181-15.835 5.513-25 5-1.856-1.477-5.844-0.823-6-4-17.857 2.489-44.633 9.323-60 2 1.587-3.08 7.606-1.728 9-5 0.888-3.649-1.767-5.326 0-7 11.252-0.957 21.591-8.756 34-10 6.336-0.636 12.662 0.78 19 0 15.503-1.908 29.637-9.406 44-9 20.54 5.13 50.68 0.65 68 9zm-114 77c-9.766 0-20.788 0.917-26 2-11.982 2.49-26.318 3.036-37 5-3.593 0.66-9.368 0.24-11 4 33.44-2.347 63.871-2.577 93-8-4.18-5.01-12.81-3-19-3z"
183 |       fill-rule="evenodd"
184 |       fill="#fff"
185 |   /><path
186 |       id="path69"
187 |       d="m175.68 389.17c12.559 2.815 23.563 0.451 35 5-2.337 3.328-13.709 3.875-22 3-5.021-0.53-9.914-2.625-13-4v-4z"
188 |       fill-rule="evenodd"
189 |   /><path
190 |       id="path71"
191 |       d="m173.68 400.17c21.345 7.643 45.081 7.306 69 8-5.027 5.389-15.316 3.506-24 4-15.062 0.856-31.818 1.623-43-4-0.3-3.03-3.09-3.58-2-8z"
192 |       fill-rule="evenodd"
193 |   /><path
194 |       id="path73"
195 |       d="m46.683 415.17c8.021 7.979 17.42 14.58 29 19-0.398 4.269-8.38 0.953-12 2 0.459 5.54 5.266 6.734 6 12 12.464 0.072 25.637-3.394 39 0 7.136 1.812 13.045 8.344 20 11 7.081 2.705 15.706 2.649 24 4 22.731 3.702 47.221 7.293 75 6 5.707 6.434 9.506 10.566 20 14 9.876 3.231 23.49 3.622 37 5 5.805 0.592 10.029 4.704 16 9 6.476 4.66 11.09 8.979 22 10 5.151 0.482 11.087 0.476 17-1 5.925 5.604 5.049 13.905 11 19 7.733 6.621 20.094 5.593 33 8-42.26 27.646-100.74 37.104-153 29-5.837-0.905-8.523-1.51-15-3-16.9-3.888-33.266-9.146-48-16-13.912-6.473-25.237-12.105-38-21-35.275-24.59-66.55-64.52-82.997-107zm59.997 76c12.932 3.547 33.066-1.257 46-1 32.915 0.653 68.566 2.421 100 0-10.64 0.306-15.555-5.111-22-9-44.397 1.898-102.5 0.259-133 0 1.842 5.62 4.55 8.78 9 10zm194 41c-46.4 0-99.797 0.268-132-1-1.003-0.003-1.19 0.811-2 1-0.043 1.377 0.471 2.195 1 3 13.938 4.815 30.192 3 46 3 48.801 0 100.19 0.821 146-1-13.5-7.43-35.98-5-59-5z"
196 |       fill-rule="evenodd"
197 |       fill="#fff"
198 |   /><path
199 |       id="path75"
200 |       d="m396.68 477.17c-29.129 5.423-59.56 5.653-93 8 1.632-3.76 7.407-3.34 11-4 10.682-1.964 25.018-2.51 37-5 5.212-1.083 16.234-2 26-2 6.19 0 14.82-2.01 19 3z"
201 |       fill-rule="evenodd"
202 |   /><path
203 |       id="path77"
204 |       d="m97.683 481.17c30.501 0.259 88.603 1.898 133 0 6.445 3.889 11.36 9.306 22 9-31.434 2.421-67.085 0.653-100 0-12.934-0.257-33.068 4.547-46 1-4.45-1.22-7.158-4.38-8.997-10z"
205 |       fill-rule="evenodd"
206 |   /><path
207 |       id="path79"
208 |       d="m359.68 537.17c-45.807 1.821-97.199 1-146 1-15.808 0-32.062 1.815-46-3-0.529-0.805-1.043-1.623-1-3 0.81-0.189 0.997-1.003 2-1 32.203 1.268 85.6 1 132 1 23.02 0 45.5-2.43 59 5z"
209 |       fill-rule="evenodd"
210 |   /><path
211 |       id="path81"
212 |       d="m398.68 91.167c-6.855 2.218-10.893 8.703-16 13-14.742 12.401-31.916 23.486-56 28-23.132 10.791-55.706 10.025-78 21-5.122 2.521-8.688 7.448-14 9-4.743 8.291-14.686 16.613-17 30-1.6 9.253-2.005 21.685 0 30 0.829 3.438 4.741 7.038 2 10-9.661-0.028-14.649-15.043-16-24-2.025-13.431 4.782-25.575 7-35 2.604-11.065 12.124-20.44 20-28 4.761-4.569 10.928-5.85 19-10 9.304-4.784 16.599-9.332 29-13 24.785-7.332 55.97-13.673 78-25 12.455-6.404 20.395-16.431 30-25 5.045-9.207 12.931-23.274 10-43-1.141-7.675-5.431-15.059-10-19 2.896-0.864 7.46 2.041 10 4 3.462 2.67 13.798 14.989 15 20 4.603 19.182-5.326 36.639-9 51 6.848-5.153 9.22-14.78 11-25 11.437 11.887 3.137 43.77-6 58-4.492 6.997-12.103 14.452-19 21-10.556 10.021-28.606 18.596-44 25-19.922 8.288-43.498 10.11-63 18 10.418-13.002 29.153-17.152 45-26 2.745-1.532 7.097-4.792 11-7 9.491-5.369 18.729-10.774 28-17 13.47-9.05 28.34-22.08 33-41.003z"
213 |       fill-rule="evenodd"
214 |       fill="#fff"
215 |   /><path
216 |       id="path83"
217 |       d="m370.68 121.17c-9.855 13.202-37.384 26.832-57 36-11.964 5.591-24.613 12.746-36 19-11.67 7.996-20.669 18.664-31 28-0.582 6.085-5.5 13.88-1 19-2.149 2.083-4.105-4.511-6-6-0.706-6.764 0.141-12.729 2-18 6.864-19.465 25.134-32.615 45-41 27.69-11.69 60.74-20.79 84-37z"
218 |       fill-rule="evenodd"
219 |       fill="#fff"
220 |   /><path
221 |       id="path85"
222 |       d="m292.68 451.17c-7.289 8.83-27.435 7.511-45 9-26.687 2.262-55.505 2.123-83-2-15.459-2.318-31.112-6.371-44-12 4.668-2.433 10.772-0.074 16 1 31.028 6.376 79.387 10.305 121 8 11.8-0.66 26.41-1.9 35-4z"
223 |       fill-rule="evenodd"
224 |       fill="#fff"
225 |   /><path
226 |       id="path87"
227 |       d="m417.68 41.167c7.427 0.041 14.354-0.548 24 1 11.056 7.229 19.625 12.104 25 26 8.15 21.069-3.215 52.785-16 67 20.131 19.257 37.971 42.591 52 69 7.03 13.234 11.861 28.417 17 44 6.709 20.343 10.375 38.66 12 63 5.318 79.64-26.317 147.57-66 195-18.52 22.135-44.02 41.113-69 55-32.256 17.932-69.533 31.616-116 34-110.85 5.687-200.23-55.795-243-130-11.084-19.229-21.913-40.834-28-65-3.165-12.566-6.442-25.653-8-40-8.868-81.687 18.319-152 58-200 29.772-36.017 65.746-64.329 115-82 53.13-19.061 132.96-24.64 187 1 8.059-4.255 20.531-15.245 26-26 5.957-11.716 3.125-29.688-6-40-4.963-1.625-11.658-4.852-18-2 1.478-10.792 13.057-11.663 20-11 14.444 1.378 25.316 14.776 30 26 2.09 5.003 2.65 10.24 4 14.997zm-52 91.003c-9.271 6.226-18.509 11.631-28 17-3.903 2.208-8.255 5.468-11 7-15.847 8.848-34.582 12.998-45 26 19.502-7.89 43.078-9.712 63-18 15.394-6.404 33.444-14.979 44-25 6.897-6.548 14.508-14.003 19-21 9.137-14.23 17.437-46.113 6-58-1.78 10.22-4.152 19.847-11 25 3.674-14.361 13.603-31.818 9-51-1.202-5.011-11.538-17.33-15-20-2.54-1.959-7.104-4.864-10-4 4.569 3.941 8.859 11.325 10 19 2.931 19.726-4.955 33.793-10 43-9.605 8.569-17.545 18.596-30 25-22.03 11.327-53.215 17.668-78 25-12.401 3.668-19.696 8.216-29 13-8.072 4.15-14.239 5.431-19 10-7.876 7.56-17.396 16.935-20 28-2.218 9.425-9.025 21.569-7 35 1.351 8.957 6.339 23.972 16 24 2.741-2.962-1.171-6.562-2-10-2.005-8.315-1.6-20.747 0-30 2.314-13.387 12.257-21.709 17-30 5.312-1.552 8.878-6.479 14-9 22.294-10.975 54.868-10.209 78-21 24.084-4.514 41.258-15.599 56-28 5.107-4.297 9.145-10.782 16-13-4.66 18.92-19.53 31.95-33 41zm63-59.003c2.781 18.771-6.896 36-13 45-16.971 25.021-46.947 40.7-72 51 35.139-2.632 74.774-10.967 97-38 1.368-1.665 2.277-4.552 4-7 7.165-10.182 14.383-25.429 13-43-0.863-10.971-6.385-18.428-12-24-9.584-3.083-16.304-9.03-29-9 3.81 9.833 10.47 14.636 12 24.997zm-130 20c-40.977-6.434-80.668 3.071-110 12-6.558 1.997-13.837 6.118-18 8-1.748 0.791-3.843 1.469-5 2-27.025 12.394-49.338 28.338-69 48-50.856 50.856-87.336 146.23-54 240 0.009-13.269 10.41-18.796 23-24 23.937-9.894 57.727-13.043 82-15-5.905-18.168-14.717-35.317-21-54-6.252-18.591-11.224-38.071-18-57-6.868-8.465-13.56-17.107-12-34 19.931-22.402 64.75-19.917 102-25 0.93-10.932 2.25-17.678 5-25 5.181-13.799 13.522-25.913 23-33 10.018-7.49 22.41-14.115 34-19 18.485-7.791 41.454-8.833 61-18-8.99-1.261-15.46-4.82-23-6.003zm-12 65.003c-19.866 8.385-38.136 21.535-45 41-1.859 5.271-2.706 11.236-2 18 1.895 1.489 3.851 8.083 6 6-4.5-5.12 0.418-12.915 1-19 10.331-9.336 19.33-20.004 31-28 11.387-6.254 24.036-13.409 36-19 19.616-9.168 47.145-22.798 57-36-23.26 16.21-56.31 25.31-84 37zm213 129c-5.661-32.576-18.302-61.379-33-84-0.828-1.275-0.205-3.731-1-5-1.361-2.171-3.56-4.012-5-6-8.729-12.048-23.209-29.854-33-36-0.057-0.61-0.149-1.184-1-1-33.412 27.255-101.29 20.043-148 34-0.752 4.248-7.632 2.368-9 6 32.492 4.615 91.383 12.431 69 51 22.968 7.248 38.691 23.033 34 53-1.771 11.313-10.412 25.941-19 36-10.146 11.885-26.71 27.583-38 35-2.033 1.336-4.298 1.521-5 4 5.778 3.889 16.643 2.691 20 9 0.872-1.461 0.794-3.872 4-3 5.516 4.164 12.411 3.471 19 6 4.187 1.607 7.1 5.454 12 6 4.116 0.459 10.969-1.033 15-2 9.517-2.282 18.22-6.846 28-8 13.911-1.642 31.421 1.347 48 2 16.074 0.633 24.049 1.521 37 6 10.76-29.09 11.34-72.29 6-103zm-392-70c-1.358 3.975-5.218 5.449-6 10 3.071 8.263 9.005 13.662 14 20 8.787 22.898 17.125 46.207 25 70 9.867 29.813 23.495 54.428 24 91 3.807 7.054 8.749 10.112 17 13 23.589 8.255 67.761 6.779 88-3 3.82-7.18 6.388-15.612 8-25 14.11-2.557 18.905-14.429 25-25 16.291-10.122 34.051-24.38 45-39 4.882-6.519 8.479-10.7 12-18 9.493-19.68 4.53-40.591-12-54-9.026-2.489-16.116-2.016-21 4-2.686 8.981-2.771 20.562-9 26 1.371-13.67 6.857-25.362 6-36-0.709-3.958-7.795-1.539-8-6 4.88-3.746 14.66-5.085 18-10 0.141-0.207 1.98-5.335 2-6 0.345-11.662-25.234-19.073-38-22-12.445-2.853-27.954-3.568-41-3-3.111 2.889-6.919 5.081-7 11 13.356 3.713 43.233 3.676 60 6-14.257-6.076-33.879-6.788-52-9 14.729-2.369 32.144 0.855 45 4 5.667 1.386 12.823 1.992 15 7-4.195 7.147-13.762 9.975-23 12-26.971 5.913-68.218 4.223-104 2-18.359-1.141-35.824-0.34-50-4-8.055-2.08-20.666-6.551-15-15 4.851-0.185 1.874 7.46 8 6 16.281-8.25 42.581-6.694 67-9 0.136-1.649-1.094-9.202-2-13-33.07 2.26-66.01 4.65-91 15zm36 158c-9.03-2.556-28.562 0.086-41 2-7.852 1.208-15.904 3.944-23 6-6.363 1.843-16.825 5.173-21 8-13.815 9.354-7.683 23.1 5 28 3.822 1.477 5.306 2.462 9 4 6.429 2.677 11.424 4.172 20 7 9.019 2.975 19.186 6.298 26 8 5.252 1.312 11.436 0.889 17 2 5.337 1.065 10.292 3.242 15 4 15.574 2.508 32.909 3.087 49 4 2.795 0.158 5.193 1.802 8 2 13.741 0.972 26.77-1.249 40-2 5.236-0.297 10.596 0.456 16 0 14.506-1.225 27.911-4.474 39-6 14.103-1.941 23.788-5.542 33-11-6.818-0.246-17.852-2.959-24-7-27.394 8.975-58.216 11.015-89 12-35.614 1.141-68.734-4.193-101-9-19.188-6.812-44.508-7.492-58-20-0.79-7.79 1.093-12.907 6-15 0.87 4.465-4.035 6.465-2 9 10.215 11.546 31.523 15.319 50 19 10.64 2.119 20.584 4.732 30 3-4.876-2.124-14.087 0.087-16-5 7.675-0.659 17.989 1.322 24-1-7.653-6.955-27.322-0.363-35-5 7.421-2.912 16.653-4.013 26-5-8.947-10.012-31.003 0.742-43-3 11.242-5.758 27.195-6.805 43-8 0.079-3.576-4.502-3.708-6-4-14.945-2.915-35.639 6.363-49 4 15.246-8.087 36.607-10.06 60-10 0.29-5.89-3.24-9.66-8-11zm160 7c-0.837 4.467-5.959 8.956-5 12 7.438 1.895 20.82-2.153 20 8-11.321 0.321-20.229-1.771-32-1-0.147 14.187-7.451 21.216-16 27 7.497-0.617 17.526-2.765 22-4 5.816-1.606 13.893-0.274 17-5-2.546-4.12-10.426-2.907-15-5 3.056-8.464 14.311-7.015 22-9 10.832-2.797 20.999-8.054 29-12-12.16-5.51-26.54-8.79-42-11zm120 6c-14.363-0.406-28.497 7.092-44 9-6.338 0.78-12.664-0.636-19 0-12.409 1.244-22.748 9.043-34 10-1.767 1.674 0.888 3.351 0 7-1.394 3.272-7.413 1.92-9 5 15.367 7.323 42.143 0.489 60-2 0.156 3.177 4.144 2.523 6 4 9.165 0.513 17.895-3.819 25-5 1.859-0.309 7.227-2.188 8 1-1.511 2.845-5.331 3.183-8 4-5.02 1.537-10.416 2.75-15 4-1.453 0.396-2.504 1.549-4 2-3.597 1.086-7.76 0.687-11 2-3.481 1.411-6.636 4.571-10 6-3.371 1.432-7.212 2.432-11 4-7.669 3.175-14.816 5.651-22 8-9.175 3-17.707 4.375-28 7-11.343 2.893-23.643 7.577-36 9-10.095 1.163-27.844-2.096-33 5 2.961 6.918 11.071 8.709 18 10 11.533 2.148 25.445 2.566 39 4 7.891 5.19 15.381 13.775 25 16 5.633 1.303 13.031 1.437 19 2 17.832 1.683 31.108 0.543 44 2 3.745 0.424 8.954-0.779 11 3-11.124 4.522-34.95-4.573-36 12 4.356 4.609 10.413 3.981 18 5 7.716 1.036 14.66 4.031 20 3 5.22-1.009 8-5.52 11-8 5.795-4.792 10.819-7.511 16-12 8.161-7.071 16.16-15.547 22-23 1.317-1.682 2.664-3.347 4-5 17.507-21.671 35.245-50.988 42-80-17.32-8.35-47.46-3.87-68-9zm-294 134c12.763 8.895 24.088 14.527 38 21 14.734 6.854 31.1 12.112 48 16 6.477 1.49 9.163 2.095 15 3 52.257 8.104 110.74-1.354 153-29-12.906-2.407-25.267-1.379-33-8-5.951-5.095-5.075-13.396-11-19-5.913 1.476-11.849 1.482-17 1-10.91-1.021-15.524-5.34-22-10-5.971-4.296-10.195-8.408-16-9-13.51-1.378-27.124-1.769-37-5-10.494-3.434-14.293-7.566-20-14-27.779 1.293-52.269-2.298-75-6-8.294-1.351-16.919-1.295-24-4-6.955-2.656-12.864-9.188-20-11-13.363-3.394-26.536 0.072-39 0-0.734-5.266-5.541-6.46-6-12 3.62-1.047 11.602 2.269 12-2-11.58-4.42-20.979-11.021-29-19 16.45 42.48 47.725 82.41 83 107zm128-67c-41.613 2.305-89.972-1.624-121-8-5.228-1.074-11.332-3.433-16-1 12.888 5.629 28.541 9.682 44 12 27.495 4.123 56.313 4.262 83 2 17.565-1.489 37.711-0.17 45-9-8.59 2.1-23.2 3.34-35 4z"
228 |       fill-rule="evenodd"
229 |   /><path
230 |       id="path89"
231 |       d="m198.68 202.17c0.906 3.798 2.136 11.351 2 13-24.419 2.306-50.719 0.75-67 9-6.126 1.46-3.149-6.185-8-6-5.666 8.449 6.945 12.92 15 15 14.176 3.66 31.641 2.859 50 4 35.782 2.223 77.029 3.913 104-2 9.238-2.025 18.805-4.853 23-12-2.177-5.008-9.333-5.614-15-7-12.856-3.145-30.271-6.369-45-4 18.121 2.212 37.743 2.924 52 9-16.767-2.324-46.644-2.287-60-6 0.081-5.919 3.889-8.111 7-11 13.046-0.568 28.555 0.147 41 3 12.766 2.927 38.345 10.338 38 22-0.02 0.665-1.859 5.793-2 6-3.34 4.915-13.12 6.254-18 10 0.205 4.461 7.291 2.042 8 6 0.857 10.638-4.629 22.33-6 36 6.229-5.438 6.314-17.019 9-26 4.884-6.016 11.974-6.489 21-4 16.53 13.409 21.493 34.32 12 54-3.521 7.3-7.118 11.481-12 18-10.949 14.62-28.709 28.878-45 39-6.095 10.571-10.89 22.443-25 25-1.612 9.388-4.18 17.82-8 25-20.239 9.779-64.411 11.255-88 3-8.251-2.888-13.193-5.946-17-13-0.505-36.572-14.133-61.187-24-91-7.875-23.793-16.213-47.102-25-70-4.995-6.338-10.929-11.737-14-20 0.782-4.551 4.642-6.025 6-10 24.99-10.35 57.93-12.74 91-15zm-88 22c2.213 5.122 5.673 11.045 10 13 1.454 0.657 5.56 1.481 8 2 3.745 0.796 9.659 1.815 14 2 3.388 0.144 9.316 1.492 10-2-14.95-0.3-32.442-6.041-38-19h-3c0.23 1.89-1.12 2.2-1 4zm47 29c12.951 1.993 25.609 4.033 37 4 33.375-0.096 68.283 0.417 90-7-51.306 2.555-123.53 6.647-165-12 2.6 13.31 21.33 12.43 38 15zm-22 9c14.897 3.436 33.906 2.761 51 4-2.075-3.328-7.94-4.292-12-5-10.571-1.842-21.448-1.671-30-3-2.963-0.704-4.354-2.979-9-2v6zm1 11c13.631 5.53 26.316 2.997 43 3-3.006-6.51-11.526-3.524-17-4-9.483-0.825-18.193-3.599-26-5v6zm163 82c4.91-4.231 13.015-8.691 17-12 1.127-0.936 4.284-1.33 5-2 0.986-0.924 1.007-3.161 2-4 13.409-11.326 29.212-26.115 31-45 0.913-9.641-1.701-12.609-6-17-22.362-3.696-19.745 17.588-35 21-8.177 29.49-22.234 53.099-31 82 6.68-5.18 9.39-16.44 17-23zm-160-71c9.904 6.096 30.365 1.635 45 3-2.168-4.853-9.113-3.57-14-4-10.522-0.926-20.571-2.347-31-3v4zm4 15c10.837-0.182 24.059 0.243 34 0 3.139-0.077 8.739 1.732 10-2-13.216-3.707-29.723-1.744-46-6 0.25 3.08 1.02 5.65 2 8zm4 12c10.085-0.227 22.717 0.303 32 0 2.797-0.092 8.239 1.694 9-2-13.954-3.571-26.876-2.903-43-5-1.14 4.14 2.11 3.89 2 7zm4 11c4.522 1.265 11.228 1.034 18 1 6.314-0.032 14.792 1.647 17-3-13.11-2.084-23.636-1.476-37-4-0.48 3.15 3.07 2.26 2 6zm5 13c4.955-0.024 11.114 0.031 17 0 5.325-0.028 12.463 1.691 15-2-1.551-3.021-6.855-2.718-10-3-8.882-0.798-16.371-0.899-24-3 0.16 3.18 2.27 4.4 2 8zm5 12c9.8 2.132 24.093 1.004 33-1-3.13-5.514-11.928-2.455-19-3-5.384-0.415-10.554-2.556-15-2-0.057-0.61-0.149-1.184-1-1 0.17 2.83 1.84 4.16 2 7zm8 15c5.338 0.682 10.469-0.539 16-1 6.82-0.568 15.174 0.43 19-4-11.511-2.155-27.253-0.08-38-3-0.65 4.31 1.73 5.6 3 8zm2 11c5.767 1.746 12.242 0.635 19 0 5.945-0.559 14.111 0.485 17-4-10.556-2.444-26.199 0.198-37-2-0.72 3.05 1.73 2.94 1 6zm2 10c7.552 4.461 27.395 4.032 33-2-11.094-1.388-24.558-1.776-33-3v5zm2 10c3.086 1.375 7.979 3.47 13 4 8.291 0.875 19.663 0.328 22-3-11.437-4.549-22.441-2.185-35-5v4zm0 15c11.182 5.623 27.938 4.856 43 4 8.684-0.494 18.973 1.389 24-4-23.919-0.694-47.655-0.357-69-8-1.09 4.42 1.7 4.97 2 8z"
232 |       fill-rule="evenodd"
233 |       fill="#fff"
234 |   /><path
235 |       id="path91"
236 |       d="m493.68 390.17c-12.951-4.479-20.926-5.367-37-6-16.579-0.653-34.089-3.642-48-2-9.78 1.154-18.483 5.718-28 8-4.031 0.967-10.884 2.459-15 2-4.9-0.546-7.813-4.393-12-6-6.589-2.529-13.484-1.836-19-6-3.206-0.872-3.128 1.539-4 3-3.357-6.309-14.222-5.111-20-9 0.702-2.479 2.967-2.664 5-4 11.29-7.417 27.854-23.115 38-35 8.588-10.059 17.229-24.687 19-36 4.691-29.967-11.032-45.752-34-53 22.383-38.569-36.508-46.385-69-51 1.368-3.632 8.248-1.752 9-6 46.711-13.957 114.59-6.745 148-34 0.851-0.184 0.943 0.39 1 1 9.791 6.146 24.271 23.952 33 36 1.44 1.988 3.639 3.829 5 6 0.795 1.269 0.172 3.725 1 5 14.698 22.621 27.339 51.424 33 84 5.34 30.71 4.76 73.91-6 103zm-51-211c-3.346-4.086-10.259-14.135-15-13-5.771 1.381-10.661 4.864-16 7-16.047 6.42-35.02 10.557-55 13-20.271 2.479-40.452 0.801-56 8 51.304 2.05 98.406 0.414 152 1-1.65-5.75-5.44-10.44-10-16zm-95 34c3.053 11.486 4.212 16.031 0 28 6.189 8.112 17.466 7 29 7 34.827 0 76.699 0.948 105-1-5.952-17.714-14.76-32.574-24-47h-124c1.99 7.01 10.35 7.65 14 13zm23 42c-1.003-0.003-1.19 0.81-2 1-0.61 0.057-1.184 0.149-1 1 6.477 8.856 12.065 18.602 13 33 31.656 2.24 75.432 0.4 112 1-0.57-14.096-5.29-24.043-8-36-35.61 2.34-91.73 0.1-114 0zm10 45c-1.406 0.261-1.14 2.193-2 3 0.115 8.143-6.556 15.385-9 24 42.544 0.147 87.766-0.575 126 1 0.974-6.777-0.638-18.355 0-28h-115zm-21 38c-3.75 4.807-7.695 9.001-12 13-3.36 3.122-8.95 5.87-10 11 57.961-3.393 109.98 1.607 157-1-0.467-8.467 1.777-14.223 1-23-46.63 2.71-86.96-1.04-136 0zm87 36c-3.499-0.227-6.588-2.084-10-2-4.6 0.112-9.452 1.223-13 3 19.53 4.137 46.148 1.185 63 8 1.442-2.225 2.512-4.822 2-9-16.27-0.85-30.43 0.75-42 0zm-106-1c-1.122 0.212-1.557 1.109-2 2 10.113 0.634 16.762 9.62 27 11 11.446 1.543 17.568-3.175 26-6 6.607-2.214 14.987-2.729 19-7-26.59 2.27-51.2 0.26-70 0z"
237 |       fill-rule="evenodd"
238 |       fill="#fff"
239 |   /><path
240 |       id="path93"
241 |       d="m151.68 386.17c-23.393-0.06-44.754 1.913-60 10 13.361 2.363 34.055-6.915 49-4 1.498 0.292 6.079 0.424 6 4-15.805 1.195-31.758 2.242-43 8 11.997 3.742 34.053-7.012 43 3-9.347 0.987-18.579 2.088-26 5 7.678 4.637 27.347-1.955 35 5-6.011 2.322-16.325 0.341-24 1 1.913 5.087 11.124 2.876 16 5-9.416 1.732-19.36-0.881-30-3-18.477-3.681-39.785-7.454-50-19-2.035-2.535 2.87-4.535 2-9-4.907 2.093-6.79 7.21-6 15 13.492 12.508 38.812 13.188 58 20 32.266 4.807 65.386 10.141 101 9 30.784-0.985 61.606-3.025 89-12 6.148 4.041 17.182 6.754 24 7-9.212 5.458-18.897 9.059-33 11-11.089 1.526-24.494 4.775-39 6-5.404 0.456-10.764-0.297-16 0-13.23 0.751-26.259 2.972-40 2-2.807-0.198-5.205-1.842-8-2-16.091-0.913-33.426-1.492-49-4-4.708-0.758-9.663-2.935-15-4-5.564-1.111-11.748-0.688-17-2-6.814-1.702-16.981-5.025-26-8-8.576-2.828-13.571-4.323-20-7-3.694-1.538-5.178-2.523-9-4-12.683-4.9-18.815-18.646-5-28 4.175-2.827 14.637-6.157 21-8 7.096-2.056 15.148-4.792 23-6 12.438-1.914 31.97-4.556 41-2 4.76 1.34 8.29 5.11 8 11z"
242 |       fill-rule="evenodd"
243 |       fill="#fff"
244 |   />
245 | <path
246 |       id="path3159"
247 |       d="m126.92 226.3c12.431 17.584 137.13 11.6 144.72 11.576 19.754-0.0623 44.671-8.5604 45.046-15.279-8.0524-0.4294-22.786-2.4528-37.531-3.2025-11.623-0.59092-27.006-3.6182-33.733-4.3771-2.4953-0.28146-1.6751 5.2458-0.17674 7.5334 1.3306 2.0314-4.6809-6.4587-7.1314-6.6547-35.553 27.556-9.1468-0.45137-40.183-0.29898-29.115 0.92328-54.757 2.7017-71.015 10.703z"
248 |       stroke="#28170b"
249 |       stroke-width="1px"
250 |       fill="#28170b"
251 |   /><path
252 |       id="path3159-1"
253 |       d="m126.44 225.59c-5.6118 7.8408 104.65-7.9504 144.72 11.576 17.758 8.6523 44.671-8.5604 45.046-15.279-8.0524-0.4294-22.786-2.4528-37.531-3.2025-11.623-0.59092-27.006-3.6182-33.733-4.3771-2.4953-0.28146-1.6751 2.7982-0.17674 5.0858 6.0769-4.1338-10.5-2.1371-22.987 5.3834-3.2583 1.9624-3.1824-6.3358-6.9379-4.9567-7.3132 2.6857-12.241-5.4571-17.389-4.9328-29.115 0.92328-54.757 2.7017-71.015 10.703z"
254 |       fill="url(#linearGradient3185)"
255 |   /><path
256 |       id="path3208"
257 |       d="m370.25 328.95a102.19 134.03 0 1 1 -204.38 0 102.19 134.03 0 1 1 204.38 0z"
258 |       transform="translate(-.0018904)"
259 |       fill="none"
260 |   /><path
261 |       id="path3206-7"
262 |       fill="#c87137"
263 |       d="m266.21 58.951c-147.02 0-266.22 120.36-266.22 268.81 0 148.46 119.2 268.81 266.22 268.81s266.22-120.36 266.22-268.81c0-75.564-31.621-145.33-81.335-194.17-6.9888 7.6875-17.833 15.375-26.796 23.063 44.089 42.936 75.943 104.55 75.943 171.11 0 130.46-105.28 236.22-235.13 236.22-129.83 0-235.24-105.75-235.11-236.22 0.13-130.33 108.01-233.48 235.13-236.22 22.566-0.4853 37.736 2.4504 58.398 8.4158 13.499-5.1732 26.319-11.703 37.848-20.817-18.25-10.185-62.94-20.188-95.16-20.188z"
264 |   /><metadata
265 |     ><rdf:RDF
266 |       ><cc:Work
267 |         ><dc:format
268 |           >image/svg+xml</dc:format
269 |         ><dc:type
270 |             rdf:resource="http://purl.org/dc/dcmitype/StillImage"
271 |         /><cc:license
272 |             rdf:resource="http://creativecommons.org/licenses/publicdomain/"
273 |         /><dc:publisher
274 |           ><cc:Agent
275 |               rdf:about="http://openclipart.org/"
276 |             ><dc:title
277 |               >Openclipart</dc:title
278 |             ></cc:Agent
279 |           ></dc:publisher
280 |         ><dc:title
281 |           >Johnny's Cup of Coffee Coloured</dc:title
282 |         ><dc:date
283 |           >2013-11-15T13:31:48</dc:date
284 |         ><dc:description
285 |           >This is a remix of Johnny_Automatic's Cup of Coffee (from October 2006). I wanted to use his fantastic artwork for a small hobby project, but needed both black and white and semi-coloured versions.&#xD;\n&#xD;\nThanks to the generosity of Johnny in uploading his artwork in the first place, it took me no time at all to bring together what I needed. I'm not an artist, and so the colouring suits my needs but isn't particularly well done. However, the least I could do is upload it for anyone else that either wants to use it or improve upon my changes.</dc:description
286 |         ><dc:source
287 |           >https://openclipart.org/detail/188782/johnnys-cup-of-coffee-coloured-by-grumpydad-188782</dc:source
288 |         ><dc:creator
289 |           ><cc:Agent
290 |             ><dc:title
291 |               >GrumpyDad</dc:title
292 |             ></cc:Agent
293 |           ></dc:creator
294 |         ><dc:subject
295 |           ><rdf:Bag
296 |             ><rdf:li
297 |               >coffee</rdf:li
298 |             ><rdf:li
299 |               >cup</rdf:li
300 |             ></rdf:Bag
301 |           ></dc:subject
302 |         ></cc:Work
303 |       ><cc:License
304 |           rdf:about="http://creativecommons.org/licenses/publicdomain/"
305 |         ><cc:permits
306 |             rdf:resource="http://creativecommons.org/ns#Reproduction"
307 |         /><cc:permits
308 |             rdf:resource="http://creativecommons.org/ns#Distribution"
309 |         /><cc:permits
310 |             rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
311 |         /></cc:License
312 |       ></rdf:RDF
313 |     ></metadata
314 |   ></svg
315 | >
316 | 


--------------------------------------------------------------------------------
/Ch1_Code_Practical_Svelte/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "svelte-app",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@babel/code-frame": {
  8 |       "version": "7.12.13",
  9 |       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
 10 |       "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "@babel/highlight": "^7.12.13"
 14 |       }
 15 |     },
 16 |     "@babel/helper-validator-identifier": {
 17 |       "version": "7.12.11",
 18 |       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
 19 |       "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
 20 |       "dev": true
 21 |     },
 22 |     "@babel/highlight": {
 23 |       "version": "7.12.13",
 24 |       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
 25 |       "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
 26 |       "dev": true,
 27 |       "requires": {
 28 |         "@babel/helper-validator-identifier": "^7.12.11",
 29 |         "chalk": "^2.0.0",
 30 |         "js-tokens": "^4.0.0"
 31 |       }
 32 |     },
 33 |     "@polka/url": {
 34 |       "version": "1.0.0-next.11",
 35 |       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
 36 |       "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
 37 |     },
 38 |     "@rollup/plugin-commonjs": {
 39 |       "version": "17.1.0",
 40 |       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz",
 41 |       "integrity": "sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew==",
 42 |       "dev": true,
 43 |       "requires": {
 44 |         "@rollup/pluginutils": "^3.1.0",
 45 |         "commondir": "^1.0.1",
 46 |         "estree-walker": "^2.0.1",
 47 |         "glob": "^7.1.6",
 48 |         "is-reference": "^1.2.1",
 49 |         "magic-string": "^0.25.7",
 50 |         "resolve": "^1.17.0"
 51 |       }
 52 |     },
 53 |     "@rollup/plugin-node-resolve": {
 54 |       "version": "11.1.1",
 55 |       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.1.tgz",
 56 |       "integrity": "sha512-zlBXR4eRS+2m79TsUZWhsd0slrHUYdRx4JF+aVQm+MI0wsKdlpC2vlDVjmlGvtZY1vsefOT9w3JxvmWSBei+Lg==",
 57 |       "dev": true,
 58 |       "requires": {
 59 |         "@rollup/pluginutils": "^3.1.0",
 60 |         "@types/resolve": "1.17.1",
 61 |         "builtin-modules": "^3.1.0",
 62 |         "deepmerge": "^4.2.2",
 63 |         "is-module": "^1.0.0",
 64 |         "resolve": "^1.19.0"
 65 |       }
 66 |     },
 67 |     "@rollup/pluginutils": {
 68 |       "version": "3.1.0",
 69 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
 70 |       "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
 71 |       "dev": true,
 72 |       "requires": {
 73 |         "@types/estree": "0.0.39",
 74 |         "estree-walker": "^1.0.1",
 75 |         "picomatch": "^2.2.2"
 76 |       },
 77 |       "dependencies": {
 78 |         "estree-walker": {
 79 |           "version": "1.0.1",
 80 |           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
 81 |           "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
 82 |           "dev": true
 83 |         }
 84 |       }
 85 |     },
 86 |     "@types/estree": {
 87 |       "version": "0.0.39",
 88 |       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
 89 |       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
 90 |       "dev": true
 91 |     },
 92 |     "@types/node": {
 93 |       "version": "14.14.25",
 94 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.25.tgz",
 95 |       "integrity": "sha512-EPpXLOVqDvisVxtlbvzfyqSsFeQxltFbluZNRndIb8tr9KiBnYNLzrc1N3pyKUCww2RNrfHDViqDWWE1LCJQtQ==",
 96 |       "dev": true
 97 |     },
 98 |     "@types/resolve": {
 99 |       "version": "1.17.1",
100 |       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
101 |       "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
102 |       "dev": true,
103 |       "requires": {
104 |         "@types/node": "*"
105 |       }
106 |     },
107 |     "ansi-styles": {
108 |       "version": "3.2.1",
109 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
110 |       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
111 |       "dev": true,
112 |       "requires": {
113 |         "color-convert": "^1.9.0"
114 |       }
115 |     },
116 |     "anymatch": {
117 |       "version": "3.1.1",
118 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
119 |       "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
120 |       "dev": true,
121 |       "requires": {
122 |         "normalize-path": "^3.0.0",
123 |         "picomatch": "^2.0.4"
124 |       }
125 |     },
126 |     "async-limiter": {
127 |       "version": "1.0.1",
128 |       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
129 |       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
130 |       "dev": true
131 |     },
132 |     "balanced-match": {
133 |       "version": "1.0.0",
134 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
135 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
136 |       "dev": true
137 |     },
138 |     "binary-extensions": {
139 |       "version": "2.2.0",
140 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
141 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
142 |       "dev": true
143 |     },
144 |     "brace-expansion": {
145 |       "version": "1.1.11",
146 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
147 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
148 |       "dev": true,
149 |       "requires": {
150 |         "balanced-match": "^1.0.0",
151 |         "concat-map": "0.0.1"
152 |       }
153 |     },
154 |     "braces": {
155 |       "version": "3.0.2",
156 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
157 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
158 |       "dev": true,
159 |       "requires": {
160 |         "fill-range": "^7.0.1"
161 |       }
162 |     },
163 |     "buffer-from": {
164 |       "version": "1.1.1",
165 |       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
166 |       "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
167 |       "dev": true
168 |     },
169 |     "builtin-modules": {
170 |       "version": "3.2.0",
171 |       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
172 |       "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
173 |       "dev": true
174 |     },
175 |     "chalk": {
176 |       "version": "2.4.2",
177 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
178 |       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
179 |       "dev": true,
180 |       "requires": {
181 |         "ansi-styles": "^3.2.1",
182 |         "escape-string-regexp": "^1.0.5",
183 |         "supports-color": "^5.3.0"
184 |       }
185 |     },
186 |     "chokidar": {
187 |       "version": "3.5.1",
188 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
189 |       "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
190 |       "dev": true,
191 |       "requires": {
192 |         "anymatch": "~3.1.1",
193 |         "braces": "~3.0.2",
194 |         "fsevents": "~2.3.1",
195 |         "glob-parent": "~5.1.0",
196 |         "is-binary-path": "~2.1.0",
197 |         "is-glob": "~4.0.1",
198 |         "normalize-path": "~3.0.0",
199 |         "readdirp": "~3.5.0"
200 |       }
201 |     },
202 |     "color-convert": {
203 |       "version": "1.9.3",
204 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
205 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
206 |       "dev": true,
207 |       "requires": {
208 |         "color-name": "1.1.3"
209 |       }
210 |     },
211 |     "color-name": {
212 |       "version": "1.1.3",
213 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
214 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
215 |       "dev": true
216 |     },
217 |     "commander": {
218 |       "version": "2.20.3",
219 |       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
220 |       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
221 |       "dev": true
222 |     },
223 |     "commondir": {
224 |       "version": "1.0.1",
225 |       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
226 |       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
227 |       "dev": true
228 |     },
229 |     "concat-map": {
230 |       "version": "0.0.1",
231 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
232 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
233 |       "dev": true
234 |     },
235 |     "console-clear": {
236 |       "version": "1.1.1",
237 |       "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
238 |       "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
239 |     },
240 |     "deepmerge": {
241 |       "version": "4.2.2",
242 |       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
243 |       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
244 |       "dev": true
245 |     },
246 |     "escape-string-regexp": {
247 |       "version": "1.0.5",
248 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
249 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
250 |       "dev": true
251 |     },
252 |     "estree-walker": {
253 |       "version": "2.0.2",
254 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
255 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
256 |       "dev": true
257 |     },
258 |     "fill-range": {
259 |       "version": "7.0.1",
260 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
261 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
262 |       "dev": true,
263 |       "requires": {
264 |         "to-regex-range": "^5.0.1"
265 |       }
266 |     },
267 |     "fs.realpath": {
268 |       "version": "1.0.0",
269 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
270 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
271 |       "dev": true
272 |     },
273 |     "fsevents": {
274 |       "version": "2.3.1",
275 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
276 |       "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
277 |       "dev": true,
278 |       "optional": true
279 |     },
280 |     "function-bind": {
281 |       "version": "1.1.1",
282 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
283 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
284 |       "dev": true
285 |     },
286 |     "get-port": {
287 |       "version": "3.2.0",
288 |       "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
289 |       "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
290 |     },
291 |     "glob": {
292 |       "version": "7.1.6",
293 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
294 |       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
295 |       "dev": true,
296 |       "requires": {
297 |         "fs.realpath": "^1.0.0",
298 |         "inflight": "^1.0.4",
299 |         "inherits": "2",
300 |         "minimatch": "^3.0.4",
301 |         "once": "^1.3.0",
302 |         "path-is-absolute": "^1.0.0"
303 |       }
304 |     },
305 |     "glob-parent": {
306 |       "version": "5.1.1",
307 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
308 |       "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
309 |       "dev": true,
310 |       "requires": {
311 |         "is-glob": "^4.0.1"
312 |       }
313 |     },
314 |     "has": {
315 |       "version": "1.0.3",
316 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
317 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
318 |       "dev": true,
319 |       "requires": {
320 |         "function-bind": "^1.1.1"
321 |       }
322 |     },
323 |     "has-flag": {
324 |       "version": "3.0.0",
325 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
326 |       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
327 |       "dev": true
328 |     },
329 |     "inflight": {
330 |       "version": "1.0.6",
331 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
332 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
333 |       "dev": true,
334 |       "requires": {
335 |         "once": "^1.3.0",
336 |         "wrappy": "1"
337 |       }
338 |     },
339 |     "inherits": {
340 |       "version": "2.0.4",
341 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
342 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
343 |       "dev": true
344 |     },
345 |     "is-binary-path": {
346 |       "version": "2.1.0",
347 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
348 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
349 |       "dev": true,
350 |       "requires": {
351 |         "binary-extensions": "^2.0.0"
352 |       }
353 |     },
354 |     "is-core-module": {
355 |       "version": "2.2.0",
356 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
357 |       "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
358 |       "dev": true,
359 |       "requires": {
360 |         "has": "^1.0.3"
361 |       }
362 |     },
363 |     "is-extglob": {
364 |       "version": "2.1.1",
365 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
366 |       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
367 |       "dev": true
368 |     },
369 |     "is-glob": {
370 |       "version": "4.0.1",
371 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
372 |       "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
373 |       "dev": true,
374 |       "requires": {
375 |         "is-extglob": "^2.1.1"
376 |       }
377 |     },
378 |     "is-module": {
379 |       "version": "1.0.0",
380 |       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
381 |       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
382 |       "dev": true
383 |     },
384 |     "is-number": {
385 |       "version": "7.0.0",
386 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
387 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
388 |       "dev": true
389 |     },
390 |     "is-reference": {
391 |       "version": "1.2.1",
392 |       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
393 |       "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
394 |       "dev": true,
395 |       "requires": {
396 |         "@types/estree": "*"
397 |       }
398 |     },
399 |     "jest-worker": {
400 |       "version": "26.6.2",
401 |       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
402 |       "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
403 |       "dev": true,
404 |       "requires": {
405 |         "@types/node": "*",
406 |         "merge-stream": "^2.0.0",
407 |         "supports-color": "^7.0.0"
408 |       },
409 |       "dependencies": {
410 |         "has-flag": {
411 |           "version": "4.0.0",
412 |           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
413 |           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
414 |           "dev": true
415 |         },
416 |         "supports-color": {
417 |           "version": "7.2.0",
418 |           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
419 |           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
420 |           "dev": true,
421 |           "requires": {
422 |             "has-flag": "^4.0.0"
423 |           }
424 |         }
425 |       }
426 |     },
427 |     "js-tokens": {
428 |       "version": "4.0.0",
429 |       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
430 |       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
431 |       "dev": true
432 |     },
433 |     "kleur": {
434 |       "version": "3.0.3",
435 |       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
436 |       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
437 |     },
438 |     "livereload": {
439 |       "version": "0.9.1",
440 |       "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
441 |       "integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
442 |       "dev": true,
443 |       "requires": {
444 |         "chokidar": "^3.3.0",
445 |         "livereload-js": "^3.1.0",
446 |         "opts": ">= 1.2.0",
447 |         "ws": "^6.2.1"
448 |       }
449 |     },
450 |     "livereload-js": {
451 |       "version": "3.3.1",
452 |       "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz",
453 |       "integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==",
454 |       "dev": true
455 |     },
456 |     "local-access": {
457 |       "version": "1.1.0",
458 |       "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
459 |       "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw=="
460 |     },
461 |     "magic-string": {
462 |       "version": "0.25.7",
463 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
464 |       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
465 |       "dev": true,
466 |       "requires": {
467 |         "sourcemap-codec": "^1.4.4"
468 |       }
469 |     },
470 |     "merge-stream": {
471 |       "version": "2.0.0",
472 |       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
473 |       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
474 |       "dev": true
475 |     },
476 |     "mime": {
477 |       "version": "2.5.0",
478 |       "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.0.tgz",
479 |       "integrity": "sha512-ft3WayFSFUVBuJj7BMLKAQcSlItKtfjsKDDsii3rqFDAZ7t11zRe8ASw/GlmivGwVUYtwkQrxiGGpL6gFvB0ag=="
480 |     },
481 |     "minimatch": {
482 |       "version": "3.0.4",
483 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
484 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
485 |       "dev": true,
486 |       "requires": {
487 |         "brace-expansion": "^1.1.7"
488 |       }
489 |     },
490 |     "mri": {
491 |       "version": "1.1.6",
492 |       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
493 |       "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ=="
494 |     },
495 |     "normalize-path": {
496 |       "version": "3.0.0",
497 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
498 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
499 |       "dev": true
500 |     },
501 |     "once": {
502 |       "version": "1.4.0",
503 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
504 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
505 |       "dev": true,
506 |       "requires": {
507 |         "wrappy": "1"
508 |       }
509 |     },
510 |     "opts": {
511 |       "version": "2.0.2",
512 |       "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz",
513 |       "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
514 |       "dev": true
515 |     },
516 |     "path-is-absolute": {
517 |       "version": "1.0.1",
518 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
519 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
520 |       "dev": true
521 |     },
522 |     "path-parse": {
523 |       "version": "1.0.6",
524 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
525 |       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
526 |       "dev": true
527 |     },
528 |     "picomatch": {
529 |       "version": "2.2.2",
530 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
531 |       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
532 |       "dev": true
533 |     },
534 |     "randombytes": {
535 |       "version": "2.1.0",
536 |       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
537 |       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
538 |       "dev": true,
539 |       "requires": {
540 |         "safe-buffer": "^5.1.0"
541 |       }
542 |     },
543 |     "readdirp": {
544 |       "version": "3.5.0",
545 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
546 |       "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
547 |       "dev": true,
548 |       "requires": {
549 |         "picomatch": "^2.2.1"
550 |       }
551 |     },
552 |     "require-relative": {
553 |       "version": "0.8.7",
554 |       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
555 |       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
556 |       "dev": true
557 |     },
558 |     "resolve": {
559 |       "version": "1.19.0",
560 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
561 |       "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
562 |       "dev": true,
563 |       "requires": {
564 |         "is-core-module": "^2.1.0",
565 |         "path-parse": "^1.0.6"
566 |       }
567 |     },
568 |     "rollup": {
569 |       "version": "2.38.4",
570 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.38.4.tgz",
571 |       "integrity": "sha512-B0LcJhjiwKkTl79aGVF/u5KdzsH8IylVfV56Ut6c9ouWLJcUK17T83aZBetNYSnZtXf2OHD4+2PbmRW+Fp5ulg==",
572 |       "dev": true,
573 |       "requires": {
574 |         "fsevents": "~2.3.1"
575 |       }
576 |     },
577 |     "rollup-plugin-css-only": {
578 |       "version": "3.1.0",
579 |       "resolved": "https://registry.npmjs.org/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz",
580 |       "integrity": "sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==",
581 |       "dev": true,
582 |       "requires": {
583 |         "@rollup/pluginutils": "4"
584 |       },
585 |       "dependencies": {
586 |         "@rollup/pluginutils": {
587 |           "version": "4.1.0",
588 |           "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
589 |           "integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
590 |           "dev": true,
591 |           "requires": {
592 |             "estree-walker": "^2.0.1",
593 |             "picomatch": "^2.2.2"
594 |           }
595 |         }
596 |       }
597 |     },
598 |     "rollup-plugin-livereload": {
599 |       "version": "2.0.0",
600 |       "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
601 |       "integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
602 |       "dev": true,
603 |       "requires": {
604 |         "livereload": "^0.9.1"
605 |       }
606 |     },
607 |     "rollup-plugin-svelte": {
608 |       "version": "7.1.0",
609 |       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz",
610 |       "integrity": "sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==",
611 |       "dev": true,
612 |       "requires": {
613 |         "require-relative": "^0.8.7",
614 |         "rollup-pluginutils": "^2.8.2"
615 |       }
616 |     },
617 |     "rollup-plugin-terser": {
618 |       "version": "7.0.2",
619 |       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
620 |       "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
621 |       "dev": true,
622 |       "requires": {
623 |         "@babel/code-frame": "^7.10.4",
624 |         "jest-worker": "^26.2.1",
625 |         "serialize-javascript": "^4.0.0",
626 |         "terser": "^5.0.0"
627 |       }
628 |     },
629 |     "rollup-pluginutils": {
630 |       "version": "2.8.2",
631 |       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
632 |       "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
633 |       "dev": true,
634 |       "requires": {
635 |         "estree-walker": "^0.6.1"
636 |       },
637 |       "dependencies": {
638 |         "estree-walker": {
639 |           "version": "0.6.1",
640 |           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
641 |           "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
642 |           "dev": true
643 |         }
644 |       }
645 |     },
646 |     "sade": {
647 |       "version": "1.7.4",
648 |       "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
649 |       "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
650 |       "requires": {
651 |         "mri": "^1.1.0"
652 |       }
653 |     },
654 |     "safe-buffer": {
655 |       "version": "5.2.1",
656 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
657 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
658 |       "dev": true
659 |     },
660 |     "semiver": {
661 |       "version": "1.1.0",
662 |       "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
663 |       "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg=="
664 |     },
665 |     "serialize-javascript": {
666 |       "version": "4.0.0",
667 |       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
668 |       "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
669 |       "dev": true,
670 |       "requires": {
671 |         "randombytes": "^2.1.0"
672 |       }
673 |     },
674 |     "sirv": {
675 |       "version": "1.0.11",
676 |       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
677 |       "integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
678 |       "requires": {
679 |         "@polka/url": "^1.0.0-next.9",
680 |         "mime": "^2.3.1",
681 |         "totalist": "^1.0.0"
682 |       }
683 |     },
684 |     "sirv-cli": {
685 |       "version": "1.0.11",
686 |       "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
687 |       "integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
688 |       "requires": {
689 |         "console-clear": "^1.1.0",
690 |         "get-port": "^3.2.0",
691 |         "kleur": "^3.0.0",
692 |         "local-access": "^1.0.1",
693 |         "sade": "^1.6.0",
694 |         "semiver": "^1.0.0",
695 |         "sirv": "^1.0.11",
696 |         "tinydate": "^1.0.0"
697 |       }
698 |     },
699 |     "source-map": {
700 |       "version": "0.7.3",
701 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
702 |       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
703 |       "dev": true
704 |     },
705 |     "source-map-support": {
706 |       "version": "0.5.19",
707 |       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
708 |       "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
709 |       "dev": true,
710 |       "requires": {
711 |         "buffer-from": "^1.0.0",
712 |         "source-map": "^0.6.0"
713 |       },
714 |       "dependencies": {
715 |         "source-map": {
716 |           "version": "0.6.1",
717 |           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
718 |           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
719 |           "dev": true
720 |         }
721 |       }
722 |     },
723 |     "sourcemap-codec": {
724 |       "version": "1.4.8",
725 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
726 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
727 |       "dev": true
728 |     },
729 |     "supports-color": {
730 |       "version": "5.5.0",
731 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
732 |       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
733 |       "dev": true,
734 |       "requires": {
735 |         "has-flag": "^3.0.0"
736 |       }
737 |     },
738 |     "svelte": {
739 |       "version": "3.32.1",
740 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.32.1.tgz",
741 |       "integrity": "sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==",
742 |       "dev": true
743 |     },
744 |     "terser": {
745 |       "version": "5.5.1",
746 |       "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
747 |       "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
748 |       "dev": true,
749 |       "requires": {
750 |         "commander": "^2.20.0",
751 |         "source-map": "~0.7.2",
752 |         "source-map-support": "~0.5.19"
753 |       }
754 |     },
755 |     "tinydate": {
756 |       "version": "1.3.0",
757 |       "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
758 |       "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w=="
759 |     },
760 |     "to-regex-range": {
761 |       "version": "5.0.1",
762 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
763 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
764 |       "dev": true,
765 |       "requires": {
766 |         "is-number": "^7.0.0"
767 |       }
768 |     },
769 |     "totalist": {
770 |       "version": "1.1.0",
771 |       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
772 |       "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
773 |     },
774 |     "wrappy": {
775 |       "version": "1.0.2",
776 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
777 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
778 |       "dev": true
779 |     },
780 |     "ws": {
781 |       "version": "6.2.1",
782 |       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
783 |       "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
784 |       "dev": true,
785 |       "requires": {
786 |         "async-limiter": "~1.0.0"
787 |       }
788 |     }
789 |   }
790 | }
791 | 


--------------------------------------------------------------------------------