Developing Web Components with TypeScript: Native Web Development Using Thin Libraries

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Introduction
	The Global Picture
		Components
		Component Architecture
		Parts of a Component
	The Rise of Thin Libraries
		Single-Page Apps
		The HTML 5 API
		The Template Language
		Smart Decorators
		TypeScript
		WebPack
	Compatibility
	Other Libraries
	Summary
Chapter 2: Making Components
	Basics
		A First Example
		Observing Unset Elements
		Custom Elements AP
	Observing Attributes
		Attribute Data
		Discussing the Options
			The MutationObserver Type
			Proxy
	Rendering Order
		Delaying Access
		Introducing a Life Cycle
	Customized Built-in Elements
	Advantage of TypeScript
		Using Generics
	Final Thoughts on Generics
	Summary
Chapter 3: Shadow DOM
	Preparation
	Built-in Shadow DOM
	Shadow Tree
		Terms
		Using Shadow Trees
			Limitations
			Modes
	Encapsulation
		Shadow DOM without Components
		Closing the Shadow Root
	The Shadow Root API
		Properties
		Methods
	Summary
Chapter 4: Events
	Events in ECMAScript
		Event Handlers
		Assigning a Handler
		Choosing the Right Events
		HTML 5 Standard Events
		Event Bubbling
			The Event Object
			Stopping Other Handlers
		Other Types of Propagation
		Event Capturing
		Removing Handlers
		Multiple Handlers
		Stopping Default Behavior
		Follow-Up Events
		Passive Events
		Document Handlers
	Events in Web Components
		Events and Slots
		Event Bubbling
		Composed Events
	Custom Events
		Synthetic Events
		The dispatchEvent API
		Customize Events
	Smart Events
	Summary
Chapter 5: Templates
	HTML 5 Templates
		How It Works
	Activating a Template
		Clone or Import
	Templates and Web Components
		Shadow DOM
		Using createShadowRoot
		Shadow DOM and innerHTML
	Nested Templates
	Template Styles
		Applying Global Styles
	Summary
Chapter 6: Slots
	Slots Explained
		Slot and Templates
		Shadow DOM
	Slots and Components
	Slot Behavior
		Slot Positions
		Multiple Slots
	Default Slots
	Slot Events
		Adding an Event Handler
	Updating Slots
		Slot Change Events
		The Slot API
	Summary
Chapter 7: Components and Styles
	Style Behavior
		Accessing the Host
		Cascading
		Selecting a Host Element
		Accessing the Host Context Aware
	Styling Slotted Content
	CSS Hooks
	Ignoring Styles
	Parts
		The Part Attribute and Pseudo Selector
		Forwarding Parts
		The Part API
		The Future of Parts
	Summary
Chapter 8: Making Single-Page Apps
	The Architecture of SPAs
	The Router
		Monitoring the URL
		Configuring the Router
		Defining the Target
	Router Implementation
	The History API
		The History Stack
		The history Object
		History Change Events
		Final Thoughts on the History API
	Stateful Apps
		Flux
			The Flux Parts
			Tell Tales
		Implementing Flux
			Overview
			The Demo Component
			The Store
			Merging Stores
			The Observer
	Summary
Chapter 9: Professional Components
	Smart Selectors
		The Smart Selector Decorator
		How Does It Work?
	Data Binding
		Why Data Binding?
		Implementing Data Binding
		Discussion
		Forms and Validation
		Sketching a Solution
			The Required Decorator
			The View Model
			The Example Component
	UI-less Components
		Directives
		Discussion
	Template Engines
		Mustache
		Handlebars
		jQuery Templating
		Lit Element (lit-html)
		JSX/TSX
	Making Your Own Using JSX
		Activating JSX
		Implementing JSX
		Extending the Syntax
	Summary
Appendix A:
Introducing @nyaf
	Elevator Pitch
	Parts
	Project Configuration with TypeScript
		The Entry File
		TypeScript Configuration
		WebPack Configuration
	Project Configuration with Babel
		Setting Up the Environment
		Project Dependencies
		Configuring Babel
		Configuring WebPack
		Writing Components
		Improvements
		Bundle Size
		The @nyaf CLI
	Components
		Registration Support
	The First Component
	Template Features
		n-if, n-else
		n-hide, n-show
		n-expand
			Quick Expanders
	n-repeat
		The n-repeat Component
		The n-repeat Attribute
	JSX/TSX
		Introduction
		JSX Scope
	Select Elements
	Smart Components
		Repeater - n-repeat
		Transparent Outlet n-outlet
		Render Finisher n-finish
	The Life Cycle
	State and Properties
		State
		Properties
		Accessing Properties
		Properties and Models
	Directives
		Making a Directive
			Registration
			Activation
		Working with Host Elements
	Events
		n-on-event
		Syntax Enhancements
			Short Form
			Additional Parameters
		Async
		Custom Events
	Router
		Registering Routes
		Using Routes
		Named Routes
		Additional Data
			Special Values
		Navigating to Route
		Route Events
	Shadow DOM
		Example with Shadow DOM
			Single Tab
		Tabs Container
		Usage of the Tabs
		Shadow DOM and Styles
	Services
	Forms Module
		How It Works
		View Models in Components
	View Models
		Why Use View Models?
		Creating a View Model
		Validation Decorators
		UI Decorators (Property Level)
			Mapping the Properties
			Special Decorators
		Providing the View Model
	Data Binding
		Template Language Enhancements
		Terms and Parts
			View Model
			IModel Interface
			Binding Handlers
			Smart Binders
	Creating Forms
		Standard Binding Handlers
	Smart Binders
		Multi-Attribute Binding
		Even More Smartness
	Validation
		View Model Decorators
		State
		Binding to Validators
		Handler Behavior
	Additional Information
	Custom Binders
		Implementing a Custom Binder
			How It Works
		A Simple Binder
	Installation of Forms Module
		Dependencies
	The Flux Store
		How It Works
		Actions
		Reducer
			Return Value Considerations
		Store and Dispatcher
		Using the Store
	Type Handling in Typescript
		Example
	Global and Local Stores
		Merge Strategy
	Disposing
		Example
		General Usage
	Effects Mapping
		The Effects Decorator
		Using the Effects Decorator
			The Selector
			The Trigger
			The Action Definition
			The Parameter
	Automatic Updates
		The Updates Decorator
		Using the Updates Decorator
			The Selector
			The Store
			The Target
	Installation
		Dependencies
	Summary
Index