tessl/npm-storybook--vue

Storybook Vue 2.x renderer that enables Vue 2.x component story development and documentation (Note: @storybook/vue3 is separate)

—

Pending

Overview

Eval results

Files

Vue Rendering System

Name: tessl/npm-storybook--vue
Author: tessl

Core rendering functionality that handles Vue component mounting, lifecycle management, and DOM integration within the Storybook environment.

Capabilities

Render Function

Default Vue story render function that creates Vue component instances with proper args and context handling.

/**
 * Default Vue story render function
 * @param args - Story arguments passed to the component
 * @param context - Story context containing component and metadata
 * @returns Vue component definition for rendering
 */
function render(args: Args, context: StoryContext): VueRenderer['storyResult'];

interface StoryContext<TArgs = StrictArgs> extends GenericStoryContext<VueRenderer, TArgs> {
  id: string;
  component: VueRenderer['component'];
  argTypes: StrictArgTypes;
}

Usage Example:

import { render } from "@storybook/vue";
import type { Meta, StoryObj } from "@storybook/vue";
import MyButton from "./MyButton.vue";

const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
  render, // Use custom render function
};

export default meta;

export const CustomRender: StoryObj<typeof meta> = {
  render: (args, context) => {
    return {
      components: { MyButton },
      setup() {
        return { args };
      },
      template: `
        <div style="padding: 20px;">
          <MyButton v-bind="args" />
        </div>
      `,
    };
  },
  args: {
    label: "Custom Rendered Button",
  },
};

Render To Canvas

Renders a story to the DOM canvas element, handling Vue component mounting and lifecycle.

/**
 * Render story to DOM canvas element
 * @param renderContext - Context containing story function and display handlers
 * @param canvasElement - DOM element to render the story into
 */
function renderToCanvas(
  renderContext: RenderContext<VueRenderer>,
  canvasElement: VueRenderer['canvasElement']
): void;

interface RenderContext<TRenderer extends Renderer> {
  title: string;
  name: string;
  storyFn: LegacyStoryFn<TRenderer>;
  showMain: () => void;
  showError: (args: ShowErrorArgs) => void;
  showException: (err: Error) => void;
  forceRemount: boolean;
}

Renderer Constants

Constants used internally by the rendering system for component data management.

/**
 * Vue component data key for storing the active component
 */
const COMPONENT = 'STORYBOOK_COMPONENT';

/**
 * Vue data key for storing component prop values
 */
const VALUES = 'STORYBOOK_VALUES';

/**
 * Alias for decorateStory function (used in preview entry)
 */
function applyDecorators(
  storyFn: LegacyStoryFn<VueRenderer>,
  decorators: DecoratorFunction<VueRenderer>[]
): LegacyStoryFn<VueRenderer>;

Internal Rendering Details

Component Instance Management

The renderer maintains a map of canvas elements to Vue instances for efficient re-rendering:

// Internal implementation details (not part of public API)
const map = new Map<VueRenderer['canvasElement'], VueInstance>();

function getRoot(canvasElement: VueRenderer['canvasElement']): VueInstance {
  // Returns cached or creates new Vue instance
}

Automatic Component Wrapping

The render function automatically creates wrapper components that handle:

Props Binding: Automatic binding of story args to component props
Event Handling: Automatic event listener setup for component events
Template Generation: Dynamic template creation based on component structure
Reserved Tag Handling: Automatic prefixing of reserved HTML tag names

Example of Generated Template:

// For a component named MyButton with events
template: `<MyButton @click="$props['onClick']" v-bind="filterOutEventProps($props)" />`

Error Handling

The rendering system provides comprehensive error handling:

interface ShowErrorArgs {
  title: string;
  description: string;
}

Common Error Scenarios:

Missing component annotation
Invalid component names
Template rendering failures
Vue instance mounting errors

Usage Example:

// Error handling in custom render function
export const ErrorExample: StoryObj = {
  render: (args, context) => {
    if (!context.component) {
      throw new Error(`Component missing for story ${context.id}`);
    }
    
    return {
      components: { MyComponent: context.component },
      template: '<MyComponent v-bind="args" />',
      setup() {
        return { args };
      },
    };
  },
};

Hot Module Replacement

The rendering system supports hot module replacement for efficient development workflows:

// HMR handling (internal)
if (typeof module !== 'undefined') {
  module?.hot?.decline(); // Stop HMR propagation
}

Canvas Management

Vue 2.x mount behavior requires special canvas management:

Creates child elements for mounting (Vue 2 replaces mount targets)
Preserves canvas element references for play functions
Handles component lifecycle during story switching
Manages cleanup when stories unmount

Install with Tessl CLI

npx tessl i tessl/npm-storybook--vue

docs