meeko compile

meeko compile translates a .meeko component to the TypeScript module run by the server and browser: renderWithState and renderToString for SSR, hydrate for the browser, the component's CSS and the types for its props, events, models and snippets. It first checks it like meeko check with a component; if there are errors, it writes nothing.

You do not need it in an application: the Vite plugin compiles each .meeko when imported. Use it to see what the compiler generates, debug a component or integrate it into a build system other than Vite.

Usage#

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

Greeting.generated.ts

Type#

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

Parameters#

Result#

Without errors, it writes the module, prints the output path as provided and exits with code 0. With errors, it prints diagnostics, does not write the file and exits with code 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 } {
  // …
}

The module imports @meekojs/meeko/internal, so it runs with the same @meekojs/meeko version used to compile it. It follows the css.scopeAttribute and theme options from the meeko.config.ts of the project containing the component.

Examples#

See what a directive generates#

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

Comparing the module before and after a change shows how the compiler translates on:, if:when or each:of to direct DOM bindings, without a virtual DOM.

Use the module in a custom server#

// 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>`;

The browser must hydrate with the same props; meeko init creates a complete project with this structure.

Common mistakes#

A component with errors#

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

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

The output file is not created and the exit code is 1.

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

Forget the output file#

meeko compile app/components/Greeting.meeko

Falta el archivo de salida de compile, with usage information and exit code 1. Output does not go to stdout.

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

A standalone component outside a project#

# Card.meeko in a directory without node_modules or tsconfig.json
meeko compile Card.meeko Card.ts

Falló la comprobación con TypeScript 7: error TS2688: Cannot find type definition file for 'node'. Without a tsconfig.json, the initial check uses default options that include Node types, and requires @types/node (and @meekojs/meeko) installed in the component's project.

# inside a project with @meekojs/meeko and @types/node installed
meeko compile app/components/Card.meeko Card.ts

Notes#

• The format is not stable. The generated module is internal: its shape may change between minor versions. Always compile with the same version you run it with.
• Same as Vite. The Vite plugin uses the same compiler; what meeko compile generates is what meeko dev and meeko build run, except for HMR and DevTools code, which only exists in development.
• Performance. Compilation is fast; the initial TypeScript check takes the time.
• Windows and POSIX. Input and output paths accept \ or /.

Related#

• meeko checkChecks an entire project, or a single .meeko component, with Meeko and TypeScript diagnostics, and generates .meeko/ types.
• meeko typesGenerates a component's .d.meeko.ts declaration and those of its imported components in .meeko/types/, so TypeScript can check their props.
• meeko (Vite)Meeko's Vite plugin, compiling .meeko imports for the client and SSR, adding HMR and CSS in development, applying auto-imports and generating framework virtual modules.
• cssComponent style options, such as which elements receive the scoped style attribute, all elements or only those that some selector can match.
• ToolsMeeko API
• Generated moduleMeeko API