amponent
v1.1.3
Published
Framework for a functional approach to working with Native Web Components
Downloads
3
Readme
AMPonent
Web Componenet Creation Library
by Alex Merced of AlexMerced.com
About
AMPonent is Alex Merced's newest Web Component Building Library for making reusable reactive web components easier without a complex build process.
Installation
CDN
<script src="https://res.cloudinary.com/dithdroai/raw/upload/v1629464347/libraries/ponent_b6y1uh.js" charset="utf-8" defer></script>
Webpack Build
npx create-amponent-app projectName
NPM
npm i amponent
in your javascript file
const AMPonent = require("amponent")
ES6 Module
index.html
<script type="module" src="app.js" charset="utf-8" defer></script>
app.js
import AMPonent from "https://res.cloudinary.com/dithdroai/raw/upload/v1629464347/libraries/ponentmod_z0ukid.js"
AMPonent.make
AMPonent.make is the main function for creating web components, the function signature is.
AMPonent.make(name, config)
name
This is the name of the resulting html tag which MUST be kebab case. So if you pass in "my-component" the resulting html tag to use the component will be .
config
config is an object which can have the following properties
render: this takes a function which should return a template a string, the signature of the function should be (box, props, element) => template string
box: this should be an object of variables to be used throughout your component, think of this as state in react or data in vue.
beforeFirst: A function that runs before the first render, the signature is (box, props, element) => {}
afterFirst: A function that runs after the first render, the signature is (box, props, element) => {}
before: A function that runs before every render, the signature is (box, props, element) => {}
after: A function that runs after every render, the signature is (box, props, element) => {}, this function is the perfect place to wire event listeners on your template.
destroy: A function that runs when component is removed from DOM, the signature is (box, props, element) => {}
pretty: function that should return a string of css styles to go in the components style tag, function signature is (box, props) => h1 {color: red} div {display: flex}
reducer: A function that run when the dispatch method is invoked, the function signature is (box, props, payload, element) => {}, the return value will use to update the box.
funcs: An object of other methods you'd like available to use by your component, if you want to be able to use the this keyword in the function to access state and props then write it as anything but an arrow function (object method or function declaration).
Other Properties
- this.$s(query): Equivalent to this.shadowRoot.querySelector
- this.$sa(query): Equivalent to this.shadowRoot.querySelectorAll
- this.$id(query): Equivalent to this.shadowRoot.getElementById
Methods
this.stuffBox(newStuff) pass an object of properties to this function and they'll be added/updated in the components box, the component will then be re-rendered triggering the before, render and after functions in that order.
this.dispatch(payload) like redux or react useReducer hook, a payload is passed into this function which passes the box, props and payload into the reducer function whose return value will be passed into the stuffBox method updating the box.
AMPonent.captureProps(element)
Pass any DOM element into this function and it will return an object of its attributes/properties
AMPonent.makeStyle(name, target, style)
This creates a component for styling its children, similar to React Styled Components.
name
This is the name of the resulting html tag which MUST be kebab case. So if you pass in "my-component" the resulting html tag to use the component will be .
target
This is a string that names the target child, so if this component is meant to style an h1 element that is its child, this would be "h1". If you want to style any child then you can pass "*".
style
This is a string of the style to be applied to the target, for example "color: red; padding: 5px; font-family: Arial;"
Example of declaring components in your javascript
////////////////////////
//<hello-world> component
////////////////////////
AMPonent.make("hello-world", {
render: (box, props) => `<h1>Hello WOrld</h1>`,
});
////////////////////////
//<super-cheese> component
////////////////////////
AMPonent.make("super-cheese", {
render: function (box, props, el) {
console.log(el);
return `<h1>${box.hello}</h1> ${el.test} <button id="button">Click Me</button>`;
},
box: { hello: "Hello World" },
funcs: {
test: () => "Say Hi",
},
firstBefore: function (box, props, el) {
console.log("before first render");
},
firstAfter: function (box, props, el) {
console.log("after first render");
},
before: function (box, props, el) {
console.log("before");
},
after: function (box, props, el) {
el.$s("#button").addEventListener("click", (event) => {
el.stuffBox({ hello: "Goodbye World" });
});
},
});
////////////////////////
//<red-h1> component
////////////////////////
AMPonent.makeStyle("red-h1", "h1", "color: var(--the-color);");
Example of using Components in your 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>
<script src="ponent.js"></script>
<script src="app.js" defer></script>
</head>
<body>
<style>
:root {
--the-color: green;
}
</style>
<super-cheese cheese="gouda"></super-cheese>
<red-h1><h1>Hello World</h1></red-h1>
</body>
</html>
Sharing Data with DataShare
To more easily share data between components or accross your app you can create a dataShare object
const ds = AMPonent.createDataShare({
initialState: {
count: 0,
},
});
This object can have it's properties changed freely, allowing components to use it as a stored of shared data. You can also register functions to it that are passed the state so you can control when updates occur (instead of immediately after each property change.) So you can batch changes to the dataShare then trigger updates afterwards.
Below is an example of binding a cfunction to dataShare updates.
// register a function to update the components box when datashare runs update function
ds.register((datashare) =>
document
.querySelect("component-component")
.stuffBox({ count: datashare.count })
);
function addOne() {
ds.count += 1; // update the datashare
ds.update(); // run all registered functions
}