Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions runtime/fundamentals/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -738,6 +738,27 @@ this requires an explicit opt-in with `-P` and is not loaded by default.

If you're ok with this risk, then this feature will be useful for you.

## Compile config

The `"compile"` block configures
[`deno compile`](/runtime/reference/cli/compile/) without requiring you to
repeat flags on every invocation. You can declare which extra files or
directories to bundle into the executable, and which paths to exclude:

```jsonc title="deno.json"
{
"compile": {
"include": ["names.csv", "data", "worker.ts"],
"exclude": ["data/secrets", "**/*.test.ts"]
}
}
```

`--include` and `--exclude` flags on the command line are merged with these
lists rather than replacing them. The `"compile"` block can also carry
`permissions` (see
[Test, bench, and compile permissions](#test-bench-and-compile-permissions)).

## An example `deno.json` file

```json
Expand Down
51 changes: 51 additions & 0 deletions runtime/reference/cli/compile.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,40 @@ deno compile --allow-read --allow-net jsr:@std/http/file-server -p 8080
./file_server --help
```

## Framework detection

Starting in Deno 2.8, `deno compile .` (or `deno compile <directory>`) detects
common web frameworks and produces an entrypoint that knows how to start them.
The detected build script is run first, so the compiled binary always contains a
fresh build.

Supported frameworks:

- Next.js
- Astro
- Fresh (1.x and 2.x)
- Remix
- SvelteKit
- Nuxt
- SolidStart
- TanStack Start
- Vite (SSR mode)

```sh
# In a Next.js / Astro / Fresh / etc. project
deno compile .

# Or pointing at a specific app directory
deno compile ./apps/web
```

Generated entrypoints use `import.meta.dirname` so framework asset paths resolve
correctly against the [virtual filesystem](#including-data-files-or-directories)
inside the compiled binary.

If the project doesn't match any supported framework, `deno compile` will error
out.

## Cross Compilation

You can cross-compile binaries for other platforms by using the `--target` flag.
Expand Down Expand Up @@ -114,6 +148,23 @@ const dataFiles = Deno.readDirSync(import.meta.dirname + "/data");
Note this currently only works for files on the file system and not remote
files.

### Configuring `include` / `exclude` in `deno.json`

The `--include` and `--exclude` paths can be set declaratively in `deno.json` so
you don't have to repeat them on every `deno compile` invocation:

```jsonc title="deno.json"
{
"compile": {
"include": ["names.csv", "data", "worker.ts"],
"exclude": ["data/secrets", "**/*.test.ts"]
}
}
```

CLI flags are merged with the config: `--include` and `--exclude` add to the
lists in `deno.json` rather than replacing them.

## Workers

Similarly to non-statically analyzable dynamic imports, code for
Expand Down
77 changes: 77 additions & 0 deletions runtime/reference/web_platform_apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,83 @@ const worker = new Worker(import.meta.resolve("./worker.js"), {
});
```

## OffscreenCanvas

Starting in Deno 2.8, the
[`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
API is available. `OffscreenCanvas` is a canvas that lives outside any DOM and
can be used anywhere (including Web Workers) for off-thread rendering and image
generation.

### Supported rendering contexts

`OffscreenCanvas#getContext` accepts two of the spec-defined context ids:

- `"bitmaprenderer"`: returns an
[`ImageBitmapRenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext)
for displaying an `ImageBitmap` produced via `createImageBitmap`.
- `"webgpu"`: returns a
[`GPUCanvasContext`](https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext)
for rendering with WebGPU.

Calling `getContext` with `"2d"`, `"webgl"`, or `"webgl2"` returns `null`; these
contexts are not implemented in Deno.

### Example: encoding an image to PNG

Decode an image into an `ImageBitmap`, place it on an `OffscreenCanvas` via the
`bitmaprenderer` context, and write the result to disk:

```ts
const data = await Deno.readFile("./input.jpg");
const bitmap = await createImageBitmap(new Blob([data]));

const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
const ctx = canvas.getContext("bitmaprenderer")!;
ctx.transferFromImageBitmap(bitmap);

const blob = await canvas.convertToBlob({ type: "image/png" });
await Deno.writeFile(
"./output.png",
new Uint8Array(await blob.arrayBuffer()),
);
```

Typical uses:

- producing thumbnails, format conversions, or social-card images at request
time without spinning up a headless browser,
- running off-thread image work inside a Web Worker,
- driving WebGPU rendering targets that don't need a window.

## Geometry Interfaces

Starting in Deno 2.8, the
[Geometry Interfaces Module Level 1](https://drafts.fxtf.org/geometry/) types
are available as globals. These are the same types you'd find in a browser:

- [`DOMMatrix`](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) /
[`DOMMatrixReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly):
4×4 transform matrices for 2D and 3D operations.
- [`DOMPoint`](https://developer.mozilla.org/en-US/docs/Web/API/DOMPoint) /
[`DOMPointReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMPointReadOnly):
points in 2D / 3D space.
- [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) /
[`DOMRectReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly):
axis-aligned rectangles.
- [`DOMQuad`](https://developer.mozilla.org/en-US/docs/Web/API/DOMQuad): a
quadrilateral defined by four points.

```ts
const m = new DOMMatrix().translateSelf(10, 20).scaleSelf(2);
const p = new DOMPoint(1, 1).matrixTransform(m);
console.log(p.x, p.y); // 12 22
```

These types are useful for graphics work; applying transforms to canvas
drawings, computing layout math, or porting browser code that depends on
geometry types.

## Deviations of other APIs from spec

### Cache API
Expand Down
Loading