focus-devtools
Focus devtools
Last updated 3 years ago by hartorn .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install focus-devtools 
SYNC missed versions from official npm registry.

Focus dev tools

master develop

Dependencies Status Dev Dependencies Status Peer Dependencies Status

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

image You can explore all your stores data.

  • Routes information

image You can list all your routes and click on them.

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

Please provide some feedback

Here is a short video demo of this tool

A video of the component in action

<iframe width="560" height="315" src="https://www.youtube.com/embed/XuaWkIbWR-A" frameborder="0" allowfullscreen></iframe>

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;

Current Tags

  • 0.4.1-beta3                                ...           beta (3 years ago)
  • 1.0.0                                ...           latest (3 years ago)

32 Versions

  • 1.0.0                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.1-beta3                                ...           3 years ago
  • 0.4.1-beta2                                ...           3 years ago
  • 0.4.1-beta1                                ...           3 years ago
  • 0.4.0                                ...           5 years ago
  • 0.4.0-rc10                                ...           5 years ago
  • 0.4.0-rc9                                ...           5 years ago
  • 0.4.0-rc8                                ...           5 years ago
  • 0.4.0-rc7                                ...           5 years ago
  • 0.4.0-rc6                                ...           5 years ago
  • 0.4.0-rc5                                ...           5 years ago
  • 0.4.0-rc3                                ...           5 years ago
  • 0.4.0-rc2                                ...           5 years ago
  • 0.4.0-rc1                                ...           5 years ago
  • 0.3.4-beta1                                ...           5 years ago
  • 0.3.5                                ...           5 years ago
  • 0.3.5-beta0                                ...           5 years ago
  • 0.3.4                                ...           5 years ago
  • 0.3.4-beta0                                ...           5 years ago
  • 0.3.3                                ...           5 years ago
  • 0.3.2                                ...           5 years ago
  • 0.3.1                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.5                                ...           5 years ago
  • 0.1.4                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (7)
Dev Dependencies (7)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |