`meeko compile`

Comprueba un componente .meeko y lo compila a un módulo TypeScript con su render de servidor, su hidratación y sus tipos.

comando Desde 1.0.0

meeko compile traduce un componente .meeko al módulo TypeScript que ejecutan el servidor y el navegador: renderWithState y renderToString para el SSR, hydrate para el navegador, el CSS del componente y los tipos de sus props, eventos, modelos y snippets. Antes lo comprueba como meeko check con un componente; si hay errores, no escribe nada.

En una aplicación no hace falta: el plugin de Vite compila cada .meeko al importarlo. Sirve para ver qué genera el compilador, depurar un componente o integrarlo en un sistema de build que no es Vite.

Uso#

meeko compile app/components/Greeting.meeko Greeting.generated.ts

texto

Greeting.generated.ts

Tipo#

meeko compile <componente.meeko> <salida.ts>

Parámetros#

Parámetro	Tipo	Por defecto	Descripción
`<componente.meeko>`	ruta	obligatorio	El componente. Sus imports y sus autoimports se resuelven desde su carpeta y su proyecto.
`<salida.ts>`	ruta	obligatorio	El archivo que se escribe. Se sobrescribe si existe; su carpeta debe existir.

Resultado#

Sin errores, escribe el módulo, imprime la ruta de salida tal como se pasó y termina con código 0. Con errores, imprime los diagnósticos, no escribe el archivo y termina con código 1.

// Greeting.generated.ts (extracto)
// Generated by Meeko. Edit the .meeko source instead.
import * as __meeko from "@meekojs/meeko/internal";

export type ComponentProps = { name: string };
export const css = "";
export function renderWithState(__inputProps: ComponentProps): { html: string; state: __meeko.HotState } {
  // …
}

El módulo importa @meekojs/meeko/internal, así que se ejecuta con el mismo @meekojs/meeko con el que se compiló. Sigue las opciones css.scopeAttribute y theme del meeko.config.ts del proyecto que contiene el componente.

Ejemplos#

Ver qué genera una directiva#

meeko compile app/components/Counter.meeko ../counter.ts

Comparar el módulo antes y después de un cambio muestra cómo el compilador traduce on:, if:when o each:of a enlaces directos con el DOM, sin DOM virtual.

Usar el módulo en un servidor propio#

// server.ts
import { renderWithState } from "./Greeting.generated.ts";
import { serializeJson } from "@meekojs/meeko";

const props = { name: "Ada" };
const { html, state } = renderWithState(props);
const page = `<div id="app">${html}</div><script type="application/json" id="data">${serializeJson({ props, state })}</script>`;

El navegador debe hidratar con las mismas props; meeko init crea un proyecto completo con este esquema.

Errores comunes#

Un componente con errores#

Incorrectomeeko

<!-- app/components/Broken.meeko -->
<script lang="ts">
const n: number = "x";
</script>
<template><p>{n}</p></template>

texto

C:\proyectos\tienda\app\components\Broken.meeko:2:7 TS2322: Type 'string' is not assignable to type 'number'.

El archivo de salida no se crea y el código es 1.

Correctomeeko

<!-- app/components/Broken.meeko -->
<script lang="ts">
const n: number = 1;
</script>
<template><p>{n}</p></template>

Olvidar el archivo de salida#

Incorrectosh

meeko compile app/components/Greeting.meeko

Falta el archivo de salida de compile, con el uso y código 1. La salida no va a stdout.

Correctosh

meeko compile app/components/Greeting.meeko Greeting.generated.ts

Un componente suelto fuera de un proyecto#