Overview

getPageStore(StoreClass) get-or-creates a page store keyed by class. The creating component registers cleanup — when it unmounts, the registry entry is removed. Children calling the same class receive the existing instance.

createPageStore is a deprecated alias of getPageStore — prefer getPageStore in new code.

SSR: serializePageStore(instance) / serializeLivePageStore() emit typed field envelopes (atom / asyncAtom / asyncAction). buildPageStoreStateScript writes the transfer script. Hydrate applies snapshots; otherwise optional load() runs.

vs globalStore

API
Cleanup
Prefer when
getPageStore on creator unmount Page/feature data that should die with the page.
createGlobalStore survives nav Shell/session state for the whole app session.

getPageStore sharing

App and List share TodoStore. Adding an item updates both — same get-or-create instance.

import { html, atom, x, getPageStore, renderApp } from 'mates';

class TodoStore {
items = atom(['Ada', 'Grace']);
add(name) { this.items.set(prev => [...prev, name]); }
}

const List = () => {
const todos = getPageStore(TodoStore);
return () => html`
<ul class="m-col m-gap">
${todos.items().map((t) => html`<li class="muted m-t-5">${t}</li>`)}
</ul>
`;
};

const App = () => {
const todos = getPageStore(TodoStore);
return () => html`
<div class="m-col m-gap">
${x(List)}
<button class="btn-primary" @click=${() => todos.add('New')}>Add</button>
</div>
`;
};
renderApp(App, document.getElementById('app'));

Optional load()

Without a hydrate snapshot, load() seeds initial data once on create.

import { html, atom, getPageStore, renderApp } from 'mates';

class ProfileStore {
name = atom('…');
load() { this.name.set('Ada Lovelace'); }
}

const App = () => {
const profile = getPageStore(ProfileStore);
return () => html`
<div class="m-col m-gap">
<p class="muted">${profile.name()}</p>
<p class="muted m-t-5">load() when no hydrate snapshot</p>
<button @click=${() => profile.name.set('Grace')}>rename</button>
</div>
`;
};
renderApp(App, document.getElementById('app'));