Contrato del componente

Las props, responsabilidades y restricciones que debe cumplir un componente de vista conforme.

Contrato del componente

El componente renderiza el modelo de datos producido por el parser usando el renderer declarado en runtime (por ejemplo React, Solid, HTML, PDF o un renderer propio). Es solo una capa de presentación: no obtiene, parsea ni interpreta datos fuente raw por su cuenta.

Props

{
  data,       // lo que haya devuelto el parser
  settings,   // settings del manifiesto, combinados con overrides del runtime
  source,     // metadatos declarados del archivo o directorio fuente
  resources   // rutas resueltas bajo resources/
}

Entrega de props por renderer

El objeto de props es siempre el mismo; lo que cambia según runtime.renderer es cómo lo entrega el runtime:

Un componente .html estático DEBE leer los datos únicamente desde window.mview:

<script>
  const { data, settings } = window.mview;
  // renderizar con data
</script>

No debe inventar otros globals (__MVIEW_DATA__, __DATA__, etc.) ni hacer fetch de la fuente: los datos ya llegan parseados en window.mview.data. Para el renderer html, window.mview es la entrega de props — no cuenta como “estado global oculto” bajo las restricciones de abajo.

Interactividad

Un componente no tiene que ser interactivo, pero puede serlo:

• Los componentes react / solid pueden usar estado y handlers (useState, createSignal, onClick, etc.). Un runtime que renderiza server-side DEBE hidratar el componente en el navegador (bundle cliente + hydrateRoot de React / hydrate de Solid) para que esa interactividad funcione; de lo contrario la vista queda estática.
• Los componentes html traen sus propios <script> y son interactivos por sí mismos.

Ejemplo React

import React from "react";
 
export default function Dashboard({ data, settings }: any) {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui, sans-serif" }}>
      <h1>Sales Dashboard</h1>
 
      <section>
        <h2>Total Sales</h2>
        <strong>
          {settings?.currency ?? "USD"} {data.totalSales.toLocaleString()}
        </strong>
      </section>
 
      <section>
        <h2>Sales by Month</h2>
        <ul>
          {data.salesByMonth.map((item: any) => (
            <li key={item.month}>
              {item.month}: {item.total}
            </li>
          ))}
        </ul>
      </section>
 
      <section>
        <h2>Top Clients</h2>
        <table>
          <thead>
            <tr><th>Client</th><th>Total</th></tr>
          </thead>
          <tbody>
            {data.topClients.map((row: any, index: number) => (
              <tr key={index}>
                <td>{row.Client ?? row.client ?? "Unknown"}</td>
                <td>{row.Total ?? row.total ?? 0}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}

Un componente Solid, HTML, PDF u otro renderer recibe el mismo modelo conceptual y debe cumplir las mismas restricciones; solo cambia la sintaxis o el artefacto producido por el renderer.

Restricciones (DEBE / NO DEBE)

• El componente NO DEBE leer directamente ningún archivo fuente. Solo renderiza data.
• El componente NO DEBE realizar llamadas fetch arbitrarias sin que el runtime conceda permiso explícito (ver Modelo de seguridad).
• El componente DEBE renderizar solo desde data y settings: sin dependencias ocultas de estado global fuera de lo que recibe como props.
• El componente DEBERÍA degradarse con gracia (estados vacíos, campos faltantes) en lugar de romper el árbol de render, ya que data refleja lo que el parser produjo a partir de una fuente potencialmente cambiada.

Por qué separar parser y componente

Separar “entender la fuente” (parser) y “renderizar el modelo” (componente) como artefactos independientes y regenerables es lo que permite que una MView sobreviva cambios de la fuente sin reescrituras manuales: si cambia su esquema o selección, solo necesita regenerarse el parser; si debe cambiar el diseño visual, solo el componente. Ver Regeneración para cómo un runtime debería exponer “Regenerar parser” y “Regenerar componente” como acciones separadas.