ram-stack/core

This package hosts an opinionated set of dependencies for a typical React Awilix MobX app.

Examples of usage are available in Sample App

Composition root

Composition root is a place where all the application components are loaded into.

import {createCompositionRoot} from '@ram-stack/core';

const root = createCompositionRoot<InjectedDependencies>({
  onReady: () => console.log('ready'),
});

InjectedDependencies is a type containing all the things injected by a DI container. onReady is a callback invoked when load operation completes. If Hot Module Replacement is enabled, onReady will be invoked every time any module is updated.

Arbitrary objects or values can be registered in a container within composition root

import {di} from '@ram-stack/core';

root.container.register({
  foo: di.asValue('foo'),         // will be resolved as value
  bar: di.asClass(BarClass),      // will be resolved as class instance
  baz: di.asFuntion(() => 'baz'), // will be resolved as function return value
});

Rendering root component

import {view} from '@ram-stack/core';

const MyComponent = root.container.resolve('MyComponent');

view.renderDom((
  <MyComponent />
), document.getElementById('root'));

Using hooks

import {hooks} from '@ram-stack/core';

export function MyComponent() {
  const [foo, setFoo] = hooks.useState(true);
}

Using router components

import {router} from '@ram-stack/core';

export function MyRedirectComponent() {
  return (
    <router.Redirect to={'/some/route'} />
  );
}

export function MyLinkComponent() {
  return (
    <router.Link to={'/some/route'}>
      My Link
    </router.Link>
  );
}