MercedUI — Web Components with Super Powers

What is MercedUI

Setup

<!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

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

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

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store