Pinak: A Lightweight JavaScript Library for User Interfaces

Pinak is a JavaScript library designed for creating user interfaces. Unlike some popular frameworks, Pinak doesn't rely on a Virtual DOM but instead utilizes its unique implementation, eliminating the need for a diffing process. This README provides an in-depth overview of Pinak and its key features.

Features

Component-Based Architecture

Pinak adopts a component-based approach, where each component encapsulates its state and methods. This encourages code modularity and reusability, simplifying the development process.

Low Learning Curve

If you're already familiar with other JavaScript frameworks like React, transitioning to Pinak is a breeze. It offers familiar APIs, making it easy to pick up.

Minimal Size

Pinak stands out for its incredibly small production bundle size, measuring just 2.9KB when minified and gzipped. This compact size includes five built-in components, making it ideal for lightweight applications.

Blazing Speed

In Pinak, every component runs just once in its lifecycle. It efficiently updates DOM nodes without the need to search the entire DOM tree, resulting in lightning-fast performance.

Reactive System

Pinak provides a robust reactivity system, negating the necessity for third-party state management libraries. You can use signals to react to changes in your application's data.

Error Handling

Pinak comes equipped with a built-in error handling component. It gracefully manages errors and renders fallback nodes when issues arise during runtime.

Directives

Enhance the functionality of DOM elements with Pinak's directives. You can even create your custom directives, complete with component lifecycles.

Global Registration

Register your directives and components globally, making them readily accessible in your templates.

Fragment Support

Components can return multiple nodes, allowing for greater flexibility in your user interface design. You can use Pinak's built-in fragments or craft your own.

Dynamic Class & Style Management

Easily add or remove classes and styles dynamically using arrays, objects, or simple strings.

Note

• Pinak is not recommended for production use; it is primarily intended for testing purposes.

• As of the provided information, Pinak does not support build tools. You can test it directly in your browser.

• Pinak does not include a built-in template implementation. Instead, you should use its Node builder function, h(), which is straightforward to use.

• When using loops (e.g., for), ensure that you provide keys, and these keys should not rely on indices. If you don't plan to remove items from the list, you can omit keys.

Getting Started

To get started with Pinak, follow these steps:

Installation

You can install Pinak using your preferred package manager:

# npm
npm install pinak

# or pnpm
pnpm install pinak

# or yarn
yarn add pinak

Alternatively, include Pinak directly in your HTML using script tags from a CDN:

<!-- Development version (with development error messages) -->
<script src="https://cdn.jsdelivr.net/npm/pinak/dist/pinak.dev.js"></script>

<!-- Or minified production version -->
<script src="https://cdn.jsdelivr.net/npm/pinak/dist/pinak.prod.js"></script>

Example usage

Here's a simple example of creating a counter component using Pinak:

const { createApp, h, useSignal, useEffect } = Pinak;

const Counter = () => {
    const count = useSignal(0);

    // Respond to changes in the `count` signal.
    useEffect(() => console.log("Count:", count()))

    return h('div', { class: 'container' }, [
        h('h1', count),
        h('button', { type: 'button', onClick: () => count(p => p + 1) }, 'Increment'),
        h('button', { type: 'button', onClick: () => count(p => p - 1) }, 'Decrement')
    ])
}

const destroy = createApp(
    Counter,
    document.getElementById("root"),
    /** You can register global components and directives and pass initial props for `Counter` components here. */
)

See more demos in example folder

Contributing

We welcome contributions from the community to make Pinak even better. Here's how you can contribute:

• Fork this repository.

• Create a new branch for your changes: git checkout -b feature/your-feature-name.

• Make your changes and commit them: git commit -m "Add your feature".

• Push your changes to your fork: git push origin feature/your-feature-name.

• Create a pull request to this repository, explaining your changes and why they are valuable.

License

Pinak is MIT licensed