MercedUI — Web Components with Super Powers

What is MercedUI

MercedUI is the first UI library I created for helping create Web Components and remains one of my most robust and feature full libraries. In this tutorial, I hope to show you the basics of making a web component with MercedUI.

Setup

  • in a folder somewhere on your computer create three files.
  • index.html
  • app.js
  • style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MercedUI</title>
<!-- MERCEDUI -->
<script src="http://www.alexmercedcoder.com/UI.js" charset="utf-8" defer></script>
<!-- MY CODE -->
<script src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>


</body>
</html>

Your First Component

In the MercedUI library there are several classes and functions available for making web components but let’s focus this tutorial on the MercedElement base class by making a basic Hello World component. Notice the super function in the constructor takes three arguments.

  1. The Initial State — The initial state, works just like Reacts state
  2. Reducer — A redux like reducer function built into the component
class HelloWorld extends MercedElement {
constructor(){
super(
//the builder function
(state, props) => `<h1>Hello World<h1>`,
//the state
{}
)
}
}
MercedElement.makeTag('hello-world', HelloWorld)
<body>    <hello-world></hello-world>

</body>

Props

Just like React, components made with the MercedElement base class can be passed in props via the HTML tag. Being a web component, only strings can be passed this way but it still can be quite powerful.

class HelloWorld extends MercedElement {
constructor(){
super(
//The Builder Function
(state, props) => `<h1>${props.hello}<h1>`,
//The State
{}
)
}
}
MercedElement.makeTag('hello-world', HelloWorld)<body>

<hello-world hello="hello world"></hello-world>

</body>

State

Just like React, MercedElement can store data in an object called state that is updated by a setState function that triggers a rebuild of the component. In the example below, we’ll override the postBuild function which runs after every render as the best place to add event listeners onto our template. MercedUI also has an abbreviated syntax for normal DOM functions using $m for functions regarding the normal DOM and $s for shadowDOM you’ll see used below.

class HelloWorld extends MercedElement {
constructor(){
super(
//The Builder Function
(state, props) => `<h1>${state.hello}<h1><button>Click Me</button>`,
//The State
{hello: "Hello World"}
)
}
postBuild(state, props){
//Select the button from the shadowDOM
const button = $s.select(this, 'button')
//Add an event listener
button.addEventListener('click', () => {
this.setState({hello: "Goodbye World"})
})
}
}
MercedElement.makeTag('hello-world', HelloWorld)

Other MercedUI Features

This really only scratches the surface of the power of the MercedElement base class which also…

  • The global state also has a redux like dispatch capability
  • Lifecycle functions
  • FormTool class which bind to a form making extracting form data… easy
  • getQueryHash function for easily extracting URL queries
  • captureProps for easily grabbing the properties of any element
  • MUIRequest, a version of fetch that automatically parses the response as JSON
  • makeComponent, a function for building very simple components
  • makeLiveComponent, a function for making simple but reactive components
  • globalStore, creates a globalStore object with which you can register components as a global state
  • gsReducer, like globalStore but with more of a redux like reducer/dispatch setup
  • mapToDom, iterates over an array to create a template and renders it target element
  • bindData, same as mapToDom but returns a function to trigger re-renders when data changes
  • createRotator, rotates through assigned templates like a router
  • mapToString, like mapToDom but returns a string to be included in other templates
  • m-router and m-link which work like React Router

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com