@gluonjs/ssr / packages/ssr/src/eleventy / GluonEleventyAdapterOptions

Interface: GluonEleventyAdapterOptions<Data>

Type Parameters

Data

Data = EleventyData

Properties

assets

readonly assets: AssetManifest | ((data) => AssetManifest | Promise<AssetManifest>)

createRequest

readonly createRequest: (context) => GluonEleventyRequest | Promise<GluonEleventyRequest>

Parameters

context

GluonEleventyRenderContext<Data>

Returns

GluonEleventyRequest | Promise<GluonEleventyRequest>

csp?

readonly optional csp?: string | ((data) => string | Promise<string | undefined> | undefined)

document?

readonly optional document?: (context) => string | Promise<string>

Parameters

context

GluonEleventyDocumentContext<Data>

Returns

string | Promise<string>

dynamicFallbacks?

readonly optional dynamicFallbacks?: readonly string[]

hydrationEntry?

readonly optional hydrationEntry?: string | ((data) => string | Promise<string | undefined> | undefined)

inputExtension?

readonly optional inputExtension?: string

nonce?

readonly optional nonce?: string | ((data) => string | Promise<string | undefined> | undefined)

route?

readonly optional route?: (inputContent, inputPath, data) => GluonEleventyRoute | Promise<GluonEleventyRoute>

Parameters

inputContent

string

inputPath

string

data

Data

Returns

GluonEleventyRoute | Promise<GluonEleventyRoute>

signal?

readonly optional signal?: AbortSignal | ((data) => AbortSignal | Promise<AbortSignal | undefined> | undefined)

Example

Configure assets, route/data mapping, request ownership, nonce and CSP input, hydration entry, document output, and dynamic fallbacks:

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