Bug 38167

Summary: ESLint: migrate config to flat format + cleanup some node dependencies
Product: Koha Reporter: Victor Grousset/tuxayo <victor>
Component: Architecture, internals, and plumbingAssignee: Victor Grousset/tuxayo <victor>
Status: Failed QA --- QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: jonathan.druart, paul.derscheid, tomascohen
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on: 37824, 38149    
Bug Blocks: 38426    
Attachments: Bug 38167: Migrate ESLint config to new flat format
Bug 38167: Remove Babel which was only used by Webpack
Bug 38167: Remove remaining @vue/cli-service use
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js
Bug 38167: Migrate ESLint config to new flat format
Bug 38167: Remove Babel which was only used by Webpack
Bug 38167: Remove remaining @vue/cli-service use
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js
Bug 38167: Migrate ESLint config to new flat format
Bug 38167: Remove Babel which was only used by Webpack
Bug 38167: [DO NOT PUSH] yarn.lock changes
Bug 38167: Remove remaining @vue/cli-service use
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js

Description Victor Grousset/tuxayo 2024-10-14 17:16:55 UTC
ESLint9 switched to a new config file format[1]. Using the old config format looks like this:
ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js

So here we will be doing the migration like this:
npx @eslint/migrate-config .eslintrc.json
https://eslint.org/docs/latest/use/configure/migration-guide

[1] https://eslint.org/docs/latest/use/configure/configuration-files
    https://eslint.org/blog/2022/08/new-config-system-part-1/
    https://eslint.org/blog/2022/08/new-config-system-part-2/


-----


The goal of this is to make it easier to check guideline JS8

https://wiki.koha-community.org/wiki/Coding_Guidelines#JS8:_Follow_guidelines_set_by_ESLint

And be one step closer to able to check it on .vue and .ts files
Comment 1 Victor Grousset/tuxayo 2024-10-14 18:21:42 UTC
Created attachment 172754 [details] [review]
Bug 38167: Migrate ESLint config to new flat format

Test:
1. Do not apply
2. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
3. It should fail
4. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
5. It should work
6. Apply patches
7. Restart KTD to have a clean state of dependencies and check that
   provisionning still works.
8. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
9. It should fail
10. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
11. It should work
12 Double check rspack still works: rspack build
   Because we removed babel.
Comment 2 Victor Grousset/tuxayo 2024-10-14 18:21:45 UTC
Created attachment 172755 [details] [review]
Bug 38167: Remove Babel which was only used by Webpack

And our old versions was depending on a old buggy version of "globals"
that broke ESLint when using new config file format.
Removing Babel if it's not used anymore instead of updating it. (There
would be a way to test the updat works anyway.

@vue/cli-service was depending on babel core.
Removing it since it's deprecated (see replacements below) instead
having to keep a subset of Babel packages and updating them.
https://cli.vuejs.org/#getting-started
https://github.com/vuejs/vue-cli
Comment 3 Victor Grousset/tuxayo 2024-10-15 01:35:37 UTC
If this is merged as it is. A note will have to be left in bug 37824 because

> - we can always fallback onto webpack, it's not going anywhere.

To leave a trace of changes that relevant to an eventual fallback to webpack.
Comment 4 Victor Grousset/tuxayo 2024-10-21 16:33:14 UTC
Created attachment 173070 [details] [review]
Bug 38167: Remove remaining @vue/cli-service use
Comment 5 Victor Grousset/tuxayo 2024-10-21 16:33:16 UTC
Created attachment 173071 [details] [review]
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js
Comment 6 Paul Derscheid 2024-11-12 17:20:48 UTC
Created attachment 174429 [details] [review]
Bug 38167: Migrate ESLint config to new flat format

Test:
1. Do not apply
2. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
3. It should fail
4. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
5. It should work
6. Apply patches
7. Restart KTD to have a clean state of dependencies and check that
   provisionning still works.
8. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
9. It should fail
10. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
11. It should work
12 Double check rspack still works: rspack build
   Because we removed babel.

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 7 Paul Derscheid 2024-11-12 17:20:51 UTC
Created attachment 174430 [details] [review]
Bug 38167: Remove Babel which was only used by Webpack

And our old versions was depending on a old buggy version of "globals"
that broke ESLint when using new config file format.
Removing Babel if it's not used anymore instead of updating it. (There
would be a way to test the updat works anyway.

@vue/cli-service was depending on babel core.
Removing it since it's deprecated (see replacements below) instead
having to keep a subset of Babel packages and updating them.
https://cli.vuejs.org/#getting-started
https://github.com/vuejs/vue-cli

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 8 Paul Derscheid 2024-11-12 17:20:53 UTC
Created attachment 174431 [details] [review]
Bug 38167: Remove remaining @vue/cli-service use

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 9 Paul Derscheid 2024-11-12 17:20:56 UTC
Created attachment 174432 [details] [review]
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 10 Jonathan Druart 2024-11-13 09:38:09 UTC
(In reply to Paul Derscheid from comment #8)
> Created attachment 174431 [details] [review] [review]
> Bug 38167: Remove remaining @vue/cli-service use
> 
> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>

Isn't this occurrence of "vue-cli" related?

cypress.config.ts:            framework: "vue-cli",
Comment 11 Victor Grousset/tuxayo 2024-11-20 16:50:10 UTC
Good find, I guess it is.

Context:
```
    component: {
        devServer: {
            framework: "vue-cli",
            bundler: "webpack",
        },
```

What operation could use this config? Because just running the tests didn't use this and didn't fail. Whereas the stuff removed in the commit had to be removed to be able run the tests.


https://docs.cypress.io/app/component-testing/component-framework-configuration
> Custom Dev Server
> A custom function can be passed into the devServer option, which allows the use of build systems not provided by Cypress out of the box.

After this plus other search it's still blurry what is a dev server.
Comment 12 Paul Derscheid 2024-11-20 17:00:38 UTC
I think this is unused because we don't have component tests yet.

If I am not mistaken we just went e2e.

There's https://www.npmjs.com/package/cypress-rspack-dev-server (btw) but it doesn't support vue yet (just react).
Comment 13 Paul Derscheid 2024-11-20 17:02:32 UTC
But if we don't have any yet, I just want to casually advocate for adding component tests in the future.

Huge gains in actual test coverage for behaviour, comparatively little effort.
Comment 14 Victor Grousset/tuxayo 2024-11-20 18:59:36 UTC
Created attachment 174855 [details] [review]
Bug 38167: Migrate ESLint config to new flat format

Test:
1. Do not apply
2. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
3. It should fail
4. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
5. It should work
6. Apply patches
7. Restart KTD to have a clean state of dependencies and check that
   provisionning still works.
8. ESLINT_USE_FLAT_CONFIG='false' eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
9. It should fail
10. eslint koha-tmpl/intranet-tmpl/prog/js/ajax.js
11. It should work
12 Double check rspack still works: rspack build
   Because we removed babel.

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 15 Victor Grousset/tuxayo 2024-11-20 18:59:38 UTC
Created attachment 174856 [details] [review]
Bug 38167: Remove Babel which was only used by Webpack

And our old versions was depending on a old buggy version of "globals"
that broke ESLint when using new config file format.
Removing Babel if it's not used anymore instead of updating it. (There
would be a way to test the updat works anyway.

@vue/cli-service was depending on babel core.
Removing it since it's deprecated (see replacements below) instead
having to keep a subset of Babel packages and updating them.
https://cli.vuejs.org/#getting-started
https://github.com/vuejs/vue-cli

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 16 Victor Grousset/tuxayo 2024-11-20 18:59:44 UTC
Created attachment 174857 [details] [review]
Bug 38167: [DO NOT PUSH] yarn.lock changes

And our old versions was depending on a old buggy version of "globals"
that broke ESLint when using new config file format.
Removing Babel if it's not used anymore instead of updating it. (There
would be a way to test the updat works anyway.

@vue/cli-service was depending on babel core.
Removing it since it's deprecated (see replacements below) instead
having to keep a subset of Babel packages and updating them.
https://cli.vuejs.org/#getting-started
https://github.com/vuejs/vue-cli

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 17 Victor Grousset/tuxayo 2024-11-20 18:59:46 UTC
Created attachment 174858 [details] [review]
Bug 38167: Remove remaining @vue/cli-service use

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 18 Victor Grousset/tuxayo 2024-11-20 18:59:49 UTC
Created attachment 174859 [details] [review]
Bug 38167: Make Prettier and ESLint happier for cypress/plugins/index.js

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 19 Victor Grousset/tuxayo 2024-11-20 19:03:58 UTC
Rebased and split yarn.lock changes to their own commit.