DOCSEARCHbyAlgolia
Submit Docs

SolidJS Documentation

repository·main·Indexed 43 days ago

https://github.com/solidjs/solid-docs

Official documentation for the SolidJS framework, including guides, API references, and tutorials. This repository contains the source code for docs.solidjs.com, built with SolidBase and the Osmium theme.

Tokens
203.3K
Snippets
676
Records
842
Agent score
54%

What's inside SolidJS

  1. Overview of Solid Meta

    main

    Solid Meta is a library for asynchronous, SSR-ready document head management in Solid applications. It allows you to define document.head tags (such as meta, title, and link tags) at any level of your component hierarchy. This is particularly useful for managing SEO and metadata when the necessary contextual information is located deep within your component tree.

    Key features include:

    • Asynchronous SSR Support: Designed to work seamlessly with asynchronous rendering.
    • Flexible Placement: Define tags anywhere in your component hierarchy.
    • Zero Dependencies: Lightweight and easy to integrate.

  2. Overview of SolidStart v2

    main

    SolidStart v2 is a full-stack framework built on top of Solid v1 and Vite v8+. It provides a unified development experience for building server-side rendered (SSR) and client-side applications.

    Key features and architectural changes in v2 include:

    • Vite Environment API: Uses Vite's Environment API for both client and server builds, enabling seamless integration with deployment-specific Vite plugins.
    • Deployment Compatibility: Works with deployment plugins like Nitro v3, the Cloudflare Vite plugin, and the Netlify Vite plugin.
    • Router Agnostic: Does not force a specific router; you can use the official Solid Router v1 or TanStack Solid Router v1.

  3. Overview of Solid Router

    main

    Solid Router is a universal routing solution designed for Solid applications. It enables both client-side and server-side navigation, allowing single-page applications (SPAs) to simulate traditional multi-page websites by swapping components based on the browser's URL path.

    It combines paradigms from React Router and Ember Router to provide a flexible routing mechanism.

  4. Overview of SolidStart

    main

    SolidStart is an open-source meta-framework built on top of Solid and uses Vinxi (a framework bundler combining Vite and Nitro) to unify web application components.

    Unlike many opinionated meta-frameworks, SolidStart is designed to be minimal. It does not ship with a built-in Router or Metadata library, allowing developers to choose their own preferred libraries.

    A core principle of SolidStart is isomorphic code, meaning code is written once and can be executed correctly on both the client and the server.

  5. Overview of Solid Meta 1.0

    main

    Solid Meta 1.0 is a document head management library designed for Solid 2.0. It allows you to declare <title>, <meta>, <link>, and other head elements anywhere in your component tree.

    Key features include:

    • Streaming-correct SSR: Server-side rendering correctly splices head tags into the document.
    • Flicker-free hydration: Ensures head elements are managed smoothly during client-side hydration.
    • Ambient Registry: Unlike many other libraries, Solid Meta 1.x has no provider. It acts as a thin component layer over Solid 2.0's built-in head registry (useHead in @solidjs/web). Head components register under the current reactive owner automatically.

  6. Explore CSS styling options in Solid

    main

    Solid supports a wide variety of styling methodologies to suit different project needs. You can choose from:

    Preprocessors

    • SASS: Advanced CSS preprocessor.
    • LESS: CSS preprocessor with variables and mixins.

    Modular and Scoped CSS

    • CSS Modules: Scoped CSS to prevent global namespace collisions.

    CSS-in-JS

    Modern approaches that allow defining styles within your JavaScript/TypeScript code. Popular ecosystem options include:

    • Solid Styled Components
    • Solid Styled JSX
    • Macaron

    Note: Always verify compatibility with Solid before selecting a CSS-in-JS library.

    Utility Frameworks

    Pre-styled components and utility classes for rapid development:

    • Tailwind CSS
    • UnoCSS

  7. What is Solid and how does its reactivity work?

    main

    Solid is a modern JavaScript framework designed for building high-performance user interfaces using fine-grained reactivity.

    Core Concept: Fine-grained Reactivity

    Unlike traditional frameworks that might re-render entire components or large parts of a page when data changes, Solid's fine-grained reactive system ensures that updates are applied only to the specific parts of the DOM that depend on the changed data.

    Key Advantages

    • Performant: Minimizes DOM updates, leading to faster load times and smoother performance.
    • Powerful: Efficient memory and CPU usage allows for complex applications with high flexibility over update cycles.
    • Pragmatic: Offers flexibility in development strategies rather than enforcing rigid structures.
    • Productive: Provides a clear and predictable API to simplify the development workflow.

  8. Understanding JSX properties (props)

    main

    Props (properties) are used to pass data and configurations from parent components to children. They fall into three categories:

    • Static props: Integrated directly into the HTML template as attributes.
    • Dynamic props: Rely on state (such as signals) to change content or attributes reactively (e.g., value={value()}).
    • Data transfer: Used to pass data from resources (like createResource) into components.

    Important: Expressions are applied in the order they are defined in the JSX. If an element requires attributes to be set in a specific order (e.g., certain input types), ensure your JSX defines them in that exact sequence.

  9. How head tag management works in Solid Meta

    main

    Solid Meta manages the document <head> using three core principles:

    1. Later wins: Tags deduplicate by identity. If multiple tags share the same identity, the last one registered is the one that appears in the document.
    2. Disposal restores: When a component providing a winning tag unmounts, the previous tag registered for that identity is automatically restored. This ensures navigating between pages cleans up head tags correctly.
    3. Reactive: Attribute values and text children can be reactive expressions. Updates are applied in place without affecting the tag's position in the override order.

    Overriding Identity with key

    Every component accepts a key prop. Use this to force distinct tags to override each other or to prevent collisions between tags that would otherwise share an identity.

    {/* These override each other despite different attributes because they share the same key: */}
<Meta key="social-image" name="twitter:image" content="/twitter.png" />
<Meta key="social-image" property="og:image" content="/og.png" />

    Grouping tags with <Head>

    To manage a set of tags as a single unit (e.g., a block of social media tags that should be overridden together), wrap them in the <Head> component.

  10. What are Stores and when to use them

    main

    Stores are a state management primitive designed for complex, nested state (objects, arrays, and state trees).

    Key differences from Signals:

    • Granularity: While signals trigger a full re-render when their single value changes, stores provide fine-grained reactivity. They update only the specific properties or elements that change, creating a dynamic tree of reactive data.
    • Access Pattern: Unlike signals, which require calling a function to get the value (e.g., mySignal()), store values are accessed directly via property access (e.g., store.userCount).
    • Lazy Reactivity: Signals within a store are created lazily. They are only established when the property is accessed within a tracking scope (like a component's return statement, a createEffect, or a computed property). Accessing a store property outside of a tracking scope will not establish a dependency.

  11. Considerations for delegated events

    main

    While delegated events improve performance, they have specific behaviors you must account for:

    • Event Propagation: event.stopPropagation() does not work as expected with delegated events because the listener is on the document, not the element. If you need to stop propagation, use a native event (on:click) instead.
    • Lifecycle: Delegated listeners remain active on the document even if the element that declared them is removed from the DOM. For infrequent events like mousemove, use a native event (on:mousemove) to avoid unnecessary document-level processing.
    • Portals: Events in a Portal propagate following the component tree rather than the DOM tree. An event inside a Portal will propagate up to its component parent, even if that parent is not a DOM ancestor of the portal's mount point.
    // Problem: stopPropagation() fails with delegated events
<div ref={ref}>
  <button onClick={(event) => {
    event.stopPropagation();
    console.log("button");
  }}>
    button
  </button>
</div>

// Solution: Use a native event for the button
<button on:click={(event) => {
    event.stopPropagation();
    console.log("button");
  }}>
    button
</button>

  12. Forward refs to components

    main

    By default, ref on a component does not automatically capture the component's internal DOM nodes. To make a component's ref work, the component must explicitly receive the ref prop and pass it down to an underlying element or child component.

    function MyComp(props) {
	return <div ref={props.ref} />;
}

function App() {
	let myDiv;
	onMount(() => console.log(myDiv.clientWidth));
	return <MyComp ref={myDiv} />;
}