1 Star 1 Fork 0

WebCell / core

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
ReadMe.md

WebCell logo

WebCell

Web Components engine based on JSX & TypeScript

NPM Dependency Build Status

Anti 996 license jaywcjlove/sb

Slideshow Gitter

Edit WebCell demo

NPM

Usage

Demo & GitHub template: https://web-cell.dev/scaffold/

Project bootstrap

Command

npm init -y
npm install web-cell
npm install parcel-bundler -D

package.json

{
    "scripts": {
        "start": "parcel source/index.html --open",
        "build": "parcel build source/index.html --public-url"
    }
}

tsconfig.json

source/index.html

<script
    crossorigin
    src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries"
></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/custom-elements-es5-adapter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-internals-polyfill@0.1.1/dist/index.min.js"></script>

<script src="source/SubTag.tsx"></script>
<script src="source/TestTag.tsx"></script>

<sub-tag></sub-tag>
<test-tag></test-tag>

Simple component

source/SubTag.tsx

import { createCell, component, mixin } from 'web-cell';

export function InlineTag({ defaultSlot }: any) {
    return <span>{defaultSlot}</span>;
}

@component({
    tagName: 'sub-tag',
    renderTarget: 'children'
})
export class SubTag extends mixin() {
    render() {
        return <InlineTag>test</InlineTag>;
    }
}

Advanced component

source/TestTag.tsx

import {
    createCell,
    component,
    mixin,
    attribute,
    watch,
    on,
    Fragment
} from 'web-cell';

import { SubTag } from './SubTag';

interface Props {
    title?: string;
}

interface State {
    status: string;
}

@component({
    tagName: 'test-tag',
    style: {
        '.title': {
            color: 'lightblue'
        },
        '.title.active': {
            color: 'lightpink'
        }
    }
})
export class TestTag extends mixin<Props, State>() {
    @attribute
    @watch
    title = 'Test';

    state = { status: '' };

    onClick = () => (this.title = 'Example');

    @on('click', ':host h1')
    onDelegate() {
        this.setState({ status: 'active' });
    }

    render({ title }: Props, { status }: State) {
        return (
            <>
                <h1 title={title} className={`title ${status}`}>
                    {title}
                    <img alt={title} onClick={this.onClick} />

                    <SubTag />
                </h1>
            </>
        );
    }
}

Basic knowledge

Life Cycle hooks

  1. connectedCallback

  2. disconnectedCallback

  3. attributeChangedCallback

  4. adoptedCallback

  5. shouldUpdate

  6. updatedCallback

  7. formAssociatedCallback

  8. formDisabledCallback

  9. formResetCallback

  10. formStateRestoreCallback

Scaffolds

  1. Basic

  2. DashBoard

  3. Static site

Ecosystem

We recommend these libraries to use with WebCell:

Roadmap

Go to contribute!

简介

基于 TypeScript 和 JSX 的 Web 标准组件引擎 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/WebCell/core.git
git@gitee.com:WebCell/core.git
WebCell
core
core
v2

搜索帮助