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

mk-meta-engine-plus

v1.0.60

Published

元数据化引擎,在mk-app-loader实现的应用隔离基础上,实现可以用json元数据描述界面模型,并提供了action、reducer的基础函数和monkeyKing组件.

Downloads

2

Readme

mk-meta-engine

元数据化引擎,在mk-app-loader实现的应用隔离基础上,实现可以用json元数据描述界面模型,并提供了action、reducer的基础函数和monkeyKing组件.

目的是让开发者能按照一个固定的套路创建应用

run example

$ cd example
$ npm init
$ npm start

基于当前元数据引擎实现的一些模板app,请点击链接查看

demo网站

API

index

| 成员 | 说明 | 类型 | |-------------|----------------|--------------------| | start | 启动, 使用mk命令创建网站已经调用,不用手动再掉 | function | | config | 配置,配置元数据引擎以及app-loader需要apps,components等,不用手动调用 | function | | action | 元数据引擎基类action,提供了一些action基础方法 | class | | reducer | 元数据引擎基类reducer,提供了一些reducer基础方法 | class | | wrapper | 元数据引擎组件装饰器 | function | | componentFactory | 元数据引擎组件仓库,可以注册自己开发的组件 | function | | AppLoader | AppLoader组件,可以加载app,来源于mk-app-loader | ReactElement |

action

| 成员 | 说明 | 类型 | |-------------|----------------|--------------------| | config | 配置函数,使用mk命令初始化的应该默认已经调用 | function | | getField | 获取state中某个字段值,参数为(fieldPath),如data.form.user | function | | gf | gf === getField, 简写 | function | | setField | 设置state中某个字段值,参数为(fieldPath,value) | function | | sf | sf === setField, 简写 | function | | getMeta | 获取元数据,参数为(path,propertys), path:如root.form.user, propertys:如['style'] | function | | gm | gm === getMeta, 简写 | function | | context | 上下文object,设置后所有app可以获取context中的信息 | object | | toast | 轻提示 | function | | notification | 通知提示 | function | | modal | 显示模式窗口 | function |

reducer

| 成员 | 说明 | 类型 | |-------------|----------------|--------------------| | init | 初始化,使用mk命令初始化的应该默认已经调用 | function | | getMeta | 获取元数据, 参数(state, path,propertys) | function | | gm | gm === getMeta | function | | getField | 获取字段值,参数为(state, fieldPath) | function | | gf | gf === getField | function | | setField | 设置字段值, 参数为(state, field, value) | function| | sf | sf === setField | function | | context | 上下文Object | object |

meta

Json化定义界面数据,如下

{
    name: 'root',
    component: '::div',
    children: [{
        name: 'about',
        component: '::a',
        children: 'about',
        style: { fontSize: 16, margin: 30 },
        onClick: '{{$handleAboutClick}}'
    }, {
        name: 'hello',
        component: '::a',
        children: 'hello world',
        style: { fontSize: 16, margin: 30 },
        onClick: '{{$handleHelloClick}}'
    }, {
        name: 'content',
        component: '::div',
        style: { fontSize: 16, margin: 30 },
        children: 'hello world'
    }]
}

| 固定属性 | 说明 | 类型 | |-------------|----------------|--------------------| | name | 名称,同级不能为重复 | string | | component | 组件名,componentFactory中注册的,使用注册时候的名字,默认包含了mk-component所有组件;使用原生组件时,前面加:: | string | | _visibile | 引擎级属性,设置为false,这个节点将不render | bool | | _power | 超能力,目前支持函数返回组件和循环输出组件 | string | | ... | ...属性将属性值解构赋值给组件 | | 组件自身可用属性 | 只要是组件可用的属性就可以设置 | |

注:组件自身可用属性,属性值可以使用表达式,格式为"{{}}"

"{{data.form.user}}" => 取state中路径为data.form.user的值

"{{$handleClick}}" => 返回action中定义的handleClick方法

"{{(e)=>$setField('data.form.user', e.target.value)}}" => 用户输入框修改,直接调用Action基类中setField方法赋值

"{{$getVisible()}}" => 调用action中getVisible方法执行结果