Entry point

Contents

How a Program becomes TypeScript, in parts. Start with the introduction, then follow each part into the rendered output and the runtime it links against.

• Introduction — what the TypeScript target is, and how to read the rest of this section.
• Capabilities — which high-level features are possible, built in or through a library.
• Example — a full program using every keyword, and the TypeScript it renders to.
• Naming considerations — how Program's dotted names are carried into TypeScript.
• Entry point — starting a program and attaching it to a root element.
• Drivers — the native drivers that provide the interface, animation and network.
• Runtime — the Reactive and Context machinery the rendered code links against.
• Native modules — the hand-written JavaScript behind NATIVE functions.
• Keywords — how each of Program's keywords renders to TypeScript.
• Project setup — the files and commands to build and run the rendered program.
• Reserved words — the words TypeScript keeps for itself, and how a colliding name is escaped.

One call, typed

A program starts with a single typed call. It takes the root component — a callback that runs the program — and the array of drivers the embed uses, and returns a cancel function that tears the program down.

const cancel: () => void = Program.Application(
  (): void => Main(),              // the root component — the program itself
  [ Ui.Dom.Driver('app') ],        // render the interface into <div id="app">
);
window.addEventListener('beforeunload', cancel);

The signature is Program.Application(content: () => void, drivers: Driver[]): () => void. Types are carried through the whole call: the root component's reactive values are ReactiveValue<T>, and each driver is checked against the Driver interface, so a mis-wired embed fails to compile rather than at runtime.

Attaching to the page

The interface is attached to one root element. The DOM interface driver takes that element — by id or as an HTMLElement — owns everything inside it, and patches it in place each cycle.

<div id="app"></div>
<script type="module">
  import { Program, Ui } from './app.js';
  Program.Application(() => Main(), [ Ui.Dom.Driver('app') ]);
</script>

Many isolated programs can share one page, each mounted into its own node.

Stopping

The returned cancel stops the cycle, tears down the drivers, and releases the root element — wired to beforeunload for a whole-page app, or called by hand to remove an embed that comes and goes.