#Render plugins

Render plugins convert HAST nodes into Uni App render descriptions. Each description contains a slot name, props, and children for the .uvue components to display. Prefer Slot plugins when only the presentation needs to change.

#Match and render

This example sends blockquote nodes to the Blockquote slot:

import type {
  UniRenderMatchParams,
  UniRenderParams,
} from '@fluxdown/uni-app-plugins/base';

import {
  BaseUniRenderPlugin,
  createTypeOfSlot,
  isElementWithTag,
} from '@fluxdown/uni-app-plugins/base';

const Blockquote = /*#__PURE__*/ createTypeOfSlot('Blockquote');

export class QuoteRenderPlugin extends BaseUniRenderPlugin {
  static readonly key = 'render-custom-quote';

  match({ node }: UniRenderMatchParams) {
    return isElementWithTag(node, 'blockquote');
  }

  render({ node, getProps, renderChildren }: UniRenderParams) {
    if (!isElementWithTag(node, 'blockquote')) {
      return null;
    }

    return Blockquote(getProps(node), renderChildren(node));
  }
}

Import BaseUniRenderPlugin, createTypeOfSlot, node helpers, and render parameter types from @fluxdown/uni-app-plugins/base.

match decides whether to handle a node. renderChildren continues rendering its children, and getProps preserves node properties. createTypeOfSlot returns a callable description builder; it does not instantiate a component.

#Register the plugin

import type { IPluginItem } from '@fluxdown/uni-app-plugins/typings';

import { QuoteRenderPlugin } from './render';

export const QuotePlugin: IPluginItem = {
  renders: [QuoteRenderPlugin],
};

Pass QuotePlugin through the component's plugins prop. Full and Lite already include a Blockquote slot; Raw requires its slot plugins explicitly.

#Return values

render can return text, numbers, null, arrays of those values, or slot descriptions. To display your own .uvue component directly, return { component, props, key? }:

import Citation from './Citation.uvue';

return {
  component: Citation,
  props: { label: 'Reference' },
};

Citation is a component implemented by your application. Import the return type, UniRenderNode, from @fluxdown/uni-app-plugins/typings.

At equal priority, later render plugins match first. A lower priority runs earlier. See Composite plugins to combine related render, slot, and parser plugins.