mez-easyjs 0.1.0

package/src/runtime/hmr.js

@@ -0,0 +1,157 @@
+/**
+ * Hot Module Replacement — preserve reactive state across component swaps.
+ */
+
+import { injectStyles, removeStyles, replaceStyles } from './css.js';
+import { raw } from './reactive.js';
+
+const records = new Map(); // moduleId -> { instances: Set, meta }
+let hotEnabled = false;
+
+export function enableHmr() {
+  hotEnabled = true;
+  if (typeof window !== 'undefined') window.__EASY_HMR__ = api;
+  return api;
+}
+
+export function isHmrEnabled() {
+  return hotEnabled;
+}
+
+function normalizeId(id) {
+  if (!id) return '';
+  try {
+    const u = new URL(id, typeof location !== 'undefined' ? location.href : 'http://local/');
+    return u.pathname;
+  } catch {
+    return String(id).split('?')[0];
+  }
+}
+
+/**
+ * Register a mounted instance for a module URL/id.
+ */
+export function registerHmrInstance(moduleId, instance, meta = {}) {
+  if (!hotEnabled || !moduleId) return () => {};
+  const id = normalizeId(moduleId);
+  let rec = records.get(id);
+  if (!rec) {
+    rec = { instances: new Set(), meta: {} };
+    records.set(id, rec);
+  }
+  Object.assign(rec.meta, meta);
+  rec.instances.add(instance);
+  instance.__hmrId = id;
+  return () => {
+    rec.instances.delete(instance);
+  };
+}
+
+/**
+ * Apply a newly imported module (default export = component def).
+ * Preserves state snapshots on existing instances.
+ */
+export async function applyHmrUpdate(moduleId, newModule, info = {}) {
+  const defn = newModule?.default || newModule;
+  if (!defn) return { ok: false, reason: 'no-default' };
+
+  const id = normalizeId(moduleId);
+
+  if (defn.scopeId && defn.styles != null) {
+    replaceStyles(defn.scopeId, defn.styles);
+  }
+
+  // Style-only: skip remount when server says so
+  if (info.styleOnly) {
+    console.log(`[easy hmr] styles updated for ${id}`);
+    return { ok: true, remounted: 0, stylesOnly: true };
+  }
+
+  const rec = records.get(id);
+  if (!rec || rec.instances.size === 0) {
+    records.set(id, { instances: new Set(), meta: { defn }, pending: defn });
+    return { ok: true, remounted: 0 };
+  }
+
+  const instances = [...rec.instances];
+  let remounted = 0;
+
+  for (const inst of instances) {
+    const snapshot = snapshotState(inst.state);
+    const host = inst.$el;
+    const props = inst.props ? { ...raw(inst.props) } : {};
+    const appContext = inst.appContext || {};
+
+    rec.instances.delete(inst);
+    try {
+      if (typeof inst.unmount === 'function') inst.unmount();
+    } catch (e) {
+      console.warn('[easy hmr] unmount failed', e);
+    }
+
+    if (!host) continue;
+
+    try {
+      const { mountComponent } = await import('./component.js');
+      const next = mountComponent(defn, host, props, {
+        ...appContext,
+        hmrModuleId: id
+      });
+      if (next?.state && snapshot) restoreState(next.state, snapshot);
+      remounted++;
+    } catch (e) {
+      console.error('[easy hmr] remount failed', e);
+    }
+  }
+
+  rec.meta.defn = defn;
+  console.log(`[easy hmr] ${id} → ${remounted} instance(s), state preserved`);
+  return { ok: true, remounted };
+}
+
+export function replaceScopedStyles(scopeId, cssText) {
+  replaceStyles(scopeId, cssText);
+}
+
+export function snapshotState(state) {
+  if (!state) return null;
+  try {
+    const base = raw(state) || state;
+    return JSON.parse(JSON.stringify(base));
+  } catch {
+    const out = {};
+    for (const k of Object.keys(state)) {
+      try {
+        out[k] = JSON.parse(JSON.stringify(raw(state[k]) ?? state[k]));
+      } catch {
+        out[k] = state[k];
+      }
+    }
+    return out;
+  }
+}
+
+export function restoreState(state, snapshot) {
+  if (!state || !snapshot) return;
+  for (const [k, v] of Object.entries(snapshot)) {
+    try {
+      state[k] = Array.isArray(v) ? v.slice() : v;
+    } catch (_) {
+      /* ignore */
+    }
+  }
+  if (typeof state.$notify === 'function') {
+    for (const k of Object.keys(snapshot)) state.$notify(k);
+  }
+}
+
+const api = {
+  register: registerHmrInstance,
+  apply: applyHmrUpdate,
+  replaceStyles: replaceScopedStyles,
+  snapshot: snapshotState,
+  restore: restoreState,
+  records
+};
+
+export default api;

package/src/runtime/index.js

@@ -0,0 +1,40 @@
+/**
+ * Easy.js runtime — zero external dependencies.
+ * Surgical DOM updates via compile-time subscriptions; no Virtual DOM.
+ */
+
+export { reactive, isReactive, raw } from './reactive.js';
+export { createApp } from './app.js';
+export { defineComponent, mountComponent, unmountComponent } from './component.js';
+export { createRouter, useRouter, RouterView } from './router.js';
+export { createStore } from './store.js';
+export { injectStyles, removeStyles, replaceStyles } from './css.js';
+export { setupDelegation, createEventContext, on, off } from './events.js';
+export { nextTick, queueJob } from './scheduler.js';
+export {
+  escapeHtml,
+  escapeAttr,
+  sanitizeUrl,
+  isEventAttr,
+  isUrlAttr,
+  URL_ATTRS
+} from './escape.js';
+export {
+  EasyError,
+  reportError,
+  setOverlayHandler,
+  pushBoundary,
+  peekBoundary,
+  withErrorBoundary,
+  createBoundary
+} from './errors.js';
+export { installOverlay, showOverlay, hideOverlay } from './overlay.js';
+export {
+  enableHmr,
+  isHmrEnabled,
+  registerHmrInstance,
+  applyHmrUpdate,
+  replaceScopedStyles,
+  snapshotState,
+  restoreState
+} from './hmr.js';

package/src/runtime/overlay.js

@@ -0,0 +1,95 @@
+/**
+ * Dev-mode error overlay — message + optional code frame.
+ * Enabled when import.meta / __EASY_DEV__ is set by the CLI.
+ */
+
+import { setOverlayHandler } from './errors.js';
+import { escapeHtml } from './escape.js';
+
+let root = null;
+
+export function installOverlay() {
+  if (typeof document === 'undefined') return;
+  if (window.__EASY_OVERLAY_INSTALLED__) return;
+  window.__EASY_OVERLAY_INSTALLED__ = true;
+
+  setOverlayHandler((err) => showOverlay(err));
+
+  window.addEventListener('error', (e) => {
+    showOverlay(e.error || e.message, { source: 'window.onerror' });
+  });
+  window.addEventListener('unhandledrejection', (e) => {
+    showOverlay(e.reason, { source: 'unhandledrejection' });
+  });
+}
+
+export function showOverlay(err, meta = {}) {
+  if (typeof document === 'undefined') return;
+  ensureRoot();
+
+  const message = err?.message || String(err);
+  const component = err?.component || meta.component || '';
+  const filename = err?.filename || meta.filename || '';
+  const hint = err?.hint || '';
+  const frame = err?.frame || meta.frame || '';
+  const stack = err?.stack || (err?.cause && err.cause.stack) || '';
+
+  root.innerHTML = `
+    <div data-easy-overlay-panel>
+      <div data-easy-overlay-top>
+        <strong>Easy.js Error</strong>
+        <button type="button" data-easy-overlay-close aria-label="Close">×</button>
+      </div>
+      <div data-easy-overlay-loc>${escapeHtml([component, filename].filter(Boolean).join(' · '))}</div>
+      <pre data-easy-overlay-msg>${escapeHtml(message)}</pre>
+      ${hint ? `<p data-easy-overlay-hint>${escapeHtml(hint)}</p>` : ''}
+      ${frame ? `<pre data-easy-overlay-frame>${escapeHtml(frame)}</pre>` : ''}
+      ${stack ? `<pre data-easy-overlay-stack>${escapeHtml(String(stack).split('\n').slice(0, 8).join('\n'))}</pre>` : ''}
+    </div>
+  `;
+  root.style.display = 'block';
+  root.querySelector('[data-easy-overlay-close]')?.addEventListener('click', hideOverlay);
+}
+
+export function hideOverlay() {
+  if (root) root.style.display = 'none';
+}
+
+function ensureRoot() {
+  if (root) return;
+  root = document.createElement('div');
+  root.setAttribute('data-easy-overlay', '');
+  root.innerHTML = '';
+  Object.assign(root.style, {
+    display: 'none',
+    position: 'fixed',
+    inset: '0',
+    zIndex: '2147483646',
+    background: 'rgba(8,10,14,0.72)',
+    backdropFilter: 'blur(4px)',
+    padding: '2rem',
+    overflow: 'auto',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
+  });
+
+  const style = document.createElement('style');
+  style.textContent = `
+    [data-easy-overlay-panel]{
+      max-width:720px;margin:5vh auto;background:#141a22;color:#e8eef6;
+      border:1px solid rgba(240,160,96,.45);border-radius:12px;padding:1.25rem 1.35rem;
+      box-shadow:0 24px 64px rgba(0,0,0,.45);
+    }
+    [data-easy-overlay-top]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
+    [data-easy-overlay-top] strong{color:#f0a060;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
+    [data-easy-overlay-close]{background:transparent;border:0;color:#8b9bb0;font-size:22px;cursor:pointer;line-height:1}
+    [data-easy-overlay-loc]{color:#8b9bb0;font-size:12px;margin-bottom:.5rem}
+    [data-easy-overlay-msg]{white-space:pre-wrap;font-size:14px;line-height:1.45;margin:0 0 .75rem;color:#fff}
+    [data-easy-overlay-hint]{color:#3ddea8;font-size:13px;margin:0 0 .75rem}
+    [data-easy-overlay-frame],[data-easy-overlay-stack]{
+      background:#0c1016;border-radius:8px;padding:.75rem;font-size:12px;line-height:1.4;
+      overflow:auto;color:#c5d0de;margin:0 0 .5rem
+    }
+  `;
+  document.head.appendChild(style);
+  document.body.appendChild(root);
+}

package/src/runtime/reactive.js

@@ -0,0 +1,172 @@
+const REACTIVE = Symbol('reactive');
+const RAW = Symbol('raw');
+const SUBS = Symbol('subs');
+
+/**
+ * Create a reactive object with key-level subscriptions.
+ * Compiled components call state.$subscribe(key, updater) so only
+ * the pre-generated DOM updaters for that key run on change.
+ */
+export function reactive(target, options = {}) {
+  if (target == null || typeof target !== 'object') return target;
+  if (target[REACTIVE]) return target;
+  // Never proxy built-ins (RegExp, Date, …) — wrapping RegExp breaks String.match
+  // with "RegExp.prototype.hasIndices getter called on non-RegExp object".
+  if (!isReactiveTarget(target)) return target;
+
+  const deep = options.deep !== false;
+  const subs = new Map(); // key -> Set<fn>
+  const anySubs = new Set(); // listeners for any key
+
+  const notify = (key) => {
+    const set = subs.get(key);
+    if (set) {
+      for (const fn of [...set]) fn(key);
+    }
+    for (const fn of [...anySubs]) fn(key);
+  };
+
+  const handler = {
+    get(obj, key, receiver) {
+      if (key === REACTIVE) return true;
+      if (key === RAW) return obj;
+      if (key === SUBS) return subs;
+
+      if (key === '$subscribe') {
+        return (k, fn) => {
+          if (k === '*') {
+            anySubs.add(fn);
+            return () => anySubs.delete(fn);
+          }
+          if (!subs.has(k)) subs.set(k, new Set());
+          subs.get(k).add(fn);
+          return () => {
+            const s = subs.get(k);
+            if (s) {
+              s.delete(fn);
+              if (!s.size) subs.delete(k);
+            }
+          };
+        };
+      }
+
+      if (key === '$notify') {
+        return (k) => notify(k);
+      }
+
+      if (key === '$raw') {
+        return obj;
+      }
+
+      const value = Reflect.get(obj, key, receiver);
+      return value;
+    },
+
+    set(obj, key, value, receiver) {
+      if (key === REACTIVE || key === RAW || key === SUBS) return false;
+
+      const old = obj[key];
+      let next = value;
+
+      if (deep && next != null && typeof next === 'object' && !next[REACTIVE]) {
+        if (Array.isArray(next)) {
+          next = reactiveArray(next, () => notify(key));
+        } else if (isReactiveTarget(next)) {
+          next = reactive(next, options);
+        }
+      }
+
+      if (Object.is(old, next)) return true;
+
+      const result = Reflect.set(obj, key, next, receiver);
+      notify(key);
+      return result;
+    },
+
+    deleteProperty(obj, key) {
+      if (!(key in obj)) return true;
+      const result = Reflect.deleteProperty(obj, key);
+      notify(key);
+      return result;
+    }
+  };
+
+  // Deep-wrap existing nested objects/arrays (skip built-ins like RegExp)
+  if (deep) {
+    for (const key of Object.keys(target)) {
+      const v = target[key];
+      if (v != null && typeof v === 'object' && !v[REACTIVE]) {
+        if (Array.isArray(v)) {
+          const k = key;
+          target[key] = reactiveArray(v, () => notify(k));
+        } else if (isReactiveTarget(v)) {
+          target[key] = reactive(v, options);
+        }
+      }
+    }
+  }
+
+  return new Proxy(target, handler);
+}
+
+/** Plain objects / arrays only — never RegExp, Date, Map, DOM nodes, etc. */
+function isReactiveTarget(value) {
+  if (value == null || typeof value !== 'object') return false;
+  if (Array.isArray(value)) return true;
+  if (value instanceof RegExp) return false;
+  if (value instanceof Date) return false;
+  if (value instanceof Promise) return false;
+  if (value instanceof Error) return false;
+  if (typeof Map !== 'undefined' && value instanceof Map) return false;
+  if (typeof Set !== 'undefined' && value instanceof Set) return false;
+  if (typeof WeakMap !== 'undefined' && value instanceof WeakMap) return false;
+  if (typeof WeakSet !== 'undefined' && value instanceof WeakSet) return false;
+  if (typeof Element !== 'undefined' && value instanceof Element) return false;
+  if (typeof Node !== 'undefined' && value instanceof Node) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+
+/**
+ * Array mutations trigger a parent-key notification via onMutate.
+ */
+function reactiveArray(arr, onMutate) {
+  const mutating = new Set([
+    'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill', 'copyWithin'
+  ]);
+
+  return new Proxy(arr, {
+    get(target, key, receiver) {
+      if (key === REACTIVE) return true;
+      if (key === RAW) return target;
+      const val = Reflect.get(target, key, receiver);
+      if (typeof val === 'function' && mutating.has(key)) {
+        return function (...args) {
+          const result = val.apply(target, args);
+          onMutate();
+          return result;
+        };
+      }
+      return val;
+    },
+    set(target, key, value, receiver) {
+      const old = target[key];
+      const result = Reflect.set(target, key, value, receiver);
+      if (!Object.is(old, value)) onMutate();
+      return result;
+    },
+    deleteProperty(target, key) {
+      const result = Reflect.deleteProperty(target, key);
+      onMutate();
+      return result;
+    }
+  });
+}
+
+export function isReactive(value) {
+  return !!(value && value[REACTIVE]);
+}
+
+export function raw(value) {
+  return (value && value[RAW]) || value;
+}