web-cell
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    WebCell logo

    WebCell

    Web Components engine based on JSX & TypeScript

    NPM Dependency CI & CD

    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!

    Install

    npm i web-cell

    DownloadsWeekly Downloads

    10

    Version

    2.3.0

    License

    LGPL-3.0

    Unpacked Size

    168 kB

    Total Files

    28

    Last publish

    Collaborators

    • tech_query