AMPonent, Webcomponent Building Library

What is AMPonent?

AMPonent is my newest Web Component library that allows you to create Web Components with super powers with ease. It bakes in things like reactive data, reducers, styled components and lifecycle functions in a nice function based approach.

Setup

  • in a folder somewhere on your computer create three files.
  • index.html
  • app.js
  • style.css

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

Let’s start out by creating the simplest component possible… Hello World!

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

Using Props

So let’s test out using props. Unlike react, all props are strings so you can’t pass functions or objects via props but you can certainly use it to make many aspects of your component customizable.

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

The Box

Let’s use the box, we’ll serve the hello world screen from box and add the logic to create a button and use the after function to assign an event listener. The stuffBox functions works like setState in React class components where it merges the new and old box and re-renders the component.

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

You can add a pretty property which is a function to pass in styles for your component and you can use your props and box variables in there too.

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

If you want create components that style their children you can use the makeStyle function, check out the code below.

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

Bottom Line

AMPonent allows you to make very powerful web components in a very Vue/React type manner. We only scratched the surface in this tutorial, check out the documentation and see what amazing web components you can make that you can use from project to project.

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