Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

eleventyConfig.addExtension() not working as expected since 3.0.0-alpha.11 #3326

Closed
ep-wessner opened this issue Jun 18, 2024 · 5 comments
Closed

eleventyConfig.addExtension() not working as expected since 3.0.0-alpha.11 #3326

ep-wessner opened this issue Jun 18, 2024 · 5 comments
Labels
education

Comments

@ep-wessner
Copy link

ep-wessner commented Jun 18, 2024 •
edited
Loading

Operating system

macOS - node v18.19.1 - npx v10.2.4

Eleventy

3.0.0-alpha.11 - 3.0.0-alpha.13

Describe the bug

Hi guys,
I tryed my first step and followed a beginner tutorial. when it comes to the point, where switching from js to ts(x), the build is no longer working. With js it works perfect.

my config file:

export default function (eleventyConfig: any) {
    eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx", "bar.js"], {
        key: "11ty.js",
    });
    eleventyConfig.addTransform("tsx",  async (content: any) => {
        const result = await renderToString(content);
        return `<!doctype html>\n${result}`;
    });
    console.log( eleventyConfig.extensionMap  )
    console.table( eleventyConfig.extensionConflictMap  )
    return {
        dir: {
            input: "src",
            output: "build",
        },
    };
}

I also tested with "bar.js" to be sure it's not a TS issue.

Bildschirmfoto 2024-06-18 um 16 18 41
Bildschirmfoto 2024-06-18 um 16 19 25
(the console.log(234) can be ignored it comes from my foo.bar.js test file)

When I downgrade the version of @11ty/eleventy to alpha.10 it works as expected with 11 or newer it breaks.

Thanks guys :)

Reproduction steps

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See an error

Expected behavior

should handle all files as expected ;)

Reproduction URL

No response

Screenshots

No response
@zachleat
Copy link
Member

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/

@ep-wessner
Copy link
Author

ep-wessner commented Jun 19, 2024 •
edited
Loading

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"
  }
}

@ep-wessner
Copy link
Author

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",
};

@ep-wessner
Copy link
Author

ep-wessner commented Jun 19, 2024 •
edited
Loading

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

@zachleat
Copy link
Member

No worries at all! Glad you got it working!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
education
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zachleat @ep-wessner