Construir Componentes Reutilizables
A medida que tu sitio crece, el mismo diseño de tarjeta o botón aparece en todas partes. En Clean Language, un componente es solo una función que devuelve un string de HTML. Sin magia de framework, sin DOM virtual — solo funciones que puedes llamar en cualquier lugar.
Cualquier función con un bloque html: es un componente:
functions:\n string product_card(string name, string price, string url)\n html:\n La función recibe datos como parámetros y devuelve un string HTML. Las variables name, price y url se interpolan y escapan automáticamente como HTML — los datos del usuario no pueden inyectar HTML en tu página.
Llama al componente en tu endpoint y combina los resultados:
endpoints server:\n GET "/products" :\n string card1 = product_card("Clean Language Book", "$29", "/books/1")\n string card2 = product_card("Starter Course", "Free", "/courses/starter")\n html:\n \n \n {!card1}\n {!card2}\n \n GET /products → HTML page with two product cardsUsa la forma de interpolación sin procesar (llaves con exclamación) para insertar HTML de un componente de confianza. Sin ella, las etiquetas HTML serían escapadas y aparecerían como texto literal. La regla: llaves simples para datos del usuario, llaves con ! para la salida de componentes.
Resumen rápido
- Un componente es una función que devuelve un string usando un bloque html:
- La interpolación simple con llaves auto-escapa — úsala para texto proporcionado por el usuario
- La interpolación con llaves y ! inserta HTML sin procesar — úsala para la salida de componentes que controlas
- Pon los componentes en un archivo helpers.cln e impórtalo en tu servidor