ci: use Nx-based CI workflow (#17)

.eslintrc.json

@@ -5,6 +5,7 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "excludedFiles": ["*.spec.ts"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
           "error",
@@ -13,8 +14,24 @@
             "allow": [],
             "depConstraints": [
               {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
+                "sourceTag": "scope:public",
+                "onlyDependOnLibsWithTags": ["scope:public"]
+              },
+              {
+                "sourceTag": "scope:internal",
+                "onlyDependOnLibsWithTags": ["scope:public", "scope:internal"]
+              },
+              {
+                "sourceTag": "type:app",
+                "onlyDependOnLibsWithTags": ["type:lib"]
+              },
+              {
+                "sourceTag": "type:lib",
+                "onlyDependOnLibsWithTags": ["type:lib", "type:test-util"]
+              },
+              {
+                "sourceTag": "type:e2e",
+                "onlyDependOnLibsWithTags": ["type:app"]
               }
             ]
           }

.github/workflows/ci.yml

@@ -0,0 +1,75 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+
+concurrency:
+  # Group concurrency on workflow, then:
+  # - Is merge run? Group on branch name (`refs/heads/main`)
+  # - Is pull request? Group on pull request branch name, for example `feat/add-awesome-feature`
+  group: >-
+    ${{ github.workflow }}-${{
+      github.event_name == 'push'
+        && github.ref
+        || github.head_ref
+    }}
+  # Run merge workflows in sequence to prevent parallel deployments and releases
+  # Cancel stale pull request runs in progress for the same branch
+  cancel-in-progress: ${{ github.event_name != 'push' }}
+
+env:
+  NODE_OPTIONS: --max-old-space-size=6144
+
+jobs:
+  # We're using Nx Cloud for Distributed Task Execution
+  # Reference: https://nx.dev/using-nx/dte
+  #
+  # The coordinator outputs the combination of task outputs from the agents,
+  # both terminal and file outputs
+  dte_coordinator:
+    name: DTE Coordinator
+    uses: nrwl/ci/.github/workflows/[email protected]
+    with:
+      # Commands run in parallel on this DTE coordinator
+      parallel-commands: |
+        yarn nx-cloud record -- yarn nx workspace-lint
+        yarn nx-cloud record -- yarn nx format:check
+      # Commands distributed between DTE agents
+      # Distribution strategy for 2 vCPUs per hosted runner (GitHub Free):
+      # lint: 2 tasks assigned at a time, 1 task per vCPU
+      # test: 1 task assigned at a time with 2 parallel processes, 1 process per vCPU
+      # build: 2 tasks assigned at a time, 1 task per vCPU
+      # e2e: 1 task assigned at a time, 1 task total
+      parallel-commands-on-agents: |
+        yarn nx affected --target=lint --parallel=2
+        yarn nx affected --target=test --parallel=1 --ci --maxWorkers=2
+        yarn nx affected --target=build --parallel=2
+        yarn nx affected --target=e2e --exclude=lumberjack-app-e2e --parallel=1
+      # Commands run sequentially on this DTE coordinator after parallel jobs
+      # For the end-to-end test of our application, we use the output bundle
+      final-commands: |
+        NX_CLOUD_DISTRIBUTED_EXECUTION=false yarn nx run lumberjack-app:use-lumberjack-bundle
+        yarn nx e2e lumberjack-app-e2e
+
+  # We're using Nx Cloud for Distributed Task Execution
+  # Reference: https://nx.dev/using-nx/dte
+  #
+  # Agents receive tasks to execute in bulk whenever they are ready or have
+  # finished their previous tasks
+  dte_agents:
+    name: DTE Agents
+    uses: nrwl/ci/.github/workflows/[email protected]
+    with:
+      # The Free GitHub plan has a limit of 20 concurrent jobs on Ubuntu images
+      # Reference: https://docs.github.com/en/actions/learn-github-actions/usage-limits-billing-and-administration
+      # If we need to, we can optimize for 2 simultaneous workflow runs:
+      # 2 x 1 main job   =  2 concurrent jobs
+      # 2 x 9 agent jobs = 18 concurrent jobs
+      # Total            = 20 concurrent jobs
+      #
+      # However, we don't have many projects or targets in this workspace, so we
+      # lower the number of agents to reduce spent compute time.
+      number-of-agents: 4

apps/lumberjack-app-e2e/project.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "..\\..\\node_modules\\nx\\schemas\\project-schema.json",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/lumberjack-app-e2e/src",
   "projectType": "application",
   "targets": {
@@ -23,6 +23,6 @@
       }
     }
   },
-  "tags": [],
+  "tags": ["scope:internal", "type:e2e"],
   "implicitDependencies": ["lumberjack-app"]
 }

apps/lumberjack-app-e2e/src/integration/console-driver.spec.ts

@@ -0,0 +1,23 @@
+describe('Console log driver', () => {
+  function visit() {
+    cy.visit('/', {
+      onBeforeLoad(win): void {
+        cy.stub(win.console, 'error').as('consoleError');
+        cy.stub(win.console, 'info').as('consoleInfo');
+      },
+    });
+  }
+  it('logs a greeting info message', () => {
+    visit();
+
+    cy.get('@consoleInfo').should('have.been.calledWith', 'info [Forest App] Hello, Forest!');
+  });
+
+  it('logs a critical forest fire message after 2 seconds', () => {
+    cy.clock();
+    visit();
+
+    cy.tick(2000);
+    cy.get('@consoleError').should('have.been.calledWith', 'critical [Forest App] The forest is on fire!');
+  });
+});

apps/lumberjack-app/.eslintrc.json

@@ -1,13 +1,10 @@
 {
   "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "**/node_modules/**/*"],
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",

apps/lumberjack-app/project.json

@@ -13,10 +13,7 @@
         "polyfills": "apps/lumberjack-app/src/polyfills.ts",
         "tsConfig": "apps/lumberjack-app/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": [
-          "apps/lumberjack-app/src/favicon.ico",
-          "apps/lumberjack-app/src/assets"
-        ],
+        "assets": ["apps/lumberjack-app/src/favicon.ico", "apps/lumberjack-app/src/assets"],
         "styles": ["apps/lumberjack-app/src/styles.scss"],
         "scripts": []
       },
@@ -74,10 +71,7 @@
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
-          "apps/lumberjack-app/**/*.ts",
-          "apps/lumberjack-app/**/*.html"
-        ]
+        "lintFilePatterns": ["apps/lumberjack-app/**/*.ts", "apps/lumberjack-app/**/*.html"]
       }
     },
     "test": {
@@ -87,7 +81,20 @@
         "jestConfig": "apps/lumberjack-app/jest.config.ts",
         "passWithNoTests": true
       }
+    },
+    "use-lumberjack-bundle": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "yarn delete-path-alias @ngworker/lumberjack",
+          "yarn delete-path-alias @ngworker/lumberjack/console-driver",
+          "yarn delete-path-alias @ngworker/lumberjack/http-driver",
+          "mkdir -p apps/lumberjack-app/node_modules/@ngworker/lumberjack",
+          "cp -r dist/libs/ngworker/lumberjack apps/lumberjack-app/node_modules/@ngworker/lumberjack"
+        ],
+        "parallel": false
+      }
     }
   },
-  "tags": []
+  "tags": ["scope:internal", "type:app"]
 }

apps/lumberjack-app/src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { LumberjackModule } from '@ngworker/lumberjack';
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
@@ -6,6 +7,7 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AppComponent, NxWelcomeComponent],
+      imports: [LumberjackModule.forRoot()],
     }).compileComponents();
   });
 
@@ -25,8 +27,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome lumberjack-app'
-    );
+    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome lumberjack-app');
   });
 });

apps/lumberjack-app/src/app/app.component.ts

@@ -1,10 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { AppLogger } from './app.logger';
+import { ForestService } from './forest.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
+  #subscriptions = new Subscription();
+
   title = 'lumberjack-app';
+
+  constructor(private logger: AppLogger, private forest: ForestService) {}
+
+  ngOnInit(): void {
+    this.logger.helloForest();
+
+    this.#subscriptions.add(this.forest.fire$.subscribe(() => this.logger.forestOnFire()));
+  }
+
+  ngOnDestroy(): void {
+    this.#subscriptions.unsubscribe();
+  }
 }

apps/lumberjack-app/src/app/app.logger.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { ScopedLumberjackLogger } from '@ngworker/lumberjack';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppLogger extends ScopedLumberjackLogger {
+  scope = 'Forest App';
+
+  forestOnFire = this.createCriticalLogger('The forest is on fire!').build();
+
+  helloForest = this.createInfoLogger('Hello, Forest!').build();
+}

apps/lumberjack-app/src/app/app.module.ts

@@ -1,13 +1,28 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { LumberjackLog, LumberjackModule, LumberjackOptions } from '@ngworker/lumberjack';
+import { LumberjackConsoleDriverModule } from '@ngworker/lumberjack/console-driver';
 
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
+const cypressLumberjackOptions: LumberjackOptions = {
+  format({ level, message, scope }: LumberjackLog): string {
+    const scopeLog = scope ? ` [${scope}]` : '';
+
+    // We leave out the `createdAt` timestamp to avoid having to construct
+    // timestamps in end-to-end tests
+    return `${level}${scopeLog} ${message}`;
+  },
+};
+
 @NgModule({
-  declarations: [AppComponent, NxWelcomeComponent],
-  imports: [BrowserModule],
-  providers: [],
   bootstrap: [AppComponent],
+  declarations: [AppComponent, NxWelcomeComponent],
+  imports: [
+    BrowserModule,
+    LumberjackModule.forRoot('Cypress' in window ? cypressLumberjackOptions : undefined),
+    LumberjackConsoleDriverModule.forRoot(),
+  ],
 })
 export class AppModule {}

apps/lumberjack-app/src/app/forest.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ForestService implements OnDestroy {
+  #fire$ = new ReplaySubject<void>(1);
+
+  fire$ = this.#fire$.asObservable();
+
+  constructor() {
+    setTimeout(() => this.#fire$.next(), 2000);
+  }
+
+  ngOnDestroy(): void {
+    this.#fire$.complete();
+  }
+}

libs/internal/console-driver/test-util/README.md

@@ -1,12 +1 @@
 # Internal test utilities for the console log driver
-
-## Buildable library
-
-This library is buildable because Lumberjack's tests depend on it. Lumberjack is a publishable library and since buildable and publishable libraries cannot depend on non-buildable libraries, this library has to be buildable. Because of this, we have added a `build` target to this library.
-
-The following files are related to the `build` target:
-
-- `ng-package.json`
-- `package.json`
-- `project.json`
-- `tsconfig.lib.prod.json`

libs/internal/console-driver/test-util/project.json

@@ -3,22 +3,6 @@
   "sourceRoot": "libs/internal/console-driver/test-util/src",
   "prefix": "ngworker",
   "targets": {
-    "build": {
-      "executor": "@nrwl/angular:ng-packagr-lite",
-      "outputs": ["dist/libs/internal/console-driver/test-util"],
-      "options": {
-        "project": "libs/internal/console-driver/test-util/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/internal/console-driver/test-util/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/internal/console-driver/test-util/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
     "test": {
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/libs/internal/console-driver/test-util"],
@@ -37,5 +21,5 @@
       }
     }
   },
-  "tags": ["type:test-util"]
+  "tags": ["scope:internal", "type:test-util"]
 }