mAAdhaTTah/brookjs

---
to: "<%= name %>/<%= dir %>/index.<%= locals.typescript ? 'tsx' : 'js' %>"
---
import React from 'react';
import { createStore } from 'brookjs';
import { RootJunction } from 'brookjs-silt';
import ReactDOM from 'react-dom';<% if(locals.typescript) { %>
import { Store, Unsubscribe } from 'redux';<% } %>
import { init } from './actions';
import { App } from './components';
import { rootDelta } from './deltas';
import { reducer, mapStateToProps<% if(locals.typescript) { %>, State<% } %> } from './state';

let store<% if(locals.typescript) { %>: Store<State><% } %>;
let root$<% if(locals.typescript) { %>: React.ComponentProps<typeof RootJunction>['root$']<% } %>;
let unsub<% if(locals.typescript) { %>: Unsubscribe<% } %>;

const render = () => {
  ReactDOM.render(
    <RootJunction root$={root$}>
      <App {...mapStateToProps(store.getState())} />
    </RootJunction>,
    document.getElementById('root'),
  );
};

const bootstrap = <% if(locals.typescript) { %>(initialState?: State)<% } else {%>initialState<% } %> => {
  unsub && unsub();
  store = createStore(reducer, initialState, rootDelta);
  root$ = root$ => root$.observe(store.dispatch);
  unsub = store.subscribe(render);
};

bootstrap();
store.dispatch(init());

if (module.hot) {
  // Nothing needs to be done when the actions change.
  module.hot.accept('./actions');

  // Rerender if the  components change.
  module.hot.accept('./components', render);

  // Update the store
  module.hot.accept(['./deltas', './state'], () => bootstrap(store.getState()));
}