Anyone out there willing to Contribute to the Development of JavaScript Frontend Library
Published: 2021-09-30 15:55:09



In the past 3 months i have been developing a JavaScript library for creating frontend web applications. The library is called [**Pearl.Js**](https://github.com/jim-junior/pearl-js). It is written in [Typescript](https://www.typescriptlang.org/). And is almost similar to React.

- The library consumes a virtual dom.
- It uses [JSX](https://devdocs.io/react/introducing-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](https://github.com/jim-junior/pearl-js/).

### 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__

```js
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__
```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](https://www.npmjs.com/package/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

```jsx
//  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

```jsx
// 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
```bash
git clone https://github.com/jim-junior/pearl-js.git
```

The  cloned directory will look somethin like this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9r99yuvf95tnwp2pxza.PNG)

In packages folder there are two folders.
```bash
|
|--|- 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.