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

data-mock-react

v0.0.8

Published

a library to mock data for demo purpose

Downloads

2

Readme

Data Mocker

背景

前端框架

  • 页面渲染: react
  • 脚手架: umijs
  • 同步/异步请求: umi-request

业务需求

  • 对组件的state的值进行替换

基于上述技术框架和业务需求,本项目支持基于mocker data来对state做全局替换

功能

  • [x] Basic Processor: 对string、number、Array类型数据作出替换(未标明的字段保留,不做变动)
  • [x] Patch Processor: 对数组对象,支持按照字段筛选,将符合条件的对象作出支持将其中部分对象作出替换
  • [x] Custom Processor: 支持用户自定义Processor,来做对应的替换
  • [x] 通过静态变量进行配置
  • [x] 通过local storage进行配置,支持动态修改
  • [x] Batch Processor: 对数组对象,批量的将某一字段替换成对应值

安装

yarn

yarn add data-mock-react

npm

npm install --save data-mock-react

使用

假设在model文件里,我们在某个reducer中对state作出了更改,样例如下 mode/global.js

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      return Object.assign(state, data);
    }
  }
}

此时state值如下

  {
  "user": {
    "code": "200",
    "res": {
      "data1": {
        "list": [
          1,
          2,
          3
        ]
      },
      "keyStr": "1111",
      "keyInt": 1
    }
  },
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "name": "车间1",
          "status": "异常",
          "val": 10
        },
        {
          "name": "车间2",
          "status": "异常",
          "val": 22
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

现在我们想做以下两件事:

  • 将user这个state里的部分数值作出全量替换
  • 将workshop这个state里的某个数组中的部门元素作出替换 即期待将state变成以下内容
{
 "user": {
   "code": "200",
   "res": {
     "keyStr": "222",
     "data1": {
       "list": [
         3,
         3,
         3
       ]
     },
     "keyInt": 1
   }
 },
 "workshop": {
   "res": {
     "shopInfo": [
       {
         "name": "车间1",
         "fff": 1,
         "status": "正常",
         "val": 10
       },
       {
         "val": 22,
         "name": "车间2",
         "ddd": 2,
         "status": "正常"
       },
       {
         "val": 33,
         "name": "车间3",
         "status": "异常"
       }
     ]
   },
   "code": "200"
 }
}

支持以下替换的processor:

  • Basic Processor: 对string, number, Array等type的字段做全量替换
  • Patch Processor: 对Array里的部分元素作出替换
  • Batch Processor: 对Array里所有元素的特定字段进行替换
  • Custom Processor: 自定义的processor

Basic Processor: 对string, number, Array等type的字段做全量替换

注意:

  • 不支持将对象替换成数组, 0.0.8起

需求如下,对于global这个namespace而言,将user这个state里的部分元素作出替换,样例配置如下

{
  "global": {
    "user": {
      "type": "replace",
      "value": {
        "res": {
          "keyStr": "222",
          "data1": {
            "list": [
              3,
              3,
              3
            ]
          }
        }
      }
    }
  }
}

在这个例子中我们将对user这个state作出如下替换

  • res.keyStr替换成字符串2222
  • res.data1.list替换成数组[3,3,3]

对应的结果如下 输入

  {
  "user": {
    "code": "200",
    "res": {
      "data1": {
        "list": [
          1,
          2,
          3
        ]
      },
      "keyStr": "1111",
      "keyInt": 1
    }
  }
}

输出

{
  "user": {
    "code": "200",
    "res": {
      "keyStr": "222",
      "data1": {
        "list": [
          3,
          3,
          3
        ]
      },
      "keyInt": 1
    }
  }
}

对Array里的部分元素作出替换

需求如下,对于global这个namespace而言,将workshop这个state下的某shopInfo数组里的部分元素作出替换,样例如下

{
  "global": {
    "workshop": {
      "type": "patch",
      "selectPath": "res.shopInfo",
      "value": {
        "res": {
          "shopInfo": [
            {
              "fff": 1,
              "status": "正常",
              "name": "车间1"
            },
            {
              "name": "车间2",
              "ddd": 2,
              "status": "正常"
            }
          ]
        }
      },
      "matchKey": "name"
    }
  }
}

在这个例子中,我们坐了如下的事情

  1. 按照res.shopInfo来定位要修改的数组的位置
  2. 按照name字段来对数组元素作出匹配,并修改其他值
  3. 将name为车间1的对象的status字段修改为字符串正常,fff字段修改为1
  4. 将name为车间2的对象的status字段修改为字符串正常,ddd字段修改为2 输入
{
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "val": 10,
          "name": "车间1",
          "status": "异常"
        },
        {
          "status": "异常",
          "name": "车间2",
          "val": 22
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

输出

{
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "fff": 1,
          "val": 10,
          "name": "车间1",
          "status": "正常"
        },
        {
          "status": "正常",
          "name": "车间2",
          "val": 22,
          "ddd": 2
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

对Array里所有元素的特定字段进行替换

需求如下,对于global这个namespace而言,将dashboard这个state下的data数组里所有元素的score字段替换成99,样例如下

{
  "global": {
    "workshop": {
      "type": "batch",
      "selectPath": "res.data",
      "selectKey": "score",
      "value": 99
    }
  }
}

在这个例子中,我们坐了如下的事情

  1. 按照res.data来定位要修改的数组的位置
  2. 按照score字段来确定要修改的数组对象的字段
  3. 将所有数组元素的score字段修改成99 输入
{
  "workshop": {
    "code": "200",
    "res": {
      "data": [
        {
          "score": 88,
          "label": "大屏1"
        },
        {
          "score": 80,
          "label": "大屏2"
        },
        {
          "score": 87,
          "label": "大屏3"
        }
      ]
    }
  }
}

输出

{
  "workshop": {
    "code": "200",
    "res": {
      "data": [
        {
          "score": 99,
          "label": "大屏1"
        },
        {
          "score": 99,
          "label": "大屏2"
        },
        {
          "score": 99,
          "label": "大屏3"
        }
      ]
    }
  }
}

使用自定义的Processor

除了上述三个内置的Processor,本项目还支持自定的Processor,详细介绍如下 将每一个替换的工作定义为MockJOb对象

export interface MockJob {
  selectPath: string; // 用于选择object中特定的字段
  selectKey: string; // 在数组替换中,用于指定数组里元素的值
  matchKey: string; // 在数组patch中,用于匹配数组元素
  type: string; // job类型,用于读取相关的processor
  value: Array<object> | object; // 替换的值
  [key: string]: any; // 自定义processor,用于自定义的字段
}

用户可以参考下述代码来使用Custom Processor

import { DataMocker } from 'data-mock-react';

let dm = new DataMocker();
console.log('查询支持的Job列表', dm.getSupportJobType());
const customProcessor = (obj, mockJob) => {
  const { value } = mockJob;
  return obj['custom'] = value;
};
dm.registerProcessor('customProcessor', customProcessor);
const config = {
  global: {
    user: {
      type: 'customProcessor',
      value: 666
    }
  }
};
const data = {};
const val = dm.mockData(data, 'global', config);
console.log(val);

上述代码定义了一个名为customProcessor的处理器,作用是将配置里的val字段添加/覆盖原数据的custom字段

使用local storage

使用JSON.strinify将配置Json序列化成字符串,放到将配置存放在local storage里的codeMap值,然后直接调用即可

import { DataMocker } from 'data-mock-react';

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      let val = dm.mockData(data, 'global');
      return Object.assign(state, md);
    }
  }
}

使用静态变量

在代码里将配置项写成静态变量,然后直接调用即可

import { DataMocker } from 'data-mock-react';

const mockConfig = {
  global: {
    user: {
      type: 'replace',
      value: {
        res: {
          data1: {
            list: [3, 3, 3],
          },
          keyStr: '222',
        },
      },
    },
    workshop: {
      type: 'patch',
      selectPath: 'res.shopInfo',
      matchKey: 'name',
      value: {
        res: {
          shopInfo: [
            {
              name: '车间1',
              fff: 1,
              status: '正常',
            },
            {
              name: '车间2',
              ddd: 2,
              status: '正常',
            },
          ],
        },
      },
    },
  },
};
export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      let val = dm.mockData(data, 'global', mockConfig);
      return Object.assign(state, val);
    }
  }
}

配置项相关

DataMocker类提供以下方法

import { DataMocker } from 'data-mock-react';

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      console.log(dm.getSupportJobType()) // 获得当前支持的替换类型
      console.log(dm.getConfig()) // 获得当前mocker的配置
      console.log(dm.setConfig({}))// 设置当前mocker的配置
      console.log(dm.reset()) // 重置mocker
      let val = dm.mockData(data, 'global');
      return Object.assign(state, md);
    }
  }
}