Panix NPM | npm.io

Panix.js

panix js

npm.io npm GitHub file size in bytes npm.io npm.io

Panix is a tiny weight Virtual Dom library . Today's Virtual Doms have easy syntax but they are heavy , very heavy . Panix is one of the most lightweight (~1kb) virtual DOM implementations, and is a learning resource more than a tool you should actually use in production.

Installation

Or if you want to use npm :

npm i panix

and simply

import {node, createElement, update} from "panix"

Note : always add type="module" to your script when you are importing

Hello World

let's make a simple example in panix :

let el = createElement(node("h1", { id: "hello" },"Hello World"));
render(el, document.body); // render the element to the body
let newNode= node("h1", { id: "hello" },"Bye World");
let el = update(el, newNode); // update the element
render(el, document.body) // re-render

Timer

let timer = 0
let el = createElement(node("p",{id:"time"},"hello world"))
render(el, document.body);
setInterval(() => {
  timer++;
  document.body.removeChild(el)
  let newNode = node("p",{id:"time"},`${timer}`)
   el =update(newNode,el)
   render(el,document.body)
}, 1000);

API

node(tagName:[String],props:[object,null],Children:[array,string]): makes a Panix node object and returns it.

createElement(node:[Panix node]): Creates a DOM element and returns it. If children is an array would make a element in parent element

render(container:[element],el:[element]): Add el to container

update(newNode:[Panix Node], oldElement:[element]): Checks all diffrences between this two, Then return a element that is new one. It doesn't just replace them, It checks for each props,children to be same or not.