npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

focus-devtools

v1.0.0

Published

Focus devtools

Downloads

117

Readme

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

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;