Custom tags with overlapping name throw an error

[chriskirknielsen]

Hello,

Loving Vento so far! I just converted an old blog from Hugo to Vento and I'm really enjoying it.

I was using a shortcode + paired shortcode combo on some pages which would always fail in Vento. For context, I am using Vento in Eleventy via eleventy-plugin-vento.

I believe I have run into an issue stemming from overlap in tag names: if you have a tag named letter and a wrapping tag named lettergroup, it will fail — if you renamed lettergroup to alphagroup, the problem disappears. In my case it's spotlight/spotlightgroup but I have recreated the issue with a very simple Eleventy project. Because error reporting was lacking, I modified the source file to explicitly log it, and it provided an error hinting an regex parsing issues (this extra info is everything above the [11ty] lines).

You can find the error below, and the minimal project here: paired-tags-error branch.

If you run it (npm i && npm run dev), it will throw the error, but if you modify src/content/index.vto so the paired tag changes from lettergroup to alphagroup, it works fine.

Throws:

{{ lettergroup }}
    {{ letter "a" }}
    {{ letter "b" }}
    {{ letter "c" }}
{{ /lettergroup }}

Works:

{{ alphagroup }}
    {{ letter "a" }}
    {{ letter "b" }}
    {{ letter "c" }}
{{ /alphagroup }}

[11ty] File changed: src/content/index.vto
src/content/index.vto TransformError: [meriyah] [39:22-39:42]: Unterminated regular expression while parsing compiled template function:

39 __exports.content += (/lettergroup) ?? "";
                      ^
    at transformTemplateCode (.../node_modules/ventojs/esm/src/transformer.js:113:15)
    at Environment.compile (.../node_modules/ventojs/esm/src/environment.js:48:24)
    at Object.getTemplateFunction (.../node_modules/eleventy-plugin-vento/dist/plugin.js:95:22)
    at Object.compile (.../node_modules/eleventy-plugin-vento/dist/plugin.js:221:31)
    at CustomEngine.compile (.../node_modules/@11ty/eleventy/src/Engines/Custom.js:239:5) {
  position: 103,
  [cause]: undefined
}
[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering vto template ./src/content/index.vto (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./src/content/index.vto (via TemplateContentCompileError)
[11ty] 3. Error in template src/content/index.vto:8:1
[11ty] 
[11ty] {{ /lettergroup }} (via TemplateError)
[11ty] 
[11ty] Original error stack trace: TemplateError: Error in template src/content/index.vto:8:1
[11ty] 
[11ty] {{ /lettergroup }}
[11ty] 
[11ty] 
[11ty]     at Environment.compile (.../node_modules/ventojs/esm/src/environment.js:53:27)
[11ty]     at Object.getTemplateFunction (.../node_modules/eleventy-plugin-vento/dist/plugin.js:95:22)
[11ty]     at Object.compile (.../node_modules/eleventy-plugin-vento/dist/plugin.js:221:31)
[11ty]     at CustomEngine.compile (.../node_modules/@11ty/eleventy/src/Engines/Custom.js:239:5)
[11ty] Wrote 0 files in 0.01 seconds (v3.0.0)

I hope this helps figure out the issue, and if you need me to do more testing, please let me know!

Thank you! Chris

[oscarotero]

Hi. Thanks for reporting this but custom tags is not a Vento feature, it's implemented by the 11ty plugin (it looks like it's generated here)

cc @noelforte

[chriskirknielsen]

Thank you for checking this out, Óscar! I thought it was just related to parsing but I'll take this over to the plugin repo. Thanks again!

[noelforte]

Tracking over on https://github.com/noelforte/eleventy-plugin-vento/issues/220

[vrugtehagel]

@oscarotero I think this can be closed 😄