renderblocks

v1.0.2

Published

3 years ago

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

Downloads

0High
0Medium
0Low

alexmerced

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme