mercedelement

    1.0.5 • Public • Published

    MercedElement

    By Alex Merced of AlexMercedCoder.com

    mui

    About

    MercedElement is a class that simplifies working with the native HTMLElement class in javascript giving the user access to reactive state, props, reducer/dispatch and global state.

    Installation

    CDN

    <script src="https://res.cloudinary.com/dithdroai/raw/upload/v1609694497/libraries/mercedEl_fje3k2.js" charset="utf-8" defer></script>
    

    NPM

    npm i mercedelement
    

    in your javascript file

    const {MercedElement, FormTool} = require("mercedelement")
    

    ES6 Module

    index.html

    <script type="module" src="app.js" charset="utf-8" defer></script>
    

    app.js

    import {MercedElement, FormTool} from "https://res.cloudinary.com/dithdroai/raw/upload/v1609694497/libraries/mercedElModule_goo6aw.js"
    

    Classes

    MercedElement

    MercedElement is a base class for creating components. In the constructor use the super to define the template builder function, state, and reducer. Afterwards use the MercedElement.makeTag(name, class) static function to register the HTML tag

    class TestTest extends MercedElement {
        constructor() {
            super(
                (state, props) => { // Argument 1: The Build Function
                    return `<h1>${state.hello}</h1><h2>${props.user}</h2>`;
                },
    
                { hello: 'Hello World' }, //Argument 2: The Initial State
    
                (oldstate, payload) => { //Argument 3: Reducer Function (think redux)
                    if (payload.action === 'goodbye') {
                        return { hello: 'goodbye' };
                    }
                }
            );
        }
    }
    
    MercedElement.makeTag('test-test', TestTest);
    

    in HTML

    <test-test user="joe"></test-test>
    

    Instance methods

    instance.build() - captures the current props and state and renders a template

    instance.setState(newState) - updates the components state and runs build

    instance.dispatch(payload) - updates the state by running the reducer defined in the constructor

    Static methods

    MercedElement.gRegister(classInstance) - registers a component instance with the global state

    MercedElement.clearRegister() - removes all components from global registry

    MercedElement.gSetState(newState) - set the global state and re-render all registered components

    MercedElement.gDispatch(reducer, payload) - update the global state with the given reducer function and payload, then re-render all registered components

    MercedElement.makeTag(name, class) - register your custom components with HTML tags, the name must have a dash like ('hello-world')

    LifeCycle Functions

    Outside the constructor just override the same functions used in the native web components api.

    connectedCallback(){} => Runs when components mounted

    disconnectedCallback(){} => Runs when component is removed from dom

    postBuild(){} => function that runs after every render, great for adding event listeners, not for setting state

    read JavaScript Documentation regarding adoptedCallback and attributeChangedCallback

    FormTool

    This is a class whose constructor takes a form element and allows you to grab the form data and clear the form with each.

    this.grabValues() returns object with form values with name property as keys

    this.clearForm() clears all form Values

    this.fillFields(object) takes object fills in the form fields where key matches input name property

    const form = document.querySelector('form');
    
    const testForm = new FormTool(form);
    
    <form id="myform">
        <input type="text" name="one" />
        <input type="text" name="two" />
        <input type="text" name="three" />
        <textarea name="four"></textarea>
    </form>
    <button onclick="console.log(testForm.grabValues())">Form Data</button>
    <button onclick="testForm.clearForm()">Clear Values</button>
    

    FormTool has two methods, grabValues() which will return you an object with the forms values using the name property as the key and the value property as the value. The second method is clearForm which will render the property of value of all form elements to null. Won't grab or clear the value on submit inputs but will for all others.

    Functions

    getQueryHash

    getQueryHash() This function will return an array, the first element being an object with all URL queries, the second being any URL hashes that may exist.

    const [queries, hash] = getQueryHash()
    

    captureProps

    captureProps(element) Pass in any html element and this function returns all of its properties as an object.

    Keywords

    none

    Install

    npm i mercedelement

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    ISC

    Unpacked Size

    16.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • alexmerced