Frontend Runtime Overview
How frontend plugins are loaded and bootstrapped.
The frontend plugin runtime lives in app/lib/plugins and runs in the browser. Plugin implementations live in app/plugins and are registered in app/plugins/registry.ts.
my-plugin.tsx
registry.ts
Lifecycle
PluginHost in app/lib/plugins/PluginHost.tsx wraps the application.PluginProvider creates the plugin context (API, storage, events, route).Each plugin may run
bootstrap(ctx) once and return a cleanup function.The registry (
app/plugins/registry.ts) exports the plugin list used by the runtime.Registration
Add new frontend plugins to the registry so the runtime can pick them up.
// app/plugins/registry.ts
import myPlugin from './my-plugin';
export const plugins = [myPlugin];The list order is the execution order for slots and bootstrap hooks.
Client-side plugins
Frontend plugins run in the browser. Add use client to plugin files that use hooks or browser APIs.
Plugin shape
import type { FrontendPlugin } from '@/lib/plugins/types';
const plugin: FrontendPlugin = {
name: 'my-plugin',
version: '0.1.0',
enabled: true,
bootstrap: (ctx) => {
ctx.logger.info('plugin booted');
return () => ctx.logger.info('plugin cleaned up');
},
slots: {
global: ({ ctx }) => <div>Global UI</div>
},
mounts: [
{
selector: '[data-plugin-anchor="checkout-summary"]',
component: ({ ctx }) => <div>Injected UI</div>,
order: 10
}
]
};
export default plugin;Enabling and disabling
enabled can be a boolean or a function. When enabled returns false, the plugin is skipped.