Plugin System Overview

Extend Frame-Master with powerful plugins for frontend frameworks, databases, authentication, and more.

🔌 Capabilities

Add frontend frameworks (React, Vue, Svelte)
Integrate databases and ORMs
Implement authentication and authorization
Process and transform requests/responses
Inject custom build logic
Watch and react to file system changes
Modify HTML output with HTMLRewriter

Quick Example

my-plugin.ts

import type { FrameMasterPlugin } from "frame-master/plugin/types";

export function myPlugin(options = {}): FrameMasterPlugin {
  return {
    name: "my-plugin",
    priority: 50, // Lower = runs first
    
    serverStart: {
      main: async () => {
        // Initialize on server start
      },
    },
    
    router: {
      request: async (master) => {
        // Handle requests
      },
    },
  };
}

Complete Example

analytics-plugin.ts

import type { FrameMasterPlugin } from "frame-master/plugin/types";

export function analyticsPlugin(options: {
  trackingId: string;
  enabled?: boolean;
}): FrameMasterPlugin {
  const { trackingId, enabled = true } = options;

  return {
    name: "analytics-plugin",
    priority: 50,

    serverStart: {
      main: async () => {
        if (enabled) console.log(`Analytics initialized: ${trackingId}`);
      },
    },

    router: {
      before_request: async (master) => {
        master.setContext({ timestamp: Date.now() });
      },

      after_request: async (master) => {
        if (!enabled) return;
        const duration = Date.now() - master.getContext().timestamp;
        console.log(`${master.request.url} - ${duration}ms`);
      },

      html_rewrite: {
        initContext: (req) => ({ trackingId }),
        rewrite: async (reWriter, master, context) => {
          if (!enabled) return;
          reWriter.on("head", {
            element(el) {
              el.append(`<script>window.analytics="${context.trackingId}"</script>`, { html: true });
            },
          });
        },
      },
    },
  };
}