focus-devtools

Focus dev tools

Install it with npm install focus-devtools -D

By default to display it press ctrl+m on your keyboard.

The purpose of these dev tools is to provide help for your focus projects:

• Store data and store state

You can explore all your stores data.

• Routes information

You can list all your routes and click on them.

Its purpose is also to allow us to collect some satisfaction indicators.

Please provide some feedback

Here is a short video demo of this tool

A video of the component in action

How to use it

You have two components at your disposal:

• A dispatcher logger which can help you trace all the incoming actions to your app

import dispatchLogger from 'focus-dev-tools/logger/dispatch-logger';
import dispatcher from 'focus-core/dispatcher';
import CoreStore from 'focus-core/stores/CoreStore'

dispatchLogger(dispatcher, () => CoreStore._instances);

• A FocusDevTools console to visualize information, create a container component in your project.

import FocusDevTools from 'focus-devtools';
import React from 'react';
import history from 'focus-core/history';
import CoreStore from 'focus-core/store/CoreStore'


const devTools = () => <FocusDevTools
                        isPanel /* If you want to embed the component in a DOck */
                        toggleVisibilityKey={'ctrl-m'}  /*How do you want to display the dev tool*/
                        routes={history.handlers}  /* A list of all your routes (`focus-core/router/history`)*/
                        getStores={() => CoreStore.prototype._instances} /* A list of all your stores (`focus-core/CoreStore._instances`)*/
                        isDebugDevTools={false} /* If you want to display the dev tools props (not usefull for the projects)*//* If you want to display the dev tools props (not usefull for the projects)*/
                         />

export default devTools;

It has to be included in the Layout of the application, as an example in the starter kit and the demo app there is a layout-initializer

import React from 'react';
import Layout from 'focus-components/components/layout';
import MenuLeft from '../../views/menu/menu-left';
import DevTools from '../dev-tools';


const CustomLayout = (props) => (
        <div>
          <Layout
              MenuLeft={MenuLeft}
          >
          {props.children}
          </Layout>
          <DevTools/>
        </div>
);

export default CustomLayout;

where DevTools is the container component you just create.

We hope this will help you and improve your experience with focus.

Warning

You have to add an explicit name property to your stores.

import {CoreStore} from 'focus-core/store';

/**
* Store dealing with subjects about persons.
* @type {focus}
*/
const personStore = new CoreStore({
    definition: {
        personIdentity: 'personIdentity',
        personBiography: 'personBiography',
        personMovieLinks: 'personMovieLinks'
    }
});

personStore.name = 'PersonStore';

export default personStore;