https://github.com/olovajs/olova
A smooth, minimal library for infusing JavaScript with dynamic behaviour
https://github.com/olovajs/olova
bangladesh fornt-end javascript javascript-framework javascript-library jsx olova ui-design
Last synced: 17 days ago
JSON representation
A smooth, minimal library for infusing JavaScript with dynamic behaviour
- Host: GitHub
- URL: https://github.com/olovajs/olova
- Owner: olovajs
- License: mit
- Created: 2024-08-24T10:12:48.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-31T00:23:48.000Z (about 1 year ago)
- Last Synced: 2025-05-31T11:03:32.010Z (about 1 year ago)
- Topics: bangladesh, fornt-end, javascript, javascript-framework, javascript-library, jsx, olova, ui-design
- Language: JavaScript
- Homepage: https://olova.js.org
- Size: 693 KB
- Stars: 175
- Watchers: 3
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bangladeshi-foss - Olova - Minimal JavaScript UI library for adding reactive behavior to web applications. (Developer Tools & Libraries / 🚀 How to contribute)
README
# 🚀 Olova.js
A lightweight, reactive JavaScript framework for building modern web
applications. Olova.js provides a simple yet powerful API for creating reactive
UIs with JSX support.
## ✨ Features
- 🎯 **Signals** - Reactive state management
- 🔄 **Effects** - Automatic dependency tracking and side effects
- 📝 **Memos** - Computed values with dependency tracking
- 🎨 **JSX Support** - Write components using familiar JSX syntax
- 🎭 **Components** - Function-based component system
- 🔗 **Refs** - Direct DOM node references
- 🎪 **Lifecycle Hooks** - `onMount` and `onUnmount` for component lifecycle
management
- 🧩 **Fragments** - Support for multiple root elements
- 🎨 **SVG Support** - First-class SVG element support
## 📦 Installation
```bash
# Create a new project (recommended)
npm create vilo@latest
# Or install directly in an existing project
npm install olova
```
For now, you can use it directly in your project by copying the core files.
## 🚀 Quick Start Guide
### 1. Basic Counter Example
A simple counter showing reactive state management:
```jsx
import { render, setSignal } from "./core/core.js";
const Counter = () => {
const [count, setCount] = setSignal(0);
return (
{() => count()}
setCount(count() + 1)}>Increment
);
};
```
### 2. Multiple Elements with Fragment
Using fragments to render multiple elements:
```jsx
import { render, Fragment } from "./core/core.js";
const MultipleElements = () => {
return (
<>
First
Second
>
);
};
```
### 3. Effects and Reactivity
Demonstrating reactive effects:
```jsx
import { render, setSignal, setEffect } from "./core/core.js";
const EffectsExample = () => {
const [name, setName] = setSignal("John");
setEffect(() => {
console.log(`Name changed to: ${name()}`);
});
return (
name()}
onInput={(e) => setName(e.target.value)}
type="text"
/>
Current name: {() => name()}
);
};
```
### 4. Computed Values with Memos
Using memos for derived state:
```jsx
import { render, setSignal, setMemo } from "./core/core.js";
const MemoExample = () => {
const [firstName, setFirstName] = setSignal("John");
const [lastName, setLastName] = setSignal("Doe");
const fullName = setMemo(() => `${firstName()} ${lastName()}`);
return (
firstName()}
onInput={(e) => setFirstName(e.target.value)}
placeholder="First Name"
/>
lastName()}
onInput={(e) => setLastName(e.target.value)}
placeholder="Last Name"
/>
Full name: {() => fullName()}
);
};
```
### 5. DOM References with Refs
Direct DOM manipulation using refs:
```jsx
import { render, setRef } from "./core/core.js";
const RefsExample = () => {
const inputRef = setRef();
return (
inputRef().focus()}>Focus Input
);
};
```
### 6. Component Lifecycle
Managing component lifecycle with hooks:
```jsx
import { render, setSignal, onMount, onUnmount } from "./core/core.js";
const LifecycleExample = () => {
const [isVisible, setIsVisible] = setSignal(true);
const ChildComponent = () => {
onMount(() => {
console.log("Component mounted");
});
onUnmount(() => {
console.log("Component will unmount");
});
return
Hello World;
};
return (
setIsVisible(!isVisible())}>
{() => (isVisible() ? "Hide" : "Show")}
{() => isVisible() && }
);
};
```
### 7. List Rendering
Building a dynamic todo list:
```jsx
import { render, setSignal } from "./core/core.js";
const TodoList = () => {
const [todos, setTodos] = setSignal([
{ id: 1, text: "Learn Olova.js" },
{ id: 2, text: "Build an app" },
]);
const [newTodo, setNewTodo] = setSignal("");
const addTodo = () => {
if (newTodo().trim()) {
setTodos([...todos(), { id: Date.now(), text: newTodo() }]);
setNewTodo("");
}
};
return (
newTodo()}
onInput={(e) => setNewTodo(e.target.value)}
placeholder="New todo"
/>
Add Todo
{() =>
todos().map((todo) => (
-
{todo.text}
setTodos(todos().filter((t) => t.id !== todo.id))
}
>
Delete
))
}
);
};
```
### 8. Conditional Rendering
Different patterns for conditional rendering:
```jsx
import { render, setSignal } from "./core/core.js";
const Conditional = () => {
const [show, setShow] = setSignal(false);
const [theme, setTheme] = setSignal("light");
return (
setShow(!show())}>Toggle Content
setTheme(theme() === "light" ? "dark" : "light")}>
Toggle Theme
{/* Simple conditional */}
{() => (show() ?
Content is shown
: Content is hidden
)}
{/* Conditional with multiple elements */}
{() =>
theme() === "light" ? (
Light Theme
) : (
Dark Theme
)
}
{/* Conditional rendering with && operator */}
{() => show() &&
This only shows when show is true
}
);
};
```
### 9. Components and Props
Creating and using reusable components with props:
```jsx
import { render } from "./core/core.js";
// Button component with props
const Button = ({ text, onClick }) => {
return (
{text}
);
};
// Using the Button component
const App = () => {
return (
Component Example
alert("Button clicked!")} />
console.log("Second button clicked")}
/>
);
};
```
This example shows:
- How to create a reusable component with props
- Passing different props to multiple instances
- Handling events through props
- Applying inline styles to components
## 🛠️ API Reference
### Core Functions
| Function | Description |
| ------------------------- | ------------------------------------------ |
| `setSignal(initialValue)` | Creates a reactive signal |
| `setEffect(effectFn)` | Creates an effect that tracks dependencies |
| `setMemo(computeFn)` | Creates a computed value |
| `setRef()` | Creates a ref for DOM elements |
| `render(component, root)` | Renders a component to the DOM |
| `onMount(callback)` | Runs when component mounts |
| `onUnmount(callback)` | Runs when component unmounts |
| `Fragment` | Wrapper for multiple elements |
| `html` | Internal function for DOM creation |
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
MIT License
## 👨💻 Author
**Nazmul Hossain**
---
For more information and updates, please check back regularly as this framework
continues to evolve.
> 💡 **Pro Tip**: Check out the `examples` directory in the source code for more
> detailed examples and best practices!