Merge branch 'main' of https://github.com/tomalaforge/angular-challenges

README.md

@@ -78,6 +78,8 @@ If you would like to propose a challenge, this project is open source, so feel f
 </br>
 <img src="https://img.shields.io/badge/Nx--gray?logo=nx" alt="nx"/>
 
+<a href="./libs/custom-plugin/src/generators/custom-library/README.md"><img src="https://img.shields.io/badge/25-Extends Nx Library generator-red" alt="Create harness"/></a>
+
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
@@ -86,7 +88,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 <table>
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />24 🧩</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />25 🧩</a></td>
     </tr>
   </tbody>
 </table>

apps/anchor-scrolling/README.md

@@ -15,7 +15,7 @@ You begin with an application that has basic navigation and anchor navigation in
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve anchor-scrolling`
 5. _...work on it_
 6. Commit your work

apps/context-outlet-type/README.md

@@ -36,7 +36,7 @@ But in this part, we can pass to ListComponent, a list of **any object**. And we
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve context-outlet-type**
 5. _...work On it_
 6. Commit your work

apps/create-harness/README.md

@@ -41,7 +41,7 @@ Good luck !!! 💪
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve create-harness`
 5. _...work on it_
 6. Commit your work

apps/crud/README.md

@@ -26,10 +26,7 @@ What you will need to do:
 this.todos[todoUpdated.id - 1] = todoUpdated;
 
 // Prefer something like this, but need to be improved because we still want the same order
-this.todos = [
-  ...this.todos.filter((t) => t.id !== todoUpdated.id),
-  todoUpdated,
-];
+this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
 ```
 
 - Use **ChangeDectection.OnPush**
@@ -53,7 +50,7 @@ this.todos = [
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve crud**
 5. _...work On it_
 6. Commit your work

apps/declarative-to-reactive/README.md

@@ -18,7 +18,7 @@
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve declarative-to-reactive**
 5. _...work on it_
 6. Commit your work

apps/di/README.md

@@ -23,7 +23,7 @@ One way to achieve this is by adding a second argument to the pipe, but this is
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve di`
 5. _...work on it_
 6. Commit your work

apps/ngfor-enhancement/README.md

@@ -38,7 +38,7 @@ The goal is to **improve the ngFor directive**
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve ngfor-enhancement**
 5. _...work On it_
 6. Commit your work

apps/ngrx-1/README.md

@@ -28,7 +28,7 @@ In NgRx, **selectors** is a very powerful tool often **misused**. You should use
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve ngrx-1**
 5. _...work On it_
 6. Commit your work

apps/ngrx-notification/README.md

@@ -29,7 +29,7 @@ the application contain a root route, a lazy loaded route and a component with a
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve ngrx-notification**
 5. _...work on it_
 6. Commit your work

apps/overload/README.md

@@ -20,7 +20,7 @@ To achieve this, we will use overload functions.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **`npx nx serve overload`**
 5. _...work on it_
 6. Commit your work

apps/permissions/README.md

@@ -51,7 +51,7 @@ In **Routes.ts**, route all user to the correct **DashboardComponent** using **C
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve permissions**
 5. _...work on it_
 6. Commit your work

apps/pipe-easy/README.md

@@ -18,7 +18,7 @@ In this first exercice, you add calling a simple function inside your template.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve pipe-easy`
 5. _...work on it_
 6. Commit your work

apps/pipe-hard/README.md

@@ -18,7 +18,7 @@ In this third exercice, you want to access utils functions. Currently we cannot
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve pipe-hard`
 5. _...work on it_
 6. Commit your work

apps/pipe-intermediate/README.md

@@ -19,7 +19,7 @@ The goal is to create a `wrapFn` pipe to wrap your callback function though a pi
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve pipe-intermediate`
 5. _...work on it_
 6. Commit your work

apps/projection/README.md

@@ -18,7 +18,7 @@ Implement the City card.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve projection**
 5. _...work on it_
 6. Commit your work

apps/router-input/README.md

@@ -10,7 +10,7 @@ In this small application, you can pass data though routing to `TestComponent`.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve router-input`
 5. _...work on it_
 6. Commit your work

apps/rxjs-pipe-bug/README.md

@@ -26,7 +26,7 @@ The QA team reports a **bug**. The UI shows **All [topic] have been deleted** al
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve rxjs-pipe-bug`
 5. _...work on it_
 6. Commit your work

apps/rxjs-race-condition/README.md

@@ -24,7 +24,7 @@ WATCH MODE : `npx nx component-test rxjs-race-condition --watch`
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve rxjs-race-condition`
 5. _...work on it_
 6. Commit your work

apps/scroll-cd/README.md

@@ -27,7 +27,7 @@ You cannot opt-out of zone.js. If this code is part of a large project and you o
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve scroll-cd**
 5. _...work on it_
 6. Commit your work

apps/styling/README.md

@@ -18,7 +18,7 @@ In this challenge, you will need to use both CSS variables and :host-context to
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. **nx serve styling**
 5. _...work on it_
 6. Commit your work

apps/testing-forms/README.md

@@ -22,7 +22,7 @@ I created some `it` blocks but feel free to add more test if you like to. -->
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-forms` to play with the application
 5. `npx nx test testing-forms` to test your application with Testing Library
 6. `npx nx component-test testing-forms --watch` to test your application with Cypress

apps/testing-harness/README.md

@@ -17,7 +17,7 @@ Documentation for Angular Material component is [here](https://material.angular.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-harness` to play with the application
 5. `npx nx test testing-harness` to test your application with Testing Library
 6. _...work on it_

apps/testing-input-output/README.md

@@ -19,7 +19,7 @@ I created some `it` blocks but feel free to add more test if you like to.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-input-output` to play with the application
 5. `npx nx test testing-input-output` to test your application with Testing Library
 6. `npx nx component-test testing-input-output --watch` to test your application with Cypress

apps/testing-modal/README.md

@@ -22,7 +22,7 @@ I created some `it` blocks but feel free to add more test if you like to.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-modal` to play with the application
 5. `npx nx test testing-modal` to test your application with Testing Library
 6. `npx nx component-test testing-modal --watch` to test your application with Cypress

apps/testing-nested/README.md

@@ -20,7 +20,7 @@ I created some `it` blocks but feel free to add more test if you like to.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-nested` to play with the application
 5. `npx nx test testing-nested` to test your application with Testing Library
 6. `npx nx component-test testing-nested --watch` to test your application with Cypress

apps/testing-router-outlet/README.md

@@ -26,7 +26,7 @@ I created some `it` blocks but feel free to add more test if you like to.
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-router-outlet` to play with the application
 5. `npx nx test testing-router-outlet` to test your application with Testing Library
 6. `npx nx component-test testing-router-outlet --watch` to test your application with Cypress

apps/testing-table/README.md

@@ -22,7 +22,7 @@ I created some `it` blocks but feel free to add more test if you like to. -->
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-table` to play with the application
 5. `npx nx test testing-table` to test your application with Testing Library
 6. `npx nx component-test testing-table --watch` to test your application with Cypress

apps/testing-todos-list/README.md

@@ -22,7 +22,7 @@ I created some `it` blocks but feel free to add more test if you like to. -->
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve testing-todos-list` to play with the application
 5. `npx nx test testing-todos-list` to test your application with Testing Library
 6. `npx nx component-test testing-todos-list --watch` to test your application with Cypress

example.README.md

@@ -25,7 +25,7 @@
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 <!-- TODO: add you project app name directory -->
 4. `npx nx serve {project app name}`
 5. _...work on it_

libs/cli/src/generators/app/files/readme/README.md__tmpl__

@@ -18,7 +18,7 @@
 
 1. Fork the project
 2. clone it
-3. npm install
+3. npm ci
 4. `npx nx serve <%= projectName %>`
 5. _...work on it_
 6. Commit your work

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"
+}