Try to get `this` into a layout view.

foo.test.tsx

import type { FunctionComponent, VNode } from "preact";
import { createContext, render as preactRender } from "preact";
import { expect, test } from "vitest";

export type EleventyContext = {
  siteTitle: string;
};

const Context = createContext<EleventyContext | null>(null);

export type EleventyComponent<T> = (
  this: EleventyContext,
  data: T
) => VNode<{}>;

export function createEleventyContextProvider<T>(
  Component: FunctionComponent<{ data: T }>
): EleventyComponent<T> {
  return function (this: EleventyContext, data: T): VNode<{}> {
    return (
      <Context.Provider value={this}>
        <Component data={data} />
      </Context.Provider>
    );
  };
}

type PageData = {
  title: string;
};

const ThisView = ({ data }: { data: PageData }) => {
  // I'm struggling to get this: EleventyContext set correctly for both
  // typing and the actual this value.
  return (
    <>
      <h1 id="target">{data.title}</h1>
    </>
  );
};

export const render = createEleventyContextProvider<PageData>(ThisView);

test("should render", () => {
  const thisContext: EleventyContext = {
    siteTitle: "My Site",
  };
  const data: PageData = {
    title: "Preact Test",
  };
  // This simulates what 11ty might do....I think.
  const view = render.bind(thisContext)(data);
  preactRender(view, document.body);
  const target = document.getElementById("target");
  // The title should be Preact Test
  expect(target?.textConten``t).to.equal(data.title);
});