@faber1999/axon.js 0.1.0

package/dist/index.js

@@ -0,0 +1,515 @@
+import {
+  Fragment,
+  disposeOwner,
+  effect,
+  getCurrentEffect,
+  h,
+  onCleanup,
+  onMount,
+  runOwned,
+  runWithOwner,
+  untrack
+} from "./chunk-HYNBHCGU.js";
+
+// src/reactivity/signal.ts
+var batchDepth = 0;
+var pendingEffects = /* @__PURE__ */ new Set();
+function flushEffects() {
+  pendingEffects.forEach((run) => {
+    if (!run._disposed) run();
+  });
+  pendingEffects.clear();
+}
+function scheduleEffect(run) {
+  if (batchDepth > 0) {
+    pendingEffects.add(run);
+  } else {
+    run();
+  }
+}
+function signal(initialValue) {
+  let value = initialValue;
+  const subscribers = /* @__PURE__ */ new Map();
+  const read = () => {
+    const currentEffect = getCurrentEffect();
+    if (currentEffect && !subscribers.has(currentEffect)) {
+      subscribers.set(currentEffect, () => {
+        subscribers.delete(currentEffect);
+      });
+      currentEffect._subscriptions.add(() => {
+        subscribers.delete(currentEffect);
+      });
+    }
+    return value;
+  };
+  const write = (newValue) => {
+    const next = typeof newValue === "function" ? newValue(value) : newValue;
+    if (Object.is(next, value)) return;
+    value = next;
+    const subs = [...subscribers.keys()];
+    subs.forEach((run) => {
+      if (!run._disposed) scheduleEffect(run);
+    });
+  };
+  return [read, write];
+}
+function batch(fn) {
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) flushEffects();
+  }
+}
+
+// src/reactivity/computed.ts
+function computed(fn) {
+  const [get, set] = signal(void 0);
+  effect(() => set(fn()));
+  return get;
+}
+
+// src/dom/render.ts
+function mount(component, container, props = {}) {
+  container.innerHTML = "";
+  let nodes;
+  if (typeof component === "function") {
+    nodes = runWithOwner(component, props);
+  } else {
+    nodes = component;
+  }
+  const append = (node) => {
+    if (node == null) return;
+    if (Array.isArray(node)) node.forEach(append);
+    else container.appendChild(node);
+  };
+  append(nodes);
+}
+function createApp(RootComponent) {
+  return {
+    mount(selector) {
+      const container = typeof selector === "string" ? document.querySelector(selector) : selector;
+      if (!container) throw new Error(`[axon] mount target not found: ${selector}`);
+      mount(RootComponent, container);
+    }
+  };
+}
+
+// src/dom/helpers.ts
+function Show({ when, fallback = null, children }) {
+  const start = document.createComment("Show");
+  const end = document.createComment("/Show");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(start);
+  fragment.appendChild(end);
+  let currentOwner = null;
+  const condition = typeof when === "function" ? when : () => when;
+  const insert = (parent, content) => {
+    if (content == null) return;
+    if (Array.isArray(content)) {
+      content.forEach((c) => insert(parent, c));
+    } else {
+      parent.insertBefore(
+        content instanceof Node ? content : document.createTextNode(String(content)),
+        end
+      );
+    }
+  };
+  effect(() => {
+    const isTrue = Boolean(condition());
+    if (currentOwner) {
+      disposeOwner(currentOwner);
+      currentOwner = null;
+    }
+    let node = start.nextSibling;
+    while (node && node !== end) {
+      const next = node.nextSibling;
+      node.parentNode?.removeChild(node);
+      node = next;
+    }
+    const content = isTrue ? children : fallback;
+    if (content == null) return;
+    const parent = end.parentNode;
+    if (!parent) return;
+    if (typeof content === "function") {
+      currentOwner = { _onMount: [], _onCleanup: [], _children: [], _mounted: false };
+      insert(parent, content());
+    } else {
+      insert(parent, content);
+    }
+  });
+  return fragment;
+}
+function For({ each, children: renderItem }) {
+  const start = document.createComment("For");
+  const end = document.createComment("/For");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(start);
+  fragment.appendChild(end);
+  const getList = typeof each === "function" ? each : () => each;
+  let renderedNodes = [];
+  effect(() => {
+    const list = getList() ?? [];
+    const parent = end.parentNode;
+    if (!parent) return;
+    renderedNodes.forEach((nodes) => {
+      nodes.forEach((n) => parent.removeChild(n));
+    });
+    renderedNodes = [];
+    list.forEach((item, index) => {
+      const result = renderItem(item, () => index);
+      const nodes = Array.isArray(result) ? result : [result];
+      nodes.forEach((n) => {
+        if (n != null) parent.insertBefore(n, end);
+      });
+      renderedNodes.push(nodes);
+    });
+  });
+  return fragment;
+}
+function Dynamic({ component: getComponent, ...props }) {
+  const start = document.createComment("Dynamic");
+  const end = document.createComment("/Dynamic");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(start);
+  fragment.appendChild(end);
+  const getter = typeof getComponent === "function" && getComponent.length === 0 ? getComponent : () => getComponent;
+  effect(() => {
+    const Component = getter();
+    const parent = end.parentNode;
+    if (!parent || !Component) return;
+    let node = start.nextSibling;
+    while (node && node !== end) {
+      const next = node.nextSibling;
+      parent.removeChild(node);
+      node = next;
+    }
+    const result = runWithOwner(Component, props);
+    const nodes = Array.isArray(result) ? result : [result];
+    nodes.forEach((n) => {
+      if (n != null) parent.insertBefore(n, end);
+    });
+  });
+  return fragment;
+}
+function Portal({ mount: target, children }) {
+  const nodes = Array.isArray(children) ? children : [children];
+  nodes.forEach((n) => {
+    if (n != null) target.appendChild(n);
+  });
+  return document.createComment("Portal");
+}
+
+// src/dom/transitions.ts
+function withViewTransition(fn) {
+  if ("startViewTransition" in document) {
+    document.startViewTransition(fn);
+  } else {
+    fn();
+  }
+}
+
+// src/component/context.ts
+var contextMap = /* @__PURE__ */ new Map();
+function createContext(defaultValue) {
+  const key = /* @__PURE__ */ Symbol("axon.context");
+  const Provider = ({
+    value,
+    children
+  }) => {
+    if (!contextMap.has(key)) contextMap.set(key, []);
+    contextMap.get(key).push(value);
+    queueMicrotask(() => {
+      const stack = contextMap.get(key);
+      if (stack) stack.pop();
+    });
+    if (children == null) return null;
+    return Array.isArray(children) ? children : [children];
+  };
+  const use = () => {
+    const stack = contextMap.get(key);
+    if (stack && stack.length > 0) return stack[stack.length - 1];
+    return defaultValue;
+  };
+  return { Provider, use };
+}
+
+// src/router/router.ts
+function compilePath(pattern) {
+  const paramNames = [];
+  const regexStr = pattern.replace(/:([^/]+)/g, (_, name) => {
+    paramNames.push(name);
+    return "([^/]+)";
+  }).replace(/\*/g, ".*");
+  return {
+    regex: new RegExp(`^${regexStr}(?:/)?$`),
+    paramNames
+  };
+}
+function matchPath(pattern, pathname) {
+  const { regex, paramNames } = compilePath(pattern);
+  const match = pathname.match(regex);
+  if (!match) return null;
+  const params = {};
+  paramNames.forEach((name, i) => {
+    params[name] = decodeURIComponent(match[i + 1]);
+  });
+  return params;
+}
+var _router = null;
+function createRouter(routes, options = {}) {
+  if (options.viewTransitions) {
+    const style = document.createElement("style");
+    style.dataset.axon = "view-transitions";
+    style.textContent = [
+      "::view-transition-old(root),",
+      "::view-transition-new(root) { animation: none; }"
+    ].join("\n");
+    document.head.appendChild(style);
+  }
+  const [pathname, setPathname] = signal(location.pathname);
+  const [search, setSearch] = signal(location.search);
+  const [params, setParams] = signal({});
+  const compiledRoutes = [];
+  for (const def of routes) {
+    if ("children" in def) {
+      for (const child of def.children) {
+        compiledRoutes.push({
+          ...child,
+          ...compilePath(child.path),
+          ...def.layout !== void 0 && { layout: def.layout },
+          ...def.guard !== void 0 && { guard: def.guard },
+          ...def.fallbackPath !== void 0 && { fallbackPath: def.fallbackPath }
+        });
+      }
+    } else {
+      compiledRoutes.push({ ...def, ...compilePath(def.path) });
+    }
+  }
+  function syncLocation() {
+    batch(() => {
+      setPathname(location.pathname);
+      setSearch(location.search);
+      for (const route of compiledRoutes) {
+        const matched = matchPath(route.path, location.pathname);
+        if (matched) {
+          setParams(matched);
+          return;
+        }
+      }
+      setParams({});
+    });
+  }
+  const doSync = () => {
+    if (options.viewTransitions) {
+      withViewTransition(syncLocation);
+    } else {
+      syncLocation();
+    }
+  };
+  window.addEventListener("popstate", doSync);
+  const navigate = (to, { replace = false } = {}) => {
+    if (replace) {
+      history.replaceState(null, "", to);
+    } else {
+      history.pushState(null, "", to);
+    }
+    doSync();
+  };
+  const router = {
+    pathname,
+    search,
+    params,
+    navigate,
+    routes: compiledRoutes,
+    currentRoute() {
+      const path = pathname();
+      for (const route of compiledRoutes) {
+        if (matchPath(route.path, path)) return route;
+      }
+      return null;
+    }
+  };
+  _router = router;
+  return router;
+}
+function useRouter() {
+  if (!_router) throw new Error("[axon] No router found. Call createRouter() first.");
+  return _router;
+}
+function useParams() {
+  return useRouter().params();
+}
+function useNavigate() {
+  return useRouter().navigate;
+}
+
+// src/router/components.tsx
+function RouterView() {
+  const router = useRouter();
+  const start = document.createComment("RouterView");
+  const end = document.createComment("/RouterView");
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(start);
+  fragment.appendChild(end);
+  let currentOwner = null;
+  let lastValidPath = null;
+  effect(() => {
+    const path = router.pathname();
+    const parent = end.parentNode;
+    if (!parent) return;
+    if (currentOwner) {
+      disposeOwner(currentOwner);
+      currentOwner = null;
+    }
+    let node = start.nextSibling;
+    while (node && node !== end) {
+      const next = node.nextSibling;
+      parent.removeChild(node);
+      node = next;
+    }
+    for (const route of router.routes) {
+      if (!route.regex.test(path)) continue;
+      if (route.guard) {
+        const access = route.guard();
+        if (access === false) {
+          const target = lastValidPath ?? route.fallbackPath ?? null;
+          if (target) queueMicrotask(() => router.navigate(target, { replace: true }));
+          return;
+        }
+        if (typeof access === "string") {
+          queueMicrotask(() => router.navigate(access, { replace: true }));
+          return;
+        }
+      }
+      lastValidPath = path;
+      const params = router.params();
+      let result;
+      let owner;
+      if (route.layout) {
+        const Layout = route.layout;
+        const Page = route.component;
+        [result, owner] = runOwned(
+          () => Layout({ children: (() => runWithOwner(Page, { params })) })
+        );
+      } else {
+        [result, owner] = runOwned(() => route.component({ params }));
+      }
+      currentOwner = owner;
+      const nodes = Array.isArray(result) ? result.flat() : [result];
+      nodes.forEach((n) => {
+        if (n != null) parent.insertBefore(n, end);
+      });
+      return;
+    }
+  });
+  return fragment;
+}
+function Link({ href, replace = false, class: cls, activeClass, children }) {
+  const router = useRouter();
+  const el = document.createElement("a");
+  el.href = href;
+  if (cls) el.className = cls;
+  if (activeClass) {
+    const classes = activeClass.split(/\s+/).filter(Boolean);
+    effect(() => {
+      if (router.pathname() === href) {
+        el.classList.add(...classes);
+      } else {
+        el.classList.remove(...classes);
+      }
+    });
+  }
+  el.addEventListener("click", (e) => {
+    if (e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      router.navigate(href, { replace });
+    }
+  });
+  const appendChildren = (parent, child) => {
+    if (child == null) return;
+    if (Array.isArray(child)) child.forEach((c) => appendChildren(parent, c));
+    else if (child instanceof Node) parent.appendChild(child);
+    else parent.appendChild(document.createTextNode(String(child)));
+  };
+  appendChildren(el, children);
+  return el;
+}
+
+// src/store/store.ts
+function createStore(initialState) {
+  const signals = {};
+  for (const key of Object.keys(initialState)) {
+    signals[key] = signal(initialState[key]);
+  }
+  const store = new Proxy({}, {
+    get(_, key) {
+      const sig = signals[key];
+      if (!sig) throw new Error(`[axon] store has no property "${key}"`);
+      return sig[0]();
+    },
+    set() {
+      throw new Error("[axon] Store is read-only. Use setStore() to update values.");
+    },
+    has(_, key) {
+      return key in signals;
+    },
+    ownKeys() {
+      return Object.keys(signals);
+    },
+    getOwnPropertyDescriptor(_, key) {
+      if (key in signals) return { configurable: true, enumerable: true, writable: false };
+      return void 0;
+    }
+  });
+  function setStore(keyOrPartial, valueOrUpdater) {
+    if (typeof keyOrPartial === "object" && keyOrPartial !== null) {
+      for (const [k, v] of Object.entries(keyOrPartial)) {
+        if (!(k in signals)) {
+          signals[k] = signal(v);
+        } else {
+          signals[k][1](v);
+        }
+      }
+    } else {
+      const key = keyOrPartial;
+      if (!(key in signals)) {
+        signals[key] = signal(valueOrUpdater);
+      } else {
+        signals[key][1](valueOrUpdater);
+      }
+    }
+  }
+  return [store, setStore];
+}
+function select(store, selector) {
+  return computed(() => selector(store));
+}
+export {
+  Dynamic,
+  For,
+  Fragment,
+  Link,
+  Portal,
+  RouterView,
+  Show,
+  batch,
+  computed,
+  createApp,
+  createContext,
+  createRouter,
+  createStore,
+  effect,
+  h,
+  mount,
+  onCleanup,
+  onMount,
+  select,
+  signal,
+  untrack,
+  useNavigate,
+  useParams,
+  useRouter,
+  withViewTransition
+};

package/dist/jsx-KOQXGMp1.d.ts

@@ -0,0 +1,64 @@
+/** Función que lee un valor reactivo y crea una suscripción si hay un efecto activo. */
+type Getter<T> = () => T;
+/** Función que escribe un signal. Acepta un valor directo o una función updater. */
+type Setter<T> = (value: T | ((prev: T) => T)) => void;
+/** Par [getter, setter] que representa un signal reactivo. */
+type Signal<T> = [Getter<T>, Setter<T>];
+/**
+ * Función componente de axon.js.
+ * Recibe props y devuelve uno o varios nodos DOM (o null).
+ * Se ejecuta exactamente una vez — no hay re-renders.
+ */
+type ComponentFn<P extends Record<string, unknown> = Record<string, unknown>> = (props: P) => Node | Node[] | null;
+/**
+ * Tipos válidos como hijos en JSX.
+ * Las funciones se tratan como hijos reactivos (signal getters).
+ */
+type JSXChild = string | number | boolean | null | undefined | Node | JSXChild[] | (() => JSXChild);
+
+/**
+ * axon.js - JSX Runtime: h() and Fragment
+ *
+ * This is the JSX factory. Configure your build tool with:
+ *   jsxFactory: 'h'
+ *   jsxFragment: 'Fragment'
+ *
+ * Design rule:
+ *   - Static values (string, number, Node) → applied once
+ *   - Function values → wrapped in effect() for reactive updates
+ *
+ * This means signal getters passed as children or props are reactive:
+ *   const [count] = signal(0)
+ *   <p>{count}</p>          ← count is a getter function → reactive text node
+ *   <div class={cls}>       ← cls is a getter function → reactive attribute
+ */
+
+declare const Fragment: unique symbol;
+declare global {
+    namespace JSX {
+        type Element = Node | Node[];
+        interface IntrinsicElements {
+            [tag: string]: Record<string, unknown>;
+        }
+        interface ElementChildrenAttribute {
+            children: Record<string, never>;
+        }
+    }
+}
+type Props = Record<string, unknown> | null;
+/**
+ * JSX factory function. Called automatically by the JSX compiler.
+ *
+ * - `h(Fragment, ...)` → returns children as a flat array
+ * - `h(ComponentFn, props, ...children)` → runs the component with lifecycle
+ * - `h('div', props, ...children)` → creates a real DOM element
+ *
+ * Props that are functions (not event handlers) are reactive:
+ *   `class={cls}` where `cls` is a signal getter → updates className on each change.
+ *
+ * Children that are functions are reactive:
+ *   `{count}` where `count` is a signal getter → updates a text node on each change.
+ */
+declare function h(type: string | ComponentFn | typeof Fragment, props: Props, ...children: JSXChild[]): Node | Node[] | null;
+
+export { type ComponentFn as C, Fragment as F, type Getter as G, type JSXChild as J, type Signal as S, type Setter as a, h };

package/dist/jsx.d.ts

@@ -0,0 +1 @@
+export { F as Fragment, h } from './jsx-KOQXGMp1.js';

package/dist/jsx.js

@@ -0,0 +1,8 @@
+import {
+  Fragment,
+  h
+} from "./chunk-HYNBHCGU.js";
+export {
+  Fragment,
+  h
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@faber1999/axon.js",
+  "version": "0.1.0",
+  "description": "A fine-grained reactive frontend framework with JSX",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./jsx": {
+      "import": "./dist/jsx.js",
+      "types": "./dist/jsx.d.ts"
+    }
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}