Closed dpfavand closed 3 years ago
Unsure of your setup, but I just re-tried the example 11ty version in this repo and it works fine (node 15) https://github.com/shikijs/twoslash/tree/main/examples/eleventy
Perhaps replit is timing out due to hardware constraints?
Thanks for checking the example. I've been doing some more testing, and seem to have gotten past that error and run into another. So I don't think it was hardware constraints - it's even stranger.
My local machine is WSL Ubuntu with Node 14 and 15 (via nvm).
I'm using your example repo and mine.
Locally I tested 14 and 15, and used 12 in the replit. Node 15 worked, but 12 and 14 didn't. This was disappointing because 14 is LTS and I was hoping this library would work on Node LTS. However, then I tested something else - the Eleventy build command.
npx @11ty/eleventy
vs eleventy
I noticed that my initial build command followed the current Eleventy getting started guide: npx @11ty/eleventy
. I set this as the build
script in my package.json
. On a whim I swapped it out for a more traditional eleventy
command. And it worked! On both my local Node 14 and Replit's Node 12. Mostly...
Cannot read property 'split' of undefined
Although calling the build process through eleventy
rather than npx @11ty/eleventy
got past the async load error in my original issue, my repository runs into a different error, Cannot read property 'split' of undefined
at https://github.com/shikijs/twoslash/blob/main/packages/remark-shiki-twoslash/src/index.ts#L35 - it appears that metaString
is undefined at that point.
This occurs on my example in Node 12 and 14, but not in your example on Node 14. Your example also uses what I think is an old canary version of Eleventy. I tested changing your example to Eleventy 0.12.1 and it shows the same error, on both Node 14 and 15.
npx @11ty/eleventy
behaves differently than calling eleventy
directly on Node 14. I don't understand why, but basically on Node 12 and 14 you cannot build using npx @11ty/eleventy
when you have this plugin configured. Not a huge deal in the end but definitely confusing.metaString
issue. I will investigate further, perhaps the Eleventy plugin API changed since the canary version used in your example. If I find something I'll post and/or try to make a PR.The Replit example linked above is updated and exhibits the same behavior as my local Node 14 and 15 environments using Eleventy 12.1.
Actually it looks like the pinned canary version is probably ahead of the current release? So likely this plugin actually requires functionality not in the current 0.12.1 Eleventy release. If that is the case, would you accept a documentation PR to make that clearer?
Thanks a lot for the thorough explanation, it really helps us.
I think npx
runs the latest LTS release not the canary version of eleventy to run the command. So the only problem we have here is that Cannot read property 'split' of undefined
error which is caused by the third param to highlighter not being available in older versions of markdown-it which eleventy before v1 uses.
eleventyConfig.addMarkdownHighlighter((code, lang, fence) => {
https://github.com/markdown-it/markdown-it/issues/626#issuecomment-692750047
We might need a workaround to get the fence in older versions or we could just drop the support for eleventy v0.*s. But eleventy v1 is currently in alpha and not many ppl use it so it's not optimal. Now I'm looking for a workaround, and if the workaround is not possible or clashing with the latest versions, we might just have to drop the support then.
Update here. I don't think it is possible. To override the default behavior of older markdown-it, we need to get access to the MarkdownIt()
instance, which in our case is this.mdLib
from the eleventy's markdown engine, which I don't think is possible to access through the config object, which is the only thing we have access to.
Long sentence short, even the official syntax highlighters use this weird syntax to highlight lines because it's impossible to get attributes other than the first one.
```js/1,3
console.dir(console);
👇 one plugin use this syntax
```js#13
console.dir(console);
```
```js
let highlights = new HighlightLinesGroup(split.join("/"), "/");
If that is the case, would you accept a documentation PR to make that clearer?
Yes, PRs are welcomed, and thanks.
Thanks for digging in and the explanation. I've submitted #58 to update the plugin readme.
Thanks everyone!
Hello,
I'm trying to run this within 11ty but haven't gotten past the setup part, as the plugin errors out with
Could not get Shiki loaded async via 'deasync'
Minimal reproduction: https://replit.com/@dpfavand/11ty-shiki-twoslash-doesnt-work (click the green button to run).
It appears that the
setupForFile
promise is never resolved or rejected. But that's about as far as I have been able to get.Has anyone else run into this lately? Running on Node 12 and 14, both promises and async should be available, so I'm not sure what's going on.