网络组件
增强网络组件 API 标记。 。 。 .
动机
- 原生的Web组件API太强了. 这意味着你需要为最简单的组件写这么多代码.
- 即使你能够处理好所有的API,你仍然需要处理DOM操纵,并处理你自己的回放.
- 标记 提供最简单、最强大的诱导系统 在客户端上没有设置.
由于所有这些原因,引入一个简单的API来为您处理所有的事情是完全合理的.
// import everything from Markup as if you are using it directly
import { WebComponent, html } from '@beforesemicolon/web-component'
import stylesheet from './counter-app.css' with { type: 'css' }
interface Props {
label: string
}
interface State {
count: number
}
class CounterApp extends WebComponent<Props, State> {
static observedAttributes = ['label']
label = '+' // defined props default value
initialState = {
// declare initial state
count: 0,
}
stylesheet = stylesheet
countUp = (e: Event) => {
e.stopPropagation()
e.preventDefault()
this.setState(({ count }) => ({ count: count + 1 }))
this.dispatch('click')
}
render() {
return html`
<p>${this.state.count}</p>
<button type="button" onclick="${this.countUp}">
${this.props.label}
</button>
`
}
}
customElements.define('counter-app', CounterApp)
在您的 HTML 中, 您可以简单地正常使用标记 .
<counter-app label="count up"></counter-app>
安装
npm install @beforesemicolon/web-component
在浏览器中
<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/[email protected]/dist/client.js"></script>
<!-- link you app script after -->
<script>
const { WebComponent } = BFS
const { html, state, effect } = BFS.MARKUP
</script>
AI和生态系统背景
llms.txt是简洁的, 软件包拥有的API和AI工具的生态系统合同.llms-full.txt包含完整的解析文档和实例.
Web 组件再出口 Markup. 路由器和 Intl 在 Web 组件上构建并可以 在不改变其组成部分模式的情况下合并组成.