Is hookable adequate for sequential plugin systems?

[ChrisGV04]

Hi!

I'm building an internal ecommerce software for my company using Nuxt and Nitro. I'm planning on adding a plugin system to it that allows extending the behavior of the core.

I would like to add certain hooks for most core processes such as order:before-create and order:after-create to which plugins can hook into and either perform an action, or provide new data to override the core functionality.

Example

I install a GiftPlugin which will add a gift to every order above $100. To achieve this, I would have a POST /api/orders endpoint at the core of the system, and before saving the order to the database I would call the order:before-create hook with the core order data as an argument.

The GiftPlugin will add the gift product to the line items and return the new order data. The order returned by the plugin is the one that should be saved to the database.

Also, the core should allow multiple plugins to edit the order sequentially and each hook would receive the result from the previous plugin.

What I tried

I added a hook to my Nitro app called order:before-create and called it like this:

/** POST /api/orders */
export default defineEventHandler(async (event) => {
  const nitro = useNitroApp();

  // Create core order
  const coreOrder: Order = {
    /* Order fields... */
  };

  /** Before create hook */
  const orderData = await nitro.hooks.callHookWith(
    async (hooks, args) => {
      let hookResult: Order = args[0];

      for (const hook of hooks) {
        hookResult = await hook(hookResult);
      }

      return hookResult;
    },
    'orders:before-create',
    coreOrder,
  );

  // Save the order after hooks
  await orderData.save();

  // Other core functionality...

  return { id: coreOrder.id };
});

I would love to know if this is an adequate implementation of what I'm trying to achieve, if there's something I'm doing wrong or if hookable is even the right choice for something like this.

Thank you!

[ChrisGV04]

Does anyone have any feedback, suggestions or opinions on this topic?

[pi0]

Hookable calls hooks sequentially by the order which they were registered. Perhaps you could scope down your question what are you mainly looking for? (runnable minimal reproduction are always helpful)

[ChrisGV04]

Thank you for the reply!
I don't have a reproduction since I haven't even starting working on the project until I can be sure of how to implement this feature.

I will try to explain in detail to the best of my ability.

App context

Imagine an ecommerce website. Your customers can purchase products from it and they are stored in the database at the Orders table.

When a customer creates an order, the Nitro event handler performs all of the checks to verify the order is valid. However, I want to develop a simple plugin system that allows external plugins to read and alter the data if necessary.

For that, I want to expose a server side hook called orders:before-create which will be called before saving the order in the database so that any plugin can do their own processing on the data.

Each plugin that hooks onto the orders:before-create hook must be able to run sequentially, so the plugin that gets registered first, will get the original order data and can modify it if it needs to. Then, the next plugin will get the data after being processed by the previous plugin, and so on until every plugin has been executed.

Finally, after the Nitro event handler called the orders:before-create hook and every plugin ran successfully, it should get the final order data which is what the last plugin returned.

/** POST /api/orders */
export default defineEventHandler(async (event) => {
  const nitro = useNitroApp();

  // Create core order
  const originalOrder = {
    /* Order fields such as customer ID, total price... */
  };

  /** Before create hook */
  const orderData = await nitro.hooks.callHookWith(
    async (hooks, args) => {
      let hookResult: Order = args[0];

      for (const hook of hooks) {
        hookResult = await hook(hookResult);
      }

      return hookResult;
    },
    'orders:before-create',
    originalOrder,
  );

  // Save the order after hooks
  await orderData.save();

  // Other core functionality...

  return { id: orderData.id };
});

Plugin example

Imagine a plugin that should be able to add a gift to every order above $100 USD. To do so, it must be registered to run whenever the orders:before-create hook gets called so that it can add the gift if applicable.

/* server/plugins/01.gifts.ts */
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook("orders:before-create", async (orderData) => {
    if (orderData.total >= 100) {
      orderData.items.push({ name: "Gift", price: 0 })
    }

    return orderData;
  });
})

Is hookable adequate for this use case?

I should be able to create any hook I want at the Nitro level and plugins can add their own handlers to each hook. They must always run sequentially in the same order of registration and each plugin must get the data from the previous one so that it can apply it's own modifications or simply read it (for example, always register a logs plugin last so that it logs the final order data)

[pi0]

Thanks for the nice explanation ❤️

Your solution looks nice, you can make the first arg to callHookWith reusable util.

I have made a follow-up discussion in hookable if we can make it built-in also: unjs/hookable#111