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-bundler -D
package.json
{
"scripts": {
"start": "parcel source/index.html --open",
"build": "parcel build source/index.html --public-url"
}
}
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/[email protected]/webcomponents-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
Scaffolds
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
Go to contribute!
![[optimize] upgrade to Snabbdom v3 & Parcel v2](https://avatars.githubusercontent.com/u/19969570?v=4)
38 Dec 27, 2022
645 Jan 2, 2023
67 Dec 8, 2022
34 Dec 9, 2022
9 Sep 3, 2022
13 Jul 15, 2022
4 Nov 14, 2022
8 Oct 10, 2022
4 Oct 6, 2022
12 Nov 12, 2022