feat(store): register eslint-plugin-ngrx with ng add (#3014)

Author: timdeschryver

modules/store/schematics/ng-add/index.spec.ts

@@ -16,6 +16,7 @@ describe('Store ng-add Schematic', () => {
   );
   const defaultOptions: RootStoreOptions = {
     skipPackageJson: false,
+    skipESLintPlugin: false,
     project: 'bar',
     module: 'app',
     minimal: false,
@@ -146,4 +147,45 @@ describe('Store ng-add Schematic', () => {
 
     expect(content).toMatch(/export interface AppState {/);
   });
+
+  it('should register the NgRx ESLint Plugin', async () => {
+    const options = { ...defaultOptions };
+
+    const initialConfig = {};
+    appTree.create('.eslintrc.json', JSON.stringify(initialConfig, null, 2));
+
+    const tree = await schematicRunner
+      .runSchematicAsync('ng-add', options, appTree)
+      .toPromise();
+
+    const packageContent = tree.readContent('package.json');
+    const packageJson = JSON.parse(packageContent);
+    expect(packageJson.devDependencies['eslint-plugin-ngrx']).toBeDefined();
+
+    const eslintContent = tree.readContent(`.eslintrc.json`);
+    const eslintJson = JSON.parse(eslintContent);
+    expect(eslintJson).toEqual({
+      extends: ['plugin:ngrx/recommended'],
+      plugins: ['ngrx'],
+    });
+  });
+
+  it('should not register the NgRx ESLint Plugin when skipped', async () => {
+    const options = { ...defaultOptions, skipESLintPlugin: true };
+
+    const initialConfig = {};
+    appTree.create('.eslintrc.json', JSON.stringify(initialConfig, null, 2));
+
+    const tree = await schematicRunner
+      .runSchematicAsync('ng-add', options, appTree)
+      .toPromise();
+
+    const packageContent = tree.readContent('package.json');
+    const packageJson = JSON.parse(packageContent);
+    expect(packageJson.devDependencies['eslint-plugin-ngrx']).not.toBeDefined();
+
+    const eslintContent = tree.readContent(`.eslintrc.json`);
+    const eslintJson = JSON.parse(eslintContent);
+    expect(eslintJson).toEqual(initialConfig);
+  });
 });

modules/store/schematics/ng-add/index.ts

@@ -115,6 +115,53 @@ function addNgRxStoreToPackageJson() {
   };
 }
 
+function addNgRxESLintPlugin() {
+  return (host: Tree, context: SchematicContext) => {
+    const eslintConfigPath = '.eslintrc.json';
+    const docs =
+      'https://github.com/timdeschryver/eslint-plugin-ngrx/#eslint-plugin-ngrx';
+
+    const eslint = host.read(eslintConfigPath)?.toString('utf-8');
+    if (!eslint) {
+      return host;
+    }
+
+    addPackageToPackageJson(
+      host,
+      'devDependencies',
+      'eslint-plugin-ngrx',
+      '^1.0.0'
+    );
+    context.addTask(new NodePackageInstallTask());
+
+    try {
+      const json = JSON.parse(eslint);
+      json.plugins = [...(json.plugins || []), 'ngrx'];
+      json.extends = [...(json.extends || []), 'plugin:ngrx/recommended'];
+      host.overwrite(eslintConfigPath, JSON.stringify(json, null, 2));
+
+      context.logger.info(`
+The NgRx ESLint Plugin is installed and configured with the recommended config.
+
+If you want to change the configuration, please see ${docs}.
+`);
+      return host;
+    } catch (err) {
+      context.logger.warn(`
+Something went wrong while adding the NgRx ESLint Plugin.
+The NgRx ESLint Plugin is installed but not configured.
+
+Please see ${docs} to configure the NgRx ESLint Plugin.
+
+Details:
+${err.message}
+`);
+    }
+
+    return host;
+  };
+}
+
 export default function (options: RootStoreOptions): Rule {
   return (host: Tree, context: SchematicContext) => {
     options.path = getProjectPath(host, options);
@@ -156,6 +203,7 @@ export default function (options: RootStoreOptions): Rule {
         chain([addImportToNgModule(options), mergeWith(templateSource)])
       ),
       options && options.skipPackageJson ? noop() : addNgRxStoreToPackageJson(),
+      options && options.skipESLintPlugin ? noop() : addNgRxESLintPlugin(),
     ])(host, context);
   };
 }

modules/store/schematics/ng-add/schema.json

@@ -41,6 +41,11 @@
       "type": "boolean",
       "default": true,
       "description": "Setup state management without registering initial reducers."
+    },
+    "skipESLintPlugin": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not register the NgRx ESLint Plugin."
     }
   },
   "required": []

modules/store/schematics/ng-add/schema.ts

@@ -9,4 +9,5 @@ export interface Schema {
    * Setup state management without registering initial reducers.
    */
   minimal?: boolean;
+  skipESLintPlugin?: boolean;
 }