feat(js-config): js config files (e.g. `.eslintrc.js`) #2414

andrestone · 2023-02-04T15:30:12Z

Introduces JsConfigFile which is compatible with JsonFile interface.

The class exposes the static method JsConfigFile.identifier(str: string) to allow rendering globals such as __dirname.

  //...
  const eslint = new Eslint(project, {
    devdirs: ["foo", "bar"],
    dirs: ["mysrc"],
    jsConfig: true,
  });
  eslint.config.parserOptions = {
    project: ["./tsconfig.json"],
    tsconfigRootDir: JsConfigFile.identifier("__dirname"),
  };
  // ...

Implemented using a magic string, happy to reimplement if someone has a better idea.

Fixes #2405

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

codecov-commenter · 2023-02-04T15:43:35Z

Codecov Report

Merging #2414 (2c222a0) into main (4b6497c) will increase coverage by 0.00%.
The diff coverage is 91.54%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@           Coverage Diff           @@
##             main    #2414   +/-   ##
=======================================
  Coverage   93.68%   93.68%           
=======================================
  Files         176      177    +1     
  Lines       31061    31131   +70     
  Branches     2424     2430    +6     
=======================================
+ Hits        29099    29165   +66     
- Misses       1962     1966    +4

Impacted Files	Coverage Δ
src/javascript/eslint.ts	`97.34% <88.23%> (-0.34%)`	⬇️
src/js-config.ts	`92.59% <92.59%> (ø)`
src/javascript/node-package.ts	`92.73% <0.00%> (+0.13%)`	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

mrgrain · 2023-02-06T10:17:35Z

src/js-config.ts

+import { IResolver } from "./file";
+import { JsonFileOptions } from "./json";
+import { ObjectFile } from "./object-file";
+import { Project } from "./project";
+
+/**
+ * Options for the JsConfigFile class.
+ */
+export interface JsConfigFileOptions extends JsonFileOptions {}
+
+/**
+ * Represents a JS configuratin file (e.g. .eslintrc.js).
+ * Suppor
+ */
+export class JsConfigFile extends ObjectFile {
+ static identifier(str: string): string {
+ return `${JsConfigFile.jsConfigFileIdentifier}${str}`;
+ }
+ private static readonly jsConfigFileIdentifier =
+ "__projenJsConfigFileIdentifier#";
+ constructor(
+ project: Project,
+ filePath: string,
+ options: JsConfigFileOptions
+ ) {
+ super(project, filePath, options);
+ if (!options.obj) {
+ throw new Error('"obj" cannot be undefined');
+ }
+ }
+
+ protected synthesizeContent(resolver: IResolver): string | undefined {
+ const json = super.synthesizeContent(resolver);
+ if (!json) {
+ return undefined;
+ }
+
+ const sanitized = JSON.parse(json);
+ let content = JSON.stringify(sanitized, undefined, 2);
+ content = this.replaceIdentifier(content);
+ content = `module.exports = ${content};`;
+ content = `// ${this.marker}\n${content}`;
+
+ return content;
+ }
+
+ private replaceIdentifier(str: string): string {
+ const regex = new RegExp(
+ `(\"${JsConfigFile.jsConfigFileIdentifier})([a-zA-Z_$][a-zA-Z_$0-9]+)(\")`,
+ "gm"
+ );
+ return str.replace(regex, "$2");
+ }
+}


This file should probably live inside the javascript submodule.

mrgrain · 2023-02-06T10:18:04Z

test/js-config/eslintrc.test.ts

+import { Projenrc } from "../../src/projenrc-json";
+import { synthSnapshot } from "../util";
+
+test(".eslintrc.js with identifier values", () => {


Nice! Would also need some tests dedicated to JsConfigFile directly.

mrgrain · 2023-02-06T10:28:45Z

src/js-config.ts

+ */
+export class JsConfigFile extends ObjectFile {
+ static identifier(str: string): string {
+ return `${JsConfigFile.jsConfigFileIdentifier}${str}`;


Out of curiosity what else did you try?

~~Using a function or an object with a toJSON() comes to mind, but not sure if it's still running through JSON.stringify adding quotes afterwards.~~ Scrap that. Won't work.

I guess we could build our own recursive renderer that prints out Json.stringify unless the value is a certain instanceof (could use Symbol or something custom).

Here is a gist that does that: https://gist.github.com/mrgrain/a61408a4e8dd2006be5000a6523bf28e

But I wonder if that's enough or if people would want to start using imports as well. 🤔

mrgrain · 2023-02-06T11:31:30Z

src/javascript/eslint.ts

+ * Write eslint configuration as JsConfig file instead of JSON
+ * @default false
+ */
+ readonly jsConfig?: boolean;


I guess at this point we should start replacing the boolean flags with a fileformat enum.

tinovyatkin · 2023-02-06T12:08:05Z

I hope we consider all complex environments before merging this proposal.

Legacy ESlint JS-config is not supporting ESM, so, if type: module is set in package.json then this will fail - it should be .cjs. If we want to have Javascript based config for ESLint then it makes sense to implement new Flat config support - that only can be eslint.config.(mc)js - that will be future proof, more performant and makes way more sense.

If the whole proposal is just a workaround for setting tsconfigRootDir then there are documented ways how to solve this problem - use array of tsconfigs in monorepo or globs or ESlint plugin settings - depending what you are trying to solve with tsconfigRootDir.

tinovyatkin · 2023-02-06T12:15:15Z

src/js-config.ts

+ return undefined;
+ }
+
+ const sanitized = JSON.parse(json);


NIT: (as I hope this will not be merged) but replaceIdentifier may be more robustly implemented as JSON reviver.

mrgrain · 2023-02-06T12:38:00Z

Drafting this PR as I clearly needs more discussions.

If the whole proposal is just a workaround for setting tsconfigRootDir then there are documented ways how to solve this problem - use array of tsconfigs in monorepo or globs or ESlint plugin settings - depending what you are trying to solve with tsconfigRootDir.

No I don't think it is. That might have been the issue that brought it up, but not being able to produce JS based configurations is certainly a gap in projen.

Legacy ESlint JS-config is not supporting ESM, so, if type: module is set in package.json then this will fail - it should be .cjs. If we want to have Javascript based config for ESLint then it makes sense to implement new Flat config support - that only can be eslint.config.(mc)js - that will be future proof, more performant and makes way more sense.

This is very interesting. I wonder how that fits within our current Eslint component in general.

To me this now looks like we have two problems at hand:

A generic JsConfigFile component that supports inlining code fragments into a generic configuration object. Needs to support both ESM and CJS.
How to integrate the above with the existing Eslint component

andrestone changed the title ~~feat(js-config): js config files (e.g. .eslintrc.json)~~ feat(js-config): js config files (e.g. .eslintrc.js) Feb 4, 2023

andrestone force-pushed the feat/eslint-js-config branch from 0de600e to aec8611 Compare February 4, 2023 15:32

andrestone changed the title ~~feat(js-config): js config files (e.g. .eslintrc.js)~~ feat(js-config): js config files (e.g. .eslintrc.js) Feb 4, 2023

andrestone force-pushed the feat/eslint-js-config branch from aec8611 to a5d0441 Compare February 4, 2023 15:33

feat(js-config): js config files (e.g. .eslintrc.js)

2c222a0

andrestone force-pushed the feat/eslint-js-config branch from a5d0441 to 2c222a0 Compare February 4, 2023 15:48

mrgrain reviewed Feb 6, 2023

View reviewed changes

tinovyatkin reviewed Feb 6, 2023

View reviewed changes

mrgrain marked this pull request as draft February 6, 2023 12:33

mrgrain mentioned this pull request Mar 22, 2023

Editing the tailwindcss config in Next.JS project #2233

Open

mrgrain mentioned this pull request Jan 5, 2024

Eslint 9 #3240

Open

giseburt mentioned this pull request Mar 15, 2024

feat: Eslint JavaScript config (try 2) #3454

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(js-config): js config files (e.g. `.eslintrc.js`) #2414

feat(js-config): js config files (e.g. `.eslintrc.js`) #2414

andrestone commented Feb 4, 2023 •

edited by mrgrain

codecov-commenter commented Feb 4, 2023 •

edited

mrgrain Feb 6, 2023

mrgrain Feb 6, 2023

mrgrain Feb 6, 2023 •

edited

mrgrain Feb 6, 2023

mrgrain Feb 6, 2023

mrgrain Feb 6, 2023

giseburt Apr 6, 2024

tinovyatkin commented Feb 6, 2023 •

edited

tinovyatkin Feb 6, 2023 •

edited

mrgrain commented Feb 6, 2023

feat(js-config): js config files (e.g. .eslintrc.js) #2414

Are you sure you want to change the base?

feat(js-config): js config files (e.g. .eslintrc.js) #2414

Conversation

andrestone commented Feb 4, 2023 • edited by mrgrain

codecov-commenter commented Feb 4, 2023 • edited

Codecov Report

mrgrain Feb 6, 2023

Choose a reason for hiding this comment

mrgrain Feb 6, 2023

Choose a reason for hiding this comment

mrgrain Feb 6, 2023 • edited

Choose a reason for hiding this comment

mrgrain Feb 6, 2023

Choose a reason for hiding this comment

mrgrain Feb 6, 2023

Choose a reason for hiding this comment

mrgrain Feb 6, 2023

Choose a reason for hiding this comment

giseburt Apr 6, 2024

Choose a reason for hiding this comment

tinovyatkin commented Feb 6, 2023 • edited

tinovyatkin Feb 6, 2023 • edited

Choose a reason for hiding this comment

mrgrain commented Feb 6, 2023

feat(js-config): js config files (e.g. `.eslintrc.js`) #2414

feat(js-config): js config files (e.g. `.eslintrc.js`) #2414

andrestone commented Feb 4, 2023 •

edited by mrgrain

codecov-commenter commented Feb 4, 2023 •

edited

mrgrain Feb 6, 2023 •

edited

tinovyatkin commented Feb 6, 2023 •

edited

tinovyatkin Feb 6, 2023 •

edited