@gluonjs/gluon-components-vite / packages/gluon-components-vite/src / GluonRenderer

Interface: GluonRenderer

Storybook's public renderer contract specialized for Gluon templates.

Extends

WebRenderer

Properties

component

component: GluonStoryComponent

What is the type of the component annotation in this renderer?

Overrides

WebRenderer.component

storyResult

storyResult: TemplateResult

What does the story function return in this renderer?

Overrides

WebRenderer.storyResult

Example

Describe Storybook canvas and story results as native Gluon templates:

import type {
  Decorator,
  FrameworkOptions,
  GluonRenderer,
  GluonStoryComponent,
  Loader,
  Meta,
  Preview,
  StorybookConfig,
  StoryContext,
  StoryFn,
  StoryObj,
} from '@gluonjs/gluon-components-vite';
import { html } from '@gluonjs/core';

const config = {
  stories: ['../src/**/*.stories.ts'],
  framework: '@gluonjs/gluon-components-vite',
} satisfies StorybookConfig;
const meta = {
  title: 'Catalog/Stock label',
  args: { label: 'In stock' },
  render: ({ label }) => html`<strong>${label}</strong>`,
} satisfies Meta<{ label: string }>;
const story = { args: { label: 'Back order' } } satisfies StoryObj<{ label: string }>;
const options: FrameworkOptions = {};
const component: GluonStoryComponent = (args, context: StoryContext) => html`<p data-story=${context.id}>${String(args.label)}</p>`;
const rendererResult = (renderer: GluonRenderer) => renderer.storyResult;
const decorator: Decorator = (Story) => Story();
const loader: Loader = async () => ({ stock: 'available' });
const preview: Preview = { decorators: [decorator], loaders: [loader] };
const storyFn: StoryFn<{ label: string }> = ({ label }) => html`<strong>${label}</strong>`;
console.log(config.framework, story.args?.label, options, rendererResult, preview, storyFn);