WIP 89 Improve project structure

generators/app/templates/index.ts

@@ -1,7 +1,7 @@
 <% if (reduxConfig) { -%>
 import * as namespace from './namespace';
 import { actions, selectors, reducer<%= (reduxConfig.withSaga) ? ', getSaga' : '' %> } from './redux';
-import { IReduxEntry } from 'shared/types/app';
+import { IReduxEntry } from 'core/types';
 
 export { namespace, selectors, actions };
 <% } -%>

generators/app/templates/redux/sagas/index.ts

@@ -1,7 +1,7 @@
 import { put, call } from 'redux-saga/effects';
 
 import { SagaIterator } from 'redux-saga';
-import { IDependencies } from 'shared/types/app';
+import { IDependencies } from 'core/types';
 
 import * as actions from '../actions';
 

generators/app/templates/redux/selectors.ts

@@ -1,4 +1,4 @@
-import { IAppReduxState } from 'shared/types/app';
+import { IAppReduxState } from 'core/types';
 import * as NS from '../namespace';
 
 export function getFeatureState(state: IAppReduxState): NS.IReduxState {

generators/app/templates/view/containers/SomeContainer/SomeContainer.tsx

@@ -4,7 +4,7 @@ import { bind } from 'decko';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { IAppReduxState } from 'shared/types/app';
+import { IAppReduxState } from 'core/types';
 
 import { IReduxState } from '../../../namespace';
 import { actions, selectors } from './../../../redux';

package.json

@@ -280,7 +280,7 @@
     "thread-loader": "^2.1.1",
     "ts-loader": "^5.3.3",
     "ts-node": "^7.0.1",
-    "typescript": "^3.2.2",
+    "typescript": "^3.4.2",
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }

server/starters.ts

@@ -4,7 +4,7 @@ import hotMiddleware from 'webpack-hot-middleware';
 import SSRMiddleware from 'webpack-isomorphic-dev-middleware';
 import $ from 'cheerio';
 
-import { IAssets } from '../src/shared/types/app';
+import { IAssets } from '../src/core/types';
 
 function startDevelopmentMode(
   server: Express, clientConfig: webpack.Configuration, serverConfig: webpack.Configuration,

src/assets/Html.tsx

@@ -4,8 +4,8 @@ import Helmet from 'react-helmet';
 import redux from 'redux';
 import { renderToString } from 'react-dom/server';
 
-import { IAssets } from 'shared/types/app';
 import { SheetsRegistry } from 'shared/styles';
+import { IAssets } from 'core/types';
 
 interface IHtmlProps {
   assets: IAssets;

src/client.tsx

@@ -1,12 +1,12 @@
 import 'reflect-metadata';
 import 'babel-polyfill';
-import { App } from 'core/App';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bootstrapper from 'react-async-bootstrapper';
-import configureApp from 'core/configureApp';
 
-import getEnvParams from './core/getEnvParams';
+import { App } from 'core/render';
+import configureApp from 'core/configure';
+import getEnvParams from 'core/getEnvParams';
 
 const { appVersion } = getEnvParams();
 
@@ -25,11 +25,11 @@ main();
 
 /* Hot Module Replacement API */
 if ((module as any).hot && process.env.NODE_ENV !== 'production') {
-  (module as any).hot.accept(['./core/App', './core/configureApp'], () => {
-    const nextConfigureApp: typeof configureApp = require('./core/configureApp').default;
-    const NextApp: typeof App = require('./core/App').App;
+  (module as any).hot.accept(['./core/render', './core/configure'], () => {
+    const nextConfigureApp: typeof configureApp = require('./core/configure').default;
+    const NextApp: typeof App = require('./core/render').App;
     const nextAppData = nextConfigureApp(appData);
-    render(<NextApp {...nextAppData} jssDeps={appData.jssDeps} />);
+    render(<NextApp {...nextAppData} />);
   });
 }
 

src/config/index.ts

@@ -0,0 +1,45 @@
+import Api from 'services/api/Api';
+import * as themeService from 'services/theme';
+import { I18nProvider } from 'services/i18n';
+import * as notsService from 'services/notification';
+
+import * as features from 'features';
+
+import * as allModules from 'modules';
+import { App } from 'modules/App';
+import { default as routes } from 'modules/routes';
+
+import { IBaseDeps, IModule, IReduxEntry } from 'core/types';
+
+export const default404RedirectPath: string | null = routes.search.users.getRedirectPath();
+
+export function makeDeps(_baseDeps: IBaseDeps) {
+  return {
+    api: new Api(),
+  };
+}
+
+export const modules: IModule[] = Object.values(allModules);
+
+export const reduxEntries: IReduxEntry[] = [
+  themeService.reduxEntry,
+  notsService.reduxEntry,
+];
+
+export const RootComponent: React.ComponentType = App;
+
+export const reactAppWrappers: React.ComponentType[] = [
+  I18nProvider,
+];
+
+export type ExtraDeps = ReturnType<typeof makeDeps>;
+
+export interface IAppReduxState {
+  // services
+  theme: themeService.namespace.IReduxState;
+  notification: notsService.namespace.IReduxState;
+  // features
+  usersSearch: features.usersSearch.namespace.IReduxState;
+  repositoriesSearch: features.repositoriesSearch.namespace.IReduxState;
+  profile: features.profile.namespace.IReduxState;
+}

src/core/ContainersProvider.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { bind } from 'decko';
+import { injectable } from 'inversify';
 import { Omit, SubSet } from '_helpers';
 
 import * as usersSearchFeature from 'features/usersSearch';
-import { injectable } from 'inversify';
-import { inject, TYPES } from './configureIoc';
-
-import { IFeatureEntry, IReduxEntry } from 'shared/types/app';
+import { inject, TYPES, IocTypes } from './configure/ioc';
+import { IFeatureEntry, IReduxEntry } from './types';
 
 interface IContainerTypes {
   UserDetails: usersSearchFeature.Entry['containers']['UserDetails'];
@@ -45,14 +44,14 @@ function containersProvider<L extends Container>(containers: L[], preloader?: Re
 
   return <Props extends { [K in L]: IContainerTypes[K] }>(
     WrappedComponent: React.ComponentType<Props>,
-  ): React.ComponentClass<Props> => {
+  ): React.ComponentClass<Omit<Props, L>> => {
 
     @injectable()
     class ContainersProvider extends React.PureComponent<Props, IState> {
       public state: IState = { containers: {} };
 
       @inject(TYPES.connectEntryToStore)
-      private connectFeatureToStore!: (entry: IReduxEntry) => void;
+      private connectFeatureToStore!: IocTypes[typeof TYPES.connectEntryToStore];
 
       public componentDidMount() {
         this.load();

src/core/FeatureConnector.tsx

@@ -4,9 +4,8 @@ import * as R from 'ramda';
 import { injectable } from 'inversify';
 
 import { Omit, GetProps, SubSet } from '_helpers';
-import { inject, TYPES } from './configureIoc';
-
-import { IFeatureEntry, IReduxEntry } from 'shared/types/app';
+import { inject, TYPES, IocTypes } from './configure/ioc';
+import { IFeatureEntry } from './types';
 
 type FeatureLoader = () => Promise<IFeatureEntry>;
 
@@ -29,7 +28,7 @@ function featureConnect<L extends Record<string, FeatureLoader>>(loaders: L, pre
       public state: IState = { mounted: false };
 
       @inject(TYPES.connectEntryToStore)
-      private connectFeatureToStore!: (entry: IReduxEntry) => void;
+      private connectFeatureToStore!: IocTypes[typeof TYPES.connectEntryToStore];
 
       public async bootstrap() {
         await this.load();
@@ -91,9 +90,8 @@ function featureConnect<L extends Record<string, FeatureLoader>>(loaders: L, pre
   };
 }
 
-type IFeatureEntryWithContainers<
-  C extends Record<string, React.ComponentType<any>>
-  > = SubSet<IFeatureEntry, { containers: C }>;
+type IFeatureEntryWithContainers<C extends Record<string, React.ComponentType<any>>> =
+  SubSet<IFeatureEntry, { containers: C }>;
 
 export function getAsyncContainer<C extends Record<string, React.ComponentType<any>>, K extends keyof C>(
   loader: () => Promise<IFeatureEntryWithContainers<C>>, componentName: K,

src/core/configureApp.ts → src/core/configure/index.ts

@@ -1,44 +1,40 @@
-import configureDeps from './configureDeps';
-import { TYPES, container } from './configureIoc';
-import configureStore, { createReducer } from './configureStore';
-
-import * as allModules from 'modules';
-import { configureJss } from 'core/configureJss';
+import { makeDeps, modules, reduxEntries } from 'config';
 import { ReducersMap } from 'shared/types/redux';
-import { reduxEntry as themeProviderRE } from 'services/theme';
-import { reduxEntry as notificationReduxEntry } from 'services/notification';
-import { IAppData, IModule, RootSaga, IAppReduxState, IReduxEntry } from 'shared/types/app';
 
-function configureApp(data?: IAppData): IAppData {
-  /* Prepare main app elements */
-  const modules: IModule[] =  Object.values(allModules);
+import { IAppData, IModule, RootSaga, IAppReduxState, IReduxEntry, IDependencies } from '../types';
+import { TYPES, container, IocTypes } from './ioc';
+import configureStore, { createReducer } from './store';
+import { configureJss } from './jss';
 
+function configureApp(data?: IAppData): IAppData {
   if (data) {
-    return { ...data, modules };
+    return data;
   }
 
-  const sharedReduxEntries: IReduxEntry[] = [
-    themeProviderRE,
-    notificationReduxEntry,
-  ];
-
   const connectedSagas: RootSaga[] = [];
   const connectedReducers: ReducersMap<Partial<IAppReduxState>> = {};
 
   const { runSaga, store } = configureStore();
+
+  const baseDeps = { runSaga, store };
+  const dependencies: IDependencies = {
+    ...baseDeps,
+    ...makeDeps(baseDeps),
+  };
+  const jssDeps = configureJss();
+
   try {
-    container.getAll(TYPES.Store);
-    container.rebind(TYPES.connectEntryToStore).toConstantValue(connectEntryToStore);
-    container.rebind(TYPES.Store).toConstantValue(store);
+    container.getAll<IocTypes[typeof TYPES.connectEntryToStore]>(TYPES.Deps);
+    container.rebind<IocTypes[typeof TYPES.connectEntryToStore]>(TYPES.connectEntryToStore)
+      .toConstantValue(connectEntryToStore);
+    container.rebind<IocTypes[typeof TYPES.Deps]>(TYPES.Deps).toConstantValue(dependencies);
   } catch {
-    container.bind(TYPES.connectEntryToStore).toConstantValue(connectEntryToStore);
-    container.bind(TYPES.Store).toConstantValue(store);
+    container.bind<IocTypes[typeof TYPES.connectEntryToStore]>(TYPES.connectEntryToStore)
+      .toConstantValue(connectEntryToStore);
+    container.bind<IocTypes[typeof TYPES.Deps]>(TYPES.Deps).toConstantValue(dependencies);
   }
 
-  const dependencies = configureDeps(store);
-  const jssDeps = configureJss();
-
-  sharedReduxEntries.forEach(connectEntryToStore);
+  reduxEntries.forEach(connectEntryToStore);
   modules.forEach((module: IModule) => {
     if (module.getReduxEntry) {
       connectEntryToStore(module.getReduxEntry());
@@ -76,7 +72,7 @@ function configureApp(data?: IAppData): IAppData {
     }
   }
 
-  return { modules, store, jssDeps };
+  return { deps: dependencies, jssDeps };
 }
 
 export default configureApp;

src/core/configure/ioc.ts

@@ -0,0 +1,21 @@
+import { Container } from 'inversify';
+import getDecorators from 'inversify-inject-decorators';
+import { IDependencies, IReduxEntry } from '../types';
+
+const depsSymbol = Symbol('Deps');
+const connectEntryToStoreSymbol = Symbol('connectFeatureToStore');
+
+interface IocTypes {
+  [depsSymbol]: IDependencies;
+  [connectEntryToStoreSymbol]: (entry: IReduxEntry) => void;
+}
+
+const TYPES = {
+  Deps: depsSymbol,
+  connectEntryToStore: connectEntryToStoreSymbol,
+} as const;
+
+const container = new Container();
+const { lazyInject } = getDecorators(container);
+
+export { TYPES, container, IocTypes, lazyInject as inject };

src/core/configureJss.ts → src/core/configure/jss.ts

@@ -1,7 +1,7 @@
 import { create } from 'jss';
 import jssCompose from 'jss-compose';
 import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
-import { IJssDependencies } from 'shared/types/app';
+import { IJssDependencies } from '../types';
 
 export function configureJss(virtual?: boolean): IJssDependencies {
   // Place to add jss-plugins [https://material-ui.com/customization/css-in-js/#plugins]

src/core/configureStore.ts → src/core/configure/store.ts

@@ -2,9 +2,9 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
 import { compose, applyMiddleware, combineReducers, createStore, Reducer, Middleware, Store } from 'redux';
 
-import { composeReducers } from 'shared/helpers/redux';
-import { IAppReduxState } from 'shared/types/app';
+import { IAppReduxState } from 'core/types';
 import { ReducersMap } from 'shared/types/redux';
+import { composeReducers } from 'shared/helpers/redux';
 
 interface IStoreData {
   store: Store<IAppReduxState>;

src/core/index.ts

@@ -1,3 +1,3 @@
 export { default as containersProvider, IContainerTypes } from './ContainersProvider';
 export { default as featureConnect } from './FeatureConnector';
-export { inject, TYPES } from './configureIoc';
+export { inject, TYPES } from './configure/ioc';