DNA

渐进网络组件

特征

DNA旨在释放 自定义元素 结束 声明 API, (英语), 定制内置元素 (单位:千美元) 无阴影成分。 。 。 .

自定义内置元素

DNA使得可以很容易地创建出能够继承HTML行为,保存可用性和可访问性的定制内置元素.

属性、状态和属性

与 @property 财务报告和审定财务报表 @state 装饰者,DNA会给类域添加活性,与属性同步并触发变化的更新.

槽数

DNA通过自定义的轻度DOM引擎——无阴影DOM——使时间档内容确保形式相容并允许 <slot> 内置元素如 <button>。 。 。 .

听众和同步活动

使用 @listen 用于授权事件处理的装饰器,甚至用于时间档内容. 事件可以同心协力,从班内发出.

跨框架兼容性

由标准Web组件API所建,DNA与任意框架配合. Plasma可以为React,Vue,Svelte和Angular生成包装.

故事书和文件

DNA工具生态系统包括一个Web组件预设的"故事本",它自动生成对您组件的文档和控制.

去图书馆

通过国家预防机制安装:

npm i @chialab/dna

yarn add @chialab/dna

pnpm add @chialab/dna

定义组件

import { Component, customElement, listen, property } from '@chialab/dna';

@customElement('hello-world')
class HelloWorld extends Component {
    // define an observed property
    @property() name: string = '';

    render() {
        return (
            <>
                <input
                    name="firstName"
                    value={this.name}
                />
                <h1>Hello {this.name || 'World'}!</h1>
            </>
        );
    }

    // delegate an event
    @listen('change', 'input[name="firstName"]')
    private onChange(event: Event, target: HTMLInputElement) {
        this.name = target.value;
    }
}

然后使用 HTML 中的元素 :

<hello-world></hello-world>

发展

构建

安装依赖关系并运行 build 脚本 :

pnpm install

pnpm build

这将生成 : dist 文件夹,以及声明文件.

测试

运行 test 脚本 :

pnpm test

多亏了 浏览器Stack。为了在当地运行它们:

export BROWSERSTACK_USERNAME=<your-username>
export BROWSERSTACK_ACCESS_KEY=<your-access-key>
pnpm test:browserstack

许可证

DNA 将在 麻省理工学院 执照.