Alias more extensions as 11ty.js

[pspeter3]

Allow more extensions to be treated at the 11ty.js template engine. This builds on the work of #2249 and solves #2248. A user could run Eleventy via ts-node or esbuild-register and have the appropriate behavior now.

[pspeter3]

In my example, I was able to run node --require esbuild-register node_modules/.bin/eleventy --config=.eleventy.ts to have a configuration file and layouts that were in TypeScript.

[pspeter3]

@zachleat is there a way to make this change to the extension map from the eleventyConfig object instead of baking it into the framework by default?

[DamianOsipiuk]

@pspeter3 You could create a typescript plugin using eleventy 1.x built-in methods. I use similar setup to add TS support in my project.

Sample config using esbuild:

config.addTemplateFormats("11ty.ts");
config.addExtension("11ty.ts", {
  outputFileExtension: "js",
  compile: (_fileContent: string, filePath: string) => {
    return () => {
      return buildSync({
        entryPoints: [filePath],
        write: false,
        bundle: true,
        treeShaking: true,
        minify: options.minify,
        sourcemap: options.sourcemaps,
      }).outputFiles[0].text;
    };
  },
});

The same can be done for data files, but support for it is pending: https://github.com/11ty/eleventy/pull/2188

[pspeter3]

Thanks @DamianOsipiuk. Does this cause the TypeScript files to be treated as normal 11ty.js files after the transformation?

[DamianOsipiuk]

No, this example is only bundling and returning JavaScript, but you could extend it to add the same features.

[pspeter3]

I don't want to have to extend it though. I would ideally like to have the features of the 11ty.js extension by default which I think this would give.

[zachleat]

Can you attach a demo repo or test case showing how this would be used with sample input files? I don’t need a formal code test case written for this repo, just want an easy thing to see a bigger picture of how this would work

[pspeter3]

Yup! I'll make test case next week.

[pspeter3]

@zachleat I made an example repo. I had to remove the patch-package patch since Github would not let me push it to a Gist. It should work otherwise. You can see index.11ty.tsx as the example.

[pspeter3]

Oops! Forgot the link to the Gist https://gist.github.com/pspeter3/56931a837cb854c55bb06024287ead95

[pspeter3]

Just following up, is there something else I can do to help here?

[pspeter3]

Hi! It's been a few months and I'm wondering what I can do to help get this merged?

[zachleat]

Moved this comment: https://github.com/11ty/eleventy/issues/2248#issuecomment-1341732716

[zachleat]

I love the simplicity of this one (the gist was amazing too). I’m working through the aliasing feature to enable this without having to hardcode these extensions in core, I think that will be a better way forward (though more challenging to implement 😅)

[pspeter3]

That sounds great, I'm looking forward to the aliasing solution!