I have the following svelte store:

export type SessionStore = {
   session?: Session,
   sessionType?: SessionType,
   inputs: []
}

The generation of the inputs field will change depending on the type of session:

• If the session is of type 'local' it will be generated from the user's keyboard
• If the session is of type 'online' it will be fed through network

I have a custom store that generates the session state based on the user's action:

function makeSessionStore() {
  const {subscribe, set, update} = writable(initialValue());

  return {
    subscribe,
    createLocalSession: () => update(() => ({
        session: {state: SessionState.RUNNING},
        sessionType: SessionType.LOCAL,
        inputs: [] // <--- how to generate this based on the session type?
    })),
    createNetworkSession: () => createSession().then(session => update(() => ({
        session,
        sessionType: SessionType.NETWORK,
        inputs: []
    })))
    reset: () => set(initialValue())
  }
}

My question: How can I attach a reactive store property to the inputs property?

This is e.g. how I get the inputs from the user's keyboard:

const keysPressed: Readable<string[]> = readable([], function(set) {
  let keys = [];

  const onKeydown = ({key}) => {
    if (keys.includes(key)) {
        return;
    }
    keys = [...keys, key];
    set(keys);
  }
  const onKeyup = ({key}) => {
    if (!keys.includes(key)) {
        return;
    }
    keys = keys.filter(k => k !== key);
    set(keys);
  }

  document.addEventListener('keydown', onKeydown);
  document.addEventListener('keyup', onKeyup);

  return () => {
    document.removeEventListener('keydown', onKeydown);
    document.removeEventListener('keyup', onKeyup);
  }
})

I would like the components using the inputs to be unaware of the strategy switching behind the scenes, they should be able to use the inputs like this:

import {sessionStore} from './session';
console.log($sessionStore.inputs) // ['CONTROL', 'w']