Help with glob syntax (Next.js special routes related)

Question

Help with glob syntax (Next.js special routes related)

milos-sikic-nimbus-tech opened this issue a year ago · comments

Hi there!

I've been trying to make a glob pattern that would match what this regex matches for a while:

^(?:\[[a-z]+(?:-[a-z]+)*]|(?:[a-z]+(?:-[a-z]+)*))$

But unfortunately, I can't figure it out.

I have seen #20 and I agree with you that it should not be part of the library, but I would like to ask for your help for a glob that would match what's needed, if it's possible. If not, would you consider supporting regexes?

Test data

Should pass

some
some-string
[some-string]
[some]

Should not pass

[some-string
some-string]
[some]-string

Thank you for the tool. I would happily submit a PR that documents these custom globs for Next.js if we can make some.

Huan · Answer 1 · Thu Jun 01 2023 12:55:49 GMT+0800 (China Standard Time)

Hi @milos-sikic-nimbus-tech, I have created a glob for your case @(+([a-z])*(-+([a-z]))|\[+([a-z])*(-+([a-z]))\]), it looks a bit complex. You can test it to see if it fits your needs.

This glob combines different patterns to match either a word without brackets or a word enclosed in square brackets, allowing hyphens within the words:

+([a-z])*(-+([a-z])) is used to match a word
\[+([a-z])*(-+([a-z]))\] is used to match a word enclosed in square brackets

Milos · Answer 2 · Thu Jun 01 2023 15:30:50 GMT+0800 (China Standard Time)

Hello, @dukeluo, thank you very much for the prompt response!

Unfortunately, the pattern seems to not match anything when I use it like this.

...
      'check-file/folder-naming-convention': [
        'error',
        {
          'src/**/': '@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])',
          'app/**/': '@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])',
          'pages/**/': '@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])',
        },
      ],
...

Output:

$ ESLINT_USE_FLAT_CONFIG=true eslint -c eslint.config.mjs .

/projects/nextjs-template/src/app/[locale]/error.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/example-route/page.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/example-route/styles.module.scss.d.ts
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/layout.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/loader.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/loading.module.scss.d.ts
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/loading.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/locale.props.ts
  13:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/page.module.scss.d.ts
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/page.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/providers.tsx
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/app/[locale]/routes.ts
  1:1  error  The folder "app" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/assets/icons/index.ts
  1:1  error  The folder "assets" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/components/component-example/component-example.module.scss.d.ts
  1:1  error  The folder "components" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/components/component-example/component-example.tsx
  1:1  error  The folder "components" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/translations/client-translations.ts
  1:1  error  The folder "translations" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/translations/server-translations.ts
  1:1  error  The folder "translations" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

/projects/nextjs-template/src/translations/settings.ts
  1:1  error  The folder "translations" does not match the "@(+([a-z])*(-+([a-z]))|[+([a-z])*(-+([a-z]))])" pattern  check-file/folder-naming-convention

✖ 18 problems (18 errors, 0 warnings)

I also tried with using just the app matcher inside of eslint.config.mjs, but it just failed to match the [locale] folder then.

Let me know if I can help out somehow, and again, thank you for your time!

Huan · Answer 3 · Thu Jun 01 2023 21:14:59 GMT+0800 (China Standard Time)

@milos-sikic-nimbus-tech The point is that you need escape first. The following is my .eslintrc file, and it works well on my side with your case.

{
  "plugins": [
    "check-file"
  ],
  "rules": {
    "check-file/folder-naming-convention": [
      "error",
      {
        "src/**/": "@(+([a-z])*(-+([a-z]))|\\[+([a-z])*(-+([a-z]))\\])"
      }
    ]
  }
}

Milos · Answer 4 · Thu Jun 01 2023 22:09:11 GMT+0800 (China Standard Time)

Thank you very much, @dukeluo, that works for me, too. I was sure that I tried with only the first rule, but it seems I didn't.

Would https://github.com/DukeLuo/eslint-plugin-check-file/blob/main/docs/rules/folder-naming-convention.md be a good page to add a Next.js example? Or maybe a new page with various examples?

Huan · Answer 5 · Thu Jun 01 2023 23:27:25 GMT+0800 (China Standard Time)

Thank you very much, @dukeluo, that works for me, too. I was sure that I tried with only the first rule, but it seems I didn't.

Would https://github.com/DukeLuo/eslint-plugin-check-file/blob/main/docs/rules/folder-naming-convention.md be a good page to add a Next.js example? Or maybe a new page with various examples?

That's cool, glad to hear it. I think it's a good idea to include a Next.js example on the original page. If someone needs this glob, it's easier to find.

Milos · Answer 6 · Fri Jun 02 2023 15:46:18 GMT+0800 (China Standard Time)

Sorry @dukeluo, but I'm not sure what page you're referring to when you say original. Just send me a link to the page where you'd like me to add the example and I'll send a PR!

Huan · Answer 7 · Fri Jun 02 2023 18:29:25 GMT+0800 (China Standard Time)

Sorry @dukeluo, but I'm not sure what page you're referring to when you say original. Just send me a link to the page where you'd like me to add the example and I'll send a PR!

Yes, I mean https://github.com/DukeLuo/eslint-plugin-check-file/blob/main/docs/rules/folder-naming-convention.md. Thanks for your PR!

Milos · Answer 8 · Mon Jun 05 2023 16:06:19 GMT+0800 (China Standard Time)

PR opened #27

Huan · Answer 9 · Wed Jul 05 2023 00:18:21 GMT+0800 (China Standard Time)

NEXT_JS_APP_ROUTER_CASE was released in v2.5.0.