feat(challenge25): extends Nx custom library

libs/custom-plugin/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["./package.json", "./generators.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/nx-plugin-checks": "error"
+      }
+    }
+  ]
+}

libs/custom-plugin/README.md

@@ -0,0 +1,11 @@
+# custom-plugin
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build custom-plugin` to build the library.
+
+## Running unit tests
+
+Run `nx test custom-plugin` to execute the unit tests via [Jest](https://jestjs.io).

libs/custom-plugin/generators.json

@@ -0,0 +1,9 @@
+{
+  "generators": {
+    "lib": {
+      "factory": "./src/generators/custom-library/generator",
+      "schema": "./src/generators/custom-library/schema.json",
+      "description": "extends library from nx/cli"
+    }
+  }
+}

libs/custom-plugin/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'custom-plugin',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/libs/custom-plugin',
+};

libs/custom-plugin/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@angular-challenges/custom-plugin",
+  "version": "0.0.1",
+  "type": "commonjs",
+  "generators": "./generators.json"
+}

libs/custom-plugin/project.json

@@ -0,0 +1,66 @@
+{
+  "name": "custom-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/custom-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/custom-plugin",
+        "main": "libs/custom-plugin/src/index.ts",
+        "tsConfig": "libs/custom-plugin/tsconfig.lib.json",
+        "assets": [
+          "libs/custom-plugin/*.md",
+          {
+            "input": "./libs/custom-plugin/src",
+            "glob": "**/!(*.ts)",
+            "output": "./src"
+          },
+          {
+            "input": "./libs/custom-plugin/src",
+            "glob": "**/*.d.ts",
+            "output": "./src"
+          },
+          {
+            "input": "./libs/custom-plugin",
+            "glob": "generators.json",
+            "output": "."
+          },
+          {
+            "input": "./libs/custom-plugin",
+            "glob": "executors.json",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/custom-plugin/**/*.ts",
+          "libs/custom-plugin/package.json",
+          "libs/custom-plugin/generators.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/custom-plugin/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

libs/custom-plugin/src/generators/custom-library/README.md

@@ -0,0 +1,64 @@
+<h1>Create a generator to extends @nx/angular-lib</h1>
+
+> Author: Thomas Laforge
+
+### Information
+
+Welcome to the marvelous world of Nx generators.
+
+Generators are awesome tools that can help you and your team generate code more quickly, especially for pieces of code that you use frequently. While using Nx, you create libraries regularly, but sometimes the default generator doesn't perfectly meet your needs.
+
+### Statement
+
+The goal of this challenge is to create a generator that extends the default library generator of Nx. You will need to override the default `jest.config.ts` and a `eslintrc.json` with a custom one.
+
+You can either use all the default parameters of the Nx library generator or choose to modify some and keep others as defaults. The choice is yours.
+
+### Constraints:
+
+You should only override the jest configuration is the `unitTestRunner` option is set at `JEST`, and you should only update the eslint configuration if the `linter` is set to `eslint`.
+
+---
+
+`jest.config.ts`
+
+```ts
+/* eslint-disable */
+export default {
+  displayName: '< libName >', // 👈 lib name
+  preset: '../../../jest.preset.js', // 👈 be careful with the path
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|lodash-es))'],
+};
+```
+
+---
+
+`eslintrc.json`
+
+add this rule `"@typescript-eslint/member-ordering": "off"` inside the rules properties of ts files.
+
+### Submitting your work
+
+1. Fork the project
+2. clone it
+3. npm ci
+4. _...work on it_
+5. Commit your work
+6. Submit a PR with a title beginning with **Answer:25** that I will review and other dev can review.
+
+<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A25+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="extends-lib"/></a>
+<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A25+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="extends-lib solution author"/></a>
+
+<!-- <a href="{Blog post url}" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/-Blog post explanation-blue" alt="extends-lib blog article"/></a> -->
+
+_You can ask any question on_ <a href="https://twitter.com/laforge_toma" target="_blank" rel="noopener noreferrer"><img src="./../../../../../logo/twitter.svg" height=20px alt="twitter"/></a>

libs/custom-plugin/src/generators/custom-library/files/src/index.ts.template

@@ -0,0 +1 @@
+const variable = "<%= name %>";

libs/custom-plugin/src/generators/custom-library/generator.spec.ts

@@ -0,0 +1,20 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, readProjectConfiguration } from '@nx/devkit';
+
+import { customLibraryGenerator } from './generator';
+import { CustomLibraryGeneratorSchema } from './schema';
+
+describe('custom-library generator', () => {
+  let tree: Tree;
+  const options: CustomLibraryGeneratorSchema = { name: 'test' };
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should run successfully', async () => {
+    await customLibraryGenerator(tree, options);
+    const config = readProjectConfiguration(tree, 'test');
+    expect(config).toBeDefined();
+  });
+});

libs/custom-plugin/src/generators/custom-library/generator.ts

@@ -0,0 +1,25 @@
+import {
+  addProjectConfiguration,
+  formatFiles,
+  generateFiles,
+  Tree,
+} from '@nx/devkit';
+import * as path from 'path';
+import { CustomLibraryGeneratorSchema } from './schema';
+
+export async function customLibraryGenerator(
+  tree: Tree,
+  options: CustomLibraryGeneratorSchema
+) {
+  const projectRoot = `libs/${options.name}`;
+  addProjectConfiguration(tree, options.name, {
+    root: projectRoot,
+    projectType: 'library',
+    sourceRoot: `${projectRoot}/src`,
+    targets: {},
+  });
+  generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
+  await formatFiles(tree);
+}
+
+export default customLibraryGenerator;

libs/custom-plugin/src/generators/custom-library/schema.d.ts

@@ -0,0 +1,3 @@
+export interface CustomLibraryGeneratorSchema {
+  name: string;
+}

libs/custom-plugin/src/generators/custom-library/schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "CustomLibrary",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use?"
+    }
+  },
+  "required": ["name"]
+}

libs/custom-plugin/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/custom-plugin/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/custom-plugin/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}