losta-framework/LANGUAGE-SUPPORT.md

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

# 🔤 Language Support - JavaScript & TypeScript

## 🎯 **Losta Framework Supports Both Languages**

Losta Framework is designed to work seamlessly with **both JavaScript and TypeScript**, giving developers the flexibility to choose their preferred language while maintaining the same powerful features and architecture.

## 🚀 **Creating Projects**

### JavaScript Project
```bash
# Create a JavaScript project (default)
npx losta create my-app
# or explicitly specify JavaScript
npx losta create my-app js
```

### TypeScript Project
```bash
# Create a TypeScript project
npx losta create my-app ts
# or
npx losta create my-app typescript
```

## 📁 **File Structure Comparison**

### JavaScript Project Structure
```
my-app/
├── src/
│   ├── main.jsx              # Entry point
│   ├── pages/
│   │   └── App.jsx          # Main app component
│   ├── components/
│   │   ├── Counter.jsx      # Class component
│   │   ├── CounterWithHooks.jsx # Functional component
│   │   ├── Header.jsx       # Header component
│   │   └── Footer.jsx       # Footer component
│   ├── hooks/
│   │   └── useTheme.js      # Custom hook
│   ├── utils/
│   │   └── formatting.js    # Utility functions
│   ├── styles/              # CSS files (same for both)
│   └── types/
│       └── index.ts         # TypeScript types (optional)
```

### TypeScript Project Structure
```
my-app/
├── src/
│   ├── main.tsx              # Entry point
│   ├── pages/
│   │   └── App.tsx          # Main app component
│   ├── components/
│   │   ├── Counter.tsx      # Class component
│   │   ├── CounterWithHooks.tsx # Functional component
│   │   ├── Header.tsx       # Header component
│   │   └── Footer.tsx       # Footer component
│   ├── hooks/
│   │   └── useTheme.ts      # Custom hook
│   ├── utils/
│   │   └── formatting.ts    # Utility functions
│   ├── styles/              # CSS files (same for both)
│   └── types/
│       └── index.ts         # TypeScript types
```

## 📝 **Code Examples**

### Component Comparison

#### JavaScript Version
```jsx
// components/Counter.jsx
import { Component } from 'losta-framework'
import '../styles/Counter.css'

export class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }))
  }

  render() {
    return (
      <div className="counter">
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    )
  }
}
```

#### TypeScript Version
```tsx
// components/Counter.tsx
import { Component } from 'losta-framework'
import '../styles/Counter.css'

interface CounterState {
  count: number
}

export class Counter extends Component<{}, CounterState> {
  constructor(props: {}) {
    super(props)
    this.state = { count: 0 }
  }

  increment = (): void => {
    this.setState(prevState => ({ count: prevState.count + 1 }))
  }

  render() {
    return (
      <div className="counter">
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    )
  }
}
```

### Hook Comparison

#### JavaScript Version
```javascript
// hooks/useTheme.js
import { useState, useEffect } from 'losta-framework'

export function useTheme() {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') || 'light'
    setTheme(savedTheme)
  }, [])

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  return { theme, toggleTheme }
}
```

#### TypeScript Version
```typescript
// hooks/useTheme.ts
import { useState, useEffect } from 'losta-framework'

type Theme = 'light' | 'dark'

interface UseThemeReturn {
  theme: Theme
  toggleTheme: () => void
}

export function useTheme(): UseThemeReturn {
  const [theme, setTheme] = useState<Theme>('light')

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as Theme || 'light'
    setTheme(savedTheme)
  }, [])

  const toggleTheme = (): void => {
    const newTheme: Theme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  return { theme, toggleTheme }
}
```

### Utility Functions Comparison

#### JavaScript Version
```javascript
// utils/formatting.js
export function formatTitle(title) {
  return `Welcome to ${title}`
}

export function formatNumber(num) {
  return new Intl.NumberFormat().format(num)
}

export function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}
```

#### TypeScript Version
```typescript
// utils/formatting.ts
export function formatTitle(title: string): string {
  return `Welcome to ${title}`
}

export function formatNumber(num: number): string {
  return new Intl.NumberFormat().format(num)
}

export function debounce<T extends (...args: any[]) => any>(
  func: T, 
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout
  return function executedFunction(...args: Parameters<T>) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}
```

## 🎯 **Key Differences**

| Feature | JavaScript | TypeScript |
|---------|------------|------------|
| **File Extensions** | `.jsx`, `.js` | `.tsx`, `.ts` |
| **Type Safety** | Runtime only | Compile-time + Runtime |
| **IntelliSense** | Basic | Advanced |
| **Error Detection** | Runtime | Compile-time |
| **Learning Curve** | Lower | Higher |
| **Development Speed** | Faster (no types) | Slower (type checking) |
| **Maintenance** | More challenging | Easier |
| **Team Collaboration** | Requires discipline | Enforced consistency |

## 🔧 **Configuration**

### Both Languages Use the Same Configuration

```javascript
// losta.config.js (same for both)
import { defineConfig } from '@losta/cli'

export default defineConfig({
  server: {
    port: 3000,
    host: 'localhost',
    open: true
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: true
  },
  
  jsx: {
    runtime: 'automatic'
  }
})
```

### TypeScript Configuration (Only for TS projects)
```json
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

## 🚀 **Development Commands**

Both JavaScript and TypeScript projects use the same commands:

```bash
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 # Run TypeScript checks (TS projects only)
```

## 🎯 **When to Use Each Language**

### Choose JavaScript When:
- ✅ **Quick prototyping** - Get started faster
- ✅ **Small projects** - Less complexity needed
- ✅ **Learning the framework** - Focus on concepts, not types
- ✅ **Team prefers JS** - Everyone is comfortable with JavaScript
- ✅ **Rapid development** - Need to ship quickly

### Choose TypeScript When:
- ✅ **Large projects** - Better maintainability
- ✅ **Team development** - Enforced consistency
- ✅ **Complex applications** - Type safety prevents bugs
- ✅ **Long-term maintenance** - Easier to refactor
- ✅ **Enterprise projects** - Better tooling and IDE support

## 🔄 **Migration Between Languages**

### JavaScript to TypeScript
1. Rename files from `.jsx` to `.tsx`
2. Add type annotations gradually
3. Enable TypeScript features one by one
4. Use `// @ts-ignore` for problematic code initially

### TypeScript to JavaScript
1. Rename files from `.tsx` to `.jsx`
2. Remove type annotations
3. Update import statements
4. Remove TypeScript-specific code

## 🎉 **Benefits of Dual Language Support**

1. **🎯 Developer Choice** - Use what you're comfortable with
2. **🚀 Gradual Adoption** - Start with JS, migrate to TS later
3. **🔄 Team Flexibility** - Different team members can use different languages
4. **📚 Learning Path** - Learn framework concepts first, then add types
5. **🏢 Enterprise Ready** - Support for both small and large projects
6. **🛠️ Same Features** - All framework features work in both languages

## 📚 **Best Practices**

### JavaScript Projects
- Use JSDoc comments for better IntelliSense
- Follow consistent naming conventions
- Use ESLint for code quality
- Write comprehensive tests

### TypeScript Projects
- Use strict mode for maximum type safety
- Define interfaces for all props and state
- Use generic types for reusable components
- Leverage TypeScript's advanced features

---

**Losta Framework makes it easy to choose your preferred language while maintaining the same powerful features and architecture. Whether you prefer the simplicity of JavaScript or the safety of TypeScript, you'll have the same excellent developer experience!** 🚀