humanjs-core 1.0.0

package/examples/routing/app.js

@@ -0,0 +1,129 @@
+import { html, component, layout, createRouter, buildUrl, getParams } from '../../src/index.js';
+
+const root = document.getElementById('app');
+const session = {
+  loggedIn: false
+};
+
+const PillLink = component(({ path, label }) => html`
+  <a
+    href="#${path}"
+    style="padding: 10px 14px; border-radius: 999px; text-decoration: none; background: white; color: #0f172a; border: 1px solid #cbd5e1; font-weight: 600;"
+  >
+    ${label}
+  </a>
+`);
+
+const InfoCard = component(({ title, body }) => html`
+  <section style="padding: 18px; border: 1px solid #e2e8f0; border-radius: 20px; background: white;">
+    <h2 style="margin: 0 0 10px; font-size: 20px; color: #0f172a;">${title}</h2>
+    <div style="color: #475569; line-height: 1.6;">${body}</div>
+  </section>
+`);
+
+const AppLayout = layout(({ title = 'HumanJS Router', children }) => html`
+  <div style="min-height: 100vh; background: linear-gradient(180deg, #f8fafc 0%, #dbeafe 100%); padding: 24px;">
+    <div style="max-width: 920px; margin: 0 auto; background: rgba(255,255,255,0.95); border-radius: 28px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12); overflow: hidden;">
+      <header style="padding: 24px 28px; background: #0f172a; color: white;">
+        <p style="margin: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.65);">Routing + Layouts</p>
+        <h1 style="margin: 10px 0 6px; font-size: 32px;">${title}</h1>
+        <p style="margin: 0; color: rgba(255,255,255,0.72);">Components, layouts, params, redirects, and protected routes.</p>
+      </header>
+      <nav style="display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 28px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;">
+        ${PillLink({ path: '/', label: 'Home' })}
+        ${PillLink({ path: '/user/42', label: 'User 42' })}
+        ${PillLink({ path: '/user/7?tab=settings', label: 'User 7 Settings' })}
+        ${PillLink({ path: '/dashboard', label: 'Dashboard' })}
+        ${PillLink({ path: '/go-home', label: 'Redirect Route' })}
+        ${PillLink({ path: '/missing-page', label: '404' })}
+      </nav>
+      <main style="padding: 28px; display: grid; gap: 16px;">
+        ${children}
+      </main>
+    </div>
+  </div>
+`);
+
+const router = createRouter(
+  {
+    '/': {
+      layout: AppLayout,
+      render: () => html`
+        ${InfoCard({ title: 'Start here', body: 'Use the links above to move around without reloading the page.' })}
+        ${InfoCard({ title: 'Protected route', body: 'Open Dashboard. If you are not logged in, the router redirects you to Login first.' })}
+        ${InfoCard({ title: 'Params and query', body: `Open <code>#${buildUrl('/user/7', { tab: 'settings' })}</code> to see route params and query params together.` })}
+      `
+    },
+
+    '/login': {
+      layout: ({ children }) => AppLayout({ title: 'Login', children }),
+      state: () => ({
+        next: getParams().next || '/dashboard'
+      }),
+      actions: {
+        login({ state }) {
+          session.loggedIn = true;
+          router.navigate(state.next, true);
+        }
+      },
+      render: (params, { state }) => html`
+        ${InfoCard({ title: 'Redirected to login', body: `The router sent you here because <code>${state.next}</code> is protected.` })}
+        <button data-click="login" style="padding: 16px 18px; border: none; border-radius: 18px; background: #2563eb; color: white; font-weight: 700; width: 220px;">
+          Login and continue
+        </button>
+      `
+    },
+
+    '/dashboard': {
+      layout: ({ children }) => AppLayout({ title: 'Dashboard', children }),
+      actions: {
+        logout() {
+          session.loggedIn = false;
+          router.navigate('/', true);
+        }
+      },
+      render: () => html`
+        ${InfoCard({ title: 'Protected page', body: 'You are inside the dashboard because the route guard allowed you through.' })}
+        ${InfoCard({ title: 'Current state', body: `loggedIn = <strong>${String(session.loggedIn)}</strong>` })}
+        <button data-click="logout" style="padding: 16px 18px; border: none; border-radius: 18px; background: #e11d48; color: white; font-weight: 700; width: 180px;">
+          Logout
+        </button>
+      `
+    },
+
+    '/user/:id': {
+      layout: ({ children, params }) => AppLayout({ title: `User ${params.id}`, children }),
+      render: (params, { query }) => html`
+        ${InfoCard({ title: 'Route param', body: `User id from path: <strong>${params.id}</strong>` })}
+        ${InfoCard({ title: 'Query params', body: `tab = <strong>${query.tab || 'overview'}</strong>` })}
+        ${InfoCard({ title: 'Built URL', body: `<code>#${buildUrl(`/user/${params.id}`, { tab: 'activity' })}</code>` })}
+      `
+    },
+
+    '/go-home': {
+      layout: ({ children }) => AppLayout({ title: 'Redirecting', children }),
+      render: () => html`${InfoCard({ title: 'Redirect route', body: 'You should not stay here. The router sends you back home.' })}`
+    },
+
+    '*': {
+      layout: ({ children }) => AppLayout({ title: 'Not Found', children }),
+      render: () => html`
+        ${InfoCard({ title: '404', body: 'That route does not exist.' })}
+        ${InfoCard({ title: 'Try this', body: 'Go back home or open one of the predefined links in the header.' })}
+      `
+    }
+  },
+  {
+    root,
+    beforeEach(to) {
+      if (to === '/dashboard' && !session.loggedIn) {
+        return buildUrl('/login', { next: '/dashboard' });
+      }
+
+      if (to === '/go-home') {
+        return '/';
+      }
+    }
+  }
+);
+window.humanRouter = router;

package/examples/simple-js/app.js

@@ -0,0 +1,30 @@
+import { app } from '../../src/index.js';
+
+app.simple({
+  state: {
+    count: 0,
+    step: 1
+  },
+  template: `
+    <main style="min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%);">
+      <section style="width: min(100%, 560px); background: white; border-radius: 28px; padding: 28px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12); display: grid; gap: 18px;">
+        <p style="margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: #64748b;">simple js app</p>
+        <h1 style="margin: 0; font-size: clamp(40px, 10vw, 72px); line-height: 1; color: #0f172a;">{count}</h1>
+        <p style="margin: 0; color: #475569;">Step: {step}</p>
+
+        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;">
+          <button @click="count -= step" style="padding: 16px; border: none; border-radius: 18px; background: #e11d48; color: white; font-weight: 700;">-</button>
+          <button @click="count = 0" style="padding: 16px; border: none; border-radius: 18px; background: #64748b; color: white; font-weight: 700;">reset</button>
+          <button @click="count += step" style="padding: 16px; border: none; border-radius: 18px; background: #2563eb; color: white; font-weight: 700;">+</button>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;">
+          <button @click="step = 1" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: {step === 1 ? '#0f172a' : 'white'}; color: {step === 1 ? 'white' : '#334155'};">1</button>
+          <button @click="step = 5" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: {step === 5 ? '#0f172a' : 'white'}; color: {step === 5 ? 'white' : '#334155'};">5</button>
+          <button @click="step = 10" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: {step === 10 ? '#0f172a' : 'white'}; color: {step === 10 ? 'white' : '#334155'};">10</button>
+          <button @click="step = 100" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: {step === 100 ? '#0f172a' : 'white'}; color: {step === 100 ? 'white' : '#334155'};">100</button>
+        </div>
+      </section>
+    </main>
+  `
+});

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,78 @@
+{
+  "name": "humanjs-core",
+  "version": "1.0.0",
+  "description": "A framework built for humans, not machines. Zero dependencies, zero build tools, 100% readable.",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./compiler": "./src/compiler/human.js",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "humanjs": "./scripts/humanjs.js"
+  },
+  "keywords": [
+    "human-js",
+    "humanjs",
+    "framework",
+    "frontend",
+    "javascript",
+    "reactive",
+    "spa",
+    "human-first",
+    "simple",
+    "minimalist",
+    "zero-build",
+    "no-dependencies",
+    "vanilla-js",
+    "lightweight",
+    "web-framework",
+    "ui-framework",
+    "state-management",
+    "router",
+    "components",
+    "template-literals",
+    "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/",
+    "scripts/",
+    "examples/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "start": "python -m http.server 8000 || python3 -m http.server 8000 || npx serve .",
+    "dev": "python -m http.server 8000 || python3 -m http.server 8000 || npx serve .",
+    "demo": "open index.html || start index.html || xdg-open index.html",
+    "build:human": "node scripts/human-compile.js",
+    "check": "node --check src/index.js && node --check src/compiler/human.js && node --check scripts/human-compile.js && node --check scripts/humanjs.js",
+    "test": "echo \"Tests coming soon! Contributions welcome.\" && exit 0",
+    "prepublishOnly": "npm run check && echo \"Publishing humanjs-core v1.0.0...\""
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/kaiserofthenight"
+  }
+}

package/scripts/human-compile.js

@@ -0,0 +1,43 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { compileHuman } from '../src/compiler/human.js';
+
+const [, , inputPath, outputPath] = process.argv;
+
+if (!inputPath || !outputPath) {
+  console.error('Usage: node scripts/human-compile.js <input.human> <output.js>');
+  process.exit(1);
+}
+
+const cwd = process.cwd();
+const absoluteInput = path.resolve(cwd, inputPath);
+const absoluteOutput = path.resolve(cwd, outputPath);
+const source = await readFile(absoluteInput, 'utf8');
+const appImportPath = await resolveAppImportPath(cwd, absoluteOutput);
+
+const compiled = compileHuman(source, {
+  appImportPath
+});
+
+await writeFile(absoluteOutput, compiled, 'utf8');
+console.log(`Compiled ${path.relative(cwd, absoluteInput)} -> ${path.relative(cwd, absoluteOutput)}`);
+
+async function resolveAppImportPath(cwd, absoluteOutput) {
+  try {
+    const packageJson = JSON.parse(await readFile(path.resolve(cwd, 'package.json'), 'utf8'));
+    const localEntry = path.resolve(cwd, 'src/index.js');
+
+    if (packageJson.name === 'human-js') {
+      const relativeImport = path
+        .relative(path.dirname(absoluteOutput), localEntry)
+        .split(path.sep)
+        .join('/');
+
+      return relativeImport.startsWith('.') ? relativeImport : `./${relativeImport}`;
+    }
+  } catch {
+    // Fall back to package import when compiling from another project.
+  }
+
+  return 'human-js';
+}