eleventy-upgrade-help v3.0?

[rocc-o]

I can't wait until Eleventy 3.0 is ready and stable to upgrade my 2.0 version. I want to use ES Modules Dynamic Import in my project.
Meanwhile I'm looking at the instructions in Calling all courageous canary testers for Eleventy v3.0
However, given my limitations, there are some things that are not entirely clear to me:

For example, in .eleventy.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");
it should become

const { EleventyRenderPlugin } = await import("@11ty/eleventy");
eleventyConfig.addPlugin(EleventyRenderPlugin);

Is that so?

And what about const htmlmin = require("html-minifier"); ?

Which modules should become const module = await import(modulePath); and which not?

Will there be a plugin to help with the upgrade, like eleventy-upgrade-help v3.0?

Will WebC become a core template language in Eleventy 3.0? If so, @11ty/eleventy-plugin-webc must be removed?

[jeromecoupe]

Migrating to ESM can be a bit daunting at first but, when you get going, it should be quite straightforward. I converted my (fairly simple) website in less than an hour. Creating a new branch for the conversion made me fell a lot ore at ease with the process ;o)
I started with adding type="module" to my package.json and them moved to eleventy.config.js

Example for a plugin

This:
const { EleventyRenderPlugin } = require("@11ty/eleventy");
Should become
import { EleventyRenderPlugin } from "@11ty/eleventy";

Beyond the config, I mainly had to convert filters, shortcodes and global and directory data files to ESM syntax.

What helped me most was to look at other ESM conversions and find out what was changed in various files

• Here is a list of the modified files on the 11ty website
• Here is a lit of the modified files on my website. I dealt with node specific modules in this other commit.

If you go step by step you should be fine. Good luck !

[rocc-o]

Thank you Jerome, and sorry for the late reply. I'll wait for the stable release and will proceed as per you examples.

[mendhak]

Just wanted to share as well, in case it helps future searchers. I did an ESM conversion too, the commit is here: mendhak/eleventy-satisfactory@d416179

It didn't turn out to be too difficult, so IMO it's worth trying out locally.

Most of the module.exports became export default. The library requires became imports.

One thing that caught me out, I used to read in a JSON file using the convenient const metadata = require('xyz.json'); but I couldn't just import JSON files in ESM. I had to replace it with:

import { readFile } from 'fs/promises';
const metadata = JSON.parse(
  await readFile(
    new URL('xyz.json', import.meta.url)
  )
);

The above is part of this PR I am testing with v3 canary to weed out any issues.

[bobmonsour]

Thanks for sharing that bit about reading JSON files. I have not yet converted, but I do rely on the same "require" way that you showed for reading JSON files for a site I maintain. No doubt that you saved me a ton of debug time.

[bobmonsour]

@mendhak I just came across this way of effectively doing the same kind of "require" as we did in the commonjs days. I thought you'd be interested.