book

Real-World Svelte

Name: Real-World Svelte
Author: Tan Li Hau
ISBN: 9781804616031

by Tan Li Hau

December 2023

Intermediate to advanced

282 pages

6h 25m

English

Packt Publishing

Read now

Unlock full access

Real-World Svelte
ForewordContributorsAbout the authorAbout the reviewer
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Part 1: Writing Svelte Components
Chapter 1: Lifecycles in Svelte
Technical requirementsUnderstanding the Svelte lifecycle functionsInitializing the componentMounting the componentUpdating the componentDestroying the componentThe one rule for calling lifecycle functionsRefactoring lifecycle functionsWhich component to register?Reusing lifecycle functions in Svelte componentsExercise 1 – Update counterComposing lifecycle functions into reusable hooksCoordinating lifecycle functions across componentsExercise 2 – Scroll blockerSummary
Chapter 2: Implementing Styling and Theming
Technical requirementsStyling Svelte components in six different waysStyling with the style attributeUsing style: directivesAdding the <style> blockAdding the class attributeSimplifying the class attribute with the class: directiveApplying styles from external CSS filesChoosing which method to style Svelte componentsStyling Svelte with Tailwind CSSSetting up Tailwind CSSTheming Svelte components with CSS custom propertiesDefining CSS custom propertiesExample – implementing a dark/light theme modeAllowing users to change the styles of a componentAligning the fallback valueSummary
Chapter 3: Managing Props and State
Technical requirementsDefining props and stateDefining propsDefining stateProps versus stateUnderstanding bindingsOne-way versus two-way data flowDeriving states from props with a reactive declarationManaging complex derived statesUpdating props using derived statesSummary
Chapter 4: Composing Components
Technical requirementsManipulating how a child component looksPassing dynamic content through slotsProviding default slot contentHaving multiple slots with named slotsPassing data through slot propsRendering different HTML element or component typesCreating recursive components for recursive dataExample – a JSON tree viewerThe Container/Presentational patternSummary
Part 2: Actions
Chapter 5: Custom Events with Actions
Technical requirementsDefining actionsReusing DOM event logic with custom eventsEncapsulating logic into a componentEncapsulating logic into an actionPassing parameters to an actionExample – validating form inputs with custom eventsExercise – creating a drag-and-drop eventSummary
Chapter 6: Integrating Libraries with Actions
Technical requirementsIntegrating vanilla JavaScript UI libraries into SvelteWhy use Svelte actions to integrate a UI library?Using Svelte actionsAdding data to Svelte actionsAn alternative to Svelte actionsChoosing between Svelte actions and Svelte componentsExample – integrating Tippy.jsExample – integrating CodeMirrorUsing UI libraries written in other frameworksCreating components in various frameworksCleaning up the components in various frameworksUpdating the component in various frameworksIntegrating react-calendar into SvelteSummary

Chapter 7: Progressive Enhancement with Actions
Technical requirementsWhat is progressive enhancement?Progressively enhancing the web experienceBuilding web pages in layersSvelte actions for progressive enhancementsExample – previewing a link with a <a> elementExample – progressively enhancing a formThe default form behaviorImplementing the enhance actionSummary
Part 3: Context and Stores
Chapter 8: Context versus Stores
Defining Svelte contextUsing an object as a context keyChanging the context valueDefining the Svelte storeUsing the observer patternDefining the subscribe functionDefining a Svelte storeCreating Svelte stores with built-in functionsAuto-subscribing to a Svelte storeChoosing between a Svelte context and a Svelte storePassing dynamic context using a Svelte storeSummary
Chapter 9: Implementing Custom Stores
Technical requirementsCreating a Svelte store from user eventsEnsuring the event listener is only added onceExerciseCreating an undo/redo storeImplementing the undo/redo logicExerciseCreating a debounced higher-order Svelte storeDebouncing store value changesSubscribing and unsubscribing original store on demandDeriving a new Svelte store with the derived() functionUsing the derived methodExerciseSummary
Chapter 10: State Management with Svelte Stores
Technical requirementsManaging states with Svelte storesTip 1 – simplify complex state updates with unidirectional data flowTip 2 – prefer smaller self-contained state objects over one big state objectTip 3 – derive a smaller state object from a bigger state objectUsing state management libraries with SvelteExample – using Valtio as a Svelte storeExercise – transforming an XState state machine into a Svelte storeSummary
Chapter 11: Renderless Components
Technical requirementsWhat are renderless components?Exploring reusable renderless componentsExample – building a renderless carousel componentWriting a renderless carousel componentExercise 1 – a renderless autocomplete componentTurning a declarative description into imperative instructionsWriting declarative Canvas componentsExercise 2 – expanding shape componentsSummary
Chapter 12: Stores and Animations
Technical requirementsIntroducing the tweened and spring storesUsing the tweened and spring storesUsing tweened and spring stores with arrays and objectsExamples – creating an animated graph with the tweened and spring storesExercise – creating an animating line graphCreating custom tweened interpolatorsExamples – creating an animated image previewSummary
Part 4: Transitions
Chapter 13: Using Transitions
Technical requirementsAdding transitions to elementsSvelte’s built-in transitionsCustomizing a transitionWhen are the transitions played?Handling mixed transition and static elementsOther Svelte logical blocks for transitionsThe global modifierHow Svelte transition works under the hoodCreating animations with CSSCreating animations with JavaScriptAnimating transitions in SvelteSummary
Chapter 14: Exploring Custom Transitions
Technical requirementsThe transition contractThe css functionThe tick functionWriting a custom CSS transition using the css functionWriting a custom JavaScript transition using the tick functionSummary
Chapter 15: Accessibility with Transitions
Technical requirementsWhat is web accessibility?Understanding user preference with prefers-reduced-motionReducing motion for Svelte transitionHaving alternative transitions for inaccessible usersSummary
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youDownload a free PDF copy of this book

Content preview from Real-World Svelte

2 Implementing Styling and Theming

Without styling, an h1 element within a component will look the same as another h1 element from another component. Svelte allows you to use Cascading Style Sheets (CSS), a language used for styling and formatting web content, to style your elements, giving them a different look and feel.

In this chapter, we will start by talking about different ways to style a Svelte component. We will then see some examples, including integrating a popular CSS framework, Tailwind CSS, into Svelte.

Following that, we will talk about themes. When you have a set of styles consistently applied throughout Svelte components, you’ll see an overall styling theme in your components. We will talk about how to synchronize the styles ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781804616031

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Real-World Svelte

by Tan Li Hau

2

Implementing Styling and Theming

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.