Svelte-Sapper.md

Svelte

Svelte Docs
Svelte Repl
Turing Instructor Walk Through
Svelte Atom Package for Readability

Setup with Svelte Repl

The Svelte Repl is the easiest way to begin

• Choose a template that works for you
• Download the svelte file and uncompress it
• Move the app location to desired directory
• Cd to the downloaded svelte app and run npm install
• Run npm run dev to set up the development server

You should now see your app template locally at `localhost:5000`

Writing Svelte

Basically Plain HTML and JavaScript

• CSS stays scoped to that file in <style></style> tags
• javascript logic goes between <script></script> tags
• follow up with basic HTML

<script>
  // logic goes here
</script>

<style>
  /* style goes here */
</style>

<!-- markup language goes here -->

Script

• contains Javascript that runs when a component instance is created
• Svelte uses the export keyword to mark a variable as a property accessible to the consumers of the component

<script>
	export let foo;
	// Values that are passed in as props are immediately available
	console.log({ foo });
</script>

• Svelte allows you to use keywords as prop names

<script>
	let className;
	// creates a `class` property, even though it is a reserved word
	export { className as class };
</script>

CSS Styling

• Each tag element <p>, <h1>, <ul> will only be affected by the <style> in that component
• Note: To apply styles globally use :global(...) modifier, ie: :global(body) { margin: 0 }

<script>
   let name = 'Megan';
   let string = 'Hello World!';
</script>

<style>
   p {
     color: rebeccapurple;
     font-family: 'Comic Sans MS', cursive;
     font-size: 2em;
   }
</style>

<h1>Hello {name}!</h1>
<p>{name} says {string} </p>

Reactive Assignments

• To change a components state and trigger a re-render, just assign to a locally declared variable
• Note: Because Svelte's reactivity is based on assignments, using array methods like .push() and .splice() won't automatically trigger updates. Instead call a function update.

<script>
  let adjective = 'cool';
  
  function makeRadder() {
    adjective = 'tubular';
  }
</script>

<h1>Nick is totally {adjective}</h1>
<button on:click = {makeRadder}> Rad </button>

• $: Marks a statement as Reactive. Any top-level statement can be prefaced with this to make reactive

<script>
   export let title;
  
   // this will update `document.title` whenever the `title` prop changes
   $: document.title = title;

   $: {
     console.log(`multiple statements can be combined`);
     console.log(`the current title is ${title}`);
   }
</script>

Embedded HTML Attributes

<script>
   let name = 'Charles';
   let string = '<strong>French Fries</strong>';
</script>

<h1>Hello {name}!</h1>
<p>{name}'s favorite food is {@html string} </p>

Template Syntax

• A lowercase tag <div> denotes a regular HTML element
• An uppercase tag <Widget> denotes a component

<script>
   import Widget from './Widget.svelte'
</script>

<div>
   <Widget />
</div>

• Attributes work like their HTML counterparts

<div class='foo'>
   <button disabled> Can't touch this </button>
</div>

• Values mat be unquoted <input type=checkbox>
• Attribute values can contain Javascript expressions <a href='page/{p}'>page {p}</a>
• Or thet can be Javascript expressions <button disabled={!clickable}>...</button>

Conditional Rendering

<script>
  let sleepy = true;
</script>

<label>
  <input
    type=checkbox
    bind:checked = {sleepy} >
    I didn't sleep well
</label>

{#if sleepy}
  <h1>Just five more minutes...</h1>
{:else} || {:else if !sleepy}
  <h1>Let's start the day!</h1>
{/if}

Nesting Components

<script>
  import Nested from './Nested.svelte'
  import Another from './Another.svelte'
</script>

<h1>Here's this component</h1>
<p>...and there's the nested component</p>
<Nested />
<Another />

• Components stay scoped, so if <Nested /> has styling to be comic sans, it would not make anything else comic sans
• Automatic Scoping

Creating a Component

const component = new Component(options)

• A client-side component is a Javascript class.

import App from './App.svelte'

const app = new App({
   target: document.body,
   props: {
      //assuming App.svelte contains something like 'export let answer':
      answer: 42
   }
});

Initialization Options

• target - An HTML element to render to. Required.
• anchor - A child of target to render the component immediately before.
• props - An object of properties to supply to the component.

Sapper

• Handles Routing, Code Splitting, Server-side rendering and more