WebComponent
开箱即用的 webComponent 框架
快速高效
可直接使用脚手架创建模板组件,采用装饰器定义组件,采用 JSX 编写视图代码。
数据驱动
组件内部实现了微型的数据响应式以及虚拟Dom,开发者开发组件时无需关心视图渲染更新。
跨框架、沙箱隔离
框架继承自 WebComponent,具有完善的 js、css 沙箱;react、vue、angular 还是原生项目均可使用。
# 创建组件
安装 t-cli 脚手架、创建组件模板工程:
## 安装脚手架
npm install @wu-component/wu-cli -g
## 创建组件 <web-component-name> 为组件需要定义的组件名 此处按照 wu-todo-example 做示例
wu init-web-component <web-component-name>
## 进入对应目录
cd wu-todo-example
## install
npm install
使用 yarn 也可以,如果你的网络环境不佳,推荐使用 cnpm。
# 开发组件
install 之后,你就可以直接 npm run dev:package 实时预览,即可就可以如 vue、react 工程般热更新开发.
# 开发示例
示例代码中实现了简易版的 TODO List 组件,代码如下以及效果如下:
# 实际效果
# 代码实现
interface ToDoItem {
text: string;
status: 0 | 1;
}
@Component({
name: 'wu-todo-example',
css: css,
})
export class TestExample extends WuComponent implements OnInstall {
constructor() {
super();
}
@Prop({ default: [], type: Array })
public list: ToDoItem[] = [];
public inputRef = null;
public submitTodo(e: MouseEvent) {
e.preventDefault();
this.addTodo();
}
public addTodo() {
if (this.inputRef?.value) {
const list: ToDoItem[] = [...this.list];
list.push({
text: this.inputRef?.value,
status: 0
});
this.list = list;
this.inputRef.value = '';
}
}
public contextmenu(item: ToDoItem, index: number) {
this.list.splice(index, 1);
this.update();
}
public clickFun(item: ToDoItem, index: number) {
const newList = this.list;
if (newList[index]) {
newList[index].status = newList[index].status === 1? 0: 1;
}
this.list = newList;
this.update();
}
public override render(_renderProps = {}, _store = {}) {
return (
<div class="container">
<h1 class="caption">todos</h1>
<form class="container" onsubmit={(e) => this.submitTodo(e)}>
<input class="input" id="input" placeholder="Enter your todo"></input>
<ul class="list">
{
this.list.map((item, index) => {
return (
<li className={item.status === 1 ? "completed": "normal"}
oncontextmenu={(item) => {this.contextmenu(item, index)}}
onclick={(item) => {this.clickFun(item, index)}}
>
{item.text}
</li>
)
})
}
</ul>
</form>
<div class="tips">鼠标左键单击切换状态、右键单击删除 </div>
</div>
);
}
public override connected(shadowRoot: ShadowRoot){
this.inputRef = this.shadowRoot.querySelector("#input");
}
}
# 组件使用
<wu-todo-example></wu-todo-example>
# 组件构建
组件开发完成后可采用 npm run build:package 构建产物,最终产物如下:
dist
index.cjs.js
index.esm.js // ES6 模块代码
index.umd.js // umd 模式
index.d.ts
# 生产预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 自定义标签 -->
<wu-todo-example></wu-todo-example>
<!---->
</div>
<!-- 引入构建后的产物 -->
<script src="./dist/index.umd.js"></script>
</body>
</html>