🚀 Olova Framework Documentation

A modern, lightweight JavaScript framework for building web applications with JSX

What is Olova?

Olova is a high-performance JavaScript framework for building web applications using JSX. It leverages a lightweight Virtual DOM powered by Hyperscript ensuring fast and efficient UI updates. By minimizing unnecessary re-renders, Olova achieves optimal performance while maintaining a smooth developer experience.

⚡ Quick Start

Installation

# Create a new project (recommended)
npm create vilo@latest

# Or install directly in an existing project
npm install olova

See live projects on StackBlitz

Basic Example

import { createSignal } from "olova";

const App = () => {
  const [count, setCount] = createSignal(0);
  return (
    <>
      <h1>{count()}</h1>
      <button onClick={() => setCount(count() + 1)}>Click me</button>
    </>
  );
};

export default App;

Interactive Playground

Try out the code above in our interactive playground and see the magic happen in real-time! 🎮

Hooks API

  createSignal, // Function to create reactive state
  createEffect, // Function to run side-effects when state changes
  createMemo, // Function to compute values efficiently
  createResource, // Function to handle async data
  createContext, // Function to create a context for sharing state
  useContext, // Function to use the created context
  render, // Function to render the virtual DOM to the actual DOM
  ErrorBoundary, // Component to catch runtime errors
  lazy, // Function to dynamically load components

Complete Example

const ThemeContext = createContext("light");
const UserContext = createContext(null);

function GameApp() {
  const [score, setScore] = createSignal(0);
  const [lives, setLives] = createSignal(3);
  const gameStatus = createMemo(() => {
    if (lives() <= 0) return "Game Over";
    if (score() >= 100) return "You Win!";
    return "Playing";
  });

  createEffect(() => {
    const status = gameStatus();
    if (status !== "Playing") {
      console.log(`Game Ended: ${status}`);
    }
  });

  const [highScores] = createResource(fetchHighScores);

  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: "Player 1" }}>
        <div>
          <h1>Game Status: {gameStatus()}</h1>
          <p>Score: {score()}</p>
          <p>Lives: {lives()}</p>
          <button onClick={() => setScore((s) => s + 10)}>Score Points</button>
          <button onClick={() => setLives((l) => l - 1)}>Lose Life</button>
          <div>
            High Scores:
            {highScores.loading
              ? "Loading..."
              : highScores()?.map((score) => <div>{score}</div>)}
          </div>
        </div>
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

Tips

• Signals: Store and update state.
• Effects: Run on state changes.
• Memos: Efficient calculations.
• Resources: Manage async data.
• Context: Share state easily.

Building Components with JSX

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <h1>Counter: {count()}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

Lazy Loading

const LazyComponent = lazy(() => import("./LazyComponent.jsx"));
function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Error Boundaries

function Fallback({ error }) {
  return <div>Error: {error.message}</div>;
}
function ProblematicComponent() {
  throw new Error("An unexpected error occurred!");
}
function App() {
  return (
    <ErrorBoundary fallback={Fallback}>
      <ProblematicComponent />
    </ErrorBoundary>
  );
}

API Reference

• State Management: createSignal, createEffect, createMemo
• Data Fetching: createResource
• Context Management: createContext, useContext
• Rendering: h, render
• Error Handling & Code Splitting: ErrorBoundary, lazy