Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
fastify-overview-ui
Advanced tools
UI for fastify-overview's graphic representation.
This plugin will generate a UI to visualize the structure of your fastify application. Here is a simple example of what you will see:
The previous image shows the home page of the UI. It contains a Radial tree visualization. The graph can be zoomed and panned to explor it regardless its dimensions. It describes the structure of your application:
black
node is a fastify contextred
node is a hookgreen
node is a decoratorblue
node is a routeSo, by reading the graph you can understand the structure of your application and the functions that is beeing executed whenever a route handler is called. To lean how to read the graph, please read the following documentation.
npm i fastify-overview fastify-overview-ui
Note: This plugin requires fastify-overview
to be installed (usage instructions).
await fastify.register(require('fastify-overview'), {...})
await fastify.register(require('fastify-overview-ui'))
The UI will be available at {your app's url}/fastify-overview-ui/
The radial graph must be read from the center to the circle outside, in clockwise direction starting from the 12:00 position (see the fucsia trace):
So, reading the example image above, you can understand the following:
Root plugin
is loaded firstRoutes plugin
is loaded nextNote plugin
is loaded nextchildNodePlugin
is loaded lastEvery black
node is a fastify context that may contain hooks, decorators and routes.
Thanks to the encapsulation
every context has a parent context and it inherits all the hooks, decorators and routes from its parent context.
For example: the GET /note/inheritance
route is a child of the Note plugin
context.
This means that, when a client will call that route, the parents' hooks will be executed first:
globalHook
will be executed first because it is nearest to the center of the graphnoteHook
function will be executed because it is a hook of the Note plugin
context.Moreover, the route handler can access the someSupport
and getAuthor
decorators because they are inherited from parents nodes.
As exercise, you can read the graph and understand the hooks that are executed when the /example/list
route is called.
An example application is provided which can be used to try out the plugin.
npm run build
cd example
npm run dev
http://localhost:3000/fastify-overview-ui
This will use the built version of the application. For developing the plugin see the next section.
An example application is provided which can be used to develop the plugin locally while using the development version of the source code of the client application.
npm run dev
in the example/
foldernpm run dev
in the root folderhttp://localhost:3001
Design proposal can be found in this Figma file.
Licensed under MIT.
FAQs
UI for fastify-overview
We found that fastify-overview-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.