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

vladd-png/Svelte-Sapper.md