als-component
Version:
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
55 lines (49 loc) • 1.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/component.js"></script>
<title>Users</title>
</head>
<body>
<div component="Users"></div>
</body>
<script>
class User extends Component {
constructor(props) { super(props) }
remove() {
const {user,usersComponent} = this.props
// const usersComponent = this.Component.components.Users // Another way to get component
usersComponent.update({users:usersComponent.props.users.filter(({id}) => id !== user.id)})
}
render({user}) {
const {id,email,age,gender,username,firstName} = user
return /*html*/`<div>
${firstName}
<button click="${this.action('click',() => this.remove())}">delete</button>
</div>`
}
}
class Users extends Component {
constructor(props={},inner) {
super(props,inner)
}
async render({users}) {
if(users === undefined) {
fetch('https://dummyjson.com/users')
.then(res => res.json())
.then(data => {
this.update({users:data.users})
});
return /*html*/`<div>Fething users</div>`
}
return /*html*/`<div>
${users.map(user => new User({user,key:user.id,usersComponent:this}).call()).join('')}
</div>`
}
}
const usersComponent = new Users()
usersComponent.update()
</script>
</html>