https://github.com/codewithkyle/supercomponent
Give your Web Components modern-day superpowers.
https://github.com/codewithkyle/supercomponent
Last synced: 3 months ago
JSON representation
Give your Web Components modern-day superpowers.
- Host: GitHub
- URL: https://github.com/codewithkyle/supercomponent
- Owner: codewithkyle
- License: mit
- Created: 2021-03-03T23:18:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-13T17:24:32.000Z (over 1 year ago)
- Last Synced: 2025-03-11T14:52:23.230Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 83 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# Super Components
Give your Web Components modern-day superpowers:
- create stateful web components similar to [React](https://github.com/facebook/react/)
- manage your components state with an [xstate](https://github.com/davidkpiano/xstate) inspired state machine
- bring your own client-side rendering framework/library such as [lit-html](https://lit-html.polymer-project.org/guide)
- works in every major browser
- lightweight (483 bytes)
## Installation
Install via NPM
```bash
npm i -S @codewithkyle/supercomponent
```
Import via CDN
```javascript
import SuperComponent from "https://unpkg.com/@codewithkyle/supercomponent@2/supercomponent.min.mjs";
```
## Usage
```typescript
import SuperComponent from "@codewithkyle/supercomponent";
type ExampleModel = {
products: Array;
}
class Example extends SuperComponent{
constructor(){
super();
this.state = "LOADING";
this.stateMachine = {
LOADING: {
SUCCESS: "IDLING",
ERROR: "ERROR",
},
IDLING: {
TOGGLE: "LOADING",
}
}
// Set the model & trigger the first render
this.set({
products: [],
});
}
override async connected(){
const request = await fetch("/products.json");
if (request.ok){
const response = await request.json();
// Updates the model
this.set({ products: response });
// Trigger a state transition
this.trigger("SUCCESS");
} else {
this.trigger("ERROR");
}
}
override disconnected() {
// Do something when the component disconnects from the DOM
}
override render(returnMarkup = false) {
// Render this component model using any UI framework
switch (this.state){
case "ERROR":
// Render error message
break;
case "IDLING":
// Render this.model.products
break;
default:
// Render loading animation
break;
}
}
}
customElements.define("example-component", Example);
```