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 🙏

© 2026 – Pkg Stats / Ryan Hefner

deef-router

v0.1.6

Published

deef router

Downloads

26

Readme

deef-router

针对deef的思想设计的router,用于模块的初始化路由注册,提供history change时的callback环境。

Usages

// app.js
import deef from 'deef';
import createHashHistory from 'history/createHashHistory';
import deefRouter from './router';

export const app = deef();
export const connect = app.connect;
export const history = createHashHistory();
export const router = deefRouter({history});

// handler.js
import {router} from 'app';
router.register(rule, {onMatch, onBreakMatch}[, key]);

rule

1、express style path

const rule = '/:module/:page';
const rule = {path: '/', exact: true};

2、match pathname or search params

const rule = {pathname: '/Test'};
const rule = {pathname: '/TodoEntry', search: '?from=Test'};
const rule = {pathname: '/TodoEntry', search: {from: 'Test'}};
const rule = {pathname: '/TodoEntry', search: {from: location.search.from => {}}};

location.search是'?from=Test&otherKey=value'也会match上{search: '?from=Test'}

3、function match

const rule = ({pathname, search}) => {};

return null or plain object, must pass key param

onMatch(match, matchLog) match the rule

如针对rule '/Todo/:filter?'

location 从 /Test 到 /Todo/all时触发,此时无matchLog

location 从 /Todo/all 到 /Todo/active时触发,此时有matchLog(Array)

router.register('/:module', {
    onMatch({params: {module}}) {
        //do something with *module*
    }
});
router.register({
        pathname: '/TodoEntry',
        search: {from: 'Test'}
    }, {
    onMatch({pathname, search: {from}}) {
        //do something with *from*
    }
});

matchLogList意味着是在这同一个rule内,location的切换

onBreakMatch(matchLog) 从match到mismatch时触发

如针对rule '/Todo/:filter'

location 从 /Todo/all 到 /Todo/active不触发

location 再从 /Todo/active 到 /Test时触发

此时matchLog包含了两次match信息:

[/Todo/active, /Todo/all] // 时间轴顺序从晚到早

key

deef-router会根据key来保证同一个路由rule只注册一次(once on)

当rule不是function时,不是必须要传key的,会根据rule的特征自动生成唯一的key

当然,你也可以在任何调用的地方指定一个全局唯一的key来实现特殊逻辑,比如允许针对同一个rule注册两套路由规则

Demo

deef-examples-todomvc