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

@one-for-all/node-carve

v0.2.0

Published

在页面引擎中,通常需要通过右侧的配置表单对选中的元素进行不同属性的配置,而node-crave设计的目的就是希望用户在只提供一份简单的属性描述文件(PropsSpec)即可自动生成对应的配置表单。

Downloads

3

Readme

Overview

在页面引擎中,通常需要通过右侧的配置表单对选中的元素进行不同属性的配置,而node-crave设计的目的就是希望用户在只提供一份简单的属性描述文件(PropsSpec)即可自动生成对应的配置表单。

PropsSpec 是什么?

PropsSpec 即 props's specification 的简写,用户在提供组件库的同时还需要对应提供一份组件库的属性描述文件(PropsSpec),里面包含了对组件自身以及组件属性的具体描述以及在表单中期望的展现形式,最终node-carve通过这份配置文件去生成配置表单。

PropsSpec 结构简介

PropsSpec 的结构十分简单,但是任然有许多需要注意的细节,在这里简单给出 Artery 整体结构介绍,更新细节设计请参考对应的 reference。

PropsSpec 由三部分组成:

  • props 描述组件具体的属性的配置项
  • isContainer 描述组件是否能够接受 children
  • isOverLayer 描述组件是否是存在于额外的浮层中

props

在props中接收一个描述数组,每一个描述项针对单独的一个属性。同时用 type 描述属性的基本类型,如果在没有传递 will 的情况下,会根据 type 渲染默认的配置组件。

BasePropSpec

BasePropSpec 上定义了属性的通用配置。

| 名称 | Required | Type | 描述 | | :--------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- | | label | 是 | string | 配置表单中配置此属性的标题 | | type | 是 | string | 表示属性的类型,例如 string number boolean 等 | | name | 是 | string | 此属性在对应组件的 key | | desc | 否 | string | 此属性的一些额外描述 | | will | 否 | WillTypes | 配置表单中渲染的具体配置组件,不传递的话则会根据 type 渲染默认的配置组件 | | willProps | 否 | Record<string, unknown> | 配置组件的属性 |