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

tdp-generator

v1.0.1

Published

TDP代码生成工具

Downloads

26

Readme

TDP通用代码生成器

用于生成标准react/reducer/actions代码及目录,适用于使用easy-redux的项目

Api

// 获取基本的配置,并输出到文件
$ tdp config -p ./config.js

// 以config.js为配置生成代码
$ tdp init -c ./config.js

// 获取追加代码的配置,并输出到文件
$ tdp add-config -p ./config.add.js

// 按配置追加代码
$ tdp add -c ./config.add.js

结果

根据config.js生成的结果可在这里查看

模块

各模块会自动生成相关的Component\Define\Actions\Reducers,并最终集成在整个模块中

Condition

生成condition相关代码

效果图

配置

condition: {
  // 模块的名称,用于为模块,文件夹等命名
  name: 'condition',
  // 模块表单相关,可自动生成表单
  fields: [{
    key: 'name', // 字段
    type: 'Input', // 类型 诸如Input,Select,Textarea等
    label: '姓名', // 展示名称
    default: '', // 默认值
    validators: [{  // validators
      required: true
    }],
    placeholder: '测试'
  }, ...
  ]
},

Table

生成表格相关代码,并不会自动生成columns配置

效果图

配置

table: {
  name: 'hostList', // 模块的名称,用于为模块,文件夹等命名
  fetch: 'get', // 请求的action
  url: '/tip/hostList/get', // 获取列表的url
  resHandler: 'res => ({ items: res.data.items, page: res.data.page })', // 处理结果
  paramsHandler: `params = {
    condition: ...getState().Host.condition
  }`, // 处理请求参数
  pagination: true, // 是否带分页
  // 包含新增操作
  add: {
    modal: 'hostDataEdit', // 对应的模态框名称,参考后续模态框.name
    btn: '创建报告' // 对应的按钮
  },
  // 包含编辑操作
  edit: {
    modal: 'hostDataEdit'
  },
  // 包含删除操作
  del: {
    url: '/host/delete' // 请求的url
  },
  // 包含修改状态操作
  status: {
    url: '/host/changeStatus'
  }
},

Modal

提供三种类型Modal, 普通展示modal,请求展示modal,编辑modal

效果图

配置

modals: [{
  // 展示型modal, 可自定义展示内容
  name: 'hostData',
  type: 'show',
  title: '展示型modal'
}, {
  // 带请求的展示modal,打开时自动请求获取数据,自定义展示内容
  name: 'hostDataFetch',
  type: 'show',
  fetch: 'get',
  url: '/tip/hostList/get', // 请求链接
  title: '带请求的展示型modal'
}, {
  // 编辑型modal, 自动生成表单
  name: 'hostDataEdit',
  title: '编辑型modal',
  type: 'edit',
  fetch: 'edit',
  url: '/tip/hostList/edit', // 编辑请求链接
  // 表单的配置
  fields: [{
    key: 'name',
    type: 'Input',
    label: '姓名',
    default: '',
    validators: [{
      required: true
    }],
    placeholder: '测试'
  }, {
    key: 'city',
    type: 'Select',
    label: '城市',
    options: [{
      label: '111',
      value: 1
    }, {
      label: '222',
      value: 2
    }]
  }]
}]