Web Components实践：如何搭建一个框架无关的AI组件库( 三 ) _Web

•packages/aura-design：基于eslint-config-aurai和stylelint-config-aurai规范，使用Solid和Solid Element构建的Web Components元组件库，包括按钮、图标、卡片、布局等基础组件。
•packages/aura-design-pro：与aura-design类似，但封装了一些复杂组件，通常是依赖第三方库的组件，例如支持Markdown渲染的富文本组件、视频播放组件等。
•Apps/aura-design-docs：基于Storybook的组件文档库，支持查看代码、组件预览，并可实时预览修改组件属性。
•apps/react-starter、apps/vue-starter：计划用于验证Web Components在React和Vue组件中的兼容性等问题。

文章插图
2、部分细节展示
2.1、组件样式编写
Web Components组件中的样式是内联到每一个组件的Shadow DOM中，因此不能用常规的CSS Modules等方案。本项目中使用了大约4种不同的内联样式方案，以对应不同的应用场景：
•原子化CSS方案：UnoCSS致力于将所有样式属性细分为最小单元的CSS，以便实现最大程度的自由组合和复用。此外，UnoCSS还具有自动分析文件中使用的样式的功能，只将实际使用的样式打包，从而减小文件大小。

文章插图
•CSS inline模式：利用Vite的功能，将外部样式作为内联模式引入，当需要自定义复杂样式或语义化场景时，可能会使用此模式。
import styles from './Button.css?inline';
•CSS Template：CSS模板字符串类似于CSS-in-JS方案，通常用于根据prop变量动态控制样式。尽管这种方法会增加一定的运行时处理逻辑，但可以有效减少CSS重复和文件大小。
const styles = css`
:host {
display: inline-block;
}
.box {
height: ${props.size + 2}px;
line-height: ${props.size + 2}px;
position: relative;
overflow: hidden;
}
.nums-chip {
transition: transform 1.5s;
transform: translate(0, -50%);
overflow: hidden;
}
.number {
font-size: ${props.size}px;
line-height: ${props.size + 2}px;
}
`;
•CSS Link：使用link标签引入外部样式表，当组件样式比较多、体积较大时，如果直接内嵌到组件内部，当有N个组件时，体积就会增大N倍（暂不考虑浏览器内置优化逻辑），而使用link标签减少体积同时也可以利用上浏览器缓存的特性。
return (
<>
<link href=https://www.isolves.com/it/cxkf/kj/2024-04-03/{`https://cdn.bootcdn.NET/ajax/libs/highlight.js/11.8.0/styles/atom-one-${props.theme}.min.css`} rel="stylesheet">
<style>{styles}</style>
<div innerHTML={md.render(props.text)}></div>
</>
);
2.2、Svg图标集成
Icon组件引入和注册
import {
defineCustomElements,
registerIcon,
Icon,
} from '@aura-group/aura-design';
registerIcon('/iconfont.svg'); // 自定义svg图标注册，使用主项目根目录的svg图标文件，如果不注册则使用默认图标
defineCustomElements({ Icon }); // 注册Web Components图标组件
组件使用
<ar-icon name="download" size="20px" color="#4213de"></ar-icon>
2.3、组件打包
支持ES（按需加载）和UMD两种范式，自动生成Typescript声明文件：
package.json
{
"name": "@aura-group/aura-design",
"version": "0.3.9",
"description": "",
"main": "dist/aura-design.umd.js",
"module": "dist/aura-design.es.js",
"typings": "dist/types/components/index.d.ts",
"files": [
"dist"
],
"type": "module",
}
Vite相关配置
build: {
lib: {
entry: 'src/components/index.ts',
name: 'aura-design',
fileName: (format) => `aura-design.${format}.js`,
},
},
3、基于Storybook的组件文档
Storybook 是一个开源工具，用于开发和展示 React、Vue、Angular 等前端组件的交互式 UI 组件库。通过 Storybook，开发人员可以在一个独立的环境中编写、展示和测试组件，而不必依赖于整个应用程序。这样可以更快地开发和调试组件，同时也方便团队成员之间的协作。
Storybook 提供了一个交互式的界面，开发人员可以在其中创建不同的“故事”（stories），每个故事对应一个组件的不同状态或交互方式。通过 Storybook，开发人员可以轻松地查看和测试组件在不同状态下的表现，从而更好地理解和调试组件的行为。