Baeunjs NPM | npm.io

BaeunJS

A lightweight JavaScript library for DOM manipulation, state management, and hash-based SPA routing. BaeunJS provides a simple way to build small to medium-sized Single Page Applications (SPAs).

Features

elem: Create DOM elements with attributes, event listeners, and children.
stateManager: Manage application state with localStorage and reactive callbacks.
hashRouter: Build hash-based routing for SPAs without server-side configurations.

Installation

Install BaeunJS using NPM:

npm install baeunjs

Or include it via a script tag:

<script src="https://unpkg.com/baeunjs"></script>

Usage

1. DOM Manipulation with `elem`

The elem function simplifies the creation of DOM elements.

import { elem } from "baeunjs";

// Create a div with attributes and children
const myDiv = elem("div", { class: "container", id: "my-div" }, [
  elem("h1", {}, "Hello, World!"),
  elem("button", { onclick: () => alert("Clicked!") }, "Click Me"),
]);

document.body.appendChild(myDiv);

2. State Management with `stateManager`

The stateManager provides an easy way to manage application state and listen for changes.

import { stateManager } from "baeunjs";

// Set a value
stateManager.set("user", { name: "Alice", age: 25 });

// Get a value
const user = stateManager.get("user");
console.log(user.name); // Alice

// Update a value
stateManager.update("user", (current) => ({
  ...current,
  age: current.age + 1,
}));

// Listen for changes
stateManager.onChange("user", (newUser) => {
  console.log("User updated:", newUser);
});

3. SPA Routing with `hashRouter`

The hashRouter enables hash-based SPA routing with no server-side configuration.

import { hashRouter, elem } from "baeunjs";

// Define routes
const routes = {
  "/": () => elem("div", {}, "Home Page"),
  "/about": () => elem("div", {}, "About Page"),
  "*": () => elem("div", {}, "404 Page Not Found"),
};

// Initialize the router
hashRouter(routes);

// Add navigation links
document.body.appendChild(
  elem("nav", {}, [
    elem("a", { href: "#/" }, "Home"),
    elem("a", { href: "#/about" }, "About"),
  ])
);

API Reference

`elem(tagName, options, children)`

Create a DOM element.

Parameter	Type	Description
`tagName`	`string`	The name of the element tag.
`options`	`Record<string, any>` (optional)	Attributes and event listeners.
`children`	`string \| number \| HTMLElement[]`	Children elements or text content.
Returns	`HTMLElement`	The created DOM element.

`stateManager`

A utility for managing application state.

Methods

Method	Description
`set(key, value)`	Save a value to localStorage.
`get(key)`	Retrieve a value from localStorage.
`update(key, fn)`	Update a value based on the current state.
`remove(key)`	Remove a specific key from localStorage.
`clear()`	Clear all stored state values.
`onChange(key, callback)`	Listen for changes to a specific key.

`hashRouter(routes, appId)`

Create a hash-based SPA router.

Parameter	Type	Description
`routes`	`Record<string, () => HTMLElement>`	A map of routes to components.
`appId`	`string` (optional, default: `"app"`)	The ID of the container where components render.

| Returns | () => void | A function to manually trigger the router. |

Example Project

Create a simple SPA using BaeunJS:

import { elem, hashRouter, stateManager } from "baeunjs";

const routes = {
  "/": () => elem("div", {}, "Welcome to Home Page!"),
  "/counter": () => {
    const count = stateManager.get("count") || 0;

    const incrementButton = elem("button", {
      onclick: () => {
        const updatedCount = stateManager.update("count", (c) => (c || 0) + 1);
        countText.textContent = `Count: ${updatedCount}`;
      },
    }, "Increment");

    const countText = elem("p", {}, `Count: ${count}`);

    return elem("div", {}, [countText, incrementButton]);
  },
  "*": () => elem("div", {}, "404 Not Found"),
};

// Initialize the router
hashRouter(routes);