@decocms/eitri

Deco binding for the Eitri mobile stack. Unlike @decocms/nextjs / @decocms/tanstack, this package does not render anything — Eitri renders sections natively on its own mobile runtime. @decocms/eitri only produces a well-filled .deco so Studio can author content against your Eitri sections:

• a self-contained .deco/meta.gen.json (section schemas plus the framework block types — Page, matchers, Resolvable, the section picker — baked in, so an FS-based Studio reads it verbatim with no runtime), and
• the bundled .deco/blocks.gen.json decofile snapshot the Eitri runtime consumes.

It is a thin, Eitri-flavored wrapper over @decocms/blocks-cli's generate orchestrator (--platform eitri). See docs/eitri-stack-design.md for the full design.

What Eitri owns vs. what deco owns

| | Owner | |---|---| | Section Props → JSON Schema, decofile snapshot (.deco) | @decocms/eitri (this package) | | Authoring content (forms, page composition) | Studio (reads .deco) | | Fetching the decofile on-device + rendering sections | Eitri platform / your app |

There is intentionally no runtime SDK here.

Sections

An Eitri section is exactly a deco section: a default-exported component in src/sections/** with an exported Props interface documented with JSDoc.

// src/sections/Banners/Hero.tsx
import { Image, View } from "eitri-luminus";

export interface Props {
  /** @title Hero image. */
  image: string;
  /** @title Alt text. */
  alt?: string;
  /** @title Publish date. @format datetime */
  datetime?: string;
}

export default function HeroBanner({ image, alt }: Props) {
  return <View><Image src={image} alt={alt} /></View>;
}

@title, @format (e.g. textarea, datetime → normalized to date-time), and the other JSDoc widget tags drive the Studio form. Sections may be .tsx, .ts, .jsx, or .js.

Install

# in your Eitri app (as a dev tool)
npm i -D @decocms/eitri

Setup

npx deco-eitri init

This scaffolds (never overwriting existing files):

• tsconfig.json extending @decocms/eitri/tsconfig — required; generate-schema needs a tsconfig to parse your Props types.
• src/eitri-env.d.ts — ambient shims for eitri-luminus / eitri-bifrost so your editor and tsc don't flag those imports. Purely ergonomic; generation works without it. Delete it if you install the real eitri-luminus types.

If you prefer to wire it by hand, your tsconfig.json need only be:

{ "extends": "@decocms/eitri/tsconfig", "include": ["src"] }

Generate

# from the app root
npx deco-eitri generate

# or, targeting a sub-app in a monorepo without cd:
npx deco-eitri generate --root eitri-shopping-monte-carlo-shared

Add it as a script:

{ "scripts": { "deco:generate": "deco-eitri generate" } }

Output under .deco/:

• meta.gen.json — self-contained schema (framework: "eitri").
• blocks.gen.json — decofile snapshot (starts as {} for a fresh app; Studio fills it as content is authored).
• generate.digests.json — the incremental-generation cache (commit it).

The React-runtime artifacts (sections.gen.ts, blocksManifest.gen.ts, loaders.gen.ts, invoke.gen.ts) are intentionally not produced — Eitri doesn't use them.

Programmatic API

import { generateEitri } from "@decocms/eitri";

const code = await generateEitri({ root: "path/to/app", force: true });

Flags

deco-eitri generate forwards every @decocms/blocks-cli generate flag (--root, --force, --dry-run, --sections-dir, --namespace, --site, …). Run npx deco-eitri generate --help for the full list. --platform eitri is always applied.