Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // ui-tabs/tab.ts
  const tab = Machine({
    initial: 'idle',
    context: {
      closable: true,
      active: false
    },
    on: {
      SELECT: {
        target: 'selected',
        actions: assign({ 
          active: true
        })
      },
      DESELECT: {
        target: 'idle',
        actions: assign({
          active: false
        })
      },
      CLOSE: {
        actions: sendParent(context => ({
          type: 'CLOSE',
          ...context
        }))
      }
    },
    states: {
      idle: {},
      selected: {}
    }
  });
  
  // ui-tabs.ts
  const uiTabs = Machine({
    id: 'search-orders',
    initial: 'idle',
    states: {
      idle: {},
    }
  }); 
  

  const tabContext = Machine({
    initial: 'idle',
    context: {
      active: true,
      tabs: []
    },
    on: {
      WAKE: assign({ active: true }),
      ARCHIVE: assign({ active: false }),
      CLOSE_TAB: assign({
        tabs: (c, e) => {
          return c.tabs.reduce((acc, tab) => {
            if (tab.id === e.tabId) return acc;
            return [...acc, tab];
          }, []);
        }
      }),
      REGISTER: assign({
        tabs: (c, e) => {
          return [
            ...c.tabs,
            spawn(
              e.tab ?? tab, 
              e.tabId ?? 'tabID'
            )
          ];
        }
      })
    },
    states: {
      idle: {}
    }
  });
  
  // services/tabs
  const tabsService = Machine({
    id: 'tabsService',
    initial: 'idle',
    context: {
      tabContexts: [],
    },
    on: {
      ARCHIVE_TAB_CONTEXT: {
        actions: send('ARCHIVE', {
          to: (c, e) => e.tabContextId
        })
      },
      REGISTER_TAB_CONTEXT: [
        {
          cond: 'contextIsArchived',
          actions: send('WAKE', {
            to: (c, e) => e.tabContextId
          })
        },
        {
          actions: assign({
            tabContexts: (c, e) => {
              return [
                ...c.tabContexts,
                spawn(
                  e.tabContext ?? tabContext,
                  e.tabContextId ?? 'test'
                )
              ];
            }
          })
        }
      ]
    },
    states: {
      idle: {}
    }
  }, {
    guards: {
      contextIsArchived(context, event) {
        // Check if the context is archived
        return false;
      }
    }
  });
  
  const ts = interpret(tabsService)
    .onTransition((context, event) => {
      console.log(event.type, {
        context,
        event
      });
    });  
  
  ts.start();
  
  ts.send('REGISTER_TAB_CONTEXT', {
    tabContext, tabContextId: 'test'
  });
  
  ts.send('ARCHIVE_TAB_CONTEXT', {
    tabContextId: 'test'
  });
  
  
  
  console.log('ts', ts);