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.