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

Interface: FrameworkOptions

Options accepted by the Gluon Vite framework.

Properties

builder?

optional builder?: BuilderOptions

Example

Type the optional Vite builder settings accepted by the first-party Gluon Storybook framework:

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);