The Python
of JavaScript Frameworks

import { component } from 'simplijs';

component('hello-world', (el, props) => {
  return {
    render: () => `
                        <div class="greeting">
                        <h1>Hello, ${props.name}!</h1>
                        <p>Running on SimpliJS v3.2.0</p>
      </div>
    `
  };
});

// HTML: <hello-world s-prop:name="World"></hello-world>

import { component, reactive } from 'simplijs';

component('user-profile', (el, props) => {
  const state = reactive({
    user: {
      name: props.initialName || 'Guest',
      preferences: { theme: 'dark' }
    },
    posts: ['Hello World']
  });

  return {
    toggleTheme: () => {
      state.user.preferences.theme = 
        state.user.preferences.theme === 'dark' ? 'light' : 'dark';
    },
    render: () => `
                        <div class="profile" s-class="state.user.preferences.theme">
                        <h3>${state.user.name}</h3>
                        <button s-click="toggleTheme">Toggle Theme</button>
        
                        <ul s-for="post in state.posts">
                        <li>${post}</li>
        </ul>
      </div>
    `
  };
});

import { component } from 'simplijs';

// Usage: 
component('user-badge', (el, props) => {
  return {
    render: () => `
                        <div class="badge">
                        <strong>${props.name}</strong>
                        <span class="role">(${props.role})</span>
      </div>
    `
  };
});

import { component } from 'simplijs';

component('interactive-demo', (el) => {
  return {
    handleClick: () => alert('Button clicked!'),
    handleMouseOver: () => console.log('Mouse over!'),
    render: () => `
                        <div>
                        <button onclick="this.closest('interactive-demo').handleClick()">
          Click Me
        </button>
        
                        <button onmouseover="this.closest('interactive-demo').handleMouseOver()">
          Hover Me
        </button>
      </div>
    `
  };
});

import { component, reactive, computed } from 'simplijs';

component('shopping-cart', () => {
  const state = reactive({
    items: [
      { name: 'Laptop', price: 999, quantity: 1 }
    ],
    taxRate: 0.1
  });

  const subtotal = computed(() => {
    return state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  });

  const tax = computed(() => subtotal.value * state.taxRate);
  const total = computed(() => subtotal.value + tax.value);

  return {
    render: () => `
                        <div>
                        <h3>Shopping Cart</h3>
                        <p>Subtotal: $${subtotal.value}</p>
                        <p>Tax: $${tax.value}</p>
                        <p>Total: $${total.value}</p>
      </div>
    `
  };
});

import { component, reactive, watch } from 'simplijs';

component('search-field', () => {
  const state = reactive({
    query: '',
    results: [],
    loading: false
  });

  // Watch for search query changes
  watch(() => state.query, async (newQuery, oldQuery) => {
    console.log(`Search changed from "${oldQuery}" to "${newQuery}"`);
    
    if (newQuery.length < 3) {
      state.results = [];
      return;
    }

    state.loading = true;
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 500));
    state.results = [
      `Result 1 for "${newQuery}"`,
      `Result 2 for "${newQuery}"`,
      `Result 3 for "${newQuery}"`
    ];
    
    state.loading = false;
  });

  return {
    updateQuery: (e) => state.query = e.target.value,
    render: () => `
                            <div>
                            <input type="text"
                                   placeholder="Search (min 3 chars)..."
                                   value="${state.query}"
                                   oninput="this.closest('search-field').updateQuery(event)" />
        
        ${state.loading ? '<p>Loading...</p>' : ''}
        
                            <ul>
          ${state.results.map(r => `<li>${r}</li>`).join('')}
        </ul>
      </div>
    `
  };
});

import { component, ref } from 'simplijs';

component('auto-focus', (el) => {
  return {
    onMount: () => {
      const input = el.querySelector('input');
      input?.focus();
    },
    render: () => `
                                <div>
                                <input placeholder="I'm auto-focused" />
      </div>
    `
  };
});

import { component, reactive } from 'simplijs';

component('lifecycle-demo', () => {
  const state = reactive({ count: 0, mountTime: null });

  return {
    onMount: () => {
      console.log('✅ Component attached to DOM');
      state.mountTime = new Date().toISOString();
      
      // Set up interval
      this.interval = setInterval(() => {
        console.log('Interval tick');
      }, 1000);
    },
    
    onUpdate: () => {
      console.log('🔄 Component re-rendered, count:', state.count);
    },
    
    onDestroy: () => {
      console.log('🗑️ Component removed, cleaning up...');
      clearInterval(this.interval);
    },
    
    onError: (err) => {
      console.error('⚠️ Component error:', err.message);
      // Log to error tracking service
    },
    
    increment: () => state.count++,
    
    render: () => `
                                <div>
                                <p>Mounted at: ${state.mountTime || 'Not mounted yet'}</p>
                                <p>Count: ${state.count}</p>
                                <button onclick="this.closest('lifecycle-demo').increment()">
          Increment (triggers onUpdate)
        </button>
      </div>
    `
  };
});

import { component, emit, on } from 'simplijs';

// Component A: Sender
component('product-list', () => {
  return {
    selectProduct: (product) => {
      emit('product:selected', product);
      emit('analytics:event', {
        action: 'product_select',
        productId: product.id
      });
    },
    render: () => `
                                <div>
                                <button onclick="this.closest('product-list-demo').selectProduct({id: 2, name: 'Mouse'})">
          Select Mouse
        </button>
      </div>
    `
  };
});

// Component B: Receiver
component('product-details-demo', () => { // Renamed to avoid conflict with product-details
  const state = reactive({ selectedProduct: null });

  on('product:selected', (product) => {
    state.selectedProduct = product;
  });

  return {
    render: () => `
                                <div class="p-6 bg-white/5 rounded-2xl border border-white/10 h-full">
        ${state.selectedProduct 
          ? `<h3 class="text-xl font-bold text-white mb-2">Selected: ${state.selectedProduct.name}</h3>`
          : '<p class="text-slate-500">No product selected</p>'
        }
      </div>
    `
  };
});

<div s-app="todoApp">
  <input s-model="newTask" s-key:enter="addTodo" />
  <button s-click="addTodo">Add</button>

  <ul s-for="todo in todos">
    <li s-if="!todo.done">${todo.text}</li>
  </ul>
</div>

component('auto-focus', (el) => {
  return {
    onMount: () => {
      console.log('Mounted!');
      el.querySelector('input').focus();
    },
    render: () => `<input type="text" placeholder="I focus automatically" />`
  };
});