Shared Store

The Shared Store lets plugins share reactive state using dot-notation paths.

Setting Values

api.set('theme', 'dark');
api.set('settings.editor.fontSize', 14);
api.set('user', {
    id: 123,
    name: 'John',
    preferences: { notifications: true }
});

Getting Values

const theme = api.get('theme');
const fontSize = api.get('settings.editor.fontSize');

// With default value
const locale = api.get('settings.locale', 'en-US');

Watching Changes

const unwatch = api.watch('theme', (newValue, oldValue, path) => {
    console.log(`Theme changed from ${oldValue} to ${newValue}`);
});

// Stop watching
unwatch();

Updating Values

// Update with function
api.update('counter', (current) => current + 1);

// Merge objects
api.merge('settings', { theme: 'dark', fontSize: 14 });

Deleting Values

api.delete('settings.theme');

Checking Existence

if (api.has('settings.theme')) {
    // Path exists
}

Batch Updates

api.batch(() => {
    api.set('settings.theme', 'dark');
    api.set('settings.fontSize', 14);
    api.set('settings.language', 'en');
});

Reactive Selectors

For use in SolidJS components:

function ThemeDisplay() {
    const theme = api.selector('settings.theme', 'light');

    return <span>Current theme: {theme()}</span>;
}

Store Hooks

import { useStore, useStoreSelector } from 'webarcade';

function Settings() {
    // Get and set
    const [theme, setTheme] = useStore('settings.theme');

    return (
        <button onClick={() => setTheme('dark')}>
            Theme: {theme()}
        </button>
    );
}

function UserGreeting() {
    // Derived value
    const fullName = useStoreSelector(
        (store) => `${store.user?.firstName} ${store.user?.lastName}`
    );

    return <span>Hello, {fullName()}</span>;
}

Namespacing

Plugins should namespace their store keys:

// Good - namespaced
api.set('my-plugin.count', 0);
api.set('my-plugin.settings.enabled', true);

// Avoid - could conflict
api.set('count', 0);

Direct Store Access

For advanced SolidJS usage:

const store = api.getStore();

// Use directly in components with fine-grained reactivity
<div>{store.settings?.theme}</div>