proxyjs-web 0.1.0-beta

package/src/dom/render.js

@@ -0,0 +1,354 @@
+import { isFunction, isPrimitive } from "../utils/is.js";
+import { effect } from "../core/reactive.js";
+import { setCurrentComponent } from "../hooks/newState.js";
+import { Fragment } from "./createElement.js";
+
+export function render(vnode, container) {
+  const oldVnode = container.__vnode;
+  if (oldVnode == null) {
+    const el = mount(vnode, container);
+    container.__vnode = vnode;
+    container.appendChild(el);
+  } else {
+    container.innerHTML = "";
+    container.__vnode = null;
+    const el = mount(vnode, container);
+    container.__vnode = vnode;
+    container.appendChild(el);
+  }
+}
+
+function mount(vnode, parentEl, errorHandler) {
+  if (vnode == null) return document.createTextNode("");
+
+  if (isPrimitive(vnode)) {
+    return document.createTextNode(String(vnode));
+  }
+
+  if (isFunction(vnode)) {
+    const textNode = document.createTextNode("");
+    effect(() => {
+      textNode.textContent = vnode();
+    });
+    return textNode;
+  }
+
+  if (vnode.type === Fragment) {
+    return mountFragment(vnode, parentEl, errorHandler);
+  }
+
+  if (isFunction(vnode.type)) {
+    return mountComponent(vnode, parentEl, errorHandler);
+  }
+
+  return mountElement(vnode, errorHandler);
+}
+
+function mountElement(vnode, errorHandler) {
+  const isErrorBoundary = vnode.props?.__errorBoundary;
+  const fallback = vnode.props?.__fallback;
+
+  const el = document.createElement(vnode.type);
+
+  const cleanProps = { ...vnode.props };
+  delete cleanProps.__errorBoundary;
+  delete cleanProps.__fallback;
+  patchProps(el, {}, cleanProps);
+
+  const children = normalizeChildren(vnode.children);
+
+  const boundaryHandler = isErrorBoundary
+    ? (err) => {
+        console.error("[ProxyJS] Erro capturado pelo ErrorBoundary:", err);
+        el.innerHTML = "";
+        const fallbackVnode = fallback
+          ? fallback(err)
+          : {
+              type: "div",
+              props: {
+                style:
+                  "padding:1rem;background:#fee2e2;color:#991b1b;border-radius:6px;font-family:monospace",
+              },
+              children: [
+                { type: "strong", props: {}, children: ["⚠ Algo deu errado"] },
+                {
+                  type: "p",
+                  props: {},
+                  children: [err.message || String(err)],
+                },
+              ],
+            };
+        el.appendChild(mount(fallbackVnode, el, null));
+      }
+    : errorHandler;
+
+  children.forEach((child) => {
+    if (child == null) return;
+    try {
+      el.appendChild(mount(child, el, boundaryHandler));
+    } catch (err) {
+      if (boundaryHandler) {
+        boundaryHandler(err);
+      } else {
+        throw err;
+      }
+    }
+  });
+
+  el.__vnode = vnode;
+  return el;
+}
+
+function mountFragment(vnode, parentEl, errorHandler) {
+  const anchor = document.createComment("fragment");
+  parentEl.appendChild(anchor);
+
+  const children = normalizeChildren(vnode.children);
+  children.forEach((child) => {
+    if (child == null) return;
+    parentEl.insertBefore(mount(child, parentEl, errorHandler), anchor);
+  });
+
+  anchor.__vnode = vnode;
+  return anchor;
+}
+
+function mountComponent(vnode, parentEl, errorHandler) {
+  const instance = {
+    __hooks: [],
+    __hookIndex: 0,
+    vnode,
+    el: null,
+  };
+
+  const el = runComponent(instance, vnode, parentEl, errorHandler);
+  instance.el = el;
+  el.__componentInstance = instance;
+  return el;
+}
+
+function runComponent(instance, vnode, parentEl, errorHandler) {
+  instance.__hookIndex = 0;
+  setCurrentComponent(instance);
+  try {
+    const childVnode = vnode.type({ ...vnode.props, children: vnode.children });
+    setCurrentComponent(null);
+    return mount(childVnode, parentEl, errorHandler);
+  } catch (err) {
+    setCurrentComponent(null);
+    if (errorHandler) {
+      errorHandler(err);
+      return document.createTextNode("");
+    }
+    console.error(
+      `[ProxyJS] Erro no componente "${vnode.type.name || "Anônimo"}":`,
+      err,
+    );
+    throw err;
+  }
+}
+
+function patch(parentEl, oldVnode, newVnode) {
+  if (sameVnode(oldVnode, newVnode)) {
+    if (isPrimitive(newVnode) || isFunction(newVnode)) {
+      const el = findDomNode(parentEl, oldVnode);
+      if (el && el.nodeType === Node.TEXT_NODE && isPrimitive(newVnode)) {
+        if (el.textContent !== String(newVnode)) {
+          el.textContent = String(newVnode);
+        }
+      }
+      return el;
+    }
+    if (isFunction(newVnode.type)) {
+      return patchComponent(parentEl, oldVnode, newVnode);
+    }
+    return patchElement(parentEl, oldVnode, newVnode);
+  }
+
+  const oldEl = findDomNode(parentEl, oldVnode);
+  const newEl = mount(newVnode, parentEl);
+
+  if (
+    oldEl &&
+    oldEl.parentNode === parentEl &&
+    oldEl.nodeType !== Node.COMMENT_NODE
+  ) {
+    parentEl.replaceChild(newEl, oldEl);
+  } else if (oldEl && oldEl.nodeType === Node.COMMENT_NODE) {
+    oldEl.parentNode.insertBefore(newEl, oldEl);
+    oldEl.parentNode.removeChild(oldEl);
+  } else {
+    parentEl.appendChild(newEl);
+  }
+  return newEl;
+}
+
+function patchElement(parentEl, oldVnode, newVnode) {
+  const el = parentEl.querySelector
+    ? Array.from(parentEl.childNodes).find((n) => n.__vnode === oldVnode) ||
+      parentEl.firstChild
+    : parentEl;
+
+  if (!el) return mount(newVnode, parentEl);
+
+  patchProps(el, oldVnode.props || {}, newVnode.props || {});
+  patchChildren(el, oldVnode.children || [], newVnode.children || []);
+
+  el.__vnode = newVnode;
+  return el;
+}
+
+function patchComponent(parentEl, oldVnode, newVnode) {
+  const oldEl = findDomNode(parentEl, oldVnode);
+  if (!oldEl) return mount(newVnode, parentEl);
+
+  const instance = oldEl.__componentInstance;
+  if (!instance) {
+    const newEl = mount(newVnode, parentEl);
+    parentEl.replaceChild(newEl, oldEl);
+    return newEl;
+  }
+
+  instance.__hookIndex = 0;
+  setCurrentComponent(instance);
+  const childVnode = newVnode.type({
+    ...newVnode.props,
+    children: newVnode.children,
+  });
+  setCurrentComponent(null);
+
+  const newEl = mount(childVnode, parentEl);
+  parentEl.replaceChild(newEl, oldEl);
+  newEl.__componentInstance = instance;
+  instance.el = newEl;
+  return newEl;
+}
+
+function patchChildren(parentEl, oldChildren, newChildren) {
+  oldChildren = normalizeChildren(oldChildren);
+  newChildren = normalizeChildren(newChildren);
+
+  const hasKeys = newChildren.some((c) => c && c.props && c.props.key != null);
+
+  if (hasKeys) {
+    patchKeyedChildren(parentEl, oldChildren, newChildren);
+  } else {
+    patchUnkeyedChildren(parentEl, oldChildren, newChildren);
+  }
+}
+
+function patchKeyedChildren(parentEl, oldChildren, newChildren) {
+  const oldKeyMap = new Map();
+  const oldDomNodes = Array.from(parentEl.childNodes);
+
+  oldChildren.forEach((child, i) => {
+    if (child && child.props && child.props.key != null) {
+      oldKeyMap.set(child.props.key, { vnode: child, el: oldDomNodes[i] });
+    }
+  });
+
+  const newDomNodes = [];
+
+  newChildren.forEach((newChild) => {
+    if (newChild == null) return;
+    const key = newChild.props?.key;
+
+    if (key != null && oldKeyMap.has(key)) {
+      const { vnode: oldChild, el: oldEl } = oldKeyMap.get(key);
+      if (sameVnode(oldChild, newChild)) {
+        patchElement(parentEl, oldChild, newChild);
+        newDomNodes.push(oldEl);
+      } else {
+        const newEl = mount(newChild, parentEl);
+        parentEl.replaceChild(newEl, oldEl);
+        newDomNodes.push(newEl);
+      }
+      oldKeyMap.delete(key);
+    } else {
+      const newEl = mount(newChild, parentEl);
+      newDomNodes.push(newEl);
+    }
+  });
+
+  oldKeyMap.forEach(({ el }) => {
+    if (el && el.parentNode === parentEl) {
+      parentEl.removeChild(el);
+    }
+  });
+
+  newDomNodes.forEach((el) => {
+    parentEl.appendChild(el);
+  });
+}
+
+function patchUnkeyedChildren(parentEl, oldChildren, newChildren) {
+  const domNodes = Array.from(parentEl.childNodes);
+  const max = Math.max(oldChildren.length, newChildren.length);
+
+  for (let i = 0; i < max; i++) {
+    const oldChild = oldChildren[i];
+    const newChild = newChildren[i];
+
+    if (newChild == null) {
+      if (domNodes[i] && domNodes[i].parentNode === parentEl) {
+        parentEl.removeChild(domNodes[i]);
+      }
+    } else if (oldChild == null) {
+      parentEl.appendChild(mount(newChild, parentEl));
+    } else {
+      patch(parentEl, oldChild, newChild);
+    }
+  }
+}
+
+function patchProps(el, oldProps, newProps) {
+  for (const key in oldProps) {
+    if (key === "key") continue;
+    if (!(key in newProps)) {
+      if (key.startsWith("on") && isFunction(oldProps[key])) {
+        el.removeEventListener(key.slice(2).toLowerCase(), oldProps[key]);
+      } else {
+        el.removeAttribute(key);
+      }
+    }
+  }
+
+  for (const key in newProps) {
+    if (key === "key") continue;
+    const newVal = newProps[key];
+    const oldVal = oldProps[key];
+
+    if (newVal === oldVal) continue;
+
+    if (key.startsWith("on") && isFunction(newVal)) {
+      if (oldVal) el.removeEventListener(key.slice(2).toLowerCase(), oldVal);
+      el.addEventListener(key.slice(2).toLowerCase(), newVal);
+    } else if (newVal == null) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, newVal);
+    }
+  }
+}
+
+function sameVnode(a, b) {
+  if (isPrimitive(a) && isPrimitive(b)) return true;
+  if (isFunction(a) && isFunction(b)) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  return a.type === b.type && a.props?.key === b.props?.key;
+}
+
+function normalizeChildren(children) {
+  if (!children) return [];
+  return Array.isArray(children) ? children.flat(Infinity) : [children];
+}
+
+function findDomNode(parentEl, vnode) {
+  const nodes = Array.from(parentEl.childNodes);
+  return nodes.find((n) => n.__vnode === vnode) || nodes[0] || null;
+}
+
+export function renderTemplate(template, container) {
+  container.innerHTML = template;
+}

package/src/dom/renderTemplate.js

@@ -0,0 +1,3 @@
+export function renderTemplate(template, container) {
+  container.innerHTML = template;
+}

package/src/hooks/README.md

@@ -0,0 +1,173 @@
+# Hooks — ProxyJS
+
+Hooks são funções especiais que permitem usar estado e outros recursos do ProxyJS dentro de componentes funcionais. No ProxyJS, todos os hooks seguem uma convenção própria: **sempre começam com `new`**.
+
+---
+
+## Regras dos hooks
+
+**1. Sempre começam com `new`**
+
+Todo hook do ProxyJS começa com o prefixo `new`. Isso diferencia os hooks do ProxyJS de funções comuns e de hooks de outras bibliotecas.
+
+```js
+newState(0)       // ✅
+newNavigate()     // ✅
+useState(0)       // ❌ não é ProxyJS
+useNavigate()     // ❌ não é ProxyJS
+```
+
+**2. Só podem ser chamados dentro de componentes funcionais**
+
+Hooks dependem do contexto do componente atual. Chamá-los fora de um componente vai lançar um erro.
+
+```js
+// ✅ correto
+function App() {
+  const [count, setCount] = newState(0);
+  return html.p(count);
+}
+
+// ❌ errado — fora de um componente
+const [count, setCount] = newState(0);
+```
+
+**3. Sempre chamados no topo do componente**
+
+Nunca chame hooks dentro de condicionais, loops ou funções aninhadas. A ordem de chamada precisa ser a mesma em todo render.
+
+```js
+// ✅ correto
+function App() {
+  const [count, setCount] = newState(0);
+  const [nome, setNome] = newState("Arthur");
+  return html.div(html.p(count), html.p(nome));
+}
+
+// ❌ errado — hook dentro de condicional
+function App() {
+  if (algumaCoisa) {
+    const [count, setCount] = newState(0); // nunca faça isso
+  }
+}
+```
+
+---
+
+## Hooks disponíveis
+
+### `newState(initialValue)`
+
+O hook principal do ProxyJS. Cria um estado local por instância de componente. Retorna `[getter, setter]`.
+
+```js
+function Contador() {
+  const [count, setCount] = newState(0);
+
+  return html.div(
+    html.p(count),
+    html.button({ onClick: () => setCount(count() + 1) }, "+"),
+    html.button({ onClick: () => setCount(count() - 1) }, "-")
+  );
+}
+```
+
+O getter é uma função — sempre chame com `()` para ler o valor. Para passar o valor como filho reativo de um elemento, passe o getter sem chamar:
+
+```js
+html.p(count)     // ✅ reativo
+html.p(count())   // ❌ estático
+```
+
+Multiplos estados no mesmo componente:
+
+```js
+function Formulario() {
+  const [nome, setNome] = newState("");
+  const [email, setEmail] = newState("");
+  const [idade, setIdade] = newState(0);
+
+  return html.div(
+    html.input({ onInput: (e) => setNome(e.target.value) }),
+    html.input({ onInput: (e) => setEmail(e.target.value) }),
+    html.input({ type: "number", onInput: (e) => setIdade(Number(e.target.value)) })
+  );
+}
+```
+
+---
+
+### `newNavigate()`
+
+Retorna a função `navigate` do router. Permite navegar entre rotas de dentro de um componente.
+
+```js
+import { newNavigate, html } from "./src/index.js";
+
+function Home() {
+  const navigate = newNavigate();
+
+  return html.div(
+    html.h1("Home"),
+    html.button({ onClick: () => navigate("/sobre") }, "Ir para Sobre"),
+    html.button({ onClick: () => navigate("/user/42") }, "Ver usuário 42")
+  );
+}
+```
+
+> `newNavigate` só faz sentido quando a aplicação usa `createRouter`. Fora desse contexto, importe o `navigate` diretamente.
+
+---
+
+## Criando seus próprios hooks
+
+Você pode compor hooks existentes para criar hooks reutilizáveis. A única regra é que o nome deve começar com `new` e o hook só pode ser chamado dentro de componentes.
+
+```js
+function newContador(inicial = 0) {
+  const [count, setCount] = newState(inicial);
+  const incrementar = () => setCount(count() + 1);
+  const decrementar = () => setCount(count() - 1);
+  const resetar = () => setCount(inicial);
+  return { count, incrementar, decrementar, resetar };
+}
+
+function App() {
+  const { count, incrementar, decrementar, resetar } = newContador(10);
+
+  return html.div(
+    html.p(count),
+    html.button({ onClick: incrementar }, "+"),
+    html.button({ onClick: decrementar }, "-"),
+    html.button({ onClick: resetar }, "Reset")
+  );
+}
+```
+
+Outro exemplo — hook de toggle:
+
+```js
+function newToggle(inicial = false) {
+  const [value, setValue] = newState(inicial);
+  const toggle = () => setValue(!value());
+  return [value, toggle];
+}
+
+function App() {
+  const [aberto, toggleAberto] = newToggle();
+
+  return html.div(
+    html.button({ onClick: toggleAberto }, "Alternar"),
+    html.p(() => aberto() ? "Aberto" : "Fechado")
+  );
+}
+```
+
+---
+
+## Resumo
+
+| Hook | Retorna | Onde usar |
+|------|---------|-----------|
+| `newState(initial)` | `[getter, setter]` | Dentro de componentes |
+| `newNavigate()` | `navigate(path)` | Dentro de componentes com router |

package/src/hooks/newNavigate.js

@@ -0,0 +1,65 @@
+import { reactive } from "../core/reactive.js";
+
+function normalizePath() {
+  const hash = window.location.hash;
+  if (hash.startsWith("#/")) return hash.slice(1);
+  if (hash.startsWith("#")) return "/" + hash.slice(1);
+  return "/";
+}
+
+const state = reactive({
+  path: normalizePath(),
+});
+
+window.addEventListener("hashchange", () => {
+  state.path = normalizePath();
+});
+
+function navigate(path) {
+  window.location.hash = "#" + path;
+  state.path = path;
+}
+
+function matchRoute(pattern, path) {
+  const paramNames = [];
+  const regexStr = pattern
+    .replace(/:([^/]+)/g, (_, name) => {
+      paramNames.push(name);
+      return "([^/]+)";
+    })
+    .replace(/\*/g, ".*");
+
+  const regex = new RegExp(`^${regexStr}$`);
+  const match = path.match(regex);
+  if (!match) return null;
+
+  const params = {};
+  paramNames.forEach((name, i) => {
+    params[name] = match[i + 1];
+  });
+  return params;
+}
+
+export function createRouter(routes) {
+  return function Router() {
+    const path = state.path;
+    console.log("Router executou, path:", path);
+    for (const route of routes) {
+      const params = matchRoute(route.path, path);
+      if (params !== null) {
+        return route.component({ params });
+      }
+    }
+    return null;
+  };
+}
+
+export { navigate };
+
+export function newNavigate() {
+  return navigate;
+}
+
+export function currentPath() {
+  return state.path;
+}

package/src/hooks/newState.js

@@ -0,0 +1,28 @@
+import { reactive } from "../core/reactive.js";
+
+let currentComponent = null;
+
+export function setCurrentComponent(component) {
+  currentComponent = component;
+}
+
+export function getCurrentComponent() {
+  return currentComponent;
+}
+export function newState(initial) {
+  const component = currentComponent;
+  if (!component) {
+    throw new Error("newState deve ser chamado dentro de um componente funcional.");
+  }
+
+  const index = component.__hookIndex++;
+  if (component.__hooks[index] === undefined) {
+    const state = reactive({ value: initial });
+    component.__hooks[index] = state;
+  }
+
+  const state = component.__hooks[index];
+  const get = () => state.value;
+  const set = (newValue) => { state.value = newValue; };
+  return [get, set];
+}

package/src/index.js

@@ -0,0 +1,26 @@
+export { reactive, effect } from "./core/reactive.js";
+export { createStyle } from "./core/createStyle.js";
+export { computed } from "./core/computed.js";
+export { ErrorBoundary } from "./core/errorBoundary.js";
+export { createRoot, renderToRoot } from "./core/createRoot.js";
+export { createElement, Fragment } from "./dom/createElement.js";
+export { default as html, registerComponent } from "./dom/html.js";
+export {
+  createRouter,
+  navigate,
+  newNavigate,
+  currentPath,
+} from "./hooks/newNavigate.js";
+export { newState } from "./hooks/newState.js";
+
+import { createElement, Fragment } from "./dom/createElement.js";
+import { ErrorBoundary } from "./core/errorBoundary.js";
+import { registerComponent } from "./dom/html.js";
+
+registerComponent("ErrorBoundary", ErrorBoundary);
+
+const ProxyJS = {
+  fragment: (...children) => createElement(Fragment, {}, ...children),
+};
+
+export default ProxyJS;

package/src/utils/is.js

@@ -0,0 +1,11 @@
+export function isFunction(value) {
+  return typeof value === "function";
+}
+
+export function isObject(value) {
+  return value !== null && typeof value === "object";
+}
+
+export function isPrimitive(value) {
+  return typeof value === "string" || typeof value === "number";
+}