Need help with WebCell?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

EasyWebApp
147 Stars 10 Forks Other 47 Commits 2 Opened issues

Description

Web Components engine based on JSX & TypeScript

Services available

!
?

Need anything else?

Contributors list

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





Simple component

source/SubTag.tsx
import { createCell, component, mixin } from 'web-cell';

export function InlineTag({ defaultSlot }: any) { return {defaultSlot}; }

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

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() { @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">
                {title}
                <img alt="{title}" onclick="{this.onClick}">

                <subtag></subtag>
            </h1>
        &gt;
    );
}

}

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.