"resolveFilename" causing same named paths in Vue files #96

YuWenZhong · 2023-04-23T11:31:46Z

Describe the bug

The @vitejs/plugin-vue plugin splits Vue files into three parts, which are template, script, and style. If the resolveFilename function directly removes the query string, It may cause issues with same named paths (different parts of the same named Vue file). Therefore, it is recommended to filter Vue files and only instrument the script part, to generate accurate code coverage reports.

Reproduction

--

Steps to reproduce

yarn build

System Info

node v14.18.1

Used Package Manager

npm

Logs

No response

Validations

Read the Contributing Guidelines.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a vite-plugin-istanbul issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
The provided reproduction is a minimal reproducible example of the bug.

iFaxity · 2023-04-30T00:17:44Z

Hi @YuWenZhong, thanks for the issue. I will look into this in the coming days.

lipanlowdpr · 2023-06-20T06:45:41Z

i met the same problem. it will generate different window.coverage obj between dev and build enviroment. after build, there are more than 1 function for generate window.coverage.path.

function J5() {
      var t = "/Users/mistrain/Desktop/xxx/src/components/portalPage/index.vue"// same path
          , e = "20bc656318d897e23870f9f0141d90d72f27e666"
          , n = globalThis
          , r = "__coverage__"
          , a = {
// ...
J5();
function Z5() {
      var t = "/Users/mistrain/Desktop/xxx/src/components/portalPage/index.vue"// same path
          , e = "20bc656318d897e23870f9f0141d90d72f27e666"
          , n = globalThis
          , r = "__coverage__"
          , a = {
// ...

sawmurai · 2023-07-13T12:07:50Z

I ran into the same issue and found that it might be possible to pass the id instead of the resolved filename to the instrumenter. This fixes it locally for me. I still have up to three coverage functions per .vue file, but they use different paths and don't conflict with each other. The resulting report correctly detects the coverage of script part of the vue file.

Mistrain-y-y · 2023-07-17T03:16:23Z

I ran into the same issue and found that it might be possible to pass the id instead of the resolved filename to the instrumenter. This fixes it locally for me. I still have up to three coverage functions per .vue file, but they use different paths and don't conflict with each other. The resulting report correctly detects the coverage of script part of the vue file.

like this?

window.__coverage__ = {
"xxxx/program/src/App.vue": {...},
"xxxx/program/src/App.vue?vue&type=script&setup=true&xxxxx": {...},
// ...
}

sawmurai · 2023-07-17T04:42:38Z

Yes, exactly. The local change I made was to pass the id instead of the filename in both calls to instrumenter.instrumentSync in https://github.com/iFaxity/vite-plugin-istanbul/blob/next/src/index.ts#L186.

emilepharand · 2023-10-17T01:55:14Z

I have the same problem in my project.

@sawmurai's solution fixes it for me.

hugo-daclon · 2024-02-14T08:56:25Z

Reference to issue (179) is wrong, I miss-clicked the real issue I wanted to reference (178). sry

hugo-daclon · 2024-02-14T10:40:19Z

@iFaxity I've just created a PR for this issue, please do tell me if there's something wrong.

If anyone knows how I can use my PR in my project's package.json. Please tell me I can't manage to find anything on google/stackoverflow.

lukasbrzobohaty · 2024-02-14T20:37:57Z

@iFaxity I've just created a PR for this issue, please do tell me if there's something wrong.

If anyone knows how I can use my PR in my project's package.json. Please tell me I can't manage to find anything on google/stackoverflow.

Thanks for fix.
I tried and these changes ignore vue options api now.
You can try on project what I created for #178.

This is debug log of ids what plugin processes:

vite v5.1.1 building for production...
.../vite-project/index.html
transforming (1) index.html
.../vite-project/src/main.ts
.../vite-project/src/style.css
.../vite-project/node_modules/vue/dist/vue.runtime.esm-bundler.js
.../vite-project/src/App.vue
transforming (6) src/App.vue
.../vite-project/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
.../vite-project/src/App.vue?vue&type=style&index=0&scoped=e636f1af&lang.css
.../vite-project/src/App.vue?vue&type=script&setup=true&lang.ts
transforming (11) vite:asset:public/vite.svg
.../vite-project/src/assets/vue.svg
.../vite-project/src/components/HelloWorld2.vue
.../vite-project/node_modules/@vue/shared/dist/shared.esm-bundler.js
.../vite-project/src/components/HelloWorld2.vue?vue&type=style&index=0&scoped=4d3c4b0c&lang.css
.../vite-project/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
.../vite-project/src/components/HelloWorld.vue
.../vite-project/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=a503fb62&lang.css
.../vite-project/src/components/HelloWorld.vue?vue&type=script&setup=true&lang.ts
.../vite-project/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
✓ 20 modules transformed.

HelloWorld.vue is composition api and HelloWorld2.vue is options api.
It seems vue SFC didn't split code to template, style and script for options api, only for composition api.

hugo-daclon · 2024-02-14T20:54:52Z

@iFaxity I've just created a PR for this issue, please do tell me if there's something wrong.
If anyone knows how I can use my PR in my project's package.json. Please tell me I can't manage to find anything on google/stackoverflow.

Thanks for fix. I tried and these changes ignore vue options api now. You can try on project what I created for #178.

This is debug log of ids what plugin processes:
vite v5.1.1 building for production...
.../vite-project/index.html
transforming (1) index.html
.../vite-project/src/main.ts
.../vite-project/src/style.css
.../vite-project/node_modules/vue/dist/vue.runtime.esm-bundler.js
.../vite-project/src/App.vue
transforming (6) src/App.vue
.../vite-project/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
.../vite-project/src/App.vue?vue&type=style&index=0&scoped=e636f1af&lang.css
.../vite-project/src/App.vue?vue&type=script&setup=true&lang.ts
transforming (11) vite:asset:public/vite.svg
.../vite-project/src/assets/vue.svg
.../vite-project/src/components/HelloWorld2.vue
.../vite-project/node_modules/@vue/shared/dist/shared.esm-bundler.js
.../vite-project/src/components/HelloWorld2.vue?vue&type=style&index=0&scoped=4d3c4b0c&lang.css
.../vite-project/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
.../vite-project/src/components/HelloWorld.vue
.../vite-project/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=a503fb62&lang.css
.../vite-project/src/components/HelloWorld.vue?vue&type=script&setup=true&lang.ts
.../vite-project/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
✓ 20 modules transformed.
HelloWorld.vue is composition api and HelloWorld2.vue is options api. It seems vue SFC didn't split code to template, style and script for options api, only for composition api.

Hi, sorry the fix didn't hell for option API, I've never used it so I don't really know how it works with vite, also, as I've said in the PR, I had trouble at first because when using composition API we get two id's with query params (one of them is the good one) and another without query so we might be able to add an option to ask if user is using the composition api or the option api, but I can't see how to support a hybrid setup line the one you linked. Maybe using @sawmurai 's fix would work but it might break other things and it might also break the links of the coverage reports. If any of you two have an idea please do share it.
I'll try working on it tomorrow (it's 9:50 PM for me right now) but I have quite a bit of work to do tomorrow.

Also sry for the single block, I'm commenting from my smartphone, i'll fix this later.

lukasbrzobohaty · 2024-02-15T08:31:00Z

@Nol-go Thanks, I appreciate your work. I tried change filename to id. Instrument it looks fine now and coverage is too. I added example with cypress and coverage report to repo what i created for #178.

Could someone create PR with these changes?

hugo-daclon · 2024-02-15T10:03:40Z

Great news if this works but are you sure there is no problem with other framework than vueJS, and does it not break links ? l fear tools such as sonarqube will break as they expect filenames in the report and not filename with query. I think issue #67 was made to fix this specific thing.

I had an idea this night but won't have time to do it today, maybe you can try. Here is the pseudo-code:

const globalVar = [];
factor(srcCode,id,options){
    //...
    if (isVueFile){
        if (id in globalVar && !idHasScriptTypeInQueryParam) {
            // transform (should replace the previously transformed code)
        } else if (id in globalVar && idHasScriptTypeInQueryParam) {
            // transform
        } else {
            // transform
        }
    }
    //...
}

You should get the idea. If you have time to try this go ahead and do it, I'll take care of the PR as soon as I can.

PS: If you need to debug add the following where you need. You'll get the logs during vite build. (I added #179 to ask for this kind of feature.)

logger.warn(`${PLUGIN_NAME}> ${yellow(`${id}\n\t${someOtherVar`)}`);

…es (#180) * fix: add regex for vue SFC to prevent instrumenting style and templates Single file Components no longer have their html or css instrumented instead of their script Closes #96 #178 #89 * build: add prepare script to build the package when using a git version See https://stackoverflow.com/a/57829251 * build: fix dependencies' vulnerabilities run npm audit fix * build: bump devDependencies (patch version only) * fix: instrument both option and composition API * style: fix sonarlint issues * revert: reverted changes to dependencies and package.json Refs: 1e67efc, ea8fa18, 614a88a * style: changed to single quotes for strings --------- Co-authored-by: Hugo <[email protected]> Co-authored-by: Christian Norrman <[email protected]>

github-actions · 2024-02-17T22:28:07Z

🎉 This issue has been resolved in version 5.0.0-rc.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions · 2024-03-09T20:34:32Z

🎉 This issue has been resolved in version 6.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

YuWenZhong added the bug Something isn't working label Apr 23, 2023

iFaxity self-assigned this Apr 30, 2023

lipanlowdpr mentioned this issue Jun 20, 2023

development mode and build mode instrument result is different in normal web project #89

Closed

This was referenced Feb 14, 2024

Add verbose boolean to option #179

Open

Vue composition api #178

Closed

hugo-daclon mentioned this issue Feb 14, 2024

fix: add regex for vue SFC to prevent instrumenting style and templates #180

Merged

iFaxity closed this as completed in #180 Feb 17, 2024

github-actions bot added the released on @next label Feb 17, 2024

github-actions bot added the released label Mar 9, 2024

hugo-daclon mentioned this issue Apr 7, 2024

[bug] coverage does not include code for vue files #172

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"resolveFilename" causing same named paths in Vue files #96

"resolveFilename" causing same named paths in Vue files #96

YuWenZhong commented Apr 23, 2023

iFaxity commented Apr 30, 2023

lipanlowdpr commented Jun 20, 2023 •

edited

Loading

sawmurai commented Jul 13, 2023 •

edited

Loading

Mistrain-y-y commented Jul 17, 2023

sawmurai commented Jul 17, 2023

emilepharand commented Oct 17, 2023

hugo-daclon commented Feb 14, 2024

hugo-daclon commented Feb 14, 2024 •

edited

Loading

lukasbrzobohaty commented Feb 14, 2024 •

edited

Loading

hugo-daclon commented Feb 14, 2024

lukasbrzobohaty commented Feb 15, 2024

hugo-daclon commented Feb 15, 2024 •

edited

Loading

github-actions bot commented Feb 17, 2024

github-actions bot commented Mar 9, 2024

"resolveFilename" causing same named paths in Vue files #96

"resolveFilename" causing same named paths in Vue files #96

Comments

YuWenZhong commented Apr 23, 2023

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

iFaxity commented Apr 30, 2023

lipanlowdpr commented Jun 20, 2023 • edited Loading

sawmurai commented Jul 13, 2023 • edited Loading

Mistrain-y-y commented Jul 17, 2023

sawmurai commented Jul 17, 2023

emilepharand commented Oct 17, 2023

hugo-daclon commented Feb 14, 2024

hugo-daclon commented Feb 14, 2024 • edited Loading

lukasbrzobohaty commented Feb 14, 2024 • edited Loading

hugo-daclon commented Feb 14, 2024

lukasbrzobohaty commented Feb 15, 2024

hugo-daclon commented Feb 15, 2024 • edited Loading

github-actions bot commented Feb 17, 2024

github-actions bot commented Mar 9, 2024

lipanlowdpr commented Jun 20, 2023 •

edited

Loading

sawmurai commented Jul 13, 2023 •

edited

Loading

hugo-daclon commented Feb 14, 2024 •

edited

Loading

lukasbrzobohaty commented Feb 14, 2024 •

edited

Loading

hugo-daclon commented Feb 15, 2024 •

edited

Loading