Comments (5)
No worries at all! Glad you got it working!
from eleventy.
What are you using to process your .tsx files?
We have approaches for both esbuild-register and tsx
on our docs here: https://www.11ty.dev/docs/languages/typescript/
from eleventy.
Hey,
I have following config in my package.json
{
"name": "eleventy-playground",
"version": "1.0.0",
"description": "playground",
"type": "module",
"scripts": {
"build": "tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts",
"start": "tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts --serve --incremental",
"test": "vitest run"
},
"author": "me",
"license": "ISC",
"dependencies": {
"@11ty/eleventy": "3.0.0-alpha.10",
"jsx-async-runtime": "^0.1.8"
},
"devDependencies": {
"@testing-library/dom": "^10.1.0",
"prettier": "^3.3.2",
"tsx": "^4.15.6",
"vitest": "^1.6.0",
"happy-dom": "^14.12.0"
}
}
from eleventy.
When I tried with:
eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
key: "11ty.js",
compile: function () {
return async function (data) {
const content = await this.defaultRenderer(data);
return renderToStaticMarkup(content);
};
},
});
then I get an error because content is an object and not a string. With and additional await renderToString(content);
the html gets decoded.
my example looked like:
export const render = ({ page }: ViewProps): JSX.Element => {
return <Index filePathStem={page.filePathStem} />;
};
export const data = {
layout: "Main.11ty.tsx",
title: "My Rad JavaScript Blog Post",
};
with following code i get the same error
export const render = ({ page }: ViewProps): JSX.Element => {
return `<h1>${page.filePathStem}</h1>`;
};
export const data = {
layout: "Main.11ty.tsx",
title: "My Rad JavaScript Blog Post",
};
from eleventy.
I played a bit more around and get it to run.
Config:
import "tsx/esm";
import { renderToString } from "jsx-async-runtime";
export default function (eleventyConfig: any) {
eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
key: "11ty.js",
});
eleventyConfig.addTransform(
"tsx",
async (content: JSX.Element): Promise<string> => {
const result = await renderToString(content);
return `<!doctype html>\n${result}`;
},
);
return {
dir: {
input: "src",
output: "build",
layouts: "layout",
},
};
}
My (dirty) example code:
import { ViewProps } from "./interface";
export type IndexProps = {
filePathStem: string;
};
export type HeadingProps = {
children?: any;
size?: 1 | 2 | 3 | 4 | 5 | 6;
};
// {size}: {children}
export const Heading = ({ children, size = 2 }: HeadingProps) => {
switch (size) {
case 1:
return <h1>{children}</h1>;
case 2:
return <h2>{children}</h2>;
case 3:
return <h3>{children}</h3>;
case 4:
return <h4>{children}</h4>;
case 5:
return <h5>{children}</h5>;
case 6:
return <h6>{children}</h6>;
}
};
export const Index = ({ filePathStem }: IndexProps): JSX.Element => {
return <Heading>{filePathStem}</Heading>;
};
export const data = {
layout: "Main.11ty.tsx",
title: "My Rad JavaScript Blog Post",
};
export const render = ({ page }: ViewProps): JSX.Element => {
return (
<>
<Index filePathStem={"sdfsdf"} />
</>
);
};
and ther command to start:
"start": "npx tsx ./node_modules/.bin/eleventy --config=eleventy.config.ts --serve --incremental --formats=11ty.tsx,md",
I would say the main problem was sadly in front of my computer.
The change between the 10->11 version and the not working suggestion from the docu was confusing me...
But thx for the great project and your fast response :)
from eleventy.
Related Issues (20)
- eleventyConfig.resolvePlugin to add core-bundled Eleventy plugins without require/import HOT 1
- Also expose date as extra Luxon object
- `--quiet=true` doesn't set `config.quietMode` to `true` HOT 1
- New transforms-esque feature that runs earlier, modifies HTML before inserted in collections/layouts HOT 1
- v3.0.0-alpha.11 Regression with InputPathToUrl plugin: `#anchor` Links Point to Root `/` HOT 2
- `renderTransforms` filter not rendering `inputPathToUrl` transform plugin HOT 4
- Hot reload is only working for files in the root directory (WSL) HOT 2
- Eleventy 3.0.0-alpha.13: Content date results in TemplateContentPrematureUseError: Tried to use templateContent too early on error HOT 3
- `page.outputFileExtension` does not take into account the value of `permalink` HOT 2
- `--incremental=filename.md` for incremental build without `--watch` or `--serve` HOT 6
- 11ty don't recognize multiline shortcode LiquidJS HOT 1
- Remove `htmlOutputSuffix` Common Pitfall when input and output directories match. HOT 1
- New files not using directory template if files are in folder (in Windows)
- TSX, components, and shortcodes HOT 6
- Liquid & separating shortcode params to separate lines
- Cannot read properties of undefined (reading 'filter') HOT 2
- Allow --incremental Builds to process more than one queued file at a time HOT 1
- Add glob support to Incremental CLI argument `--incremental=glob` HOT 2
- Add `useData: false` option to allow custom template engines to opt-out of Data Cascade for templates HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy.