03 / Cómo funciona Lupus
Componentes externos y Canvas
Canvas ExtJS registra componentes JavaScript externos como fuente de componentes de Canvas. No es el renderer de todo Drupal ni es necesario para una ficha CE clásica.
Todos los recorridos ↗1. Definir el catálogo
catalog.ts declara nombres, propiedades, ejemplos y slots en un esquema TypeScript explícito. El build publica component-index.json. En esta POC no se extraen automáticamente tipos o props de funciones React.
2. Registrar en Drupal
Canvas ExtJS importa el índice y crea las definiciones extjs.*. El editor conoce qué campos puede cambiar y dónde puede anidar componentes. Los cambios incompatibles de contrato requieren coordinación y migración.
3. Previsualizar con React
Un plugin Custom Elements Preview Provider propio carga el bundle React y el CSS del frontal dentro del preview de Canvas. Hero, Section, Card y CTA comparten implementación con la web. El proveedor React y su build son trabajo específico de esta copia Next.js.
4. Publicar y renderizar
Canvas guarda la composición. CE API la entrega como elementos, props y slots. En Next.js, CeRenderer busca NttHero o NttSection en su registro y renderiza los hijos. No se necesita una plantilla Twig equivalente para cada componente editorial.
Ejemplo real de esta instalación
El JSON real muestra NttSection y su slot items con tres NttCard. Abre Canvas y selecciona el Hero para ver sus propiedades, o consulta el índice de los siete componentes registrados.
Inspeccionar contrato recibido en servidor
{
"title": "NTT DATA - Connected experiences",
"content_format": "json",
"content": {
"element": "canvas-page",
"slots": {
"components": [
{
"element": "NttHero",
"props": {
"eyebrow": "NTT DATA / Digital experience lab",
"title": "Una experiencia. Todas las posibilidades.",
"description": "Drupal conserva el contenido y las reglas. Custom Elements define la entrega. Next.js presenta una experiencia conectada, con Canvas y más allá de Canvas.",
"href": "/demo/insights",
"linkText": "Explorar la experiencia"
}
},
{
"element": "NttSection",
"props": {
"eyebrow": "01 / Un mismo frontal, distintos origenes",
"title": "Drupal decide. Next.js presenta.",
"description": "Composición visual, fichas estructuradas, Views y módulos con bloques: descubre qué hace cada capa y compruébalo en ejemplos reales."
},
"slots": {
"items": [
{
"element": "NttCard",
"props": {
"eyebrow": "Canvas / Composicion visual",
"title": "Componentes externos, composición editorial.",
"description": "Hero, secciones y tarjetas React registrados con Canvas ExtJS. Un contrato de propiedades y slots conecta el catálogo frontend con el editor.",
"href": "/demo/guide/components",
"linkText": "Explorar Canvas y ExtJS"
}
},
{
"element": "NttCard",
"props": {
"eyebrow": "Drupal / Contenido estructurado",
"title": "Una entidad. Distintos modos de presentarla.",
"description": "Drupal configura campos y formateadores en displays CE. La misma entidad se entrega como ficha y teaser, sin una plantilla Canvas.",
"href": "/demo/digital-experience",
"linkText": "Descubrir el caso"
}
},
{
"element": "NttCard",
"props": {
"eyebrow": "Views / Seleccion dinamica",
"title": "La consulta se queda en Drupal.",
"description": "Una View real selecciona siete contenidos publicados y devuelve resultados y pager. Next.js presenta tres elementos por página.",
"href": "/demo/insights",
"linkText": "Explorar los insights"
}
}
]
}
},
{
"element": "NttCta",
"props": {
"title": "Más Drupal. Un mismo frontal.",
"description": "Entiende Lupus Decoupled, Custom Elements, CE API y ExtJS. Explora la diferencia entre entregar datos y entregar una presentación, con ejemplos de módulos y bloques.",
"href": "/demo/guide",
"linkText": "Cómo funciona Lupus"
}
},
{
"element": "NttCta",
"props": {
"title": "Una experiencia.",
"description": "Libertad editorial en Drupal.",
"href": "/demo/insights",
"linkText": "Explorar"
}
}
]
}
},
"metatags": {
"meta": [],
"link": [
{
"rel": "alternate",
"hreflang": "en",
"href": "https://dev-headless-lupus.pantheonsite.io/en"
},
{
"rel": "alternate",
"hreflang": "es",
"href": "https://dev-headless-lupus.pantheonsite.io/"
}
]
},
"blocks": {
"sidebar_first": {
"canvas_lupus_theme_page_title": {
"element": "drupal-markup",
"slots": {
"default": "\n\n"
}
},
"canvas_lupus_theme_powered": {
"element": "drupal-markup",
"slots": {
"default": "<span>Powered by <a href=\"https://www.drupal.org\">Drupal</a></span>"
}
}
},
"header": {
"canvas_lupus_theme_site_branding": {
"element": "drupal-markup",
"slots": {
"default": "<img src=\"https://dev-headless-lupus.pantheonsite.io/themes/custom/canvas_lupus_theme/logo.svg\" alt=\"Home\" />\nCanvas Lupus POC"
}
}
},
"primary_menu": {
"canvas_lupus_theme_main_menu": {
"element": "drupal-markup",
"slots": {
"default": "\n <ul>\n <li>\n <a href=\"/\" data-drupal-link-system-path=\"<front>\">Home</a>\n </li>\n </ul>\n \n\n"
}
}
},
"secondary_menu": {
"canvas_lupus_theme_account_menu": {
"element": "drupal-markup",
"slots": {
"default": "\n <ul>\n <li>\n <a href=\"/user/login\" data-drupal-link-system-path=\"user/login\">Log in</a>\n </li>\n </ul>\n \n\n"
}
}
},
"highlighted": {
"canvas_lupus_theme_messages": {
"element": "drupal-markup",
"slots": {
"default": "<div data-drupal-messages-fallback class=\"hidden\"></div>"
}
}
}
}
}