Factory.

// The CLI, the watch task and the release task each write the whole configuration.
// CLI: the app, into the directory its --out flag names.
runBuild({ mode: 'development', target: 'es2022', format: 'iife', minify: false, outDir: 'build' });
// Watch: the library, in development.
runBuild({ mode: 'development', target: 'es2022', format: 'esm', minify: false, outDir: 'dist/library' });
// Release: the library in production, kept readable (minify: false) to debug production bugs.
runBuild({ mode: 'production', target: 'es2022', format: 'esm', minify: false, outDir: 'dist/library' });

type Overrides = { mode?: string; minify?: boolean; outDir?: string };
type BuildConfig = { mode: string; target: string; format: string; minify: boolean; outDir: string };

// The factory: the preset's rules, the defaults and the caller's overrides, in one place.
function resolveBuildConfig(preset: string, overrides: Overrides = {}): BuildConfig {
  const mode = overrides.mode ?? 'development';
  return {
    mode,
    target: 'es2022',
    format: preset === 'library' ? 'esm' : 'iife',
    minify: overrides.minify ?? mode === 'production',
    outDir: overrides.outDir ?? `dist/${preset}`,
  };
}

// Three callers, each saying only what it knows.
const cli = resolveBuildConfig('app', { outDir: 'build' });
const watch = resolveBuildConfig('library');
const release = resolveBuildConfig('library', { mode: 'production', minify: false });

const show = (name: string, config: BuildConfig) =>
  console.log(`${name}: ${config.mode} ${config.target} ${config.format} minify=${config.minify} ${config.outDir}`);
show('cli', cli);
show('watch', watch);
show('release', release);

import type { ReactElement } from 'react';

function Quote({ text, showAuthor }: { text: string; showAuthor: boolean }) {
	return <blockquote>{text}{showAuthor && <cite>The author</cite>}</blockquote>;
}
function Hero({ title }: { title: string }) {
	return <h1>{title}</h1>;
}

// One variant per block type: the type says which fields come with it.
type CmsBlock =
	| { id: string; type: 'quote'; text?: string; showAuthor?: boolean }
	| { id: string; type: 'hero'; title?: string };
type BlockType = CmsBlock['type'];

// The factory's table: which component each block type makes, with which
// defaults. It needs a row for every type, and each row's props are checked
// against its component, so a missing row or a wrong prop does not compile.
// Read the type as: for each block type T, a function that takes the block
// of type T (Extract picks that variant out of CmsBlock) and returns an element.
const blockTypes: { [T in BlockType]: (block: Extract<CmsBlock, { type: T }>) => ReactElement } = {
	quote: (block) => <Quote text={block.text ?? ''} showAuthor={block.showAuthor ?? true} />,
	hero: (block) => <Hero title={block.title ?? 'Untitled'} />,
};

// The CMS sends JSON, so a type it adds tomorrow arrives as a plain string:
// make nothing for it, and let each renderer decide what to show instead.
function makeBlock(block: { id: string; type: string }): ReactElement | null {
	if (!Object.hasOwn(blockTypes, block.type)) return null;
	// TypeScript cannot tie block.type to its row, so three casts here, all trusting the CMS's
	// JSON; the table above is fully checked. Validate CMS data at its input boundary (a schema
	// check where the JSON arrives), so these casts only ever see blocks of the declared shape.
	const make = blockTypes[block.type as BlockType] as (block: CmsBlock) => ReactElement;
	return make(block as CmsBlock);
}

// The published page; the editor preview calls makeBlock the same way.
function Page({ blocks }: { blocks: { id: string; type: string }[] }) {
	return blocks.map((block) => (
		<section key={block.id}>{makeBlock(block) ?? <p>Unsupported block: {block.type}</p>}</section>
	));
}