Example repo for 11ty/eleventy#2248.
This gist was created by @pspeter3!
-
-
Save zachleat/b274ee939759b032bc320be1a03704a2 to your computer and use it in GitHub Desktop.
Eleventy 11ty.js Extensions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = function(eleventyConfig) { | |
| // v2.0.0-canary.19 or newer | |
| eleventyConfig.addExtension([ "11ty.jsx", "11ty.ts", "11ty.tsx" ], { | |
| key: "11ty.js", | |
| }); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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 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.
@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.
As a note to others: esbuild-register appears to have landed jsxImportSource last year. Need to investigate how to make it work.
That's for esbuild unfortunately. You need egoist/esbuild-register#84
Author
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
@pspeter3 I think I have
hreplaced, but have some typing things happening. Any chance you're up for a demo repo or a Google Meet?