Skip to content

Instantly share code, notes, and snippets.

@zachleat

zachleat/README.md

Forked from pspeter3/.eleventyignore
Last active July 6, 2024 00:09
Show Gist options
  • Save zachleat/b274ee939759b032bc320be1a03704a2 to your computer and use it in GitHub Desktop.
Save zachleat/b274ee939759b032bc320be1a03704a2 to your computer and use it in GitHub Desktop.
Download ZIP
Eleventy 11ty.js Extensions
Raw
README.md
Raw
eleventy.config.js
module.exports = function(eleventyConfig) {
// v2.0.0-canary.19 or newer
eleventyConfig.addExtension([ "11ty.jsx", "11ty.ts", "11ty.tsx" ], {
key: "11ty.js",
});
};
Raw
index.11ty.tsx
import h from "vhtml";
export const data = {
title: "Eleventy 11ty.js Extensions",
};
interface Context {
log(message: string): void;
}
interface Data {
readonly title: string;
}
export function render(this: Context, { title }: Data) {
this.log(title);
return (
<html lang="en">
<head>
<title>{title}</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.min.css"
integrity="sha256-TMMCiSUqLaqob0cQkqOwl6oJLd2X5WKYJ4ML+BQRQOA="
crossorigin="anonymous"
></link>
</head>
<body>
<main className="container">
<h1>{title}</h1>
<p>
Example repo to show the value of{" "}
<a href="https://github.com/11ty/eleventy/issues/2248">
11ty/eleventy#2248
</a>
.
</p>
</main>
</body>
</html>
);
}
Raw
package.json
{
"name": "11ty-extensions",
"description": "Example repo to show the value of https://github.com/11ty/eleventy/issues/2248",
"scripts": {
"build": "node --require esbuild-register node_modules/.bin/eleventy",
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/56931a837cb854c55bb06024287ead95.git"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.0-canary.19",
"@types/vhtml": "^2.2.4",
"esbuild-register": "^3.3.2",
"patch-package": "^6.4.7",
"typescript": "^4.6.3",
"vhtml": "^2.2.0"
}
}
Raw
tsconfig.json
{
"compilerOptions": {
"target": "es2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"jsx": "react", /* Specify what JSX code is generated. */
"jsxFactory": "h", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
"module": "commonjs", /* Specify what module code is generated. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
@pspeter3
Copy link

I'd like to clean up the types better but I got a working prototype with the following:

import { createContext } from "preact";
import { useContext } from "preact/hooks";
import type { FunctionComponent, VNode } from "preact";

export interface EleventyContext {}

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

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

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

export function useEleventyContext(): EleventyContext {
  const value = useContext(Context);
  if (value === null) {
    throw new Error("Missing EleventyContext");
  }
  return value;
}

@pspeter3
Copy link

This is the way I set up the component

import { Name } from "./_components/name";
import { createEleventContextProvider } from "./_utilities/eleventy-context";

export const data = {
  layout: "html",
  title: "Preact Test",
};

export const render = createEleventContextProvider(
  ({ data: title }: { data: typeof data }) => (
    <>
      <h1>{title}</h1>
      <Name />
    </>
  )
);

The Name component is using the useEleventyContext hook as a test but it's not actually important here.

@pauleveritt
Copy link

Nicer than what I came up with, thanks @pspeter3

@pauleveritt
Copy link

@pspeter3 Can I see your component? Curious if you've eliminated import of h and what are your return types.

@pspeter3
Copy link

pspeter3 commented May 5, 2023

I did manage to eliminate h but I think there is an issue with esbuild-register not respecting the jsx-import-source flag.

@pauleveritt
Copy link

@pspeter3 I think I have h replaced, but have some typing things happening. Any chance you're up for a demo repo or a Google Meet?

@pauleveritt
Copy link

@pspeter3 Here's a recreation of what I'm struggling with. I can make a full repo if it would help https://gist.github.com/pauleveritt/bef52a4f1f7dd9d7d77ed5d53d8d08a3

My guess is that .bind isn't doing what I think it's doing. But inside MyView, the this isn't what it's supposed to be. I tried adding it to the MyView args list but couldn't get the typing right.

@pauleveritt
Copy link

@pspeter3 I made a repo with the minimal example but the render function is returning an object (from JSX processing) when 11ty expects a string. Obviously I don't have the h/rendering installed correctly in tsconfig.

@pauleveritt
Copy link

As a note to others: esbuild-register appears to have landed jsxImportSource last year. Need to investigate how to make it work.

@pspeter3
Copy link

That's for esbuild unfortunately. You need egoist/esbuild-register#84

@zachleat
Copy link
Author

zachleat commented Jun 3, 2024

Both the above esbuild-register and new tsx approaches are now on the official docs, thanks everyone!

https://www.11ty.dev/docs/languages/typescript/
https://www.11ty.dev/docs/languages/jsx/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment