TypeScript

TinyJS is written in TypeScript and publishes JavaScript, source maps, declarations, and declaration maps. Its public API and JSX runtime include TSDoc, so editors expose the rendering contract at the point of use.

Type page and site data

Page and site documents can be typed with generics:

import type { PageData, PageProps, SiteData } from '@carl.fyi/tinyjs'

interface ProjectPage extends PageData {
  client: string
  year: number
}

interface PortfolioSite extends SiteData {
  owner: string
}

export default function Project({ page, site }: PageProps<ProjectPage, PortfolioSite>) {
  return <h1>{page.title} · {page.client} · {site.owner}</h1>
}

Configure TSX

Sites using TypeScript should configure the automatic JSX transform:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@carl.fyi/tinyjs",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "noEmit": true,
    "strict": true
  }
}

TinyJS compiles TSX for execution. Type-checking remains a development command, so TypeScript is not added to a published site's runtime dependency graph.

Typed HTML and SVG

TinyJS supplies its own HTML and SVG JSX types without React or DOM-library types.

• Standard elements have element-specific attributes.
• aria-* and data-* attributes are typed.
• Images require alt.
• Void elements reject children.
• Styles must be CSS strings.
• Unknown tag names are errors.
• Hyphenated custom elements remain available.
• Inline event-handler attributes are absent from the type system and rejected at runtime.