WebCell

Web Components engine based on JSX & TypeScript

Usage

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

Project bootstrap

Command

npm init -y
npm install web-cell
npm install parcel -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.43/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

• Web components
• Custom elements
• Shadow DOM
• Element Internals
• CSS variables
• ECMAScript 6+
• TypeScript 4+

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:

• State management: MobX (also powered by TypeScript & Decorator)

• Router: Cell Router

• UI components

  • BootCell (based on BootStrap v4)
  • Material Cell (based on Material Design)
  • GitHub Web Widget

• HTTP request: KoAJAX (based on Koa-like middlewares)

• Utility: Web utility (Methods & Types)

• Event stream: Iterable Observer (Observable proposal)

• MarkDown integration: MarkCell (MDX implement)

Roadmap

• Extend Build-in Elements with Virtual DOM
• Server-side Render

Go to contribute!