meeko types

meeko types writes the type declaration of a .meeko component (its props, events, models, snippets and exposed values) and recursively of each .meeko it imports through relative imports or path aliases. Declarations go in .meeko/types/, with the same project-relative path and the .d.meeko.ts extension; never alongside sources. It prints the path of each declaration written.

With those declarations, a .ts file importing the component (import App from "./App.meeko") receives its exact props. This is what the meeko init starter's check script does before tsc. In a framework application you do not need to call it: meeko check, meeko dev and meeko routes generate declarations for all components.

Usage#

meeko types src/App.meeko

C:\proyectos\contador\.meeko\types\src\App.d.meeko.ts

Type#

meeko types <componente.meeko>

Parameters#

Result#

For each component in the graph, .meeko/types/<ruta relativa>.d.meeko.ts, starting with // @meeko-generated component-declaration v1 and declaring the compiled module's exports: Props and component types, renderWithState, hydrate, css… Relative imports of .ts modules are rewritten to keep pointing to the sources. Exits with 0, or 1 and the error if a component fails to compile.

For TypeScript to use these declarations when importing ./App.meeko, tsconfig.json needs allowArbitraryExtensions and rootDirs overlaying the sources with .meeko/types/:

{
  "compilerOptions": {
    "allowArbitraryExtensions": true,
    "rootDirs": ["src", ".meeko/types/src"]
  }
}

meeko init already writes it this way.

Examples#

Check a TypeScript consumer#

// src/entry-server.ts
import { css, renderWithState } from "./App.meeko";

export function renderPage(initial = 1): string {
  const props = { initial: String(initial) };
  const rendered = renderWithState(props);
  return `<style>${css}</style><div id="app">${rendered.html}</div>`;
}

meeko types src/App.meeko && tsc --noEmit

src/entry-server.ts(5,36): error TS2345: Argument of type '{ initial: string; }' is not assignable to parameter of type 'Props'.
  Types of property 'initial' are incompatible.
    Type 'string' is not assignable to type 'number'.

Without declarations, ./App.meeko has no types and tsc does not detect that App.meeko declares initial: number.

Multiple entry components#

meeko types src/App.meeko
meeko types src/Admin.meeko

Each call generates its component's graph; a shared component is rewritten with the same content.

Common mistakes#

A component with errors#

Before generating, meeko types checks the entry component like meeko check: with a syntax or type error, it writes nothing.

<!-- src/App.meeko -->
<template><p>{count.value</p></template>

C:\proyectos\contador\src\App.meeko:1:14 MEEK010: Expresión de plantilla sin cerrar

A type error in the script (const n: number = "x") likewise produces TS2322 and exit code 1.

<!-- src/App.meeko -->
<script lang="ts">
import { signal } from "@meekojs/meeko";
const count = signal(0);
</script>
<template><p>{count.value}</p></template>

Different casing on Windows#

meeko types src/app.meeko   # the file is src/App.meeko

This works on Windows and macOS because the filesystem is case-insensitive, and since 1.7 the declaration uses the file's actual name (.meeko\types\src\App.d.meeko.ts; through 1.6 it was written as app.d.meeko.ts). On Linux and in CI the same command fails with No existe el archivo src/app.meeko (…): write the name as it appears on disk.

meeko types src/App.meeko

Notes#

• Location. Always under the project's .meeko/types/, never alongside sources. Put .meeko/ in .gitignore: regenerate declarations in CI before tsc.
• Orphans. In a framework application, generated declarations are recorded in .meeko/manifests/component-types.json and meeko check deletes only managed declarations whose component no longer exists; meeko types deletes nothing.
• Components in server/. A .meeko under server/ is compiled with server auto-imports; the rest use client auto-imports.
• Performance. It checks only the entry component with a tsc invocation, then compiles each component in the graph and emits its declaration without further checks.

Related#

• meeko checkChecks an entire project, or a single .meeko component, with Meeko and TypeScript diagnostics, and generates .meeko/ types.
• meeko compileChecks a .meeko component and compiles it to a TypeScript module with its server render, hydration and types.
• meeko routesDiscovers routes, server contracts, components and auto-imports and prepares .meeko/ like meeko check (manifests, declarations and tsconfig), without running TypeScript.
• meeko initCreates a standalone SSR project without the framework, with a .meeko component, its Node server and Vite.
• ToolsMeeko API