Saola Client

Modern TypeScript Framework for Laravel - Reactive SPAs with TypeScript-first approach

Saola Client is the TypeScript runtime library for building reactive single-page applications that integrate seamlessly with Laravel backends.

Features

• ⚡ TypeScript First: Full TypeScript support with excellent type safety
• 🎨 Reactive Views: Built-in reactive view system with automatic state management
• 📦 Modular Architecture: Component-based architecture for scalable applications
• 🔄 Hot Module Replacement: Development watch mode with automatic compilation
• 🚀 Laravel Integration: Seamless integration with Laravel backends
• 📱 SSR Support: Server-side rendering capabilities
• 🎯 Lightweight: Minimal bundle size with tree-shaking support
• 🔧 Developer Friendly: Excellent DX with CLI tools and build utilities

Installation

npm install saola-client
# or
yarn add saola-client
# or
pnpm add saola-client

Quick Start

Basic Setup

import { Application, app, appContainer } from 'saola-client';
import { ViewController } from 'saola-client';

// Initialize your app
const app = new Application({
  el: '#app',
  debug: true
});

await app.init();

Creating a View

import { ViewBase, ViewController } from 'saola-client';

export class HomeView extends ViewBase {
  constructor() {
    super('home', 'home-template');
  }

  onMount() {
    // Initialize view logic
  }
}

export class HomeController extends ViewController {
  view = HomeView;

  onLoad() {
    // Handle view data loading
  }
}

Routing

import { Router } from 'saola-client';

const router = new Router();

router.register('home', HomeController);
router.register('about', AboutController);

router.navigate('home');

State Management

import { ViewState, StateManager } from 'saola-client';

const state = new ViewState({
  count: 0,
  user: null
});

state.count = 5; // Trigger reactive updates
state.subscribe(newState => {
  console.log('State updated:', newState);
});

API Reference

Core Classes

Application

The main application class that manages the lifecycle of your Saola app.

import { Application } from 'saola-client';

const app = new Application({
  el: '#app',           // Mount element
  debug: true,          // Enable debug mode
  baseUrl: '/app'       // Base URL for routing
});

View System

import { View, ViewController, ViewManager } from 'saola-client';

// Create a view
class MyView extends View {
  template = '<div>Hello World</div>';

  onMount() {
    console.log('View mounted');
  }
}

// Create a controller
class MyController extends ViewController {
  view = MyView;

  onLoad() {
    // Load data
  }
}

Router

import { Router } from 'saola-client';

const router = new Router();

// Register routes
router.register('home', HomeController);
router.register('user/:id', UserController);

// Navigate
router.navigate('home');
router.navigate('user/123');

Plugins

Extend Saola Client with plugins:

import { PluginManager } from 'saola-client/plugins';

const pluginManager = new PluginManager();

// Register and install plugins
pluginManager
  .register(myPlugin)
  .install('myPlugin', { option: 'value' });

Development

Building

npm run build    # Build for production
npm run dev      # Watch mode for development
npm run clean    # Clean build artifacts

Testing

npm test

Integration with Saola Compiler

Saola Client works seamlessly with Saola Compiler to compile .one files into Blade templates and JavaScript.

# Install both packages
npm install saola-client saola-compiler

# Use in your Laravel project
# The compiler will generate files that use saola-client

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Related Projects

• Saola Compiler - Template compiler for .one files
• Saola Language Support - VS Code extension for .one files

Built with ❤️ by Saola Labs