Getting Started with Anchor for Solid

This guide will help you get up and running with Anchor in your Solid project. You'll learn how to install Anchor, create reactive state, and integrate it with your Solid components.

Installation

To begin, install the @anchorlib/solid package using your preferred package manager:

npm

npm install @anchorlib/solid

Yarn

yarn add @anchorlib/solid

pnpm

pnpm add @anchorlib/solid

Bun

bun add @anchorlib/solid

Basic Usage

The most common way to create reactive state in Anchor is using the mutable function. This creates a reactive reference that integrates seamlessly with Solid's reactivity system.

Your First Reactive Component

To get started, create a component that uses the mutable function to create a reactive reference:

import { mutable } from '@anchorlib/solid';

const Counter = () => {
  const counter = mutable({ count: 0 });

  return (
    <div>
      <h1>Counter: {counter.count}</h1>
      <button onClick={() => counter.count++}>Increment</button>
      <button onClick={() => counter.count--}>Decrement</button>
      <button onClick={() => (counter.count = 0)}>Reset</button>
    </div>
  );
};

export default Counter;

Try it Yourself

import { Component } from "solid-js";

const App: Component = () => {
  return <h1>Hello world</h1>
};

export default App;

Open Sandbox

Key Points:

• mutable: Creates a reactive reference that integrates with Solid's reactivity system
• Direct Mutation: You can directly modify state properties (e.g., counter.count++)
• Automatic Updates: Components automatically re-render when the state they access changes

Computed Property

import { mutable } from '@anchorlib/solid';

const Counter = () => {
  const state = mutable({
    count: 0,
    firstName: 'John',
    lastName: 'Doe',
    // Computed property using getter just works
    get fullName() {
      return `${state.firstName} ${state.lastName}`;
    },
    get doubleCount() {
      return state.count * 2;
    },
  });

  const changeName = () => {
    state.firstName = 'Jane';
    state.lastName = 'Smith';
  };

  return (
    <div>
      <h1>Counter: {state.count}</h1>
      <h1>Double Count: {state.doubleCount}</h1>
      <h1>Full Name: {state.fullName}</h1>
      <button onClick={() => state.count++}>Increment</button>
      <button onClick={() => state.count--}>Decrement</button>
      <button onClick={() => (state.count = 0)}>Reset</button>
      <button onClick={changeName}>Change Name</button>
    </div>
  );
};

export default Counter;

Try it Yourself

import { Component } from "solid-js";

const App: Component = () => {
  return <h1>Hello world</h1>
};

export default App;

Open Sandbox

Derived State

import { mutable, derived } from '@anchorlib/solid';

const Counter = () => {
  const count = mutable(1);
  const count2 = mutable(5);
  const counter = mutable({ count: 3 });

  // Derived state that automatically updates when any of its dependencies change
  const total = derived(() => count.value + count2.value + counter.count);

  return (
    <div>
      <h1>Counter 1: {count.value}</h1>
      <h1>Counter 2: {count2.value}</h1>
      <h1>Counter 3: {counter.count}</h1>
      <h1>Total: {total.value}</h1>
      <button onClick={() => count.value++}>Increment 1</button>
      <button onClick={() => count2.value++}>Increment 2</button>
      <button onClick={() => counter.count++}>Increment 3</button>
    </div>
  );
};

export default Counter;

Try it Yourself

import { Component } from "solid-js";

const App: Component = () => {
  return <h1>Hello world</h1>
};

export default App;

Open Sandbox

Global State

For state that needs to be shared across multiple components, you can create the state outside your components:

import { mutable } from '@anchorlib/solid';

// Global state declared outside your component
const counter = mutable({ count: 0 });

const Counter = () => {
  // Work with the state as normally you would
  return (
    <div>
      <h1>Counter: {counter.count}</h1>
      <button onClick={() => counter.count++}>Increment</button>
      <button onClick={() => counter.count--}>Decrement</button>
      <button onClick={() => (counter.count = 0)}>Reset</button>
    </div>
  );
};

export default Counter;

Try it Yourself

import { Component } from "solid-js";

const App: Component = () => {
  return <h1>Hello world</h1>
};

export default App;

Open Sandbox

Data Binding

Anchor provides a powerful data binding system that allows components to share and synchronize state seamlessly. This is especially useful for creating reusable form inputs and interactive controls.

Creating Bindable Components

Use the bindable() HOC to create components that accept bindable props:

import { mutable, $bind, bindable } from '@anchorlib/solid';
import type { Bindable } from '@anchorlib/solid';

// Create a bindable input component
interface InputProps {
  value: Bindable<string>;
  label?: string;
}

const Input = bindable<InputProps>((props) => {
  return (
    <div>
      {props.label && <label>{props.label}</label>}
      <input
        type="text"
        value={props.value}
        onInput={(e) => (props.value = e.currentTarget.value)}
      />
    </div>
  );
});

// Use it with $bind()
const App = () => {
  const user = mutable({
    firstName: 'John',
    lastName: 'Doe',
  });

  return (
    <div>
      <Input label="First Name" value={$bind(user, 'firstName')} />
      <Input label="Last Name" value={$bind(user, 'lastName')} />
      
      <p>Full Name: {user.firstName} {user.lastName}</p>
    </div>
  );
};

export default App;

Try it Yourself

import { Component } from "solid-js";

const App: Component = () => {
  return <h1>Hello world</h1>
};

export default App;

Open Sandbox

Key Points:

• $bind(): Creates a binding reference to synchronize state between components
• bindable(): HOC that makes components accept bindable props
• Type-safe: Props must be typed with Bindable<T> to use $bind()
• Automatic sync: Changes in the child component automatically update parent state

Schema Support

Anchor supports defining schemas for your state, providing runtime validation and better type safety:

import { mutable } from '@anchorlib/solid';
import { z } from 'zod';

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
});

const user = mutable({ name: 'John', age: 30 }, { schema: UserSchema });

// This will work
user.name = 'Jane';

// This will throw a validation error at runtime
// user.age = 'not a number'; // Error!

API Reference

• API Reference - Complete documentation of all functions and types

Next Steps

Now that you've learned the basics of Anchor for Solid, you can explore:

• Mutable State - Deep dive into creating and modifying reactive state
• Immutable State - How Anchor provides true immutability
• Derived State - Creating computed values that update automatically
• Data Binding - Two-way data binding between components