Missing shortcode in Eleventy configuration throws misleading error

[uncenter]

Steps to reproduce

Add the example {{ myShortcode 'arg1', 'arg2' }} from the README to a Vento template.

Expected behavior

Successful build.

Actual behavior

[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering vto template ./src/index.vto (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./src/index.vto (via TemplateContentCompileError)
[11ty] 3. [2:34-2:40]: Expected ')' (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: [2:34-2:40]: Expected ')'
[11ty]     at t (file:///Users/uncenter/Dev/Forks/vento-11ty-repro/node_modules/.pnpm/meriyah@6.0.3/node_modules/meriyah/dist/meriyah.min.mjs:1:9885)

Plugin version

4.0.1

Eleventy version

3.0.0

Reduced Test Case URL

https://github.com/uncenter/vento-11ty-repro

Additional information

No response

[noelforte]

Thanks for submitting an issue and for including a reduced test case! I took a look at your reproduction and noticed that you didn't declare myShortcode in the Eleventy config file, like so:

export default function defineConfig(eleventyConfig) {
  eleventyConfig.addShortcode('myShortcode', (...args) => `Provided args were ${args.join(', ')}`)
}

Like other template languages, Vento is pretty strict about tags being used without being defined. Once registered as above, this template:

{{ myShortcode 'arg1', 'arg2' }}

Compiles to:

Provided args were arg1, arg2

If you don't mind, I'm interested to hear a solution you'd like to see to handle this case, since this is more of a user error than a bug in this plugin or Vento. I'm happy to dig into my source to see if I can catch any errors from Vento during the compile step, or either one of us can open an issue upstream to get support for unknown tag handling by Vento itself. Let me know if you have any thoughts otherwise I'll close this as the behavior you've experienced is what's expected.

[uncenter]

Why does not declaring it cause a syntax/parsing error? That should be a runtime error I would think if the function isn't defined.

[uncenter]

(Specifically my issue was adding the Vento plugin before another plugin that added the shortcode I was using, fwiw.)

[noelforte]

Glad you solved it!

I'm not completely sure, but my best guess is that when Vento transforms template functions via meriyah there's a breakdown in parsing because the parser expects arguments to be wrapped in (). The transform step is necessary because Vento tries to avoid using with and transforms references in the compliled template function from varname to it.varname.

Again this is only my best guess. You can see the change that introduced this functionality as well as the discussion around it here: ventojs/vento#43

Lastly, I did look into my code in the past hour and the problem is that the error is reported on the code of the compiled template function (this syntax), so trying to trace that back to the offending line in the .vto file is beyond the scope of this plugin and should be handled in Vento itself.

[noelforte]

Reopening to track implemeting of ventojs/vento#85

[noelforte]

@uncenter Opened PR's on both Vento (ventojs/vento#89) and Eleventy (11ty/eleventy#3572) to help catch errors and report them more accurately. Hope they at least get a conversation started so I can then update this plugin to take advantage of those fixes/improvements!