@gluonjs/ssr / packages/ssr/src/eleventy / gluonEleventyPlugin

Function: gluonEleventyPlugin()

gluonEleventyPlugin<Data>(eleventyConfig, options): void

Registers a request-isolated Gluon SSR renderer as an Eleventy custom template format.

Type Parameters

Data

Data = EleventyData

Parameters

eleventyConfig

EleventyConfiguration

options

GluonEleventyAdapterOptions<Data>

Returns

void

Example

import { createApp, html } from '@gluonjs/core';
import { renderRequest } from '@gluonjs/ssr';
import {
  gluonEleventyPlugin,
  renderEleventyPage,
  type EleventyConfiguration,
  type EleventyData,
  type EleventyExtension,
  type GluonEleventyAdapterOptions,
  type GluonEleventyDocumentContext,
  type GluonEleventyRenderContext,
  type GluonEleventyRequest,
  type GluonEleventyRoute,
} from '@gluonjs/ssr/eleventy';

type PageData = EleventyData & { readonly locale: string };
const options = {
  assets: { entry: '/assets/app.js', imports: ['/assets/vendor.js'] },
  dynamicFallbacks: ['/products/:slug'],
  route: (content: string): GluonEleventyRoute => ({ url: content.trim() }),
  createRequest: (context: GluonEleventyRenderContext<PageData>): GluonEleventyRequest => ({
    render: () => renderRequest({
      url: context.url,
      state: { locale: context.data.locale },
      createApp: () => createApp(() => html`<main>${context.url}</main>`),
    }),
  }),
  document: (context: GluonEleventyDocumentContext<PageData>) =>
    `<!doctype html><head>${context.result.head}</head><body>${context.result.html}${context.result.stateScript}</body>`,
} satisfies GluonEleventyAdapterOptions<PageData>;

let extension: EleventyExtension | undefined;
const config: EleventyConfiguration = {
  addTemplateFormats() {},
  addExtension(_name, value) { extension = value; },
};
gluonEleventyPlugin(config, options);
const output = await renderEleventyPage(options, '/', 'index.gluon', { locale: 'en' });
console.log(extension?.outputFileExtension, output);