ydom-core

ydom-core es el motor reactivo interno, parser AST y plugin de compilación de plantillas para el ecosistema YDOM. Es un paquete agnóstico y superligero diseñado para transformar plantillas .ydom (YAML-based DOM) en sintaxis AST y renderizar nodos HTML nativos con reactividad basada en Deep Signals y reconciliación delimitada por anchors.

Este paquete sirve como el motor fundamental sobre el cual se construye ydomjs.

⚡ Características Principales

• Lexer & Parser AST Integrado: Convierte sintaxis .ydom en un Árbol de Sintaxis Abstracta (AST) optimizado.
• Motor de Reconciliación por Anchors (Comentarios de Anclaje): Manipulación de nodos en el DOM físico mediante comentarios delimitadores (<!--ydom:if-start-->, <!--ydom:for-start-->) aislados y eficientes.
• Sistema de Reactividad por Deep Signals: Reactividad automática transparente para arrays, objetos y atributos mediante proxys profundos y loteo de actualizaciones (batch updates).
• Soporte de Web Components (YDOMElement): Facilita la creación de Custom Elements nativos en el navegador.
• Plugin de Compilación Oficial para Vite (ydom-core/vite-plugin): Permite importar archivos .ydom directamente en proyectos TypeScript/JavaScript.

📦 Instalación

En tu proyecto NPM:

npm install ydom-core

🚀 Uso del Motor y Plugin de Vite

1. Configuración del Plugin de Vite

En tu vite.config.ts:

import { defineConfig } from 'vite';
import { ydom } from 'ydom-core/vite-plugin';

export default defineConfig({
  plugins: [ydom()]
});

2. Definición de Tipos para Plantillas .ydom

Agrega en tu archivo env.d.ts:

declare module '*.ydom' {
  const src: string;
  export default src;
}

3. Componente con YDOMElement

import { YDOMElement } from 'ydom-core';
import template from './mi-componente.ydom';

export class MiComponente extends YDOMElement {
  static template = template;

  nombre = 'Mundo';

  saludar() {
    this.nombre = 'YDOM Core';
  }
}

customElements.define('mi-componente', MiComponente);

📚 Documentación Técnica de Arquitectura

Para un desglose técnico detallado sobre cómo funciona el algoritmo de reconciliación mediante comentarios de anclaje (Anchors) y sincronización de bucles condicionales (@if, @for con :key), consulta la especificación oficial incluida en este paquete:

👉 Especificación Técnica de Reconciliación (ydom-reconciliation-anchors-v3.md)

📄 Licencia

MIT License. © joguel