�� Losta Framework

A revolutionary React-like framework with unique modular architecture, built-in theme system, and modern development experience.

✨ Features

• ⚡ JSX Support - Modern JSX syntax with automatic runtime
• 🎯 Virtual DOM - Efficient DOM diffing and updates
• 🪝 React-like Hooks - useState, useEffect, useRef, useMemo, useCallback
• 🎨 Component-Scoped CSS - Each component has its own styles
• 🌙 Built-in Theme System - Dark/light mode with automatic persistence
• 📱 Responsive Design - Mobile-first approach
• 🔧 TypeScript Support - Full TypeScript integration
• 🔥 Hot Module Replacement - Instant development updates
• 🎭 Advanced Animations - CSS animations and transitions
• 🛠️ Professional CLI - Create projects with language choice

🚀 Quick Start

Install Losta Framework

npm install -g losta

Create a New Project

# Create JavaScript project
losta create my-app js

# Create TypeScript project
losta create my-app ts

# Default (JavaScript)
losta create my-app

Run Your Project

cd my-app
npm install
npm run dev

📁 Project Structure

my-app/
├── package.json           # Project configuration
├── index.html            # Entry HTML file (self-contained demo)
├── losta.config.js       # Framework configuration
├── .eslintrc.cjs         # ESLint configuration
├── .gitignore            # Git ignore rules
├── README.md             # Project documentation
└── src/                  # Source code
    ├── main.jsx          # Entry point
    ├── pages/
    │   └── App.jsx       # Main app component
    ├── components/       # Reusable components
    ├── hooks/            # Custom hooks
    ├── utils/            # Utility functions
    ├── styles/           # CSS files
    ├── assets/           # Static assets
    └── types/            # TypeScript types

🎯 What You'll See

Self-Contained Demo Features:

• ✅ Interactive Counter - Click increment/decrement
• ✅ Theme Toggle - Switch between dark/light mode
• ✅ Responsive Design - Works on mobile and desktop
• ✅ Smooth Animations - CSS transitions and effects
• ✅ Component Examples - Header, Footer, Counter components

🔧 Development Commands

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint
npm run typecheck # TypeScript type checking

🌟 Unique Features

Modular Architecture

• Organized by feature/type (pages, components, hooks, utils, styles)
• Clear separation of concerns
• Easy to scale and maintain

Built-in Theme System

• Automatic dark/light mode detection
• Persistent theme preferences
• CSS custom properties for easy theming

Component-Scoped CSS

• Each component has its own CSS file
• Scoped styles prevent conflicts
• Integrated with theme system

Custom Hooks

• Reusable logic with useTheme hook
• Easy to create custom hooks
• Follows React hooks patterns

Utility Functions

• Shared formatting helpers
• Debouncing utilities
• Common development tools

📚 Documentation

• Framework Showcase - Detailed feature overview
• Language Support - JavaScript vs TypeScript guide

🛠️ CLI Commands

losta create <app-name> [js|ts]  # Create new project
losta dev                        # Start development server
losta build                      # Build for production
losta preview                    # Preview production build
losta help                       # Show help information

🎨 Example Components

Counter Component

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return createElement('div', { className: 'counter' },
      createElement('h2', {}, 'Counter'),
      createElement('div', {}, this.state.count),
      createElement('button', { onClick: this.increment }, 'Increment')
    );
  }
}

Theme Hook

function useTheme() {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}

🔥 Hot Module Replacement

Losta Framework includes built-in HMR for instant development updates:

• Instant Updates - Changes reflect immediately
• State Preservation - Component state is maintained
• Error Recovery - Automatic error handling
• Fast Refresh - Optimized for React-like components

📱 Mobile-First Design

• Responsive Layout - Works on all screen sizes
• Touch-Friendly - Optimized for mobile interactions
• Performance Optimized - Fast loading and smooth animations
• Accessibility - Built with accessibility in mind

🎭 Advanced Animations

• CSS Transitions - Smooth state changes
• Keyframe Animations - Complex animation sequences
• Performance Optimized - Hardware-accelerated animations
• Theme-Aware - Animations adapt to theme changes

🚀 Production Ready

• Optimized Builds - Minified and optimized output
• Tree Shaking - Remove unused code
• Code Splitting - Load only what's needed
• Performance Monitoring - Built-in performance metrics

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more information.

📄 License

MIT License - see LICENSE file for details.

🎉 Start building amazing web applications with Losta Framework!