ludelix-connect

Modern SPA framework for seamless client-server communication with React, Vue, and Svelte support.

Features

• 🚀 Framework Agnostic - Works with React, Vue, and Svelte
• 🔄 Client-side Navigation - SPA navigation without page reloads
• 📝 Smart Forms - Reactive forms with validation and error handling
• 🌐 WebSocket Support - Real-time communication built-in
• 📊 Progress Indicators - Beautiful loading states
• 💾 State Management - Remember and restore component state
• 🔌 Plugin System - Extensible architecture
• 🎯 TypeScript First - Full TypeScript support with excellent DX

Installation

npm install ludelix-connect

Quick Start

React

import { createReactApp } from 'ludelix-connect/react';

createReactApp({
  el: '#app',
  resolve: (name) => import(`./pages/${name}.jsx`)
});

Vue

import { createVueApp } from 'ludelix-connect/vue';

createVueApp({
  el: '#app',
  resolve: (name) => import(`./pages/${name}.vue`)
});

Svelte

import { createSvelteApp } from 'ludelix-connect/svelte';

createSvelteApp({
  el: '#app',
  resolve: (name) => import(`./pages/${name}.svelte`)
});

Using Hooks

import { useForm, useNavigation, usePage, useShared } from 'ludelix-connect/react';

function ContactForm() {
  const { post } = useNavigation();
  const page = usePage();
  const appName = useShared('app.name');
  
  const form = useForm({
    name: '',
    email: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    form.post('/contact');
  };

  return (
    <div>
      <h1>Contact {appName}</h1>
      
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={form.data.name}
          onChange={(e) => form.data.name = e.target.value}
          placeholder="Name"
        />
        {form.errors.name && <span>{form.errors.name}</span>}
        
        <input
          type="email"
          value={form.data.email}
          onChange={(e) => form.data.email = e.target.value}
          placeholder="Email"
        />
        {form.errors.email && <span>{form.errors.email}</span>}
        
        <textarea
          value={form.data.message}
          onChange={(e) => form.data.message = e.target.value}
          placeholder="Message"
        />
        {form.errors.message && <span>{form.errors.message}</span>}
        
        <button type="submit" disabled={form.processing}>
          {form.processing ? 'Sending...' : 'Send Message'}
        </button>
      </form>
    </div>
  );
}

Navigation

import { Link, useNavigation } from 'ludelix-connect/react';

function Navigation() {
  const { visit, post } = useNavigation();

  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
      
      <button onClick={() => visit('/dashboard')}>
        Dashboard
      </button>
      
      <button onClick={() => post('/logout')}>
        Logout
      </button>
    </nav>
  );
}

WebSocket

import { useWebSocket } from 'ludelix-connect/react';

function Chat() {
  const ws = useWebSocket({
    url: 'ws://localhost:8080',
    reconnect: true
  });

  useEffect(() => {
    const unsubscribe = ws.on('message', (data) => {
      console.log('New message:', data);
    });

    ws.connect();

    return () => {
      unsubscribe();
      ws.disconnect();
    };
  }, []);

  const sendMessage = () => {
    ws.send({
      event: 'chat_message',
      data: { message: 'Hello!' }
    });
  };

  return (
    <div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

Backend Integration (PHP)

<?php
use Ludelix\Connect\Connect;

class HomeController {
    public function index() {
        return Connect::render('Home', [
            'user' => auth()->user(),
            'posts' => Post::latest()->get(),
            'shared' => [
                'app' => [
                    'name' => config('app.name')
                ]
            ]
        ]);
    }
}

API Reference

Core Functions

• init(config) - Initialize Connect
• visit(url, options) - Navigate to URL
• get(url, data, options) - GET request
• post(url, data, options) - POST request
• put(url, data, options) - PUT request
• patch(url, data, options) - PATCH request
• del(url, options) - DELETE request
• form(data) - Create form helper
• websocket(config) - Create WebSocket connection
• shared(key) - Get shared data
• remember(data, key) - Remember state
• restore(key) - Restore state

Framework Hooks/Composables/Stores

React Hooks

• useConnect() - Get Connect instance
• usePage() - Get current page data
• useForm(data) - Create reactive form
• useNavigation() - Get navigation helpers
• useWebSocket(config) - Create WebSocket connection
• useShared(key) - Get shared data
• useRemember(key, defaultValue) - Remember/restore state

Vue Composables

• useConnect() - Get Connect instance
• usePage() - Get current page data
• useForm(data) - Create reactive form
• useNavigation() - Get navigation helpers
• useWebSocket(config) - Create WebSocket connection
• useShared(key) - Get shared data
• useRemember(key, defaultValue) - Remember/restore state

Svelte Stores

• getConnect() - Get Connect store
• getPage() - Get page store
• createForm(data) - Create form store
• createNavigation() - Get navigation helpers
• createWebSocket(config) - Create WebSocket store
• getShared(key) - Get shared data store
• createRemember(key, defaultValue) - Create remember store

Components

• <Link> - Navigation link component
• <Head> - Document head management

Configuration

{
  el: '#app',                    // Mount element
  resolve: (name) => import(),   // Component resolver
  progress: {                    // Progress indicator
    delay: 250,
    color: '#3b82f6',
    includeCSS: true,
    showSpinner: false
  },
  setup: ({ el, App, props }) => {
    // Custom setup logic
  }
}

License

MIT License - see LICENSE file for details.