@mewui/core v0.0.1
MewUI Core
The core component library responsible for providing a way to develop components for MewUI.
Installation
NPM
npm install @mewui/core
Yarn
yarn add @mewui/core
Usage
Creating a component using the component function.
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}`),
},
});
Creating a component by loading the template
First define the component template inside the template tags.
<template id="user">
<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>
</template>
And then create the component as follows
import { fromTemplate, render } from '@mewui/core';
const User = fromTemplate('#user', {
'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]);
Make sure to have an #app div present in the HTML.
<html>
<head>
...
</head>
<body>
<div id="app"></div>
...
</body>
</html>
Data Bindings
MewUI Core extracts all the bindings from the component template and adds reactive properties for each of them on the component instance itself. So, the user1 object contains properties that are bound to the template.
user1.firstName = 'John';
user1.lastName = 'Doe';
user1.designation = 'Professional Procrastinator';
user1.company = 'Day Dreamers Inc.';
NOTE: The DOM node associated with the user1 component instance (accesible as user1.$el) is always up to date with the properties on the object because of the reactive bindings setup by MewUI Core. However, the DOM node has to be manually added to the DOM tree visible on the browser. For that, the user1.$el can be directly appended to the HTML, or the render function could be used which accepts the component instance directly.
render('#app', [user1]);
For Developers
Developer mode
Running
yarn dev
AND
yarn dev:test
will start up the development build of the project and the test watcher.
To build the project
yarn build
builds the production bundle for the project.
To run the tests
yarn test
will run all the tests.
5 years ago