@outerbase/browsable-durable-object

A browsable SQL query interface for Cloudflare Durable Objects.

Installation

npm install @outerbase/browsable-durable-object

Usage

Various ways to implement the browsable experience.

Class Decorator

import { DurableObject } from "cloudflare:workers";
import { Browsable } from "@outerbase/browsable-durable-object";

@Browsable()
export class MyDurableObject extends DurableObject<Env> {
    public sql: SqlStorage

	constructor(ctx: DurableObjectState, env: Env) {
		super(ctx, env);
        this.sql = ctx.storage.sql;
	}

    async fetch(request: Request): Promise<Response> {
        return new Response('Hello from MyDurableObject');
    }
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
        const path = new URL(request.url).pathname
		let id: DurableObjectId = env.MY_DURABLE_OBJECT.idFromName(path);
		let stub = env.MY_DURABLE_OBJECT.get(id);

        return stub.fetch(request);
	}
} satisfies ExportedHandler<Env>;

Inheritance

export class MyDurableObject extends BrowsableDurableObject<Env> {
    public sql: SqlStorage

	constructor(ctx: DurableObjectState, env: Env) {
		super(ctx, env);
        this.sql = ctx.storage.sql
	}

    async fetch(request: Request): Promise<Response> {
        const baseResponse = await super.fetch(request);

        if (baseResponse.status === 404) {
            return new Response('Hello from MyDurableObject');
        }

        return baseResponse;
    }
}

Composition

export class MyDurableObject extends BrowsableDurableObject<Env> {
    public sql: SqlStorage
    private handler: BrowsableHandler;

	constructor(ctx: DurableObjectState, env: Env) {
		super(ctx, env);
        this.sql = ctx.storage.sql
        this.handler = new BrowsableHandler(this.sql);
	}

    async fetch(request: Request): Promise<Response> {
        const url = new URL(request.url);
        const path = url.pathname;
        if (path === '/query/raw') {
            return await this.handler.fetch(request);
        }

        return new Response('Hello from MyDurableObject');
    }
}

Studio UI Support

import { DurableObject } from 'cloudflare:workers';
import { Browsable, studio } from './browsable';

@Browsable()
export class MyDurableObject extends DurableObject<Env> {}

export default {
	async fetch(request, env, ctx): Promise<Response> {
		const url = new URL(request.url);

		if (url.pathname === '/studio') {
			return await studio(request, env.MY_DURABLE_OBJECT, {
				basicAuth: {
					username: 'admin',
					password: 'password',
				},
			});
		}

		// the rest of your code here
		// ....

		return new Response('Hello World', { status: 200 });
	},
} satisfies ExportedHandler<Env>;

License

MIT