Panix.js

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.

Thank you

Thanks to all of the people who starred panix :

License

See license in LICENSE file