ydomjs

v1.0.2

Published

a month ago

Agnostic engine to parse ydom to html

Downloads

0High
0Medium
0Low

joguel96

ydom engine

YDOM - YAML DOM Engine

YDOM (YAML DOM) es un compilador 100% agnóstico y superligero, diseñado para escribir interfaces web reactivas y hermosas, sin el estrés sintáctico del HTML tradicional ni el extremado peso de los frameworks con Virtual DOM (React, Vue).

Con YDOM, escribes tus componentes utilizando la suavidad estructural de YAML (indentaciones limpias), y el Motor de Reconciliación Nativa se encarga del renderizado interactivo, eventos JS y preservación de estados en tiempo real manipulando únicamente los HTMLElements puros.

⚡ La Experiencia de YDOM

Di adiós al enjambre de etiquetas HTML: <div class="...">...</div> se transforma en:

div:
  (class="contenedor")
  h1: "Bienvenido a YDOM!"
  button:
    (@click="invocarClick")
    (:class="btnCSSClass")
    "Aceptar"

✅ Cero Virtual DOM pesado. Motor de Reconciliación (Patching In-Place). ✅ Reactividad Nativa Transparente (Cero hooks, usa this.variable). ✅ Soporte HTML5 Web Components. ✅ Agnóstico: Úsalo con Vite, Express, Vanilla JS o dentro de otras librerías.

📦 Instalación

En tu proyecto NPM:

npm install ydom

Si usas Vite, YDOM incluye un Plugin Oficial para cargar nativamente archivos .ydom. Modifica tu vite.config.ts:

import { defineConfig } from 'vite';
import { ydom } from 'ydom/plugin'; // O en local: import { ydom } from './lib/vite-plugin'

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

Asegúrate de agregar este typing en un archivo temporal (ej. env.d.ts) de tu carpeta raíz si estás usando TypeScript:

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

🚀 Uso Rápido (El Patrón Web Component)

YDOM brilla al convertir tus archivos TypeScript estándar en Clases Web Nativas (Custom Elements). Esta es la forma oficial y recomendada de consumir YDOM en un proyecto frontend.

1. El Componente Gráfico (`login.ydom`)

Crea tu interfaz.

Los atributos se enmarcan entre paréntesis estáticos en la línea inmediatamente debajo. (id="box").
Para Unir variables JS prefija la clave con dos puntos: (:value="miVariable").
Para Unir eventos JS prefija la clave con arroba: (@input="leerDato").

div:
  (class="modal-login")
  h3: (:textContent="tituloPersonalizado")
  input:
    (
      type="text"
      placeholder="Tu nombre aqui"
      @input="escribirNombre"
      :value="nombre"
    )
  button:
    (class="btn")
    (@click="saludar")
    "Entrar"

2. El Controlador Lógico (`login.ts`)

Aquí es donde ocurre la magia pura. Simplemente hereda de la clase abstracta YDOMElement, y enlaza el archivo gráfico en su static template.

import { YDOMElement } from 'ydom';
import template from './login.ydom';

// Hereda las facultades HTMLElement Reactivas de YDOM
export class MiLogin extends YDOMElement {
	static template = template;

	// ¡Cualquier variable de Instancia ya está enlazada al DOM!
	tituloPersonalizado = 'Ingreso Seguro';
	nombre = '';

	// Evento @input invocado
	escribirNombre(event: Event) {
		this.nombre = (event.target as HTMLInputElement).value;
	}

	// Evento @click invocado
	saludar() {
		this.tituloPersonalizado = `Hola de nuevo, ${this.nombre}`;
	}
}

// Lo registramos en HTML5 estándar (Pura transparencia del framework)
customElements.define('mi-login', MiLogin);

3. ¡Despliega! (`index.html`)

Ya sea quemado directamente o invocado desde JS, YDOM corre mágicamente.

<body>
	<mi-login></mi-login>
</body>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

YDOM - YAML DOM Engine

⚡ La Experiencia de YDOM

📦 Instalación

🚀 Uso Rápido (El Patrón Web Component)

1. El Componente Gráfico (login.ydom)

2. El Controlador Lógico (login.ts)

3. ¡Despliega! (index.html)

📄 License

1. El Componente Gráfico (`login.ydom`)

2. El Controlador Lógico (`login.ts`)

3. ¡Despliega! (`index.html`)