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
;; ;
- 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/* */= /* */= /* (`//`)*/= /* (`/._instances`)*/= /* ( )*//* ( )*//>;
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
;;;; const CustomLayout = <div> <Layout MenuLeft=MenuLeft > propschildren </Layout> <DevTools/> </div>; ;
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.
; /*** Store dealing with subjects about persons.* @type */const personStore = definition: personIdentity: 'personIdentity' personBiography: 'personBiography' personMovieLinks: 'personMovieLinks' ; personStorename = 'PersonStore'; ;