توسعهٔ کامپوننت‌های وب با سوئلته: ساخت کتابخانه‌ای از کامپوننت‌های رابط کاربری و ابزارهای قابل استفاده مجدد

Leverage the power of Svelte to quickly produce the foundations of a framework-agnostic component library that can extend and develop over time. This is a project-oriented book that simplifies setting up the skeleton of the library and adding components, using little more than a text editor or free software. You'll gain a starting baseline that can be used to develop future projects or incorporated into an existing workflow. You'll take development to the next level and can use this knowledge to create components with any framework, such as React, Angular or Vue.js, not just Svelte. Developing Web Components with Svelte is an excellent resource for getting acquainted with creating and maintaining a component library using a phased approach. It takes the view that you don't have to create something complex and unwieldy. Instead, you can start building something quickly, then extend it as needs dictate over time, without sacrificing speed or features. You'll see how to develop cleaner components in a quick, clear and straightforward way. The components you create in this project can be made available in one of the world's most extensive component ecosystems to be usable by other frameworks, making them genuinely reusable. In short, Svelte offers plenty of opportunities as it is based on Node.js and JavaScript making Svelte a powerful package to work from. What You'll Learn Use the Svelte framework to rapidly create and deploy the foundation of a component library that is versatile and performant Review developing and customizing components based on our needs Work through a real-world project to help solidify skills learned from the book and put them into practice Who This Book Is For Website developers, familiar with JavaScript, who are keen to learn how to leverage the Svelte framework fast Agile development teams, where time is of the essence, and the pressure is on to deliver results quickly Developers who want to focus on simplicity, to produce efficient and optimized content in modern browsers using tools readily available Table of Contents About the Author Acknowledgments Introduction Chapter 1: Getting Started What Are Web Components? Taking First Steps Breaking Apart the Code Background to the Project Our Approach and Strategy Determining Our Needs Setting Up the Project Understanding What Happened Integrating a Playground Understanding What Happened Summary Chapter 2: Creating Basic Components Creating the Input Field Component Breaking the Code Apart Hooking the Component into Storybook Understanding What Happened Adding Variants Constructing the Checkbox Component Exploring the Code Adding Variations in Storybook Breaking the Code Apart Adapting for Radio Buttons Constructing the Slider Component Adding the Component to Storybook Exploring the Code Summary Chapter 3: Building Action Components Creating the SelectBox Component Understanding What Happened Adding the Component to Storybook Exploring the Code in Detail Creating the Spinner Component Understanding What Happened Adding the Component to Storybook Breaking Apart the Code Creating Variants Breaking Apart the Code Creating the Accordion Component Understanding What Happened Adding the Component to Storybook Reviewing the Code Summary Chapter 4: Building the Navigation Components Creating the Breadcrumb Component Understanding What Happened Adding the Component to Storybook Exploring the Code in Detail Building a SideBar Component Breaking Apart the Code Using a Style Library – A Postscript Adding the Component to Storybook Understanding the Changes Made Constructing the Tabs Component Exploring the Code Changes Accessibility – A Note Hooking the Component into Storybook Understanding the Changes Made Creating a Variant Summary Chapter 5: Creating Notification Components Creating the Alert Component Sourcing the Icons Building the Component Understanding What Happened Adding the Component to Storybook Exploring the Code Changes Creating a Variant Breaking Apart the Code Creating the Dialog Component Understanding What Happened Adding to Storybook Creating the Tooltip Component Understanding What Happened Adding the Component to Storybook Exploring the Code Changes Creating a Variant Summary Chapter 6: Creating Grid Components Determining the Approach Building the Table Component Understanding What Happened Creating the Grid Component Breaking Apart the Code Creating the Cell Component Understanding What Happened Adding to Storybook Exploring in Detail Adding a Variant Understanding How It Works Summary Chapter 7: Writing Documentation Setting the Scene Adding Status Badges Understanding What Happened Customizing the Badges Plug-in Configuration Updating Our Documentation – Our Approach Writing Documentation for Basic Components Breaking Apart the Changes Updating Documentation for Action Components Exploring the Changes Made Summary Chapter 8: Documenting More Components Adding the Remaining Documentation Adding Documentation for Notification Components Exploring the Code Changes in Detail Updating Documentation for Navigation Components Breaking Apart the Code Changes Updating Documentation for Grid Components Understanding What Changed A Final Tidy-Up Summary Chapter 9: Testing Components Setting Up the Testing Environment Breaking Apart the Code Changes Testing the Components Writing Tests for Our Library Exploring the Changes in Detail Bundling the Components Configuring the Build Process Exploring the Changes in Detail Running the Build Process Breaking Apart the Code Creating Demos in a Test Environment Breaking Apart the Code Testing with Other Frameworks Understanding What Happened Summary Chapter 10: Deploying to Production Performing Final Checks Understanding the Deployment Process Publishing to GitHub Setting Up a GitHub Pages Repository Uploading Components to GitHub Exploring the Code in Detail Releasing Components to npm Building a Demo Breaking Apart the Code Changes Publishing Storybook to Netlify Setting Up Netlify Understanding the Changes Made Adding Polish to the Repository Adding a Custom Domain Name Breaking Apart the Code Summary Chapter 11: Taking Things Further Reviewing the Site Taking the Next Steps – Setting a Road Map Converting Our Next Component Dissecting the Code Adding to Storybook Understanding the Changes Made Remember That RadioButton Component? Adding to Storybook Breaking Apart the Code Summary Index