Nonvoluntary Professional Mangling

    amponent

    1.1.3 • Public • Published

    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
    }

    Keywords

    none

    Install

    npm i amponent

    DownloadsWeekly Downloads

    3

    Version

    1.1.3

    License

    ISC

    Unpacked Size

    19.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • alexmerced