npm - @jamx-framework/renderer - Versions diffs - 0.1.0 → 1.0.0 - Mend

@jamx-framework/renderer 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +560 -0
package/package.json +37 -12
package/.turbo/turbo-build.log +0 -4
package/src/error/boundary.ts +0 -80
package/src/error/error-page.ts +0 -137
package/src/error/types.ts +0 -6
package/src/html/escape.ts +0 -90
package/src/html/serializer.ts +0 -161
package/src/index.ts +0 -33
package/src/jsx/jsx-runtime.ts +0 -247
package/src/pipeline/context.ts +0 -45
package/src/pipeline/renderer.ts +0 -138
package/test/unit/error/boundary.test.ts +0 -78
package/test/unit/error/error-page.test.ts +0 -63
package/test/unit/html/escape.test.ts +0 -34
package/test/unit/html/renderer.test.ts +0 -93
package/test/unit/html/serializer.test.ts +0 -141
package/tsconfig.json +0 -15
package/vitest.config.ts +0 -4

package/src/error/error-page.ts DELETED Viewed

@@ -1,137 +0,0 @@
-import type { RenderError } from "./types.js";
-/**
- * Renderiza una página de error HTML.
- * En producción no muestra el stack trace.
- */
-export function renderErrorPage(error: RenderError, isDev: boolean): string {
-  const title = errorTitle(error.statusCode);
-  const stack =
-    isDev && error.stack
-      ? `<pre class="stack">${escapeHtml(error.stack)}</pre>`
-      : "";
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${error.statusCode} — ${title}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f0f0f;
-      color: #e5e5e5;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .container {
-      max-width: 640px;
-      width: 100%;
-      padding: 2rem;
-    }
-    .code {
-      font-size: 6rem;
-      font-weight: 800;
-      color: #3b82f6;
-      line-height: 1;
-      letter-spacing: -4px;
-    }
-    .title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-top: 0.5rem;
-      color: #f5f5f5;
-    }
-    .message {
-      margin-top: 1rem;
-      color: #a3a3a3;
-      font-size: 0.95rem;
-      line-height: 1.6;
-    }
-    .path {
-      margin-top: 0.5rem;
-      font-size: 0.8rem;
-      color: #525252;
-      font-family: monospace;
-    }
-    .stack {
-      margin-top: 1.5rem;
-      padding: 1rem;
-      background: #171717;
-      border: 1px solid #262626;
-      border-radius: 8px;
-      font-size: 0.75rem;
-      color: #f87171;
-      overflow-x: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-      line-height: 1.6;
-    }
-    .divider {
-      margin-top: 2rem;
-      border: none;
-      border-top: 1px solid #262626;
-    }
-    .footer {
-      margin-top: 1rem;
-      font-size: 0.75rem;
-      color: #404040;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="code">${error.statusCode}</div>
-    <div class="title">${escapeHtml(title)}</div>
-    <div class="message">${escapeHtml(error.message)}</div>
-    ${error.path ? `<div class="path">${escapeHtml(error.path)}</div>` : ""}
-    ${stack}
-    <hr class="divider">
-    <div class="footer">JAMX Framework</div>
-  </div>
-</body>
-</html>`;
-}
-function errorTitle(statusCode: number): string {
-  switch (statusCode) {
-    case 400:
-      return "Bad Request";
-    case 401:
-      return "Unauthorized";
-    case 403:
-      return "Forbidden";
-    case 404:
-      return "Not Found";
-    case 422:
-      return "Unprocessable Entity";
-    case 500:
-      return "Internal Server Error";
-    case 503:
-      return "Service Unavailable";
-    default:
-      return statusCode >= 500 ? "Server Error" : "Client Error";
-  }
-}
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}

package/src/error/types.ts DELETED Viewed

@@ -1,6 +0,0 @@
-export interface RenderError {
-  statusCode: number;
-  message: string;
-  stack?: string | undefined;
-  path?: string | undefined;
-}

package/src/html/escape.ts DELETED Viewed

@@ -1,90 +0,0 @@
-// packages/renderer/src/html/escape.ts
-/**
- * Escapa caracteres especiales HTML para prevenir XSS.
- * Siempre usar esto al renderizar contenido de usuario.
- */
-export function escapeHtml(value: unknown): string {
-  const str = String(value);
-  let result = "";
-  for (let i = 0; i < str.length; i++) {
-    const char = str[i];
-    switch (char) {
-      case "&":
-        result += "&amp;";
-        break;
-      case "<":
-        result += "&lt;";
-        break;
-      case ">":
-        result += "&gt;";
-        break;
-      case '"':
-        result += "&quot;";
-        break;
-      case "'":
-        result += "&#39;";
-        break;
-      default:
-        result += char;
-    }
-  }
-  return result;
-}
-/**
- * Tags HTML que no tienen closing tag.
- */
-export const VOID_ELEMENTS = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-]);
-/**
- * Tags cuyo contenido se renderiza tal cual (sin escapar).
- */
-export const RAW_TEXT_ELEMENTS = new Set(["script", "style"]);
-/**
- * Atributos booleanos — se renderizan sin valor si son true.
- * Ej: <input disabled /> en lugar de <input disabled="true" />
- */
-export const BOOLEAN_ATTRIBUTES = new Set([
-  "allowfullscreen",
-  "async",
-  "autofocus",
-  "autoplay",
-  "checked",
-  "controls",
-  "default",
-  "defer",
-  "disabled",
-  "formnovalidate",
-  "hidden",
-  "ismap",
-  "loop",
-  "multiple",
-  "muted",
-  "nomodule",
-  "novalidate",
-  "open",
-  "readonly",
-  "required",
-  "reversed",
-  "selected",
-  "typemustmatch",
-]);

package/src/html/serializer.ts DELETED Viewed

@@ -1,161 +0,0 @@
-import {
-  escapeHtml,
-  VOID_ELEMENTS,
-  RAW_TEXT_ELEMENTS,
-  BOOLEAN_ATTRIBUTES,
-} from "./escape.js";
-import { Fragment } from "../jsx/jsx-runtime.js";
-import type {
-  JamxNode,
-  JamxElement,
-  ComponentFn,
-  Props,
-} from "../jsx/jsx-runtime.js";
-/**
- * Serializa un árbol JSX a una string HTML.
- *
- * Proceso:
- * 1. Si el nodo es un string/number → escapar y retornar
- * 2. Si el nodo es un componente (función) → llamarlo y serializar el resultado
- * 3. Si el nodo es un elemento HTML → serializar tag + props + children
- * 4. Si el nodo es un Fragment → serializar solo los children
- */
-export class HtmlSerializer {
-  serialize(node: JamxNode): string {
-    // Nodos primitivos
-    if (node === null || node === undefined || node === false) return "";
-    if (node === true) return "";
-    if (typeof node === "number") return String(node);
-    if (typeof node === "string") return escapeHtml(node);
-    // Arrays
-    if (Array.isArray(node)) {
-      return node.map((child) => this.serialize(child)).join("");
-    }
-    // Elemento JSX
-    return this.serializeElement(node);
-  }
-  private serializeElement(element: JamxElement): string {
-    const { type, props } = element;
-    // Componente funcional — ejecutar y serializar el resultado
-    if (typeof type === "function") {
-      return this.serializeComponent(type, props);
-    }
-    // Fragment — solo los hijos
-    if (type === Fragment) {
-      return this.serializeChildren(props.children);
-    }
-    // Elemento HTML
-    return this.serializeHtmlElement(type, props);
-  }
-  private serializeComponent(fn: ComponentFn, props: Props): string {
-    try {
-      const result = fn(props);
-      return this.serialize(result);
-    } catch (err) {
-      throw new Error(
-        `Error rendering component '${fn.name || "anonymous"}': ${String(err)}`,
-      );
-    }
-  }
-  private serializeHtmlElement(tag: string, props: Props): string {
-    const { children, ...attrs } = props;
-    const attrString = this.serializeAttributes(attrs);
-    const openTag = attrString ? `<${tag} ${attrString}>` : `<${tag}>`;
-    // Elementos void — no tienen closing tag ni children
-    if (VOID_ELEMENTS.has(tag)) {
-      return openTag;
-    }
-    // Elementos con contenido raw (script, style)
-    if (RAW_TEXT_ELEMENTS.has(tag)) {
-      const rawContent = typeof children === "string" ? children : "";
-      return `${openTag}${rawContent}</${tag}>`;
-    }
-    const childrenHtml = this.serializeChildren(children);
-    return `${openTag}${childrenHtml}</${tag}>`;
-  }
-  private serializeAttributes(attrs: Record<string, unknown>): string {
-    const parts: string[] = [];
-    for (const [key, value] of Object.entries(attrs)) {
-      // Ignorar atributos internos y undefined/null
-      if (key === "key" || value === undefined || value === null) continue;
-      // className → class
-      const attrName =
-        key === "className"
-          ? "class"
-          : key === "htmlFor"
-            ? "for"
-            : key === "tabIndex"
-              ? "tabindex"
-              : camelToKebab(key);
-      // Atributos booleanos
-      if (BOOLEAN_ATTRIBUTES.has(attrName)) {
-        if (value === true) parts.push(attrName);
-        continue;
-      }
-      // style como objeto
-      if (key === "style" && typeof value === "object" && value !== null) {
-        const styleStr = this.serializeStyle(value as Record<string, string>);
-        if (styleStr) parts.push(`style="${escapeHtml(styleStr)}"`);
-        continue;
-      }
-      // false → omitir el atributo
-      if (value === false) continue;
-      // true → atributo sin valor (no booleano, ej: data-active)
-      if (value === true) {
-        parts.push(attrName);
-        continue;
-      }
-      parts.push(`${attrName}="${escapeHtml(value)}"`);
-    }
-    return parts.join(" ");
-  }
-  private serializeStyle(style: Record<string, string>): string {
-    return Object.entries(style)
-      .map(([prop, value]) => `${camelToKebab(prop)}: ${value}`)
-      .join("; ");
-  }
-  private serializeChildren(children: unknown): string {
-    if (children === undefined || children === null) return "";
-    if (Array.isArray(children)) {
-      return children
-        .map((child) => this.serialize(child as JamxNode))
-        .join("");
-    }
-    return this.serialize(children as JamxNode);
-  }
-}
-// ── HELPERS ───────────────────────────────────────────────────────────────
-/**
- * Convierte camelCase a kebab-case para atributos HTML.
- * backgroundColor → background-color
- * dataTestId → data-test-id (los data- ya vienen bien)
- */
-function camelToKebab(str: string): string {
-  return str.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-}

package/src/index.ts DELETED Viewed

@@ -1,33 +0,0 @@
-export { SSRRenderer } from "./pipeline/renderer.js";
-export { HtmlSerializer } from "./html/serializer.js";
-export {
-  escapeHtml,
-  VOID_ELEMENTS,
-  BOOLEAN_ATTRIBUTES,
-} from "./html/escape.js";
-export { jsx, jsxs, jsxDEV, Fragment } from "./jsx/jsx-runtime.js";
-export type {
-  JamxNode,
-  JamxElement,
-  ComponentFn,
-  Props,
-  JSX,
-  HtmlAttributes,
-} from "./jsx/jsx-runtime.js";
-export type {
-  RenderContext,
-  RenderResult,
-  PageHead,
-} from "./pipeline/context.js";
-export type {
-  PageComponentLike,
-  LayoutComponentLike,
-} from "./pipeline/renderer.js";
-export { ErrorBoundary } from "./error/boundary.js";
-export { renderErrorPage } from "./error/error-page.js";
-export type { RenderError } from "./error/types.js";
-export type { BoundaryOptions, BoundaryResult } from "./error/boundary.js";

package/src/jsx/jsx-runtime.ts DELETED Viewed

@@ -1,247 +0,0 @@
-// ── TIPOS DEL ÁRBOL JSX ───────────────────────────────────────────────────
-export type JamxNode =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | JamxElement
-  | JamxNode[];
-export interface JamxElement {
-  type: string | ComponentFn;
-  props: Props;
-  key: string | null;
-}
-export type Props = Record<string, unknown> & {
-  children?: JamxNode | JamxNode[];
-};
-export type ComponentFn = (props: Props) => JamxNode;
-// ── JSX RUNTIME ───────────────────────────────────────────────────────────
-/**
- * Función principal del JSX runtime.
- * TypeScript llama esto cuando encuentra <Tag prop="value" />
- *
- * En lugar de React.createElement, JAMX usa esta función
- * para construir el árbol de nodos que luego serializa a HTML.
- */
-export function jsx(
-  type: string | ComponentFn,
-  props: Props,
-  key?: string,
-): JamxElement {
-  return {
-    type,
-    props: props ?? {},
-    key: key ?? null,
-  };
-}
-/**
- * Versión para elementos con múltiples hijos.
- * TypeScript la usa cuando hay más de un hijo.
- */
-export const jsxs = jsx;
-/**
- * Versión dev con información adicional para debugging.
- * En producción es igual a jsx.
- */
-export const jsxDEV = jsx;
-/**
- * Fragment — permite retornar múltiples elementos sin wrapper.
- * Uso: <> <div/> <div/> </>
- */
-export const Fragment = "jamx.fragment" as const;
-// ── TIPOS GLOBALES JSX ────────────────────────────────────────────────────
-/**
- * Declaraciones de tipos para que TypeScript entienda el JSX de JAMX.
- * Estas interfaces definen qué props acepta cada elemento HTML.
- */
-export namespace JSX {
-  export type Element = JamxElement;
-  export interface ElementChildrenAttribute {
-    children: JamxNode | JamxNode[];
-  }
-  export interface IntrinsicElements {
-    // Document
-    html: HtmlAttributes & { lang?: string };
-    head: HtmlAttributes;
-    body: HtmlAttributes;
-    title: HtmlAttributes;
-    meta: MetaAttributes;
-    link: LinkAttributes;
-    script: ScriptAttributes;
-    style: HtmlAttributes;
-    // Sections
-    main: HtmlAttributes;
-    header: HtmlAttributes;
-    footer: HtmlAttributes;
-    nav: HtmlAttributes;
-    section: HtmlAttributes;
-    article: HtmlAttributes;
-    aside: HtmlAttributes;
-    // Headings
-    h1: HtmlAttributes;
-    h2: HtmlAttributes;
-    h3: HtmlAttributes;
-    h4: HtmlAttributes;
-    h5: HtmlAttributes;
-    h6: HtmlAttributes;
-    // Text
-    p: HtmlAttributes;
-    span: HtmlAttributes;
-    strong: HtmlAttributes;
-    em: HtmlAttributes;
-    small: HtmlAttributes;
-    code: HtmlAttributes;
-    pre: HtmlAttributes;
-    // Lists
-    ul: HtmlAttributes;
-    ol: HtmlAttributes;
-    li: HtmlAttributes;
-    // Interactive
-    a: AnchorAttributes;
-    button: ButtonAttributes;
-    input: InputAttributes;
-    textarea: TextareaAttributes;
-    select: HtmlAttributes;
-    option: HtmlAttributes & { value?: string; selected?: boolean };
-    form: FormAttributes;
-    label: HtmlAttributes & { for?: string; htmlFor?: string };
-    // Media
-    img: ImgAttributes;
-    video: HtmlAttributes & {
-      src?: string;
-      controls?: boolean;
-      autoplay?: boolean;
-    };
-    audio: HtmlAttributes & { src?: string; controls?: boolean };
-    canvas: HtmlAttributes & { width?: number; height?: number };
-    // Layout
-    div: HtmlAttributes;
-    table: HtmlAttributes;
-    thead: HtmlAttributes;
-    tbody: HtmlAttributes;
-    tr: HtmlAttributes;
-    th: HtmlAttributes & { colSpan?: number; rowSpan?: number };
-    td: HtmlAttributes & { colSpan?: number; rowSpan?: number };
-    // Misc
-    br: HtmlAttributes;
-    hr: HtmlAttributes;
-    slot: HtmlAttributes & { name?: string };
-    // Generic fallback
-    [tag: string]: HtmlAttributes;
-  }
-}
-// ── TIPOS DE ATRIBUTOS ────────────────────────────────────────────────────
-export interface HtmlAttributes {
-  id?: string;
-  class?: string;
-  className?: string;
-  style?: string | Record<string, string>;
-  children?: JamxNode | JamxNode[];
-  // Data attributes
-  [key: `data-${string}`]: string | undefined;
-  // ARIA
-  role?: string;
-  "aria-label"?: string;
-  "aria-hidden"?: boolean;
-  "aria-expanded"?: boolean;
-  "aria-disabled"?: boolean;
-  "aria-selected"?: boolean;
-  "aria-controls"?: string;
-  "aria-describedby"?: string;
-  tabIndex?: number;
-}
-export interface AnchorAttributes extends HtmlAttributes {
-  href?: string;
-  target?: "_blank" | "_self" | "_parent" | "_top";
-  rel?: string;
-  download?: boolean | string;
-}
-export interface ButtonAttributes extends HtmlAttributes {
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  name?: string;
-  value?: string;
-}
-export interface InputAttributes extends HtmlAttributes {
-  type?: string;
-  name?: string;
-  value?: string | number;
-  placeholder?: string;
-  required?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  checked?: boolean;
-  min?: string | number;
-  max?: string | number;
-  step?: string | number;
-  pattern?: string;
-  autocomplete?: string;
-}
-export interface TextareaAttributes extends HtmlAttributes {
-  name?: string;
-  rows?: number;
-  cols?: number;
-  placeholder?: string;
-  required?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-}
-export interface FormAttributes extends HtmlAttributes {
-  action?: string;
-  method?: "get" | "post";
-  enctype?: string;
-}
-export interface ImgAttributes extends HtmlAttributes {
-  src?: string;
-  alt?: string;
-  width?: number | string;
-  height?: number | string;
-  loading?: "lazy" | "eager";
-}
-export interface MetaAttributes extends HtmlAttributes {
-  name?: string;
-  content?: string;
-  charset?: string;
-  httpEquiv?: string;
-  property?: string;
-  "http-equiv"?: string;
-}
-export interface LinkAttributes extends HtmlAttributes {
-  rel?: string;
-  href?: string;
-  type?: string;
-  media?: string;
-  as?: string;
-}
-export interface ScriptAttributes extends HtmlAttributes {
-  src?: string;
-  type?: string;
-  async?: boolean;
-  defer?: boolean;
-  module?: boolean;
-}