InfrontJS Cheatsheet

<!-- Install -->
npm install @nicosommi/infrontjs

<!-- Or via CDN -->
<script src="https://unpkg.com/@nicosommi/infrontjs"></script>

<!-- Basic setup -->
import { App } from '@nicosommi/infrontjs';

const app = new App();
app.start();

// Define a component
class HelloComponent {
    render() {
        return `<h1>Hello, ${this.name}!</h1>`;
    }

    setup() {
        this.name = "World";
    }
}

// Register component
app.component('hello', HelloComponent);

// Template with expressions
class CardComponent {
    render() {
        return `
        <div class="card">
            <h2>${this.title}</h2>
            <p>${this.description}</p>
            <span>${this.active ? 'Active' : 'Inactive'}</span>
        </div>
        `;
    }
}

// Component state
class CounterComponent {
    setup() {
        this.count = 0;
    }

    increment() {
        this.count++;
        this.update();       // re-render
    }

    render() {
        return `
        <p>Count: ${this.count}</p>
        <button onclick="this.increment()">+1</button>
        `;
    }
}

// Define routes
app.route('/', HomeComponent);
app.route('/about', AboutComponent);
app.route('/user/:id', UserComponent);

// Navigate programmatically
app.navigate('/about');

// Access params
class UserComponent {
    setup(params) {
        this.userId = params.id;
    }
}

// Event handling
class FormComponent {
    setup() {
        this.value = '';
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log(this.value);
    }

    render() {
        return `
        <form onsubmit="this.handleSubmit(event)">
            <input type="text"
                   oninput="this.value = event.target.value">
            <button>Submit</button>
        </form>
        `;
    }
}