chore: 🤖 upgrade ng and nx

.eslintignore

@@ -0,0 +1 @@
+node_modules

.nvmrc

@@ -1 +1 @@
-16.10.0
+lts/gallium

apps/showcase-e2e/cypress.config.ts

@@ -13,7 +13,7 @@ const cypressJsonConfig = {
 };
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__filename),
     ...cypressJsonConfig,
   },
 });

apps/showcase-e2e/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "showcase-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/showcase-e2e/src",
   "projectType": "application",

apps/showcase/jest.config.ts

@@ -3,21 +3,22 @@ export default {
   displayName: 'showcase',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      stringifyContentPathRegex: '\\.(html|svg)$',
-
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  globals: {},
   coverageDirectory: '../../coverage/apps/showcase',
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
   transform: {
-    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
+    '^.+.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        stringifyContentPathRegex: '\\.(html|svg)$',
+
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
 };

apps/showcase/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "showcase",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/showcase/src",
@@ -78,7 +79,7 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/showcase"],
+      "outputs": ["{workspaceRoot}/coverage/apps/showcase"],
       "options": {
         "jestConfig": "apps/showcase/jest.config.ts",
         "passWithNoTests": true

apps/showcase/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';

apps/showcase/src/app/modules/route-tags-showcase/route-tags-showcase.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { RouteConfigModule } from '@this-dot/route-config';
 import { FirstRouteComponent } from './components/first-route/first-route.component';
 import { RouteTagsShowcaseComponent } from './components/route-tags-showcase/route-tags-showcase.component';

apps/showcase/src/app/modules/rxidb-showcase/components/rxidb-auto-increment/rxidb-auto-increment.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import {
   addItem,
   connectIndexedDb,

apps/showcase/src/app/modules/rxidb-showcase/components/rxidb-key-value-pair-showcase/rxidb-key-value-pair-showcase.component.ts

@@ -6,7 +6,7 @@ import {
   FormGroupDirective,
   Validators,
 } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { connectIndexedDb, deleteItem, getObjectStore, read, setItem } from '@this-dot/rxidb';
 import { isTruthy } from '@this-dot/utils';
 import { merge, Observable, Subject, timer } from 'rxjs';

apps/showcase/src/app/modules/rxidb-showcase/rxidb-showcase.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MAT_LEGACY_FORM_FIELD_DEFAULT_OPTIONS as MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/legacy-form-field';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { RxidbRoutingModule } from './rxidb-routing.module';
 import { RxidbKeyValuePairShowcaseComponent } from './components/rxidb-key-value-pair-showcase/rxidb-key-value-pair-showcase.component';
 import { RxidbAutoIncrementComponent } from './components/rxidb-auto-increment/rxidb-auto-increment.component';

apps/showcase/tsconfig.app.json

@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "exclude": ["jest.config.ts"]

apps/vue-showcase/cypress.config.ts

@@ -15,5 +15,15 @@ export default defineConfig({
   e2e: {
     ...nxE2EPreset(__dirname),
     ...cypressJsonConfig,
+    /**
+     * TODO (https://github.com/thisdot/open-source/issues/161)
+     * Set the flag to true and fix tests.
+     *
+     * In Cypress v12,the testIsolation option is turned on by default.
+     * This can cause tests to start breaking where not indended.
+     * You should consider enabling this once you verify tests do not depend on each other
+     * More Info: https://docs.cypress.io/guides/references/migration-guide#Test-Isolation
+     **/
+    testIsolation: false,
   },
 });

apps/vue-showcase/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "vue-showcase",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/vue-showcase/src",
@@ -34,7 +35,7 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/vue-showcase"],
+      "outputs": ["{workspaceRoot}/coverage/apps/vue-showcase"],
       "options": {
         "jestConfig": "apps/vue-showcase/jest.config.ts",
         "passWithNoTests": true

apps/vue-showcase/tsconfig.app.json

@@ -4,6 +4,6 @@
     "outDir": "../../dist/out-tsc",
     "types": ["vue-i18n", "node"]
   },
-  "exclude": ["**/*.spec.js", "**/*.spec.jsx", "**/*.spec.ts", "**/*.spec.tsx"],
+  "exclude": ["**/*.spec.js", "**/*.spec.jsx", "**/*.spec.ts", "**/*.spec.tsx", "jest.config.ts"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.json"]
 }

apps/vue-showcase/tsconfig.e2e.json

@@ -6,5 +6,6 @@
     "allowJs": true,
     "types": ["cypress", "node"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"],
+  "exclude": ["jest.config.ts"]
 }

jest.preset.js

@@ -1,3 +1,15 @@
 const nxPreset = require('@nrwl/jest/preset').default;
 
-module.exports = { ...nxPreset };
+module.exports = {
+  ...nxPreset,
+  /* TODO: Update to latest Jest snapshotFormat
+   * By default Nx has kept the older style of Jest Snapshot formats
+   * to prevent breaking of any existing tests with snapshots.
+   * It's recommend you update to the latest format.
+   * You can do this by removing snapshotFormat property
+   * and running tests with --update-snapshot flag.
+   * Example: "nx affected --targets=test --update-snapshot"
+   * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
+   */
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+};

libs/cypress-indexeddb/.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+  "presets": [
+    [
+      "@nrwl/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
 }

libs/cypress-indexeddb/README.md

@@ -24,6 +24,21 @@ It supports:
 
 ### Installation
 
+**With Cypress versions _above_ 12.6.0:**
+
+1. Install the package:  
+   `npm install @this-dot/cypress-indexeddb`  
+   or  
+   `yarn add @this-dot/cypress-indexeddb`
+
+2. Import the plugin in your `cypress/support/commands.js` or `cypress/support/commands.ts` file:
+
+   ```typescript
+   import '@this-dot/cypress-indexeddb';
+   ```
+
+Please note, that cypress introduced the `Cypress.Commands.overwriteQuery` command in [12.6.0](https://docs.cypress.io/guides/references/changelog#12-6-0), therefore, cypress versions 12.0.0 to 12.5.x are not supported by this library.
+
 **With Cypress versions _below_ 12.0.0:**
 
 1. Install the 1.2.1 version of the package:  

libs/cypress-indexeddb/jest.config.ts

@@ -2,14 +2,15 @@
 export default {
   displayName: 'cypress-indexeddb',
   preset: '../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  globals: {},
   testEnvironment: 'node',
   transform: {
-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]sx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/cypress-indexeddb',

libs/cypress-indexeddb/package.json

@@ -20,6 +20,6 @@
     "typescript"
   ],
   "peerDependencies": {
-    "cypress": "< 12.0.0"
+    "cypress": "< 12.6.0"
   }
 }

libs/cypress-indexeddb/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "cypress-indexeddb",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/cypress-indexeddb/src",
   "projectType": "library",
@@ -12,7 +13,7 @@
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/libs/cypress-indexeddb"],
+      "outputs": ["{workspaceRoot}/coverage/libs/cypress-indexeddb"],
       "options": {
         "jestConfig": "libs/cypress-indexeddb/jest.config.ts",
         "passWithNoTests": true

libs/cypress-indexeddb/src/lib/alias-setup.ts

@@ -18,20 +18,26 @@ export function setDatabaseInternal(databaseName: string, database: IDBDatabase)
 type IDBItemType = 'store' | 'database';
 
 export function overrideAs(
-  originalAs: (subject: unknown, alias: string) => any,
-  subject: unknown,
-  alias: string
+  originalAs: Cypress.QueryFn<'as'>,
+  alias: string,
+  options?: Partial<Cypress.AsOptions>
 ) {
-  if (isIDBObjectStore(subject)) {
-    STORES.set(alias, subject);
-    return subject;
-  } else if (isIDBDatabase(subject)) {
-    DATABASE_ALIASES.set(alias, subject.name);
-    DATABASES.set(subject.name, subject);
-    return subject;
-  } else {
-    return originalAs(subject, alias);
-  }
+  const asArgs: [string, Partial<Cypress.AsOptions> | undefined] = [alias, options];
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const innerFn = originalAs.apply(this, asArgs);
+  return (subject: unknown) => {
+    if (isIDBObjectStore(subject)) {
+      STORES.set(alias, subject);
+      return subject;
+    } else if (isIDBDatabase(subject)) {
+      DATABASE_ALIASES.set(alias, subject.name);
+      DATABASES.set(subject.name, subject);
+      return subject;
+    } else {
+      return innerFn(subject);
+    }
+  };
 }
 
 export const getDatabase = getIDBItem('database');

libs/cypress-indexeddb/src/lib/cypress-indexeddb.ts

@@ -6,7 +6,7 @@ import { entries, keys } from './object-store-metadata';
 import { openIndexedDb } from './open-database';
 
 function setupIDBHelpers(): void {
-  Cypress.Commands.overwrite('as', overrideAs);
+  Cypress.Commands.overwriteQuery('as', overrideAs);
   Cypress.Commands.add(`clearIndexedDb`, deleteDatabase);
   Cypress.Commands.add(`openIndexedDb`, openIndexedDb);
   Cypress.Commands.add(`getIndexedDb`, getDatabase);

libs/ng-utils/jest.config.ts

@@ -3,15 +3,16 @@ export default {
   displayName: 'ng-utils',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    },
-  },
+  globals: {},
   coverageDirectory: '../../coverage/libs/ng-utils',
   transform: {
-    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
+    '^.+.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
   snapshotSerializers: [

libs/ng-utils/package.json

@@ -20,8 +20,8 @@
     "utilities"
   ],
   "peerDependencies": {
-    "@angular/common": ">= 12.0.0 < 15",
-    "@angular/core": ">= 12.0.0 < 15"
+    "@angular/common": ">= 12.0.0 < 16",
+    "@angular/core": ">= 12.0.0 < 16"
   },
   "dependencies": {
     "tslib": "^2.2.0"