Respond Modular Components

respond-modular-components.js

export default createApp({
  components: {
    App: (props, { location }) => {
      const Component = location.components.list.ComponentWithHoistedDataDeps
      return Component ? <Component /> : <Spinner />
    },
  },
  routes: {
    LIST: {
      path: '/list/:category',
      load: async (request, action) => {
        const module = await import('./component-with-hoisted-data-deps')
        return module.default({ 
          callbacks: {
            beforeEnter: 'beforeEnter',
            thunk: 'thunk',
            onEnter: 'onEnter'
          },
          deps: {
            category: action.params.category, // map params to deps!!
          }
        })
      }
    }
  }
})


// component-with-hoisted-data-dep.js:

export default ({
  deps,
  callbacks: {
    beforeEnter = 'beforeEnter',
    thunk = 'thunk',
    onEnter = 'oneEnter'
  }
}) => createModule({
  routes: {
    entry: {
      [beforeEnter]: [verifyAccess, saveScroll],
      [thunk]: ({ api }) => api.get(`items/${deps.category}`),
      [onEnter]: restoreScroll,
    } 
  },
  components: {
    ComponentWithHoistedDataDeps: (props, state) => (
      <ul>
        {state.items.map(item => <li>{item.title}</li><)}
      </ul>
    )
  },
  reducers: {
    items: (state, actions) => action.payload
  }
})

Lastly, for this to work, the implementation must allow for multiple such components included in a single route, and their callbacks are merged into the array form. For example, we already support:

route.thunk: [callback1, callback2]

They don't currently in parallel. They are sequential (and can be async). So we need to implement a special case where when module components are combined into the same route, they are run in parallel.