Dioc library in Hoppscotch codebase.
In this article, we review Dioc lbrary in Hoppscotch codebase. We will look at:
-
What is Hoppscotch?
-
What is Dioc library?
-
Dioc usage in Hoppscotch
I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Hoppscotch codebase and wrote this article.
What is Hoppscotch?
Hoppscotch is an open source API development ecosystem — https://hoppscotch.io. It is an alternative to Postman, Insomnia.
Check out the Hoppscotch documentation to learn more.
What is Dioc library?
dioc is a really simple DI/IOC system where you write services (which are singletons per container) that can depend on each other and emit events that can be listened upon.
Example
import { Service, Container } from "dioc"
// Here is a simple service, which you can define by extending the Service class
// and providing an ID static field (of type string)
export class PersistenceService extends Service {
// This should be unique for each container
public static ID = "PERSISTENCE_SERVICE"
public read(key: string): string | undefined {
// ...
}
public write(key: string, value: string) {
// ...
}
}
type TodoServiceEvent =
| { type: "TODO_CREATED"; index: number }
| { type: "TODO_DELETED"; index: number }
// Services have a built in event system
// Define the generic argument to say what are the possible emitted values
export class TodoService extends Service<TodoServiceEvent> {
public static ID = "TODO_SERVICE"
// Inject persistence service into this service
private readonly persistence = this.bind(PersistenceService)
public todos = []
// Services cannot(*) have constructors, but init logic can be mentioned here
override onServiceInit() {
this.todos = JSON.parse(this.persistence.read("todos") ?? "[]")
}
public addTodo(text: string) {
// ...
// You can access services via the bound fields
this.persistence.write("todos", JSON.stringify(this.todos))
// This is how you emit an event
this.emit({
type: "TODO_CREATED",
index,
})
}
public removeTodo(index: number) {
// ...
this.emit({
type: "TODO_DELETED",
index,
})
}
}
// Services need a container to run in
const container = new Container()
// You can initialize and get services using Container#bind
// It will automatically initialize the service (and its dependencies)
const todoService = container.bind(TodoService) // Returns an instance of TodoService
Check out Dioc npm package.
Dioc usage in Hoppscotch
In headerDownloadableLinks.service.ts, you will find the below code:
/**
* Service to manage the downloadable links in the app header.
*/
export class HeaderDownloadableLinksService
extends Service
implements AdditionalLinkSet
{
public static readonly ID = "HEADER_DOWNLOADABLE_LINKS_SERVICE"
public readonly linkSetID = "HEADER_DOWNLOADABLE_LINKS"
private readonly additionalLinkSet = this.bind(AdditionalLinksService)
/**
* List of downloadable links to be shown in the header
* This includes showing the link to the desktop app, PWA, CLI.
*/
private headerDownloadableLinks = ref<Link[]>([
macOS,
windows,
linux,
pwa,
cli,
])
override onServiceInit() {
this.additionalLinkSet.registerAdditionalSet(this)
}
getLinks(): Ref<Link[]> {
// @ts-expect-error show type not recognizing ComputedRef
return this.headerDownloadableLinks
}
}
onServiceInit function calls registerAdditionalSet function and this additionalLinkSet is imported as shown below, at the top:
import {
AdditionalLinkSet,
AdditionalLinksService,
Link,
} from "@hoppscotch/common/services/additionalLinks.service"
About me:
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com