Lenguajes - meme HTML

Introducción

Si bien HTML es un lenguaje de marcado sumamente capaz. A menudo podremos notar, que es "complicado" trabajar con él, ya que suele ser difícil de escribir por que tienes que declarar etiquetas de apertura y cierre, lo cual puede llevarte a un difícil mantenimiento, llegando al punto que tienes que depender de IDE's y extensiones, para poder hacer más llevadera su escritura y mantenimiento 😅, sin mencionar que la apariencia del código puede llegar a ser caótica, dejándonos con una enorme base de código confuso y difícil de comprender en un primer vistazo. Y por estas razones, meme-html simplifica el lenguaje para mejorar su uso en general.

Al momento de usar meme-html (en adelante lo mencionare con su extensión mh), debemos de tener 4 puntos muy claros:

1. Debemos dar por hecho que al escribir mh, estamos escribiendo código HTML simplificado, por lo que todas las etiquetas, reglas, convenciones, etc. Que ya usas en HTML, puedes aplicarlas sobre mh.
2. mh, no pretende de ninguna forma añadir funcionalidades de programación al lenguaje de HTML, por esto mismo, no esperes tener estructuras de control que te ayuden a escribir HTML. El compilador de meme.js, lo único que hace, es una transpilacion simple a HTML y nada más.
3. Considera que mh, es un lenguaje de indentación significativa, por lo que la indentación es parte de como declaramos el parentesco entre etiquetas.
4. En mh hay una instrucción por línea, es decir, una etiqueta por línea, que empieza con el nombre de esta etiqueta y termina con un carácter de finalización (\r o \n o / o ;).

A grandes rasgos, podemos ver a mh como un HTML, sin los caracteres < o > para abrir o cerrar etiquetas y sin etiquetas de cierre.

mh es un lenguaje con el que intento acercar HTML a JavaScript, sin perder de vista la simplicidad y funcionalidad, a tal nivel de que por ejemplo: es igual de fácil escribir documentación en mh que en markdown (md), pero mucho más enriquecido de funcionalidad que en este último.

Comentarios

En mh, tenemos los comentarios JS de toda la vida. Para comentarios de una sola línea utilizaremos la ya clásica doble barra (//), y para comentarios multilínea usaremos el igualmente clásico barra y asterisco (/*), para iniciar un comentario multilínea y asterisco y barra (*/), para concluirlo. Con esto logramos que mh se complemente perfectamente con meme-css y meme-js.

Etiquetas

Como comentaba, en mh podemos usar cualquier etiqueta o custom element de HTML, con las mismas reglas, salvo que no necesitamos el carácter (<), para comenzar a escribir la etiqueta.

Ahora bien, el compilador de meme.js tiene la posibilidad de resolver las dependencias a componentes de meme.js. En este caso para diferenciar un componente de meme.js del resto de componentes y etiquetas, usamos la notación lowerCamelCase o preferiblemente la notación snake_case, con lo que cualquier etiqueta escrita en cualquiera de estas dos notaciones, se dará por hecho que es un componente de meme.js.

A continuación, pongo un ejemplo de cómo escribimos la etiqueta h1, un custom element y un componente de meme.js:

h1
mi-custom-element
miComponenteMeme
mi_componente_meme

miComponenteMeme

mi_componente_meme

Complementos de Etiqueta

ID

Desde luego, puedes escribir el id de una etiqueta como un atributo HTML, como en cualquier etiqueta HTML, por ejemplo:

div id="mi_id_1"
a id=mi_id_2 href=#

Sin embargo, mh te permitirá escribir el id de la etiqueta junto a la misma y de manera más simple, únicamente anteponiendo el carácter #, por ejemplo:

#mi_id_1
a#mi_id_2 href=#

Clases

Igualmente, puedes escribir las clases como un atributo, por ejemplo:

div class="mi_clase_1 mi_clase_2"
a class="mi_clase_3 mi_clase_4" href=#

Y de igual forma, mh te permitirá escribir la clase de la etiqueta junto a la misma y de manera más simple, únicamente anteponiendo el carácter ., por ejemplo:

.mi_clase_1.mi_clase_2
a.mi_clase_3.mi_clase_4 href=#

Referencias

Las referencias son la forma en que podemos interactuar con los elementos HTML en los componentes de meme.js. Para declarar una referencia en mh lo haremos anteponiendo un asterisco a el que será el nombre de la referencia, por ejemplo:

*mi_ref_1
a*mi_ref_2 href=#

Atributos

Los atributos se escriben igual que en HTML, separados por espacios de línea ( , \t), y generalmente vienen en pares de nombre y valor: el nombre del atributo seguido de un signo igual = y el valor del atributo, que puede o no ser colocado entre comillas. Los valores de los atributos pueden ser palabras específicas, valores numéricos, booleanos (true/false), nulos (null), indefinidos (undefined), referencias JS o script’s, y con esto logramos configurar o ajustar el comportamiento o la apariencia del elemento mh en el que colocamos este atributo. Por ejemplo:

div atributo_1=valor_1 atributo_2=valor_2/
div atributo_1=true atributo_2=null;
div atributo_1=undefined atributo_2="cadena con más caracteres">cuerpo

Igualmente se aceptan caracteres de escape en los atributos, con lo que podríamos poner varios atributos en múltiples líneas, escapando el salto de línea, como se muestra a continuación:

div \
	att1=1.23 \
	att2=true \
	att3=null \
	att4=simple \
	att5="cadena con espacios" \
	att6={*[1, 2, 3, 4]} \
	att7={
		console.log( 'código MH válido' );
	}

Igualmente, en algunas ocasiones, un atributo puede contener solo su clave, por ejemplo:

div atributo_1 atributo_2

Eventos

Para insertar observadores de eventos estándar en los elementos, solo hay que escribir un atributo cuya clave este entre paréntesis y el valor, sea una función o un script, por ejemplo:

div (evento)=mi_funcion
div (evento)={ console.log( 'ocurrió mi evento' ) }

Clave del evento

Dado que los eventos ui, estándar del navegador, son la forma reactiva de comunicación entre los elementos del DOM y el usuario, mh apoya fuertemente este estándar, por eso nos facilita enormemente el manejo de eventos y la emisión de eventos personalizados con parámetros independientes, etc.

Por esto mismo, la clave del evento puede ser un evento estándar de HTML, por ejemplo: input, click, keyup, etc. O el nombre de un evento emitido por nosotros, como podemos ver a continuación:

button \
	(click)={ console.log( 'click del botón' ) } \
	(mi_evento)={ console.log( 'ocurrió mi evento' ) }

Manejo de parámetros de la función

En algunas ocasiones, tendremos la necesidad de manipular los parámetros recibidos en un evento, ya sea con algo tan simple como cambiar el nombre del parámetro general event por otro que se adecue a nuestras necesidades. O agregar más parámetros de los que necesitemos en un script, para este caso, podemos usar el carácter : inmediatamente después del nombre del evento y manipular los parámetros posteriormente, por ejemplo:

div (evento:e, param1, param2)={
	e.preventDefault()
	console.log( `ocurrió mi evento y mis parametros son: ${param1}, ${param2}` )
}

Cuerpo de la etiqueta

El cuerpo de la etiqueta será todo el texto y elementos que estarán contenidos por su comienzo que es determinado por el carácter >, y su final que será determinado por el próximo salto de línea (\r o \n), final de etiqueta o final de script (/ o ;), por ejemplo:

div>mi cuerpo 1
div atributo>mi cuerpo 2;div.segundo>otro cuerpo 3

multilínea en el cuerpo

En alguna ocasión tendremos la necesidad de introducir una gran cantidad de texto, sin preocuparnos por los saltos de línea, ni por los caracteres de escape, para eso tenemos el cuerpo multilínea que en lugar de comenzar con el caracter >, iniciara con el caracter < y terminara con el caracter >, por ejemplo:

div<
	mi cuerpo línea 1
	mi cuerpo línea 2
>

Hay que tener en cuenta que en este tipo de cuerpo no funcionan los caracteres de finalización, y tampoco las etiquetas incrustadas, es realmente útil para meter codigo en etiquetas o grandes volúmenes de texto.

Etiquetas incrustadas

En algunos casos tendremos la necesidad de tener etiquetas entre el texto de nuestro cuerpo, sin que terminemos la etiqueta que actualmente está abierta.

Las etiquetas incrustadas solucionan esto, y se inician con un corchete de apertura ([), y se terminan con un corchete de cierre (]), por ejemplo:

p>esta es una palabra [em>acentuada] en mi cuerpo

Transpila a:

<p>esta es una palabra <em>acentuada</em> en mi cuerpo</p>

En este ejemplo, podemos ver cómo se incrusta una etiqueta em en el cuerpo de la etiqueta p.

Igualmente hay que mencionar que la incrustación de etiqueta al tener un carácter de inicio y uno de final, puede escribirse en múltiples líneas, sin terminar la etiqueta principal, por ejemplo:

p>este es mi ejemplo multilínea con [
	span>linea 1
	span>y
	span>linea 2
], como hermanas

Transpila a:

<p>este es mi ejemplo multilínea con <span>linea 1</span><span>y</span><span>linea 2</span>, como hermanas

Caracteres de escape

Al igual que en una cadena, nosotros podemos escapar caracteres, los cuales serán tomados por el compilador como un carácter de texto normal, evitando así posibles interferencias con el parseo y/o transpilacion de mh.

Aunque se puede escapar cualquier carácter, el compilador tiene mapeos y reemplazos propios a algunos escapes. El mapeo de estos escapes son:

Aunque el escape de línea no es exclusiva del cuerpo de la etiqueta, de igual forma lo podemos usar, y para ello, solo necesitamos colocar la barra de escape (\), justo antes del salto de línea, y con esto, el compilador de meme.js interpreta que la línea continúa justo debajo, por ejemplo:

div>mi cuerpo\
segunda línea de mi cuerpo

Final de Etiqueta

Como en mh todas las etiquetas terminan con un salto de línea (\n o \r), o con el final del código.

En ocasiones necesitaremos terminar la etiqueta antes de terminar la línea. Esto en caso de introducir múltiples etiquetas en una sola línea, para eso: Tenemos el carácter de diagonal invertida (/) y el de punto y coma (;).

Final con diagonal invertida

En el caso de que nuestra etiqueta sea una etiqueta HTML auto cerrada, podemos terminar la etiqueta con la diagonal invertida (/), por ejemplo:

img src="mi_imagen_1.jpg" alt=descripción_1/
img src="mi_imagen_2.jpg"/

Transpila a:

<img src="mi_imagen_1.jpg" alt="descripción_1"/>
<img src="mi_imagen_2.jpg"/>

Final con punto y coma

Si por ejemplo, queremos tener una etiqueta hermana y escribir esta etiqueta en la misma línea, terminamos la etiqueta anterior con punto y coma (;), esto le indica al compilador que todo lo que está antes de este carácter ya ha terminado, e inicia una nueva instrucción, sin embargo, la primera instrucción no pierde la propiedad de la línea, por ejemplo:

.primera;.hermana>cuerpo de hermana
	.hija>cuerpo de hija

Transpila a:

<div class="primera">
	<div class="hija">cuerpo de hija</div>
</div>
<div class="hermana">cuerpo de hermana</div>

Como podemos ver en el ejemplo anterior, aunque hayamos terminado la etiqueta primera con un punto y coma, para iniciar la etiqueta hermana, la etiqueta hija sigue teniendo como nodo padre a la etiqueta primera, ya que esta última no pierde la propiedad de la línea.