Svelte recipes¶

recipes-mvp¶

MVP repo to just start collecting recipes for Svelte Community. The core inspiration is vue cookbook.

All examples have some variation "with Svelte" appended to them in an attempt to optimize for searchability.

NOTE: This is a new project! What you see below is an evolving work in progress. Please see Project Goals for more. We actively need contributions of ideas and content!

Newcomers to Svelte should:

1. go thru the Svelte tutorial (30 mins)
2. read thru the Svelte docs (30 mins)
3. or go thru the Svelte workshop (3 hrs)

First!

Table of Contents¶

• Build Setup Recipes
  • Using Svelte with other technologies (e.g. PostCSS, SCSS, TypeScript, and Babel)
  • Transpiling ES6 to ES5 for Legacy Browser (IE11) Support with Babel
  • Using Future JS Syntax in Svelte with Babel
  • Using TypeScript with Svelte
  • Using PostCSS/SCSS with Svelte
  • Writing Your Own Preprocessors
  • How to make a pre-processor that makes it possible to use PUG/Jade
• Svelte Language Fundamentals
  • Reactivity
  • "Scoped Global" CSS
  • Passing Values from JS to CSS Variables
• Svelte Component Recipes
  • Using Fetch to Consume APIs with Svelte
  • Getting references to Components generated in an #each block
  • Passing attributes to component DOM element
  • Form Validation with Svelte
  • Client-Side Storage with Svelte
• Svelte Store Recipes
  • Stores
• Svelte Action Recipes
  • Creating Custom Scroll Actions with Svelte
• Svelte Transition Recipes
• Svelte App-Level Design Patterns
  • Routing with Svelte
  • Authentication with Svelte
  • Server Side Rendering
• Svelte Performance Tips
  • Avoiding Memory Leaks with Svelte
• Testing and Debugging Svelte
  • Unit Testing Svelte Components
  • Debugging Svelte Apps in VS Code
• Publishing Svelte Components/Deploying Svelte Apps
  • Packaging Svelte Components for npm
  • Dockerize a Svelte App
• Special Usecase Walkthroughs
  • Editable SVG Icon Systems with Svelte
  • Practical use of Svelte slots with Google Maps
  • Create a CMS-Powered Blog with Svelte