Build Large and Scalable front-ends that leverage component isolation, a centralized state manager, internationalization, localization, Custom Component Libraries, API-client code that easily can switch between mocked data and live data and more.

nexusstc/Large Scale Apps with Svelte and TypeScript/2a72c306203dbe8238db54286ffba0f9.pdf

LaTeX with hyperref package

producers:
XeTeX 0.99998

{"edition":"2023-01-30","last_page":272,"publisher":"leanpub.com"}

Table of Contents 3
LARGE SCALE APPS WITH SVELTE AND TYPESCRIPT 8
Preface 10
Goal 11
Audience 11
Text Conventions 11
Thanks 12
About me 12
Prerequisites 13
Companion Code 14
Chapter 1 - Setting Up The Project 15
Create Project Wizard 15
Chapter 1 Recap 18
Chapter 2 - Your First Component 19
The Items List 19
ItemsList Component Requirements 19
ItemsList Component Code 20
App.svelte 21
Chapter 2 Recap 25
Chapter 3 - Data Model Interfaces 26
Models Directory 26
Interface ItemInterface 26
ItemsList Component 28
App.svelte 29
Chapter 3 Recap 31
Chapter 4 - Adding Events To the Items Component 32
ItemsList Component 32
Chapter 4 Recap 35
Chapter 5 - Intro to Unit Testing While Refactoring a Bit 36
ItemComponent 36
Add unit tests support to our project 40
ItemComponent Unit Tests 42
ItemsList component 48
Chapter 5 Recap 51
Chapter 6 - State Management 52
Store Interfaces 53
Store Implementation 60
Items.view.svelte 64
App.svelte 66
Web Browser 66
ItemsList.component.svelte 67
Back to the Web Browser 68
Loader Component 68
Chapter 6 Recap 72
Chapter 7 - Api Client 73
API Client Overview 73
Domains 75
The Main ApiClient 75
Items domain Api Client 76
Mock and Live Api Clients 81
Environment Variables 87
Api Client Provider 89
Store Instance updates 91
Alternatives 94
Chapter 7 Recap 102
Chapter 8 - Enhance the Api Client 103
HttpClient Interfaces and Models 103
UrlUtils Unit Tests 120
HttpClient: Unit Tests 121
ItemsApiClientModel Update 125
Chapter 8 Recap 127
Chapter 9 - App Configuration 128
vite-env.d.ts updates (or env.d.ts) 128
.env files updates 129
Config Interface 130
Config files 131
tsconfig.json updates 135
Config files map 136
Config provider 137
Unit Tests 139
HttpClient code updates 143
Api Client code updates 144
Chapter 9 Recap 147
Chapter 10 - Localization and Internationalization - Language Localization 148
Plugins: i18next, svelte-i18n 148
Config updates 149
Translation JSON data 151
API Client updates 153
Updates to ApiClient.interface.ts 156
Updates to ApiClient instances 157
i18n initialization and useLocalization hook 159
App.svelte updates 163
Browser 165
Chapter 10 Recap 170
Chapter 11 - Localization and Internationalization - Number and DateTime Formatters 171
Directory localization/formatters 171
Chapter 11 Recap 184
Chapter 12 - Adding Tailwind CSS 185
Chapter 12 Recap 189
Chapter 13 - Intro to Primitives 190
Atomic Design and Similar Approaches 190
Conventions 190
General Strategies 191
Text Elements 192
Primitives View 193
Chapter 13 Recap 196
Chapter 14 - More Primitives 197
Button Elements 197
Primitives View - update 199
Toggle/Checkbox Elements 201
Primitives View - one more update 203
Chapter 14 Recap 208
Chapter 15 - A Primitive Modal 209
Icon: ElIconAlert 210
Interface ModalProps 210
File ElModal.svelte 211
File useModal.ts 215
Updates to Primitives.view.svelte 216
Browser 218
Chapter 15 Recap 222
Chapter 16 - Higher-level components 223
Item Component - updates 223
ItemsList Component - updates 227
Summary 228
Chapter 16 Recap 229
Chapter 17 - Creating Component Libraries 230
Create my-component-library 230
Chapter 17 Recap 249
Chapter 18 - Creating a JavaScript library 250
Create my-js-helpers 250
Chapter 18 Recap 259
Chapter 19 - Publish a library as a NPM package 260
Create an NPM user account 260
Create an Organization under your NPM profile 260
Update my-js-helpers package.json 261
Publishing the library 261
Consuming your NPM package 262
Chapter 19 Recap 263
(More Chapters Coming Soon) 264
Naming Conventions 265
Coding Standards 265
Resources 269
Websites 269
Tutorials 270
Blogs 271
Books 272

2023-02-20