Hooks

The build hooks in handoff.config, for changing bundler settings, property schemas, validation, and Handlebars helpers.

hooks in the config is a set of optional functions that Handoff calls during a component build. These are all the hooks that Handoff 2.1 calls.

Hook	Called with	Returns
`ssrBuildConfig`	The esbuild options for the server render of a React preview	Changed esbuild options
`clientBuildConfig`	The esbuild options for the browser bundle of an interactive React preview	Changed esbuild options
`jsBuildConfig`	The Vite config for an item's JavaScript entry	Changed Vite config
`cssBuildConfig`	The Vite config for an item's stylesheet entry	Changed Vite config
`htmlBuildConfig`	The Vite config for an item's preview HTML	Changed Vite config
`getSchemaFromExports`	The exports of an item's schema module	The schema object
`schemaToProperties`	That schema	The property map shown in the property table
`validateComponent`	A built component	A record of validation results
`registerHandlebarsHelpers`	The Handlebars runtime and the item context	Nothing

Bundler hooks

Stylesheet loaders are re-applied after ssrBuildConfig and clientBuildConfig, so a .css, .scss, or .sass import stays out of the JavaScript graph whatever the hook returns.

Interactive React previews use the minified production build of React. To get React development warnings back in the workspace, turn off minification and set a development NODE_ENV, then rebuild with --force:

handoff.config.ts

import { defineConfig } from 'handoff-app'

export default defineConfig({
  hooks: {
    clientBuildConfig: (config) => ({
      ...config,
      minify: false,
      define: { ...config.define, 'process.env.NODE_ENV': '"development"' },
    }),
  },
})

Validation

validateComponent runs when handoff-app validate:components builds the catalog. Each key of the result is one check:

handoff.config.ts

hooks: {
  validateComponent: async (component) => ({
    a11y: {
      description: 'Accessibility check',
      passed: true,
      messages: ['No accessibility issues found'],
    },
  }),
},

Handlebars helpers

registerHandlebarsHelpers runs after Handoff registers its built-in helpers, once per preview render. The context has handlebars, componentId, properties, and injectFieldWrappers (true for inspect-mode renders).

handoff.config.ts

hooks: {
  registerHandlebarsHelpers: ({ handlebars, componentId }) => {
    handlebars.registerHelper('upperId', () => componentId.toUpperCase())
  },
},

Hooks

Bundler hooks

Validation

Handlebars helpers

On this page