Svelte

Svelte is a compiling method that effciently consolidates functions/animation/UX with easy to use code.
The result is a very fast shipping code that is easily rendered, without overhead of a library and dependency.

Core Concepts

Variables
Use the variable in regular HTML for Declarative Modeling.
Svelte VariableSvelte Variable Code
Events
Use Local/Nested/Fowarded events with hierarchy in File Tree Publishing
Svelte Variable Code
Loops
Svelte Each Loop

Svelte Animation

Svelte Each Loop Modifier
  • Fade - opacity 0-1
    Blur - opacity and blur
    Fly - x and y along with opacity
    Slide - heightScale - start: scale, opacity
    Draw - SVG Clipping on spline

    Animation also supports: 3D/Canvas, SVG,  Vanilla CSS without need to State Manage, does not rely on DOM mount and unmount. Is Semantic and WCAG Accessible.

Svelte Examples

Svelte and Three JS

Svelte and interactive three js library with html based button and physics.
Create Vite app/select Svelte
Vite
npm install threlte

npm install @threlte/core @threlte/extras three
Github SampleThrelte Install

Svelte Kit

Svelte does not have a Router and does not render on Server Side.
Svelte Kit is a File System with Multi Page Application/Naming Tree.
Recent breaking changes to File System/Naming/Loading.
Svelte Kit is a beta release.

Svelte Kit

Svelte does not have a Router and does not render on Server Side.
Svelte Kit is a File System with Multi Page Application/Naming Tree.
Recent breaking changes to File System/Naming/Loading.
Svelte Kit is a beta release.
YSL - Native Vanilla Compile Enterprise Builds

Svelte

Breaking Changes

File System / Naming Convention updates before 1.0 Release

Prefixs have been updated to make the logic simpler
-legibility improvements
-files are organized into more functional groupings

Svelte File System
Sveltekit updates

Skeleton

getting started

npm init svelte@next [nameofyourproject]

Follow stepped choices
Skeleton Project
No Typescript
ES Lint
Prettier

cd [nameofyourproject]

npm install

Sveltekit

Loading Data