joltik

A micro VDOM library for learning purposes

Description

I'm just learning how a VDOM (Virtual Document Object Model) library works by building one and documenting my learnings in medium. I don't pretend this to be nothing serious, so please don't use it in production.

Installation

$ npm install joltik --save

Configuring JSX pragma

By default, [Babel] transforms your JSX code into a call to React.createElement. You can customize this behaviour by adding a jsx pragma at the top of your files, with the following syntax:

/** @jsx j */

Wher j here is joltik's replacement for React.createElement. You can read more about this behaviour in @developit's blog post: WTF Is JSX.

Configuring Babel

You will need to install Babel's transform react jsx plugin in order to support JSX syntax only, instead of the full preset you normally would use for React.

Here's a sample of the bare minimum .babelrc config you will need:

{
  "presets": ["env"],
  "plugins": ["transform-react-jsx"]
}

It is very convenient to replace your pragma everywhere by defoult, to avoid adding it as a comment at the top of your files. In order to do so, add the following config to the plugin:

{
    ...
    "plugins": [
        ["@babel/plugin-transform-react-jsx", {
            "pragma": "j"
        }]
    ]
}

Creating your first component

The syntax is similar to a usual React component, with the only difference of importing j from joltik.

// HelloWorld.js
import { j } from "joltik";
import "./styles.css";

export const HelloWorld = ({ text }) => <h1 className="title">{text}</h1>;

To render an element, you would do:

// index.js
import { j, createElement } from "joltik";
import { HelloWolrd } from "./HelloWorld";

document
  .getElementById("app")
  .appendChild(createElement(<Hello text="Hello, joltik!" />));

Demo

You can see a working demo in this codesandbox and also in the examples folder.

Why Joltik?

Joltik is the smallest Pokémon from all the current editions.

References

• How to write your own Virtual DOM
• WTF is JSX