Web Ext CoreDefining Services
There are several different ways to define a proxy service:
Class
Define a class whose methods are available in other JS contexts:
ts
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),
);ts
// Register
const db = openDB('todos');
registerTodosRepo(db);ts
// 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.
ts
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');
},
}),
);ts
// Register
const db = openDB('todos');
registerTodosRepo(db);ts
// Get an instance
const todosRepo = getTodosRepo();
const todos = await todosRepo.getAll();Function
If you only need to define a single function, you can!
ts
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');
},
);ts
// Register
const db = openDB('todos');
registerGetAllTodos(db);ts
// 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.
ts
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);ts
// Register
const db = openDB('todos');
registerApi(db);ts
// Get an instance
const api = getApi();
const todos = await api.todos.getAll();
const firstAuthor = await api.authors.getOne(todos.authorId);