Files
Claude c828f5cfe9 🌾 feat: rebuild the landing page, and stop it from rotting again
The old page had been quietly broken for some time. It loaded
@babel/standalone from an **unpinned** CDN URL, which rolled over to Babel
8 and dropped the `proposal-class-properties` plugin the page asked for, so
Babel.transform threw before it ever reached the decorators — and the
decorator config it passed was `{ legacy: true }`, which 0.2.0 had already
made wrong. Nothing on the page said so. The copy was still selling the
0.1.0 pitch ("Spring-like"), listed about half the decorators, showed
`npm install cereale` for a package the registry returns 404 for, and
claimed "Zero overhead" against a README that publishes the real
microsecond costs.

The rebuild is one self-contained page: hand-written CSS, no Tailwind CDN,
no CodeMirror, and a vendored compiler pinned by package.json. It loads
nothing from the network. The playground runs the real bundled library
across six examples, all verified in a headless browser. The reference
covers all 68 decorators and the full API, counted from the bundle at
runtime so it cannot drift.

The hero's compiler error is not typed into the HTML. scripts/build-docs.mjs
compiles the snippets with the real tsc and writes the verbatim diagnostics
into docs/diagnostics.js, failing the build if a snippet the page calls a
compile error ever compiles — and two snippets that must compile guard
against the harness passing vacuously.

Three guards keep it honest, all wired into CI:
- check:docs fails on any remote subresource
- build:docs + git diff fails if docs/ is stale against src/
- check:types compiles a consumer against dist/ with no DOM lib, no
  @types/node and no skipLibCheck

That last one found a real packaging defect: `fromRequest` was declared as
taking the global `Request`, so cereale's own published .d.ts raised
"Cannot find name 'Request'" in any project whose lib and types did not
happen to supply it — inside a dependency, in code they may never call, and
unfixable from the outside. It now takes a structural JsonBody, which a
Request still satisfies. The library's own type tests had been hiding it by
enabling both DOM and skipLibCheck.

An adversarial review of the finished page caught four more: the lede
claimed *every* rule is type-checked (@IsDefined and @IsNotIn deliberately
are not), the guarantee section was wrong about the mechanism (a legacy
decorator does get design:type under emitDecoratorMetadata — the real claim
is about its type signature), one sample called a Movie method on a Media[]
and did not compile, and "nested objects come back as real classes" omitted
that you have to declare them. WCAG contrast was measured rather than
eyeballed: seven real failures fixed in the two themes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SAcqrz3FcadkYr3xG32CjK
2026-08-05 10:03:16 +00:00

109 lines
3.5 KiB
JavaScript

/**
* Compiles a minimal consumer against the built type declarations, in the least forgiving
* configuration a real project might have: no `skipLibCheck`, no `DOM` lib, no `types`.
*
* A zero-dependency library's public types have to stand on their own. `fromRequest` used to
* be declared as taking the global `Request`, so cereale's own `.d.ts` raised
* `Cannot find name 'Request'` in any project whose `lib` and `types` did not happen to
* supply it — an error inside a dependency, in code the consumer may never call, that they
* cannot fix from the outside. The library's own test suite hid it by enabling both.
*
* Run after `npm run build`, since it checks what is actually published.
*/
import ts from 'typescript';
import { mkdtemp, rm, writeFile, access } from 'node:fs/promises';
import { tmpdir } from 'node:os';
import { fileURLToPath } from 'node:url';
import path from 'node:path';
const root = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
const types = path.join(root, 'dist/esm/index.d.ts');
try {
await access(types);
} catch {
console.error('dist/esm/index.d.ts is missing — run `npm run build` first.');
process.exit(1);
}
const CONSUMER = `
import {
IsString, MinLength, IsInt, Min, IsDate, JsonProperty, JsonWriteOnly,
ValidateNested, JsonType, fromJsonSync, toPlainSync, validateSync, fromRequest,
} from ${JSON.stringify(types.replace(/\.d\.ts$/, '.js'))};
class Address {
@IsString() city!: string;
}
export class User {
@JsonProperty('display_name')
@IsString() @MinLength(2)
displayName!: string;
@IsInt() @Min(0)
age!: number;
@IsDate()
joinedAt!: Date;
@JsonWriteOnly() @IsString()
password!: string;
@ValidateNested() @JsonType(() => Address)
address!: Address;
greet(): string { return 'Hi ' + this.displayName; }
}
export function use(body: string) {
const user = fromJsonSync(User, body);
return [user.greet(), toPlainSync(user), validateSync(user)];
}
// Declared structurally, so this must type-check without the DOM or Node globals.
export function fromAnythingWithJson(source: { json(): Promise<unknown> }) {
return fromRequest(User, source);
}
`;
const dir = await mkdtemp(path.join(tmpdir(), 'cereale-consumer-'));
try {
const file = path.join(dir, 'consumer.ts');
await writeFile(file, CONSUMER);
const program = ts.createProgram([file], {
target: ts.ScriptTarget.ES2022,
module: ts.ModuleKind.ESNext,
moduleResolution: ts.ModuleResolutionKind.Bundler,
// Deliberately bare: no DOM, no node, and lib checking left on.
lib: ['lib.esnext.d.ts', 'lib.esnext.decorators.d.ts'],
types: [],
strict: true,
strictPropertyInitialization: false,
skipLibCheck: false,
noEmit: true,
});
const diagnostics = [
...program.getSemanticDiagnostics(),
...program.getSyntacticDiagnostics(),
...program.getGlobalDiagnostics(),
];
if (diagnostics.length > 0) {
console.error(
'cereale\'s published types do not stand alone. A consumer without DOM lib or @types/node sees:\n' +
diagnostics.slice(0, 12).map((d) => {
const where = d.file ? `${path.basename(d.file.fileName)}:${d.file.getLineAndCharacterOfPosition(d.start ?? 0).line + 1} ` : '';
return ` - ${where}TS${d.code}: ${ts.flattenDiagnosticMessageText(d.messageText, ' ')}`;
}).join('\n')
);
process.exit(1);
}
console.log('type check passed — published types resolve with no DOM lib and no @types/node.');
} finally {
await rm(dir, { recursive: true, force: true });
}