connect2.ts

import { connect } from '@cerebral/react'
import { state, props } from 'cerebral/tags'
interface State {
  things: {
    [ key: string ]: {
      title: string,
      description: string
    }
  }
}

interface Props {
  id: string
}

const propsPaths = {
  id: 'id'
}

// This could be automatically constructed with a sample state tree and some rules to traverse it.
const statePaths = {
  things: {
    __path: state`things`,
    id: {
      __path: state`things.${ props`id` }`,
      title: { __path: state`things.${ props`id` }.title` },
      description: { __path: state`things.${ props`id` }.description` }
    }
  }
}

interface Getters {
  state: State
  props: Props
}

function connect2<T> ( map, comp: ( props: T ) => any ): any {
  const newMap =
  Object.assign
  ( {}
  , ... Object.keys ( map ).map
        ( k => ( { [ k ]: map [ k ].__path } ) )
  )
  return connect ( newMap, comp )
}

// This is done once for the whole app
const state = <State> <any> statePaths
const props = <Props> <any> propsPaths

// A component now looks very much like it used to:

connect2
( { title: State.things [ Props.id ].title }
, function foo ( { title } ) {

  }
)