@web-companions/gfc

> Generator Functional Components. A wrapper for creating Web components with JS Generator function

Features

- 🚀 Fast: Built with standards based Custom Elements and JS Generator.
- 🪂 Typed: Written in TypeScript.
- ⚛️ JSX: Can be used with JSX or without it (babel-plugin-transform-jsx-to-tt).
- 🪢 Flexible: Fit to different template libraries.
- 🧹 No dependencies

---

Table of contents

- Installation
- Usage

---

Installation

``
npm install @web-companions/gfc --save
`

---

Usage

For the best DX I suggest using this library with babel-plugin-transform-jsx-to-tt and lit-html or another library to rendering templates to DOM.

index.jsx

`tsx
import { EG, p } from '@web-companions/gfc';
import { render } from 'lit-html';

/**
* Counter element
*/
export const counterElement = EG({
props: {
msg: p.req(),
},
})(function* (props) {
let count = 0;

while (true) {
props = yield render(
<>
type="button"
onclick={() => {
count++;
this.next();
}}
>
{props?.msg}

{count}
,
this
);
}
});

// define a new custom Counter element with tag 'demo-counter-element'
const CounterElement = counterElement('demo-counter-element');

/**
* ROOT element
*/
EG({
props: {
header: p.req('header'),
},
})(function* (props) {
while (true) {
props = yield render(
style={css
margin: 10px;
}
>


{props.header}