humanjs-core 1.0.0

package/examples/api-example/app.js

@@ -0,0 +1,365 @@
+/**
+ * API INTEGRATION EXAMPLE
+ * 
+ * Features:
+ * - Fetch data from API
+ * - Loading states
+ * - Error handling
+ * - Search and filter
+ * - Pagination
+ */
+
+import { app, html, each, when } from '../../src/index.js';
+import { createHttp } from '../../src/plugins/http.js';
+import { debounce } from '../../src/core/events.js';
+
+// ============================================
+// HTTP CLIENT
+// ============================================
+
+const api = createHttp({
+  baseURL: 'https://jsonplaceholder.typicode.com',
+  onRequest: (config) => {
+    console.log('🌐 API Request:', config);
+  },
+  onError: (error) => {
+    console.error('❌ API Error:', error);
+  }
+});
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+function UserCard(user) {
+  return html`
+    <div style="
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 10px;
+      background: white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: transform 0.2s;
+    "
+    onmouseover="this.style.transform='translateY(-4px)'"
+    onmouseout="this.style.transform='translateY(0)'"
+    >
+      <h3 style="margin: 0 0 10px 0; color: #2196F3;">
+        ${user.name}
+      </h3>
+      <p style="margin: 5px 0; color: #666;">
+        📧 ${user.email}
+      </p>
+      <p style="margin: 5px 0; color: #666;">
+        📱 ${user.phone}
+      </p>
+      <p style="margin: 5px 0; color: #666;">
+        🏢 ${user.company.name}
+      </p>
+      <button 
+        class="view-posts-btn"
+        data-user-id="${user.id}"
+        style="
+          margin-top: 10px;
+          padding: 8px 16px;
+          background: #4CAF50;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+        "
+      >
+        View Posts
+      </button>
+    </div>
+  `;
+}
+
+function PostCard(post) {
+  return html`
+    <div style="
+      border-left: 4px solid #2196F3;
+      padding: 15px;
+      margin: 10px 0;
+      background: #f9f9f9;
+      border-radius: 4px;
+    ">
+      <h4 style="margin: 0 0 10px 0; color: #333;">
+        ${post.title}
+      </h4>
+      <p style="margin: 0; color: #666; line-height: 1.6;">
+        ${post.body}
+      </p>
+    </div>
+  `;
+}
+
+function LoadingSpinner() {
+  return html`
+    <div style="
+      text-align: center;
+      padding: 40px;
+    ">
+      <div style="
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #2196F3;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      "></div>
+      <style>
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      </style>
+      <p style="margin-top: 20px; color: #666;">Loading...</p>
+    </div>
+  `;
+}
+
+function ErrorMessage(message) {
+  return html`
+    <div style="
+      padding: 20px;
+      background: #ffebee;
+      border-left: 4px solid #f44336;
+      border-radius: 4px;
+      margin: 20px 0;
+    ">
+      <h3 style="margin: 0 0 10px 0; color: #c62828;">
+        ⚠️ Error
+      </h3>
+      <p style="margin: 0; color: #666;">
+        ${message}
+      </p>
+    </div>
+  `;
+}
+
+// ============================================
+// MAIN APP
+// ============================================
+
+const apiApp = app.create({
+  state: {
+    users: [],
+    posts: [],
+    loading: false,
+    error: null,
+    view: 'users', // users, posts
+    selectedUserId: null,
+    searchQuery: ''
+  },
+  
+  render: (state) => {
+    // Filter users by search query
+    const filteredUsers = state.users.filter(user =>
+      user.name.toLowerCase().includes(state.searchQuery.toLowerCase()) ||
+      user.email.toLowerCase().includes(state.searchQuery.toLowerCase())
+    );
+    
+    const element = html`
+      <div style="
+        max-width: 1200px;
+        margin: 50px auto;
+        padding: 20px;
+        font-family: system-ui, sans-serif;
+      ">
+        <h1 style="text-align: center; color: #2196F3;">
+          🌐 API Integration Example
+        </h1>
+        
+        <!-- Navigation -->
+        <div style="
+          display: flex;
+          justify-content: center;
+          gap: 10px;
+          margin: 30px 0;
+        ">
+          <button 
+            id="load-users-btn"
+            style="
+              padding: 12px 24px;
+              background: ${state.view === 'users' ? '#2196F3' : '#fff'};
+              color: ${state.view === 'users' ? '#fff' : '#2196F3'};
+              border: 2px solid #2196F3;
+              border-radius: 4px;
+              cursor: pointer;
+              font-weight: bold;
+            "
+          >
+            Load Users
+          </button>
+          ${when(
+            state.selectedUserId,
+            () => html`
+              <button 
+                id="back-to-users-btn"
+                style="
+                  padding: 12px 24px;
+                  background: #FF9800;
+                  color: white;
+                  border: none;
+                  border-radius: 4px;
+                  cursor: pointer;
+                "
+              >
+                ← Back to Users
+              </button>
+            `
+          )}
+        </div>
+        
+        <!-- Search Bar (only for users view) -->
+        ${when(
+          state.view === 'users' && state.users.length > 0,
+          () => html`
+            <div style="margin: 20px 0;">
+              <input
+                type="text"
+                id="search-input"
+                placeholder="Search users by name or email..."
+                value="${state.searchQuery}"
+                style="
+                  width: 100%;
+                  padding: 12px;
+                  border: 2px solid #ddd;
+                  border-radius: 4px;
+                  font-size: 16px;
+                "
+              />
+            </div>
+          `
+        )}
+        
+        <!-- Loading State -->
+        ${when(
+          state.loading,
+          () => LoadingSpinner()
+        )}
+        
+        <!-- Error State -->
+        ${when(
+          state.error,
+          () => ErrorMessage(state.error)
+        )}
+        
+        <!-- Users Grid -->
+        ${when(
+          state.view === 'users' && !state.loading && !state.error,
+          () => html`
+            <div>
+              ${when(
+                filteredUsers.length > 0,
+                () => html`
+                  <div style="
+                    display: grid;
+                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                    gap: 20px;
+                  ">
+                    ${each(filteredUsers, (user) => UserCard(user))}
+                  </div>
+                `,
+                () => html`
+                  <p style="text-align: center; color: #999; padding: 40px;">
+                    ${state.searchQuery ? 'No users found matching your search.' : 'No users loaded. Click "Load Users" to fetch data.'}
+                  </p>
+                `
+              )}
+            </div>
+          `
+        )}
+        
+        <!-- Posts View -->
+        ${when(
+          state.view === 'posts' && !state.loading && !state.error,
+          () => html`
+            <div>
+              <h2 style="color: #333; margin-bottom: 20px;">
+                User Posts (${state.posts.length})
+              </h2>
+              ${when(
+                state.posts.length > 0,
+                () => html`
+                  <div>
+                    ${each(state.posts, (post) => PostCard(post))}
+                  </div>
+                `,
+                () => html`
+                  <p style="text-align: center; color: #999; padding: 40px;">
+                    No posts found for this user.
+                  </p>
+                `
+              )}
+            </div>
+          `
+        )}
+      </div>
+    `;
+    
+    // Debounced search handler
+    const handleSearch = debounce((e) => {
+      state.searchQuery = e.target.value;
+    }, 300);
+    
+    const events = {
+      '#load-users-btn': {
+        click: async () => {
+          state.loading = true;
+          state.error = null;
+          state.view = 'users';
+          state.selectedUserId = null;
+          
+          try {
+            const { data } = await api.get('/users');
+            state.users = data;
+          } catch (error) {
+            state.error = 'Failed to load users. Please try again.';
+          } finally {
+            state.loading = false;
+          }
+        }
+      },
+      '.view-posts-btn': {
+        click: async (e) => {
+          const userId = e.target.dataset.userId;
+          state.selectedUserId = userId;
+          state.loading = true;
+          state.error = null;
+          state.view = 'posts';
+          
+          try {
+            const { data } = await api.get(`/posts?userId=${userId}`);
+            state.posts = data;
+          } catch (error) {
+            state.error = 'Failed to load posts. Please try again.';
+          } finally {
+            state.loading = false;
+          }
+        }
+      },
+      '#back-to-users-btn': {
+        click: () => {
+          state.view = 'users';
+          state.selectedUserId = null;
+          state.posts = [];
+        }
+      },
+      '#search-input': {
+        input: handleSearch
+      }
+    };
+    
+    return { element, events };
+  },
+  
+  onMount: (state) => {
+    console.log('✅ API Example App mounted!');
+    // Auto-load users on mount
+    document.getElementById('load-users-btn')?.click();
+  }
+});

package/examples/counter/app.js

@@ -0,0 +1,141 @@
+import { app, html } from '../../src/index.js';
+import { local } from '../../src/plugins/storage.js';
+
+const saved = local.get('counterState', {});
+
+app.human({
+  state: {
+    count: saved.count ?? 0,
+    step: saved.step ?? 1,
+    history: saved.history ?? []
+  },
+
+  derived: {
+    doubled: (state) => state.count * 2
+  },
+
+  actions: {
+    increment({ state, args }) {
+      const value = Number(args[0] ?? state.step);
+      state.count += value;
+      remember(state, `Added ${value}`, value);
+    },
+    decrement({ state, args }) {
+      const value = Number(args[0] ?? state.step);
+      state.count -= value;
+      remember(state, `Removed ${value}`, -value);
+    },
+    setStep({ state, args }) {
+      state.step = Number(args[0]);
+      persist(state);
+    },
+    reset({ state }) {
+      const previous = state.count;
+      state.count = 0;
+      remember(state, 'Reset counter', -previous);
+    },
+    clearHistory({ state }) {
+      state.history = [];
+      persist(state);
+    }
+  },
+
+  render: ({ state }) => html`
+    <div style="min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #fff7ed 0%, #f8fafc 55%, #e2e8f0 100%);">
+      <section style="width: min(100%, 720px); border-radius: 28px; overflow: hidden; background: rgba(255,255,255,0.92); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14); border: 1px solid rgba(148, 163, 184, 0.2);">
+        <div style="padding: 28px; background: linear-gradient(135deg, #0f172a, #1e293b); color: white;">
+          <p style="margin: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: rgba(255,255,255,0.7);">Human Counter</p>
+          <h1 style="margin: 12px 0 6px; font-size: clamp(32px, 6vw, 64px); line-height: 1;">${state.count}</h1>
+          <p style="margin: 0; color: rgba(255,255,255,0.72);">Double view: ${state.doubled}</p>
+        </div>
+
+        <div style="padding: 28px; display: grid; gap: 22px;">
+          <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;">
+            <button data-click="decrement" style="${button('#e11d48')}">- ${state.step}</button>
+            <button data-click="reset" style="${button('#64748b')}">Reset</button>
+            <button data-click="increment" style="${button('#16a34a')}">+ ${state.step}</button>
+          </div>
+
+          <div style="display: grid; gap: 10px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <strong style="font-size: 14px; color: #0f172a;">Step size</strong>
+              <span style="font-size: 14px; color: #475569;">Current: ${state.step}</span>
+            </div>
+            <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;">
+              ${[1, 5, 10, 100].map((step) => html`
+                <button
+                  data-click="setStep"
+                  data-click-args='[${step}]'
+                  style="${chip(step === state.step)}"
+                >
+                  ${step}
+                </button>
+              `)}
+            </div>
+          </div>
+
+          <div style="padding: 18px; border-radius: 18px; background: #f8fafc; border: 1px solid #e2e8f0;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+              <strong style="color: #0f172a;">Recent moves</strong>
+              <button data-click="clearHistory" style="background: transparent; border: none; color: #ea580c; font-weight: 600;">Clear</button>
+            </div>
+            ${state.history.length === 0 ? html`
+              <p style="margin: 0; color: #64748b;">No history yet. Tap a button and the framework rerenders automatically.</p>
+            ` : html`
+              <div style="display: grid; gap: 8px;">
+                ${state.history.slice(-8).reverse().map((item) => html`
+                  <div style="display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: white;">
+                    <span style="color: #334155;">${item.action}</span>
+                    <strong style="color: ${item.value >= 0 ? '#16a34a' : '#e11d48'};">
+                      ${item.value >= 0 ? '+' : ''}${item.value}
+                    </strong>
+                  </div>
+                `)}
+              </div>
+            `}
+          </div>
+        </div>
+      </section>
+    </div>
+  `
+});
+
+function remember(state, action, value) {
+  state.history = [
+    ...state.history,
+    { action, value, timestamp: Date.now() }
+  ].slice(-50);
+
+  persist(state);
+}
+
+function persist(state) {
+  local.set('counterState', {
+    count: state.count,
+    step: state.step,
+    history: state.history
+  });
+}
+
+function button(background) {
+  return [
+    'padding: 16px 18px',
+    'border: none',
+    'border-radius: 18px',
+    `background: ${background}`,
+    'color: white',
+    'font-size: 16px',
+    'font-weight: 700'
+  ].join('; ');
+}
+
+function chip(active) {
+  return [
+    'padding: 12px',
+    'border-radius: 16px',
+    `border: 1px solid ${active ? '#0f172a' : '#cbd5e1'}`,
+    `background: ${active ? '#0f172a' : 'white'}`,
+    `color: ${active ? 'white' : '#334155'}`,
+    'font-weight: 600'
+  ].join('; ');
+}

package/examples/human-counter/app.human

@@ -0,0 +1,27 @@
+---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 .human 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/human-counter/app.js

@@ -0,0 +1,77 @@
+import { app, html } from '../../src/index.js';
+
+function __humanExpr(state, actions, code) {
+  return new Function('state', 'actions', `with (state) { return (${code}); }`)(state, actions);
+}
+
+function __humanRun(state, actions, event, el, args, code) {
+  return new Function(
+    'state',
+    'actions',
+    'event',
+    'el',
+    'args',
+    `with (state) { ${code}; }`
+  )(state, actions, event, el, args);
+}
+
+app.human({
+  state: {
+  count: 0,
+  step: 1
+},
+  derived: {},
+  actions: {
+
+  __inline_1({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "count -= step");
+  },
+
+  __inline_2({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "count = 0");
+  },
+
+  __inline_3({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "count += step");
+  },
+
+  __inline_4({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "step = 1");
+  },
+
+  __inline_5({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "step = 5");
+  },
+
+  __inline_6({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "step = 10");
+  },
+
+  __inline_7({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, "step = 100");
+  }
+
+},
+  render: ({ state, actions }) => html`
+    <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 .human app</p>
+    <h1 style="margin: 0; font-size: clamp(40px, 10vw, 72px); line-height: 1; color: #0f172a;">${__humanExpr(state, actions, "count")}</h1>
+    <p style="margin: 0; color: #475569;">Step: ${__humanExpr(state, actions, "step")}</p>
+
+    <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;">
+      <button data-click="__inline_1" style="padding: 16px; border: none; border-radius: 18px; background: #e11d48; color: white; font-weight: 700;">-</button>
+      <button data-click="__inline_2" style="padding: 16px; border: none; border-radius: 18px; background: #64748b; color: white; font-weight: 700;">reset</button>
+      <button data-click="__inline_3" 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 data-click="__inline_4" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: ${__humanExpr(state, actions, "step === 1 ? '#0f172a' : 'white'")}; color: ${__humanExpr(state, actions, "step === 1 ? 'white' : '#334155'")};">1</button>
+      <button data-click="__inline_5" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: ${__humanExpr(state, actions, "step === 5 ? '#0f172a' : 'white'")}; color: ${__humanExpr(state, actions, "step === 5 ? 'white' : '#334155'")};">5</button>
+      <button data-click="__inline_6" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: ${__humanExpr(state, actions, "step === 10 ? '#0f172a' : 'white'")}; color: ${__humanExpr(state, actions, "step === 10 ? 'white' : '#334155'")};">10</button>
+      <button data-click="__inline_7" style="padding: 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: ${__humanExpr(state, actions, "step === 100 ? '#0f172a' : 'white'")}; color: ${__humanExpr(state, actions, "step === 100 ? 'white' : '#334155'")};">100</button>
+    </div>
+  </section>
+</main>
+  `
+});