[🐞] ESLint: invalidLoaderLocation should not be triggered if filename extension is JSX

loriswit commented 3 months ago

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I've been trying out a few things with Qwik, and I didn't bother to use TypeScript, so my routes are just .jsx source files. Because of this, Vite is printing warnings about routeLoader$ not being located in the correct place, even though it's located in src/routes/index.jsx which seems like it should be allowed.

I suppose this happens because of these regexes: https://github.com/QwikDev/qwik/blob/cae4e5bc3b77637264651ec6537b8c72fb75bb28/packages/eslint-plugin-qwik/src/loaderLocation.ts#L59-L61

Is there any reason why .jsx files would be considered invalid locations? If not, this should be an easy fix.

Reproduction

https://github.com/loriswit/eslint-plugin-qwik-bug

Steps to reproduce

Clone the repo, then run npm install and npm start (or npm run preview).

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 5.69 GB / 15.96 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355

Additional Information

Full console output:

[vite] warning: 'routeLoader$() are typically declared in route boundary files such as layout.tsx, index.tsx and plugin.tsx inside the src/routes directory
(docs: https://qwik.dev/docs/route-loader/).

This routeLoader$() is declared outside of the route boundaries. This may be useful when you want to create reusable logic or a library. In such a case, it is essential that this function is re-exported from within the router boundary otherwise it will not run.
(docs: https://qwik.dev/docs/cookbook/re-exporting-loaders/).

If you understand this, you can disable this warning with:
// eslint-disable-next-line qwik/loader-location

  Plugin: vite-plugin-qwik
  File: C:/Users/loris/Desktop/qwik-bug/src/routes/index.jsx:4:30
  2  |  import { routeLoader$ } from "@builder.io/qwik-city"
  3  |  
  4  |  export const useLoremIpsum = routeLoader$(async () => {
     |                                ^
  5  |    const response = await fetch("https://loripsum.net/api")
  6  |    return await response.text()

PatrickJS commented 3 months ago

can you make a pr to include jsx. it might be because some of the lint might require types but we can fix them as we run into them

PatrickJS commented 3 months ago

you probably can make a pr to be

    const isLayout = /\/layout(|!|-.+)\.(t|j)sx?$/.test(path);
    const isIndex = /\/index(|!|@.+)\.(t|j)sx?$/.test(path);
    const isPlugin = /\/plugin(|@.+)\.(t|j)sx?$/.test(path);

QwikDev / qwik