Icarus

Icarus is a collection of decorators for simplifying the development of web components in JavaScript or TypeScript.

Installation

Install Icarus via npm:

``bash
npm install 1car.us
`

Usage

Import the necessary decorators from the library in your web component files:

`javascript
import { Component, Prop, Props, State, JSX } from "1car.us";
`

Example

$3

`javascript
import { Prop, State, Props, JSX } from "1car.us";

@Props(["user"])
export class UserItem {
@Prop user: { name: string; id: number } | null;
@State private count: number = 0;

increment(el) {
this.count = this.count + 1;
el.srcElement.innerText = this.count;
}

renderItems() {
const userName = this?.user?.name;

if (userName) {
return (
id="user-item"
className="user-item"
style={{
margin: "10px 0",
border: "1px solid #ddd",
padding: "10px",
}}
>
{userName || "Loading..."}

);
}
}

render() {
return (



);
}
}
`

$3

`javascript
import { Component } from "1car.us";

@Component({
tag: "user-list",
shadow: true,
styleUrl: "./components/userlist.css"
})
export class UserList extends HTMLElement {
users: any[];

constructor() {
super();
// Initialize the user data
this.users = [];

// Fetch and render users
this.fetchAndRenderUsers();
}

async fetchAndRenderUsers() {
// Mock API endpoint (replace with your actual API endpoint)
const apiUrl = "https://jsonplaceholder.typicode.com/users";

try {
const response = await fetch(apiUrl);
const users = await response.json();
this.users = users;
this.renderUsers();
} catch (error) {
console.error("Error fetching users:", error);
}
}

renderUsers() {
const userFragment = document.createDocumentFragment();

this.users.forEach((user) => {
const item = new UserItem();
item.user = user;
const jsx = item.render();
userFragment.appendChild(jsx);
});

this.shadowRoot.appendChild(userFragment);
}
}
``