ClientAppOptions
interfaz
Opciones de mountClientApp. La entrada cliente que genera Meeko las rellena a partir de
los módulos virtuales del plugin de Vite.
import type { ClientAppOptions } from "@meekojs/meeko/framework";Código fuente src/app/runtime/client.ts:129
Declaración #
interface ClientAppOptions {
readonly viewTransitions?: boolean
readonly routes: readonly RouteRecord[]
readonly errorPage?: ErrorPageRecord | undefined
readonly root: Element
readonly payload: string | unknown
readonly loadPage: (file: string) => Promise<ClientComponent>
readonly loadRoute?: (file: string) => Promise<ClientRoute>
readonly loadClientRoute?: (file: string) => Promise<ClientRoute>
readonly loadMiddleware?: () => Promise<readonly RouteMiddleware[]>
readonly loadNamedMiddleware?: (file: string) => Promise<RouteMiddleware>
readonly serverData?: boolean | 'static'
readonly fetch?: typeof fetch
readonly onNavigationError?: (error: unknown) => void
readonly onError?: ComponentErrorHandler
readonly browser?: Window
readonly document?: DocumentConfig | undefined
readonly plugins?: readonly PluginRegistration[]
}Ejemplo #
import { mountClientApp } from "@meekojs/meeko/framework";
import type { ClientAppOptions, ClientComponent } from "@meekojs/meeko/framework";
const options: ClientAppOptions = {
root: document.getElementById("app")!,
payload: document.getElementById("meeko-payload")?.textContent,
routes,
serverData: true,
loadPage: async (file) => await pages[file]!() as ClientComponent,
onError: (error, source) => console.error(source, error),
};
const app = await mountClientApp(options);Propiedades #
viewTransitions
#
readonly viewTransitions?: booleanView Transitions nativas al confirmar una navegación; false por defecto. No anima la hidratación inicial.
errorPage
#
readonly errorPage?: ErrorPageRecord | undefinedPágina de error de la aplicación (app/error.meeko) y sus layouts raíz. Hidrata una página
404 del servidor y respalda las rutas render: "client" sin +error.meeko.
payload
#
readonly payload: string | unknownPayload de hidratación de #meeko-payload, como texto JSON o ya analizado.
loadPage
#
readonly loadPage: (file: string) => Promise<ClientComponent>Carga el módulo compilado de una página o un layout por su archivo.
loadRoute
#
readonly loadRoute?: (file: string) => Promise<ClientRoute>Carga las opciones de ruta públicas de un sidecar para ejecutar su loader en el navegador.
loadClientRoute
#
readonly loadClientRoute?: (file: string) => Promise<ClientRoute>Carga el sidecar de navegador de una ruta render: "client". Estas rutas siempre toman sus
datos de este loader, también con serverData; por defecto, loadRoute.
loadMiddleware
#
readonly loadMiddleware?: () => Promise<readonly RouteMiddleware[]>Carga el middleware de ruta global, que se ejecuta como en SSR antes de pedir cada navegación.
loadNamedMiddleware
#
readonly loadNamedMiddleware?: (file: string) => Promise<RouteMiddleware>Carga un middleware con nombre de RouteRecord.middleware por su archivo, la primera vez
que se navega a una ruta que lo declara. Se ejecuta después de los globales, como en SSR; una
ruta con middleware con nombre y sin este cargador falla en lugar de saltárselo.
serverData
#
readonly serverData?: boolean | 'static'Pide al servidor los datos públicos del loader al navegar. Con true, la misma URL con
Accept: application/meeko+json; desde 1.3, con "static", el archivo
<ruta>/index.meeko.json que escribe el adaptador static, para un hosting estático que no
negocia Accept.
fetch
#
readonly fetch?: typeof fetchImplementación de fetch para las navegaciones; por defecto, la global.
onNavigationError
#
readonly onNavigationError?: (error: unknown) => voidObserva los fallos de navegación por clic o historial; tiene prioridad sobre onError.
onError
#
readonly onError?: ComponentErrorHandlerObserva los fallos de esta aplicación en el navegador: navegación, clientes Socket y eventos,
efectos o limpiezas de componentes sin un provideErrorHandler más cercano. Desde 1.3,
también las excepciones no capturadas ("uncaught") y las promesas rechazadas sin manejar
("rejection") de la página mientras la aplicación está montada; el navegador ya no las
repite en la consola. Sin onError ni app.onError, las recibe el primer
provideErrorHandler activo; sin ninguno, el navegador las muestra como siempre.
document
#
readonly document?: DocumentConfig | undefineddocument de meeko.config.ts, el mismo que renderiza el servidor: la entrada cliente que
genera Meeko lo toma de virtual:meeko-manifest/client. useHead y la navegación lo usan para
aplicar titleTemplate, mostrar su title (sin plantilla) en las páginas sin título y
restaurar sus etiquetas, con la misma regla que el servidor.
plugins
#
readonly plugins?: readonly PluginRegistration[]Plugins de aplicación (definePlugin), que se ejecutan en orden antes de la hidratación. Sus
valores de provide llegan a todos los componentes, y sus observadores de onError reciben lo
mismo que onError. La entrada que genera Meeko pasa los de app/plugins y los módulos.