globalStore

App-root class stores with createGlobalStore / getGlobalStore and SSR serialize.

import { atom, createGlobalStore, getGlobalStore, x } from 'mates';

class SessionStore {
  user = atom(null);
  // Optional: called when no SSR snapshot (skipped while hydrating)
  load() { this.user.set({ name: 'Ada' }); }
}

const App = () => {
  // Call once in App — survives SPA navigation; registry keyed by class
  const session = createGlobalStore(SessionStore);
  return () => html`${x(Child)}`;
};

const Child = () => {
  const session = getGlobalStore(SessionStore); // throws if App never created it
  return () => html`${session.user()?.name}`;
};

// SSR helpers (server / fullstack):
// serializeLiveGlobalStores() → { SessionStore: { user: { type:'atom', value } } }
// buildGlobalStoreStateScript(snapshot) → <script id="mates-global-store-state">

Overview

createGlobalStore(StoreClass) instantiates a named class once on the window registry (keyed by constructor). Call it in the App root. The same class returns the existing instance — shell stores survive SPA navigation.

getGlobalStore(StoreClass) looks up that instance from children. Throws if App never called createGlobalStore for the class.

SSR: serializeLiveGlobalStores() builds a class-name → field-envelope map; buildGlobalStoreStateScript emits the transfer <script>. On hydrate, snapshots apply and load() is skipped; otherwise load() runs when present.

vs pageStore / store()

API	Lifetime	Prefer when
`createGlobalStore`	app / shell	Survives navigation; create in App, getGlobalStore in children.
`getPageStore`	page	Cleaned up when the creating component unmounts.
`store(obj)`	module object	Proxy bag without class/SSR envelopes.

createGlobalStore + getGlobalStore

App creates the store; Display looks it up. Same instance, no props.

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

class CounterStore {

count = atom(0);

incr() { this.count.set(n => n + 1); }

reset() { this.count.set(0); }

}

const Display = () => {

const c = getGlobalStore(CounterStore);

return () => html`

<h1>${c.count()}</h1>

</div>

};

const App = () => {

const c = createGlobalStore(CounterStore);

return () => html`

${x(Display)}

<button class="btn-ghost" @click=${() => c.reset()}>Reset</button>

</div>

};

renderApp(App, document.getElementById('app'));

Optional load()

When no SSR snapshot is present, load() runs once on create (playground has no snapshot).

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

class PrefsStore {

label = atom('…');

load() {

this.label.set('loaded');

}

const App = () => {

const prefs = createGlobalStore(PrefsStore);

return () => html`

<p class="muted">${prefs.label()}</p>

<p class="muted m-t-5">load() runs when no SSR snapshot</p>

<button class="btn-primary" @click=${() => prefs.label.set('edited')}>edit</button>

</div>

};

renderApp(App, document.getElementById('app'));

API — globalStore

import { createGlobalStore, getGlobalStore, serializeLiveGlobalStores, buildGlobalStoreStateScript } from 'mates'

Prop / Option	Type	Default	Description
`createGlobalStore(Store)`*	`T`	—	Get-or-create App store for named class Store. Registry keyed by constructor. Applies SSR snapshot slice if present; else calls load() when not hydrating. Returns instance.
`getGlobalStore(Store)`*	`T`	—	Child lookup. Throws if createGlobalStore was not called for Store in App.
`serializeLiveGlobalStores()`	`Record \| null`	—	SSR: serialize all live global stores keyed by class name. null if registry empty.
`buildGlobalStoreStateScript(snapshot)`	`string`	—	SSR: emit outside #app.
`Store.load?`	`() => void \| Promise`	—	Optional. Invoked when no snapshot and not hydrating. Async load is tracked on SSR promise queue.

Constants

Prop / Option	Type	Default	Description
`GLOBAL_STORES_KEY`	`'__GLOBAL_STORES__'`	—	Window registry Map.
`GLOBAL_STORE_STATE_KEY`	`'__GLOBAL_STORE_STATE__'`	—	Remaining snapshot map after script consume.
`GLOBAL_STORE_STATE_SCRIPT_ID`	`'mates-global-store-state'`	—	Transfer script element id.