cache.on()

import joystick, { cache } from '@joystick.js/ui-canary';
import Player from '../../components/player/index.js';

const App = joystick.component({
  state: {
    player: null,
  },
  lifecycle: {
    on_mount: (instance = {}) => {
      window.player_state = cache('player', {});
      
      // NOTE: Listen for changes on player_state and copy the player state to
      // the local state of the App layout component.
      player_state.on('change', (state = {}) => {
        instance.set_state({ player: state?.player });
      });
    },  
  },
  render: ({ component, props, state, data, each, when, methods }) => {
    return `
      <div class="app">
        ${component(props.page, props)}
        ${component(Player, { state: state?.player })}
      </div>
    `;
  },
});

export default App;

cache.on(event: string, callback: function) => undefined