MewUI
A simple UI building library inspired by VueJS. MewUI uses a simple data binding syntax and keeps the DOM updated automatically.
More details at Mew UI Github
Package is published on npm at MewUI on NPM
Installation
npm install @mewui/core
OR
yarn add @mewui/core
Creating a Component
import { component } from '@mewui/core';
const User = component('user', {
template: `
<div class="user-card">
<img @src="user.profileImg" alt="Profile Image" />
<h4>@user.firstName @user.lastName</h4>
<p>
@user.designation at @user.company
</p>
<button @onclick="emit('view-details', @user.id)">View Details</button>
</div>
`,
events: {
'view-details': (event) => console.log(`View details for user ID ${event.detail}`),
},
});
Using the Component
import { render } from '@mewui/core';
const user1 = User.instance();
user1.firstName = 'John';
user1.lastName = 'Doe';
user1.designation = 'Professional Procrastinator';
user1.company = 'Day Dreamers Inc.';
render('#app', [user1]);
user1.designation = 'Professional Daydreamer'; // Reactive property, updates DOM automatically.