uniqpath / connectome Goto Github PK

Background

Instances ConnectedStore live in the frontend (browser) and they conform to the Svelte store contract.

ConnectedStore gets the data from MirroringStore in the backend (for example nodejs process).

State of ConnectedStore exactly mirrors the state set in the MirroringStore:

Backend:

const store = new MirroringStore();
store.set({ name: 'John', age: 27 });

Frontend (example for Svelte but it can be used inside any framework):

const store = new ConnectedStore({ ip, port, protocol, lane });

$: name = $store.name;

Svelte template with automatic reactive bindings:

<span>{name} ({$store.age})</span> <!-- two different approaches for the same result -->

This is all we need to keep both endpoints fully synced and so if on the backend we do:

store.set({ ...store.get(), age: 28 });

Our frontends will automatically change in an instant and all open (borwser or other type) GUIs will have the latest age value displayed.

Connected store 'connection state'

We also need to include a special meta-state connected which tells us if we currently have a live and working connection between two stores (MirroringStore on backend and ConnectedStore on frontend).

Option 1

$: connected = $store.connected;
$: name = $store.name;
...

Svelte template:

<span class="status" class:ready={connected}>Connected {connected ? '✓' : '✖'}</span>

...

This is how it is currently implemented.

Option 2

const { connected } = store;
$: name = $store.name;
...

Svelte template:

<span class="status" class:ready={$connected}>Connected {$connected ? '✓' : '✖'}</span>

...

This is an alternative implementation where connected property is not merged into the state coming from backend.

Instead connected is another simple writableStore attached to ConnectedStore as its property.

Pros:

• logically it makes more sense
• in case there needs to be more meta-information like this all of tthose can be separate stores instead of potentially clashing with properties coming from backend

Cons:

• a bit harder to remember the api and $ has to be used in front of $connected

It is a bit harder to remember but probably clearner in any case.

Unfortunately this does not work in Svelte as a shortcut:

$: connected = store.$connected; // ⚠️ this does not work
$: name = $store.name;
...

Code to make connected variable reactive would be:

const { connected: connectedStore } = store;
$: connected = $connectedStore;
$: name = $store.name;
...

this is just as an illustration, it is not a clean way and is also too long.

So with Option 2 it will always be the case that with minimal api use we will always utilize $connected in templates.

Does Option 2 have any other negative consequences or are there only benefits with consideration that a little bit more to remember (the need for destructuring) and then using $ in templates is actually better than cheating and inserting this part of meta-state inside the state that came over the wire?