Defining Services

There are several different ways to define a proxy service.

Class

Define a class whose methods are available in other JS contexts:

import { openDB, IDBPDatabase } from 'idb';
import { defineProxyService } from '@webext-core/proxy-service';

class TodosRepo {
  constructor(private db: Promise<IDBPDatabase>) {}

  async getAll(): Promise<Todo[]> {
    return (await this.db).getAll('todos');
  }
}

export const [registerTodosRepo, getTodosRepo] = defineProxyService(
  'TodosRepo',
  (idb: Promise<IDBPDatabase>) => new TodosRepo(idb),
);

// Register
const db = openDB('todos');
registerTodosRepo(db);

// Get an instance
const todosRepo = getTodosRepo();
const todos = await todosRepo.getAll();

Object

Objects can be used as services as well. All functions defined on the object are available in other contexts.

import { openDB, IDBPDatabase } from 'idb';
import { defineProxyService } from '@webext-core/proxy-service';

export const [registerTodosRepo, getTodosRepo] = defineProxyService(
  'TodosRepo',
  (db: Promise<IDBPDatabase>) => ({
    async getAll(): Promise<Todo[]> {
      return (await this.db).getAll('todos');
    },
  }),
);

// Register
const db = openDB('todos');
registerTodosRepo(db);

// Get an instance
const todosRepo = getTodosRepo();
const todos = await todosRepo.getAll();

Function

If you only need to define a single function, you can!

import { openDB, IDBPDatabase } from 'idb';
import { defineProxyService } from '@webext-core/proxy-service';

export const [registerGetAllTodos, getGetAllTodos] = defineProxyService(
  'TodosRepo',
  (db: Promise<IDBPDatabase>) =>
    function getAllTodos() {
      return (await this.db).getAll('todos');
    },
);

// Register
const db = openDB('todos');
registerGetAllTodos(db);

// Get an instance
const getAllTodos = getGetAllTodos();
const todos = await getAllTodos();

Nested Objects

If you need to register "deep" objects containing multiple services, you can do that as well. You can use classes, objects, and functions at any level.

import { openDB, IDBPDatabase } from 'idb';
import { defineProxyService } from '@webext-core/proxy-service';

class TodosRepo {
  constructor(private db: Promise<IDBPDatabase>) {}

  async getAll(): Promise<Todo[]> {
    return (await this.db).getAll('todos');
  }
}

const createAuthorsRepo = (db: Promise<IDBPDatabase>) => ({
  async getOne(id: string): Promise<Todo[]> {
    return (await this.db).getAll('authors', id);
  },
});

function createApi(db: Promise<IDBPDatabase>) {
  return {
    todos: new TodosRepo(db),
    authors: createAuthorsRepo(db),
  };
}

export const [registerApi, getApi] = defineProxyService('Api', createApi);

// Register
const db = openDB('todos');
registerApi(db);

// Get an instance
const api = getApi();
const todos = await api.todos.getAll();
const firstAuthor = await api.authors.getOne(todos.authorId);
Table of Contents