Nine Point Mulligan

    renderblocks

    1.0.2 • Public • Published

    RenderBlocks

    Library by Alex Merced of AlexMercedCoder.com (AlexMercedCoder.com/jslib)

    Purpose

    This FrontEnd Library was created to be small and give some very basic reactive and lifecycle features to a block of UI without needing a complex build setup

    Installation

    CDN

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

    Webpack Build Generator

    npx create-renderblocks-app projectName

    NPM

    npm i renderblocks
    

    in your javascript file

    const {RenderBlock} = require("renderblocks")
    

    ES6 Module

    index.html

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

    app.js

    import {RenderBlock} from "https://res.cloudinary.com/dithdroai/raw/upload/v1609694789/libraries/renderBlocksmodule_easmjn.js"
    
    

    Getting started

    Essentially all you need in your HTML to get started

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="RenderBlock.js" charset="utf-8" defer></script>
        <script src="app.js" charset="utf-8" defer></script>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>

    Give any element you want to attach to a renderBlock an Id.

    //A HelloWorld Block
    const app = new RenderBlock({
      target: "#app",
      render: (block) => {
        return `<h1>${block.info.hello}</h1>`;
      },
      info: { hello: "Hello World" },
      methods: {
        test: function (block) {
          console.log(block);
        },
        update: (block) => block.updateInfo("hello", "goodbye world"),
      },
      initialBefore: (block) => console.log("initial before"),
      initialAfter: (block) => console.log("initial after"),
      before: (block) => console.log("before"),
      after: (block) => console.log("after"),
    });
    
    console.log(app.target);
    app.useMethod("update");

    The RenderBlock constructor is passed a config option that has the following defineable properties, all properties get assigned to the instance accessible with the this keyword.

    target: ID that identifies the target element that the block will render too

    info: object with any data you want available to the instance

    render: (block) => 'template string' function that is passed the instance and should return a html template string to be rendered within the target element

    methods: object with function that are passed the instance and can do whatever you like

    lifecycle: functions that automatically run at certain points, all functions are passed the instance as an argument

    • initialBefore: runs before the first render
    • initialAfter: runs after the first render
    • before: runs before every render
    • after: runs after every render

    Other Methods and Properties of the Instance

    • this.useMethod(methodName), this will use a method in the method object and pass it the instance as an argument. The useMethod function takes a string of the methods name as an argument.

    • this.updateInfo(key, value), this updates data in the info object and triggers a new render. Takes a string of the key as the first argument, and the value to be assigned as the second argument.

    • this.props is an object of any attributes on the target element

    Keywords

    none

    Install

    npm i renderblocks

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    8.29 kB

    Total Files

    7

    Last publish

    Collaborators

    • alexmerced