Velox Framework is a cutting-edge web framework that prioritizes both performance and developer experience. By eliminating reliance on a Virtual DOM, Velox compiles declarative JSX directly into precise DOM manipulations, ensuring applications achieve O(1) updates. This innovative approach results in a lightweight runtime that is exceptionally efficient.

Key Features

• Zero Virtual DOM: No tree diffing is performed; updates occur directly through fine-grained reactivity.
• Surgical Precision: Only the precise text node or attribute that has changed is updated, enhancing performance.
• Tiny Footprint: The entire framework runtime is under 3kb when minified and gzipped.
• Modern Tooling: Powered by Vite for enabling instant Hot Module Replacement (HMR), which significantly accelerates development time.
• Simple API: Familiarity with React hooks translates to an easy adoption of Velox signals (createSignal, createEffect).
• Universal Compatibility: Integrates effortlessly with existing JavaScript and TypeScript ecosystems.

Ecosystem

The Velox ecosystem comprises several packages to enhance development:

Quick Start Example

Velox employs Signals for state management, simplifying development by avoiding traditional class components and complex bindings. Here's a brief example:

// src/App.tsx
import { createSignal } from '@remyyy/velox';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <div className="card">
      <h1>Count is {count()}</h1>
      <div className="actions">
        <button onClick={() => setCount(c => c + 1)}>Increment</button>
        <button onClick={() => setCount(c => c - 1)}>Decrement</button>
      </div>
    </div>
  );
}

Furthermore, side effects can be managed using createEffect, which tracks dependencies automatically, facilitating clean and efficient code:

import { createSignal, createEffect } from '@remyyy/velox';

const [userId, setUserId] = createSignal(1);

createEffect(() => {
  console.log(`User ID changed to: ${userId()}`);
  fetchUserData(userId());
});

Documentation and Contributions

Comprehensive documentation is available, detailing an API reference, component structure, and contributing guidelines. Users can access this information within the docs directory to effectively utilize the framework to its full potential.