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

mode-management

v1.0.5

Published

ModeManage is used for trunk-based development and also have some hidden logs and behaviours for test or development in runtime. ;)

Downloads

7

Readme

Info

npm version install size npm downloads npm total downloads

Install

To install, use below code

npm install mode-management

Or

yarn add mode-management

Mode Management Usage

You can add modes as shown in the following example:

import {ModeManagement} from 'mode-management';

const MY_FEATURE_VERSION = 'myFeatureVersion';
const defaultVersionForMyFeatures = 1
ModeManagement.add(MY_FEATURE_VERSION, defaultVersionForMyFeatures);


//And when you want to check modes you can use:

const modeVersion = ModeManagement.get(MY_FEATURE_VERSION)
switch (modeVersion) {
    case 1:
        showVersionOne();
        break;
    case 2:
        showVersionTwo();
        break;
    case 3:
        showVersionThree();
        break;
}

Now in development tools > console tab you can write below code to change modes manually:

console-example.jpg

For example this is screenshot of Chrome dev tools > console tab.

You can also use hooks for React:

import {useMode, useModeMutation} from "mode-managment";

function DemoApplication() {
    const featureVersion = useMode(MY_FEATURE_VERSION);
    const setFeatureVersion = useModeMutation(MY_FEATURE_VERSION);

    switch (featureVersion) {
        case 1:
            return <span onClick={() => setFeatureVersion(2)}>
                version 1
            </span>;
            break;
        case 2:
            return <div onClick={() => setFeatureVersion(3)}>
                version 2
            </div>;
            break;
        case 3:
            return <p onClick={() => setFeatureVersion(1)}>
                version 3
            </p>;
            break;
    }
}

In this case, if you change mode in console tab on changing it anywhere, the component will be re-rendered.

For changing modes you can also use ModeManagement.set:

ModeManagement.set(MY_FEATURE_VERSION, 2);

Some times your mode is boolean (flags). For example, you want to check whether it is test-version to show some elements to for Tester or Developers or not:

import {useModeFlag, useModeFlagMutation, ModeManagement} from "mode-managment";

const DEV_MODE = "devMode";
const defaultStateForDevMode = false; // It means dev mode is off by default;
ModeManagement.addFlag(DEV_MODE, defaultStateForDevMode);
ModeManagement.setFlag(DEV_MODE, true);

if (ModeManagement.getFlag(DEV_MODE)) {
    showDevToolsForTestAndDevelop();
}

// for react you can use below hooks :
const isDevMode = useModeFlag(DEV_MODE);
const setIsDevMode = useModeFlagMutation(DEV_MODE);

For activating boolean modes (flags). you can set them on or off in console tab in Chrome dev tools. To set devMode on:

console2.png

To set devMode off:

console3.png

You don't need to call a function just read $mode.devMode_on to set the mode on and $mode.devMode_off to set it off. (You just press enter for a normal JavaScript property call.)

To see all active Modes you can use the code below and press enter:

console4.png

Multiple Mode Managements

You may need to have more than on your application. Then you should create an object of ModeManagementClass:

import {ModeManagementClass} from "mode-managment";

const secondModeManagement = new ModeManagementClass();
secondModeManagement.addFlag(DEV_MODE, defaultStateForDevMode);

// and you should pass `secondModeManagement` to second argument of hooks :
const isDevMode = useModeFlag(DEV_MODE, secondModeManagement);
const setIsDevMode = useModeFlagMutation(DEV_MODE, secondModeManagement);
const mode = useMode(DEV_MODE, secondModeManagement);
const setMode = useModeMutation(DEV_MODE, secondModeManagement);

Trace Logger Usage

Trace logger is a tool for logging, trace, develop and test. It is similar to ModeManagement but just for logging and is not accepting value, just boolean. ModeManagement its self, is using TraceLogger to log active modes.

For example below code will never log anything, unless you activate your logger in console tab of Chrome dev tools:


const tracer = new TraceLogger('ajax', ['response', 'request', 'unauthorized']);

// set below codes in interceptors ↓
if (tracer.get('request'))
    console.log(request);
if (tracer.get('response'))
    console.log(response);
if (tracer.get('unauthorized') && response.status === 401)
    console.log('We have an unauthorized request!', request)

For example if we want to see logs for every request, we should write below code in console tab:

console5.png

Real Examples

You can also clone code and run npm start to see below examples in src/_dev folder.