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

@anyxml/meta-data

v1.4.1

Published

This repository is mainly used to collect metadata of mini-program templates for the use of editor plugins to assist in coding.

Downloads

534

Readme

@anyxml/meta-data

本仓库主要用于收集小程序模板的元数据,以供编辑器插件使用辅助编码。

所有数据来源都是基于公开渠道获取的:

  • 支付宝: https://github.com/AlipayDocs/open-docs
  • 微信:https://developers.weixin.qq.com/miniprogram/dev/component/
  • 组件库:
    • Ant Design Mini: https://mini.ant.design/

实现方式:本项目会先基于上面公开信息做一个简单的拆分,将单个组件拆分成【组件属性列表】和【组件剩余文档】两个部分,

  • 将【属性列表】喂给大模型,推导出一个属性相关的 JSON 数据;
  • 将【组件剩余文档】直接生成一个字符串塞到组件的 description 属性上;

然后将这些数据整合成一个组件元数据,最后将所有组件合并生成一个大 JSON,JSON 文件的类型定义如下:

这只是大概(不全)的结构,完整详情可以查看定义文件

interface AnyXML {
  /** 通用的配置项,包括基础属性、控制属性 和 事件相关属性 */
  common: {
    [key: 'base' | 'control' | 'event']: {
      /** 输入此关键字时,会出现下文指定的 attrs 属性 */
      trigger?: { key: string, description: string }[]
      /** 指定的元素上不会出现这里列出的属性 */
      exclude?: string[]
      /** 属性集合 */
      attrs: Attr[]
    }
  },
  /** 支持的所有元素集合 */
  elements: {
    /** 组件名称 */
    name: string
    /** 组件描述,支持 markdown 语法 */
    description?: string
    /** 组件支持配置的属性 */
    attrs: Attr[]
  }
}

interface Attr {
  /** 属性名称 */
  name: string
  /** 属性类型 */
  type?: string
  /** 是否必填 */
  required?: boolean
  /** 属性默认值 */
  defaultValue?: any
  /** 支持此属性的最底基础库版本号 */
  versionRequirement?: string
  /** 属性描述,支持 markdown 语法 */
  description?: string
  /** 属性对应的枚举值列表 */
  enumValues?: { value: string, description?: string }[]
}

安装

npm install @anyxml/meta-data

使用

使用内置类型:

import type { AnyXML } from '@anyxml/meta-data'

在脚本中使用JSON数据:

import meta4axml from '@anyxml/meta-data/dist/axml.json'
import meta4wxml from '@anyxml/meta-data/dist/wxml.json'
import antdmini from '@anyxml/meta-data/dist/antd-mini/latest.json'

使用CDN上的JSON数据:

  • unpkg

    • axml: https://unpkg.com/@anyxml/meta-data/dist/axml.json
    • wxml: https://unpkg.com/@anyxml/meta-data/dist/wxml.json
    • antdmini@latest: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/latest.json
    • [email protected]: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/latest.2.json 指定最新的大版本
    • antdmini@version: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/[version].json 注意填入你需要的版本
  • jsdelivr

    • axml: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/axml.json
    • wxml: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/wxml.json
    • antdmini@latest: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/latest.json
    • [email protected]: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/latest.2.json 指定最新的大版本
    • antdmini@version: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/[version].json 注意填入你需要的版本

原生模板开发工作流

首次下载此仓库

  • 安装子模块: git submodule update --init --recursive
  • 更新子模块: git submodule foreach git fetch
  • 查看子模块: git submodule foreach git diff origin/master

wechat

1. 先下载源文件

将源 html 代码原封不动下载到 data/wechat/html

node src/wechat/generate.mjs 1

2. 将 html 中的嵌套 table 打平生成新的 html

因为要交给大模型来生成 json 元数据,大模型对 markdown 识别更准点,但 markdown 对嵌套的 table 支持不友好,所以需要先将 html 中的嵌套 table 给打平了。

最终生成的代码保存在 data/wechat/html2 中。

另外,此步也会将文档中 a 标签的相对链接替换成绝对链接。

node src/wechat/generate.mjs 2

注意检查控制台输出的参数是否符合预期,一会会输出下面两种结构(如果不是,则要注意下了):

$ { zone: '# 通用属性', name: 'worklet:ongesture', label: 'eventhandler 回调参数' }

$ { zone: '# 通用属性', name: 'referrer-policy', label: '合法值' }

3. 生成 rest.md 和 attrs.md

node src/wechat/generate.mjs 3

运行命令会将【属性】相关的标题及其子标题输出在控制台上,注意查看是否符合预期,一般应该会出现下面内容:

$     # 通用属性
$     # Skyline 特有属性
$     # WebView 特有属性

$     # 通用属性
$         # 错误码信息与解决方案表

4. 使用 src/wechat/prompts.md 塞给大模型,然后用 gen/wechat/*/attrs.md 提问

获取答案后可以再执行 node src/wechat/check.mjs 脚本去校验结果

数据量比较大,可以写脚本自动去大模型上问答

5. 合并生成最终产物

node src/wechat/merge.mjs

alipay

1. 先更新子模块内容

cd data/alipay
git log # 记录本地最新一次提交(方便后续拉下代码来了之后比对有哪些变更)
git checkout main && git fetch
git diff origin/main  # 和远程分支比较,看主要更新了哪些内容(方便后续看是否要手动处理)
git pull origin main  # 更新本地代码
cd -

2. 执行 markdown 拆分

node src/alipay/generate.mjs

git diff # 查看通用组件的更新,如果有更新 attrs,可以按以下流程继续,否则可以结束

打开一个大模型聊天界面,将 src/alipay/prompts.md 中的内容喂给它,然后读取出它返回的 json 塞到 attrs.json 中。

注意,当有 attrs.md 中多个 table 时,大模型填充的数据不一定准确,有时需要手动处理。

最后,可以运行下面脚本检查下生成的结果是不是都符合预期:

node src/alipay/check.mjs

3. 检查自定义组件的更新

没有灵活的方案,需要用第一步查到的上一次处理时的 commit id 和最新的比,判断下是否有相关文件更新了,然后人肉处理

4. 合并生成最终文件

node src/alipay/merge.mjs

组件库开发工作流

antd-mini

1. 更新模块

用于获取最新版本号

git submodule foreach git fetch

2. 运行脚本自动生成

注意更新脚本中的版本号

node src/antd-mini/make.mjs

weui/vant

执行 vant 命令时将以下命令中的 weui 字符串替换成 vant

1. 更新模块

用于获取最新版本号

git submodule foreach git fetch

2. 运行脚本自动生成

注意更新脚本中的版本号

node src/weui/make.mjs

利用 prompts 模板去大模型上生成对应 attrs.json,或者使用 ai.sh 文件中的命令自动生成(依赖个人私库)

3. 执行 merge 脚本

node src/weui/merge.mjs

eof