How to extend state in SPA?

I have just created the basic SPA by doing npx apprun --init --spa. Now I want the app’s state to take care of more than just the component name (Home, About, Contact). I may e.g. want to have a counter (+1/-1) on one of the components. In the basic SPA one gets the impression that the component name is the app’s state (state = 'Home';), but right now it seems that it’s not necessarily so. I’m a bit confused.

[yysun]

It is unclear in the documentation that the mounted lifecycle function is only called in the statefull child component.

class Child extends Component {
  state = {} // you can define the initial state
  view = state => <div></div>
  update = {}
  mounted = (props, children) => { ...state, ...props } // this will be called, you can merge props into the state
}

class Parent extends Component {
  state = {} // you can define the initial state
  view = state => <div>
    <Child />
  </div>
  update = {}
  mounted = () => { } // this will NOT be called when component is created using the constructor
}
new Parent().start(document.body); 

However, you can pass the initial state in to the component’s constructor directly:

const init_state = {};
new Parent(init_state).start(document.body); 

[yysun]

I would suggest creating a module, e.g. global.ts

export let global_state = {
 name: 'xxx'
}

And import it in main.tsx and other components

import { global_state } from './global';

You can also export a function for updating the global state in global.ts

export let global_state = {
  name: 'xxx'
}
export const set_global_state = state => {
  global_state = state;
}

To call the function, import it:

import { set_global_state } from './global';
set_global_state({ ... })

If you want to notify other components, send a global event in the set_global_state function:

import app from "apprun";
export let global_state = {
  name: 'xxx'
}
export const set_global_state = state => {
  global_state = state;
  app.run('@state_updated', state);
}

Other components can subscribe to the events and merge the global state into the local state:

import { app, Component } from "apprun";
class MyComponent extends Component {
  state = {}
  view = state => <div>{state}</div>
  update = {
    '@state_updated': (state, global_state) => {
      return { ...state, global_state}
    }
  }
}