humanjs-core 1.0.0

package/src/compiler/human.js

@@ -0,0 +1,194 @@
+const SECTION_NAMES = ['imports', 'state', 'derived', 'actions', 'template', 'hooks'];
+const EVENT_NAMES = ['click', 'submit', 'input', 'change', 'keydown', 'keyup', 'focus', 'blur'];
+
+function escapeTemplateLiteral(value) {
+  return value.replace(/\\/g, '\\\\').replace(/`/g, '\\`');
+}
+
+function stringifyCode(code) {
+  return JSON.stringify(code);
+}
+
+function isActionCall(value) {
+  const callMatch = value.trim().match(/^([A-Za-z_$][\w$]*)\s*\((.*)\)$/s);
+  return callMatch ? { name: callMatch[1], args: callMatch[2] } : null;
+}
+
+function isSimpleActionName(value) {
+  return /^[A-Za-z_$][\w$]*$/.test(value.trim());
+}
+
+function compileActionAttribute(value, eventName, generatedActions) {
+  const trimmed = value.trim();
+  const actionCall = isActionCall(trimmed);
+
+  if (actionCall) {
+    return `data-${eventName}="${actionCall.name}" data-${eventName}-args='[${actionCall.args.trim()}]'`;
+  }
+
+  if (isSimpleActionName(trimmed)) {
+    return `data-${eventName}="${trimmed}"`;
+  }
+
+  const generatedName = `__inline_${generatedActions.length + 1}`;
+  generatedActions.push({
+    name: generatedName,
+    code: trimmed
+  });
+
+  return `data-${eventName}="${generatedName}"`;
+}
+
+export function parseHumanFile(source) {
+  const normalized = source.replace(/\r\n/g, '\n');
+  const sections = Object.fromEntries(SECTION_NAMES.map((name) => [name, '']));
+  const lines = normalized.split('\n');
+  let currentSection = null;
+  let foundSection = false;
+
+  lines.forEach((line) => {
+    const headerMatch = line.match(/^---([a-z]+)$/);
+
+    if (headerMatch) {
+      const [, name] = headerMatch;
+      if (!SECTION_NAMES.includes(name)) {
+        throw new Error(`[HumanJS] Unknown .human section: ${name}`);
+      }
+
+      currentSection = name;
+      foundSection = true;
+      return;
+    }
+
+    if (!currentSection) return;
+    sections[currentSection] += `${line}\n`;
+  });
+
+  if (!foundSection) {
+    throw new Error('[HumanJS] Invalid .human file. Use sections like ---state and ---template.');
+  }
+
+  Object.keys(sections).forEach((name) => {
+    sections[name] = sections[name].trim();
+  });
+
+  if (!sections.template) {
+    throw new Error('[HumanJS] .human files require a ---template section.');
+  }
+
+  return sections;
+}
+
+export function compileTemplate(template) {
+  const generatedActions = [];
+  let compiled = escapeTemplateLiteral(template.trim());
+
+  compiled = compiled.replace(
+    /\{([^{}]+)\}/g,
+    (_, expression) => `\${__humanExpr(state, actions, ${stringifyCode(expression.trim())})}`
+  );
+
+  EVENT_NAMES.forEach((eventName) => {
+    const pattern = new RegExp(`@${eventName}="([^"]+)"`, 'g');
+    compiled = compiled.replace(pattern, (_, value) => compileActionAttribute(value, eventName, generatedActions));
+  });
+
+  return { template: compiled, generatedActions };
+}
+
+export function humanExpr(state, actions, code) {
+  return new Function('state', 'actions', `with (state) { return (${code}); }`)(state, actions);
+}
+
+export function humanRun(state, actions, event, el, args, code) {
+  return new Function(
+    'state',
+    'actions',
+    'event',
+    'el',
+    'args',
+    `with (state) { ${code}; }`
+  )(state, actions, event, el, args);
+}
+
+export function createRuntimeTemplate(template) {
+  const { template: compiledTemplate, generatedActions } = compileTemplate(template);
+
+  return {
+    render({ html, state, actions }) {
+      return new Function(
+        'html',
+        'state',
+        'actions',
+        '__humanExpr',
+        `return html\`${compiledTemplate}\`;`
+      )(html, state, actions, humanExpr);
+    },
+    actions: Object.fromEntries(
+      generatedActions.map(({ name, code }) => [
+        name,
+        ({ state, actions, event, el, args }) => humanRun(state, actions, event, el, args, code)
+      ])
+    )
+  };
+}
+
+export function compileHuman(source, options = {}) {
+  const sections = parseHumanFile(source);
+  const appImport = options.appImportPath || '../../src/index.js';
+  const imports = sections.imports ? `${sections.imports}\n\n` : '';
+  const state = sections.state || '{}';
+  const derived = sections.derived || '{}';
+  const rawActions = sections.actions.trim();
+  const actions = rawActions || '{}';
+  const hooks = sections.hooks || '';
+  const { template, generatedActions } = compileTemplate(sections.template);
+  const hasCustomActions = rawActions && rawActions !== '{}';
+  const mergedActions = generatedActions.length
+    ? `{
+${generatedActions.map(({ name, code }) => `
+  ${name}({ state, actions, event, el, args }) {
+    return __humanRun(state, actions, event, el, args, ${stringifyCode(code)});
+  }`).join(',\n')}${hasCustomActions ? ',\n' : ''}
+${hasCustomActions ? rawActions.slice(1, -1).trim() : ''}
+}`
+    : actions;
+
+  return `${imports}import { app, html } from '${appImport}';
+
+const __humanExpr = ${humanExpr.toString()};
+
+const __humanRun = ${humanRun.toString()};
+
+app.human({
+  state: ${state},
+  derived: ${derived},
+  actions: ${mergedActions},
+  render: ({ state, actions }) => html\`
+    ${template}
+  \`${hooks ? `,\n${hooks}` : ''}
+});
+`;
+}
+
+export async function loadHuman(url, options = {}) {
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`[HumanJS] Failed to load ${url}: ${response.status}`);
+  }
+
+  const source = await response.text();
+  const compiled = compileHuman(source, {
+    appImportPath: options.appImportPath || new URL('../index.js', import.meta.url).href
+  });
+
+  const blob = new Blob([compiled], { type: 'text/javascript' });
+  const blobUrl = URL.createObjectURL(blob);
+
+  try {
+    return await import(blobUrl);
+  } finally {
+    URL.revokeObjectURL(blobUrl);
+  }
+}

package/src/core/component.js

@@ -0,0 +1,381 @@
+/**
+ * COMPONENT SYSTEM
+ * 
+ * Create reactive components with state, lifecycle hooks, and auto re-rendering.
+ */
+
+import { createState } from './state.js';
+import { html } from './render.js';
+import { attachEvents } from './events.js';
+import { createRuntimeTemplate } from '../compiler/human.js';
+
+const ACTION_EVENTS = [
+  'click',
+  'submit',
+  'input',
+  'change',
+  'keydown',
+  'keyup',
+  'focus',
+  'blur'
+];
+
+/**
+ * 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 cleanupRender = null;
+  let isDestroyed = false;
+  
+  // Create reactive state FIRST
+  const componentState = createState(initialState);
+  
+  // Render function
+  function render() {
+    if (isDestroyed) return;
+    const previousCleanupRender = cleanupRender;
+    
+    // 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 || {};
+      cleanupRender = typeof result.cleanup === 'function' ? result.cleanup : null;
+    } else {
+      newElement = result;
+      events = {};
+      cleanupRender = null;
+    }
+    
+    // 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();
+      if (previousCleanupRender) previousCleanupRender();
+      
+      // 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();
+    if (cleanupRender) cleanupRender();
+    
+    // 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;
+    }
+  };
+}
+
+function parseActionArgs(rawValue) {
+  if (!rawValue) return [];
+
+  try {
+    const parsed = JSON.parse(rawValue);
+    return Array.isArray(parsed) ? parsed : [parsed];
+  } catch {
+    return [rawValue];
+  }
+}
+
+function createActionBindings(rootElement, actions, getContext) {
+  const cleanups = [];
+
+  ACTION_EVENTS.forEach((eventName) => {
+    const attrName = `data-${eventName}`;
+    const listener = (event) => {
+      const target = event.target.closest(`[${attrName}]`);
+      if (!target || !rootElement.contains(target)) return;
+
+      const actionName = target.getAttribute(attrName);
+      const action = actions[actionName];
+
+      if (typeof action !== 'function') {
+        console.warn(`[HumanJS] Unknown action: ${actionName}`);
+        return;
+      }
+
+      const args = parseActionArgs(target.getAttribute(`${attrName}-args`));
+      const context = getContext(target, event);
+
+      action({ ...context, args });
+    };
+
+    rootElement.addEventListener(eventName, listener);
+    cleanups.push(() => rootElement.removeEventListener(eventName, listener));
+  });
+
+  return () => cleanups.forEach((cleanup) => cleanup());
+}
+
+export function createApp(options = {}) {
+  const {
+    root = document.getElementById('app'),
+    state: initialState = {},
+    derived = {},
+    actions: actionDefinitions = {},
+    render,
+    onMount,
+    onUpdate,
+    onDestroy
+  } = options;
+
+  if (!render) {
+    throw new Error('[HumanJS] render function is required');
+  }
+
+  if (!root) {
+    throw new Error('[HumanJS] root element is required');
+  }
+
+  let instance = null;
+  let derivedReady = false;
+  const boundActions = Object.fromEntries(
+    Object.entries(actionDefinitions).map(([name, action]) => [
+      name,
+      (...args) => action({
+        state: instance.state,
+        actions: boundActions,
+        root,
+        render: () => instance.render(),
+        args
+      })
+    ])
+  );
+
+  const lifecycle = {
+    onMount(state) {
+      if (onMount) {
+        onMount({ state, actions: boundActions, root });
+      }
+    },
+    onUpdate(state) {
+      if (onUpdate) {
+        onUpdate({ state, actions: boundActions, root });
+      }
+    },
+    onDestroy(state) {
+      if (onDestroy) {
+        onDestroy({ state, actions: boundActions, root });
+      }
+    }
+  };
+
+  instance = createComponent(
+    root,
+    (state) => {
+      if (!derivedReady) {
+        Object.entries(derived).forEach(([key, compute]) => {
+          if (typeof compute === 'function') {
+            state.$computed(key, () => compute(state, boundActions));
+          }
+        });
+        derivedReady = true;
+      }
+
+      const viewContext = { state, actions: boundActions, root };
+      const result = render(viewContext);
+
+      let element;
+      let events = {};
+
+      if (result && typeof result === 'object' && result.element) {
+        element = result.element;
+        events = result.events || {};
+      } else {
+        element = result;
+      }
+
+      const cleanupActions = createActionBindings(element, boundActions, (target, event) => ({
+        state,
+        actions: boundActions,
+        root,
+        event,
+        el: target,
+        render: () => instance.render()
+      }));
+
+      const cleanupEvents = attachEvents(element, events);
+
+      return {
+        element,
+        events: {},
+        cleanup() {
+          cleanupActions();
+          cleanupEvents();
+        }
+      };
+    },
+    initialState,
+    lifecycle
+  );
+
+  return {
+    ...instance,
+    actions: boundActions
+  };
+}
+
+export function createSimpleApp(options = {}) {
+  const {
+    template,
+    actions = {},
+    ...rest
+  } = options;
+
+  if (!template) {
+    throw new Error('[HumanJS] template is required');
+  }
+
+  const runtime = createRuntimeTemplate(template);
+
+  return createApp({
+    ...rest,
+    actions: {
+      ...runtime.actions,
+      ...actions
+    },
+    render: ({ state, actions, root }) => runtime.render({ html, state, actions, root })
+  });
+}
+
+/**
+ * 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 }
+    );
+  },
+
+  human(options = {}) {
+    return createApp(options);
+  },
+
+  simple(options = {}) {
+    return createSimpleApp(options);
+  },
+  
+  /**
+   * 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(), {});
+  }
+};

package/src/core/events.js

@@ -0,0 +1,130 @@
+/**
+ * EVENT HANDLING SYSTEM
+ * 
+ * Attach and manage DOM event listeners.
+ * Supports event delegation and automatic cleanup.
+ */
+
+/**
+ * Attach events to DOM elements
+ * @param {HTMLElement} rootElement 
+ * @param {Object} eventMap - { selector: { eventType: handler } }
+ */
+export function attachEvents(rootElement, eventMap = {}) {
+  const attachedListeners = [];
+  
+  Object.keys(eventMap).forEach(selector => {
+    const events = eventMap[selector];
+    
+    // Find target elements
+    let targetElements;
+    if (selector === 'root' || selector === ':root') {
+      targetElements = [rootElement];
+    } else {
+      targetElements = [...rootElement.querySelectorAll(selector)];
+    }
+    
+    if (!targetElements || targetElements.length === 0) {
+      console.warn(`[HumanJS] Element not found: ${selector}`);
+      return;
+    }
+    
+    targetElements.forEach((targetElement) => {
+      Object.keys(events).forEach(eventType => {
+        const handler = events[eventType];
+        targetElement.addEventListener(eventType, handler);
+        
+        attachedListeners.push({
+          element: targetElement,
+          type: eventType,
+          handler
+        });
+      });
+    });
+  });
+  
+  // Return cleanup function
+  return () => {
+    attachedListeners.forEach(({ element, type, handler }) => {
+      element.removeEventListener(type, handler);
+    });
+  };
+}
+
+/**
+ * Event delegation - attach one listener to parent
+ * @param {HTMLElement} parent 
+ * @param {String} eventType 
+ * @param {String} selector 
+ * @param {Function} handler 
+ */
+export function delegate(parent, eventType, selector, handler) {
+  const listener = (event) => {
+    const target = event.target.closest(selector);
+    if (target && parent.contains(target)) {
+      handler.call(target, event);
+    }
+  };
+  
+  parent.addEventListener(eventType, listener);
+  
+  return () => parent.removeEventListener(eventType, listener);
+}
+
+/**
+ * Debounce function calls
+ * @param {Function} fn 
+ * @param {Number} delay 
+ */
+export function debounce(fn, delay = 300) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+/**
+ * Throttle function calls
+ * @param {Function} fn 
+ * @param {Number} limit 
+ */
+export function throttle(fn, limit = 300) {
+  let inThrottle;
+  return function(...args) {
+    if (!inThrottle) {
+      fn.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+/**
+ * Common event helpers
+ */
+export const on = {
+  click: (selector, handler) => ({ [selector]: { click: handler } }),
+  input: (selector, handler) => ({ [selector]: { input: handler } }),
+  submit: (selector, handler) => ({ 
+    [selector]: { 
+      submit: (e) => {
+        e.preventDefault();
+        handler(e);
+      }
+    }
+  }),
+  change: (selector, handler) => ({ [selector]: { change: handler } }),
+  focus: (selector, handler) => ({ [selector]: { focus: handler } }),
+  blur: (selector, handler) => ({ [selector]: { blur: handler } }),
+  keydown: (selector, handler) => ({ [selector]: { keydown: handler } }),
+  keyup: (selector, handler) => ({ [selector]: { keyup: handler } })
+};
+
+/**
+ * Merge multiple event maps
+ * @param  {...Object} eventMaps 
+ */
+export function mergeEvents(...eventMaps) {
+  return Object.assign({}, ...eventMaps);
+}