Adding testing packages
Array appending
Append elements to arrays by targeting the next index via state.tasks.length.
Bracket notation for dashed names
Use bracket notation, e.g. styles["foo-with-dash"], when style names contain dashes.
CatchAll route (404)
A catchall route for pages not found at any nested level, using * to retrieve the rest of the path.
Class and Style Bindings
Dynamically style components with plain CSS using class and style bindings.
Components testing
Testing in context
Supports testing components within context.
createEffect
Runs side effects reactively when tracked state changes.
createSignal
Creates a reactive signal with getter and setter for managing state.
createStore
Creates a reactive store object for complex state management.
createResource
Specialized signal for managing asynchronous data fetching with loading, success and error states.
CSS Frameworks
Works with CSS frameworks such as Tailwind CSS and UnoCSS.
CSS-in-JS
Supports CSS-in-JS libraries like Solid Styled Components and Solid Styled JSX.
CSS module file extensions
CSS module files conventionally use the .module.css extension; .scss and .sass extensions are also supported.
CSS modules
CSS files where class names, animations, and media queries are scoped locally by default, encapsulating styles within components.
CSS Preprocessors
Supports CSS preprocessors such as SASS and LESS.
Getting started
Importing and applying styles
Import the styles object from a CSS module and reference its properties in JSX class attributes.
LESS styling support
Import .less files in components; Vite compiles them to CSS on demand.
Mixing with regular class names
Combine CSS module syntax with regular string class names in the same class attribute.
mutate
Method on the resource's second output enabling optimistic mutations with instant feedback.
Performant
Fine-grained reactivity updates only what has changed, for faster load times and smoother performance.
Testing through Portal
Supports testing components rendered through Portal.
Powerful
Uses less memory and processing power, enabling complex applications without compromising functionality.
Pragmatic
Provides freedom to choose the strategies and practices that work best for you.
Predictable API
Clear and predictable API makes developers' work simpler and more efficient.
Productive
Clear and predictable API makes developers' work simpler and more efficient.
Rendering the component
Responsive UI
Designed to build responsive and high-performing user interfaces.
Root level layout
A layout that does not update on page change, ideal for top-level navigation and context providers.
Route component
Each route is added to the Router using the Route component with a path and component.
Router component
Renders the Router component to match the URL and display the desired page.
SASS Support
Change .css file extensions to .scss or .sass and Vite compiles SASS to CSS on demand.
@solidjs/testing-library
Library to simplify testing components, directives, and primitives with automatic cleanup.
SolidStart configuration
Create a vitest.config.ts file when using SolidStart.
SolidStart configuration
Store mutations
The second returned value modifies the store, adding or updating properties.
Store state access
Store values are accessed directly through the first returned value.
Styled components
Create styled components with type-safe props using Macaron.
Suspense
Boundary component that shows a fallback while all async events resolve.
Testing
Testing configuration
Testing in context
Testing packages explanations
Testing through Portal
TypeScript configuration
Add @testing-library/jest-dom to tsconfig compilerOptions types.
TypeScript configuration
Vitest recommended
Vitest is the recommended testing framework for Solid applications.
Writing tests