Crear un DSL de HTML/configuración seguro respecto a tipos
Implemente un DSL de configuración sencillo usando patrones builder y lambdas de extensión.
Crear un DSL de HTML/configuración seguro respecto a tipos es una lección gratuita de Kotlin Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Kotlin Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Kotlin Academy incluye 4 lecciones en total.
Objetivo: una DSL práctica
Construiremos una DSL mínima pero realista para crear HTML en Kotlin. Los mismos patrones se aplican a cualquier builder de configuración, dispositivo de prueba o informe. El resultado es una API con seguridad de tipos y compatible con el IDE que sustituye la concatenación de cadenas.
Definición de la clase base de las etiquetas
Todos los elementos HTML comparten una estructura común: un nombre, atributos e hijos. Comience con una clase base:
open class Tag(val name: String) {
val attrs = mutableMapOf<String, String>()
val children = mutableListOf<Tag>()
fun render(indent: Int = 0): String {
val pad = " ".repeat(indent)
val attrStr = if (attrs.isEmpty()) "" else " " + attrs.entries.joinToString(" ") { "${it.key}=\"${it.value}\"" }
val body = children.joinToString("\n") { it.render(indent + 2) }
return "$pad<$name$attrStr>\n$body\n$pad</$name>"
}
}Aplicación de @DslMarker
Marque todas las clases builder para que los ámbitos internos no puedan llamar accidentalmente a métodos del ámbito externo:
@DslMarker
annotation class HtmlDsl
@HtmlDsl class Html : Tag("html")
@HtmlDsl class Head : Tag("head")
@HtmlDsl class Body : Tag("body")
@HtmlDsl class Div : Tag("div")
@HtmlDsl class P : Tag("p")Adición de funciones builder
Cada clase de etiqueta obtiene una función de extensión que crea una etiqueta hija, aplica el bloque y la añade a los hijos:
fun Html.head(block: Head.() -> Unit) = Head().also { it.block(); children += it }
fun Html.body(block: Body.() -> Unit) = Body().also { it.block(); children += it }
fun Body.div(block: Div.() -> Unit) = Div().also { it.block(); children += it }
fun Div.p(text: String) = P().also { it.attrs["text"] = text; children += it }Builder html de nivel superior
Proporcione un punto de entrada de nivel superior que cree el elemento raíz y aplique el bloque proporcionado por quien lo utilice:
fun html(block: Html.() -> Unit): Html {
val root = Html()
root.block()
return root
}Uso de la DSL
El resultado es una DSL limpia y legible:
val page = html {
head { }
body {
div {
p("Hello, DSL!")
}
}
}
println(page.render())Adición de atributos
Añada un helper attr para establecer atributos arbitrarios de forma fluida:
fun Tag.attr(key: String, value: String) { attrs[key] = value }
// Usage
div {
attr("class", "container")
p("Content")
}Patrón de DSL de configuración
El mismo patrón funciona para objetos de configuración. En lugar de etiquetas HTML, use clases del dominio:
class ServerConfig {
var host = "localhost"
var port = 8080
var db: DbConfig? = null
fun database(block: DbConfig.() -> Unit) { db = DbConfig().apply(block) }
}
fun server(block: ServerConfig.() -> Unit) = ServerConfig().apply(block)Anidación y composición
Como cada función builder devuelve el objeto creado, puede componer builders libremente. La profundidad de anidación de la DSL coincide con la profundidad de la jerarquía de datos.
Prevención de errores mediante tipos
El sistema de tipos impone la estructura: no puede llamar a body { } dentro de un Head porque Head no tiene ninguna función de extensión body. Las estructuras no válidas producen errores en tiempo de compilación.
Renderizado y pruebas
Como la DSL produce un árbol de objetos Kotlin simple, el renderizado y las pruebas son sencillos: llame a render() y compruebe la cadena de salida, o recorra el árbol de objetos en las pruebas.
Ampliar el DSL más adelante
Añadir nuevas etiquetas u opciones de configuración solo requiere nuevas funciones de extensión en la clase receptora adecuada. Los sitios de llamada existentes no se ven afectados: abierto/cerrado en la práctica.
Comprobación rápida
¿Qué hace que un DSL de HTML/configuración de Kotlin tenga «seguridad de tipos»?
Resumen: crear un DSL con seguridad de tipos
Pasos clave:
- Defina clases builder para cada nivel de la jerarquía
- Anótelas con
@DslMarkerpara evitar la fuga del receptor - Escriba funciones de extensión que creen, configuren y añadan objetos secundarios
- Exponga una función de punto de entrada de nivel superior
- La renderización y las pruebas funcionan con objetos de Kotlin simples
Preguntas frecuentes
¿La lección «Crear un DSL de HTML/configuración seguro respecto a tipos» es gratis?
Sí — el texto completo de «Crear un DSL de HTML/configuración seguro respecto a tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Kotlin Academy, actualiza a CoddyKit PRO. El curso de Kotlin Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Crear un DSL de HTML/configuración seguro respecto a tipos»?
Implemente un DSL de configuración sencillo usando patrones builder y lambdas de extensión. Practicas Kotlin Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Kotlin Academy?
No se requiere experiencia previa. Kotlin Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Crear un DSL de HTML/configuración seguro respecto a tipos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Kotlin Academy?
Sí. Cada lección de Kotlin Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lambda con receptor: base de los DSL
- @DslMarker: evitar fugas del receptor
- Crear un DSL de HTML/configuración seguro respecto a tipos
- Probar y evolucionar DSL sin perjudicar a los usuarios