Efficio

Created this framework for learning signals. Please do not use for production.

A signal-based, HTML-first frontend framework with built-in routing and HMR support.

Installation

npm install efficio

Quick Start

Create a new project:

npx efficio init my-app
cd my-app
npm install

Start development server:

npm run dev

Build for production:

npm run build

Basic Usage

import { mount, h, signal, $effect } from 'efficio';

function App() {
  let $count = 0;
  
  $effect(() => {
    console.log('Count changed:', $count.value);
  });
  
  return (
    <div>
      <h1>Count: {$count}</h1>
      <button onclick={() => $count++}>
        Increment
      </button>
    </div>
  );
}

mount(App, '#app');

Routing

import { Router, Route, Link } from 'efficio/router';

function App() {
  return (
    <div>
      <nav>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
      </nav>
      
      <Router>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
}

Development Server

For Vite integration, create vite.config.js:

import { defineConfig } from 'vite';
import { efficio } from 'efficio/vite-plugin';

export default defineConfig({
  plugins: [efficio()]
});

CLI Commands

• efficio build <src> <dist> - Build project
• efficio dev [port] - Start development server
• efficio init <name> - Initialize new project

License

MIT