AMPonent, Webcomponent Building Library

What is AMPonent?

Setup

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- AMPONENT LIBRARY -->
<script
src="http://www.alexmercedcoder.com/ponent.js"
charset="utf-8"
defer
></script>
<!-- YOUR JS FILE -->
<script src="app.js" defer></script>
<!-- YOUR CSS FILE -->
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>

APP.JS

AMPonent.make("hello-world", {
render: (box, props) => `Hello World`,
})
<body>
<hello-world></hello-world>
</body>

Using Props

AMPonent.make("hello-world", {
render: (box, props) => `${props.hello}`,
})
<body>
<hello-world hello="hello world"></hello-world>
</body>

The Box

AMPonent.make("hello-world", {
render: (box, props) => `<h1>${box.hello}</h1>
<button id="testbox">Click Me</button>`,
box: {
hello: "hello world",
},
after: function () {
const component = this
component.$s("#testbox").addEventListener("click", function () {
component.stuffBox({ hello: "goodbye world" })
})
},
})

Styling your component

AMPonent.make("hello-world", {
pretty: (box, props) => `h1 {color: ${props.h1}}`,
render: (box, props) => `<h1>${box.hello}</h1>
<button id="testbox">Click Me</button>`,
box: {
hello: "hello world",
},
after: function () {
const component = this
component.$s("#testbox").addEventListener("click", function () {
component.stuffBox({ hello: "goodbye world" })
})
},
})
<body>
<hello-world h1="red"></hello-world>
<hello-world h1="green"></hello-world>
<hello-world h1="purple"></hello-world>
</body>

Creating Styled Components

AMPonent.makeStyle("colored-h1", "h1", "color: red;")
<colored-h1><h1>I am being styled</h1></colored-h1>

Bottom Line

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