Anyone out there willing to Contribute to the Development of JavaScript Frontend Library

In the past 3 months i have been developing a JavaScript library for creating frontend web applications. The library is called Pearl.Js. It is written in Typescript. And is almost similar to React.

• The library consumes a virtual dom.
• It uses JSX
• It is a component based library

As u can se the above are a few of its similarities with react.
Its source code can be found on its GitHub Repository.

How it works

The library consists of two parts. The core library that creates the virtual dom and the render that renders the virtual dom to the real dom in the browser.

When an element is created through the Pearl.createElement() function. It is represented as an object in the virtual dom and every element or component that is nested through it is stores in that element.

Even the children behave the same way and this prevents the risk of difference in objects that are in the virtual dom.

Syntax

You can code it in either plane JavaScript or using JSX. It is better to use JSX since it is easier and faster. I will show you how you can code in both syntaxes

Using plain Javascript

import Pearl from "@pearl-js/pearl";

const button = Pearl.createElement("button", {
  attributes: {
    id: "mybutton",
    className: "btn btn-primary"
  },
  events: {
    click: (e)=> {
      console.log('clicked')
    }
  },
  children: [
    "Click Me"
  ]
})

Pearl.append(button, document.getElementById('button-cover'), ()=>{
  console.log('mounted')
})

Using JSX

import Pearl, {append} from "@pearl-js/pearl";


const button = <button id="mybutton" onClick={(e)=>{
  console.log('clicked')
}} className="btn btn-primary" >Click Me</button>

append(button, document.getElementById('button-cover'), ()=>{
  console.log('mounted')
})

Note: when using JSX you need babel to compile it. In order to prevent babel from compiling it into React functions you need to install a given plugin that transforms JSX into Pearl Js functions.The plugin is called babel-plugin-jsx-to-pearl

More feature of the library

• State: This is for data management in components. Each time state updates the component rerender itself
• Components: These are almost the same as react components the consists of state and can pass down props to child components.
  • Props: These are used to passed down data to Child components

Contributing

The main reason why I am asking for contributers is because recently i found an issuse in the framework. When a component that has child components that are mapped through would rerender due to state update. It could encounter an error in rendering the children of the child component.

Example

The following code is from the test folder in the GitHub repository

//  tests/jsx/index.js
import Pearl from '@pearl-js/pearl'
import Task from './Tasks'

class Tasks extends Pearl.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      data: [1, 2, 3]
    }
    this.change = this.change.bind(this)
  }
  change() {
    fetch('http://localhost:3000/tasks')
      .then(response => response.json())
      .then(data => {
        this.updateState({
          data: data
        })
      })
  }
  render() {
    return <div className="editor">
      <button onClick={this.change}>Click Me</button>
      <div>
        {this.state.data.map(task => <Task data={task} />)}</div>
    </div>
  }
}


const App = <div>
  <Tasks />
</div>



Pearl.append(App, document.getElementById('root'), () => console.log('App has mounted'))

Task.js file

// tests/jsx/Tasks.js
import Pearl from "@pearl-js/pearl"

class Task extends Pearl.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      code: '',
    }
  }
  render() {
    return <div className="task">
      task
    </div>
  }
}

export default Task

When the change() function is called in the Tasks component it rerenders the component and the its children. The Task components are also rerendered with the props but their children are not rendered both in the virtual dom and in the real dom.

That is the main error being faced now.

Proposed features that need to be added

In order for the framework to reach a world class level we need to add more features to it and these are also one reason we need contributors. So of the features include.

• Global State management: This is to prevent passing down props to other through components.
• Lifecycle methods:

If you also have a feature that you would like to add to this library you are free to add it.

Contributing to Source Code

The source code is on GitHub all you have to do is fork and clone the repository in order to contribute to it.

Cloning

git clone https://github.com/jim-junior/pearl-js.git

The cloned directory will look somethin like this

In packages folder there are two folders.

|
|--|- babel-plugin-jsx-to-pearl
   |
   |- pearl

The pearl folder is the one that contains the main package and the babel-plugin-jsx-to-pearl contains the babel plugin that transforms jsx into pearljs functions.
You can contribute to any of those and incase you want to add another package to the repository it should go in the packages folder.

I would be thankful to any one that contributes.