mehanalavimajd / panix Goto Github PK

lightweight Virtual Dom library

License: Other

JavaScript 93.60% Shell 0.02% HTML 0.24% CSS 6.14%

virtualdom dom javascript javascript-library react panix panixjs virtual-dom virtual-dom-library fast

panix's Introduction

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

panix's People

Contributors

Stargazers

Watchers

panix's Issues

Style function

@PooiaFerdowsi I think we should make a style funcion that is like this :

{
fontWeight:600,
color:red
} 
// to this 
["fontStyle : 600 ;" , "color : red"]

cannot pass null as props

I usually pass {} for props but this time I used null and it didn't work . I will work on it today or tomorrow.
also @PooiaFerdowsi do you know any body who can contribute?

createElement cannot render an array of children

When I run tests with CreateElement and array of Children, It just render the parent with nothing inside

`createElement` is not making the correct props

In the unit testing with jasmine, I understood that CreateElement doesn't make the correct attributes.

let  el = createElement({
      tag: "h1",
      props: { id: "hello" },
      children: "Hello world",
    });

will produce:

<h1 i="d">Hello world</h1>

The strings would be twice when mounting an array of string

I have this code :

and this is the result:

I have no idea why this is happening

Panix needs a website

Panix needs a website!

you do NOT need to put website at a new repository.

make a directory called 'site' ( or anything you want )

go to settings
select pages from left sidebar
set configuration in source section and choose you directory (site) and you branch.

notice a mit license clause

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or **(note here)sell**
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

at first glance it's is ordinary for MIT LICENSE but in a closer look a attracts attention.
sell
this means any one can sell it with out any difference!
so if you want prevent it remove self and add following clause in LICENSE file

mit license with a restriction:
you can't sell

Running mount function

our Syntax is this:

mount(node("div" , {id:"hello"} , "hello world"))

That's fine but if we want to assign a variable :

let a = mount(node("div" , {id:"hello"} , "hello world"))

it will run again !!!
my idea is this :

let a = mount(node("div" , {id:"hello"} , "hello world"))
a.run()

and if we want to run it without declare a variable

mount(node("div" , {id:"hello"} , "hello world")).run()

do you agree @pooiaFerdowsi and @amirghazi87

Unit testing

The project hasn't been maintaining for about a year and so it has a lots of bugs. I am writing unit tests to find them.