Client side renderer

Client side renderer is a npm package to help you render HTML pages better and easier and was made to supplement Electron but can also be used on the front end

how do I use Client side renderer?

Client side renderer can be used to help or fully render your electron application

intallation

You can install this package into your project using npm

npm install client-side-renderer

Using Client side renderer

to get started create a new javascript file and start with this boilerplate code;

const {RendererConfig , render} = require('client-side-renderer')

// creates a object to repersent the page
const page = new RendererConfig(); 

// creates a property using the type and id props to be appended to the body
page.createElementOnBody("div" , "top"); 

// adds a element to the div property with the id of top
page.createChildOf("div-top" , "h1" , "main-header" , "Hello World"); 

// appends to the h1 stored in index 0 of the child array
page.createChildOf(0 , "h3" , "" , "from client-side-renderer"); 

Elements that have the same tag name and are to be appended onto the body must have a unique id.
children of elements that are appended on the body do not need ids because they are referanced by their index in the children array

you can look at the items in the children array by logging page.children to the console

only the function createChildOf adds to the children array by counting the amount of times this function is called and subtracting 1 you can get the array index for referance

New Features

Newest Features in v1.1.0

Element Editor

The element editor is a class and uses a selector (same as if you were using querySelector or querySelectAll) and can grab one or more elements and make changes to them. With the element editor you can edit the innerHTML Classlist and values.

const {ElementEditor} = require("client-side-renderer")
// true refers if there are mutiply elements you want to select the default is false
const inputGroup = new ElementEditor(true);

// set the selector if you were using query selector you can also set it when you create the object
inputGroup.selector = "form#add input.formInput"

// grabs the elements for you and saves them in the object
inputGroup.getElements();
// edits all elements. the first argument tells what you are value you are changing
// and the second is what the new value to be added is
inputGroup.editAll("innerHTML" , "Hello World");

// edits one element out of the group only works on multiple elements
// you must give it vaild id
inpuGroup.editOne("uniqueId" , "innerHTML" , "from client-side-renderer")

Save and Load

The new pageLoader object allows you to save your pages for referance and access them when the page needs to change.

const {RendererConfig , pageLoader} require("./client-side-renderer");
const page = new RendererConfig();

// create page to render
page.createElementOnBody("h1" , "header" , "Hello world" );
page.createElementOnBody("h3" , "" , "from client-side-renderer");

// instead of renderering the page use pageloader's save method

// homePage is the name of the page and what you uses to retrive the page with the load method
pageLoader.save("homePage" , page);

// when the you want the page to load call the load method on pageloader with the name of the page you gave
pageLoader.load("homePage")

Syntax changes

when attaching a child to a element on the body instead of writing [element , id] you can now write element-id where element is the name of the element and id is the id you gave it. The two values are seperated by a hypen.

if there is no id or id is an empty string just use the element name. element

old

page.createElementOnBody("div" , "top");
page.createChildOf(["div" , "top"] , "h1" , "" , "Old way");

new

page.createElementOnbody("div" , "top");
page.createChidlOf("div-top" , "h1" , "" , "new way")

Future Features

bug fixes