likes
comments
collection
share

如何开源一个基于Web Components组件库

作者站长头像
站长
· 阅读数 104

一.ranui

上回写了一篇从零开始手写基于Web Components组件

介绍了Web Components的基础知识和操作，并完整的从零开始输出了一个Button组件，后续又补充了一些，直接构建并开源成一个组件库ranui。参考了material-ui和Ant Design。目前组件库里的内容如下：

如何开源一个基于Web Components组件库

二.特点：

  • 前端框架层出不穷，组件库也是。基于Web Components开发，能做到跨框架复用，统一所有情况。
  • 采用Typescript开发，有声明和类型文件。
  • 纯原生手写，无依赖。
  • 整体项目全量导入不到100k，brotli压缩后整体组件库只有18.90 KiB，
  • 类原生，使用上完全可以直接替换原生的标签，更加方便。

三.项目地址

如何开源一个基于Web Components组件库

  • MIT协议

四.文档

五.使用

npm install ranui --save

1.html

<script src="./ranui/dist/index.umd.cjs"></script>

<body>
    <r-button>Button</r-button>
</body>

2.vue

<template>
    <r-button>Button</r-button>
</template>

3.react

react渲染组件有一套自己的规则：react.dev/reference/r…

在tsx中需要注意，react会有一个声明文件，包含所有原生的html标签。自定义的组件类型必然不在里面，需要扩展。

在jsx中不会有类型问题。

import Button from 'ranui'

const App = () => {
    return (
        <>
            <r-button>Button</r-button>
        </>
    )
}

4.js

import 'ranui'

const Button  = document.createElement('r-button')
Button.appendChild('this is button text')
document.body.appendChild(Button)

大多数情况都可以像原生的div标签一样使用

六.开发

如何开发的可以参考这篇：从零开始手写基于Web Components组件

后续补充其他组件的开发过程，和完整源码。

欢迎大家提出各种改进建议，issue和pr。

其他推荐

转载自:https://juejin.cn/post/7259381756691693629
评论
请登录