Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: better documentation for runtime #8190

Merged
merged 2 commits into from
Aug 23, 2023
Merged
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
5 changes: 5 additions & 0 deletions .changeset/silent-snakes-shave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/cloudflare': patch
---

Improve documentation and export the types needed to type the `runtime` object.
49 changes: 48 additions & 1 deletion packages/integrations/cloudflare/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,59 @@ It's then possible to update the preview script in your `package.json` to `"prev

You can access all the Cloudflare bindings and environment variables from Astro components and API routes through `Astro.locals`.

```js
If you're inside an `.astro` file, you access the runtime using the `Astro.locals` global:

```astro
const env = Astro.locals.runtime.env;
ematipico marked this conversation as resolved.
Show resolved Hide resolved
```

From an endpoint:

```js
// src/pages/api/someFile.js
export function get(context) {
const runtime = context.locals.runtime;

return new Response("Some body");
}
```

Depending on your adapter mode (advanced = worker, directory = pages), the runtime object will look a little different due to differences in the Cloudflare API.

If you're using the `advanced` runtime, you can type the `runtime` object as following:

```ts
// src/env.d.ts
/// <reference types="astro/client" />
import type { AdvancedRuntime } from "@astrojs/cloudflare"

declare namespace App {
interface Locals extends AdvancedRuntime {
user: {
name: string;
surname: string;
};
}
}
```

If you're using the `directory` runtime, you can type the `runtime` object as following:

```ts
// src/env.d.ts
/// <reference types="astro/client" />
import type { DirectoryRuntime } from "@astrojs/cloudflare"

declare namespace App {
interface Locals extends DirectoryRuntime {
user: {
name: string;
surname: string;
};
}
}
```

## Environment Variables

See Cloudflare's documentation for [working with environment variables](https://developers.cloudflare.com/pages/platform/functions/bindings/#environment-variables).
Expand Down
3 changes: 3 additions & 0 deletions packages/integrations/cloudflare/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { sep } from 'node:path';
import { fileURLToPath, pathToFileURL } from 'node:url';
import glob from 'tiny-glob';

export type { AdvancedRuntime } from './server.advanced';
export type { DirectoryRuntime } from './server.directory';

type Options = {
mode: 'directory' | 'advanced';
};
Expand Down
4 changes: 2 additions & 2 deletions packages/integrations/cloudflare/src/server.advanced.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Env = {
name: string;
};

interface WorkerRuntime {
export interface AdvancedRuntime {
runtime: {
waitUntil: (promise: Promise<any>) => void;
env: Env;
Expand Down Expand Up @@ -57,7 +57,7 @@ export function createExports(manifest: SSRManifest) {
},
});

const locals: WorkerRuntime = {
const locals: AdvancedRuntime = {
runtime: {
waitUntil: (promise: Promise<any>) => {
context.waitUntil(promise);
Expand Down
4 changes: 2 additions & 2 deletions packages/integrations/cloudflare/src/server.directory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ if (!isNode) {
process.env = getProcessEnvProxy();
}

interface FunctionRuntime {
export interface DirectoryRuntime {
runtime: {
waitUntil: (promise: Promise<any>) => void;
env: EventContext<unknown, string, unknown>['env'];
Expand Down Expand Up @@ -54,7 +54,7 @@ export function createExports(manifest: SSRManifest) {
cf: request.cf,
});

const locals: FunctionRuntime = {
const locals: DirectoryRuntime = {
runtime: {
waitUntil: (promise: Promise<any>) => {
context.waitUntil(promise);
Expand Down
Loading