Plugins

Overview

Hybridly provides a simple plugin mechanism that allows for globally hooking into its lifecycle events.

This is what powers the built-in progress indicator. This is the equivalent of Inertia's global events, except it provides a structured way to extend its functionalities.

Registering plugins

A plugin can be registered through the plugins property of the initializeHybridly function.

import { MyPlugin } from 'hybridly-plugin-something'

initializeHybridly({
	plugins: [ 
		MyPlugin()
	],
})

Developing plugins

A plugin is a simple object with at least a name property. For convenience, Hybridly exports a definePlugin function that provides typings for plugins.

Aside from hooking into lifecycle events, plugins can detect when Hybridly is initialized through to the initialized hook.

import { definePlugin } from 'hybridly'

export default function MyPlugin(options?: MyPluginOptions) {
  return definePlugin({
    name: 'hybridly:my-plugin',
    initialized(context) {
      console.log('Hybridly has been initialized')
    },
    // Other lifecycle hooks
  })
}

export interface MyPluginOptions {
  // ...
}

Plugin-specific hooks

In addition to the request lifecycle events, the following hooks can be registered in plugins. They may also be awaited if necessary.

export interface Hooks extends RequestHooks {
	/**
	 * Called when Hybridly's context is initialized.
	 */
	initialized: (context: InternalRouterContext) => MaybePromise<any>

	/**
	 * Called after Hybridly's initial load.
	 */
	ready: (context: InternalRouterContext) => MaybePromise<any>

	/**
	 * Called when a back-forward navigation occurs.
	 */
	backForward: (state: any, context: InternalRouterContext) => MaybePromise<any>

	/**
	 * Called when a component navigation is being made.
	 */
	navigating: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>

	/**
	 * Called when a component has been navigated to.
	 */
	navigated: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>

	/**
	 * Called when a component has been navigated to and was mounted by the adapter.
	 */
	mounted: (options: InternalNavigationOptions & MountedHookOptions, context: InternalRouterContext) => MaybePromise<any>
}