Skip to main content

​
Overview

The definePlugin helper creates a TemPad Dev plugin configuration with full TypeScript type inference. It accepts a plugin configuration object and returns it with proper type annotations.

​
Function Signature

export function definePlugin(plugin: Plugin): Plugin

​
Parameters

​
plugin
Plugin
required
Plugin configuration object supplying metadata and code blocks.

​
Returns

​
plugin
Plugin
The same plugin configuration object, enabling type inference in user code.

​
Example

import { definePlugin } from '@tempad-dev/plugins'

export default definePlugin({
  name: 'My Custom Plugin',
  code: {
    css: {
      title: 'CSS',
      lang: 'css'
    },
    scss: {
      title: 'SCSS',
      lang: 'scss',
      transformVariable: ({ code, name, value }) => {
        // Transform CSS variables to SCSS variables
        return `$${name.replace(/^--/, '')}`
      },
      transformPx: ({ value, options }) => {
        // Convert px to rem
        if (options.useRem) {
          return `${value / options.rootFontSize}rem`
        }
        return `${value}px`
      }
    },
    tailwind: {
      title: 'Tailwind',
      lang: 'jsx',
      transformComponent: ({ component }) => {
        // Custom component transformation
        return {
          name: 'div',
          props: { className: 'custom-class' },
          children: []
        }
      }
    }
  }
})

​
Built-in Code Blocks

css

Standard CSS output

js

JavaScript/JSX output

​
Custom Code Blocks

You can define custom code blocks by adding keys to the code object. Custom blocks inherit the same transformation capabilities as built-in blocks.

​
Disabling Code Blocks

Set a code block to false to disable it: 
export default definePlugin({
  name: 'Minimal Plugin',
  code: {
    css: { title: 'CSS', lang: 'css' },
    js: false // Disable JS output
  }
})

​
See Also

Transform Hooks

Learn about transformation functions

Types Reference

Full type definitions