@kaiserofthenight/human-js 1.0.0

package/examples/todo-app/app.js

@@ -0,0 +1,378 @@
+/**
+ * TODO APP - Complete Example
+ * 
+ * Features:
+ * - Add, edit, delete todos
+ * - Mark as complete
+ * - Filter (all, active, completed)
+ * - LocalStorage persistence
+ * - Form validation
+ */
+
+import { app, html, each, when } from '../../src/index.js';
+import { local } from '../../src/plugins/storage.js';
+import { createValidator, rules, getFormData, displayErrors } from '../../src/plugins/validator.js';
+import { uid } from '../../src/utils/helpers.js';
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+function TodoItem(todo, onToggle, onDelete, onEdit) {
+  return html`
+    <div 
+      class="todo-item ${todo.completed ? 'completed' : ''}"
+      style="
+        display: flex;
+        align-items: center;
+        padding: 15px;
+        border-bottom: 1px solid #eee;
+        gap: 10px;
+      "
+    >
+      <input
+        type="checkbox"
+        ${todo.completed ? 'checked' : ''}
+        data-id="${todo.id}"
+        class="todo-checkbox"
+        style="width: 20px; height: 20px; cursor: pointer;"
+      />
+      <span 
+        style="
+          flex: 1;
+          text-decoration: ${todo.completed ? 'line-through' : 'none'};
+          color: ${todo.completed ? '#999' : '#333'};
+        "
+      >
+        ${todo.text}
+      </span>
+      <button 
+        data-id="${todo.id}"
+        class="edit-btn"
+        style="
+          padding: 5px 10px;
+          background: #4CAF50;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+        "
+      >
+        Edit
+      </button>
+      <button 
+        data-id="${todo.id}"
+        class="delete-btn"
+        style="
+          padding: 5px 10px;
+          background: #f44336;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+        "
+      >
+        Delete
+      </button>
+    </div>
+  `;
+}
+
+function TodoStats(todos) {
+  const total = todos.length;
+  const completed = todos.filter(t => t.completed).length;
+  const active = total - completed;
+  
+  return html`
+    <div style="
+      display: flex;
+      justify-content: space-around;
+      padding: 20px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin: 20px 0;
+    ">
+      <div style="text-align: center;">
+        <div style="font-size: 24px; font-weight: bold; color: #2196F3;">
+          ${total}
+        </div>
+        <div style="color: #666;">Total</div>
+      </div>
+      <div style="text-align: center;">
+        <div style="font-size: 24px; font-weight: bold; color: #FF9800;">
+          ${active}
+        </div>
+        <div style="color: #666;">Active</div>
+      </div>
+      <div style="text-align: center;">
+        <div style="font-size: 24px; font-weight: bold; color: #4CAF50;">
+          ${completed}
+        </div>
+        <div style="color: #666;">Completed</div>
+      </div>
+    </div>
+  `;
+}
+
+// ============================================
+// VALIDATION
+// ============================================
+
+const todoValidator = createValidator({
+  todoText: [
+    rules.required,
+    rules.minLength(3),
+    rules.maxLength(100)
+  ]
+});
+
+// ============================================
+// MAIN APP
+// ============================================
+
+const todoApp = app.create({
+  state: {
+    todos: local.get('todos', []),
+    filter: 'all', // all, active, completed
+    editingId: null
+  },
+  
+  render: (state) => {
+    // Filter todos based on current filter
+    const filteredTodos = state.todos.filter(todo => {
+      if (state.filter === 'active') return !todo.completed;
+      if (state.filter === 'completed') return todo.completed;
+      return true;
+    });
+    
+    const element = html`
+      <div style="
+        max-width: 600px;
+        margin: 50px auto;
+        padding: 20px;
+        font-family: system-ui, sans-serif;
+      ">
+        <h1 style="text-align: center; color: #2196F3;">
+          📝 Todo App
+        </h1>
+        
+        ${TodoStats(state.todos)}
+        
+        <!-- Add Todo Form -->
+        <form id="todo-form" style="margin: 20px 0;">
+          <div style="display: flex; gap: 10px;">
+            <input
+              type="text"
+              name="todoText"
+              placeholder="What needs to be done?"
+              style="
+                flex: 1;
+                padding: 12px;
+                border: 2px solid #ddd;
+                border-radius: 4px;
+                font-size: 16px;
+              "
+            />
+            <button 
+              type="submit"
+              style="
+                padding: 12px 24px;
+                background: #2196F3;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 16px;
+                font-weight: bold;
+              "
+            >
+              Add
+            </button>
+          </div>
+        </form>
+        
+        <!-- Filter Buttons -->
+        <div style="
+          display: flex;
+          gap: 10px;
+          margin: 20px 0;
+          justify-content: center;
+        ">
+          <button 
+            class="filter-btn"
+            data-filter="all"
+            style="
+              padding: 8px 16px;
+              border: 2px solid ${state.filter === 'all' ? '#2196F3' : '#ddd'};
+              background: ${state.filter === 'all' ? '#2196F3' : 'white'};
+              color: ${state.filter === 'all' ? 'white' : '#666'};
+              border-radius: 4px;
+              cursor: pointer;
+            "
+          >
+            All
+          </button>
+          <button 
+            class="filter-btn"
+            data-filter="active"
+            style="
+              padding: 8px 16px;
+              border: 2px solid ${state.filter === 'active' ? '#FF9800' : '#ddd'};
+              background: ${state.filter === 'active' ? '#FF9800' : 'white'};
+              color: ${state.filter === 'active' ? 'white' : '#666'};
+              border-radius: 4px;
+              cursor: pointer;
+            "
+          >
+            Active
+          </button>
+          <button 
+            class="filter-btn"
+            data-filter="completed"
+            style="
+              padding: 8px 16px;
+              border: 2px solid ${state.filter === 'completed' ? '#4CAF50' : '#ddd'};
+              background: ${state.filter === 'completed' ? '#4CAF50' : 'white'};
+              color: ${state.filter === 'completed' ? 'white' : '#666'};
+              border-radius: 4px;
+              cursor: pointer;
+            "
+          >
+            Completed
+          </button>
+        </div>
+        
+        <!-- Todo List -->
+        <div style="
+          border: 2px solid #ddd;
+          border-radius: 8px;
+          overflow: hidden;
+        ">
+          ${when(
+            filteredTodos.length > 0,
+            () => html`
+              <div>
+                ${each(filteredTodos, (todo) => TodoItem(todo))}
+              </div>
+            `,
+            () => html`
+              <div style="
+                padding: 40px;
+                text-align: center;
+                color: #999;
+              ">
+                ${state.filter === 'all' ? 'No todos yet! Add one above.' : `No ${state.filter} todos.`}
+              </div>
+            `
+          )}
+        </div>
+        
+        <!-- Clear Completed -->
+        ${when(
+          state.todos.some(t => t.completed),
+          () => html`
+            <button 
+              id="clear-completed"
+              style="
+                margin-top: 20px;
+                padding: 10px 20px;
+                background: #f44336;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                width: 100%;
+              "
+            >
+              Clear Completed
+            </button>
+          `
+        )}
+      </div>
+    `;
+    
+    const events = {
+      '#todo-form': {
+        submit: (e) => {
+          e.preventDefault();
+          
+          const formData = getFormData(e.target);
+          const validation = todoValidator.validate(formData);
+          
+          if (!validation.isValid) {
+            displayErrors(e.target, validation.errors);
+            return;
+          }
+          
+          // Add todo
+          const newTodo = {
+            id: uid('todo'),
+            text: formData.todoText,
+            completed: false,
+            createdAt: Date.now()
+          };
+          
+          state.todos = [...state.todos, newTodo];
+          local.set('todos', state.todos);
+          
+          e.target.reset();
+        }
+      },
+      '.todo-checkbox': {
+        change: (e) => {
+          const id = e.target.dataset.id;
+          state.todos = state.todos.map(todo =>
+            todo.id === id ? { ...todo, completed: !todo.completed } : todo
+          );
+          local.set('todos', state.todos);
+        }
+      },
+      '.delete-btn': {
+        click: (e) => {
+          const id = e.target.dataset.id;
+          if (confirm('Delete this todo?')) {
+            state.todos = state.todos.filter(todo => todo.id !== id);
+            local.set('todos', state.todos);
+          }
+        }
+      },
+      '.edit-btn': {
+        click: (e) => {
+          const id = e.target.dataset.id;
+          const todo = state.todos.find(t => t.id === id);
+          const newText = prompt('Edit todo:', todo.text);
+          
+          if (newText && newText.trim()) {
+            state.todos = state.todos.map(t =>
+              t.id === id ? { ...t, text: newText.trim() } : t
+            );
+            local.set('todos', state.todos);
+          }
+        }
+      },
+      '.filter-btn': {
+        click: (e) => {
+          state.filter = e.target.dataset.filter;
+        }
+      },
+      '#clear-completed': {
+        click: () => {
+          if (confirm('Clear all completed todos?')) {
+            state.todos = state.todos.filter(todo => !todo.completed);
+            local.set('todos', state.todos);
+          }
+        }
+      }
+    };
+    
+    return { element, events };
+  },
+  
+  onMount: () => {
+    console.log('✅ Todo App mounted!');
+  },
+  
+  onUpdate: (state) => {
+    console.log('🔄 Todos updated:', state.todos.length);
+  }
+});

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@kaiserofthenight/human-js",
+  "version": "1.0.0",
+  "description": "A framework built for humans, not machines. Zero dependencies, zero build tools, 100% readable.",
+  "type": "module",
+  "keywords": [
+    "human-js",
+    "humanjs",
+    "framework",
+    "frontend",
+    "javascript",
+    "reactive",
+    "spa",
+    "human-first",
+    "simple",
+    "minimalist",
+    "zero-build",
+    "no-dependencies",
+    "vanilla-js",
+    "lightweight",
+    "web-framework",
+    "ui-framework",
+    "reactive-programming",
+    "state-management",
+    "router",
+    "components",
+    "template-literals",
+    "proxy",
+    "human-readable"
+  ],
+  "author": {
+    "name": "Abderrazzak Elouazghi",
+    "email": "abderrazzak.elouazghi@gmail.com",
+    "url": "https://github.com/kaiserofthenight"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kaiserofthenight/human-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kaiserofthenight/human-js/issues",
+    "email": "abderrazzak.elouazghi@gmail.com"
+  },
+  "homepage": "https://github.com/kaiserofthenight/human-js#readme",
+  "files": [
+    "src/",
+    "examples/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "python -m http.server 8000 || python3 -m http.server 8000 || npx serve .",
+    "demo": "open index.html || start index.html || xdg-open index.html",
+    "test": "echo 'Tests coming soon! Contributions welcome.' && exit 0",
+    "prepublishOnly": "echo '🚀 Publishing human-js v1.0.0...'"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/kaiserofthenight"
+  }
+}

package/src/core/component.js

@@ -0,0 +1,182 @@
+/**
+ * COMPONENT SYSTEM
+ * 
+ * Create reactive components with state, lifecycle hooks, and auto re-rendering.
+ */
+
+import { createState } from './state.js';
+import { attachEvents } from './events.js';
+
+/**
+ * Create a reactive component
+ * @param {HTMLElement} rootElement - Where to mount the component
+ * @param {Function} renderFn - Function that returns { element, events }
+ * @param {Object} initialState - Initial state
+ * @param {Object} lifecycle - { onMount, onUpdate, onDestroy }
+ */
+export function createComponent(rootElement, renderFn, initialState = {}, initialLifecycle = {}) {
+  let currentElement = null;
+  let cleanupEvents = null;
+  let isDestroyed = false;
+  
+  // Create reactive state FIRST
+  const componentState = createState(initialState);
+  
+  // Render function
+  function render() {
+    if (isDestroyed) return;
+    
+    // Call render function with state
+    const result = renderFn(componentState);
+    
+    // Extract element and events
+    let newElement, events;
+    if (result && typeof result === 'object' && result.element) {
+      newElement = result.element;
+      events = result.events || {};
+    } else {
+      newElement = result;
+      events = {};
+    }
+    
+    // First render - mount
+    if (!currentElement) {
+      currentElement = newElement;
+      rootElement.appendChild(currentElement);
+      
+      // Attach events
+      cleanupEvents = attachEvents(currentElement, events);
+      
+      // Call onMount
+      if (initialLifecycle.onMount) {
+        initialLifecycle.onMount(componentState);
+      }
+    } 
+    // Subsequent renders - replace
+    else {
+      // Cleanup old events
+      if (cleanupEvents) cleanupEvents();
+      
+      // Replace element
+      rootElement.replaceChild(newElement, currentElement);
+      currentElement = newElement;
+      
+      // Attach new events
+      cleanupEvents = attachEvents(currentElement, events);
+      
+      // Call onUpdate
+      if (initialLifecycle.onUpdate) {
+        initialLifecycle.onUpdate(componentState);
+      }
+    }
+  }
+  
+  // Watch for state changes and re-render
+  componentState.$watch = new Proxy(componentState.$watch || (() => {}), {
+    apply(target, thisArg, args) {
+      const result = target.apply(thisArg, args);
+      return result;
+    }
+  });
+  
+  // Override state setter to trigger re-render
+  const originalState = { ...componentState.$raw() };
+  Object.keys(originalState).forEach(key => {
+    let value = componentState[key];
+    Object.defineProperty(componentState, key, {
+      get() {
+        return value;
+      },
+      set(newValue) {
+        if (value !== newValue) {
+          value = newValue;
+          render();
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+  });
+  
+  // Destroy function
+  function destroy() {
+    if (isDestroyed) return;
+    
+    isDestroyed = true;
+    
+    // Cleanup events
+    if (cleanupEvents) cleanupEvents();
+    
+    // Call onDestroy
+    if (initialLifecycle.onDestroy) {
+      initialLifecycle.onDestroy(componentState);
+    }
+    
+    // Remove from DOM
+    if (currentElement && currentElement.parentNode) {
+      currentElement.parentNode.removeChild(currentElement);
+    }
+    
+    currentElement = null;
+  }
+  
+  // Initial render
+  render();
+  
+  // Return component API
+  return {
+    state: componentState,
+    destroy,
+    render,
+    get element() {
+      return currentElement;
+    }
+  };
+}
+
+/**
+ * Higher-level app API for cleaner component creation
+ */
+export const app = {
+  /**
+   * Create a component with options object
+   */
+  create(options = {}) {
+    const {
+      root = document.getElementById('app'),
+      state: initialState = {},
+      render: renderFn,
+      onMount,
+      onUpdate,
+      onDestroy
+    } = options;
+    
+    if (!renderFn) {
+      throw new Error('[HumanJS] render function is required');
+    }
+    
+    return createComponent(
+      root,
+      renderFn,
+      initialState,
+      { onMount, onUpdate, onDestroy }
+    );
+  },
+  
+  /**
+   * Quick mount without state management
+   */
+  mount(rootOrFn, renderFn) {
+    let root, render;
+    
+    if (typeof rootOrFn === 'function') {
+      root = document.getElementById('app');
+      render = rootOrFn;
+    } else {
+      root = rootOrFn;
+      render = renderFn;
+    }
+    
+    return createComponent(root, () => render(), {});
+  }
+};